Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 : Koneksi

Database

Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 :

Koneksi Database - Halo teman-teman semuanya, pada kesempatan kali
ini kita semua akan belajar bagaimana cara membuat sebuh proses
Register dan Login Menggunakan Ajax di PHP dan MySQLi. Dan tentu saja
untuk tampilannya kita akan menggunakan Famework Bootstrap 4.

Register dan Login umumnya merupakan sebuah fitur yang ada didalam
website, seperti halnya jika kita tahu ada Facebook, Twitter, Github dan
masih banyak lagi. Situs-situs tersebut mempunyai fitur register untuk
mendaftar sebuah akun dan login untuk masuk kedalam akun tersebut.

Oke pada artikel kali ini kita semua akan mencoba membuat proses
Register dan Login dengan menggunakan PHP dan MySQLi dengan
menggunakan teknik AJAX.

Sebelum kita membuat proses Register dan Login tentunya kita harus
membuat sebuah koneksi antara PHP kita dengan MySQL. Jadi
pembahasan diartikel pertama ini adalah bagaimana cara membuat
sebuah koneksi database yang fungsinya untuk menghubungkan project
kita nanti ke database.

Oke mari kita mulai, silahkan buat folder baru dengan nama register-
login-ajax-php didalam folder C:/XAMPP/htdocs (jika kalian
menggunakan XAMPP).

Setelah itu silahkan kalian buka project kalian dengan text editor
seperti Sublime Text, Visual Studi Code atau dengan yang lainnya.

Sekarang silahkan kalian buat sebuah file baru dengan

nama koneksi.php dan simpanlah didalam folder project kalian, yaitu didalam
folder register-login-ajax-php.

Dan sialhkan kalian tulis kode dibawah ini ke dalam file koneksi.php, berikut
kodenya :
<?php

//deklasrasi variabel
$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "db_ajax_php";

$connection = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

if($connection) {
//echo "Koneksi Berhasil!";
} else {
echo "Koneksi Gagal! : ". mysqli_connect_error();
}

?>

Dari kode diatas kurang lebih fungsi-fungsinya seperti berikut ini.

 $db_host - variabel ini digunakan untuk menyimpan nama host kita,

yaitu localhost.
  $db_user - variabel ini digunakan untuk menyimpan username dari
MySQL kita, jika kita menggunakan XAMPP maka default isinya
adalah root.
 $db_pass - variabel ini digunakan untuk menympan password dari
MySQL kita, secara default adalah kosong, maka kita tidak perlu
mengisi variabel ini.
 $db_name - variabel ini digunakan untuk menyimpan nama database
yang sudah kita buat sebelumnya.

Kita bisa lihat dari file koneksi.php diatas, kita sudah memberikan nama

database yang akan kita gunakan nanti yaitu db_ajax_php, oleh sebab itu
berarti sekarang kita buat sebuah database baru dengan nama tersebut.

Sialhkan buka http://localhost/phpmyadmin, dan silahkan buat database

baru dengan nama db_ajax_php. Oke setelah itu silahkan kita bikin
sebuah tabel baru didalam database tersebut.

Sialhakan buat tabel baru dengan nama tbl_users. Dengan memiliki 4

kolom, kurang lebih strukturnya seperti gambar dibawah ini :
Dari gambar pembuatan tabel diatas, berikut penjelasan singkatnya:

 id_user - digunakan sebagai PRIMARY KEY dan dijadikan AUTO

INCREMENT dengan tipe data INT dan dengan Lenght / Value 11,
dimana kolom ini sebagai perwakilan satu record / satu baris.
 nama_lengkap - kolom ini digunakan untuk menyimpan data nama
lengkap dengan tipe data VARCHAR dengan Lenght / Value 100.
 username - kolom ini digunakan untuk menyimpan username dengan
tipe data VARCHAR dengan Lenght / Value 100.
 password - dan yang kolom terakhir ini adalah untuk menyimpan
password, di kolom ini kita menggunakan tipe
data VARCHAR dengan Lenght / Value 100 juga.
Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 : Ajax
Proses Register

Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 :

Pada kesempatan kali ini kita semua akan belajar bagaimana cara
membuat proses register dengan menggunakan teknik Ajax dan
Menggunakan Framework Bootstrap 4 untuk tampilannya.

Tidak ketinggalan juga, kita juga akan belajar menerapkan validasi data
yang diinputkan dengan menggunakan Library JavaScript yang sangat
terkenal untuk membuat sebuat alert. Yups benar yaitu Sweet Alert2.

