PHP - Simple Login With Remember me Script

Submitted by razormist on Thursday, July 6, 2017 - 12:12.
In this tutorial we will create a Simple Login Script With Remember me Feature. PHP is a server-side scripting language designed primarily for web development. Using PHP, you can let your user directly interact with the script and easily to learned its syntax. It is mostly used by a newly coders for its user friendly environment. So Let's do the coding. Before we started: First you have to download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html. Creating the database Connection This is the where the database connection, just simple copy/paste the provided code below and save it as 'connect.php'.
  1. <?php
  2.         $conn = new mysqli("localhost", "root", "", "phptut");
  3.        
  4.         if(!$conn){
  5.                 die("Fatal Error: Connection Faileds");
  6.         }
  7. ?>
The Main Interface This is the where the database connection, just simple copy/paste the provided code below then save it as 'index.php'.
  1. <!DOCTYPE html>
  2.  
  3. <html lang = "en">
  4.         <head>
  5.                 <meta charset = "UTF-8" name = "viewport" content = "width=device-width"/>
  6.                 <link rel = "stylesheet" type = "text/css"  href = "css/bootstrap.css"/>
  7.         </head>
  8. <body>
  9.         <nav class = "navbar navbar-default">
  10.                 <div class = "container-fluid">
  11.                         <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a>
  12.                 </div>
  13.         </nav>
  14.         <div class = "col-md-3"></div>
  15.         <div class = "col-md-6 well">
  16.                 <h3 class = "text-primary">PHP - Simple Login With Remember me Script</h3>
  17.                 <hr style = "border-top:1px dotted #000;"/>
  18.                 <div class = "col-md-1"></div>
  19.                 <div class = "col-md-10" style = "box-shadow:0px 0px 1px 0.5px #000; border-radius:1px;">
  20.                         <h4>Login Here...</h4><br />
  21.                         <form> 
  22.                                 <div class = "form-group">
  23.                                         <label>Username:</label>
  24.                                         <input type = "text" id = "username" name = "username" value = "<?php if(ISSET($_COOKIE['username'])){echo $_COOKIE['username'];}?>" class = "form-control"/>
  25.                                 </div>
  26.                                 <div class = "form-group">
  27.                                         <label>Password:</label>
  28.                                         <input type = "password" id = "password"  name = "password" value = "<?php if(ISSET($_COOKIE['password'])){echo $_COOKIE['password'];}?>" class = "form-control"/>
  29.                                 </div>
  30.                                 <div class = "form-group">
  31.                                 <input type = "checkbox" id = "remember" name = "remember" <?php if(ISSET($_COOKIE['username'])){echo 'checked';}?> /><label>Remember me</label>
  32.                                 </div>
  33.                                 <br />
  34.                                 <br />
  35.                                 <div class = "form-group">     
  36.                                         <button type = "button" id = "login" class = "btn btn-primary form-control" name = "login" >LOGIN</button>
  37.                                 </div>
  38.                                 <br />
  39.                         </form>
  40.                 </div>
  41.         </div>
  42. </body>
  43. <script src = "js/jquery-3.2.1.js"></script>
  44. <script src = "js/script.js"></script>
  45. </html>
The Login Script This is where the code will login the user if the username an password are valid. To do that copy/paste the code below and save it 'login.php'.
  1. <?php
  2.         require_once 'connect.php';
  3.        
  4.         session_start();
  5.        
  6.  
  7.         $username = $_POST['username'];
  8.         $password = $_POST['password'];
  9.        
  10.         $query = $conn->query("SELECT * FROM `member` WHERE `username` = '$username' && `password` = '$password'");
  11.         $row = $query->num_rows;
  12.         $fetch = $query->fetch_array();
  13.                 if($row > 0){
  14.                         $_SESSION['mem_id'] = $fetch['mem_id'];
  15.                        
  16.                        
  17.                         if(!empty($_POST['remember'])){
  18.                                 setcookie("username", $_POST['username'], time()+(10 * 365 * 24 * 60 * 60));
  19.                                 setcookie("password", $_POST['password'], time()+(10 * 365 * 24 * 60 * 60));
  20.                         }else{
  21.                                 if(ISSET($_COOKIE['username'])){
  22.                                         setcookie("username", "");
  23.                                 }
  24.                                 if(ISSET($_COOKIE['password'])){
  25.                                         setcookie("password", "");
  26.                                 }
  27.                         }
  28.                         echo 0;
  29.                 }else{
  30.                         echo 1;
  31.                 }
  32.        
  33.        
  34. ?>
