Nusagatech

Cara Membuat Login Menggunakan Ajax, PHP, & MySQL

Tutorial Pembuatan Website

Artikel ini akan membahas mengenai cara membuat login menggunakan ajax, php dan mysql. Ada beberapa tahapan yang perlu dilakukan untuk membuat sebuah halaman login berfungsi dengan baik. Agar mudah memahami materi yang akan dibahas pada artikel kali ini, sebaiknya baca artikel Cara Membuat Halaman Login Menggunakan Bootstrap dan Cara Menggunakan Ajax Di JQuery terlebih dahulu. Kedua artikel tersebut merupakan pijakan dasar yang dapat digunakan pada artikel ini.

Membuat Database MySQL

Langkah pertama yang perlu kita lakukan untuk membuat sebuah login website adalah membuat database MySQL terlebih dahulu. Desain database yang sudah dirancang terlebih dahulu sebelum membuat script untuk login dapat memudahkan kita untuk menentukan atribut pengguna apa saja yang akan disimpan pada $_SESSION untuk memudahkan manajemen pengguna.

Pada kesempatan kali ini, database yang akan dibuat bernama tutorial dan tabel pengguna yang akan digunakan untuk login diberi nama users.  Sedangkan kolom-kolom yang dibuat pada tabel users adalah sebagai berikut:

  • id type int (11) auto increment: berisi id pengguna yang dibuat otomatis oleh sistem MySQL
  • email type varchar (50) : berisi email yang digunakan untuk login
  • password type varchar (255): berisi password pengguna yang sudah dihash menggunakan fungsi password_hash(); dengan algoritma BCRYPT.
  • nama type varchar(50): berisi nama lengkap pengguna
  • role type varchar (20): berisi identifier hak akses pengguna seperti superadmin, admin, dll.

Query SQL untuk membuat tabel di atas adalah sebagai berikut:

Untuk menambahkan pengguna, kita bisa menggunakan kode PHP di bawah ini:

Membuat Halaman Login

Halaman Login yang akan digunakan pada artikel ini bisa diambil dari artikel sebelumnya yang berjudul Membuat Halaman Login Menggunakan Bootstrap. Halaman login tersebut akan dimodifikasi sedemikian rupa sehingga menjadi halaman login web yang bekerja sebagaimana mestinya.

Mengirim Data Pengguna Melalui Ajax

Sebelum kita dapat mengirim data pengguna yang sudah diinput pada form login melalui ajax,kita perlu mengambil data form tersebut menggunakan JQuery. Untuk Lebih lanjut mengenaihal ini bisa membaca artikel sebelumnya yang berjudul Cara Menggunakan Ajax di JQuery.

Form login yang digunakan pada artikel kali ini tidak memiliki ID maka kita bisa langsung saja mengambil data form tersebut menggunakan selector form seperti berikut $("form").serialize(); .

Pertama, kita perlu membuat kode untuk menghadel eventketika tombol login diklik oleh pengguna. Kode tersebut adalah sebagai berikut:

Kedua,kita perlu mengambil data dari form dan menyimpannya pada sebuah variabel.Kodenya adalah sebagai berikut:

Ketiga, kita mengirim data pengguna melalui ajax menggunakan kode di bawah ini:

Memroses Data Pengguna Menggunakan PHP

Data form yang dikirim melalui Ajax perlu diproses PHP untuk mencocokkannya dengan data pengguna yang telah disimpan di dalam database. Jika data tersebut valid maka PHP akan menandaibahwa proses login berhasil.Sebaliknya jika data yang dikirim tidak valid makaPHPakan menandai bahwa proses login gagal.

Buat sebuah file dengan nama proses.php kemudian ambil data-data yang dikirim menggunakan kode  di bawah ini:

Setelah data-data yang dikirim oleh ajax disimpan padasebuah variabel maka selanjutnya kita perlu memvalidasi data tersebut. Kodevalidasi sederhana bisa dilihat seperti contoh di bawah ini:

Setelah data divalidasi, selanjutnya kita cocokkan data tersebut dengan data yang telah disimpan di dalam database. Pada ksempatan kali ini, koneksi dengan MySQL akan menggunakan PDO di bawah ini:

Sebelum mencocokkan data, kita perlu memulai session PHP terlebih dahulu agar kita bisa menyimpan data pengguna ke dalam session. Kode untuk memulai(start) session adalah

Kode untuk mencocokkan data yang diinput dengan data yang ada di database dalah sebagai berikut:

Halaman Sukses Login

Jika pengguna telah sukses login maka kita akan mengarahkannya ke halaman khusus. Pada kesempatan kali ini,pengguna akan diarahkan ke halaman proses,php?sukses. Kode yang digunakan pada halaman ini adalah sebagai berikut:

Logout Pengguna

Kode untuk logout pengguna adalah sebagai berikut:

Kode Lengkap Untuk Login

  • Halaman Login: login.php

  • Halaman Pemroses Data: proses.php

Demo Login

Hasil akhir dari tutorial ini bisa diakses melalui link demo berikut.

Kata Kunci

Ahmad Budairi

Seorang blogger yang bekerja menjadi freelancer di bidang bahasa pemrograman. Baca biografi Ahmad Budairi atau kunjungi lapaknya di Fiverr. Kontak via email: nusagates@gmail.com. Hubungi via 0822 2500 5825

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button
Close