Membuat Popup Sederhana Saat Hendak Login
Jadi biasanya ketika kita ingin masuk ke halaman admin, pasti kita di suguhkan atau masuk pada halaman login, dimana pasti terdapat username dan password yang telah terdaftar di admin, atau dapat kita contohkan selain admin yaitu ke halaman sosmed teman, pasti teman-teman sebelum masuk ke halaman profile teman-teman mesti login terlebih dahulu bukan, ya seperti itu tapi disini kita akan sedikit memodifikasi ketika kita menekan tombol login terdapat jendela login, istilahnya jadi merancang sedikit lebih cantik lagi dikala login, oke jangan kemana-mana sesaat lagi kita akan membahas merancang popup sederhana dikala hendak login, simak terus ya teman-teman.
Dengan sentuhan CSS dan sedikit javascript kita dapat merancang popup sederhana dikala hendak login, hal yang mesti teman-teman persiapkan ialah:
- teman-teman mesti telah merancang database admin, karena disini saya akan mencontohkan masuk ke halaman admin.
- mesti telah mempunyai confi.php yaitu isinya mengenai mengkoneksikan php ke database kita, saya harap teman-teman telah dapat ya.
- teman-teman saya harap telah dapat merancang form login sebelumnya, karena disini kita seketika akan membahas efek merancang popup sederhana dikala hendak login secara seketika.
- disini saya mempunyai 3 file php, yaitu index, config, (hakekatnya file config kita dapat isi seketika di index tapi supaya rapi saya telah terbiasa di pisahkan, berikutnya halaman adminnya, seterha isi file halaman admin itu apa, yang jelas supaya kita tau, bahwa kita telah masuk ke halaman admin.
jadi teman-teman persiapakan itu segala ya, oke seketika saya caranya selaku berikut ini:
<-e-?php
ob_start();
session_start();
if(isset($_SESSION['admin_username'])) header(location:index.php);
include config.php;
if(isset($_POST[submit_login])){
$username=$_POST[username];
$password=md5($_POST[password]);
$sql_login = mysqli_query($conn, SELECT * FROM admin WHERE username ='$username'
AND password = '$password' );
if(mysqli_num_rows($sql_login)>0){
$row_admin = mysqli_fetch_array($sql_login);
$_SESSION ['admin_id'] = $row_admin[id];
$_SESSION ['admin_username'] = $row_admin[username];
header (location:berhasil.php);
} else {
header(location:index.php?failed);
}
}
?>
<!DOCTYPE html>
<html>
<-e-style>
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
<body>
<!-- <ul>
<li onclick=document.getElementById('id01').style.display='block' style=width:auto;>Login</li>
</ul> -->
<h2><strong>merancang popup sederhana dikala hendak login</strong></h2>
<button onclick=document.getElementById('id01').style.display='block' style=width:auto;>Login</button>
<?php if(isset($_GET[failed])) {?>
Username atau Password Kamu Salah. Silakan hubungi Administrator.
<?php } ?>
<div id=id01 class=modal>
<form class=modal-content animate method=post>
<fieldset class=imgcontainer>
<div class=form-group>
<input class=form-control placeholder=Username name=username type=text autofocus=autofocus />
</div>
<div class=form-group>
<input class=form-control placeholder=Password name=password type=password value= />
</div>
<input type=submit name=submit_login value=Login class=btn btn-lg btn-success btn-block/>
</fieldset>
</form>
</div>
<-e-script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = none;
}
}
</script>
</body>
</html>
Lumayan panjang ya, padahal tampilan indexnya hanya terdapat Judul dan tombol login: oke seketika saya kita lihat halaman indexnya terlebih dahulu:
yang di atas ini ialah halaman indexnya ya teman-teman.
Nah ini dia kita akan memunculkan efek ini, jendela popup login, oke seketika saja kita tekan login supaya masuk ke halaman admin, tampilannya seperti ini:
Telah berhasil ya teman-teman, oke saya rasa pembahasn kita mengenai merancang popup sederhana dikala hendak login, lumayan ya teman-teman dan semoga bermafaat dan hingga jumpa di artikel selanjutnnya terimakasih.
Sumber https://kursuswebsite.org
