Login system in php

Kashif July 30, 2021
Login System in PHP

We are back with another article to cover the login system in PHP.  In this series of backend development using core PHP, we have already registered users on our system in our previous article. In this article, we will first create an HTML login form using Bootstrap 5. Then, We will write simple PHP code to develop user login and logout functionality. So let's start the article.

Writing HTML markup:

  • Create a new File "login.php" to write all The HTML code here.
  • Include bootstrap 5 in your code.
  • Create a Bootstrap 5 grid with one row and one column. Use justify-content center class on bootstrap row.  
  • Set the width of the column to col-6.
  • Inside the column, create an HTML form and set its method attribute to "POST".
  • Create "login.inc.php" file inside includes folder.
  • Set the action attribute of the HTML form to "includes/login.inc.php".
  • Create two input fields for email and password inside the HTML form.
  • Create a submit button to submit the form.
That's it. you are done with HTML markup. Let's see the working code example now.
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Login</title>
  </head>
  <body>
    <section>
    	<!-- Bootstrap grid row and column -->
    <div class="row justify-content-center align-items-center my-5">

    	<div class="col-6">
    		<!-- html form -->
		  <form method="POST" action="includes/login.inc.php">
		  	
		  <div class="mb-3">
			 <label  class="form-label">Email address</label>
			 <input type="email" class="form-control" name="email">
		  </div>

		  <div class="mb-3">
			<label class="form-label">Password</label>
			<input type="password" class="form-control" name="password" >
		  </div>
		  <!-- submit button -->
		  <button type="submit" class="btn btn-primary px-5" name="submit">
		  	Submit
		  </button>
		</form>
	</div>
	</div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

Writing PHP code to log in User:

  • Open the "login.inc.php" file to write your Php code.
  • Include the "db.inc.php" file for database connectivity.
  • Check if the user has pressed submit button using the PHP isset() function.
  • Store the data received in $_POST associative array into variables.
  • Write an SQL select query to see if the given email and password are registered on our system. 
  • Execute the select query using the mysqli_query() function.
  • Use mysqi_num_rows() function to see the number of records returned by executing the query.
  • If the result of the myslqi_num_rows() function is greater than 0, it means the email and password are correct. The record of the user exists in our database.
  • Start PHP sessions using session_start() function.
  • Fetch the result of the select query using the mysqli_fetch_assoc() function into $resultSet associative array.
  • Create two session variables $_SESSION["name"] and $_SESSION["email"].
  • Set both of the session variables to the data of email and name available in $ResultSet.
  • Use the PHP header() function to redirect users to the "dashboard.php" page.
  • If the mysqli_num_rows() function returns 0, show error message to the user.
Now see the working code of all the above-stated steps.
<?php
	require "db.inc.php";

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

	$email = $_POST['email'];
	$pass = $_POST['password'];

	
	$query = "SELECT * FROM `user` WHERE email='$email' AND pass='$pass';";

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

		if (mysqli_num_rows($result) > 0) {
		  session_start();

		  $resultSet = mysqli_fetch_assoc($result);
		  $_SESSION["name"] = $resultSet["name"];
		  $_SESSION["email"] = $resultSet["email"];
                
                  mysqli_close($conn);
		  header("location: ../dashboard.php ");
                  exit();

		} else {
		  echo "wrong email and pass";
		}
	
	}else{

		die("there is some error");
	}
	
	mysqli_close($conn);

?>
Now we have developed basic login functionality into our system. Let's create a simple dashboard page.

Creating dashboard.php page:

  • Create the "dashboard.php" page first.
  • Start the PHP code.
  • Start the PHP session using session_start() function.
  • Check if the session variables are set using PHP isset() function.
  • If session variables are not set, it means the user is not logged in. Use the header() function to redirect the user to the login page and avoid unauthorized access.
  • Allow the user to access the content of the dashboard page only if the session variables are set and the user is logged in.
  • Inside the HTML body, create one row and one column using Bootstrap classes.
  • Inside your column, write greeting text using HTML <p> tag.
  • Display the name stored in the session variable using the PHP echo statement.
  • Create a logout anchor text and set its href = "includes/logout.inc.php" using HTML <a> tag.
Here is the working code example.
<?php
session_start();
if(!isset($_SESSION['name']) && !isset($_SESSION['email']) ){

	header("location: login.php");
}

?>

<!DOCTYPE html>
<html>
<head>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<title>Dashboard</title>
</head>
<body>
	 <section>
    	<!-- Bootstrap grid row and column -->
    <div class="row justify-content-center align-items-center my-5 text-center">

    	<div class="col-6">
    	  <p>Welcome <b><?php echo $_SESSION['name']; ?></b></p>
	  <p>you are logged into our system</p>
	  <p>We will create detailed dashboard in our coming articles</p>
          <a href="includes/logout.inc.php" class="btn btn-primary">Logout</a>	 
        </div>
    </div>
</body>
</html>
That's it. we are done with a simple dashboard page. Now let's write PHP code for logout functionality.

Creating logout.inc.php to logout user:

  • Create "logout.inc.php" file inside includes folder.
  • Start session using session_start() function.
  • Use session_unset() PHP function to clear all currently registered session variables.
  • Use session_destroy() to destroy the sessions.
  • In the end, use the PHP header() function to redirect users to the login page.
Now let's see the working code example.
<?php
session_start();
session_unset();
session_destroy();

header("location: ../login.php?error=success");
exit();

?>
That's it. We have completed our simple PHP login system successfully. Hope you find it useful. Keep reading and supporting us.
Tags

Post a Comment

0 Comments