Membuat halaman admin dan user dengan php

Membuat halaman admin dan user dengan php

Dalam tutorial ini kita akan membuat halaman form login bagi dashboard admin panel. Proses autentifikasi user sangat diperlukan untuk mengizinkan boleh tidaknya seseorang untuk masuk ke halaman khusus user yang sudah teregistrasi. Halaman dashboard administrator adalah salah satu contohnya. Dalam halaman tersebut si admin bertugas untuk mengatur apa-apa saja yang akan ditampilkan pada halaman depan website. 

Pada tutorial sebelumnya, kita telah membuat halaman admin panel untuk menginsert berita, mengupdate berita, serta menghapus berita. Silahkan baca tutorial sebelumnya, karena pada tutorial kali ini adalah kelanjutan dari tutorial sebelumnya :"Membuat Dashboard Admin Berita dengan menggunakan PHP dan MySQL".

Berikut ini adalah halaman login yang menggunakan framework bootstrap seperti yang ditunjukkan oleh Gambar.1 :

Membuat halaman admin dan user dengan php
Gambar.1


Ketika anda salah memasukkan username maupun password, maka akan muncul informasi keterangan yang menyebutkan terjadi kesalahan inputan seperti yang ditunjukkan oleh Gambar.2 berikut :

Membuat halaman admin dan user dengan php
Gambar.2


Pada form login ini juga dilengkapi dengan fasilitas "Forgot Password". Seandainya anda lupa password, maka dengan mengklik link "Forgot Password" maka akan dikirimkan username dan password yang valid ke-email anda. Jika anda mencobanya pada localhost, silahkan periksa email yang dikirim pada : //xammp/maioutput.

Jika proses login berhasil, maka akan masuk ke halaman dashboard admin. Pada dashboard admin, anda dapat menginput berita, mengupdate dan menghapus berita serta terdapat link untuk logout. Anda juga dapat melihat berita-berita yang telah anda publikasikan. Berikut ini adalah halaman dashboard admin seperti yang ditunjukkan oleh Gambar.3 :

Membuat halaman admin dan user dengan php
Gambar.3


Halaman input berita dan list berita yang telah dipublikasikan dapat anda lihat pada tutorial sebelumnya : "Membuat Dashboard Admin Berita dengan menggunakan PHP dan MySQL

Anda dapat mencoba demo dari tutorial ini pada link "Live Preview", anda juga dapat mendownload keseluruhan source code pada link "Download".

Untuk file database dapat anda download pada link dibawah ini :

  • Download Database

Halo Sahabat programmer kali ini kita akan belajar untuk membuat login dengan sistem multi user dengan PHP. Apa maksudnya multi user ? Multi user adalah kemampuan aplikasi kita membedakan dan memetakan user berdasarkan levelnya. Nantinya ketika login user akan diarahkan ke masing-masing halamannya sesuai dengan yang telah kita tentukan. Di sisi lain hak akses user akan dibatasi misalnya user A tidak boleh masuk kehalaman yang bisa diakses oleh user B, begitu juga sebaliknya misalnya. Semuanya dapat kita tentukan berdasarkan aturan (rules) yang akan kita buat.

Login multi user telah banyak digunakan saat ini, implementasinya pun banyak pada sistem informasi. Misalnya pada sistem informasi akademik, terdapat beberapa user; mahasiswa, dosen, pegawai administrasi dan lainnya. Contoh yang lain apliakasi E-commerce terdapat user pembeli, penjulan dan administrator.

Baca juga : Membuat form pendaftaran dengan PHP

Pada kesempatan kali ini kita akan belajar membuat login multi user dengan PHP dan mysqli menggunakan studi kasus penjualan. Untuk gambaran sistem login yang akan kita buat adalah seperti pada gambar dibawah ini

Membuat halaman admin dan user dengan php

Dimana terdapat lebih dari satu user namun mereka masing-masing dibedakan berdasarkan levelnya. User admin ketika login maka dia akan diarahkan pada halaman admin. Sementara user penjual ketika login juga akan diarahkan kehalaman penjual begitu juga dengan pembeli akan diarahkan kehalaman pembeli.

Beberapa aturan lain yang akan kita buat adalah masing-masing user hanya dapat mengakses halamannya saja tanpa bisa mengakses halaman yang lain.

  • Apa saja yang kita buat untuk login multi user ?
  • Konfigurasi Database
  • Integrasi Framework Bootstrap
  • Buat file-file PHP berikut ini:
  • #pembeli.php
  • #logout.php
  • Uji coba login multi user dengan PHP
  • Download Source Code

