Dear Reader, let us know that, “How to Create Auto Logout Script in PHP with Live Demo“. So in this Tutorial, We Learn Step By Step “How to Create Auto Logout Script in PHP”.
If You have any Web Application and You want to Logout Logged In User After Some time then Article for You. If there is no activity till 60 Seconds then a warning message will be shown and after 30 Seconds you will be auto logout.
First, we see Snapshot for Auto Logout Script Form
And you can also see Live Demo by click on bellow Demo button
Step 1:- At first we need to Create “header.php” file in Our Project Root Directory as “your_project_name/header.php “ like “webpreprations/demo/auto-logout-in-php/header.php” and paste below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Webpreparations Tutorial</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="../assets/css/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="../assets/js/jquery.min.js"></script> <script type="text/javascript" src="../assets/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse" id="header"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.webpreparations.com/">Web Preparations</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="#"><a href="http://www.webpreparations.com/">Home</a></li> <!-- <li class="#"><a href="add_multiple_rows.php">Add Rows</a></li> <li class="#"><a href="mobiles.php">Export to PDF</a></li> --> </ul> <ul class="nav navbar-nav navbar-right"> <!-- <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> --> </ul> </div> </div> </nav> |
Step 2:- At first we need to Create “index.php” file in Our Project Root Directory as “your_project_name/index.php “ like “webpreprations/demo/auto-logout-in-php/index.php” and paste below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<?php session_start(); include('../header.php'); $message=""; if(count($_POST)>0) { if( $_POST["user_name"] == "webpreparations" and $_POST["password"] == "123456") { $_SESSION["user_id"] = 786; $_SESSION["user_name"] = $_POST["user_name"]; $_SESSION['loggedin_time'] = time(); } else { $message = "Invalid Username or Password!"; } } if(isset($_SESSION["user_id"])) { if(!isLoginSessionExpired()) { header("Location:user_dashboard.php"); } else { header("Location:logout.php?session_expired=1"); } } if(isset($_GET["session_expired"])) { $message = "Login Session is Expired. Please Login Again"; } ?> <html> <head> <title>User Login Session Timeout Logout in PHP</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2 class="alert alert-info">User Login Details</h2> <h3 class="alert alert-warning">Username: webpreparations<br> Password: 123456</h3> <?php if($message!="") { ?> <div class="alert alert-danger"><?php echo $message; ?></div> <?php } ?> <form name="frmUser" method="post" action=""> <div class="form-group has-feedback"> <input type="text" class="form-control" name="user_name" placeholder="Email" required="" value=""> </div> <div class="form-group"> <input type="password" class="form-control" name="password" placeholder="Password" required=""> </div> <div class="form-group"> <input type="submit" name="loginSubmit" class="btn btn-success" value="Login"/> </div> </form> </div> </body></html> |
Step 3:- Now we need to Create “user_dashboard.php” file in Our Project Root Directory as “your_project_name/user_dashboard.php “ like “webpreprations/demo/auto-logout-in-php/user_dashboard.php” and paste below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php session_start(); include('../header.php'); ?> <html> <head> <title>User Login</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="script.js"></script> </head> <body> <div class="container"> <h2 class="alert alert-info">User Dashboard</h2> <?php if(isset($_SESSION["user_name"])) { ?> <div class="alert alert-success"> Welcome Dear <?php echo $_SESSION["user_name"]; ?> Reader.If here is no activity till 60 Seconds then a warning message will be show and after 30 <strong>Seconds </strong>you will be auto logout Click here to <a href="logout.php" tite="Logout"><button class="btn btn-danger">Logout</button> </div> <?php } else { header("Location:index.php"); } ?> </div> </body> </html> <script> setTimeout(location.reload.bind(location), 5000); </script> |
Step 4:- Now we need to Create “script.js” file in Our Project Root Directory as “your_project_name/script.js “ like “webpreprations/demo/auto-logout-in-php/script.js” and paste below code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/*--Code start for checking if no activity, then display an alert on web page ---*/ // Set timeout variables. var timoutWarning = 60000; var timoutNow = 90000; var logoutUrl = 'logout.php?session_expired=1'; var warningTimer; var timeoutTimer; // Start timers. function StartTimers() { warningTimer = setTimeout("IdleWarning()", timoutWarning); timeoutTimer = setTimeout("IdleTimeout()", timoutNow); } // Reset timers. function ResetTimers() { console.log('reset'); clearTimeout(warningTimer); clearTimeout(timeoutTimer); StartTimers(); $('#idle_warning').hide(); } // Show idle timeout warning dialog. function IdleWarning() { $('#idle_warning').show(); } // Logout the user. function IdleTimeout() { window.location = logoutUrl; $('#idle_warning').show(); } /*---Code ends for checking if no activity, then display an alert on web page ----*/ $(document).ready(function() { StartTimers(); $(document).on('mousemove scroll keyup keypress mousedown mouseup mouseover',function(){ ResetTimers(); }); }); $(window).on('load',function() { $(window).on('mousemove scroll keyup keypress mousedown mouseup mouseover',function(){ ResetTimers(); }); }); |
Step 5:- Now Create “logout.php” file in Our Project Root Directory as “your_project_name/logout.php “ like “webpreprations/demo/auto-logout-in-php/logout.php” and paste below code
1 2 3 4 5 6 7 8 9 10 |
<?php session_start(); session_destroy(); $url = "index.php"; if(isset($_GET["session_expired"])) { $url .= "?session_expired=" . $_GET["session_expired"]; } header("Location:$url"); ?> |
Step 6:- At Last for run your project open browser and type in URL like “localhost/your_project_name/index.php”
like
localhost/webpreprations/demo/auto-logout-in-php/index.php
you can see the result as we can see in below snapshot
Step 7:- Now we need to Login We use Username – “webpreoarations” and Password – “123456” after login you will be Redirected User Dashboard as below snapshot
Step 8:- In This Article, We set Session Expiration time “2 Second” so After 2 Seconds you will be Logout and Redirected “Index.php” as below snapshot
Congratulations you have successfully Completed “How to Create Auto Logout Script in PHP”, if this post was helpful for you then please share this post on social media and if you have any query then please contact us or comment below and don’t forget us follow and like on Social Media, Thanks.
7 Comments:
Bhavin Patel August 24, 2018
Hello Webpreparations,
Where is the header.php file?
include(‘../header.php’);
Webpreparations Team August 27, 2018
Hello Dear Reader
Please see the step 1:- for the header.php code
Rexy October 08, 2018
Hello Webpreparations
why when I try to click or move the mous session still running ?
which I hope is usually this function runs when the user has no activity on page.
Webpreparations Team October 09, 2018
Thank you for contact us, we will help you soon.
Webpreparations Team October 11, 2018
Hello Rexy ,
Please go through the article again we are updated article according to your need, We hope this will fulfill your requirements.
Thank you for contact us, cheers 🙂
Randy March 16, 2019
Hello Webpreparations,
Where is the functions.php?
Webpreparations Team March 16, 2019
Hello,
There is no need for functions.php
Please remove from the index.php
Thank you for contact us.