Bootstrap Login Form With Jquery Validation In PHP

Hi friends, today we will learn how to make Bootstrap Login Form with jquery validation in php without refreshing the page. This tutorial must be read with our previous article named “Complete Registration Form With Jquery Validation In PHP“. In this tutorial, we will make a simple login form using bootstrap. Email address and password will be accepted only if it is correct. If email or password is empty, a form will be submitted using $.ajax() and send the users value to the main login page. And the best thing is all these process will be done without page getting refreshed.

You can download the code and even see the demo below.

STEP 1:

I have used the same database and table previously created in complete registration form post, copy the following code to create table in database ‘projects‘.

[php]
CREATE TABLE IF NOT EXISTS `tbl_users` (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`user_name` varchar(25) NOT NULL,
`user_email` varchar(60) NOT NULL,
`user_password` varchar(255) NOT NULL,
`joining_date` datetime NOT NULL,
PRIMARY KEY (`user_id`)
)
[/php]

STEP 2:

Now create a dbconfig.php file to set up your database details.

[php]
<?php $db_host = "localhost"; $db_name = "dbregistration"; $db_user = "root"; $db_pass = ""; try{ $db_con = new PDO("mysql:host={$db_host};dbname={$db_name}",$db_user,$db_pass); $db_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e){
echo $e->getMessage();
}
?>
[/php]

STEP 3:

Then create ‘index.php‘ file which will be our main login page with validations.

[php]
<?php /* Author: Meul Tech URL: https://www.mehulprajapati.com */ session_start(); if(isset($_SESSION[‘user_session’])!="") { header("Location: home.php"); } ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Login Form With Jquery Validation In PHP</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery-1.11.3-jquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22validation.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22script.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

</head>
<body>
<div class="signin-form">
<div class="container">
<form class="form-signin" method="post" id="login-form">
<h2 class="form-signin-heading">Log In to Meul Tech .</h2>
<hr />
<div id="error">
<!– error will be shown here ! –>
</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="btn-login" id="btn-login">
<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In
</button>
</div>
</form>
</div>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22bootstrap%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>
[/php]

STEP 4:

Next, create ‘login_process.php‘ file which will verify email and password is entered correctly or not.

[php]
<?php session_start(); require_once ‘dbconfig.php’; if(isset($_POST[‘btn-login’])) { //$user_name = $_POST[‘user_name’]; $user_email = trim($_POST[‘user_email’]); $user_password = trim($_POST[‘password’]); $password = md5($user_password); try { $stmt = $db_con->prepare("SELECT * FROM tbl_users WHERE user_email=:email");
$stmt->execute(array(":email"=>$user_email));
$row = $stmt->fetch(PDO::FETCH_ASSOC);
$count = $stmt->rowCount();

if($row[‘user_password’]==$password){

echo "ok"; // log in
$_SESSION[‘user_session’] = $row[‘user_id’];
}
else{

echo "email or password does not exist."; // wrong details
}

}
catch(PDOException $e){
echo $e->getMessage();
}
}

?>
[/php]

STEP 5:

Create a ‘script.js’ file which will act silently in the background.

[php]
/*
Author: Meul Tech
URL: https://www.mehulprajapati.com
*/

$(‘document’).ready(function()
{
/* 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
});
/* validation */

/* login submit */
function submitForm()
{
var data = $("#login-form").serialize();

$.ajax({

type : ‘POST’,
url : ‘login_process.php’,
data : data,
beforeSend: function()
{
$("#error").fadeOut();
$("#btn-login").html(‘<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending …’);
},
success : function(response)
{
if(response=="ok"){

$("#btn-login").html(‘<img src="btn-ajax-loader.gif" /> &nbsp; Signing In …’);
setTimeout(‘ window.location.href = "home.php"; ‘,4000);
}
else{

$("#error").fadeIn(1000, function(){
$("#error").html(‘

<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; ‘+response+’ !</div>

‘);
$("#btn-login").html(‘<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In’);
});
}
}
});
return false;
}
/* login submit */
});
[/php]

STEP 6:

Next create a ‘home.php‘ file which is user homepage. If session is empty it will redirect again to login page.

[php]
<?php session_start(); if(!isset($_SESSION[‘user_session’])) { header("Location: index.php"); } include_once ‘dbconfig.php’; $stmt = $db_con->prepare("SELECT * FROM tbl_users WHERE user_id=:uid");
$stmt->execute(array(":uid"=>$_SESSION[‘user_session’]));
$row=$stmt->fetch(PDO::FETCH_ASSOC);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Form using jQuery Ajax and PHP MySQL</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link href="style.css" rel="stylesheet" media="screen">

</head>
<body>

<div class=’alert alert-success’>
<button class=’close’ data-dismiss=’alert’>&times;</button>
<strong>Hello ‘<?php echo $row[‘user_name’]; ?></strong> Welcome to the members page.
</div>

</div>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22bootstrap%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>
[/php]

STEP 7:

Final step is to create ‘logout.php‘ file. So let’s destroy the session.

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

Finally we have created a bootstrap login form with jquery validation in php. Hit the url and enjoy the code. Thanks for reading the tutorial.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Web Designing Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.

Tags: jquery, PHP