Apa saja yang kita buat untuk login multi user ?

Pada tutorial kali ini kita akan membuat beberapa file yang akan membentuk komponen aplikasi sederhana untuk login multi user. Beberapa file tersebut sebagai berikut:

  • File koneksi database
  • Halaman Index untuk login
  • Halaman Administrator untuk user admin
  • Halaman Penjual untuk user penjual
  • Halaman Pembeli untuk user pembeli
  • Halaman Logout untuk keluar

Kita akan buat aplikasi sederhana yang berfokus pada login multi user. Nantinya kalian bisa kembangkan atau gunakan sesuai kasus projek yang kalian buat. Intinya pahami konsep dan logikanya saja, dan tidak perlu terpaku hanya pada coding. Karena seorang programmer yang paling penting adalah logika dan algoritmanya.

Konfigurasi Database

Buat database dengan nama penjualan

create database penjualan;

Gunakan database penjualan

use penjualan;

Buat tabel dengan nama users

create table users(
id_user int not null auto_increment primary key,
username varchar(30) not null,
nama varchar(50),
email varchar(30),
level int,
password varchar(200)
);

Insert 3 data user untuk masing-masing level. disini saya menggunakan level dengan biangan bulat 1 untuk admin, 2 untuk penjual dan 3 untuk pembeli.

INSERT INTO users (username,nama,email,level,password) 
VALUES ('dimas95','Setiawan Dimas','',1,md5(12345)),
('roland09','Roland Pugel','',2,md5(12345)),
('candra34','Candra Sidauruk','',3,md5(12345));

Hasilnya seperi ini

Membuat halaman admin dan user dengan php

Perhatikan pada field password saya menggunakan enskripsi md5 sehingga tampilan password yang muncul menjadi kode acak. Hal ini digunakan untuk alasan keamanan.

Selanjutnya buat folder dengan nama penjualan didalam htdocs

Membuat halaman admin dan user dengan php

Integrasi Framework Bootstrap

Pada tutorial kali ini saya menggunakan bootstrap untuk tampilan websitenya. Kalian bisa pelajari bagaimana cara menggunakan bootstrap

Pada artikel yang saya beri link diatas sudah saya bahas bagaimana menggunakan bootstrap mulai dari tahap download hingga bagaimana cara menggunakannya. Kalian bisa juga belajar Tutorial Bootstrap pada situs ini

Buat file-file PHP berikut ini:

#koneksi.php

Tahap berikutnya kita buat file php dengan nama koneksi.php untuk koneksi database.

<?php
$host="localhost";
$user="root";
$password="";
$db="penjualan";

$kon = mysqli_connect($host,$user,$password,$db);
if (!$kon){
	  die("Koneksi gagal:".mysqli_connect_error());
}
?>

#index.php

Buat sebuah file dengan nama index.php file ini nantinya akan menjadi file utama ketika projek penjualan kita dipanggil melalui localhost.

<!DOCTYPE html>
<html>
<head>
    <!-- Load file CSS Bootstrap -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <div class="container">
	<h2>Login multi user dengan PHP</h2><br>
	<?php
		 //Fungsi untuk mencegah inputan karakter yang tidak sesuai
		 function input($data) {
			$data = trim($data);
			$data = stripslashes($data);
			$data = htmlspecialchars($data);
			return $data;
		}
		//Cek apakah ada kiriman form dari method post
		if ($_SERVER["REQUEST_METHOD"] == "POST") {

			session_start();
			include "koneksi.php";
			$username = input($_POST["username"]);
			$p = input(md5($_POST["password"]));

			$sql = "select * from users where username='".$username."' and password='".$p."' limit 1";
			$hasil = mysqli_query ($kon,$sql);
			$jumlah = mysqli_num_rows($hasil);

			if ($jumlah>0) {
				$row = mysqli_fetch_assoc($hasil);
				$_SESSION["id_user"]=$row["id_user"];
				$_SESSION["username"]=$row["username"];
				$_SESSION["nama"]=$row["nama"];
				$_SESSION["email"]=$row["email"];
				$_SESSION["level"]=$row["level"];
		
		
				if ($_SESSION["level"]=$row["level"]==1)
				{
					header("Location:admin.php");
				} else if ($_SESSION["level"]=$row["level"]==2)
				{
					header("Location:penjual.php");
				}else if ($_SESSION["level"]=$row["level"]==3){
					header("Location:pembeli.php");
				}
		
				
			}else {
				echo "<div class='alert alert-danger'>
				<strong>Error!</strong> Username dan password salah. 
			  </div>";
			}

		}
	
	?>
	
	<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
        <div class="form-group">
            <label>Username:</label>
            <input type="text" class="form-control" name="username" placeholder="Masukan Username">
        </div>
        <div class="form-group">
            <label>Password:</label>
            <input type="password" class="form-control" name="password" placeholder="Masukan Password">
        </div>
        <div class="form-group">
            <input type="submit"  class="btn btn-primary"  value="Login">
        </div>
        </form>
    </div>
