Membuat Login Multi User Level Dengan PHP MySQLi (Part II)

 


Membuat Login Multi User Level Dengan PHP MySQLi (Part II)

Selamat datang kembali teman-teman di blog saya, pada kesempatan kali ini kita akan melanjutkan Membuat Login Multi User Level Dengan PHP MySQLi (Part I) yang sebelumnya, sebelumnya teman-teman harus menyiapkan terlebih dahulu folder project yang nantinya akan kita buat, nah sekarang kita harus paham dulu, dimana sih kita harus buat foldernya,? jadi teman-teman kita harus buat folder di folder khusus, artinya tidak bisa sembarang menyimpan file yang akan kita buat ini. lalu dimana file yang harusnya kita simpan ini ? jawabannya di C:\xampp\htdocs\multi_login disini saya membuat folder dengan nama multi_login, teman-teman bebas membuat nama folder tersebut sesuai keinginan, 

ini adalah beberapa file yang harus kita siapkan untuk membuat Membuat Login Multi User Level Dengan PHP MySQLi, sebelumnya akan saya tunjukan tampilan form login nya, 

Cara menampilkan website yang sudah kita buat ??

jangan bingung, tenang kita akan membahasa bagaimana si caranya supaya aplikasi yang sudah kita buat bisa muncul di web browser kita, jadi gini teman-teman, setelah membuat folder di C:\xampp\htdocs\multi_login dengan semua file yang dibutuhkan sudah dibuat, kita tinggal membuka aplikasi xampp, lalu aktifkan apache & Mysql setelah itu kita buka web browser kita lalu ketikan URL : localhost/multi_login kenapa harus multi_login? dikarnakan nama folder yang kita buat adalah multi_login jadi kita harus memanggilnya sesuai dengan nama yang sudah kita buat,  

Tampilan Form Login


kok bisa jadi gitu ? bisa dong, kalo kita sudah membuat file sourcode nya . apa itu sourcode? bagiamana cara dapetin kode nya ?. tenang teman-teman sudah saya sudah siapkan setiap tampilan dengan kodenya, kita cuman perlu menyalin kode nya lalu tempel di aplikasi text editor lalu simpan sesuai dengan arahan yang sudah ditentukan, lalu dimana disimpan filenya ? kita simpan file nya di folder multi_login lebih tepatnya di  C:\xampp\htdocs\multi_login. tanpa banyak fafifu wasweswos kita ke sourcodenya sekarang, gassskeun.

ingat teman-taman, simpan filenya sesuai dengan nama yang sudah ditentukan ya.

1. index.php

simpan kode ini dengan nama index.php

<!DOCTYPE html>
<html>
<head>
<title>Membuat Login Multi User Level Dengan PHP dan MySQLi - www.widiantocoder.my.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
<h1>SMK JAM'IYYATUL AULAD </h1>


<?php 
if(isset($_GET['pesan'])){
if($_GET['pesan']=="gagal"){
echo "<div class='alert'>Username dan Password tidak sesuai !</div>";
}
}
?>
 
<div class="kotak_login">
<center>
<img src="logo.png"width="180px"height="180">
</center>
<p class="tulisan_login">Silahkan Login</p>
 
<form action="cek_login.php" method="post">
<label>Username</label>
<input type="text" name="username" class="form_login" placeholder="Username .." required="required">
 
<label>Password</label>
<input type="password" name="password" class="form_login" placeholder="Password .." required="required">
 
<input type="submit" class="tombol_login" value="Login">
 
<br/>
<br/>
<center>
<a class="link" href="https://www.widiantocoder.my.id">kembali</a>
</center>
</form>
</div>
 </body>
</html>

2. koneksi.php
<?php 
$koneksi = mysqli_connect("localhost","root","","multi_login");
 
// Check connection
if (mysqli_connect_errno()){
echo "Koneksi database gagal : " . mysqli_connect_error();
}
 
?>

3. style.css

simpan kode ini dengan nama style.css 

body{
font-family: sans-serif;
background: #ebf9fb;
}

h1{
text-align: center;
/*ketebalan font*/
font-weight: 300;
}

.tulisan_login{
text-align: center;
/*membuat semua huruf menjadi kapital*/
text-transform: uppercase;
}

.kotak_login{
width: 350px;
background: white;
/*meletakkan form ke tengah*/
margin: 80px auto;
padding: 30px 20px;
box-shadow: 0px 0px 100px 4px #d6d6d6;
}

label{
font-size: 11pt;
}

