Sistem Login & Logout PHP Dengan MySQLi Statement
Termasuk Session yang Diaktifkan Demi Keamanan
Untuk membuat sistem login pada PHP memerlukan halaman yang hanya dapat diakses untuk pengguna login saja, memerlukan database dengan tabel yang memiliki kredensial untuk login, memerlukan form login baik berupa halaman login ataupun hanya form di dropdown menu dan hal lainnya yang akan dijelaskan di artikel ini.
Saya akan contohkan halaman yang memerlukan login untuk mengaksesnya ini denga halaman Dasbor, tapi halaman depan tidak memerlukan login (siapapun dapat mengaksesnya) dan saya sudah siapkan halaman login untuk melakukan login dan sebagai pengalihan jika seseorang mencoba mengakses dasbor tapi belum login maka diarahkan secara otomatis ke halaman login.
Config
Pertama, kalian harus menghubungkan terlebih dahulu file PHP dengan database yang bersangkutan atau biasa disebut config dan biasa disimpan sebagai config.php. Lihat disini bagaimana cara menghubungkan / koneksi PHP dengan database.
Index.php Dasbor
Pada file halaman dasbor atau halaman yang memerlukan login untuk mengaksesnya (misalnya disini saya contohkan dengan index.php di folder dasbor) silahkan tambahkan kode berikut:
Baca Juga:
<?php
ob_start();
session_start();
if(!isset($_SESSION['akun_id'])) header("location: login.php");
include "assets/includes/config.php";
?>
Kode berikut diterapkan di bagian atas file index.php dasbor. Disini dikatakan jika tidak ada session dari akun (akun adalah nama table database punya saya yang memiliki kredensial untuk login yaitu username dan password) maka akan diarahkan ke login.php agar pengguna tersebut login terlebih dahulu sebelum dapat mengakses dasbor. akun_id diambil dari data yang nanti kita buat di login.php. Jika nanti pada login.php kalian membuat session member_id maka disini pun terapkan member_id.
Terdapat include yaitu memasukkan data yang ada pada config.php yang terletak di folder assets/includes/. Ini tidak wajib menggunakan include, saya menggunakan include agar terlihat lebih rapih dan code lebih pendek. Jika kalian tidak ingin menggunakan include seperti ini maka harus memasukkan semua code yang ada di config.php di posisi ini.
Jika ingin mempelajari lebih lanjut tentang include, silahkan klik disini.
Inilah yang terdapat didalam file config.php:
<?php
global $koneksi;
$nameserver = "localhost";
$username = "root";
$password = "";
$namadb = "tutorial-login";
$koneksi = mysqli_connect($nameserver,$username,$password,$namadb);
if(!$koneksi) {
die("Koneksi Gagal".mysqli_connect_error());
}
?>
Penjelasan lengkap tengtang koneksi database dengan PHP seperti yang ada pada file config ini silahkan kunjungi artikel saya tentang koneksi database ke PHP.
Selanjutnya jangan lupa pada bagian bawah file ditutup koneksi database nya seperti ini:
<?php
mysqli_close($koneksi);
ob_end_flush();
?>
Letakkan kode ini di bagian paling bawah code file sebagai penutup dari code pembuka yang tadi diatas. $koneksi ini adalah nama variabel yang saya buat untuk menghubungkan database dan PHP yang saya letakkan di config.php, silahkan ganti $koneksi dengan variabel yang kalian buat untuk menghubungkan database dan PHP. Karena ini tujuannya untuk menutup koneksi database tersebut.
Login.php
Sekarang, beralih ke file login.php, pastikan pada file ini kalian sudah memiliki form login.
Jika belum memiliki form login, silahkan buat terlebih dahulu atau lihat disini bagaimana membuat form yang mungkin bisa dijadikan contoh.
Pada form login ini silahkan beri input yang bisa dijadikan kredensial untuk login misalnya username, password dan tombol login. Pastikan pada setiap input diberi nama (name=””) yang nantinya akan kita panggil isi dari name=”” ini di proses login. Kemudian pada tag form nya jangan lupa beri method=”post”, form yang saya miliki seperti ini:
<form method="post">
<table>
<tr>
<td colspan="2">
<h2>Form Login</h2>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" value="" placeholder="Username" required>
</td>
</tr>
<tr>
<td>
<input type="password" name="password" value="" placeholder="Kata Sandi" required>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Kirim" name="submit_login">
</td>
</tr>
</table>
</form>
Lihat ! Setiap input memiliki name=”” dan form diatur menjadi method=”post”, ini adalah keperluan untuk proses login.
Pada halaman login.php dibagian atasnya silahkan tambahkan code berikut:
<?php
ob_start();
session_start();
if(isset($_SESSION['akun_username'])) header("location: index.php");
include "assets/includes/config.php";
/* PROSES LOGIN */
if(isset($_POST['submit_login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$sql_login = mysqli_query($koneksi, "SELECT * FROM akun WHERE username = '$username' AND password = '$password'");
if(mysqli_num_rows($sql_login)>0) {
$row_akun = mysqli_fetch_array($sql_login);
$_SESSION['akun_id'] = $row_akun['id'];
$_SESSION['akun_username'] = $row_akun['username'];
header("location: index.php");
}else {
header("location: login.php");
}
}
?>
Seperti biasa ob_start dan session_start adalah buffer pada header untuk memulai koneksi database. Jika ada session akun_username (pada table akun saya memiliki bidang yang namanya username dan ingin di cocokkan dengan data username yang dimasukkan pengguna login. Jika kalian memiliki nama yang beda silahkan sesuaikan yang kalian miliki misalnya member_namapengguna). Kemudian header location diarahkan ke index.php Dasbor jika memang pengguna ini memiliki session login tapi jika tidak ada session / login gagal maka tidak akan diarahkan.
Perhatikan pada /* PROSES LOGIN */, disitu terdapat semua nama yang sudah diterapkan pada form dan bidang input tadi. Dan ada variabel $sql_login yang saya buat sendiri (silahkan gunakan nama yang kalian inginkan) yang digunakan untuk memeriksa apakah data yang di input pengguna pada form login itu ada pada database tabel akun.
Pada if(mysqli_num_rows($sql_login)>0) disini hanya tambahan saja untuk mengambil data pengguna login tersebut (biasa digunakan untuk log aktifitas akun / menampilkan data yang hanya dibuat oleh akun login tersebut). Dan jika memang ada data tersebut pada data akun pengguna login ini maka header location (diarahkan ke) index.php dasbor, tapi jika tidak ada (else) akan diarahkan ke login.php (tidak masuk).
Selanjutnya, tidak lupa kita tutup pembukaan koneksi database file ini dengan:
<?php
mysqli_close($koneksi);
ob_end_flush();
?>
Dibagian akhir halaman login.php ini (seperti tadi pada halaman index.php dasbor).
Sekarang, kalian telah berhasil membuat sistem login silahkan dicoba.
Logout.php
Tidak lupa juga membuat sistem logout, silahkan buat file baru lalu save sebagai logout.php (atau beri nama apapun sesuai keinginan) dan berikan kode ini di dalam file tersebut:
<?php
session_start();
$_SESSION["akun_id"];
$_SESSION["akun_username"];
unset($_SESSION["akun_id"]);
unset($_SESSION["akun_username"]);
session_unset();
session_destroy();
header("location:login.php");
?>
Seperti biasa diawali dengan session_start untuk memulai buffrer session pada halaman / file ini, kemudian pada session[‘akun_id’] dan akun_username ini sesuai dengan data yang diambil pada sistem login dan pemeriksaan session di index.php dasbor. Kita sebutkan ulang disini karena akan kita unset($_SESSION) tersebut. Lalu tambahkan session_unset untuk melepaskan session tersebut dan session_destroy untuk menghancurkan session tersebut. Ini akan sangat bermanfaat karena dengan sistem logout seperti ini, ketika pengguna berhasil logout dan klik back pada browser tidak akan berfungsi (tidak akan kembali ke dasbor) tapi akan dialihkan ke login.php. Lebih aman !!!
Seperti yang dijelaskan sebelumnya header location adalah pengarahan, jadi ketika pengguna berhasil logout akan diarahkan ke login.php. Kalian dapat mengarahkan kemanapun yang kalian inginkan tinggal diganti login.php dengan URL file lain.
Sekarang situs kalian sudah memiliki sistem login dan logout, mantap !
Bagaimana Cara Menampilkan Alert Jika Kredensial Login Salah ?
Untuk menampilkan notif seperti ini jika data yang dimasukkan pengguna itu salah baik username atau password atau apapun yang kalian gunakan pada form login, kita bisa manfaatkan parameter link / URL.
Misalnya pada form login diatas akan saya tambahkan beberapa code, maka jadi seperti ini:
<form action="" method="post">
<table>
<tr>
<td colspan="2">
<h2>Form Login</h2>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" value="" placeholder="Username" required class="kanan">
</td>
</tr>
<tr>
<td>
<input type="password" name="password" value="" placeholder="Kata Sandi" required>
</td>
</tr>
<?php if(isset($_GET['login-gagal'])) {?>
<tr>
<td>
<div>
<p>Maaf, Username / Password yang Anda masukkan Salah</p>
</div>
</td>
</tr>
<?php }?>
<tr>
<td colspan="2">
<input type="submit" value="Kirim" name="submit_login">
</td>
</tr>
</table>
</form>
Lihat! Terdapat if(isset($_GET[‘login-gagal’])), ini artinya code yang ada didalam if isset ini akan muncul jika URL / link mengandung login-gagal. Jika link / URL tidak mengandung kata login-gagal maka tidak akan muncul (sembunyi).
Nah, sekarang kita tambahkan menjadi parameter di sistem login tadi, silahkan tambahkan ?login-gagal pada code akhir /* PORSES LOGIN */ tadi (else { header location login.php). Maka akan menjadi header("location: login.php?login-gagal");silahkan disimpan dan coba login dengan kredensial yang salah. Berhasil !!!
Semakin mantap aja nih website nya, mudah kan ?
Masih bingung ? Lihat : Video tutorial cara membuat sisitem sign in dan sign out PHP Native.
Selamat mencoba !