The Home Script This is where the interface of home page is located. To make this just simply copy/paste the code below and save it as 'home.php'.
  1. <!DOCTYPE html>
  2. <?php
  3.         session_start();
  4.         require_once 'check.php'
  5. ?>
  6. <html lang = "en">
  7.         <head>
  8.                 <meta charset = "UTF-8" name = "viewport" content = "width=device-width"/>
  9.                 <link rel = "stylesheet" type = "text/css"  href = "css/bootstrap.css"/>
  10.         </head>
  11. <body>
  12.         <nav class = "navbar navbar-default">
  13.                 <div class = "container-fluid">
  14.                         <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a>
  15.                 </div>
  16.         </nav>
  17.         <div class = "col-md-3"></div>
  18.         <div class = "col-md-6 well">
  19.                 <h3 class = "text-primary">PHP - Simple Login With Remember me Script</h3>
  20.                 <hr style = "border-top:1px dotted #000;"/>
  21.                 <div class = "col-md-1"></div>
  22.                 <div class = "col-md-10">
  23.                         <?php                  
  24.                                 require 'connect.php';
  25.                                 $query = $conn->query("SELECT * FROM `member` WHERE `mem_id` = '$_SESSION[mem_id]'");
  26.                                 $fetch = $query->fetch_array();
  27.                                 echo $fetch['username'];
  28.                         ?>
  29.                         <center><a href = "logout.php"><button class = "btn btn-success">Logout</button></a></center>
  30.                 </div>
  31.         </div>
  32. </body>
  33. </html>
The Logout Script This code will unset the session that have been login. To do that just simply copy/paste the code below and save it ''logout.php'.
  1. <?php
  2.         require_once 'connect.php';
  3.         session_start();
  4.         session_unset($_SESSION['mem_id']);
  5.         header('location: index.php');
  6. ?>
The Validator Script This code will validate the user account if is already login if not will force back to login page. To do that copy/paste the code below then save it as 'check.php'.
  1. <?php
  2.         if(!ISSET($_SESSION['mem_id'])){
  3.                 header('location:index.php');
  4.         }
  5. ?>
The jQuery Script This is script will processed the users input then will be later send to PHP script to be a readable data. To do that just simply copy/paste the code below and save it as "script.js".
  1. $(document).ready(function(){
  2.         $('#login').on('click', function(){
  3.                
  4.                 if($('#username').val() == "" || $('#password').val() == ""){
  5.                         alert("Please enter something!");
  6.                 }else{
  7.                         username = $('#username').val();
  8.                         password = $('#password').val();
  9.                         remember = $('#remember:checked').val();
  10.                        
  11.                         $.ajax({
  12.                                 url: "login.php",
  13.                                 type: "POST",
  14.                                 data: {
  15.                                         username: username,
  16.                                         password: password,
  17.                                         remember: remember
  18.                                 },
  19.                                 success: function(data){
  20.                                         if(data == 0){
  21.                                        
  22.                                         window.location = "home.php";
  23.                                         }else if(data == 1){
  24.                                                 alert("Invalid username or password");
  25.                                         }
  26.                                 }
  27.                         });
  28.                 }
  29.         });
  30. });
There you have it we simple created a simple Login Script With Remember me Feature. I hope that this simple tutorial help you to your projects. For more updates and tutorial just kindly visit this site. Enjoy Coding!!
Tags
php
jQuery

Comments

Submitted by Mauro (not verified) on Fri, 06/29/2018 - 19:54

I found two errors in this tutorial: 1 the password is stored in cookies. 2 the cookies aren't use to recreate the session.

Add new comment

About text formats