PHP dan Jquery Memeriksa Ketersediaan Data Username Pada Form

PHP dan Jquery Memeriksa Ketersediaan Data Username Pada Form | Website yang informatif dan juga responsif saat ini sangat diperlukan, karena pengguna butuh sesuatu yang cepat untuk diketahui agar bisa mengambil tindakan selanjutnya.

Jika suatu proses yang dilakukan di website terasa berbelit dan terasa lama maka mereka kemungkinan besar akan meninggalkan website tersebut dan mencari apa yang dibutuhkannya di website lain yang menjadi saingan web Anda. Ini tentu tidak baik dan merugikan.

Faktanya menurut berbagai survei yang dilakukan, pengunjung yang menunggu loading website lebih dari 3 menit namun belum ada hasil, maka dia akan meninggalkan website tersebut. Oleh karena itulah website yang informatif dan responsif menjadi penting.

username availability

Teknologi AJAX membuat website menjadi lebih responsif, salah satu contohnya ketika proses registrasi pada sebuah website. Biasanya pengunjung akan memasukan sebuah username, data username tersebut tentu tidak boleh sama dengan orang lain, tiap orang harus berbeda.

Tentu akan sangat memudahkan jika website bisa seketika memberitahukan pengujung jika username yang dia inginkan sudah tidak bisa didaftarkan karena sudah ada orang lain yang terlebih dahulu menggunakan username tersebut sehingga dia bisa segera mencari username lain tanpa harus klik tombol apapun dan tanpa perlu me-refresh halaman (contoh nyata yaitu ketika kita ingin mendaftarkan email di yahoo atau gmail, ketika email yang Anda inginkan sudah terlebih dahulu dimiliki oleh orang lain maka akan muncul pemberitahuan saat itu juga).

Berikut cara mengecek ketersediaan username dengan AJAX jQuery PHP dan MySQL.

Buat database MySQL

Pertama buat database dengan nama PerusahaanABC, lalu buat tabel baru dengan nama Users yang terdiri dari

[ ID | username | password | fullname | phone | date ]

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(32) NOT NULL,
  `password` varchar(32) NOT NULL,
  `fullname` varchar(255) NOT NULL,
  `phone` varchar(16) NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `username`, `password`, `fullname`, `phone`, `date`) VALUES
(1, 'jurnalweb', '9336339511292fcd57ad9514ad53e473', 'Jurnal Web', '021-9189XXX', '2017-03-24 14:23:04'),
(2, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'Administrator', '081781818XXX', '2017-03-24 15:02:33');

Buat form dengan HTML

Pertama buat terlebih dahulu field untuk memasukan username, sebagai tambahan kita buat juga field password dan sebuah tombol submit. Namun yang penting untuk demo ini hanya username saja.

<div class="jwForm registrasi">
 <h1>Registrasi User Baru</h1>
 <p>
  <label for="username">Username</label> 
  <input type="text" id="username">
  <span id="pesan"></span>
 </p>
 <p>
  <label for="password">Password</label>
  <input type="password" name="password" id="password">
 </p>
 <p>
  <label for="password">Full Name</label>
  <input type="text" id="fullname">
 </p>
 <p>
  <label for="phone">Phone</label>
  <input type="text" id="phone">
 </p>
 <p>
  <input type="submit" value="Daftarkan">
 </p>
</div>

Styling dengan CSS

Kita akan buat tampilan ini sedikit cantik dengan bantuan CSS yang kodenya seperti berikut

body{
 background: #333;
 font-size: 16px;
}
.container{
 max-width: 500px;
 background: #DEF482;
 padding: 20px;
 margin: 10px auto;
}
label{
 display: inline-block;
 width: 100px;
 background: #dfdfdf;
}

Buat request AJAX dengan jQuery

Kita akan mengirimkan sebuah data username ke file PHP ketika kolom username diisi, untuk itu kita butuh bantuan AJAX jQuery.

$(document).ready(function(){
 $('#username').blur(function(){
  $('#pesan').html('<img style="margin-left:10px; width:10px" src="loading.gif">');
  var username = $(this).val();

  $.ajax({
   type : 'POST',
   url  : 'proses.php',
   data  : 'username='+username,
   success : function(data){
    $('#pesan').html(data);
   }
  })

 });
});

Terlihat disitu kita mengirim sebuah POST data, berisi username dan hasil responnya akan tertulis pada ID #pesan. Proses pengiriman permintaan dilakukan ketika kursor tidak lagi berada di field username, oleh karena itu digunakan fungsi blur() di jQuery.

Proses data dengan PHP dan MySQL

Untuk menangani data yang dikirim melalui AJAX tadi, kita membutuhkan script PHP untuk bisa mengakses database MySQL. Berikut adalah script singkatnya yang sudah menggunakan MySQLI.

$conn = mysqli_connect('localhost', 'root', '', 'PerusahaanABC');

$username = mysqli_real_escape_string($conn, $_POST['username']);
$sql = "select * from users where username = '$username'";
$process = mysqli_query($conn, $sql);
$num = mysqli_num_rows($process);
if($num == 0){
 echo " ✔ Username masih tersedia";
}else{
 echo " ❌ Username tidak tersedia";
}