Automatic logout after 10 min of user Inactivity in page using PHP Mysql

Hi friends, in this tutorial I will show you how to create an automatic wait / exit session using PHP after 10 minute of inactivity. Currently the most important session concept for logged in users. If the user forgets to leave the page, the security risk increases and there is the possibility of data theft by the user. In this case I created a session variable and stored the current time in the variable. If a user is inactive at the last minute, they will automatically log out of the system and be redirected to the login page. In this tutorial I will explain how to delete a session after 10 minutes of user inactivity with PHP.

Table of Contents

Create Database and Table by SQL query

In first step, we need to create database and table, so here I created “webscodex” database and “admins” table with id, name, username, password and created column. You can simply create “admins” table as following SQL query.

-- Database: `webscodex`
--
-- --------------------------------------------------------
-- Table structure for table `admins`
--

CREATE TABLE `admins` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  `created` datetime NOT NULL DEFAULT current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `admins`
--

INSERT INTO `admins` (`id`, `name`, `username`, `password`, `created`) VALUES
(1, 'manish', 'manish123', 'admin', '2021-01-30 20:24:31');

Create Database Configuration File.

In this step, we require to create database configuration file, here we will set database name, username and password. So let’s create “config.php” file on your root directory and put bellow code:

config.php

<?php

	// Database configuration 	
	$hostname = "localhost"; 
	$username = "root"; 
	$password = ""; 
	$dbname   = "webscodex";
	 
	// Create database connection 
	$con = new mysqli($hostname, $username, $password, $dbname); 
	 
	// Check connection 
	if ($con->connect_error) { 
	    die("Connection failed: " . $con->connect_error); 
	}

?>

Create Login HTML Page and PHP login Code

In this code, we are creating HTML Login page using bootstrap CDN link and code the login logic and store user session time and user name in Session variable for checking user inactivity in another page.

when user enter username and password is correct than redirect to dashboard or profile page.

index.php

<?php

// start session
session_start();

// Include database connectivity
  
include_once('config.php');

if (isset($_SESSION['NAME'])) {
   header("Location:dashboard.php");
   exit();
}

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

   $errorMsg = "";
  
   $username = $con->real_escape_string($_POST['username']);
   $password = $con->real_escape_string($_POST['password']);  
  
   if(!empty($username) && !empty($password)){

   $query = "SELECT * FROM admins WHERE username = '$username' AND password ='$password'";
    
   $result = $con->query($query);

   if($result->num_rows > 0) {
      $row = $result->fetch_assoc();
      $_SESSION['NAME'] = $row['name'];
      $_SESSION['LAST_ACTIVE_TIME'] = time();
      header("Location:dashboard.php");
      die();
   }

   else{
      $errorMsg = "Username or Password is Invalid";
   }
     
   }else{
      $errorMsg = "Username and Password is required";
   }

}    

?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Automatic logout after 10 min of user Inactivity in page using PHP Mysql</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="card text-center" style="padding:20px;">
  <h3>Automatic logout after 10 min of user Inactivity in page using PHP Mysql</h3>
</div><br>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4 col-md-offset-4">
      <?php if (isset($errorMsg)) { ?>
        <div class="alert alert-danger alert-dismissible fade show">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <?php echo $errorMsg; ?>
        </div>
      <?php } ?>
      <div class="card">
        <div class="card-body">
          <img class="card-img-top" src="img_avatar1.png" style="width:25%;border-radius:50%;margin-left:110px;">
          <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
            <div class="form-group">  
              <label for="username">Username:</label> 
              <input type="text" class="form-control" name="username" placeholder="Username">
            </div>
            <div class="form-group">  
              <label for="password">Password:</label> 
              <input type="password" class="form-control" name="password" placeholder="Password">
            </div>
            <div class="form-group">
              <input type="submit" name="submit" class="btn btn-primary btn-block" value="Login"> 
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Preview:

Create Dashboard/Profile after login successful

