Membuat halaman login secara ajax

Membuat halaman login secara ajax

685
0
SHARE

Akhirnya ada waktu buat nulis lagi gan… hehe. kali ini saya akan menulis tentang bagamana cara membuat halaman login secara ajax.

Dengan halaman login menggunakan ajax ini, maka halaman login kita tidak akan mengalami refresh secara keseluruhan dalam pengecekan username dan password. Metode pengecekan akan dilakukan secara asyncronus.

Cara membuat halaman login secara ajax.

Untuk membuatnya, berikut ini adalah langkah-langkahnya :

Step 1 : Buatlah file login.php dengan kode sbb :

Step 2 : Buatlah file cek_login.php dengan kode sbb :

Sekarang coba jalankan login.php melalui browser dan masukkan username dan password. Maka respon atas cek login akan ditampilkan dibawah form login tanpa ada refresh halaman.

Sedikit penjelasan :

Yang menjadi point utama disini adalah onsubmit=”ajax_login(); return false” pada element form login. ajax login() akan dipanggil ketika form tersebut disubmit. Sedangkan return false berfungsi agar submit form tidak berfungsi dan hanya menjalankan fungsi ajax_login()

Berikutnya yaitu fungsi ajax_login() sendiri, dimana dalam fungsi tersebut, akan dikirimkan username dan password menggunakan method POST dan responnya akan dimasukkan kedalam element yang memiliki id=hasil, yaitu div di bawah form. Oleh karena itu respon cek login muncul di bawah form (yaitu dalam div yang memiliki id=hasil)

Pada cek_login sendiri hanya menangkan username dan password yang dikirimkan secara ajax menggunakan method POST. Kemudian melakukan pengecekan kesesuaian. Pada prakteknya anda dapat melakukan pengecekan berdasarkan data yang ada dalam database.

oia, jangan lupa diincludekan jquerynya ya… pada contoh diatas saya menggunakan jquery pada google. hehe..

Mudah bukan.. anda dapat menggunakan cara yang sama untuk form-form yang lain, misalnya form ubah username atau ubah password… selamat mencoba… jangan lupa komentarnya ya.. terima kasih.

Bagikan artikel ini ya.. terima kasih

NO COMMENTS

LEAVE A REPLY