1. Buatlah
sebuah folder baru di dalam direktori htdocs pada XAMPP yaitu folder login, kemudian buatlah sebuah halaman login.html dan simpan di folder login yang baru saja dibuat setelah itu
ketikkan script html berikut :
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h3>Please Login</h3>
<form action="prologin.php"
method="POST">
<input
type="text" name="user"
placeholder="username"></input><br>
<input
type="password" name="pass"
placeholder="password"></input><br>
<input
type="submit" name="login"
value="Login"></input>
</form>
</body>
</html>
Jika sudah silahkan coba jalankan dengan
mengetikkan url berikut di browser anda http://localhost/login/login.html
2. Buatlah
sebuah database baru di PhpMyadmin yaitu
db_login dan pilih db_login tersebut kemudian copykan script mysql di bawah ini
ke SQL pada phpmyadmin
SET
SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET
time_zone = "+00:00";
CREATE
TABLE IF NOT EXISTS `user` (
`username` varchar(30) NOT NULL,
`password` varchar(30) NOT NULL,
`level` varchar(10) NOT NULL
)
ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO
`user` (`username`, `password`, `level`) VALUES
('admin',
'1234', 'admin'),
('pengguna',
'1234', 'user');
ALTER TABLE
`user`
ADD PRIMARY KEY (`username`);
3. Langkah
selanjutnya kita akan membuat coding untuk memproses inputan user dari halaman
login.html, buatlah sebuah halaman baru yaitu prologin.php dan ketikkan coding
berikut ini :
<?php
//Koneksi sederhana dengan PDO
$con=new
PDO("mysql:host=localhost;dbname=db_login","root","");
if (isset($_POST['login'])){
$user=$_POST['user'];
$pass=$_POST['pass'];
$query=$con->prepare("select
* from user where username=:user and password=:pass");
$query->BindParam(":user",$user);
$query->BindParam(":pass",$pass);
$query->execute();
if
($query->rowCount()>0){
session_start();
$data=$query->fetch();
if($data['level']=="admin"){
$_SESSION['username']=$data['username'];
$_SESSION['level']=$data['level'];
header('location:index.php');
}else{
$_SESSION['username']=$data['username'];
$_SESSION['level']=$data['level'];
header('location:index.php');
}
}
else{
echo
"username dan password tidak valid";
}
}
?>
4. Selanjutnya
kita akan membuat halaman yang akan tampil setelah proses login berhasil, baik
yang login itu dengan level admin maupun dengan level user namun akan
menampilkan menu yang berbeda, silahkan buat halaman baru yaitu index.php dan
ketikkan coding berikut :
<?php
session_start();
if (!empty($_SESSION['username']) and
$_SESSION['level']=="admin"){
echo
"welcom ".$_SESSION['level']."<br>"; ?>
<a
href="#">Menu Admin</a><br>
<a
href="?id=logout">Logout</a>
<?php
}
if (!empty($_SESSION['username']) and
$_SESSION['level']=="user"){
echo
"welcom ".$_SESSION['level']."<br>"; ?>
<a
href="#">Menu User</a><br>
<a
href="?id=logout">Logout</a>
<?php
}
if (!empty($_GET['id']) and
$_GET['id']=="logout"){
session_destroy();
header('location:login.html');
}
?>
Jika sudah silahkan tes dibrowser
anda. Lakukan login dengan username admin dan password 1234 kemudian klik login
jika sudah berhasil silahkan logout dan coba lagi login dengan username
pengguna dan password 1234 maka akan terlihat perbedaannya. Nah cukup sekian,
Selamat berkreasi.
Silahkan Download Source Codenya
DISINI
Dibawah ini adalah video
tutorialnya
