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>
