Login dengan Fungsi Remember Me Menggunakan PHP MySQLi

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
September 21, 2018




Remember Me berfungsi untuk menyimpan nama pengguna dan kata sandi dalam bentuk login yang dimasukkan oleh pengguna. Dalam tutorial ini, kami menggunakan COOKIES untuk menghemat pengguna dan kata sandi pengguna dalam proses masuk.



Yang pertama buat kalian harus mempersiapkan terlebih dahulu database yang akan kalian gunakan, Buat dataabse dengan nama user kemudian masukkan tabel di bawah ini.


 -- phpMyAdmin SQL Dump
-- version 4.8.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Sep 21, 2018 at 10:51 AM
-- Server version: 10.1.32-MariaDB
-- PHP Version: 7.2.5

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `user`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbluser`
--

CREATE TABLE `tbluser` (
  `id` int(11) NOT NULL,
  `userName` varchar(200) DEFAULT NULL,
  `userPassword` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbluser`
--

INSERT INTO `tbluser` (`id`, `userName`, `userPassword`) VALUES
(1, 'arman@gmail.com', '66059a527018b32e4597dd27574929f6');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbluser`
--
ALTER TABLE `tbluser`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbluser`
--
ALTER TABLE `tbluser`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
 

Kedua buat file dengan nama index.php fungsi file ini sebagai form login dan menyimpan fungsi login.

 <?php
session_start();
include('config.php');
if(isset($_POST["login"])) 
{
  $username=$_POST['username'];
  $password=md5($_POST['password']);
  $sql = "Select * from tbluser where userName ='$username' and userPassword ='$password'";
  $result = mysqli_query($conn,$sql);
  $row = mysqli_fetch_array($result);
  if($row) {
   $_SESSION["userid"]= $row["id"];
   
   if(!empty($_POST["remember"])) {
    setcookie ("user_login",$_POST["username"],time()+ (10 * 365 * 24 * 60 * 60));
    setcookie ("userpassword",$_POST["password"],time()+ (10 * 365 * 24 * 60 * 60));
  } else {
    if(isset($_COOKIE["user_login"])) {
     setcookie ("user_login","");
   }
   if(isset($_COOKIE["userpassword"])) {
     setcookie ("userpassword","");
   }
 }
 header('location:dashbord.php');
} else {
  $message = "Invalid Login";
}
}
?>
<!DOCTYPE html>
<html>
<head>
  <link rel="shortcut icon" href="images/profile.gif">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Main CSS-->
  <link rel="stylesheet" type="text/css" href="login/css/main.css">
  <!-- Font-icon css-->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Login With Remember Me</title>
  <script type="text/javascript">
    function valid()
    {
      if(document.forgot.password.value!= document.forgot.confirmpassword.value)
      {
        alert("Password and Confirm Password Field do not match  !!");
        document.forgot.confirmpassword.focus();
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <section class="material-half-bg">
    <div class="cover">
    </div>
    
  </section>
  <section class="login-content">
    <div class="login-box">
     <p style="padding-left:20%; color:red">
      <?php if(isset($message)) { echo $message; } ?>
    </p>

    
    <form class="login-form" method="post" id="login">
      <a class="brand" href="../index.html">
        <div class="thumbnail"><center><img src="images/profile.gif" height="100"/></center></div></a><p/>
        <div class="form-group">
          <input name="username" type="text" value="<?php if(isset($_COOKIE["user_login"])) { echo $_COOKIE["user_login"]; } ?>" class="form-control">
        </div>
        <div class="form-group">
          <input name="password" type="password" value="<?php if(isset($_COOKIE["userpassword"])) { echo $_COOKIE["userpassword"]; } ?>" class="form-control">
        </div>
        <div class="form-group">
          <input type="checkbox" name="remember" id="remember" <?php if(isset($_COOKIE["user_login"])) { ?> checked <?php } ?> />
          <label for="remember-me">Remember me</label>
        </div>

        <div class="form-group btn-container">
          <button type="submit" name="login" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>SIGN IN</button>
        </div>
      </form>
    </div>
  </section>
  <!-- Essential javascripts for application to work-->
  <script src="login/js/jquery-3.2.1.min.js"></script>
  <script src="login/js/popper.min.js"></script>
  <script src="login/js/bootstrap.min.js"></script>
  <script src="login/js/main.js"></script>
  <!-- The javascript plugin to display page loading on top-->
  <script src="login/js/plugins/pace.min.js"></script>
</body>
</html> 

Ketiga buat file dengan nama config.php fungsi file ini adalah koneksi kedatabase.

 <?php
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'user');
$conn = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Keekmpat buat file dengan nama dashbord.php file ini sebagai form yang dituju ketika berhasi login.

 <?php 
session_start();
?>
<!DOCTYPE html>
<html>
<head>
  <title>Log With Remember Me</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <!--Script CSS-->
  <link type="text/css" href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet'>
  <link type="text/css" href='https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css' rel='stylesheet'>
  <link type="text/css" href='https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css' rel='stylesheet'>
  
</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="logout.php">Logout !!</a>
    </div>
  </div>
</nav>
<br />
<!--h2 align="center">EXPORT FILE</h2-->
<br />

<div class="form-group">

  <?php if(empty($_SESSION["userid"])) { 
    header('location:index.php')
    ?>

  <?php } else { ?>
    <div class="member-dashboard">Welcome Back. <a href="logout.php" style="color: #fff">Logout</a></div>
  <?php } ?>
  
</div>

</body>
</html>
 

Terakhir buat file dengan nama logout.php file ini mempunyai fungsi logout.

 <?php
session_start();
$_SESSION["id"] = "";
session_destroy();
header("Location: index.php");
?> 

Jika kalian ingin melihat langsung login dengan fungsi remember me silahkan klik button demo di bawah, kalian juga bisa langsung mendownload file di atas dengan menekan button download dibawah ini.

DEMO            DOWNLOAD

Email : arman@gmail.com
Password : arman

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda semua, jika kalian belum paham dengan apa yang kami tulis di atas silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed