Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में login form में login with remember Me functionality के बारेमे जानेगे!. तो दोस्तों जब user एक बार login form से login होता है और उसके बाद में कुछ time के बाद में user फिर से वही login form को open करता है तो उसको फिरसे अपना email and password fill-up करके login होना पड़ता है!. To remember functionaliy से क्या होता है की user एक बार login हुवा और उसके बाद में कुछ time के बाद में फिर से login होता है तो user को फिरसे email और password को fillup नहीं करना पड़ता है! क्यों की वह automatically fillup होके आएगा तो वह होता है remember functionality से तो आज हम इस post में यही जानेगे email और password को autofillup कैसे setup करा सकते है!. Remember की functionality setup करने के लिए ham cookies का इस्तेमाल करेंगे!.
Remember functionality setup करने के लिए जरुरी files जैसे की
- dbconn.php
- login.php
- dashboard.php
- logout.php
Create database table
CREATE TABLE IF NOT EXISTS `register` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `phone` varchar(15) NOT NULL, `password` varchar(255) NOT NULL, PRIMARY KEY (`id`) );
ऊपर में create table में हम एक data record insert करा देते है जिसके मदद से हम login form functionality को perform करा सके उसके लिए insert query कुछ इस तरह से लिख के perform करा सकते है!.
INSERT INTO `register` (`username`, `email`, `phone`, `password`) VALUES ('rahul', 'gamitrahul@gmail.com', '09585452231', '123456')
Database connection
dbconn.php file
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "crud";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
} else{
//echo "Connected successfully";
}
?>
Login Form with Remember functionality
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>This is login system</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<style>.error{ color: red; top: 20px }</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-9 mx-auto">
<div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
<div class="card-img-left d-none d-md-flex">
<!-- Background image for card set in CSS! -->
</div>
<div class="card-body p-4 p-sm-5">
<h5 class="card-title text-center mb-5 fw-light fs-5">Login</h5>
<form action="#" method="POST" class="form_data">
<div class="form-floating mb-3">
<input type="email" class="form-control" name="email" id="floatingInputEmail" placeholder="example@example.com">
<label for="floatingInputEmail">Email address</label>
</div>
<hr>
<div class="form-floating mb-3">
<input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="mb-2">
<input name="remember_me" type="checkbox"> <label>Remember me</label>
</div>
<div class="d-grid mb-2">
<input name="submit" class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit" value="login">
</div>
<a class="d-block text-center mt-2 small" href="/insert.php">Have Don't account? Sign up</a>
<hr class="my-4">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Login Form validation with jquery
<script>
$(document).ready(function () {
$(".form_data").validate({
rules: {
username: {
required: true
},
email: {
required: true,
email: true
},
password: "required",
confirm_password: {
equalTo: "#floatingPassword"
},
phone:{
required: true
}
},
messages: {
username: {
required: "this field is required"
},
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
},
phone: {
required: "this field is required"
}
}
});
});
</script>
if( mysqli_num_rows( $select_res ) > 0 ){
if( !empty ( $_POST['remember_me'] ) ){
setcookie ("cookie_email", $email, time()+ (10 * 365 * 24 * 60 * 60));
setcookie ("cookie_password", $password, time()+ (10 * 365 * 24 * 60 * 60));
} else {
setcookie ("cookie_email", "");
setcookie ("cookie_password", "");
}
$_SESSION["Login"] = true;
$_SESSION["email"] = $email;
$_SESSION["password"] = $password;
header("Location: dashboard.php");
exit();
}
Fullsource code
<?php
include('inc/dbconn.php');
session_start();
if( isset ( $_SESSION["Login"] ) ){
header("Location: dashboard.php");
}
if( isset( $_POST['submit'] ) ){
$email = $_POST['email'];
$password = $_POST['password'];
$select_query = "SELECT * FROM `register` WHERE email ='".$email."' AND password = '".$password."' ";
$select_res = mysqli_query( $conn, $select_query );
if( mysqli_num_rows( $select_res ) > 0 ){
if( !empty ( $_POST['remember_me'] ) ){
setcookie ("cookie_email", $email, time()+ (10 * 365 * 24 * 60 * 60));
setcookie ("cookie_password", $password, time()+ (10 * 365 * 24 * 60 * 60));
} else {
setcookie ("cookie_email", "");
setcookie ("cookie_password", "");
}
$_SESSION["Login"] = true;
$_SESSION["email"] = $email;
$_SESSION["password"] = $password;
header("Location: dashboard.php");
exit();
} else{
echo "User Login Faild!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>This is login system</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$(".form_data").validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true
}
},
messages: {
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
});
</script>
<style>.error{ color: red; top: 20px }</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-9 mx-auto">
<div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
<div class="card-img-left d-none d-md-flex">
<!-- Background image for card set in CSS! -->
</div>
<div class="card-body p-4 p-sm-5">
<h5 class="card-title text-center mb-5 fw-light fs-5">Login</h5>
<form action="#" method="POST" class="form_data">
<div class="form-floating mb-3">
<input type="email" class="form-control" name="email" id="floatingInputEmail" placeholder="example@example.com">
<label for="floatingInputEmail">Email address</label>
</div>
<hr>
<div class="form-floating mb-3">
<input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="mb-2">
<input name="remember_me" type="checkbox"> <label>Remember me</label>
</div>
<div class="d-grid mb-2">
<input name="submit" class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit" value="login">
</div>
<a class="d-block text-center mt-2 small" href="/insert.php">Don't Have account? Sign up</a>
<hr class="my-4">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
