Cara Menciptakan Form Validasi Login Sederhana Memakai Ajax

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

Kanapa pemula ?

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

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

Form Validasi Login

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

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

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

Namun kalau 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 sanggup dipakai untuk memfalidasi pengisian form data-data yang di inginkan ibarat pengisian data profile, data mahasiswa,atau data-data lainnya..

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

Praktis 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 sanggup disingkat AJAX, ialah suatu teknik pemrograman untuk membuat aplikasi yang interaktif

Cara Kerja :

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

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

Itu sudah terang kerena AJAX melaksanakan pertukaran data di diam-diam 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 menentukan ajax ini untuk memproses perubahan data….

anda sanggup menerapkan ajax ke beberapa konsep ibarat membuat form login memakai PHP dan Mysql yang di mana proses pengecekan ke aslian data login tersebut memakai ajax

Nah kalau sudah menerima sedikit citra apa yang akan kita buat…

Membuat Form Validasi Login Dengan Ajax

Seperti biasa buka editor teman dan buat folder di htdoc dengan nama validasilogin dan buat file index.php, kemudian 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 teman simpulan membuat file dan telah meng-copy scrit di atas, coba di run..

Ketika di run lewat browser maka kalau teman 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 kalau kolom user kosong, kalau kolom password kosong dan akan tampil alert atau peringatan…

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

Nah satu lagi yang harus di perhatikan..

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

pastikan teman sudah memberi script tersebut ke dalam tombol submitnya…

kalau semua tahapan benar makan run kegiatan akan berjalan lancar..

sedikit suplemen dari saya..

teman sanggup saja bahwasanya memakai validasi bawaan dari html dengan menambahkan property autofocus required kedalam script inputan html…

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

perbedaan : kalau kita menggunaka script validasi dari ajax maka peringatan yang keluar berupa popup yang berisi goresan pena di atas browser..

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

yang di atas memakai fungsi dari ceklogin()

dan gambar diatas berikutnya kalau teman memakai properti bawaan HTML

tinggal teman pilih saja..

cara yang mana mungkin lebih efektif berdasarkan teman dan cocok untuk aplikasi yang teman bangun…

okee mungkin itu saja yang sanggup saya sampaikan perihal Form Validasi Login Sederhana Menggunakan Ajax..

semoga mempunyai kegunaan dan tutorial yang saya sampaikan berhasil teman 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

Tweet

Subscribe to receive free email updates: