Cara Menggunakan SESSION PHP Untuk Login dan Logout (+Register)
Memperjelas tulisan sebelumnya terkait session di blog infokuy.net. Pada artikel kali ini saya akan menjelaskan cara menggunakan SESSION PHP untuk login dan logout dari awal (from scratch).
Penggunaan SESSION biasanya digunakan ketika user login atau masuk ke dalam sebuah situs dimana terdapa fitur yang dapat diakses ketika user login.
Nah, SESSION ini berperan sebagai pembatas hak akses user untuk mengakses ftur sesuai role masing-masing.
Lantas bagaimana cara menggunakan session php dari awal dan hal apa saja yang perlu disiapkan? Silahkan simak artikel ini sampai akhir biar makin paham.
Cara Menggunakan SESSION PHP
Sebelum menginstall XAMPP, terdapat beberapa hal yang perlu kamu pahami diantaranya:
- Web Server, PHP tidak dapat dijalankan tanpa adanya web server. Agar bisa membuat program aplikasi berbasis PHP pada komputer lokal, kamu bisa menggunakan aplikasi web server XAMPP, WampServer, Apache HTTP Web Server, Microsoft Internet Information (IIS). Nginx, Lighttpd, Zend Server, MAMP, AMPPS, EasyPHP, dan masih banyak lagi.
- Text Editor, berkat adanya text editor bisa mempermudah programmer menuliskan sebuah program. Kamu bisa menggunakan beberapa text editor gratis diantaranya Visual Studio Code, Sublime Text 3, Atom.
- Web Browser, berfungsi untuk mengakses website, kamu bisa menggunakan beberapa website seperti Google Chrome atau Mozilla Firefox.
Menginstall XAMPP
Pertama, web server yang akan saya gunakan adalah XAMPP.
XAMPP adalah aplikasi cross-platform yang artinya bisa digunakan untuk pengguna Windows, MacOS, dan Linux untuk membuat web server secara lokal di komputer pengguna.
Berkat aplikasi ini, kamu tidak perlu repot-repot membeli hosting untuk menjalankan program PHP. Untuk kebutuhan pengembangan dan testing website, penggunaan web server lokal sudah lebih dari cukup.
Bagaimana cara mendownload XAMPP? Silahkan kunjungi link berikut ini download xampp.
Untuk penginstallannya pun sangat mudah, kamu cukup menekan tombol Next - Next saja. Oh iya, untuk posisi installation XAMPP lebih baik simpan di direktori C.
Silahkan pilih versi PHP-nya sesuai kebutuhan dan kamu bisa dengan bebas memilih XAMPP untuk Operating System apapun.
Selanjutnya adalah cara menjalankan XAMPP. Pada kasus kali ini, saya akan mencontohkan cara menjalankan XAMPP di Windows.
Oh iya, untuk versi XAMPP yang saya gunakan adalah 7.4.29 / PHP 7 .4.29.
Silahkan cermati gambar di bawah ini agar bisa menjalankan XAMPP-nya.
Kamu cukup menekan tombol Start pada bagian module Apache dan MySQL.
Selamat, kamu telah berhasil menjalankan web server dan databasenya agar bisa digunakan nanti.
Membuat Database di Localhost
Langkah selanjutnya adalah membuat database di phpmyadmin.
Database sendiri sangat diperlukan untuk menyimpan data pengguna atau data lainnya ketika fitur tertentu dijalankan.
Misalkan, ketika user melakukan registrasi, maka data yang user inputkan akan tersimpan pada database.
Untuk membuat database, kamu perlu mengakses url localhost/phpmyadmn pada web browser.
Setelah url tersebut diakses, maka tampilan awalnya kurang lebih seperti ini :
Pada sidebar terdapa menu dengan tulisan New atau Baru, klik pada bagian tersebut untuk membuat database yang baru.
Kamu akan diminta memasukkan nama databasenya. Untuk contoh kasus kali ini nama databasenya adalah infokuy_login.
Setalah itu, tekan tombol Create atau Buat untuk membuat database
Membuat Table Users
Setelah proses pembuatan database selesai, langkah selanjutnya adalah membuat table users.
Adapun cara pembuatannya bisa dilihat pada gambar berikut ini :
Silahkan ketikan nama tablenya adalah users
Tekan tombol Create untuk melanjutkan proses pembuatan table usersnya
Ikuti structure table users seperti pada gambar di bawah
Pada field id dibuat menjadi primary key dengan cara menekan tombol AI (Auto Increment). Ketika checkbox AI ditekan, otomatis field tersebut menjadi Primary Key
Untuk field lain yakni username, email, password dibuat menjadi tipe data varchar dan dengan panjang 255.
Maka hasil akhirnya akan terlihat seperti gambar berikut.
Persiapan Struktur Project
Setelah berhasil membuat Database dan Tablenya, waktunya kita membuat program login session di php.
Namun, kita harus menyiapkan struktur projeknya terlebih dahulu,
Pertama, kamu harus membuat folder khusus untuk menyimpan project webnya.
Folder yang dibuat ini harus disimpan pada C:\xampp\htdocs.
Pada kasus kali ini, saya akan membuat folder baru dengan nama infokuy_login
Buat beberapa file pada folder infokuy_login, bisa dilihat pada gambar di bawah ini
Buat beberapa file sesuai gambar di atas, untuk tampilan halamannya kita bisa memanfaatkan framework bootstrap 5.
Menyiapkan File Koneksi Ke Database
Agar program php kita bisa terhubung dengan database yang telah dibuat, maka kita perlu menghubungkannya terlebih dahulu.
Bagaimana caranya agar bisa terhubung? Silahkan buka file koneksi.php yang telah kamu buat sebelumnya pada folder infokuy_login.
Setelah itu, copy-kan perintah di bawah ini agar bisa terhubung.
<?php
$server = "localhost";
$user = "root";
$pass = "";
$db = "infokuy_login";
$koneksi = mysqli_connect($server, $user, $pass, $db);
if (!$koneksi) {
die("<script>alert('Tidak bisa terhubung dengan database!!')</script>");
}
?>
Untuk baris program $db = "infokuy_login"; disesuaikan isinya dengan nama database yang telah kamu buat sebelumnya.
Membuat Halaman Landing Page (index.php)
Setiap website yang dibuat pastinya memiliki halaman awal atau sering dikenal sebagai landing page.
Nah, website yang akan kita buat juga harus memiliki halaman landing page.
Pada file index.php, silahkan tambahkan kode program berikut ini
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Landing Page</title>
</head>
<body>
<h1>Selamat Datang di Landing Page</h1>
<p>Mau Login atau Register?</p>
<a href="login.php">Login</a>
<a href="regiter.php">Register</a>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Kita tidak perlu menambahkan file .css dikarenakan bootstrap sendiri menyediakan beragam kebutuhan styling yang siap untuk digunakan.
Hasil tampilannya kurang lebih seperti gambar berikut ini:
Membua Halaman Register (register.php)
Setelah halaman landing page berhasil dibuat, kita perlu membuat halaman register. Halaman ini berfungsi untuk menambahkan data users terbaru.
Oh iya, nantinya untuk bagian password perlu kita hash agar pengguna atau admin sendiri tidak bisa membaca password akun orang lain.
Silahkan copy kode program berikut ini dan paste-kan ke file register.php
<?php
include 'koneksi.php';
if(isset($_POST["submit"]))
{
if(empty($_POST["username"]) || empty($_POST["password"]) || empty($_POST['email']))
{
echo '<script>alert("Kolom Input Tidak Boleh Kosong!!!")</script>';
}
else
{
$username = mysqli_real_escape_string($koneksi, $_POST["username"]);
$email = mysqli_real_escape_string($koneksi, $_POST["email"]);
$password = mysqli_real_escape_string($koneksi, $_POST["password"]);
$password = password_hash($password, PASSWORD_DEFAULT);
$query = "INSERT INTO users(username, email, password) VALUES('$username', '$email' ,'$password')";
if(mysqli_query($koneksi, $query))
{
echo '<script>alert("Registrasi akun berhasil, silahkan pindah ke halaman login")</script>';
}
}
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Register Page</title>
</head>
<body>
<div class="container">
<div class="card mt-5" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Register</h5>
<div class="row">
<form method="POST" action="">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" name="username" class="form-control" id="username" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
<a href="login.php" class="d-block mt-3">Sudah punya akun? Silahkan login!</a>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Berikut tampilan halamannya :
Membuat Halaman Login (login.php)
Setelah halaman register berhasil dibuat, langkah selanjutnya adalah membuat halaman login beserta kode php session loginnya.
Silahkan copy kode program berikut ini dan paste-kan ke file login.php
<?phpinclude 'koneksi.php'; if(isset($_POST['submit'])) { //Ambil data yang diinputkan olehh user $username = $_POST['username']; $password = $_POST['password']; //Cek pada database apakah username tersedia atau tidak if($result = mysqli_query($koneksi, "SELECT * FROM users WHERE username='$username'")){ //Jika ada maka akan menghasilkan nilai 1 if(mysqli_num_rows($result) === 1) { //ambil data query tadi menggunakan function mysqli_fetch_assoc() $data = mysqli_fetch_assoc($result); //cek apakah password cocok dengan didatabase if(password_verify($password, $data['password'])){ $_SESSION['username'] = $data['username']; //pindahkan kehalaman yang dituju header('Location: admin.php'); } else { echo '<script>alert("Password tidak sesuai dengan di database!!")</script>'; } } else { echo '<script>alert("Data Tidak Cocok dengan di database!!")</script>'; } } else { echo '<script>alert("Kode SQL salah!")</script>'; } } ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Login Page</title> </head> <body> <div class="container"> <div class="card mt-5" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Login</h5> <div class="row"> <form method="POST"> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">username</label> <input type="username" name="username" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" name="password" class="form-control" id="exampleInputPassword1"> </div> <button type="submit" name="submit" class="btn btn-primary">Submit</button> <a href="register.php" class="d-block mt-3">Belum punya akun? Silahkan daftar terlebih dahulu!!</a> </form> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html>session_start();
Berikut tampilan halamannya :
Membuat Halaman Admin (admin.php)
Silahkan copy kode program berikut ini dan paste-kan ke file admin.php
<?php
session_start();
if (!isset($_SESSION['username'])) {
header("Location: login.php");
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Admin Page</title>
</head>
<body>
<h1>Selamat Datang di Halaman Admin</h1>
<a href="logout.php">Logout</a>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Berikut tampilan halamannya :
Membuat Halaman Logout (logout.php)
Silahkan copy kode program berikut ini dan paste-kan ke file logout.php
<?php
session_start();
session_destroy();
header("Location: index.php");
?>
Kesimpulan
Berikut adalah pembahasan terkait cara menggunakan session php untuk login, logout, dan pembagian hak akses di php.
Dengan adanya konsep ini, kita bisa membatasi user yang masuk ke halaman khusus admin.
Jadi, tidak sembarang orang boleh login ke halaman khusus, hanya user yang datanya telah tersimpan di database saja yang dapat masuk ke halaman dashboard admin.
Cara menggunakan session PHP untuk login dan logout sangat mudah untuk digunakan.
Oh iya, jika kamu masih belum paham terkait session, coba ikuti artikel pengertian session berikut ini di infokuy.net ya.
Restu Kersana
Calon Jenazah, pengen hidup enak tapi gini - gini aja.