Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
CREATE TABLE `tblusers` (
`id` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
//login.php
<?php
session_start();
if (isset($_SESSION["user"])) {
header("Location: index.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>Login and Register using PHP Mysql password_hash password_verify</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<section class="vh-100">
<div class="container py-5 h-100">
<p><h1>Login and Register using PHP Mysql password_hash password_verify</h1></p>
<div class="row d-flex align-items-center justify-content-center h-100">
<div class="col-md-8 col-lg-7 col-xl-6">
<img src="login.png"
class="img-fluid" alt="Phone image">
</div>
<div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
<?php
if (isset($_POST["login"])) {
$email = $_POST["email"];
$password = $_POST["password"];
require_once "database.php";
$sql = "SELECT * FROM tblusers WHERE email = '$email'";
$result = mysqli_query($conn, $sql);
$user = mysqli_fetch_array($result, MYSQLI_ASSOC);
if ($user) {
if (password_verify($password, $user["password"])) { //https://www.php.net/manual/en/function.password-verify.php
session_start();
$_SESSION["user"] = "yes";
header("Location: index.php");
die();
}else{
echo "<div class='alert alert-danger'>Password does not match</div>";
}
}else{
echo "<div class='alert alert-danger'>Email does not match</div>";
}
}
?>
<form action="login.php" method="post">
<div class="form-outline mb-4">
<input type="email" id="email" name="email" class="form-control form-control-lg" />
<label class="form-label" for="email">Email address</label>
</div>
<div class="form-outline mb-4">
<input type="password" name="password" id="password" class="form-control form-control-lg" />
<label class="form-label" for="password">Password</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
<a href="#!">Forgot password?</a>
</div>
<input type="submit" value="Sign in" name="login" class="btn btn-primary btn-lg btn-block">
<p>Not registered yet <a href="registration.php">Register Here</a></p>
<div class="divider d-flex align-items-center my-4">
<p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
</div>
<a class="btn btn-primary btn-lg btn-block" style="background-color: #3b5998" href="#!"
role="button">
<i class="fab fa-facebook-f me-2"></i>Continue with Facebook
</a>
<a class="btn btn-primary btn-lg btn-block" style="background-color: #55acee" href="#!"
role="button">
<i class="fab fa-twitter me-2"></i>Continue with Twitter</a>
</form>
</div>
</div>
</div>
</section>
<style>
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}
</style>
</body>
</html>
database.php
//database.php
<?php
$hostName = "localhost";
$dbUser = "root";
$dbPassword = "";
$dbName = "projectdb";
$conn = mysqli_connect($hostName, $dbUser, $dbPassword, $dbName);
if (!$conn) {
die("Something went wrong;");
}
?>
registration.php
//registration.php
<?php
session_start();
if (isset($_SESSION["user"])) {
header("Location: index.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>Login and Register using PHP Mysql password_hash password_verify</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<section class="vh-100">
<div class="container py-5 h-100">
<p><h1>Login and Register using PHP Mysql password_hash password_verify</h1></p>
<div class="row d-flex align-items-center justify-content-center h-100">
<div class="col-md-8 col-lg-7 col-xl-6">
<img src="signup.svg"
class="img-fluid" alt="">
</div>
<div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
<?php
if (isset($_POST["submit"])) {
$name = $_POST["name"];
$email = $_POST["email"];
$password = $_POST["password"];
$passwordRepeat = $_POST["repeat_password"];
$passwordHash = password_hash($password, PASSWORD_DEFAULT);
$errors = array();
if (empty($name) OR empty($email) OR empty($password) OR empty($passwordRepeat)) {
array_push($errors,"All fields are required");
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
array_push($errors, "Email is not valid");
}
if (strlen($password)<8) {
array_push($errors,"Password must be at least 8 charactes long");
}
if ($password!==$passwordRepeat) {
array_push($errors,"Password does not match");
}
require_once "database.php";
$sql = "SELECT * FROM tblusers WHERE email = '$email'";
$result = mysqli_query($conn, $sql);
$rowCount = mysqli_num_rows($result);
if ($rowCount>0) {
array_push($errors,"Email already exists!");
}
if (count($errors)>0) {
foreach ($errors as $error) {
echo "<div class='alert alert-danger'>$error</div>";
}
}else{
$sql = "INSERT INTO tblusers (name, email, password) VALUES ( ?, ?, ? )";
$stmt = mysqli_stmt_init($conn);
$prepareStmt = mysqli_stmt_prepare($stmt,$sql);
if ($prepareStmt) {
mysqli_stmt_bind_param($stmt,"sss",$name, $email, $passwordHash);
mysqli_stmt_execute($stmt);
echo "<div class='alert alert-success'>You are registered successfully.</div>";
}else{
die("Something went wrong");
}
}
}
?>
<form action="registration.php" method="post">
<div class="form-outline mb-4">
<input type="text" id="name" name="name" class="form-control form-control-lg" />
<label class="form-label" for="name">Full Name</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="email" name="email" class="form-control form-control-lg" />
<label class="form-label" for="email">Email address</label>
</div>
<div class="form-outline mb-4">
<input type="password" name="password" id="password" class="form-control form-control-lg" />
<label class="form-label" for="password">Password</label>
</div>
<div class="form-outline mb-4">
<input type="password" name="repeat_password" id="repeat_password" class="form-control form-control-lg" />
<label class="form-label" for="repeat_password">Repeat Password</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
<a href="#!">Forgot password?</a>
</div>
<input type="submit" class="btn btn-primary btn-lg btn-block" value="Register" name="submit">
<p>Already Registered <a href="login.php">Login Here</a></p>
</form>
</div>
</div>
</div>
</section>
<style>
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}
</style>
</body>
</html>
index.php
//index.php
<?php
session_start();
if (!isset($_SESSION["user"])) {
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>User Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Welcome to Dashboard</h1>
<a href="logout.php" class="btn btn-warning">Logout</a>
</div>
</body>
</html>
logout.php
//logout.php
<?php
session_start();
session_destroy();
header("Location: login.php");
?>
