Membuat Login Multi User Admin Dan Guru PHP dan MYSQL || Biodata Siswa #9
Assalamu'alaikum Wr.Wb
Salam Dan Bahagia
A. Pendahuluan
Halo Gaiiss :v,Pada kali ini saya akan tetap melanjutkan project yang saya buat yaitu Aplikasi Biodata Siswa yang dibuat Menggunakan HTML,CSS,PHP dan MYSQL,Nah PAda kali ini saya kan Membuat Fitur Untuk Login Admin Dan Guru, Yang Nantinya Dashboard Admin Dan Guru Ini akan Berbeda Fiturnya, NAh Bagimana Cara Membuatnya?Langsung Saja Dibaca dan Dipahami
B. Latar Belakang
Latar Belakang Saya Membuat Login Multi User Ini Adalah, Agar Dapat Membedakan Antar Dashboard admin Dan Guru Yang Nantinya fasilitas Dashboard antara Guru dan Admin Sangat Berbeda
C. Maksud Dan Tujuan
Agar Guru Dan Admin Memiliki pembatas untuk memngelola data yang dibuat,Jadi Guru Hanya Memiliki Fasilitas Yang Berbeda dengan Admin
D. Jangka waktu Yang Dibutuhkan
2 Jam
E. Alat Dan Bahan
Laptop
Text Editor ( Sublime Text )
F. Langkah Kerja
Langkah Pertama yang harus dilakukan pertama kali adalah membuka teks editor kesayangan kalian :v, Nah Setelah Itu Kita Harus Menambahkan Opsi Diform Regitrasi User Baru Yang Terdapat Di dashboard admin, Jadinya Seperti ini.
Nah Setelah Itu Kita Buat Dashboard Baru Untuk Guru, Seperti Biasa Untuk Tampilannya Kita samakan Saja Dengan Dashboard Admin Yang Dibuat Menggunakan HTML Dan CSS saja, Akan Tetapi Yang Kita Sediakan Hanya Tab Daftar Siswa Saja Dan jugs Untuk Opsi Hapus Dan Edit Kita Hilangkan, Jadi Untuk User Guru Hanya Bisa Mencetak Data Diri Dari Siswanya Saja, Kita Buat File Baru Lagi dengan Nama Guru.php Dan siswa.php, Kemudian Untuk Isikan File Guru.php Dengan Script Berikut
HTML :
Nah Sedangkan Untuk CSS nya Tinggal Kita Ubah Saja Lokasinya kita arahkan Ke Tempat file CSS nya
Untuk File siswa.php Isikan Script Berikut :
<div class="wrapper">
<form action="" method="post">
<input class="btnnn" type="text" placeholder="Example: X-TKJ-1" name="input_cari">
<button class="search" name="cari"><i class="fa fa-search"></i></button>
<a href="../admin/index.php?action=nama"><button class="searchh" name="cari"><i class="fa fa-sync-alt"> Reload</i></button></a>
</form>
<table style="margin:20px auto;"cellpadding="0" cellspacing="0">
<tr>
<td style="width: 300px;text-align: center;height: 25px; font-weight: bold; background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black">Nama Siswa</td>
<td style="width: 150px;text-align: center;background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black;font-weight: bold;">Nomor Induk</td>
<td style="width: 350px;text-align: center;background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black;font-weight: bold;">Alamat</td>
<td style="width: 100px;text-align: center;background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black;font-weight: bold;">Kelas</td>
<td style="width: 70px;text-align: center;background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black;font-weight: bold;">Print</td>
</tr>
echo "<td style='width: 300px;text-align: center;height: 25px;background-color: #EBEBEBFF;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'>".$data['nama']."</td>
<td style='width: 150px;text-align: center;background-color: #EBEBEBFF;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'>".$data['no_induk']."</td>
<td style='width: 350px;text-align: center;background-color: #EBEBEBFF;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'>".$data['alamat']."</td>
<td style='width: 100px;text-align: center;background-color: #EBEBEBFF ;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'>".$data['kls']."</td>
<td style='width: 70px;text-align: center;background-color:#EBEBEBFF;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'><a href='print.php?id=".base64_encode($data['id'])."' target='BLACK'><i style='color: #0019FFFF;margin-left:10px;' class='fa fa-print'> Cetak</i></a></td>";
echo "</tr>";
}
?>
</table>
</div>
Nah Setelah Itu Save Dan Maka Hasilnya akan Seperti Ini :
Pembuatan Bagian Frontend dengan HTML dan CSS sudah Selesai, sekarang kita Buat Bagian BackEnd nya, Lebih Tepatnya Kita Buat SESSION Untuk Guru Dan Admin, Nah Alurnya Nanti Seperti Ini :
Jika Yang Login Levelnya Atau Username nya Dalam Lingkungan Admin, Maka Nanti Akan Kita arahkan Ke dashboard Admin, Begitu Juga Sebaliknya, Akan Tetapi Jika User Sudah masuk Ke Dalam Dashboard Admin Maka Si Admin Tidak Bisa Masuk Ke dalam Dashboard Guru,Begitu Juga Sebaliknya :
Untuk Script SESSION nya Seperti Ini :
Buka file Login kemudian Tambahkan Script PHP seperti Berikut :
Nah Setelah Itu Buka File Dashboard Admin Dan Tambahkan SESSION Berikut Dibagian Paling Atas, Begitupun Juga Pada File guru,
Pembuatan Login MultiUser Sudah Selesai Sekarang coba, dan apakah berhasil atau Tidak, Jika Tidak Berhasil Coba Teliti Lagi Script Nya :)
Gimana Mudah Bukan?
G. Kesimpulan
Dalam Pembuatan Login MultiUser ini Adalah Kita harus Mengerti SESSION pada PHP
H. Referensi
w3schools.com
Sekian Yang dapat saya sampikan mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih
Salam Dan Bahagia
A. Pendahuluan
Halo Gaiiss :v,Pada kali ini saya akan tetap melanjutkan project yang saya buat yaitu Aplikasi Biodata Siswa yang dibuat Menggunakan HTML,CSS,PHP dan MYSQL,Nah PAda kali ini saya kan Membuat Fitur Untuk Login Admin Dan Guru, Yang Nantinya Dashboard Admin Dan Guru Ini akan Berbeda Fiturnya, NAh Bagimana Cara Membuatnya?Langsung Saja Dibaca dan Dipahami
B. Latar Belakang
Latar Belakang Saya Membuat Login Multi User Ini Adalah, Agar Dapat Membedakan Antar Dashboard admin Dan Guru Yang Nantinya fasilitas Dashboard antara Guru dan Admin Sangat Berbeda
C. Maksud Dan Tujuan
Agar Guru Dan Admin Memiliki pembatas untuk memngelola data yang dibuat,Jadi Guru Hanya Memiliki Fasilitas Yang Berbeda dengan Admin
D. Jangka waktu Yang Dibutuhkan
2 Jam
E. Alat Dan Bahan
Laptop
Text Editor ( Sublime Text )
F. Langkah Kerja
Langkah Pertama yang harus dilakukan pertama kali adalah membuka teks editor kesayangan kalian :v, Nah Setelah Itu Kita Harus Menambahkan Opsi Diform Regitrasi User Baru Yang Terdapat Di dashboard admin, Jadinya Seperti ini.
Nah Setelah Itu Kita Buat Dashboard Baru Untuk Guru, Seperti Biasa Untuk Tampilannya Kita samakan Saja Dengan Dashboard Admin Yang Dibuat Menggunakan HTML Dan CSS saja, Akan Tetapi Yang Kita Sediakan Hanya Tab Daftar Siswa Saja Dan jugs Untuk Opsi Hapus Dan Edit Kita Hilangkan, Jadi Untuk User Guru Hanya Bisa Mencetak Data Diri Dari Siswanya Saja, Kita Buat File Baru Lagi dengan Nama Guru.php Dan siswa.php, Kemudian Untuk Isikan File Guru.php Dengan Script Berikut
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard Admin || ZnSystem</title>
<link rel="stylesheet" href="../admin/style.css">
<link rel="stylesheet" href="../asset/font/css/all.css" />
</head>
<body>
<div class="nav">
<h2 class="navv"><i class="fa fa-user"></i> <?php echo $_SESSION['nama']; ?></h2>
</div>
<div class="peng"></div>
<div class="sidebar">
<div class="user">
<h1 class="ads">Dashboard Guru</h1>
</div>
<a style="text-decoration: none;" href="index.php?action=home"><button class="tn"><i style="margin-right: 5px" class="fa fa-home"></i>Home</button></a>
<a style="text-decoration: none;" href="index.php?action=nama"><button class="tn"><i style="margin-right: 5px;" class="fa fa-tasks"></i>Daftar Siswa</button></a>
<a style="text-decoration: none;" href="../logout.php"><button class="tn"><i style="margin-right: 5px;" class="fa fa-door-open"></i>Logout</button></a>
</div>
<div class="wrapper">
<?php
if (isset($_GET['action'])) {
$action = $_GET['action'];
switch ($action) {
case 'home':
include 'home.php';
break;
case 'nama':
include 'daftar_siswa.php';
break;
default:
# code...
break;
}
}
?>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard Admin || ZnSystem</title>
<link rel="stylesheet" href="../admin/style.css">
<link rel="stylesheet" href="../asset/font/css/all.css" />
</head>
<body>
<div class="nav">
<h2 class="navv"><i class="fa fa-user"></i> <?php echo $_SESSION['nama']; ?></h2>
</div>
<div class="peng"></div>
<div class="sidebar">
<div class="user">
<h1 class="ads">Dashboard Guru</h1>
</div>
<a style="text-decoration: none;" href="index.php?action=home"><button class="tn"><i style="margin-right: 5px" class="fa fa-home"></i>Home</button></a>
<a style="text-decoration: none;" href="index.php?action=nama"><button class="tn"><i style="margin-right: 5px;" class="fa fa-tasks"></i>Daftar Siswa</button></a>
<a style="text-decoration: none;" href="../logout.php"><button class="tn"><i style="margin-right: 5px;" class="fa fa-door-open"></i>Logout</button></a>
</div>
<div class="wrapper">
<?php
if (isset($_GET['action'])) {
$action = $_GET['action'];
switch ($action) {
case 'home':
include 'home.php';
break;
case 'nama':
include 'daftar_siswa.php';
break;
default:
# code...
break;
}
}
?>
</div>
</body>
</html>
Nah Sedangkan Untuk CSS nya Tinggal Kita Ubah Saja Lokasinya kita arahkan Ke Tempat file CSS nya
Untuk File siswa.php Isikan Script Berikut :
<div class="wrapper">
<form action="" method="post">
<input class="btnnn" type="text" placeholder="Example: X-TKJ-1" name="input_cari">
<button class="search" name="cari"><i class="fa fa-search"></i></button>
<a href="../admin/index.php?action=nama"><button class="searchh" name="cari"><i class="fa fa-sync-alt"> Reload</i></button></a>
</form>
<table style="margin:20px auto;"cellpadding="0" cellspacing="0">
<tr>
<td style="width: 300px;text-align: center;height: 25px; font-weight: bold; background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black">Nama Siswa</td>
<td style="width: 150px;text-align: center;background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black;font-weight: bold;">Nomor Induk</td>
<td style="width: 350px;text-align: center;background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black;font-weight: bold;">Alamat</td>
<td style="width: 100px;text-align: center;background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black;font-weight: bold;">Kelas</td>
<td style="width: 70px;text-align: center;background-color: #5860FFFF;color: white;border:none;border-right: 1px solid black;font-weight: bold;">Print</td>
</tr>
echo "<td style='width: 300px;text-align: center;height: 25px;background-color: #EBEBEBFF;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'>".$data['nama']."</td>
<td style='width: 150px;text-align: center;background-color: #EBEBEBFF;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'>".$data['no_induk']."</td>
<td style='width: 350px;text-align: center;background-color: #EBEBEBFF;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'>".$data['alamat']."</td>
<td style='width: 100px;text-align: center;background-color: #EBEBEBFF ;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'>".$data['kls']."</td>
<td style='width: 70px;text-align: center;background-color:#EBEBEBFF;color: black;border-bottom:1px solid #CECECEFF;border-right: 1px solid black;'><a href='print.php?id=".base64_encode($data['id'])."' target='BLACK'><i style='color: #0019FFFF;margin-left:10px;' class='fa fa-print'> Cetak</i></a></td>";
echo "</tr>";
}
?>
</table>
</div>
Nah Setelah Itu Save Dan Maka Hasilnya akan Seperti Ini :
Guru
Admin
Pembuatan Bagian Frontend dengan HTML dan CSS sudah Selesai, sekarang kita Buat Bagian BackEnd nya, Lebih Tepatnya Kita Buat SESSION Untuk Guru Dan Admin, Nah Alurnya Nanti Seperti Ini :
Jika Yang Login Levelnya Atau Username nya Dalam Lingkungan Admin, Maka Nanti Akan Kita arahkan Ke dashboard Admin, Begitu Juga Sebaliknya, Akan Tetapi Jika User Sudah masuk Ke Dalam Dashboard Admin Maka Si Admin Tidak Bisa Masuk Ke dalam Dashboard Guru,Begitu Juga Sebaliknya :
Untuk Script SESSION nya Seperti Ini :
Buka file Login kemudian Tambahkan Script PHP seperti Berikut :
<?php
session_start();
if (!isset($_SESSION['nama'])) {
header('Location: ../read/log.php');
}elseif ($_SESSION['level']!='guru') {
header('Location: ../min');
}
?>
session_start();
if (!isset($_SESSION['nama'])) {
header('Location: ../read/log.php');
}elseif ($_SESSION['level']!='guru') {
header('Location: ../min');
}
?>
Nah Setelah Itu Buka File Dashboard Admin Dan Tambahkan SESSION Berikut Dibagian Paling Atas, Begitupun Juga Pada File guru,
Pembuatan Login MultiUser Sudah Selesai Sekarang coba, dan apakah berhasil atau Tidak, Jika Tidak Berhasil Coba Teliti Lagi Script Nya :)
Gimana Mudah Bukan?
G. Kesimpulan
Dalam Pembuatan Login MultiUser ini Adalah Kita harus Mengerti SESSION pada PHP
H. Referensi
w3schools.com
Sekian Yang dapat saya sampikan mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih
