Cara Membuat Login Menggunakan Ajax, PHP, & MySQL

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:

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `email` varchar(50) NOT NULL DEFAULT '',
  `password` varchar(255) NOT NULL DEFAULT '',
  `nama` varchar(50) NOT NULL DEFAULT '',
  `role` varchar(20) NOT NULL DEFAULT ''
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `users` ADD PRIMARY KEY (`id`);
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

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

$data = array("nusagates@gmail.com", password_hash("123456", PASSWORD_BCRYPT), "Ahmad Budairi", "admin");
$query = $db->prepare("insert into users(email, password, nama, role) values(?, ?, ?, ?)");
$query->execute($data)?exit("User Berhasil Ditambahkan"):exit("User gagal ditambahkan");

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:

$("button").click(()=>{
    //kode untuklogin di sini
});

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

var data = $("form").serialize();

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

$.ajax({
    url: "proses.php?login",
    method: "post",
    data: data_form,
    success: (respon)=>{
        if(respon=="1"){
            // jika respon yang didapat 1 maka redirect pengguna ke halaman sukses
            window.location.href='proses.php?sukses';
        }else{
            // jika respon bukan 1 maka tampilkan respon dari server
            alert(respon);
        }
    },
    error: (err)=>{
        alert("Kesalahan: "+err.responseText);
    }
});

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:

$email = isset($_POST['email']) ? $_POST['email'] : ''; //mengambil data email
$password = isset($_POST['password']) ? $_POST['password'] : ''; //mengambil data password

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:

if(empty($email))exit("Email harus diisi"); //validasi email tidakboleh kosong
if (!filter_var($email, FILTER_VALIDATE_EMAIL))exit("Format email tidak valid"); //validasi format email yang diinput pengguna
if(empty($_GET['password']))exit("Password tidak boleh kosong"); //validasi password tidak boleh kosong

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:

$servername = "localhost";
$username = "root";
$password = "";
$database = "tutorial";

try {
    $db = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
    // menerapkan mode error PDO
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo "Koneksigagal: " . $e->getMessage();
}

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

session_status() == PHP_SESSION_NONE ? session_start() : ""; //memulai session PHP

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

//mengecek apakah email yang diinput ada di database pengguna
$query = $db->prepare("select id, email, password from users where email=?");
$query->execute(array($email));
if ($query->rowCount()) {
    //jika email tersebut tersedia maka selanjutnya validasi password
    $data = $query->fetchObject(); //mengambil data pengguna dalam bentuk object
    //verifikasi password pengguna
    if (password_verify($password, $data->password)) {
        //login berhasil
        $user_id = $_SESSION['user_id'] = $data->id; //menyimpan id pengguna di session
        exit("1");
    } else {
        exit("Password yang Anda Masukkan Tidak Valid");
    }
} else {
    //jika email yang diinput tidak tersedia di database
    exit("Maaf, email Anda belum terdaftar di sistem kami");
}

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:

if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];
    $query = $db->prepare("select * from users where id=?");
    $query->execute(array($user_id));
    if ($query->rowCount()) {
        $data = $query->fetchObject();
        echo "Selamat datang " . $data->nama.", ";
        echo "<a href='proses.php?keluar'>Keluar</a>";
    }
}else{
    //jika session tidak ada maka arahkan pengguna ke halaman login
    header("location: login.php");
}

Logout Pengguna

Kode untuk logout pengguna adalah sebagai berikut:

unset($_SESSION['user_id']);
session_destroy();
header("location: login.php");

Kode Lengkap Untuk Login

Halaman Login: login.php

<!DOCTYPE html>
<html>
<head>
	<title>Demo Login Menggunakan Ajax, PHP, MySQL oleh Nusagataes</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
	<link rel="stylesheet" href="style.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<!--Coded with love by Mutiullah Samim-->
