Ajax Login Form Using jQuery, PHP And MySQL

php code / April 11, 2018

Login form ajax and jquery validation step-by-step code is a typical piece of any web venture that enables its legitimate clients to get to specific pages. In this instructional exercise, you will figure out how to make a login frame utilizing jQuery Ajax and PHP MySQL. So here we have dealt with login usefulness by making a basic login shape with Bootstrap.

You can see the live demo from the Demo interface and can download the full live demo content from the Download connect underneath.

Ajax Login Form With PHP Jquery Validation mysqli.

Ajax Login Form Using jQuery, PHP, And MySQL Code Step by Step Demo

Without Submit FORM
Step By Step Guide!
Install XAMPP

1.0 Run Your First PHP Script

1.1 Go to XAMPP server directory
1.2 Create db_connect.php

Step By By Video

STEP 1 : Create db_connect.php

<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "phpcode";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) 
{
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>

STEP 2: Create index.php

<?php 
include('header.php');
include_once("db_connect.php");
?>
<title>phpcode : Demo Ajax Login Script with PHP and jQuery</title>
<script type="text/javascript" src="script/validation.min.js"></script>
<script type="text/javascript" src="script/login.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
<?php include('container.php');?>
<div class="container">
<h2 align="center">Example: Ajax Login Script with PHP and jQuery</h2> 
<form class="form-login" method="post" id="login-form">
<h2 class="form-login-heading">User Log In Form</h2><hr />
<div id="error">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="login_button" id="login_button">
<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In
</button> 
</div> 
</form> 
<div style="margin:50px 0px 0px 0px;">
<a class="btn btn-default read-more" style="background:#3399ff;color:white" href="" title="">Back to Tutorial</a> 
</div> 
</div>
<?php include('footer.php');?>

STEP 3: Create header.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

STEP 4: Create footer.php

<div class="insert-post-ads1" style="margin-top:20px;">
</div>
</div>
</body></html>

STEP 5: Create container.php

</head>
<body class="">
<div role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">PHPCODE</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="min-height:500px;">
<div class=''>
</div>

STEP 6: Create login.php

<?php
session_start();
include_once("db_connect.php");
if(isset($_POST['login_button'])) {
$user_email = trim($_POST['user_email']);
$user_password = trim($_POST['password']);
$sql = "SELECT uid, user, pass, email FROM users WHERE email='$user_email'";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$row = mysqli_fetch_assoc($resultset); 
if($row['pass']==$user_password){ 
echo "ok";
$_SESSION['user_session'] = $row['uid'];
} else { 
echo "email or password does not exist."; // wrong details 
} 
}
?>

STEP 7: Create welcome.php

<?php
session_start();
if(!isset($_SESSION['user_session'])){
header("Location: index.php");
}
include('header.php');
include_once("db_connect.php");
$sql = "SELECT uid, user, pass, email FROM users WHERE uid='".$_SESSION['user_session']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$row = mysqli_fetch_assoc($resultset);
include('container.php');
?>
<div class="container"> 
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"> 
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user"></span>&nbsp;Hi <?php echo $row['user']; ?>&nbsp;<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;View Profile</a></li>
<li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Sign Out</a></li>
</ul>
</li>
</ul>
</div> 
<div class='alert alert-success'>
<button class='close' data-dismiss='alert'>&times;</button>
Hello, <br><br>Welcome to the members page.<br><br>
</div> 
</div>
<?php include('footer.php');?>

STEP 8: Create logout.php

<?php
session_start();
unset($_SESSION['user_session']); 
if(session_destroy()) {
header("Location: index.php");
}
?>

STEP 9: Create style.css

@charset "utf-8";
body {
background:#f1f9f9;
}
.form-login {
max-width: 500px;
padding: 19px 29px 29px;
margin: 0 auto;
background-color: #fff; 
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05); 
font-family:Tahoma, Geneva, sans-serif;
color:#990000;
font-weight:lighter;
}
.form-login .form-login-heading {
color:#00A2D1;
}
.form-login input[type="text"],
.form-login input[type="password"],
.form-login input[type="email"] {
font-size: 16px;
height: 45px;
padding: 7px 9px;
}
.body-container {
margin-top:110px;
}
.navbar-brand {
font-family:"Lucida Handwriting";
}
#btn-submit{
height:45px;
}

STEP 10: Create login.js file

$('document').ready(function() { 
/* handling form validation */
$("#login-form").validate({
rules: {
password: {
required: true,
},
user_email: {
required: true,
email: true
},
},
messages: {
password:{
required: "Please enter your password"
},
user_email: "Please enter your email address",
},
submitHandler: submitForm 
}); 
/* Handling login functionality */
function submitForm() { 
var data = $("#login-form").serialize(); 
$.ajax({ 
type : 'POST',
url : 'login.php',
data : data,
beforeSend: function(){ 
$("#error").fadeOut();
$("#login_button").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
},
success : function(response){ 
if(response=="ok"){ 
$("#login_button").html('<img src="ajax-loader.gif" /> &nbsp; Signing In ...');
setTimeout(' window.location.href = "welcome.php"; ',4000);
} else { 
$("#error").fadeIn(1000, function(){ 
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+response+' !</div>');
$("#login_button").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In');
});
}
}
});
return false;
} 
});

Code File Live Demo Videos