Smart Global

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 Disini

Setelah 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..

Smart Global

Pages

Wednesday, March 8, 2017

8 Tips memilih Jasa Desain Pembuatan Website Yang Tepat Untuk Pemula.

Friday, March 3, 2017

#2 Trik Mudah Mengembalikan Artikel Blog yang Terhapus

Membuat Login/Logout Multi Level (Admin & User) Dengan PHP & MySQL

Wednesday, March 1, 2017

6 Tips Sukses Cara Berjualan Online di Facebook untuk Pemula

Tuesday, February 28, 2017

#11 Faktor Penentu Rangking Video YouTube di hasil pencarian

Saturday, February 25, 2017

7 Ciri Backlink Berkualias di Era Algoritma Google Saat Ini

Wednesday, February 22, 2017

2 Cara Mudah Mengcopy Teks dari File PDF yang diproteksi

Tuesday, February 21, 2017

Cara Menambah Pengelola blog (Kontributor, penulis, author atau Admin blog baru) di blogspot

VGA Nvidia Dan AMD Yang Support DirectX 12 (Windows 10)

Monday, February 20, 2017

2 Cara Mudah Mengetahui Blog yang copy paste Artikel blog kita

Sunday, February 19, 2017

Cara Memasang Kode Verifikasi Google Webmaster Tool pada Template Blog

MySQL Database Tuning Bagian 1

pages