In this code, we are create dashboard page using bootstrap and a modal popup, modal is hide, using AJAX jquery for send ajax request in check_user.php page for checking if user session time is expire than show the modal popup for 10 sec, after 10 sec modal popup close and redirect to the login page with out reloading page.

dashboard.php

<!doctype html>
<html lang="en">
    <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Automatic logout after 10 min of user Inactivity in page using PHP Mysql</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">	   
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>	
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
	<div class="row" style="margin-top:70px;">
            <?php
    	        include_once('check_user.php');
	    ?>
	    <div class="col-md-12 card text-center" style="padding:50px;">
	        <h3>Welcome <span class="text-success"><?php echo ucwords($_SESSION['NAME']); ?>
	        </span> to the Webs Codex</h3>
	        <h3>Automatic Logout after 10 minute of user Inactivity in page</h3>
	        <p><a href='logout.php'>Logout</a></p>
	    </div>
        </div>		
    </div>		
</body>
</html>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">   
     	<!-- Modal Header -->
     	<div class="modal-header">
           <h4 class="modal-title">Session Expiration</h4>       
       	</div>     
	<!-- Modal body -->
    	<div class="modal-body">
           Because you have been Inactivity, your session is about to expire.
     	</div>     
	<!-- Modal footer -->
	<div class="modal-footer">
	   <a href="index.php" class="btn btn-primary btn-sm">Login again</a>     		
	</div>     
     </div>
  </div>
</div>

<script type="text/javascript">
  
setInterval(check_user, 2000);

function check_user(){
    $.ajax({
	url:'check_user.php',
   	method:'POST',      	
   	data:'type=logout',
   	success:function(result){ 
   	    if (result == "logout") {
	   	$("#myModal").modal({
	           backdrop: 'static',
	   	   keyboard: false,
	        });
	    setTimeout(function(){
	       $('#myModal').modal('hide')
	          window.location.href="logout.php";
	       }, 10000);				
	   }      	
   	}
   });
}

</script>

Before Session Active

Preview:

After Session Expire

Preview:

Create check_user.php File for Check time

In this code we add the login user time to enter the session variable. Then we call the PHP function to check if the login session expiration time has expired. If not reached, the user is redirected to the login page.

check_user.php

<?php

session_start();

if (isset($_POST['type']) && $_POST['type'] == 'logout') {
	
    if ((time() - $_SESSION['LAST_ACTIVE_TIME']) > 600) {  // 60*10 Time in Seconds		
		
	echo "logout";
    }

}else{
		
    if (isset($_SESSION['LAST_ACTIVE_TIME'])) {
    	if ((time() - $_SESSION['LAST_ACTIVE_TIME']) > 600) {  // 60*10 Time in Seconds
	    header("Location:logout.php");
	    die();
	}
    }

    $_SESSION['LAST_ACTIVE_TIME'] = time();

    if (!isset($_SESSION['NAME'])) {
	header("Location:index.php");
	die();
    }
}

?>

Create Users Logout File

This logout.php page “unset” entered user sessions.

logout.php

<?php		
	session_start();
	session_destroy();
	session_unset($_SESSION['NAME']);
	session_unset($_SESSION['LAST_ACTIVE_TIME']);
	header("Location:index.php");
	die();	
?>

You can always support by sharing on social media or recommending my blog to your friends and colleagues.

If you have any suggestions / problems about this tutorial, please comment on the form below.😊

Create Database and Table by SQL query

Create Database Configuration File.

Create Login HTML Page and PHP login Code

Preview:

Create Dashboard/Profile after login successful

Before Session Active

Preview:

After Session Expire

Preview:

Create check_user.php File for Check time

Create Users Logout File

Popular Posts

You Might Also Like

How to Upload Image in database using jQuery AJAX in PHP Mysql

Contact form with validation in PHP mailer jquery Ajax script, (PHP code to send email from contact form)

PHP Login Registration with full validation using mysqli database

Leave a Reply Cancel reply