In this post You'll learn how to create a login and logout system with PHP and MySQL. This tutorial covers everything you need to know, from creating the database tables to implementing the login and logout functionality.
This guide includes step-by-step instructions, code examples, and screenshots. It's perfect for web developers of all levels who want to learn how to create a login and logout system for their website.
In previous posts, I have shared post on signup form using php and mysql database. In this post we going to use same database for login. We going to let user login or you can say check the credientials which is enter by user in login through mysqli prepared statements.
Credit :
User icons created by Freepik - FlaticonShow password icons created by Freepik - Flaticon
Eye icons created by Freepik - Flaticon
This blog post is part 2 of signup and login functionality using PHP & MySQL. Previously i have shared signup form using PHP & MySQL. In which i have created database and create on account.
In this blog post we'll use same database and credentials or data for login form using PHP & MySQL. So make sure you'll read that blog post of registration form using PHP & MySQL.
When user entered correct username and its password then it will redirect to welcome.php page on which its username and id will be visible along with logout link or button.
Here I've also added logout functionality, when user successfully login and redirect to welcome.php. A user username, id and logout link appear, by clicking on it, user will logout and redirect to login.php page.
How we'll create this login and logout functionality.
- First we'll create a design of login form using HTML & CSS.
- Then establish connection with database.
- Adding basic validation to user inputs or credientials.
- Verifying user inputs (email and its password) in database.
- Redirect to welcome.php page if credentials are valid according to database.
- Adding logout functionality (simple button, by clicking user will logout out and redirect to login page).
Remember we going to use the database that we created in signup form functionality using PHP & MySQL. Refere that blog post.
Video on Login and Logout Functionality Using PHP & MySQL.
Login Form Using PHP & MySQL.
- Create one folder inside path: C:\xampp\htdocs\your folder.
- Open it in your code editor.
- Create files in that folder:
- login.php
- login.css
- logout.php
- welcome.php
- config.php
Create design of login form.
Create a design of login form using HTML & CSS.
Lets first make frontend of login form, So its a similar to the this signup form.
HTML
<!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 form</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class="container">
<div class="box">
<h2>Login</h2>
<form action="">
<div class="input_box">
<input type="text" class="email" name="email" required>
<label>Email</label>
</div>
<p class="error_message"></p>
<div class="input_box">
<input type="password" class="password" name="password" required>
<label>Password</label>
<img src="images/visible.png" class="password_image">
</div>
<p class="error_message"></p>
<div class="forgot_password"><a href="#">Forgot Password ?</a></div>
<button class="login_button" type="submit">Login</button>
<div class="signup_link"><a href="signup.php">Don't have an Account ?</a></div>
<div class="contact_link"><a href="#">Contact Us</a></div>
</form>
</div>
</div>
</body>
</html>
JavaScript
<script>
let password_image = document.querySelector('.password_image');
let password = document.querySelector('.password');
let error_message = document.querySelector('.error_message');
password_image.onclick = function(){
if (password.type == 'password') {
password.type = 'text';
password_image.src = 'images/hide.png';
}else{
password.type = 'password';
password_image.src = 'images/visible.png';
}
}
error_message.forEach(error_message => {
if(error_message.innerText == ''){
error_message.style.display = 'none';
}
});
</script>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 350px;
background-color: #fff;
padding: 20px 30px;
}
.box h2{
text-align: center;
font-size: 40px;
margin-bottom: 50px;
position: relative;
}
.error_message{
color: red;
font-size: 18px;
padding: 2px 5px;
}
.box h2::before{
position: absolute;
content: '';
background: linear-gradient(45deg , #6114f7 , #ff3232);
width: 100px;
height: 5px;
right: 120px;
bottom: -5px;
border-radius: 50px;
}
.box .input_box{
width: 100%;
display: flex;
border: 1px solid #000;
align-items: center;
margin-top: 22px;
position: relative;
}
.box .input_box img{
width: 30px;
height: 30px;
margin: 0px 5px;
}
.box .input_box input[type="text"] , .box .input_box input[type="password"]{
width: 100%;
font-size: 25px;
padding: 12px 10px;
outline: none;
border: none;
}
.box .input_box label{
position: absolute;
left: 5px;
top: 12px;
font-size: 25px;
color: #00000094;
pointer-events: none;
background-color: #fff;
padding: 0px 5px;
transition: 0.2s;
}
.box .input_box input:focus + label,
.box .input_box input:valid + label{
top: -10px;
font-size: 16px;
color: blue;
}
.box .forgot_password{
text-align: right;
font-size: 20px;
margin-top: 16px;
}
.box .forgot_password a{
color: #000;
text-decoration: none;
transition: 0.2s;
}
.box .login_button{
background-color: #000;
color: #fff;
border: none;
font-size: 28px;
padding: 5px 20px;
cursor: pointer;
width: 100%;
margin-top: 40px;
transition: 0.2s;
}
.box .login_button:active{
transform: scale(0.9);
}
.box .signup_link , .box .contact_link{
text-align: center;
margin-top: 20px;
}
.box .signup_link a , .box .contact_link a{
text-decoration: none;
color: #000;
font-size: 20px;
transition: 0.2s;
}
.box .signup_link a:hover , .box .contact_link a:hover , .box .forgot_password a:hover{
text-decoration: underline;
}
Output :
A basic design of the login form done. Now let's add PHP for backend functionality.
Below is the full code for login.php.
login.php
<?php
session_start();
if(isset($_SESSION['id'])){
header('location:welcome.php');
exit();
}
include 'config.php';
$email_error = '';
$password_error = '';
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$email = $_POST['email'];
$password = $_POST['password'];
if(!empty(trim($email))){
$trim_email = trim($email);
}else{
$email_error = 'Please enter your email';
}
if(!empty(trim($password))){
$trim_password = trim($password);
}else{
$password_error = 'Please enter you password';
}
if(empty($email_error) && empty($password_error)){
$select = "SELECT id , username , password FROM signuptable WHERE email = ?";
$stmt = mysqli_prepare($con , $select);
if($stmt){
mysqli_stmt_bind_param($stmt , 's' , $param_email);
$param_email = trim($email);
if(mysqli_stmt_execute($stmt)){
mysqli_stmt_store_result($stmt);
if(mysqli_stmt_num_rows($stmt) == 1){
mysqli_stmt_bind_result($stmt , $id , $result_username , $result_password);
if(mysqli_stmt_fetch($stmt)){
if(password_verify($password , $result_password)){
session_start();
$_SESSION['id'] = $id;
$_SESSION['username'] = $result_username;
$_SESSION['email'] = $email;
$_SESSION['loggedin'] = true;
header('location:welcome.php');
}else{
$password_error = 'Wrong password';
}
}
}else{
$email_error = 'email not found';
}
}
}
mysqli_stmt_close($stmt);
}
mysqli_close($con);
}
?><!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 form</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class="container">
<div class="box">
<h2>Login</h2>
<form action="" method="post">
<div class="input_box">
<input type="text" class="email" name="email" required>
<label>Email</label>
</div>
<p class="error_message"><?php echo $email_error ?></p>
<div class="input_box">
<input type="password" class="password" name="password" required>
<label>Password</label>
<img src="images/visible.png" class="password_image">
</div>
<p class="error_message"><?php echo $password_error ?></p>
<div class="forgot_password"><a href="#">Forgot Password ?</a></div>
<button class="login_button" type="submit">Login</button>
<div class="signup_link"><a href="signup.php">Don't have an Account ?</a></div>
<div class="contact_link"><a href="#">Contact Us</a></div>
</form>
</div>
</div>
</body>
<script>
let password_image = document.querySelector('.password_image');
let password = document.querySelector('.password');
let error_message = document.querySelectorAll('.error_message');
password_image.onclick = function(){
if (password.type == 'password') {
password.type = 'text';
password_image.src = 'images/hide.png';
}else{
password.type = 'password';
password_image.src = 'images/visible.png';
}
}
error_message.forEach(error_message => {
if(error_message.innerText == ''){
error_message.style.display = 'none';
}
});
</script>
</html>
Understand the above code:
Checking that user already logged in or not.
First we'll start the session (session_start()) and check that if $_SESSION['id'] is set or not, if it is set, then we'll redirect user to welcome.php page (we will create it later).
Here in $_SESSION['id'], I have stored user id to session variable $_SESSION['id'] to check the user login status.
Then we'll add config.php file for connection.
And then define the variable for error messages.
login.php
<?php
session_start();
if(isset($_SESSION['id'])){
header('location:welcome.php');
exit();
}
include 'config.php';
$email_error = '';
$password_error = '';
?>
Validation email and passowrd.
After that we'll use if condition, that run when the post request is sent, thats why i have added method attribute in form tag with atrribute value is equal to post.
When if condition run (post request sent). we'll check email and password of user and make the basic validation. If any error occurs according to condition set, we'll store error message in a respective error variable that we created above.
login.php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$email = $_POST['email'];
$password = $_POST['password'];
if(!empty(trim($email))){
$trim_email = trim($email);
}else{
$email_error = 'Please enter your email';
}
if(!empty(trim($password))){
$trim_password = trim($password);
}else{
$password_error = 'Please enter you password';
}
mysqli_close($con);
}
Make user login.
Now, If no error occurs means $email_error and $password_error value is empty, then we'll check for email presences in database, If present then we'll verify its email password (means we'll verify password that is enter by user and hased password from database).
If email and its password matche than, make the user login by starting the session and create a session variables for username, id, email, loggedin and redirected to welcome.php (which we will create later).
login.php
if(empty($email_error) && empty($password_error)){
$select = "SELECT id , username , password FROM signuptable WHERE email = ?";
$stmt = mysqli_prepare($con , $select);
if($stmt){
mysqli_stmt_bind_param($stmt , 's' , $param_email);
$param_email = trim($email);
if(mysqli_stmt_execute($stmt)){
mysqli_stmt_store_result($stmt);
if(mysqli_stmt_num_rows($stmt) == 1){
mysqli_stmt_bind_result($stmt , $id , $result_username , $result_password);
if(mysqli_stmt_fetch($stmt)){
if(password_verify($password , $result_password)){
session_start();
$_SESSION['id'] = $id;
$_SESSION['username'] = $result_username;
$_SESSION['email'] = $email;
$_SESSION['loggedin'] = true;
header('location:welcome.php');
}else{
$password_error = 'Wrong password';
}
}
}else{
$email_error = 'email not found';
}
}
}
mysqli_stmt_close($stmt);
}
Welcome.php
Now let's create welcome.php page (we already created a file with name welcome.php). So first we'll started the session and check that user is loggedin or not by session variable $_SESSION['id'].
Then include config.php file for connection. Then to show users username and id in html we'll session variable ($_SESSION['username'] and $_SESSION['id']) that we created when user successfully login. See above login.php file (page) above.
And in welcome.php file we'll also add an anchor tag with href="logout.php". So when user click on it, logout.php file will run and user will be logout (logout.php is not created yet. will create it later).
welcome.php
<?php
session_start();
if(!isset($_SESSION['id'])){
header('location:login.php');
}
include 'config.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>
</head>
<body>
<h1>WELCOME <?php echo $_SESSION['username'] ?></h1>
<h1>user id <?php echo $_SESSION['id'] ?></h1>
<a href="logout.php">Logout</a>
</body>
</html>
Let's try to login.
Logout functionalty.
Now let's create logout.php file. So first we'll start the session, then unset all the session variables, then destroy session and after all that we'll redirect user to login.php.
logout.php
<?php
session_start();
$_SESSION = array();
session_destroy();
header('location:login.php');
?>
This is may not be the complete login form, something may I missed to add in it.
So that's how you can created login form using PHP & MySQL. If you have any question or suggestion feel free to write them in the comment section.
Share your thoughts.