Membuat Form Login dengan PHP-MySQL

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.

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

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

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

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

Pilih Jenis Hashinghttps://passwordhashing.com

lalu buat password yang akan di hashing menjadi BCrypt misal admin

Lanjut dengan klik Generate Hash lalu copy hasil generate dan paste di inputan password phpMyAdmin

Demikian materi dibuat, selamat mencoba mempelajari teknik login, selanjutnya akan kita bahas materi CRUD seperti soal terlampir di web ini. Terima kasih (ms).

Tanpa Hash

Hashing MD5

Hashing SHA1

Hashing Bcrypt

Tinggalkan Balasan Batalkan balasan