.form_login{
/*membuat lebar form penuh*/
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}

.tombol_login{
background: #2aa7e2;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
}

.link{
color: #232323;
text-decoration: none;
font-size: 10pt;
}

.alert{
background: #e44e4e;
color: white;
padding: 10px;
text-align: center;
border:1px solid #b32929;
}

4. cek_login.php

simpan kode ini dengan nama file cek_login.php
<?php 
// mengaktifkan session pada php
session_start();
// menghubungkan php dengan koneksi database
include 'koneksi.php';
// menangkap data yang dikirim dari form login
$username = $_POST['username'];
$password = $_POST['password'];
// menyeleksi data user dengan username dan password yang sesuai
$login = mysqli_query($koneksi,"select * from login where username='$username' and password='$password'");
// menghitung jumlah data yang ditemukan
$cek = mysqli_num_rows($login);

// cek apakah username dan password di temukan pada database
if($cek > 0){

$data = mysqli_fetch_assoc($login);

// cek jika user login sebagai admin
if($data['level']=="guru"){

// buat session login dan username
$_SESSION['username'] = $username;
$_SESSION['level'] = "guru";
// alihkan ke halaman dashboard guru
header("location:halaman_admin.php");

// cek jika user login sebagai siswa
}else if($data['level']=="siswa"){
// buat session login dan username
$_SESSION['username'] = $username;
$_SESSION['level'] = "siswa";
// alihkan ke halaman dashboard siswa
header("location:halaman_siswa.php");

// cek jika user login sebagai guru
}else if($data['level']=="admin"){
// buat session login dan username
$_SESSION['username'] = $username;
$_SESSION['level'] = "admin";
// alihkan ke halaman dashboard admin
header("location:halaman_admin.php");

}else{

// alihkan ke halaman login kembali
header("location:index.php?pesan=gagal");
}
}else{
header("location:index.php?pesan=gagal");
}

?>
5. halaman_guru.php
simpan kode ini dengan nama halaman_guru.php

<!DOCTYPE html>
<html>
<head>
<title>Halaman Guru - www.widiantocoder.my.id</title>
</head>
<body>
<?php 
session_start();

// cek apakah yang mengakses halaman ini sudah login
if($_SESSION['level']==""){
header("location:index.php?pesan=gagal");
}

?>
<h1>Halaman Guru</h1>

<p>Halo <b><?php echo $_SESSION['username']; ?></b> Anda telah login sebagai <b><?php echo $_SESSION['level']; ?></b>.</p>
<a href="logout.php">LOGOUT</a>

<br/>
<br/>

<a><a href="https://www.widiantocoder.blogspot.com/membuat-login-multi-user-level-dengan-php-dan-mysqli">- www.widiantocoder.blogspot.com</a>
</body>
</html>
6. halaman_admin.php
simpan kode ini dengan nama halaman_admin.php

<!DOCTYPE html>
<html>
<head>
<title>Halaman Admin - www.widiantocoder.my.id</title>
</head>
<body>
<?php 
session_start();

// cek apakah yang mengakses halaman ini sudah login
if($_SESSION['level']==""){
header("location:index.php?pesan=gagal");
}

?>
<h1>Halaman Guru</h1>

<p>Halo <b><?php echo $_SESSION['username']; ?></b> Anda telah login sebagai <b><?php echo $_SESSION['level']; ?></b>.</p>
<a href="logout.php">LOGOUT</a>

<br/>
<br/>

<a><a href="https://www.widiantocoder.blogspot.com/membuat-login-multi-user-level-dengan-php-dan-mysqli">- www.widiantocoder.blogspot.com</a>
</body>
</html>
7. halaman_siswa.php
simpan kode ini dengan nama halaman_siswa.php

<!DOCTYPE html>
<html>
<head>
<title>Halaman Siswa - www.widiantocoder.my.id</title>
</head>
<body>
<?php 
session_start();

// cek apakah yang mengakses halaman ini sudah login
if($_SESSION['level']==""){
header("location:index.php?pesan=gagal");
}

?>
<h1>Halaman Guru</h1>

<p>Halo <b><?php echo $_SESSION['username']; ?></b> Anda telah login sebagai <b><?php echo $_SESSION['level']; ?></b>.</p>
<a href="logout.php">LOGOUT</a>

<br/>
<br/>

<a><a href="https://www.widiantocoder.blogspot.com/membuat-login-multi-user-level-dengan-php-dan-mysqli">- www.widiantocoder.blogspot.com</a>
</body>
</html>

