Cara Membuat Form Validasi Login Sederhana Menggunakan Ajax

dalam tutorial kali ini saya akan sedikit share ilmu sederhana yang saya targetkan untuk para pemula yang baru belajar bahasa pemrograman khususnya PHP….

Kanapa pemula ?

Masak iya ilmu sederhana untuk para master pemrograman yang sudah mahir..

Ya tentu ilmu seperti ini ngodingnya sudah di luar kepala untuk membuatnya..

Form Validasi Login

Okee saya jelaskan sedikit dulu tentang apa itu form validasi login ??

Form validasi login dalam pengertian sederhananya sebenarnya untuk pengecekan apakah si user sudah mengisi kolom password dan usernya…

Validasi hanya di batasi sampai dengan si user telah mengisi dua kolom input tersebut.

Namun jika user telah mengisi maka pengecekan akan berlanjut ke proses ke aslian user dan password apakah sudah terdaftar atau belum ke dalam sistem..

Sebenarnya script sederhana yang saya buat ini bisa digunakan untuk memfalidasi pengisian form data-data yang di inginkan seperti pengisian data profile, data mahasiswa,atau data-data lainnya..

Validasi akan memberikan alert di kolom mana yang masih kosong atau belum di isi..

Mudah sekali untuk membuatnya…

logikanya pun tidak serumit hantu matematika yang sudah terkenal…

Di judul yang saya buat itu terdapat kata-kata ajax…

Bagi yang masih awam atau newbie apa itu ajax? Sedikit saya jelaskan yaa

Pengertian Asynchronous Javascrit and XML (Ajax)

Asynchronous Javascrit and XML bisa disingkat AJAX, adalah suatu teknik pemrograman untuk menciptakan aplikasi yang interaktif

Cara Kerja :

Memindahkan sebagian besar interaksi pada computer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak di reload ulang secara keseluruhan jika terdapat perubahan..

Dari pengertian di atas, secara logika jika kita menggunakan AJAX untuk pemerosesan data maka akan meningkatkan kecepatan web yang kita bangun…

Itu sudah jelas kerena AJAX melakukan pertukaran data di belakang layar sehinggan tidak me-reload halaman secara ber-ulang…

Yang saya tau pun ke banyakan dari beberapa master pemrograman yang membangun aplikasi web dengan pemrosesan data yang besar lebih memilih ajax ini untuk memproses perubahan data….

anda bisa menerapkan ajax ke beberapa konsep seperti membuat form login menggunakan PHP dan Mysql yang di mana proses pengecekan ke aslian data login tersebut menggunakan ajax

Nah jika sudah mendapat sedikit gambaran apa yang akan kita buat…

Membuat Form Validasi Login Dengan Ajax

Seperti biasa buka editor sobat dan buat folder di htdoc dengan nama validasilogin dan buat file index.php, lalu tanpa berfikir copy saja script di bawah ini …

<script>
 function ceklogin(){
 var user= document.getElementById('user').value;
 var pass= document.getElementById('pass').value;
 if(user.replace(/^\s+|\s+$/g, '')==''){
  alert('Username Harus Diisi!');
  return false;
 } 
 if(pass.replace(/^\s+|\s+$/g, '')==''){
  alert('Password Harus diisi!');
  return false;
 }
 return true;
}
</script>
<div align="center">
<form method="post" action="">
<table>
 <tr>
  <th colspan="3">Form Validasi Login ijo-gading.com</th>
 <tr>
  <td>User</td>
  <td>
  <input type="text" name="user" id="user" placeholder="User" />
  </td>
 </tr>
 <tr>
  <td>Password</td>
  <td>
  <input type="password" name="pass" id="pass" placeholder="Password"/>
  </td>
 </tr>
 <tr>
    
 <td colspan="3" align="center">
 <button name="login" type="submit" name="login" onclick="ceklogin()"><strong>Login</strong></button> 
 <button type="reset" ><strong>Reset</strong></button>
 </td>
 </tr>
 </tr>
</table>
</form>
</div>

Setelah sobat selesai membuat file dan telah meng-copy scrit di atas, coba di run..

Ketika di run lewat browser maka jika sobat coba mengosongkan salah satu kolom input maka di browser akan tampil alert pemberitahuan lengkap bahwa kolom yang msih kosong harap di isi…

<script>
     function ceklogin(){
 var user= document.getElementById('user').value;
 var pass= document.getElementById('pass').value;
 if(user.replace(/^\s+|\s+$/g, '')==''){
  alert('Username Harus Diisi!');
  return false;
 } 
 if(pass.replace(/^\s+|\s+$/g, '')==''){
  alert('Password Harus diisi!');
  return false;
 }
 return true;
}
</script>

Coba perhatikan, bahwa fungsi di atas saya buat untuk mem validasi form inputan jika kolom user kosong, jika kolom password kosong dan akan tampil alert atau peringatan…

Perhatikan script document.getElementById('user').value; yang ada di dalam fungsi ceklogin(), pastikan pada saat sobat membuat script html inputan kolom terdapat properti id=”user” di dalamnya, jika tidak terdapat  id tersebut maka fungsi yang kita buat percuma karena tidak mengenali id kolom inputan yang sobat buat…

Nah satu lagi yang harus di perhatikan..

onclick="ceklogin()", script tersebut berguna untuk memanggil fungsi ceklogin() yang kita buat ketika tombol login di tekan…

pastikan sobat sudah memberi script tersebut ke dalam tombol submitnya…

jika semua tahapan benar makan run program akan berjalan lancar..

sedikit tambahan dari saya..

sobat bisa saja sebenarnya menggunakan validasi bawaan dari html dengan menambahkan property autofocus required kedalam script inputan html…

jadi jika di tulis keseluruhan maka akan menjadi seperti ini <input type="text" name="user" placeholder="User" autofocus required/>…

perbedaan : jika kita menggunaka script validasi dari ajax maka peringatan yang keluar berupa popup yang berisi tulisan di atas browser..

dan jika kita menggunakan property autofocus required bawaan Html maka peringatan yang muncul berada di samping kolom inputan dan berwarna merah…

yang di atas menggunakan fungsi dari ceklogin()

dan gambar diatas berikutnya jika sobat menggunakan properti bawaan HTML

tinggal sobat pilih saja..

cara yang mana mungkin lebih efektif menurut sobat dan cocok untuk aplikasi yang sobat bangun…

okee mungkin itu saja yang bisa saya sampaikan tentang Form Validasi Login Sederhana Menggunakan Ajax..

semoga berguna dan tutorial yang saya sampaikan berhasil sobat lakukan…

dan terus kembangkan saja cara cara di atas untuk membuat  membuat login multiuser dengan PHP dan MySql agar lebih kompleks

keep calm and happy coding