Welcomes Telegram group ! Link Button

membuat halaman login tanpa database

cara membuat form login tanpa database

Lebih dahulu kamu dapat membuat file semacam di bawah ini

  • formlogin
    • index.php
    • login.php
    • logout.php
    • proses_login.php
    • style.css

Index.php

Dalam file index.php ini kami akan membuat desain formulir untuk memeriksa sesi login. Yang jika sesi login pengguna masih disimpan, tampilan yang akan ditampilkan oleh browser adalah login tampilan yang berhasil, jika sesi pengguna telah kedaluwarsa maka formulir akan dialihkan ke login.php untuk login.


<?php
session_start();
if(isset($_SESSION["username"])){
}else{
echo header("location:login.php");
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>SELAMAT ANDA BERHASIL LOGIN</h2>
<marquee><h2>Good Job!!!</h2></marquee>
<br>
<a href="logout.php"><input type="submit" value="Logout"></a>
</div>
</body>
</html>

Style.css

Pada file style.css ini kita untuk bentuk layout / bentuk aturan lokasi form login nya. guna form login ini aku memberikan sebagian dampak ialah latar belakang animasi warna berjalan serta animasi bounce down.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

* {
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;

}

body {
background: linear-gradient(45deg, #68f3f8, #67adf9, #6866fa, #b065fb, #fb63fd, #fe62b3, #ff6166);
background-size: 500% 500%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
min-height: 100vh;
min-width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}

@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}

50% {
background-position: 100% 50%
}

100% {
background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}

50% {
background-position: 100% 50%
}

100% {
background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
background-position: 0% 50%
}

50% {
background-position: 100% 50%
}

100% {
background-position: 0% 50%
}
}

.container {
width: 400px;
min-height: 400px;
background: #FFF;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
padding: 40px 30px;
animation: bouncedown 3s ease 1 forwards;
}

/* form animation start */
@keyframes bouncedown {
0% {
opacity: 0;
transform: translateY(-2000px);
}

60% {
opacity: 1;
transform: translateY(30px);
}

80% {
transform: translateY(-10px);
}

100% {
transform: translateY(0);
}
}

/* form animation end */

.container .login-text {
color: #111;
font-weight: 500;
font-size: 1.1rem;
text-align: center;
margin-bottom: 20px;
display: block;
text-transform: capitalize;
}

.container:hover .login-text:hover {
animation: rubberBand 2s ease reverse;
}

/*rubberband*/
@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}

30% {
transform: scale3d(1.25, 0.75, 1);
}

40% {
transform: scale3d(0.75, 1.25, 1);
}

50% {
transform: scale3d(1.15, 0.85, 1);
}

65% {
transform: scale3d(.95, 1.05, 1);
}

75% {
transform: scale3d(1.05, .95, 1);
}

to {
transform: scale3d(1, 1, 1);
}
}

.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}

/*rubberband*/

.container .login-email .input-group {
width: 100%;
height: 50px;
margin-bottom: 25px;
}

.container .login-email .input-group input {
width: 100%;
height: 100%;
border: 2px solid #e7e7e7;
padding: 15px 20px;
font-size: 1rem;
border-radius: 30px;
background: transparent;
outline: none;
transition: .3s;
}

.container .login-email .input-group input:focus,
.container .login-email .input-group input:valid {
border-color: #a29bfe;
}

.container .login-email .input-group .btn {
display: block;
width: 100%;
padding: 15px 20px;
text-align: center;
border: none;
background: #a29bfe;
outline: none;
border-radius: 30px;
font-size: 1.2rem;
color: #FFF;
cursor: pointer;
transition: .3s;
}

.container .login-email .input-group .btn:hover {
transform: translateY(-5px);
background: #6c5ce7;
}

.login-register-text {
color: #111;
font-weight: 600;
}

.login-register-text a {
text-decoration: none;
color: #6c5ce7;
}

.container-logout {
width: 500px;
min-height: 200px;
background: #FFF;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
padding: 40px 30px;
}

.container-logout .login-email .input-group .btn {
display: block;
width: 100%;
padding: 15px 20px;
text-align: center;
border: none;
background: #a29bfe;
outline: none;
border-radius: 30px;
font-size: 1.2rem;
color: #FFF;
cursor: pointer;
transition: .3s;
margin-top: 20px;
}

.container-logout .login-email .input-group .btn:hover {
transform: translateY(-5px);
background: #6c5ce7;
}

@media (max-width: 430px) {
.container {
width: 300px;
}
}

Login.php

Pada file login.php ini kita bakal menciptakan cara pengesahan alias pengamatan username serta password yang dimasukan kala login. apabila username serta password yang dimasukan betul, alkisah user yang sukses login bakal dicatat pada session login


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<!-- membuat form -->
<form action="proses_login.php" method="POST" class="login-email">
<p class="login-text" style="font-size: 2rem; font-weight: 800;">Form Login</p>
<div class="input-group">
<input type="text" placeholder="Username" name="username" required>
</div>
<div class="input-group">
<input type="password" placeholder="Password" name="password" required>
</div>
<div class="input-group">
<button name="submit" class="btn">Login</button>
</div>
</form>
<!--copyright start-->
<footer>
<address>
<center>&copy<a href="htts://syarifsoden.blogspot.com">Syarifsoden</a></center>
</address>
</footer>
<!--copyright end-->
</div>
</body>
</html>

Logout.php

Pada file logout.php ini kita isi dengan source code session destroy untuk menghapus seesion pada halaman login.


<?php
session_start();
if(isset($_SESSION['username'])) {
session_destroy();
?>
<meta http-equiv="refresh" content="2; url=login.php"/>
<center><h2>Berhasil Logout</h2>kamu akan dialihkan kembali ke halaman login dalam 2 detik</center>
<?php
} else {
?>
<meta http-equiv="refresh" content="2; url=login.php"/>
<center><h2>Gagal Logout</h2>Silahkan login terlebih dahulu<br/><br/>kamu akan dialihkan kembali ke halaman login dalam 2 detik</center>
<?php
}
?>

proses_login.php

pada file proses_login.php ini terdapat program akan melakukan pengecekan username dan password yang dimasukan user pada saat melakukan login, jika username dan password benar maka user berhasil login.


<?php
session_start();
$username=$_POST["username"];
$password=$_POST["password"];

if($username=="admin" AND $password=="admin"){
#code
$_SESSION["username"]=$username;
header("location:index.php");
}else{
header("location:login.php?login_error");
}
?>

sekian dulu tutorial mebuat halaman Login HTML tanpa Database MYSQLI. Silahkan tinggalkan komentar jika aada yang kurang jelas dam semoga bermanfaat untuk kita semua .

post section Don't remove this section, otherwise theme will crash.

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.