7. logout.php
simpan kode ini dengan nama logout.php
<?php 
// mengaktifkan session php
session_start();

// menghapus semua session
session_destroy();

// mengalihkan halaman ke halaman login
header("location:index.php");
?>


Saatnya Uji Coba


Lah kenapa ada tulisan username & password salah?? karna saya memasukan username & password yang salah, tidak sesuai dengan table login yang ada di dabase,

Terus gimana kalo username & passwordnya benar? mari kita coba.

Nah ini adalah tampilan ketika username dan password sesuai dengan table database, You can see, there's my name.
Kalo misalnya kita klik link LOGOUT gimana? otomatis kita akan kembali lagi kehalaman login lagi hehe.

Selamat mencoba, Semoga bermanfaat :)
Uraaa




Comments

Post a Comment

Popular posts from this blog

Cara cepat belah layar (Split Screen) windows 10 di laptop atau PC, Terbaru 2021 !!!

Image
  Halo sobat.. pernahkah kamu bertanya-tanya saat melaksanakan sebuah tugas dengan menggunakan Laptop atau computer, Kamu harus membuka beberapa aplikasi sekaligus saat bekerja ? jika benar, Kamu bisa looh menggunakan fitur Split Screen, Oh yaa sob.. fitur tersebut tersedia bagi semua pengguna Windows, baik Windows 8 atau Windows 10.. Bahkan cara penggunaan fitur tersebut sangatlah mudah, silahkan Kamu ikuti pembahasan artikel dibawah ini sampai selesai agar lebih jelas dan kamu bisa mempraktekannya. v    Sobat.. taukah Kamu apa itu Split Screen ( Belah Layar)???? §   Split Screen adalah fitur baru hsusnya pengguna dari windows 10 yang dapat menampilkan dua atau lebih jendela aplikasi sekaligus dalam satu layar monitor. Dengan fitur Split Screen ini, tampilan layar Laptop atau PC Kamu akan terlihat rapih dibandingkan membiarkan jendela aplikasi mengambang diatas tampilan desktop. §   Split Screen dapat dikatakan sebagai salah satu fitur unggulan dari perangkat yang bersistem operas
Read more

Tutorial Membuat Aplikasi Catatan Perjalanan UKK RPL 2022 Paket 1 (Peduli Diri)| Dengan PHP dan MySQLi (Part VII)

Image
Membuat Tampilan Tambah Data Perjalanan Simpan syntax dibawah ini dengan nama ubah .php  di dalam folder  tambah_perjalanan , seperti gambar dibawah ini !! Syntak ubah.php <?php    session_start();   if($_SESSION['status']!="login"){     header("location:../index.php?pesan=belum_login");   }   include'../koneksi.php'; $id = $_GET['id']; $ambil_data = mysqli_query($koneksi,"SELECT * FROM perjalanan WHERE id='$id'"); while($edit_data = mysqli_fetch_array($ambil_data)){ ?> <!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <title>Widianto</title>   <link rel="stylesheet" href="../css/mdi/css/materialdesignicons.min.css">   <link rel="stylesheet" href="../css/feather/feather.css">   <l
Read more

Cara cepat copy paste data tabel excel ke word tanpa berantakan, Terbaru 2021 !!!

Image
  Sobat kamu tau bagaimanakah cara mensalin data excel tanpa membuat data tersebut berantakan kedalam Ms. Word.? Tentunya data ini bisa kita salin kedalam Ms.Word dengan beberapa cara.. Maka dalam hal ini Pemandu Tutorial akan memberikan beberapa langkah untuk menyalin data excel kedalam ms.word, tentunya dengan cara ini Admin pastikan Kamu akan dengan mudah mengikutinya, soo… baca panduan ini sampai selesai yaah !!! Memakai program Excel tidaklah selalu membahas soal   menghitung angka dan membuat data saja. Sesekali data ini perlu disajikan dalam bentuk laporan yang bisanya dibuat dalam aplikasi lain, salah satunya yaitu Ms.Word, itulah alas an bahwa kita juga harus memahami bagaimanakah cara copy paste Data Tabel Excell kedalam Ms. Word dengan rapih. Sebenarnya cara ini sangatlah mudah untuk kita terapkan, hanya seperti copy paste biasa pada Word, namun kita perlu memilih pada beberapa opsi pengaturan agar hasi copy table Excel di Word bisa menjadi sangat rapih. Pada hal ini Admin
Read more