Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 : Ajax Proses Login - Halo teman-teman semuanya, diartikel sebelumnya kita sudah membahas yaitu proses membuat Register dengan menggunakan Ajax. Pada artikel kali ini kita semua akan belajar bagaimana cara membuat proses Login dengan menggunakan teknik Ajax.
Langsubg saja kita mulai, silahkan buat file baru dengan nama login.php didalam folder project kita dan silahkan masukkan kode dibawah ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Login Akun</title>
</head>
<body>
<div class="container" style="margin-top: 50px">
<div class="row">
<div class="col-md-5 offset-md-3">
<div class="card">
<div class="card-body">
<label>LOGIN</label>
<hr>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" id="username" placeholder="Masukkan Username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" placeholder="Masukkan Password">
</div>
<button class="btn btn-login btn-block btn-success">LOGIN</button>
</div>
</div>
<div class="text-center" style="margin-top: 15px">
Belum punya akun? <a href="register.php">Silahkan Register</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
<script>
$(document).ready(function() {
$(".btn-login").click( function() {
var username = $("#username").val();
var password = $("#password").val();
if(username.length == "") {
Swal.fire({
type: 'warning',
title: 'Oops...',
text: 'Username Wajib Diisi !'
});
} else if(password.length == "") {
Swal.fire({
type: 'warning',
title: 'Oops...',
text: 'Password Wajib Diisi !'
});
} else {
$.ajax({
url: "cek-login.php",
type: "POST",
data: {
"username": username,
"password": password
},
success:function(response){
if (response == "success") {
Swal.fire({
type: 'success',
title: 'Login Berhasil!',
text: 'Anda akan di arahkan dalam 3 Detik',
timer: 3000,
showCancelButton: false,
showConfirmButton: false
})
.then (function() {
window.location.href = "dashboard.php";
});
} else {
Swal.fire({
type: 'error',
title: 'Login Gagal!',
text: 'silahkan coba lagi!'
});
}
console.log(response);
},
error:function(response){
Swal.fire({
type: 'error',
title: 'Opps!',
text: 'server error!'
});
console.log(response);
}
});
}
});
});
</script>
</body>
</html>
Dari kode diatas coba perhatikan kode berikut ini :
$(".btn-login").click( function()
Kode diatas adalah sebuah event klik dari jQuery apabila ada sebuah class dengan nama btn-login di klik, maka proses didalamnya akan dijalankan.
Kemudian perhatikan juga kode berikut ini :
var username = $("#username").val();
var password = $("#password").val();
Kode diatas merupakan sebuah deklarasi variabel yang mana variabel tersebut isinya mengambil dari sebuah inputan berdasarkan attribute HTML ID.
Kemudian perhatikan juga kode berikut ini :
if(username.length == "") {
Swal.fire({
type: 'warning',
title: 'Oops...',
text: 'Username Wajib Diisi !'
});
} else if(password.length == "") {
Swal.fire({
type: 'warning',
title: 'Oops...',
text: 'Password Wajib Diisi !'
});
} else {
//proses ajax untuk proses login
}
Kode diatas digunakan untuk mengecek validasi dari setiap inputan, misalkan jika username tidak diisi maka akan mengeluarkan peringatan error yang dihasilkan dari Sweet Alert2. Kurang lebih seperti gambar dibawah ini :
Oke sekarang jika kita perhatikan pada proses AJAX untuk proses login, URL yang akan digunakan untuk proses login adalah cek-login.php.
Maka sekarang silahkan kita buat file baru dengan nama cek-login.php didalam project kita, dan masukkan kode dibawah ini :
<?php
session_start();
include('koneksi.php');
$username = $_POST['username'];
$password = MD5($_POST['password']);
//query
$query = "SELECT * FROM tbl_users WHERE username='$username' AND password='$password'";
$result = mysqli_query($connection, $query);
$num_row = mysqli_num_rows($result);
$row = mysqli_fetch_array($result);
if($num_row >=1) {
echo "success";
$_SESSION['id_user'] = $row['id_user'];
$_SESSION['nama_lengkap'] = $row['nama_lengkap'];
$_SESSION['username'] = $row['username'];
} else {
echo "error";
}
?>
Kode diatas merupakan kode yang digunakan untuk proses login, sekarang mari kita bahas perbagian dari kode diatas, sekarang coba perhatikan kode berikut ini :
session_start();
Kode diatas digunakan untuk menginisialisasi sebuah session, karena kita akan membuat sebuah sistem login maka kita harus mengaktifkan session tersebut.
Kemudian coba perhatikan kode berikut ini :
$username = $_POST['username'];
$password = MD5($_POST['password']);
Kode diatas merupakan dklarasi variabel yang mana isinya didaptkan dari proses Ajax.
Kemudian perhatikan juga kode berikut ini :
//query
$query = "SELECT * FROM tbl_users WHERE username='$username' AND password='$password'";
$result = mysqli_query($connection, $query);
$num_row = mysqli_num_rows($result);
$row = mysqli_fetch_array($result);
Kode diatas merupakan sebuah Query untuk mengecek apakah data yang diinputkan ada didalam database.
Oke sekarang coba kita jalankan dengan cara mengetikkan http://localhost/register-login-ajax-php/login.php, maka kurang lebih tampilannya seperti berikut ini :
Dan sekarang coba masukkan username dan password, jika berhasil kurang lebih akan mendapatkan pesan suskes dan kalian akan diarahkan secara otomatis ke file yang bernama dashboard.php. Kurang lebih gambarnya seperti berikut ini :
Sekarang, silahakna buat file baru dengan nama dasboard.php, dan silahkan masukkan kode dibawah ini :
<?php
session_start();
if(!$_SESSION['id_user']){
header("location: login.php");
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Dashboard</title>
</head>
<body>
<div class="container" style="margin-top: 50px">
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item active">MAIN MENU</li>
<a href="dashboard.php" class="list-group-item" style="color: #212529;">Dashboard</a>
<li class="list-group-item">Profile</li>
<a href="logout.php" class="list-group-item" style="color: #212529;">Logout</a>
</ul>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-body">
<label>DASBOARD</label>
<hr>
Selamat Datang <?php echo $_SESSION['nama_lengkap'] ?>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
</body>
</html>
Coba perhatikan kode berikut ini :
<?php
session_start();
if(!$_SESSION['id_user']){
header("location: login.php");
}
?>
Kode diatas digunakan untuk pengecekan sebuah session user yang login. Jika session tidak ditemukan maka otomatis akan di redirect atau diarahkan ke halaman login.
Jika kalian melakukan proses login dan berhasil, maka kurang lebih tampilannya seperti berikut ini :
Terakhir, sekarang kita buat file baru dengan nama logout.php, dan silahkan masukkan kode berikut ini :
<?php
session_start();
session_destroy();
header("location:login.php");
?>
Kode diatas digunakan untuk menghapus session user yang sudah login dan kemudian akan diarahkan ke halaman login.php.
Oke mungkin sampai disini pembahasan tutorial membuat Register dan Login menggunakan Ajax di PHP, jika teman-teman masih mengalami kesulitan atau problem, silahkan bertanya melalui kolom komentar dibawah artikel. Terima Kasih