</body>
</html>

Form akan dikirim ke file index.php dengan perintah action form ke $_SERVER[“PHP_SELF”]; dengan method post.

Jika ada nilai yang dikirim dari form maka akan dicek if ($_SERVER[“REQUEST_METHOD”] == “POST”) jika kondisi bernilai true maka akan dieksekusi perintah dalam blok if tersebut.

Untuk logika sistem login multi user sebenarnya ada pada percabangan PHP dibawah. Coba perhatikan pada sintax bagian ini

 		if ($_SESSION["level"]=$row["level"]==1)
				{
					header("Location:admin.php");
				} else if ($_SESSION["level"]=$row["level"]==2)
				{
					header("Location:penjual.php");
				}else if ($_SESSION["level"]=$row["level"]==3){
					header("Location:pembeli.php");
				}

Terdapat percabangan if dimana mengecek level dari user yang login tersebut. Apabila levenya 1 maka halaman akan diarahkan ke admin.php. Jika levelnya 2 maka diarahkan ke halaman penjual.php dan apabila levelnya 3 maka diarahkan ke halaman pembeli.php

#admin.php

Buat file dengan nama admin.php sintaknya seperti berikut:

<?php
session_start();

if (!isset($_SESSION["username"])) {
	echo "Anda harus login dulu <br><a href='login.php'>Klik disini</a>";
	exit;
}

$level=$_SESSION["level"];

if ($level!=1) {
    echo "Anda tidak punya akses pada halaman admin";
    exit;
}

$id_user=$_SESSION["id_user"];
$username=$_SESSION["username"];
$nama=$_SESSION["nama"];
$email=$_SESSION["email"];

?>
<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>
<body>
    <div class="jumbotron text-center">
      <h2>Selamat Datang di Halaman Administrator</h2>
      <h4>Halaman ini hanya dapat diakses oleh user admin</h4>
        <p>Nama : <?php echo $nama; ?></p>
        <p>Username : <?php echo $username; ?></p>
        <p>Email : <?php echo $email; ?></p>
        <a href="logout.php" class="btn btn-warning" role="button">Logout</a>
    </div>

</body>
</html> 

Bila kita perhatikan pada sintak diatas terdapat bagian untuk mengecek apakah user tersebut sudah login atau belum

if (!isset($_SESSION["username"])) {
	echo "Anda harus login dulu <br><a href='login.php'>Klik disini</a>";
	exit;
}

Kondisi diatas mengecek variabel session untuk nilai username apakah ada nilainya atau tidak, jika tidak ada (artinya belum login) maka sistem akan menampilkan “anda harus login dulu”

Selanjutnya coba perhatikan pada sintak

$level=$_SESSION["level"];

if ($level!=1) {
    echo "Anda tidak punya akses pada halaman admin";
    exit;
}

pada sintak bagian ini berfungsi untuk mengecek apakah user yang mengakses halaman admin.php adalah level 1 (level admin) jika user tersebut bukan level 1 maka sistem akan menampilkan pemberitahuan pembatasan hak akses. Karena halaman admin khusus hanya user admin dengan level 1 saja yang boleh mengaksesnya.

#penjual.php

Buat file lagi dengan nama penjual.php isiannya sebagai berikut:

<?php
session_start();

if (!isset($_SESSION["username"])) {
	echo "Anda harus login dulu <br><a href='login.php'>Klik disini</a>";
	exit;
}

$level=$_SESSION["level"];

if ($level!=2) {
    echo "Anda tidak punya akses pada halaman penjual";
    exit;
}

$id_user=$_SESSION["id_user"];
$username=$_SESSION["username"];
$nama=$_SESSION["nama"];
$email=$_SESSION["email"];

