CARA CEK USERNAME SECARA LIVE DENGAN PHP JQUERY



Hallo pembaca, tentu anda paham tentang cek username secara live, dimana saat kita memasukkan atau input ke textfield akan ada proses pengecekan ke database, oke langsung saja ke pokok pembahasan.


Pertama kita buat dulu databasenya

CREATE DATABASE `dbcekuser`;

CREATE TABLE `dbcekuser`.`tbluser` (

`iduser` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 50 ) NOT NULL

) ENGINE = InnoDB;

Kedua  kita buat dua buah skrip, yaitu skrip cekuser.php dan check.php
Skrip cekuser.php berisi tentang desain form, lebih jelasnya dibawah ini
---------------------------------------------------------------------------------------------------------------------------------
<html>

<head>

<link rel="stylesheet" href="main.css" type="text/css" />

<script src="jquery-1.4.js"></script>

<script>

$(document).ready(function(){

                $("#username").change(function(){

    $('#pesan').html("<img src='loader.gif' /> checking ...");            

    var username  = $("#username").val();

   

    $.ajax({

     type:"POST",

     url:"check.php",   

     data: "username=" + username,

     success: function(data){                

       if(data==0){

          $("#pesan").html('<img src="tick.png"> Username belum digunakan');

                        $('#username').css('border', '3px #090 solid');            

       } 

       else{

          $("#pesan").html('<img src="cross.png"> Username sudah dipakai');      

                        $('#username').css('border', '3px #C33 solid');            

       }

     }

    });

                })

});

</script>

</head>

<body>

<div class="demo" style="width: 360px;">

<p>Username : <br /><input type="text" id="username" /> <span id="pesan"></span></p>

<p>Password : <br /><input type="password" id="password" /></p>

</div>

</body>

</html>
 ---------------------------------------------------------------------------------------------------------------------------------

Dan sekarang kita buat skrip check.php
 ---------------------------------------------------------------------------------------------------------------------------------
<?php

mysql_connect("localhost","root","");

mysql_select_db("dbcekuser");



$sql = mysql_query("SELECT * FROM tbluser WHERE username='$_POST[username]'");

$cekdata = mysql_num_rows($sql);

echo $cekdata;

?>
---------------------------------------------------------------------------------------------------------------------------------
Oke sekarang kita coba jalankan skrip cekuser.php, apabila anda isikan pada textfield username maka akan tampil proses loading untuk mengecek inputan yang anda masukkan dalam textfield, inputan tersebut diproses oleh file check.php yang melakukan pengecekan pada database.

Apabila username sudah ada dalam database maka inputan tersebut tidak boleh digunakan lagi, karena mempunyai sifat yang unik atau tidak boleh sama, satu orang harus mempunyai database yang berbeda dengan yang lainnya. Lihat dan perhatikan gambar dibawah ini :



Apabila username belum digunakan akan ada muncul informasi bahwa username teresedia, perhatikan dambar dibawah ini :


Kalau kita perhatikan dalam sebuah pembuatan program sangatlah penting dalam pengecekan konten atau isi dalam database, hal tersebut supaya tidak terjadi error saat program dijalankan. Sekian dulu tutorial kali ini, tunggu tutorial pemrograman web selanjutnya, Jika kalian ingin mencoba skrip sudah sudah jadi bisa diambil disini.
 




0 Response to "CARA CEK USERNAME SECARA LIVE DENGAN PHP JQUERY"

Post a Comment