Oke sekarang silahkan buat file baru dengan nama register.php didalam

folder project kalian, 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>Register 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>REGISTER</label>
<hr>

<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" class="form-control" id="nama_lengkap"
placeholder="Masukkan Nama Lengkap">
</div>

<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-register btn-block btn-

success">REGISTER</button>

</div>
</div>

<div class="text-center" style="margin-top: 15px">

Sudah punya akun? <a href="login.php">Silahkan Login</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-register").click( function() {

var nama_lengkap = $("#nama_lengkap").val();

var username = $("#username").val();
var password = $("#password").val();

if (nama_lengkap.length == "") {

Swal.fire({
 type: 'warning',
title: 'Oops...',
text: 'Nama Lengkap Wajib Diisi !'
});

} else 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
$.ajax({

url: "simpan-register.php",
type: "POST",
data: {
"nama_lengkap": nama_lengkap,
"username": username,
"password": password
},

success:function(response){

if (response == "success") {

Swal.fire({
type: 'success',
title: 'Register Berhasil!',
text: 'silahkan login!'
});

$("#nama_lengkap").val('');
$("#username").val('');
$("#password").val('');

} else {

Swal.fire({
type: 'error',
title: 'Register Gagal!',
text: 'silahkan coba lagi!'
});

console.log(response);
 },

error:function(response){
Swal.fire({
type: 'error',
title: 'Opps!',
text: 'server error!'
});
}

})

});

});
</script>

</body>
</html>

Dari kode diatas, coba perhatikan kode berikut ini :

$(".btn-register").click( function()

Kode diatas adalah sebuah event klik dari jQuery apabila ada sebuah class
dengan nama btn-register di klik, maka proses didalamnya akan
dijalankan.

Kemudian perhatikan juga kode berikut ini :

var nama_lengkap = $("#nama_lengkap").val();
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 (nama_lengkap.length == "") {

Swal.fire({
type: 'warning',
title: 'Oops...',
text: 'Nama Lengkap Wajib Diisi !'
 });

} else 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 menyimpan data / proses register

Kode diatas digunakan untuk mengecek validasi dari setiap inputan,

misalkan jika nama lengkap 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 menyimpan
data register, URL yang akan digunakan untuk menyimpan data
adalah simpan-register.php.
Maka sekarang silahkan kita buat file baru dengan nama simpan-
register.php didalam project kita, dan masukkan kode dibawah ini :

<?php

include('koneksi.php');

$nama_lengkap = $_POST['nama_lengkap'];
$username = $_POST['username'];
$password = MD5($_POST['password']);

//query insert data ke dalam database

$query = "INSERT INTO tbl_users (nama_lengkap, username, password) VALUES
('$nama_lengkap', '$username', '$password')";

if($connection->query($query)) {

echo "success";

} else {

echo "error";

Kode diatas diigunakan untuk menympan proses registrasi, mari kita bahas
perbagian-bagian kodenya. Sekarang coba perhatikan kode berikut ini :
include('koneksi.php');

Kode diatas digunakan untuk menghubungkan project kita dengan

Database, jika file koneksi.php tidak dipanggil otomatis kita tidak akan bisa
memasukkan data ke database.

Kemudian perhatikan juga kode berikut ini :

$nama_lengkap = $_POST['nama_lengkap'];
$username = $_POST['username'];
$password = MD5($_POST['password']);

Kode diatas merupakan deklarasi variabel yang mana isinya didapatkan

dari proses AJAX, dan jika kalian perhatikan juga pada variabel $password,
disitu kita tambahkan fungsi MD5( ), fungsi ini digunakan untuk mengacak
password kita.
Dan kemudian coba perhatikan kode berikut ini :
//query insert data ke dalam database

$query = "INSERT INTO tbl_users (nama_lengkap, username, password) VALUES

('$nama_lengkap', '$username', '$password')";

Kode diatas merupakan sebuah Query untuk menyimpan data kedalam

table yang bernama tbl_user. Jika proses Query berjalan dengan benar
makan akan menamplkan response atau tulisan “sukses” dan apabila
gagal akan menampilkan pesan “error”.

Sekarang silahkan kita coba menguji proses Register kita dengan cara
mengetikkan di browser http://localhost/register-login-ajax-php/register.php.
Maka kurang lebih tampilannya seperti gambar diabwah ini :

Dan jika kalian berhasil memasukkan data ke database, kurang lebih

pesan suksesnya seperti gambar diabawah ini :
Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 : Ajax
Proses Login

Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 :

Ajax Proses Login 

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.