?>
<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>
<body>
<div class="jumbotron text-center">
    <h2>Selamat Datang di Halaman Penjual</h2>
    <h4>Halaman ini hanya dapat diakses oleh User admin dan penjual</h4>
    <p>Nama : <?php echo $nama; ?></p>
    <p>Username : <?php echo $username; ?></p>
    <p>Email : <?php echo $email; ?></p>
    <a href="logout.php" class="btn btn-warning" role="button">Logout</a>
</div>

</body>
</html> 

Sama dengan halaman admin.php pada halaman penjual.php hanya user dengan level 2 yang boleh mengaksesnya

if ($level!=2) {
    echo "Anda tidak punya akses pada halaman penjual";
    exit;
}

Disini kita membuat kondisi level yang bisa mengakses halaman penjual adalah user dengan level 2 (penjual) selain daripada itu tidak dapat mengakses halaman ini.

#pembeli.php

Selanjutnya saya buat sebuah file pembeli.php untuk halaman pembeli

<?php
session_start();

if (!isset($_SESSION["username"])) {
	echo "Anda harus login dulu <br><a href='login.php'>Klik disini</a>";
	exit;
}

$level=$_SESSION["level"];

if ($level!=3) {
    echo "Anda tidak punya akses pada halaman pembeli";
    exit;
}

$id_user=$_SESSION["id_user"];
$username=$_SESSION["username"];
$nama=$_SESSION["nama"];
$email=$_SESSION["email"];


?>
<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>
<body>
<div class="jumbotron text-center">
    <h2>Selamat Datang di Halaman Pembeli</h2>
    <h4>Halaman ini hanya dapat diakses oleh user admin dan pembeli</h4>
    <p>Nama : <?php echo $nama; ?></p>
    <p>Username : <?php echo $username; ?></p>
    <p>Email : <?php echo $email; ?></p>

    <a href="logout.php" class="btn btn-warning" role="button">Logout</a>
</div>

</body>
</html> 

Sama halnya dengan halaman admin maupun penjual. dihalaman pembeli pengguna harus login terlebih dahulu untuk mengakses halaman ini.

Pada halaman pembei hanya boleh diakses oleh pengguna dengan level 3 (pembeli) selain dari pada itu tidak dapat mengaksesnya.

#logout.php

Terakhir kita membuat halaman logout dengan nama logout.php. Halaman ini berfungsi untuk mengosongkan/membersihkan variabel session ketika pengguna melakukan login.

<?php
session_start();

$_SESSION['id_user']='';
$_SESSION['username']='';
$_SESSION['nama']='';
$_SESSION['email']='';
$_SESSION['level']='';

unset($_SESSION['id_user']);
unset($_SESSION['username']);
unset($_SESSION['nama']);
unset($_SESSION['email']);
unset($_SESSION['level']);

session_unset();
session_destroy();
header('Location:index.php');

?>

Tahap terakhir saya uji coba sistem login multi user yang telah kita buat. Apakah berjalan dengan baik ?

Saya mencoba login dengan user dimas95

Membuat halaman admin dan user dengan php

user dimas95 adalah user admin dengan level 1 maka ketika login user tersebut diarahkan ke halaman admin

Membuat halaman admin dan user dengan php

Ketika user admin ingin mengakses halaman pembeli maka sistem akan memblokir

Membuat halaman admin dan user dengan php

Mohon diperhatikan bahwa pada artikel ini hanya memberikan contoh terkait penggunaan login multi user. Terkait rule atau aturan didalamnya kalian bisa menyesuaikan dengan aturan yang kalian buat.

Bisa saja kalian bisa membuat aturan user admin boleh mengakses halaman penjual maupun pembeli. Atau user penjual dapat mengakses halaman pembeli sementara user pembeli tidak dapat mengakses halaman penjual. Semuanya bisa kalian buat berdasarkan aturan yang ingin kalian terapkan pada aplikasi yang dibuat.

Download Source Code

Teman-teman bisa langsung mendownload source code serta database-nya klik tombol download dibawah ini

[sociallocker id=”5349″] [/sociallocker]

Apa itu login multi user PHP?

Login multiuser berarti suatu akses login yang dapat dilakukan oleh lebih dari satu user.

Apa itu login multi level?

Intinya adalah login multi user level adalah beberapa user dengan hak akses yang berbeda bisa melakukan login pada 1 form login. dan jika berhasil melakukan login, maka user yang login tersebut akan di arahkan ke halaman dashboard nya masing-masing.