1. Tutorials
  2. PHP Tutorial
  3. Creating a Login Remember Me Feature in PHP Tutorial

Creating a Login Remember Me Feature in PHP Tutorial

Submitted by oretnom23 on Thursday, October 20, 2022 - 14:27.

Introduction

In this tutorial, you will learn how to Create a Login Form Remember Me Feature using PHP Language. The tutorial aims to provide the students and new programmers a reference to learn with and enhance their programming capabilities using the PHP Language. To achieve this kind of feature we will be using the HTTP Cookies. Here, snippets and sample source code are provided for a better understanding about the process.

What is HTTP Cookie?

HTTP Cookie is small blocks of data sent by the web server to the user's computer or device browsers. It is consist of name and value. In PHP,  cookie is a tiny file that the web server stores on the client computer. They are often used to store data, like a username, that the website can access later to customize the user's experience when they visit the site again. Only the domain from which it was issued may read cookies.

How to use HTTP Cookie in PHP?

The syntax of setting a cookie using PHP si very simple. See the following snippet for setting an cookie in PHP.

  1. <?php
  2. setcookie(name, value, expiration, path, domain, Secure);
  3. //or
  4. setcookie(name, value, [options])
  5. ?>

Syntax Parameters:

  • Name - (string) the name of the cookie.
  • Value - (string) the value of the cookie.
  • Expiration - (timestamp) the expiration timestamp of the cookie.
  • Path - (string) the path in which the cookie will be available
  • Domain - (string) the domain in which the cookie will be available
  • Secure - (boolean) if set to true, the cookie will be only set if the connection is secure.
  • HTTP Only - (boolean) if set to true, the cookie will be only accessible through HTTP protocol.

How to Create a Login Form Remember Me Feature in PHP?

Creating a login form with the "Remember Me" feature can be achieved using the HTTP Cookie. Using a checkbox on the login form, a developer can let the user decide whether the browser should remember their input credential for logging in or not. If the user marked it checked, the server will store the credentials data of the user to the browser using PHP Cookie. Here's an example snippet for doing it on the server side:

  1. <?php
  2. /**
  3. * Saving the input data to Cookie
  4. */
  5. if(isset($_POST['rememberMe'])){
  6.    /**
  7.     * Store Login Credential
  8.     */
  9.    setcookie('username', $_POST['username'], ( time() + ((365 * 24 * 60 * 60) *3) ));
  10.    setcookie('password', $_POST['password'], ( time() + ((365 * 24 * 60 * 60) *3) ));
  11. }else{
  12.    /**
  13.     * Delete Login Credential
  14.     */
  15.    setcookie('username', $_POST['username'], ( time() - (24 * 60 * 60) ));
  16.    setcookie('password', $_POST['password'], ( time() - (24 * 60 * 60) ));
  17. }

The snippet above demonstrates that the cookies will be only stored if the "Remember Me" checkbox is checked otherwise it will be removed after the login process.

Example

Here's a sample web application that demonstrates the Login Form with Remember Me Feature in PHP Language. The application is a simple login system that allows the end-user to decide if they want to store their credential in the browser so they won't need to type them if they log in again in the future.

Database Schema

