Cek Ketersediaan Username Di Database, Menggunakan PHP, JQuery, Ajax, PDO

Banyak situs yang memiliki halaman pendaftaran. Setiap programmer mencoba membuat halaman pendaftaran yang menarik dengan cara menambahkan Validasi, Bentuk Form yang bagus dan lainnya. Mengapa tidak ditambahkan saja, fungsi untuk pengecekan bahwa username itu sudah pernah digunakan ? ini akan sangat mudah dan berjalan di jQuery versi 1.2 keatas. Dan Kang Digi rasa ini bebas dari SQL Injection. Untuk eksekusi Query SQL kita menggunakan PHP PDO.

Pertama kita buat 2 File – index.php (tampilan awal), check.php & checker.js

index.php

<html>
 <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="checker.js"></script>
 </head>
 <body>
  <input type="text" size="35" id="user" value="" placeholder="Type Your Desired Username"/>
  <input type="button" id="check" style="cursor:pointer;" value="Check Availablity"/><br/>
  <div style="margin:5px 15px;" id="msg">http://mysite.com/<b id="prev">subinsiby</b></div>
 </body>
</html>

check.php – Cek Username di Database

<?
include("config.php");
$user=strtolower($_POST['user']);
if(isset($_POST) && $user!=''){
 $sql=$dbh->prepare("SELECT username FROM users WHERE username=?");
 $sql->execute(array($user));
 if($sql->rowCount()==0){
  echo "available";
 }else{
  echo "not-available";
 }
}
?>

checker.js – Fungsi Menampilkan Hasil Ketersediaan Username

$(document).ready(function(){
 v=$("#user");
 $("#check").on('click',function(){
  v.attr("disabled","true");
  v.css({background:"url(../cdn/load.gif) no-repeat",backgroundSize: "2em",backgroundPosition: "center right"});
  $.post('check.php',{user:v.val().toLowerCase()},function(d){
   v.css("background","white");
   v.removeAttr("disabled");
   if(d=='available'){
    $("#msg").html("<span style='color:green;'>The username <b>"+v.val().toLowerCase()+"</b> is available</span>");
   }else{
    $("#msg").html("<span style='color:red;'>The username <b>"+v.val().toLowerCase()+"</b> is not available</span>");
   }
  });
 });
 v.bind('keyup',function(){
  $("#prev").text(v.val().toLowerCase());
 });
});

Dan jangan ketinggalan config.php

<?
$host = "localhost"; // Database Hostname
$port = "3306"; / /MySQL Port : Default : 3306
$user = "root"; // Databse Username Here
$pass = ""; // Databse Password Here
$db   = "tes_username"; // Database Name
$dbh  = new PDO('mysql:dbname='.$db.';host='.$host.';port='.$port,$user,$pass);
?>

Saat kita menekan tombol Check Availability , jQuery akan mengirim sebuah permintaan POST ke check.php dengan user parameter isi dari username. dan check.php akan cek ketersediaan username didalam POST dengan yang ada di database menggunakan AJAX. Jika data tidak ada didatabase, atau username belum pernah dipakai maka ajax akan menampilkan pesan The username xxx is available dan sebaliknya jika ternyata username yang diinputkan sudah ada didalam Database,maka responnya akan menjadi The username xxx is not available.