Tutorial Membuat Register & Login Ajax di PHP Dengan Bootstrap 4 : Ajax Proses Register - Halo teman-teman semuanya, melanjutkan diartikel sebelumnya yaitu membuat sebuah koneksi antara project kita dengan database.
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 :
Sampai disini pembahasan tentang Proses Membuat Register dengan menggunakan teknik Ajax, di artikel selanjutnya kita akan Membuat Proses Login dengan menggunakan teknik Ajax. Terima Kasih