create login page with php code example
Example 1: simple login form in php
<?php
session_start();
$errorMsg = "";
$validUser = $_SESSION["login"] === true;
if(isset($_POST["sub"])) {
$validUser = $_POST["username"] == "admin" && $_POST["password"] == "password";
if(!$validUser) $errorMsg = "Invalid username or password.";
else $_SESSION["login"] = true;
}
if($validUser) {
header("Location: /login-success.php"); die();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Login</title>
</head>
<body>
<form name="input" action="" method="post">
<label for="username">Username:</label><input type="text" value="<?= $_POST["username"] ?>" id="username" name="username" />
<label for="password">Password:</label><input type="password" value="" id="password" name="password" />
<div class="error"><?= $errorMsg ?></div>
<input type="submit" value="Home" name="sub" />
</form>
</body>
</html>
Example 2: how to make a working login system using code
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script>
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
function signUp(){
var email = document.getElementById("email");
var password = document.getElementById("password");
const promise = auth.createUserWithEmailAndPassword(email.value, password.value);
promise.catch(e => alert(e.message));
alert("Signed Up");
}
function signIn(){
var email = document.getElementById("email");
var password = document.getElementById("password");
const promise = auth.signInWithEmailAndPassword(email.value, password.value);
promise.catch(e => alert(e.message));
}
function signOut(){
auth.signOut();
alert("Signed Out");
}
auth.onAuthStateChanged(function(user){
if(user){
var email = user.email;
alert("Signed in as " + email);
}else{
alert("No Active User");
}
});g
</script>
<style type="text/css">
body{
background-color: #55d6aa;
}
h1{
background-color: #ff4d4d;
margin: 10px auto;
text-align: center;
color: white;
}
#formContainer{
background-color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
width: 25%;
height: 45;
margin: 10px auto;
}
#header{
width: 100%;
height: 10px;
background: black;
}
#email{
width: 70%;
height: 40px;
display:block;
margin: 25px auto;
border: none;
outline: none;
border-bottom: 2px solid black;
}
#password{
width: 70%;
height: 40px;
display: block;
margin: 10px auto;
border: none;
outline: none;
border-bottom: 2px solid black;
}
#signUp{
background-color: #ff4d4d;
color: white;
border: none;
font-weight: bold;
padding: 15px 32px;
border-radius: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin-top: 20px;
margin-left: 50px;
}
#signIn{
background-color: #32ff7e;
color: white;
font-weight: bold;
border: none;
padding: 15px 35px;
border-radius: 10px;
text-align: center;
text-decoration: none;
font-size: 13px
}
#signOut{
background-color: #FFA500;
color: white;
border: none;
padding: 12px 32px;
border-radius: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin-top: 9px;
margin-left: 74px;
font-weight: bold;
}
button: hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 7px 50px 0 rgba(0,0,0,0,.19);
}
</style>
</head>
<body>
<h1>Login Here</h1>
<div id="formContainer">
<div id="header"> </div>
<input type="email" placeholder="Email" id="email">
<input type="password" placeholder="Password" id="password">
<button onclick="signUp()" id="signUp"> Sign Up </button>
<button onclick="signIn()" id="signIn"> Sign In </button>
<button onclick="signOut()" id="signOut"> Sign Out </button>
Continue</a>
</body>
</html>
Example 3: login php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<form action="" method="POST">
<input type="password" name="password">
<button type="submit" name="submit">Login</button>
</form>
<?php
if(isset($_POST['submit'])){
if(password_verify($_POST['password'], '$2y$10$sejeRNYZGaoPh1EwfcuO1.hxl/uepQOh9SITWWgeej86vnMt26KIa')){
$_SESSION['login'] = true;
header("Location: http://localhost");
}
}
?>
</body>
</html>