PHP MySQL Script to Build Session Based Login & Register System Using Bootstrap 4 in Browser

Welcome folks today in this blog post we will be building a session based login and registration system in php and mysql database. All the source code of the application is shown below

Get Started

In order to get started you need to make an header.php file and copy paste the following code

header.php

<?php include 'database.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 System</title>
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
 
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
</head>
<body class=' bg-secondary text-dark' style='--bs-bg-opacity: .5;'>

<?php include 'database.php'; ?>

<!DOCTYPE html>

<head>

<title>Login System</title>

</head>

Here you can see in this header.php file we are including the bootstrap 4 cdn links.

Now just create an index.php file and copy paste the following code

index.php

<?php include "header.php" ?>
 
<h2 class="text-center mt-3">LOGIN System with PHP Session</h2>
<hr>
 
<div class="container">
  <div class="row">
 
    <div class="col">
      <div class="card text-center">
        <div class="card-header">
          <h3 class="card-title">Login</h3>
        </div>
        <div class="card-body">
          <a href="login.php"></a>
          <p class="card-text text-muted">Never share your password with anyone.</p>
          <a href="login.php" class="btn btn-primary"> Sign In</a>
        </div>
      </div>
    </div>
 
    <div class="col">
      <div class="card text-center">
        <div class="card-header">
          <h3 class="card-title">Register</h3>
        </div>
        <div class="card-body">
          <a href="login.php"></a>
          <p class="card-text text-muted">Always use different password for different site.</p>
          <a href="register.php" class="btn btn-primary"> Sign Up </a>
        </div>
      </div>
    </div>
 
  </div>
</div>
</body>
</html>

<?php include "header.php" ?>

<h2 class="text-center mt-3">LOGIN System with PHP Session</h2>

<hr>

<h3 class="card-title">Login</h3>

</div>

<p class="card-text text-muted">Never share your password with anyone.</p>

</div>

<h3 class="card-title">Register</h3>

</div>

<p class="card-text text-muted">Always use different password for different site.</p>

</div>

</body>

</html>

Here you can see we have div sections side by side first one is for sign in button and sign up button as shown below

Now we will create the login.php form and here we will write the below code

login.php

<div class="container col-4 border rounded bg-light mt-5" style='--bs-bg-opacity: .5;'>
  <h1 class="text-center">Sign In</h1>
  <hr>
  <form action="" method="post">
    <div class="mb-3">
      <label for="email" class="form-label">Email ID</label>
      <input type="email" class="form-control" name="email" placeholder="Enter your email" autocomplete="off" required>
      <small class="text-muted">Your email is safe with us.</small>
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input type="password" class="form-control" name="password" placeholder="Enter your password" required>
      <small class="text-muted">Do not share your password.</small>
    </div>
    <div class="mb-3">
      <input type="submit" name="signin" value="Sign In" class="btn btn-primary">
    </div>
  </form>
</div>

<hr>

<label for="email" class="form-label">Email ID</label>

<small class="text-muted">Your email is safe with us.</small>

</div>

<label for="password" class="form-label">Password</label>

<small class="text-muted">Do not share your password.</small>

</div>

</div>

</form>

</div>

And similarly we will making the register.php page where we will be showing the register form as shown below

register.php

<div class="container col-4 border rounded bg-light mt-5" style='--bs-bg-opacity: .5;'>
  <h1 class="text-center">Sign Up</h1>
  <hr>
  <form action="" method="post">
    <div class="mb-3">
      <label for="name" class="form-label">Username</label>
      <input type="text" class="form-control" name="name" placeholder="Enter your name" autocomplete="off" required>
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Email ID</label>
      <input type="email" class="form-control" name="email" placeholder="Enter your email" autocomplete="off" required>
      <small class="text-muted">Your email is safe with us.</small>
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input type="password" class="form-control" name="password" placeholder="Enter your password" required>
      <small class="text-muted">Do not share your password.</small>
    </div>
    <div class="mb-3">
      <input type="submit" name="signup" value="Sign Up" class="btn btn-primary">
    </div>
  </form>
</div>

<hr>

<label for="name" class="form-label">Username</label>

</div>

<label for="email" class="form-label">Email ID</label>

<small class="text-muted">Your email is safe with us.</small>

</div>

<label for="password" class="form-label">Password</label>

