Hello kawan , di Postingan kali ini , saya akan membahas tentang tutorial bagaimana membuat tampilan Login. Untuk dapat membuat tampilan login anda harus mempunyai beberapa alat untuk tempur hehe....
Beberapa alat yang perlu anda persiapkan antara lain:
1. Disini saya menggunakan TextEditor NetBeans , jika anda belum memiliki silahkan download di
link https://netbeans.org/downloads/. Anda juga bisa menggunakan texteditor lain banyak pilihan.
2. Anda harus mendownload Bootsrap , anda dapat mendownloadnya di link ini
https://getbootstrap.com/.
3. Jika anda belum memiliki CSS untuk tampilan, anda dapat copas CSS berikut ini :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">.
4. Dan ini JS_nya :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>5. Silahkan copy syntak dibawah ini , dan masukkan ke dalam texteditor anda dan di simpan dengan nama index.php.
<?php
session_start();
//session_register("salah");
ini_set('display_errors',0);
$_SESSION['salah']=0;
if ($_SESSION["salah"]>=3){
echo '<h1>Anda Dalam Kondisi Diblokir</h1>';
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Facebook</title>
<link rel="icon" href="images/images.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/floating-labels.css">
<script>
// function hello()
{
//var email= document.getElementById('email').value;
//alert("Email: "+email)
document.getElementById("email").addEventListener("keyup",function(event){
event.preventDefault();
if(event === 13){
document.getElementById("password").focus();
}
});*//
}
</script>
</head>
<body>
<form id="frm01" name="frm01" action="login.php" method="POST" class="form-signin">
<div class="text-center mb-4">
<img class="mb-4" width="80" height="80" src="images/images.png">
<h1>Facebook</h1>
<p>Untuk Mencoba Buat Form Login</p>
</div>
<div class="form-label-group">
<input class="form-control" type="email" name="email" id="email"
placeholder="Email address" required="" autofocus="no" autocomplete="no">
<label for="email">Email address</label>
</div>
<div class="form-label-group">
<input class="form-control" type="password" name="password" id="password"
placeholder="password " required="" autofocus="yes" autocomplete="yes">
<label for="password">password</label>
</div>
<div class="custom-checkbox mb-1">
<a href="#" target="_blank"> Buat Akun</a>
</div>
<div class="custom-checkbox mb-1">
<a href="#" target="_blank"> Lupa Password?</a>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block " type="submit">Sign in</button>
</form>
</body>
</html>
6. Langkah selanjutnya copykan syntak berikut ini pada textediotr dan disimpan dengan nama login.php.
<?php
session_start();
$user= $_POST['email'];
$pass= $_POST['password'];
//============================
$dbuser = "admin@gmail.com";
$dbadmin = "admin123";
//============================
if($user == $dbuser && $pass == $dbpass){
echo '<h1>SELAMAT SUKSES</h1>';
}
else{
$_SESSION["salah"]++;
header("location:index.php");
}
7. Beginilah hasil nya
Sekian dan terimakasih untuk postingan kali ini, semoga bisa bermanfaat , selamat mencoba
Matur Suwun.......
Tidak ada komentar:
Posting Komentar