Cara Membuat Validasi Cek Username Untuk Form Registrasi Dengan AJAX Dan PHP Part1

Pada kesempatan kali ini saya akan menjelaskan cara membuat validasi cek username untuk form registrasi dengan ajax dan php. Perlu teman-teman ketahui sebelumnya, untuk membuat form registrasi di website kalian perlu adanya berbagai validasi baik itu untuk komponen inputan username, email, password, dll. Dari validasi tersebut sangatlah memudahkan user untuk menggunakannya, karena biasanya validasi tersebut berbentuk peringatan text yang real time berjalan tanpa harus menunggu proses submit dari suatu form. Namun untuk contoh yang akan saya berikan disini adalah untuk validasi komponen inputan username, karena untuk reqord dari username tersebut nantinya tidak boleh adanya duplikasi data di tabel users. Untuk membuatnya, teman-teman bisa ikuti tahapan yang saya berikan.

Berikut Tahapannya :

• Sebelumnya teman-teman buat terlebih dahulu satubuah database dengan nama terserah
• Selanjutnya buat table dengan nama users dan spesifikasinya sebagai berikut :

• Selanjutnya, kalian buat lagi satu buah file didalam folder project webserver teman-teman, dengan nama index.php.
• Jika sudah, selanjutnya teman-teman ketikan kode seperti berikut :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cara Membuat Validasi Cek Username Untuk Form Registrasi Dengan AJAX Dan PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
<div class="container">
	<div class="row">
        <div class="col-md-12">
            <form action="" method="POST" role="form">
            <fieldset>
            <H3 class="text-center">Cara Membuat Validasi Cek Username Untuk Form Registrasi Dengan AJAX Dan PHP</H3>

            <div class="form-group">
            <label for="namalengkap"><span class="req">* </span> Nama Lengkap: </label>
                    <input type="text" class="form-control" name="namalengkap" placeholder="nama lengkap"> 
            </div>

            <div class="form-group"> 	 
                <label for="username"><span class="req">* </span> username: </label>
                    <input class="form-control" type="text" name="username" oninput="cekusername()" placeholder="username" required> 
                    <div class="pesan"></div>
            </div>

            <div class="form-group">
                <label for="telp"><span class="req">* </span> Telpon: </label> 
                    <input class="form-control" type="text" name="telp" placeholder="(+62) 838xxxxxx" required>  
            </div>

            <div class="form-group">
                <label for="email"><span class="req">* </span> Email Address: </label> 
                    <input class="form-control" type="text" name="email" placeholder="email@mail.com" required>   
            </div>

            <div class="form-group">
                <label for="password"><span class="req">* </span> Password: </label>
                    <input name="password" type="password" class="form-control inputpass" required> 

                <label for="password"><span class="req">* </span> Password Confirm: </label>
                    <input name="ulangpassword" type="password" class="form-control" required>
            </div>

            <div class="form-group">
                <input class="btn btn-success" type="submit" name="submit" value="Register">
            </div>
            </fieldset>
            </form>
            </div>
            </div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
var username = "";
var cekusername = function(){
var username = $("input[name=username]").val();
  if(username!=""){
   $('.pesan').html("Sedang mencari....");
   $.ajax({
       url: "cek_username.php",
       type: 'GET',
       data: {username : username},
       success: function(data) {  

   $('.pesan').html('');
   if(data=="1"){
    $('.pesan').html('<h5 class="text-danger"> Username <b>'+username+'</b> Tidak Tersedia </h5>');
   }else{
    $('.pesan').html('<h5 class="text-success"> Username <b>'+username+'</b> Tersedia ✔ </h5>');
   }
   },
    error: function(e) {
    $('.pesan').html('Ada gangguan koneksi !');
  }
 });

 }
}
</script>	
</body>
</html>

• Selanjutnya, jika sudah save file tersebut.

Untuk pembahasan selanjutnya, akan saya jelaskan cara membuat validasi cek username untuk form registrasi dengan ajax dan php pada sesi berikutnya, semoga bermanfaat.