Bismillahirrohmanirrohim. Sebuah website pada umumnya memiliki sebuah halaman yang dapat digunakan sebagai tempat untuk mengelola konten-konten yang ada oleh si pemilik website, atau biasa disebut dengan halaman Dashboard. Tidak semua orang boleh mengakses halaman ini, maka diperlukan sebuah halaman yang berguna sebagai proses otentikasi apakah user yang akan mengakses dashboard adalah benar-benar si pemilik website. Halaman ini bernama halaman login.
Sebuah website juga biasanya terdiri dari beberapa pengelola, yang mana tiap-tiap pengelola memiliki hak akses (level) yang berbeda-beda. Ada yang bertindak sebagai administrator, moderator dan lain-lain. Tulisan ini akan mempraktekkan bagaimana membuat login multi user dan multi level dengan PHP dan database MySQL.
Persiapkan Database
Pertama sekali tentunya kita harus melakukan desain database, bagaimana struktur sebuah tabel ini akan menyimpan informasi si pengelola website seperti username, password, nama dan juga level si pengelola.
Pada contoh ini saya membuatnya melalui Terminal.app (teman-teman bisa gunakan PhpMyAdmin atau MySQL Command Line Client). Adapun perintah DDL (Data Definition Language) untuk membuat tabel pada database MySQL adalah sebagai berikut:
Jangan lupa untuk memasukkan beberapa data didalamnya dengan menggunakan perintah DML (Data Manipulation Language) berikut:
Membuat Halaman Login
Setelah selesai mempersiapkan databasenya, kali ini kita akan mulai melakukan ngoding di bagian front end dulu (bagian antarmuka halaman login). Pertama silakan buat satu buah folder didalam folder htdocs kamu. Disini saya memberi nama foldernya ialah kangriyanto. Didalamnya silakan kamu bikin sebuah file bernama index.php atau sesukamu saja, lalu tambahkan sintaks HTML dan CSS berikut (kamu bisa copas kok, hehe).
<pre class="wp-block-syntaxhighlighter-code brush: xml; notranslate"><!DOCTYPE html>
<html>
<head>
<title>Login Multi User & Multi Level : Kangriyanto.Net</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<a href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js</a>
<a href="https://code.jquery.com/jquery-1.11.1.min.js">https://code.jquery.com/jquery-1.11.1.min.js</a>
<style type="text/css">
.container {
margin: 200px auto;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading, .form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.account-wall {
margin-top: 20px;
padding: 40px 0px 20px 0px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
color: #555;
font-size: 18px;
font-weight: 400;
display: block;
}
.profile-img {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.need-help {
margin-top: 10px;
}
.new-account {
display: block;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="account-wall">
<img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt="">
Sign in
Remember me
<a href="#" class="pull-right need-help">Need help? </a><span class="clearfix"></span>
</div>
<a href="https://kangriyanto.net" class="text-center new-account">Kangriyanto.Net </a>
</div>
</div>
</div>
</body>
</html></pre>
Saat kamu jalankan dengan perintah localhost/kangriyanto pada web browser maka akan tampil seperti pada gambar berikut:
Selanjutnya buat satu buah file lagi bernama login.php. File ini bertugas untuk membandingkan data yang diinput oleh user dengan data yang ada pada tabel users di database. Adapun isi file login.php ini adalah sebagai berikut:
<?php
// koneksi ke database (sesuaikan dengan informasi yang kamu miliki)
$db = mysqli_connect('localhost', 'root', '', 'test');
if(!$db) exit('Error in connection!');
// tangkap data dari form login
$username = $_POST['username'];
$password = $_POST['password'];
// siapkan query untuk membandingkan data dari form login dan database
$sql = "SELECT * FROM `users` WHERE `username` = '$username' AND `password` = '$password'";
$result = mysqli_query($db, $sql) or die(mysqli_error($db));
// apakah ada data yang didapat dari hasil membandingkan diatas?
if(mysqli_num_rows($result) == 1) {
session_start();
// ambil data user yang berhasil login ini
$data = mysqli_fetch_assoc($result);
$_SESSION['nama'] = $data['nama'];
$_SESSION['level']= $data['level'];
echo "<h1>Selamat datang " . $_SESSION['nama'] . "</h1>";
echo "<p>Saat ini kamu login menggunakan akun level " . $_SESSION['level'] . "</p>";
}
else {
echo "Maaf, username atau password yang kamu masukkan SALAH!";
}
Pengujian
Untuk mengetahui apakah login multi user dan multi level yang kita buat ini telah berhasil atau tidak ialah dengan mengujinya. Silakan buka web browser kamu lalu ketikkan perintah localhost/kangriyanto lalu masukkan salah satu data yang sebelumnya telah kita masukkan pada database.
Apabila data yang diinputkan benar (username dan password telah benar), maka akan muncul pesan selamat datang lengkap dengan level si pengelola website.
Bagaimana? mudah kan membuat halaman login multi user dan multi level dengan PHP dan MySQL? Jika kamu ingin mengimplementasikan sistem login multi user dan multi level dengan framework (CodeIgniter misalnya), pada dasarnya sama aja, kamu hanya perlu mengerti konsep dasarnya saja.
Jika kamu ngerasa ini berguna, silakan bagikan kepada teman-temanmu. Hehe. Atau jika kamu ngerasa bingung, silakan komentar dibawah. Terima kasih.
Keep coding 🙂