<body>
	<div class="container h-100">
		<div class="d-flex justify-content-center h-100">
			<div class="user_card">
				<div class="d-flex justify-content-center">
					<div class="brand_logo_container">
						<img src="https://nusagates.com/wp-content/uploads/2016/11/logo-1-300x300.png" class="brand_logo" alt="Logo">
					</div>
				</div>
				<div class="d-flex justify-content-center form_container">
					<form>
						<div class="input-group mb-3">
							<div class="input-group-append">
								<span class="input-group-text"><i class="fas fa-user"></i></span>
							</div>
							<input type="text" name="email" class="form-control input_user" value="" placeholder="username">
						</div>
						<div class="input-group mb-2">
							<div class="input-group-append">
								<span class="input-group-text"><i class="fas fa-key"></i></span>
							</div>
							<input type="password" name="password" class="form-control input_pass" value="" placeholder="password">
						</div>
						<div class="form-group">
							<div class="custom-control custom-checkbox">
								<input type="checkbox" class="custom-control-input" id="customControlInline">
								<label class="custom-control-label" for="customControlInline">Ingat saya</label>
							</div>
						</div>
					</form>
				</div>
				<div class="d-flex justify-content-center mt-3 login_container">
					<button type="button" name="button" class="btn login_btn">Login</button>
				</div>
				<div class="mt-4">
					<div class="d-flex justify-content-center links">
						Belum punya akun? <a href="#" class="ml-2">Daftar Sekarang</a>
					</div>
					<div class="d-flex justify-content-center links">
						<a href="#">Lupa Password?</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
	$(()=>{
		$("button").click(()=>{
			var data_form = $("form").serialize();
			$.ajax({
				url: "proses.php?login",
				method: "post",
				data: data_form,
				success: (respon)=>{
					if(respon=="1"){
						// jika respon yang didapat 1 maka suruh browser untuk reload halaman
						window.location.href = 'proses.php?sukses';
					}else{
						// jika respon bukan 1 maka tampilkan respon dari server
						alert(respon);
					}
				},
				error: (err)=>{
					alert("Kesalahan: "+err.responseText);
				}
			});
		});
	});
	</script>
</body>
</html>

Halaman Pemroses Data: proses.php

$servername = "localhost";
$username = "root";
$password = "";
$database = "tutorial";

try {
    $db = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
    // menerapkan mode error PDO
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo "Koneksigagal: " . $e->getMessage();
}
session_status() == PHP_SESSION_NONE ? session_start() : ""; //memulai session PHP

if (isset($_GET['login'])) {
    $email = isset($_POST['email']) ? $_POST['email'] : ''; //mengambil data email
    $password = isset($_POST['password']) ? $_POST['password'] : ''; //mengambil data password

    if (empty($email)) exit("Email harus diisi"); //validasi email tidakboleh kosong
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) exit("Format email tidak valid"); //validasi format email yang diinput pengguna
    if (empty($password)) exit("Password tidak boleh kosong"); //validasi password tidak boleh kosong

    //mengecek apakah email yang diinput ada di database pengguna
    $query = $db->prepare("select id, email, password from users where email=?");
    $query->execute(array($email));
    if ($query->rowCount()) {
        //jika email tersebut tersedia maka selanjutnya validasi password
        $data = $query->fetchObject(); //mengambil data pengguna dalam bentuk object
        //verifikasi password pengguna
        if (password_verify($password, $data->password)) {
            //login berhasil
            $user_id = $_SESSION['user_id'] = $data->id; //menyimpan id pengguna di session
            exit("1");
        } else {
            exit("Password yang Anda Masukkan Tidak Valid");
        }
    } else {
        //jika email yang diinput tidak tersedia di database
        exit("Maaf, email Anda belum terdaftar di sistem kami");
    }
}

if (isset($_GET['sukses'])) {
    if (isset($_SESSION['user_id'])) {
        $user_id = $_SESSION['user_id'];
        $query = $db->prepare("select * from users where id=?");
        $query->execute(array($user_id));
        if ($query->rowCount()) {
            $data = $query->fetchObject();
            echo "Selamat datang " . $data->nama.", ";
            echo "<a href='proses.php?keluar'>Keluar</a>";
        }
    }else{
        //jika session tidak ada maka arahkan pengguna ke halaman login
        header("location: login.php");
    }
}

if(isset($_GET['keluar'])){
    unset($_SESSION['user_id']);
    session_destroy();
    header("location: login.php");
}

Demo Login

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

Cara Membuat Login Menggunakan Ajax, PHP, & MySQL

Membuat Database MySQL

Membuat Halaman Login

Mengirim Data Pengguna Melalui Ajax

Memroses Data Pengguna Menggunakan PHP

Halaman Sukses Login

Logout Pengguna

Kode Lengkap Untuk Login

Demo Login

Bacaan Menarik Lainnya

Rekomendasi Game Online Edukasi Keuangan untuk Anak

4 Rekomendasi Game Online Gratis untuk Refreshing

War Flash Sale Hingga Beauty Enthusiast, Gas Aja Pake IndiHome

TINGGALKAN KOMENTAR Batal membalas

Baru Terbit

Rekomendasi Game Online Edukasi Keuangan untuk Anak

4 Rekomendasi Game Online Gratis untuk Refreshing

War Flash Sale Hingga Beauty Enthusiast, Gas Aja Pake IndiHome

Share Spoiler Konten Korea Legal Berkat Layanan IndiHome

Dimana Kita Bisa Baca Novel Online Gratis? Ini Dia Loh Rekomendasi Situs Web Baca Novel Tanpa Biaya

Ikuti Kami