![](https://muhidin.web.id/wp-content/uploads/2020/04/Login_V18.png)
MWI – Sesuai kesepakatan silahkan download template login Login 18 dari Color Lib ekstrak dan letakan di dalam folder web server (/var/www/html), kita akan coba bangun aplikasi login dengan beberapa teknik hashing dan tanpa hashing.
![](https://muhidin.web.id/wp-content/uploads/2020/05/image.png)
Daftar Isi
Tanpa Hash
Langkah pertama buat file index.php isi dengan
<?php
session_start();
if(empty($_SESSION['idwp']) AND empty($_SESSION['emailwp'])){
echo "Login dahulu dong<br>";
echo "<a href='login1.php'>Tanpa Hash</a> | ";
echo "<a href='login2.php'>Hashing MD5</a> | ";
echo "<a href='login3.php'>Hashing SHA1</a> | ";
echo "<a href='login4.php'>Bcrypt</a>";
}else{
echo "Hore berhasil Login<br>";
echo "<a href='logout.php'>Log out</a>";
}
?>
Buat file login1.php isi dengan, ambil dari file Login V18
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login V18</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body style="background-color: #666666;">
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form" method="post" action="login1cek.php">
<span class="login100-form-title p-b-43">
Login to continue
</span>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
<input class="input100" type="text" name="email">
<span class="focus-input100"></span>
<span class="label-input100">Email</span>
</div>
<div class="wrap-input100 validate-input" data-validate="Password is required">
<input class="input100" type="password" name="pass">
<span class="focus-input100"></span>
<span class="label-input100">Password</span>
</div>
<div class="flex-sb-m w-full p-t-3 p-b-32">
<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">
Remember me
</label>
</div>
<div>
<a href="#" class="txt1">
Forgot Password?
</a>
</div>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">
Login
</button>
</div>
<div class="text-center p-t-46 p-b-20">
<span class="txt2">
or sign up using
</span>
</div>
<div class="login100-form-social flex-c-m">
<a href="#" class="login100-form-social-item flex-c-m bg1 m-r-5">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</a>
<a href="#" class="login100-form-social-item flex-c-m bg2 m-r-5">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>
</form>
<div class="login100-more" style="background-image: url('images/bg-01.jpg');">
</div>
</div>
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>
Jangan lupa buat dahulu koneksi.php dengan isi. (Sesuaikan nama db, user dan password)
<?php
$host = "localhost";
$userdb = "root";
$passdb = "";
$namadb = "pesat_10_login";
$koneksi=mysqli_connect($host, $userdb, $passdb, $namadb);
?>
Buat pengecekan dengan nama login1cek.php dan isi dengan
<?php
include_once "koneksi.php";
$email = $_POST['email'];
$pass = $_POST['pass'];
$sql = "SELECT * FROM login1 WHERE email='$email' AND password='$pass'";
$login=mysqli_query($koneksi,$sql);
$ketemu=mysqli_num_rows($login);
$b=mysqli_fetch_array($login);
if($ketemu>0){
session_start();
$_SESSION['idwp'] = $b['id'];
$_SESSION['emailwp'] = $b['email'];
$_SESSION['logged'] = 1;
header('location: index.php');
}else{
include "login1.php";
echo '<script language="javascript">';
echo 'alert ("Ada yang Salah")';
echo '</script>';
}
?>
Terakhir siapkan file logout.php dan isi dengan
<?php
session_start();
unset($_SESSION['idwp']);
unset($_SESSION['emailwp']);
unset($_SESSION['logged']);
echo "<script>window.location='.'</script>";
?>
Siapkan database dengan nama disesuaikan dengan yg ada di koneksi.php dan buat 1 tabel dengan nama login1
![](https://muhidin.web.id/wp-content/uploads/2020/05/image-1.png)
isi 1 data email admin@gmail.com dan password admin
Hashing MD5
Selanjutnya pada login2.php ubah bagian action dan judul
<form class="login100-form validate-form" method="post" action="login2cek.php">
<span class="login100-form-title p-b-43">
Login 2 to continue with MD5 Hashing
</span>
lanjut untuk login2cek.php isi dengan
<?php
include_once "koneksi.php";
$email = $_POST['email'];
$pass = md5($_POST['pass']);
$sql = "SELECT * FROM login2 WHERE email='$email' AND password='$pass'";
$login=mysqli_query($koneksi,$sql);
$ketemu=mysqli_num_rows($login);
$b=mysqli_fetch_array($login);
if($ketemu>0){
session_start();
$_SESSION['idwp'] = $b['id'];
$_SESSION['emailwp'] = $b['email'];
$_SESSION['logged'] = 1;
header('location: index.php');
}else{
include "login2.php";
echo '<script language="javascript">';
echo 'alert ("Email atau Password,\n Ada yang Salah")';
echo '</script>';
}
?>
Untuk database duplikat tabel login1 menjadi login2 dan edit password admin menjadi md5(admin) seperti ini
![](https://muhidin.web.id/wp-content/uploads/2020/05/image-2.png)
Hashing SHA1
buat file login3.php dan ubah bagian action dan judul menjadi
<form class="login100-form validate-form" method="post" action="login3cek.php">
<span class="login100-form-title p-b-43">
Login 3 to continue SHA1
</span>
Buat pengecekan dengan nama yg disebut di file login3.php yaitu login3cek.php isi dengan
<?php
include_once "koneksi.php";
$email = $_POST['email'];
$pass = sha1($_POST['pass']);
$sql = "SELECT * FROM login3 WHERE email='$email' AND password='$pass'";
$login=mysqli_query($koneksi,$sql);
$ketemu=mysqli_num_rows($login);
$b=mysqli_fetch_array($login);
if($ketemu>0){
session_start();
$_SESSION['idwp'] = $b['id'];
$_SESSION['emailwp'] = $b['email'];
$_SESSION['logged'] = 1;
header('location: index.php');
}else{
include "login3.php";
echo '<script language="javascript">';
echo 'alert ("Ada yang Salah NIH pass atau emailnya")';
echo '</script>';
}
?>
untuk tabel duplikat dari login1 menjadi login3 dan edit password menjadi sha1(admin) seperti gambar
![](https://muhidin.web.id/wp-content/uploads/2020/05/image-3.png)
Hashing Bcrypt
Nah ini yang sekarang katanya masih aman teknik login menggunakan Hashing BCrypt, caranya buat login4.php duplikat dari login1.php dan edit bagian
<form class="login100-form validate-form" method="post" action="login4cek.php">
<span class="login100-form-title p-b-43">
Login 4 to continue BCRYPT
</span>
buat login4cek.php dan isi dengan
<?php
include_once "koneksi.php";
$email = $_POST['email'];
$pass = $_POST['pass'];
$sql = "SELECT * FROM login4 WHERE email='$email'";
$login=mysqli_query($koneksi,$sql);
$ketemu=mysqli_num_rows($login);
$b=mysqli_fetch_array($login);
if($ketemu>0){
if (password_verify($pass, $b['password'])) {
session_start();
$_SESSION['idwp'] = $b['id'];
$_SESSION['emailwp'] = $b['email'];
$_SESSION['logged'] = 1;
header('location: index.php');
}else{
echo "salah password";
}
}else{
// include "login4.php";
// echo '<script language="javascript">';
// echo 'alert ("Ada yang Salah NIH pass atau emailnya")';
// echo '</script>';
var_dump($sql);
}
?>
untuk tabel duplikat dari tabel login1 menjadi login4 dan bagian password dengan
atau isi email dengan: admin@gmail.com dan password:$2b$10$8tG0CaTPrtxD9dJI7DtAVu.jIDzBIyBkH0e3k7WKG3kLe7U9K5W9a
Hashing BCrypt selalu memunculkan karakter yang berbeda setiap dibuka, maka buat sendiri melalui web generator seperti PasswordHashing.com
ini diambil dari BCrypt generator dari link ini https://passwordhashing.com lalu pili BCyrpt
![](https://muhidin.web.id/wp-content/uploads/2020/05/image-4.png)
lalu buat password yang akan di hashing menjadi BCrypt misal admin
![](https://muhidin.web.id/wp-content/uploads/2020/05/image-6.png)
Lanjut dengan klik Generate Hash lalu copy hasil generate dan paste di inputan password phpMyAdmin
![](https://muhidin.web.id/wp-content/uploads/2020/05/image-7.png)
Demikian materi dibuat, selamat mencoba mempelajari teknik login, selanjutnya akan kita bahas materi CRUD seperti soal terlampir di web ini. Terima kasih (ms).