Today we are going to create Ajax Login Form Using jQuery and PHP project. Before this project, we have created Ajax PHP Newsletter project using jQuery and PHP. Today our project is Login Form. We know that maximum top profile websites are using ajax for the various feature. Ajax is using for making a web page more attractive. Ajax complete actions without page loading. Let's see how to easily we can make a login page for our website. Follow instructions step by step.
Ajax Login Form How To Make
Now we are in the main point of creating Ajax Login Form. We are using Jquery, Ajax & PHP for making this login form. First, create a PHP file name as index.php and write down this code.
index.php
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Ajax PHP Login</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">;
<link rel="stylesheet" type="text/css" href="/styles/styles.css" media="all,print"/>
<link rel="stylesheet" type="text/css" href="asset/styles.css" media="all,print"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="asset/events.js"></script>
<meta name="keywords" content="Ajax PHP Login"/>
<meta name="description" content="Ajax PHP Login"/>
</head>
<body>
<div class="container content text-center">
<?php
@session_start();
if(isset($_SESSION['email']))
{
echo '<h2 class="text-center">Welcome, '.$_SESSION['email'].'</h2>';
}
?>
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">PHPAns Ajax PHP Login </div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form class="form-horizontal">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="Username or Email" autofocus>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1" checked> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button id="btn-login" class="btn btn-block btn-social btn-bitbucket"> <span class="fa fa-sign-in"></span> Login</button>
<a class="btn btn-block btn-social btn-twitter" href="#" onclick="location.href = "/twitter-login/process.php""><span class="fa fa-twitter"></span> Sign in with Twitter</a>
<a class="btn btn-block btn-social btn-facebook" href="#" onclick="location.href = "/facebook-login/process.php""><span class="fa fa-facebook"></span> Sign in with Facebook</a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account!
<a href="#">
Sign Up Here
</a><br/>
Forgot password?
<a href="#">
Reset It Now
</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>events.js
$(document).ready(function() {
$("#btn-login").click(function() {
var e = $("#login-username").val(),
a = $("#login-password").val(),
t = ($("#login-remember").val(), "action=login&email=" + e + "&password=" + a + "&remember=" + t);
return $.trim(e).length > 0 && $.trim(a).length > 0 ? $.ajax({
type: "POST",
url: "action.php",
data: t,
cache: !1,
beforeSend: function() {
$("#btn-login").attr("disabled", !0), $("#btn-login").html("<i class='fa fa-sign-in'></i> Loading..."), $("#login-alert").removeClass(), $("#login-alert").css("display", "block"), $("#login-alert").css("text-align", "center"), $("#login-alert").html('<img src="/icon/squares.gif" alt="loading...">')
},
success: function(e) {
e ? "true" == e ? ($("#btn-login").html("<i class='fa fa-sign-in'></i> Logging..."), $("#login-alert").removeClass(), $("#login-alert").addClass("alert alert-success"), $("#login-alert").html('You have successfully logged in.<br/><i class="fa fa-spinner fa-spin fa-2x"></i>'), $("#login-alert").css("display", "block"), setTimeout(function() {
location.reload()
}, 3e3), $("#btn-login").attr("disabled", !0), $("#login-username").attr("disabled", !0), $("#login-password").attr("disabled", !0), $("#login-alert").addClass("alert"), $("#login-alert").addClass("alert-warning"), $("#login-remember").attr("disabled", !0)) : ($("#login-alert").addClass("alert alert-warning"), $("#login-alert").html("<i class='fa fa-exclamation-triangle' aria-hidden='true'></i> Username/Email & Password Incorrect."), $("#btn-login").attr("disabled", !1), $("#btn-login").html("<i class='fa fa-sign-in'></i> Login"), $("#btn-login").attr("disabled", !1)) : ($("#btn-login").html("<i class='fa fa-sign-in'></i> Login"), $("#login-alert").html("<i class='icon-warning-sign'></i> There is an SQL error!"), $("#btn-login").attr("disabled", !1))
}
}) : ($("#login-alert").html("<i class='fa fa-exclamation-triangle' aria-hidden='true'></i> Username/Email & Password required!"), $("#login-alert").show('fast')), !1
})
});action.php
<?php
@session_start();
@error_log(NULL);
@error_reporting(0);
@date_default_timezone_set('UTC');
if(isSet($_POST['email']) && isSet($_POST['password']) && $_POST['action']=='login')
{
$email=trim($_POST['email']); // Username Or Email
$password=md5(trim($_POST['password']));
$remember= $_POST['remember'];
// You can check user from database
if ($email=='phpans'&&$password=='0f0ec37507f51f92d697f15fd17a698e'){$count=1;}else{$count=0;}
if($count==1)
{
$_SESSION['email']= $email;
print 'true';
}
else
{
print 'false';
}
}
?>
We have added a PHP functions for login. You can check and validate users by using MySQL but here I used a dummy login. You can added or eidt this file actions as you wish. We also added styles.css file for styling you can change it and add your own stylesheet, I have used styles from this site CSS.
Our full project is ready to display result. Run this script into your server and check it. If you add all files correctly then Ajax Login Form will work properly.
Here is a live demo of this project you can see this demo. Use Username: phpans and Password: phpans in demo version. Even PHPAns are currently using this Ajax PHP project for Login to PHPAns. So, you can use this without any doubt make your website more attractive and present to your users.
I hope you enjoy this project and this project will be helpful for you. And you can use this to increase site performance. I have added this file into attachment you can download full Ajax PHP Login project from here and you can use it instantly. In next project we will complete Ajax PHP Signup project. If you have any question or comment about this Ajax Login Form Using jQuery and PHP project please don't hesitate to do that, please comment your question in comment section.
