Cara membuat halaman login/masuk dan logout/keluat multi user/level di website dengan php & mysql – Halo! Selamat satang di artikel
TB kali ini. Karena banyak yang request artikel tentang cara membuat halaman login dan logout multi level, here it is.. Kali ini saya akan menjelaskan cara untuk
membuat login multi level dengan php dan mysql yang dapat kalian pelajari dan download langsung dibawah.
Tetapi sebelum itu, berikut ada beberapa penjelasan singkat tentang artikel saya kali ini.
Login Multi Level?Oke, jadi maksudnya saya akan mencoba membuat sebuah halaman login dimana 2 jenis pengguna dengan hak akses yang berbeda dapat masuk dalam satu form login. Disini saya mengambil contoh jenis pengguna dengan hak akses yang berbeda yaitu
admin, dan user/pegguna.
Untuk membuat halaman login multi level dan logoutnya, memerlukan sebuah bahasa pemrograman yaitu
PHP dan database
MySQL. Nah, untuk itu kamu perlu menginstal aplikasi host server lokal karena di kebanyakan komputer belum ada sistem yang dapat mengakses website dengan bahasa ini. Biasanya digunakan host server lokal
‘XAMPP’ karena gratis dan mudah. Kamu bisa download XAMPP dan mempelajari apa itu host server lokal di artikel saya sebelumnya :
“PENGENALAN HOST SERVER LOKAL XAMPP”Sebelum
membuat halaman login multi level sekaligus logout dengan php dan mysql, saya akan menjelaskan bagaimana cara kerja atau algoritma sistem yang akan saya buat. Berikut adalah cara kerjanya.
1. Yang pertama saya tidak memisah file index dan login. Jadi saat login/belum login, kamu tetap pada halaman index.
2. Dalam formulir login, ada 2 kotak input yaitu username dan password dan 1 select input untuk memilih level login (ingin masuk sebagai apa)
3. File akan memanggil database yang sudah berisi data username dan password sekaligus cek ketersediaan (untuk memastikan username/password benar)
4. Jika login, tampilan akan berubah. Jika ada kesalahan, akan tampil peringatan.
5. Jika klik logout/keluar maka akan menghapus session dan kembali ke tampilan login
Biar lebih jelas, berikut adalah gambarannya.
Okee.. Setelah mengetahui cara kerjanya, sekarang saatnya kita membuat halaman index yang berisi tampilan login dan setelah login. Cukup dengan tampilan yang sederhana saja ya..
Berikut cara membuat halaman login multi level pada website dengan php & mysql.
Let’s Ngoding!>
1. Pertama kita buat database ‘
login’ dan letakan kode ini pada tab SQL
CREATE TABLE IF NOT EXISTS `tb_login` (
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
`level` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tb_login`
--
INSERT INTO `tb_login` (`username`, `password`, `level`) VALUES
('admin', 'admin', 'admin'),('user', 'user', 'user');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tb_login`
--
ALTER TABLE `tb_login`
ADD PRIMARY KEY (`username`);
2. Untuk file websitenya, kita buat dulu file ‘
index.php’ dengan kode berikut
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Login Multi Level - www.teziger.blogspot.com</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<form method="post">
<?php
//Menghubungkan Ke Database
$host = 'localhost'; //Nama Host
$user = 'root'; //Nama User
$pass = ''; //Nama Password
$database = 'login'; //Nama Database
$db = mysqli_connect($host,$user,$pass,$database); //Mulai Hubungan
session_start(); //Menyalakan Session
if (!@$_SESSION['masuk']) { //Jika Belum Login Maka Tampilkan Halaman Login
if (isset($_POST['masuk'])) { // Jika Pengakses Menekan Tombol Masuk
$user = $_POST['username']; //Mengambil Hasil Input Pada Kolom Input Username
$pass = $_POST['password']; //Mengambil Hasil Input Pada Kolom Input Password
$level = $_POST['level']; //Mengambil Jenis Level Yang Dipilih
if (empty($user) || empty($pass) || empty($level)) {
echo "<center><div class='peringatan'>Semua Kolom Wajib Diisi!</div></center>";
}
if ($level == 'admin') { //Jika Pengakses Memilih Level Admin
$query = mysqli_query($db, "SELECT*FROM tb_login WHERE level = 'admin' AND username = '$user' AND password = '$pass'"); //Mencari Data Pada Database
$cek = mysqli_num_rows($query); //Cek Ketersediaan
if ($cek > 0) { //Jika Tidak Kosong
$_SESSION['masuk'] = $user; //Membuat Session
header("location:./"); //Memuat Ulang Halaman
}
else{//Jika Kosong
echo "<center><div class='peringatan'>Username Atau Password Untuk Level Admin Salah!</div></center>";
}
}
elseif ($level == 'user') {
$query = mysqli_query($db, "SELECT*FROM tb_login WHERE level = 'user' AND username = '$user' AND password = '$pass'"); //Mencari Data Pada Database
$cek = mysqli_num_rows($query); //Cek Ketersediaan
if ($cek > 0) { //Jika Tidak Kosong
$_SESSION['masuk'] = $user; //Membuat Session
header("location:./"); //Memuat Ulang Halaman
}
else{//Jika Kosong
echo "<center><div class='peringatan'>Username Atau Password Untuk Level User Salah!</div></center>";
}
}
}
?>
<h1>Masuk</h1>
<input type="text" name="username" placeholder="Username"><br>
<input type="password" name="password" placeholder="Password"><br>
<select name="level">
<option value="">-PILIH LEVEL-</option>
<option value="admin">Admin</option>
<option value="user">User</option>
</select><br>
<input type="submit" name="masuk" value="Masuk">
</form>
<?php
}
else{ //Jika Sudah Masuk Maka Tampilkan Halaman Utama
$data = mysqli_fetch_array(mysqli_query($db, "SELECT*FROM tb_login WHERE username='$_SESSION[masuk]'")); //Mengambil Data Pengguna Yang Login
if ($data['level'] == 'admin') { //Jika Yang Masuk Adalah Admin
$konten = '<h1>Selamat Datang Admin <i>(@'.$data['username'].')</i>!</h1>Selamat Mengembangkan Website!';
}
else{ //Jika Yang Masuk Adalah User
$konten = '<h1>Selamat Datang Pengguna Website <i>(@'.$data['username'].')</i>!</h1>';
}
$logout = "<a href='./?keluar=1'>Keluar</a>"; //Membuat Tombol Keluar
if (isset($_GET['keluar'])) { //Jika Klik Tombol Keluar
unset($_SESSION['masuk']); //Menghapus Session
header("location:./"); //Memuat Ulang Halaman
}
echo $konten.'<br>'.$logout;
}
?>
</body>
</html>
3. Biar ganteng websitenya, buat file ‘style.css’
html{
font-family: calibri;
float: center;
text-align: center;
}
body{
margin:10px;
}
form{
margin-top:10%;
width: 100%;
}
input[type="text"], input[type="password"], select{
background: #FFF;
border: 1px solid grey;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
width: 400px;
}
input[type="submit"]{
background: #ade7e7;
padding: 10px;
font-size: 20px;
border:1px solid #448086;
margin-bottom: 10px;
}
input[type="submit"]:hover{
background: #55c0c6;
}
.peringatan{
background: #d0203a;
padding: 10px;
border: 1px solid darkred;
border-radius: 5px;
margin-bottom: 10px;
width: 500px;
}
a{
color: #648da2;
font-size: 40px;
text-decoration: none;
}
a:hover{
color:#33636c;
}
Setelah selesai
membuat halaman login dan logout, silahkan jalankan websitenya. Untuk nama file websitenya terserah kamu. Yang penting nama database dan file di dalam websitenya harus sesuai seperti tadi.
Jika ingin langsung coba, kamu bisa download filenya..
Download File DisiniSetelah itu tinggal ekstrak filenya dan akses melalui
localhost/multi_level pada browser.
Tutorial ini saya buat untuk pembelajaran. Jadi hanya saya buat sederhana. Yang penting cara kerjanya dapat diketahui dan dipahami dengan mudah dan ada penjelasan di tiap kode dalam file websitenya sehingga dapat dengan mudah paham dan bisa dengan mudah diedit.
Oke dan itulah
cara membuat halaman login multi user/level dan logout dengan php dan mysql. Jika ada pertanyaan,
silahkan berkomentar!Semoga artikel ini bermanfaat! Selamat mencoba dan semoga berhasil!
Terima Kasih..