<small class="text-muted">Do not share your password.</small>

</div>

</div>

</form>

</div>

Creating Tables & Databases in PHPMyAdmin Section

Now we will creating tables and databases in phpmyadmin section. For creating the table guys you need to copy paste the below sql query as shown below

CREATE TABLE users(
    ID int NOT NULL AUTO_INCREMENT,
    username VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL,
    password VARCHAR(255) NOT NULL,
   PRIMARY KEY (ID)
);

CREATE TABLE users(

ID int NOT NULL AUTO_INCREMENT,

username VARCHAR(255) NOT NULL,

email VARCHAR(255) NOT NULL,

password VARCHAR(255) NOT NULL,

PRIMARY KEY (ID)

);

Connecting the Database

Now we will be connecting the database to the web app as shown below

database.php

<?php 
    $host= 'localhost';
    $user= 'root';
    $password = "";
    $database = 'login_system';
 
    $conn = mysqli_connect($host,$user,$password,$database);
 
    if (!$conn) {                                             
        die("Connection failed: " . mysqli_connect_error());     
      }
 
?>

<?php

$host= 'localhost';

$user= 'root';

$password = "";

$database = 'login_system';

$conn = mysqli_connect($host,$user,$password,$database);

if (!$conn) {

die("Connection failed: " . mysqli_connect_error());

}

Here you need to replace the host,username , password and database name of your project.

Inserting Users into Table

So now guys we will be inserting users in the table whenever you click the signup button inside the register.php file as shown below

<?php include "header.php" ?>
<?php
if (isset($_POST['signup'])) {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $password = $_POST['password'];
 
  $query = "INSERT INTO users(username,email,password) VALUES('{$name}','{$email}','{$password}')";
  $addUser = mysqli_query($conn, $query);
 
  if (!$addUser) {
    echo "Something went wrong" . mysqli_error($conn);
  } else {
    header('location: login.php');
  }
}
?>

<?php include "header.php" ?>

<?php

