Afid Arifin – Membuat Form Login dan Register dengan PHP dan MySQL, Halo berjumpa kembali bersama saya yang pada kesempatan kali ini kita akan membuat fasilitas login, register, serta dilengkapi dengan fitur remember me atau ingat saya dan logout menggunakan PHP dan MySQL.
Fitur tersebut sering kita jumpai pada aplikasi yang memerlukan autentikasi untuk masuk ke sistem baik itu sistem user dan sistem untuk administrator. Tentu keduanya memiliki fitur yang berbeda.
Lalu, bagaimana cara membuat form login dan register dengan PHP dan MySQL? Langsung saja simak langkah-langkah berikut.
Persiapan Bahan yang Diperlukan
Sebelum mengikuti tutorial membuat form login dan register dengan PHP dan MySQL serta dilengkapi dengan fitur logout dan rember me harap lengkapi beberapa bahan-bahan berikut ini.
- Buat file dengan nama connect.php, berfungsi untuk koneksi ke database.
- Buat file dengan nama index.php, berfungsi untuk menampilkan halaman setelah login sukses.
- Buat file dengan nama login.php, berfungsi untuk menampilkan halaman dan proses login.
- Buat file dengan nama logout.php, berfungsi untuk keluar dari akun.
- Buat file dengan nama register.php, berfungsi untuk pendaftaran akun.
Dalam tutorial kali ini, kita mencoba membuat studi kasus halaman pendaftaran mahasiswa. Silahkan kalian buat terlebih dahulu database baru dengan nama kampus lalu buat table dengan nama mahasiswa dengan struktur seperti berikut.
CREATE TABLE `mahasiswa` ( `id` int(10) NOT NULL, `email` varchar(30) NOT NULL, `password` varchar(256) NOT NULL, `nama_lengkap` varchar(30) NOT NULL, `nim` varchar(16) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Cara Membuat Form Login dan Register
Setelah bahan untuk membuat form login dan register dengan PHP dan MySQL telah dibuat atau dilengkapi, berikutnya silahkan ikuti langkah-langkah membuat form login dan register dengan PHP dan MySQL.
Langkah #1: Membuat Koneksi Database
Untuk membuat koneksi database, agar lebih sederhana kita menggunakan MySQLi dengan teknik MySQLi OOP. Silahkan copy dan pastekan kode PHP berikut ke dalam file connect.php yang telah dibuat sebelumnya lalu save.
<?php
session_start();
/**
* Isi dengan detail database.
*/
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'kampus';
/**
* Cek koneksi ke database
*/
$connect = new mysqli($db_host, $db_user, $db_pass, $db_name);
if($connect->errno) {
echo $connect->error;
exit;
}
?>Pastikan isi detail database kalian hanya di baris ke 7 hingga baris ke 10. Khusus untuk variable $db_pass bersifat opsional. Defaultnya dikosongi jika masih menggunakan XAMPP atau Laragon.
Langkah #2: Membuat Halaman Index
Langkah berikutnya adalah membuat halaman index yang berfungsi sebagai halaman yang pertama kali diakses setelah proses login berhasil. Silahkan copy dan pastekan kode berikut ke dalam file index.php yang telah dibuat sebelumnya lalu save.
<?php
require_once 'connect.php'; // Koneksi ke database.
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo (isset($_SESSION['is_login']) || isset($_COOKIE['_logged']) ? 'Beranda | '.$_SESSION['is_login'] : 'Beranda'); ?></title>
</head>
<body>
<p>
<?php
echo (isset($_SESSION['is_login']) || isset($_COOKIE['_logged']) ? 'Hi, '.$_SESSION['is_login'].' - <a href="logout.php">KELUAR >></a>' : 'Silahkan <a href="login.php">LOGIN</a> | <a href="register.php">REGISTER</a>');
?>
</p>
</body>
</html>Jika pengguna mengakses halaman index dalam keadaan belum login maka akan tampil menu Silahkan LOGIN | REGISTER dan jika sudah login akan muncul menu seperti Hi, Afid Arifin – KELUAR >>.
Langkah #3: Membuat Halaman Login
Langkah berikutnya adalah membuat form login dengan PHP dan MySQL sederhana. Silahkan copy dan pastekan kode PHP berikut seperti biasa ke dalam file login.php yang telah dibuat sebelumnya lalu save.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<?php
require_once 'connect.php'; // koneksi ke database.
/**
* Cegah akses ke halaman login saat sedang login.
*/
if(isset($_SESSION['is_login']) || isset($_COOKIE['_logged'])) {
header('location: /');
}
if(isset($_POST['submit'])) {
/**
* Mendapatkan data dari formulir login.
* Data: Email, Kata Sandi, dan Ingat Saya.
*/
$email = strip_tags($_POST['email']);
$password = strip_tags($_POST['password']);
$remember = (!empty($_POST['remember_me']) ? $_POST['remember_me'] : '');
if(empty($email) || empty($password)) {
/**
* Cek apakah formulir telah terisi data.
*/
echo '<b>Warning!</b> Silahkan isi semua data yang diperlukan.';
} elseif(count((array) $connect->query('SELECT email FROM mahasiswa WHERE email = "'.$email.'"')->fetch_array()) == 0) {
/**
* Cek jika email tidak terdaftar.
*/
echo '<b>Warning!</b> Email tidak terdaftar.';
} else {
/**
* Mengecek data mahasiswa.
*/
$mahasiswa = $connect->query('SELECT password, nama_lengkap FROM mahasiswa')->fetch_assoc();
if(password_verify($password, $mahasiswa['password'])) {
$_SESSION['is_login'] = $mahasiswa['nama_lengkap'];
/**
* Cek apakah tombol remember me diklik.
*/
if($remember) {
if(!isset($_COOKIE['is_logged'])) {
/**
* Atur cookie selama 1 hari.
* Rumus: 60 * 60 * 24 = 1 hari.
*/
setcookie('_logged', substr(md5($email), 0, 10), time() + (60 * 60 * 24), '/');
}
}
header('location: /'); // Alihkan ke halaman index.
} else {
echo '<b>Warning!</b> Kata sandi salah.';
}
}
}
?>
<form method="POST">
<input type="email" name="email" value="" autocomplete="off" placeholder="Email" required>
<br/>
<input type="password" name="password" value="" autocomplete="off" placeholder="Kata sandi" required>
<br/>
<input type="checkbox" name="remember_me"> Ingat Saya
<br/>
<input type="submit" name="submit" value="Login">
</form>
</body>
</html>Penjelasan mengenai proses login yang terjadi telah saya beri komentar di dalam kode PHP-nya. Halaman login masih sangat sederhana dan belum dilengkapi dengan validasi yang memadai karena tujuan kita hanya belajar.
Langkah #4: Membuat Halaman Logout
Cara membuat fitur logout dengan PHP terbilang cukup sederhana. Silahkan copy dan pastekan kode berikut ke dalam file logout.php yang telah dibuat sebelumnya lalu save.
<?php
require_once 'connect.php'; // Koneksi ke database.
if(isset($_SESSION['is_login']) || isset($_COOKIE['_logged'])) {
/**
* Menghapus sesi atau cookie yang aktif.
*/
if(session_destroy()) {
setcookie('_logged', null, -(60 * 60 * 24), '/');
header('location: /');
exit;
}
} else {
header('location: /');
}
?>Kode diatas telah saya buatkan secara khusus untuk menghapus sesi atau cookie yang sedang aktif. Kemudian, jika berhasil maka dialihkan ke halaman index.
Langkah #5: Membuat Halaman Register
Terakhir, kita membuat halaman untuk memproses pendaftaran akun. Silahkan copy dan pastekan kode PHP berikut ke dalam file register.php yang telah dibuat sebelumnya lalu save.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
</head>
<body>
<?php
require_once 'connect.php'; // Koneksi ke database
/**
* Cegah akses ke halaman login saat sedang login.
*/
if(isset($_SESSION['is_login']) || isset($_COOKIE['_logged'])) {
header('location: /');
}
if(isset($_POST['submit'])) {
/**
* Mendapatkan data dari formulir pendaftaran.
* Data: Email, Kata Sandi, Nama Lengkap, dan NIM.
*/
$email = strip_tags($_POST['email']);
$password = strip_tags($_POST['password']);
$name = strip_tags($_POST['name']);
$nim = strip_tags($_POST['nim']);
if(empty($email) || empty($password) || empty($name) || empty($nim)) {
/**
* Cek apakah formulir telah terisi data.
*/
echo '<b>Warning!</b> Silahkan isi data yang diperlukan.';
} elseif(count((array) $connect->query('SELECT email FROM mahasiswa WHERE email = "'.$email.'" OR nim = "'.$nim.'"')->fetch_array()) > 1) {
/**
* Cek jika email atau NIM telah terdaftar.
*/
echo '<b>Warning!</b> Email atau NIM telah terdaftar.';
} else {
/**
* Memasukkan data ke database.
*/
$insert = $connect->query('INSERT INTO `mahasiswa`(`email`, `password`, `nama_lengkap`, `nim`) VALUES("'.$email.'", "'.password_hash($password, PASSWORD_BCRYPT).'", "'.$name.'", "'.$nim.'")');
if($insert) {
echo 'Pendaftaran berhasil!';
} else {
echo 'Pendaftaran gagal!';
}
}
}
?>
<form method="POST">
<input type="text" name="email" value="" autocomplete="off" placeholder="Email">
<br/>
<input type="password" name="password" value="" autocomplete="off" placeholder="Kata sandi">
<br/>
<input type="text" name="name" value="" autocomplete="off" placeholder="Nama lengkap">
<br/>
<input type="text" name="nim" value="" autocomplete="off" placeholder="NIM">
<br/>
<input type="submit" name="submit" value="Register">
</form>
</body>
</html>Sama seperti membuat halaman login dengan PHP sebelumnya, penjelasan mengenai alur dari cara membuat register PHP telah saya beri komentar di dalam kode PHP-nya.
Penutup
Silahkan kalian praktekkan langkah demi langkah cara membuat form login dan register dengan PHP MySQL dilengkapi dengan fitur remember me dan logout yang telah saya siapkan di atas.
Jika masih bingung mengenai cara membuat form login dan register dengan PHP MySQL dan ingin ditanyakan, jangan sungkan untuk ditanyakan di kolom komentar yang tersedia. Sekian dan semoga bermanfaat.
