Mungkin kita sudah tidak asing lagi dengan yang namanya AJAX, AJAX atau Asynchronous JavaScript and XML merupakan  metode pertukaran data antar server yang dilakukan di belakang layar. Dengan teknologi AJAX memungkinkan user dalam mengakses web secara dinamis tanpa harus memuat halaman, dengan begitu load data menjadi lebih cepat dan efisien untuk ditampilakan.

Memeriksa Data sebelum disimpan ke database adalah cara yang baik untuk mencegah duplikat konten atau double entri pada database dan beberapa masalah lainnya. Didalam tutorial ini kita akan belajar bagaimana untuk memeriksa ketersediaan data pengguna dari database. Jika username atau pengguna sudah ada dalam database maka tampilkan pesan untuk memberitahu pengguna bahwa data sudah ada di database.

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);
            }
        })

    });
});

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";
}

Download Script

Jika Anda tertarik ingin mencoba script ini silahkan download DISINI dan jalankan di server local Anda (XAMPP/MAMP/LAMP).