Today, We want to share with you Ajax Login System with jQuery PHP and MySQLi.In this post we will show you Ajax login form using jQuery, PHP, PDO, MySQL, hear for Simple PHP Login System Using MySQL and jQuery AJAX we will give you demo and example for implement.In this post, we will learn about Ajax Login Form Using jQuery, PHP And MySQL with an example.
Ajax Login System with jQuery PHP and MySQLi
Contents
There are the Following The simple About Ajax Login System with jQuery PHP and MySQLi Full Information With Example and source code.
As I will cover this Post with live Working example to develop jQuery Ajax PHP MySQLi Login Form System, so the Simple Ajax Login form with jQuery and PHP for this example is following below.
Step 1 : Create Ajax Login Form
signin_form.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax Login form using PHP and MySQL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card" style="margin-top:10%">
<div class="card-header">
Member Login
</div>
<div class="card-body">
<div id="preview_err" class="alert alert-danger" style="display:none" role="alert"></div>
<form name="signin_form" action="/signin.php" id="signin_form" method="post">
<div class="gst form-group">
<label for="email">Member Email</label>
<input type="email" class="gst form-control" name="email" id="email" placeholder="Enter Member email">
</div>
<div class="gst form-group">
<label for="password">Password</label>
<input type="password" class="gst form-control" name="password" id="password" placeholder="Member Password">
</div>
<button type="submit" id="login" class="gst btn btn-success">Login</button>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script>
$(function()
{
$('#login').click(function(e){
let self = $(this);
e.preventDefault();
self.prop('disabled',true);
var data = $('#signin_form').serialize();
$.ajax({
url: '/signin.php',
type: "POST",
data: data,
}).done(function(res) {
res = JSON.parse(res);
if (res['status'])
{
location.href = "secure.php";
} else {
var loadErrMsg = '';
console.log(res.message);
$.each(res['message'],function(index,message) {
loadErrMsg += '<p>' + message+ '</p>';
});
$("#preview_err").html(loadErrMsg);
$("#preview_err").show();
self.prop('disabled',false);
}
}).fail(function() {
alert("responseError");
}).always(function(){
self.prop('disabled',false);
});
});
});
</script>
</body>
</html>
Step 2 : Database Detials
member table structure in your database
CREATE TABLE IF NOT EXISTS `members` ( `member_id` int(11) NOT NULL AUTO_INCREMENT, `member_fname` varchar(255) NOT NULL, `member_lname` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`member_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2; -- -- Dumping data for table `members` -- INSERT INTO `members` (`member_id`, `member_fname`, `member_lname`, `email`, `password`, `created_at`) VALUES (1, 'Jaydeep', 'PHP', '[email protected]', '$2y$10$8mVSGv/bIGgcvCik9825606241Ml3jqfiirtQG9909816257LG', '2019-10-12 18:09:10');
Step 3 : configuration in Database
Config.php
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '[email protected]');
define('DB_DATABASE', 'atmiya25');
$db = new PDO('mysql:host='.DB_SERVER.';dbname='.DB_DATABASE, DB_USERNAME, DB_PASSWORD);
?>
signin.php
<?php
require_once('config.php');
$responseError = array();
$res = array();
if(empty($_POST['email']))
{
$responseError[] = "Member Email field is required";
}
if(empty($_POST['password']))
{
$responseError[] = "Member Password field is required";
}
if (!empty($_POST['email']) && !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$responseError[] = "Member Enter Valid Email address";
}
if(count($responseError)>0)
{
$results['message'] = $responseError;
$results['status'] = false;
echo json_encode($results);
exit;
}
$statement = $db->prepare("select * from members where email = :email" );
$statement->execute(array(':email' => $_POST['email']));
$row = $statement->fetchAll(PDO::FETCH_ASSOC);
if(count($row)>0) {
if(!password_verify($_POST['password'],$row[0]['password'])) {
$responseError[] = "Member Password is not valid";
$results['message'] = $responseError;
$results['status'] = false;
echo json_encode($results);
exit;
}
session_start();
$_SESSION['member_id'] = $row[0]['member_id'];
$results['redirect'] = "home.php";
$results['status'] = true;
echo json_encode($results);
exit;
} else {
$responseError[] = "Email does not match";
$results['message'] = $responseError;
$results['status'] = false;
echo json_encode($results);
exit;
}
secure.php
<?php
session_start();
if(empty($_SESSION['member_id'])){
header('location: signin_form.php');
} else {
echo 'Secure page!.';
echo '<a href="/signout.php">signout</a>';
}
signout.php
session_start();
session_destroy();
header('location: signin.php');
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Ajax Login System with jQuery PHP and MySQLi.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโt forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.