Here i have created a login page where user can enter their email address and password. When user submit the form, inputs will be verified against the credentials stored in the database, if the email and password match, the user is authorized and granted. Otherwise it will display error message.
You would need database connection to connect to MySQL database.
I have already posted a post about creating a database class for PHP/MySQL. I would suggest you to go through the previous post PHP/MySQL Database Class before following this.
login.php
Let’s create a file named “login.php” and place the following code. This file contains php scripts and HTML code for the login page. Here i have fetched the user from the database according to the entered username and compared the password hash in the database with the entered password’s hash (I have used md5 password hashing method). If both hashes are exactly same, register user id in the session and redirect to the index.php page.
<?php
require('class.database.php');
if(isset($_POST['submit'])){
if(isset($_POST['username'])){
if(isset($_POST['password'])){
$username = $database->escape($_POST['username']);
$password = $database->escape($_POST['password']);
$sql = "SELECT * FROM users WHERE username='$username'";
$results = $database->select($sql);
if(is_array($results) && count($results)>0){
$password_hash = $results[0]['password'];
if($password_hash==md5($password)){
// Username & password correct
session_start();
$_SESSION['user_id'] = $results[0]['id'];
header('location:index.php');
}
else $ermsg = "Password incorrect !";
}
else $ermsg = "User not found !";
}
else $ermsg = "Password required !";
}
else $ermsg = "Username required !";
}
?>
<!DOCTYPE html>
<html lang="en">
<head> <!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Login</title>
</head>
<body>
<div class="container">
<?php
if(isset($ermsg) && !empty($ermsg)) {
echo '<div class="alert alert-danger" role="alert">'.$ermsg.'</div>';
}
?>
<div class="d-flex justify-content-center h-100">
<div class="card">
<div class="card-header">
<h3>Login</h3>
</div>
<div class="card-body">
<form method="post">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" name="username" class="form-control" placeholder="username">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="password" class="form-control" placeholder="password">
</div>
<div class="form-group">
<input type="submit" name="submit" value="Login" class="btn float-right login_btn">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
After successful login, it will display a simple index.php page with the logout button for logout when needed.
index.php
<?php
session_start();
// if the user is not logged in, then redirect to the login page
if(!isset($_SESSION["user_id"])){
header("location:login.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Simple Bootstrap4 - Login PHP/MySQL</title>
</head>
<body>
<h1>Login Successful !</h1>
<h2>
<a href="logout.php">
<button class="btn btn-warning">Logout</button>
</a>
</h2>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
logout.php
This uses for clear the login session we created and destroy all other sesions by destroying the session and redirect back to the login page.
<?php
session_start();
// Unset all session variables
$_SESSION = array();
// Destroy the session.
session_destroy();
// Redirect to the login page
header("location:login.php");
exit();
?>
Download the complete source code sample database from my Github: https://github.com/lahirutm/Bootstrap-4-Login-Page—PHP-MySQL