Kembali lagi dengan blog yang jarang update ini haha, kali ini kita akan belajar membuat form login hampir mirip dengan standar perusahaanj, kok bisa ?, apa aja sih fiturnya ?, mungkin itu pertanyaan sobat jika membaca artikel ini. Form login kali ini saya sertakan beberapa fitur diantaranya, salah login 3 kali maka akun terblokir dan password menggunakan password random, dengan tujuan mencegah user untuk mengingat password, tujuan akhir sebenarnya adalah mengirimkan password acak ke nomor hp user sehingga akan lebih aman, itu tujuan sebenarnya, sedangkan pelajaran kita hari ini mirip seperti itu hanya perlu dikembangkan saja.
Desain kali ini masih menggunakan Bootstrap sehingga desain form lebih menarik. Disini saya sertakan rancangan program dari Pseudocode, Algoritma, dan Flowchart. Dibawah ini gambar jika sudah jadi.
Seperti inilah tampilan awalnya.
Dapatkan password dengan klik button diatas form email, dan langsung klik button copy untuk meng copy Password.
Seperti inilah tampilan halaman jika login benar.
Jika salah maka akan muncul pemberitahuan jumlah kesalahan dan kesempatan input.
Jika salah lebih dari tiga kali maka akan menuju ke halaman pemberitahuan jika akun diblokir seperti di bawah ini.
Baiklah langsung lihat saja rancangannya dibawah ini.
1. Algoritma
1). Mulai
2). SESSION ['salah'] user, password = 0
3). Mengecek input USER = user && PASS = pass
4). Jika Data yang dimasukan TRUE maka lanjut ke halaman berikutnya
5). Jika data yang dimasukan FALSE maka akan melakukan Increment pada SESSION ['salah']+1
6). CEK apakah kesalahan login sudah lebih dari atau = 3
7). Jika kesalahan >3 maka akan menuju kehalaman pemblokiran
8). Jika kesalahan belum sampai >3 maka akan kembali ke halaman awal
9). Selesai
2. Pseudocode
SESSION['salah'],USER,PASS = 0 Jika== TRUE Login berhasil menuju page selanjutnya Jika False Maka melakukan proses increment pada SESSION ['salah']+1 Jika SESSION ['salah'] >= 3 == TRUE Maka akan menuju kehalaman pemblokiran Jika FALSE Kembali ke awal
3. Flowchart
Itulah rancangannya sobat, sudah nggak sabar pengen coba?, mari kita coba. Pelajari Script dibawah ini.
Disini kita membutuhkan dua file.php, yaitu : 1. index.php, berisi coding utama yaitu desain form loginnya. 2. login.php, berfungsi untuk menaruh codingan logika login.
1. Buat File.php Baru, lalu Isikan file index.php sobat dengan coding ini.
Coding dibawah berfungsi sebagai SESSION jika login benar dan akan menuju ke page selanjutnya.
Coding nya Begini Gan :
<?php
session_start();
if (isset($_SESSION ["gagal"])) {
// if ($_SESSION["gagal"] >0 ) {
// peringatan();
// }
if ($_SESSION["gagal"] >= 3) {
session_unset();
echo"<center><img src='https://pre00.deviantart.net/59f9/th/pre/f/2011/288/a/9/a94f9109ab1783fc222c5367fd21813a-d4cw2tq.png' style='width: 180px; height: 200px'> ";
echo '<center><h1 style="font-family: consolas">SELAMAT ANDA DI BLOKIR!</h1>';
echo "<center><a href='index.php'><button>Buka Akun</button></a>";
exit();
}
}
else
{
$_SESSION ["gagal"]=0;
header("location: index.php");
}
$gagal = $_SESSION["gagal"];
$kesempatan = 3 - $gagal;
?>
Lanjut dengan Coding selanjutnya
Coding nya Begini Gan :
<;!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS COBA</title>
<!--Berfungsi untuk memanggil atribut yang ada di Bootstrap-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/images/favicon.ico">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/floating-labels.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--Coding dibawah ini adalah java script yang akan digunakan untuk memberikan efek desain yang di aplikasikan-->
<script>
window.setTimeout(function(){
$(".alert").fadeTo(400,0).slideUP(400, function(){
$(this).remove();
});
}20000);
</script>
<script>
function silet(){
$(document).ready(function (){
$('#exampleModal').modal('show')
});
}
</script>
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("Copy");
}
</script>
</head>
<body>
<?php
if (isset($_POST ['PassBaru'])) {
echo "<script type='text/javascript'>silet();</script> ";
}
?>
<div class="row">
<div class="col">
<div class="text-center mb-2">
<img class="mb-1" src="assets/images/bootstrap-solid.svg" width="75" height="75">
<h1 style="color: blue;font-family: consolas">BUSI Ads</h1>
</div>
<!--Coding dibawah ini berfungsi untuk random password-->
<form method="POST">
<div class="text-center">
<div class='alert alert-danger text-center mb-3'>
<p class="mb-1"><strong>Dapatkan Password Terlebih Dahulu!.</strong></p>
<input type="submit" class="btn btn-danger" name="PassBaru" value="Disini Gan!">
</div>
<?php
$passBaru = NULL;
if (isset($_POST['PassBaru'])) {
isset($_SESSION['pass']);
$_SESSION['pass'] =rand(100000,999999999);
$passBaru = $_SESSION['pass'];
}
?>
</div>
</form>
<!--Untuk menampilkan peringatan sisa dan kesalahan login-->
<form id="frm01" name="frm01" method="POST" action="login.php" class="form-signin">
<?php
if (isset($_SESSION["gagal"])){
if ($_SESSION ["gagal"]>0) {
echo "<div class='alert alert-danger fade show text-center mb-3'>
<center><strong>PERINGATAN!</center></strong>
<strong>Anda Memasukan Usernama Atau Password Yang Salah!.</strong><br><br>
<strong>Salah</strong> : $gagal Kali</br>
<strong>Sisa</strong> : $kesempatan Kesempatan
</div>";
}
}
?>
<!--Desain form login dimulai dari sini-->
<div class="form-label-group">
<input name="inputEmail" class="form-control" type="email" id="inputEmail" placeholder="Email Address" autofocus="yes"
autocomplete="no" required="yes" >
<label for="inputEmail">Email Address</label>
</div>
<div class="form-label-group">
<input name="inputpassword" class="form-control" type="password" id="inputpassword" placeholder="Password" required="yes">
<label for="inputpassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox"> Remember Me ?
</label>
</div>
<div class="text-center mb-2">
<button type="submit" class="btn btn-lg btn-primary btn-block">SIGN IN</button>
</div>
<button type="button" class="btn btn-dark" style="width: 192px">FORGOT PASSWORD</button>
<button type="button" class="btn btn-success" style="width: 193px">CREATE ACOUNT</button>
</form>
<!--Ini adalah desain Modul untuk menampilkan random password-->
<div class="text-center">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<h5 class="text-center"></h5>-->
</div>
<div class="modal-body text-center">
<p style="font-family: consolas">Gunakan Password Ini!.</p>
<!-- The text field -->
<input class="alert alert-danger text-center" type="text" value=<?php echo "$passBaru"; ?> id="myInput"><br>
<!-- The button used to copy the text -->
<button style="font-family: Consolas" class="btn btn-success" onclick="myFunction()">Copy</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2. Buat file login.php
Disinilah coding logika login dibuat, dan menampilkan page baru jika login gagal.
Coding nya Begini Gan :
<?php
session_start();
$user = $_POST["inputEmail"];
$pass = $_POST["inputpassword"];
//=============================
$dbuser = "admin@gmail.com";
$dbpass = "a";
//=============================
if ($user == $dbuser && $pass == $_SESSION['pass']){
$_SESSION["gagal"] = 0;
echo"<center><img src='https://i.pinimg.com/originals/c2/ef/a7/c2efa7aedc0a49901422da206c1d572e.jpg' style='width: 180px; height: 200px'> ";
echo '<center><h1 style="font-family: consolas">SELAMAT ANDA BERHASIL LOGIN!</h1>';
echo "<center><a href='index.php'><button>LOG OUT</button></a>";
}
else {
if (isset($_SESSION ["gagal"])) {
$_SESSION ["gagal"]++;
}
else {
$_SESSION ["gagal"] = 1;
}
header("location:index.php");
}
?>
Assalamu'alaikum admin, artikel admin sangat membantu saya dalam membuat form login dan logout dikarenakan saya masih pemula dan harus banyak belajar, artikel anda sangat membantu skli dan mudah di pahami , perkenalkan nama saya fariz alfaiq (1822500083), kunjungi juga web kampus saya (https://www.atmaluhur.ac.id/)
BalasHapus