if (isset($_POST['signup'])) {

$name = $_POST['name'];

$email = $_POST['email'];

$password = $_POST['password'];

$query = "INSERT INTO users(username,email,password) VALUES('{$name}','{$email}','{$password}')";

$addUser = mysqli_query($conn, $query);

if (!$addUser) {

echo "Something went wrong" . mysqli_error($conn);

} else {

header('location: login.php');

}

So now if you signup a user will be inserted in the user table as shown below

So now guys we also need to redirect the user to the profile or dashboard page. For this we will be using the concept of sessions in php. Sessions are a way to store information between pages.

And now guys make a dashboard.php and in this file we will passing the id as an argument

dashboard.php

<?php session_start();       // Start the session ?>    
<?php include "header.php" ?>
 
<?php
if (!isset($_SESSION['id'])) {         // condition Check: if session is not set. 
  header('location: login.php');   // if not set the user is sendback to login page.
}
?>
<?php
if (isset($_POST['signout'])) {
  session_destroy();            //  destroys session 
  header('location: index.php');
}
?>
<div class="container col-12 border rounded mt-3">
  <h1 class=" mt-3 text-center">Welcome, This your dashboard!! </h1>
  <hr>
  <h4> <?php echo $_SESSION['name']; ?> </h4>
 
  <table class="table table-striped table-bordered table-hover">
    <thead class="table-dark">
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Username</th>
        <th scope="col">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> <?php echo $_SESSION['id']; ?></td>
        <td> <?php echo $_SESSION['name']; ?></td>
        <td> <?php echo $_SESSION['email']; ?></td>
      </tr>
    </tbody>
  </table>
 
  <form action="" method="post">
    <button type="submit" name='signout' class=" btn btn-warning mb-3"> Sign Out</button>
  </form>
</div>

<?php session_start(); // Start the session ?>

<?php include "header.php" ?>

<?php

if (!isset($_SESSION['id'])) { // condition Check: if session is not set.

header('location: login.php'); // if not set the user is sendback to login page.

}

<?php

if (isset($_POST['signout'])) {

session_destroy(); // destroys session

header('location: index.php');

}

<h1 class=" mt-3 text-center">Welcome, This your dashboard!! </h1>

<hr>

<tr>

<th scope="col">Username</th>

<th scope="col">Email</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

</form>

</div>

And now guys inside the profile and dashboard page we are displaying the user information inside a nice table like structure. And also we have the signOut() method.

As you can see we are again using the sessions variable to access the old data should be returned in the application

Similarly we need to do the same thing for the login.php file as well

<?php session_start(); ?>
<?php include "header.php" ?>
<?php
 
if (isset($_POST['signin'])) {
  $email = $_POST['email'];
  $password = $_POST['password'];
 
  $query = "SELECT * from users WHERE email = '$email' AND password = '$password'";
  $user = mysqli_query($conn, $query);
 
  if (!$user) {
    die('query Failed' . mysqli_error($conn));
  }
 
  while ($row = mysqli_fetch_array($user)) {
 
    $user_id = $row['ID'];
    $user_name = $row['username'];
    $user_email = $row['email'];
    $user_password = $row['password'];
  }
  if ($user_email == $email  &&  $user_password == $password) {
 
    $_SESSION['id'] = $user_id;       // Storing the value in session
    $_SESSION['name'] = $user_name;   // Storing the value in session
    $_SESSION['email'] = $user_email; // Storing the value in session
    //! Session data can be hijacked. Never store personal data such as password, security pin, credit card numbers other important data in $_SESSION
    header('location: dashboard.php?user_id=' . $user_id);
  } else {
    header('location: login.php');
  }
}
?>
<div class="container col-4 border rounded bg-light mt-5" style='--bs-bg-opacity: .5;'>
  <h1 class="text-center">Sign In</h1>
  <hr>
  <form action="" method="post">
    <div class="mb-3">
      <label for="email" class="form-label">Email ID</label>
      <input type="email" class="form-control" name="email" placeholder="Enter your email" autocomplete="off" required>
      <small class="text-muted">Your email is safe with us.</small>
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input type="password" class="form-control" name="password" placeholder="Enter your password" required>
      <small class="text-muted">Do not share your password.</small>
    </div>
    <div class="mb-3">
      <input type="submit" name="signin" value="Sign In" class="btn btn-primary">
    </div>
  </form>
</div>

<?php session_start(); ?>

<?php include "header.php" ?>

<?php

if (isset($_POST['signin'])) {

$email = $_POST['email'];

$password = $_POST['password'];

$query = "SELECT * from users WHERE email = '$email' AND password = '$password'";

$user = mysqli_query($conn, $query);

if (!$user) {

die('query Failed' . mysqli_error($conn));

}

while ($row = mysqli_fetch_array($user)) {

$user_id = $row['ID'];

$user_name = $row['username'];

$user_email = $row['email'];

$user_password = $row['password'];

}

if ($user_email == $email && $user_password == $password) {

$_SESSION['id'] = $user_id; // Storing the value in session

$_SESSION['name'] = $user_name; // Storing the value in session

$_SESSION['email'] = $user_email; // Storing the value in session

//! Session data can be hijacked. Never store personal data such as password, security pin, credit card numbers other important data in $_SESSION

header('location: dashboard.php?user_id=' . $user_id);

} else {

header('location: login.php');

}

<hr>

<label for="email" class="form-label">Email ID</label>

<small class="text-muted">Your email is safe with us.</small>

</div>

<label for="password" class="form-label">Password</label>

<small class="text-muted">Do not share your password.</small>

</div>

</div>

</form>

</div>

Here in the above code we are just comparing whether the username is available.

Based on the conditions we are redirecting the user to the profile.php or login.php page

Now just write the php code required for the profile.php page as shown below. Here we will be checking whether the user is already logged in or not using the id parameter as shown below

<?php session_start();       // Start the session ?>    
<?php include "header.php" ?>
 
<?php
if (!isset($_SESSION['id'])) {         // condition Check: if session is not set. 
  header('location: login.php');   // if not set the user is sendback to login page.
}
?>
<?php
if (isset($_POST['signout'])) {
  session_destroy();            //  destroys session 
  header('location: index.php');
}
?>

<?php session_start(); // Start the session ?>

<?php include "header.php" ?>

<?php

if (!isset($_SESSION['id'])) { // condition Check: if session is not set.

header('location: login.php'); // if not set the user is sendback to login page.

}

<?php

if (isset($_POST['signout'])) {

session_destroy(); // destroys session

header('location: index.php');

}

And also when we click the signout button we are destroying the user session and logging them out of the website and redirecting the user to the login page