Create a new Database in your MySQL Server and use the following schema for the sample user table.

  1.     CREATE TABLE `users` (
  2.         `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  3.         `name` varchar(250) NOT NULL,
  4.         `username` varchar(50) NOT NULL,
  5.         `password` text NOT NULL
  6.       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Authentication Script

In your source code folder create a new PHP Script that will check if the user is already authenticated.

auth.php

  1. <?php
  3. if(strstr($_SERVER['PHP_SELF'], "index.php") === false){
  4.     if(!isset($_SESSION['login_id'])){
  5.         header("location: ./");
  6.     }
  7. }
  8. if(strstr($_SERVER['PHP_SELF'], "welcome.php") === false){
  9.     if(isset($_SESSION['login_id'])){
  10.         header("location: ./welcome.php");
  11.     }
  12. }
  13. ?>

Login Page Interface

Creating the Login Page interface. The authentication script is included with this script.

index.php

  1. <?php require_once("auth.php"); ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>PHP - Login with Remember Me</title>
  9.  
  10.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  11.     <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  12.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  13.     <style>
  14.         html, body{
  15.             min-height:100%;
  16.             width:100%;
  17.         }
  18.     </style>
  19. </head>
  21.     <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
  22.         <div class="container">
  23.             <a class="navbar-brand" href="./">PHP - Login with Remember Me</a>
  24.             <div>
  25.                 <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
  26.             </div>
  27.         </div>
  28.     </nav>
  29.     <div class="container-fluid px-5 my-3 h-75">
  30.         <div class="col-lg-4 col-md-5 col-sm-12 mx-auto my-5 pt-5" >
  31.             <div class="card rounded-0 shadow">
  32.                 <div class="card-header">
  33.                     <h3 class="card-title text-center fw-bold">Login</h3>
  34.                 </div>
  35.                 <div class="card-body">
  36.                     <div class="container-fluid">
  37.                         <form id="loginForm" action="login.php" method="POST">
  38.                             <div class="mb-3">
  39.                                 <label for="username" class="form-label">Username</label>
  40.                                 <input type="text" class="form-control form-control-sm rounded-0" name="username" id="username" value="<?= isset($_COOKIE['username']) ? $_COOKIE['username'] : '' ?>" required autocomplete="off">
  41.                             </div>
  42.                             <div class="mb-3">
  43.                                 <label for="password" class="form-label">Password</label>
  44.                                 <input type="password" class="form-control form-control-sm rounded-0" name="password" id="password" value="<?= isset($_COOKIE['password']) ? $_COOKIE['password'] : '' ?>" required autocomplete="off">
  45.                             </div>
  46.                             <div class="mb-3">
  47.                                 <div class="form-check">
  48.                                     <input class="form-check-input" type="checkbox" value="" id="rememberMe" name="rememberMe" <?= (isset($_COOKIE['username']) && isset($_COOKIE['password'])) ? "checked" : '' ?>>
  49.                                     <label class="form-check-label" for="rememberMe">
  50.                                         Remember Me
  51.                                     </label>
  52.                                 </div>
  53.                             </div>
  54.                         </form>
  55.                     </div>
  56.                 </div>
  57.                 <div class="card-footer py-2">
  58.                     <div class="text-center">
  59.                         <button class="btn btn-sm btn-primary rounded-pill col-lg-4 col-md-6 col-sm-12" form="loginForm">Login</button>
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.     </div>
  65. </body>
  66. </html>

Login Script

The snippet below is the PHP Script that processes the given login credential of the users. It stores the credential data as Cookie if the "Remember Me" checkbox is checked and the credentials are valid.

login.php

  1. <?php
  3.  
  4. $conn = new mysqli("localhost", "root", "", "dummy_db");
  5. if(!$conn)
  6. die("Database Connection Failed");
  7. $username = addslashes($conn->real_escape_string($_POST['username']));
  8. $password = md5($conn->real_escape_string($_POST['password']));
  9.  
  10. $stmt = $conn->prepare("SELECT * FROM `users` where `username` = ? and `password` = ?");
  11. $stmt->bind_param('ss', $username, $password);
  12. $stmt->execute();
  13. $result = $stmt->get_result();
  14. if($result->num_rows > 0){
  15.     $data = $result->fetch_assoc();
  16.     foreach($data as $k => $v){
  17.         $_SESSION['login_'.$k] = $v;
  18.     }
  19.     /**
  20.         * Saving the input data to Cookie
  21.         */
  22.     if(isset($_POST['rememberMe'])){
  23.         /**
  24.             * Store Login Credential
  25.             */
  26.         setcookie('username', $_POST['username'], ( time() + ((365 * 24 * 60 * 60) *3) ));
  27.         setcookie('password', $_POST['password'], ( time() + ((365 * 24 * 60 * 60) *3) ));
  28.     }else{
  29.         /**
  30.             * Delete Login Credential
  31.             */
  32.         setcookie('username', $_POST['username'], ( time() - (24 * 60 * 60) ));
  33.         setcookie('password', $_POST['password'], ( time() - (24 * 60 * 60) ));
  34.     }
  35.     echo "<script>location.replace('./welcome.php')</script>";
  36. }else{
  37.     echo "<script>alert('Username and Password does not match.'); location.replace('./')</script>";
  38. }
  39.  
  40. ?>

Home Page Interface

Here's the script for the sample site's home page where the user will be redirected after successful login.

welcome.php

  1.     <?php require_once("auth.php"); ?>
  2.     <!DOCTYPE html>
  3.     <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <title>Home | PHP - Login with Remember Me</title>
  9.    
  10.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  11.         <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  12.         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  13.         <style>
  14.             html, body{
  15.                 min-height:100%;
  16.                 width:100%;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
  22.             <div class="container">
  23.                 <a class="navbar-brand" href="./">PHP - Login with Remember Me</a>
  24.                 <div>
  25.                     <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
  26.                 </div>
  27.             </div>
  28.         </nav>
  29.         <div class="container-fluid px-5 my-3 h-75">
  30.             <div class="col-lg-4 col-md-5 col-sm-12 mx-auto my-5 pt-5" >
  31.                 <div class="card rounded-0 shadow">
  32.                     <div class="card-header">
  33.                         <h3 class="card-title text-center fw-bold">Welcome</h3>
  34.                     </div>
  35.                     <div class="card-body">
  36.                         <div class="container-fluid">
  37.                             <h2>You are logged in.</h2>
  38.                             <dl>
  39.                                 <dt>Name:</dt>
  40.                                 <dd><?= $_SESSION['login_name'] ?></dd>
  41.                                 <dt>Username:</dt>
  42.                                 <dd><?= $_SESSION['login_username'] ?></dd>
  43.                             </dl>
  44.                         </div>
  45.                     </div>
  46.                     <div class="card-footer py-2">
  47.                         <div class="text-center">
  48.                             <a class="btn btn-sm btn-danger rounded-pill col-lg-4 col-md-6 col-sm-12" href="logout.php">Logout</a>
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.         </div>
  54.     </body>
  55.     </html>

Logout Script

Here's the script for logging out.

logout.php

  1. <?php
  4. header('location: ./');

Snapshot

Here's a sample snapshot of the login page of the example web application I provided using the source code above.

Login Form with Remeber Me Feature in PHP

DEMO VIDEO

The complete source code zip file of the example source code is also provided on this site. It is free to download. The download link can be found below this article.

That's the end of this tutorial! I hope this Login Form with Remember Me Feature Tutorial in PHP will help you with what you are looking for and that you'll find it useful for your current and future PHP Projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Tags
php
php tutorial
PHP cookie
Login Form
Login Remember Me Tutorial
MYSQL
Bootstrap

Add new comment

About text formats
  • 3360 views