Cek Username dengan jQuery dan PHP

Sering kita jumpai di setiap registrasi email, forum dan lain-lain, kita akan di beri notifikasi jika usrename atau email telah ada, dan kita diminta untuk memasukkan username atau baru. ini dilakukan pengelola agar tidak ada username atau email yang sama. berikut tips sederhana menggunakan php dan jquery.

CSS  :

berikut coding untuk css :

body {
 font-family:Arial, Helvetica, sans-serif
}
#availability_status {
 font-size:11px;
 margin-left:10px;
}
input.form_element {
 width: 221px;
 background: transparent url('bg.jpg') no-repeat;
 color : #747862;
 height:20px;
 border:0;
 padding:4px 8px;
 margin-bottom:0px;
}
label {
 width: 125px;
 float: left;
 text-align: left;
 margin-right: 0.5em;
 display: block;
}
.style_form {
 margin:3px;
}
#content {
 margin-left: auto;
 margin-right: auto;
 width: 600px;
 margin-top:200px;
}
#submit_btn {
 margin-left:133px;
 height:30px;
 width: 221px;
}

Database  :

dibuat tabel sederhana untuk menyimpan data dari username yang akan di cek

CREATE TABLE IF NOT EXISTS `member` (

  `userid` int(5) NOT NULL AUTO_INCREMENT,

  `username` varchar(25) NOT NULL,

  `email` varchar(25) NOT NULL,

  `full_name` varchar(25) NOT NULL,

  PRIMARY KEY (`userid`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

jQuery :

Kode jQuery untuk menangani ajax request, menampilkan notifikasi.

$(document).ready(function()//When the dom is ready 
{
$("#username").change(function() 
{ //jika username diganti di inputbox

var username = $("#username").val();//ambil isi variabel username yang ada
if(username.length > 3)//pasnjang username minimal 3 karakter
{
$("#availability_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
//tambahkan loading untuk cek status

$.ajax({  //buat ajax request
    type: "POST",  
    url: "ajax_check_username.php",  //file php
    data: "username="+ username,  //data
    success: function(server_response){  
   
   $("#availability_status").ajaxComplete(function(event, request){ 

 if(server_response == '0')//jika ajax_check_username.php mengembalikan nilai "0"
 { 
 $("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green"> Tersedia </font>  ');
 //tambahkan gambar Tersedia"
 }  
 else  if(server_response == '1')//jika mengembalikan value "1"
 {  
  $("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Tidak Tersedia </font>');
 }  
   
   });
   } 
   
  }); 

}
else
{

$("#availability_status").html('<font color="#cc0000">Username terlalu pendek</font>');
//jika username kurang dari 3 karakter 
}



return false;
});

});

PHP :

kode PHP ini digunakan oleh AJAX untuk cek username ke database.

<?php
include('database_connection.php');
//koneksi database 

if(isset($_POST['username']))//jika username telah di submit 
{
$username = mysql_real_escape_string($_POST['username']);//bersihkan username :)

$check_for_username = mysql_query("SELECT userid FROM member WHERE username='$username'");
//query untuk cek apakah username tersedia atau tidak 

if(mysql_num_rows($check_for_username))
{
echo '1';//jika username telah ada - Username tidak tersedia
}
else
{
echo '0';//jika record tidak ada - Username tersedia 
}

}

?>

Demikian tiips sederhana untuk cek username dengan jQuery dan PHP. untuk download source code disini. Dan untuk melihat demo disini.

---