Ajax Jquery Login in PHP |

Ajax Jquery Login in PHP

January 22, 2014

Creating the Database

Create database “login” and create table “members” :

CREATE TABLE `members` (
`id` int(4) NOT NULL auto_increment,
`username` varchar(65) NOT NULL default '',
`password` varchar(65) NOT NULL default '',
PRIMARY KEY (`id`)
);

INSERT INTO `members` VALUES (1, 'naveen', '123456');

main_login.php – file that will have the HTML form to get the username and the password from the user.
checklogin.php – our core file which will receive and send data from and to index.php
login_success.php -- Success message file after login successfully.
login.js – for our custom Jquery code for easy managemnt
jquery.min.js – we will download it from jquery website or we will directly use the link
style.css – place for basic style
Logout.php -- Logout file for logout purpose.



main_login.php

<div class=”loginform-in”>
<h1>User Login</h1>
<div class=”err” id=”add_err”></div>
<fieldset>
<form action=”checklogin.php” method=”post”>

<label for=”name”>Username </label>
<input type=”text” size=”30″ name=”name” id=”name” />
<label for=”name”>Password</label>
<input type=”password” size=”30″ name=”word” id=”word” />

</form>
</fieldset>
</div>

I hope that the above code does not need any explanation. Its the form to gather username and password from the user. We move on to the next file.

checklogin.php

<?php
ob_start();
$host=”localhost”; // Host name
$username=”root”; // Mysql username
$password=”vertrigo”; // Mysql password
$db_name=”admin”; // Database name
$tbl_name=”members”; // Table name

// Connect to server and select databse.
mysql_connect(“$host”, “$username”, “$password”)or die(“cannot connect”);
mysql_select_db(“$db_name”)or die(“cannot select DB”);
$uName = $_POST[‘name’];
$pWord = $_POST[‘pwd’];
$qry = “SELECT username, password FROM members WHERE username='”.$uName.”‘ AND password='”.$pWord.”‘”;
$res = mysql_query($qry);
$num_row = mysql_num_rows($res);

if( $num_row == 1 ) {
echo ‘true’;
session_register(username);
session_register(password);

}
else {
echo ‘false’;
}
?>

receiving and assigning the values we gathered through the form in ‘main_login.php’.

The query which will help to retrieve user id, username, oauth and check if the username and the password entered does match with the stored data and if the user’s status field is set ‘active’ in the database. Then query execution, checking number of rows returned and fetching the resource from the above query execution.

Check if the number of rows is equal to 1. This is because there will be and should be only one user per login. If this condition is satisfied (true) then the next line is executed else it will return a ‘false’ to the Jquery script (we have not discussed about it till now. But will later…)

Assigning retrieved value from database to session for future use

login_success.php

<?php
// Check if session is not registered, redirect back to main page.
// Put this code in first line of web page.
session_start();
if(!session_is_registered(username)){
header(“location:index.php”);
}
?>

<html>
<body>
Login Successful
</body>
</html>

Logout.php

<?php
session_start();
session_destroy();
?>

Proceeding to our next important file, ‘login.js‘ that will contain

$(document).ready(function(){
$(“#add_err”).css(‘display’, ‘none’, ‘important’);
$(“#login”).click(function(){
username=$(“#name”).val();
password=$(“#word”).val();
$.ajax({
type: “POST”,
url: “checklogin.php”,
data: “name=”+username+”&pwd=”+password,
success: function(html){
if(html==’true’) {
//$(“#add_err”).html(“right username or password”);
window.location=”login_success.php”;
}
else {
$(“#add_err”).css(‘display’, ‘inline’, ‘important’);
$(“#add_err”).html(“<img src=’images/alert.png’ />Wrong username or password”);
}
},
beforeSend:function()
{
$(“#add_err”).css(‘display’, ‘inline’, ‘important’);
$(“#add_err”).html(“<img src=’images/ajax-loader.gif’ /> Loading…”)
}
});
return false;
});
});

We are writing the above Jquery code goes in to ‘login.js’ file and the execution is started on document load (i hope you know the reason) but triggered when the ‘Submit’ button is clicked. In the further steps, the values from the input boxes are assigned to its variable and then call ajax for defining the form methods, the processing file URL (in this case, ‘login.php’ placed in the same directory) and finally, passing those assigned variable.

Now, handling the success or error feedback from ‘login.php’ file. On successful execution, we are redirecting the window to ‘dashboard.php’ and if the execution fails, we display an error message. But even before this success and error message handling, we display the ‘loading’ message in the same div with a simple loading gif image.

Note : Also include this link <script src=”http://code.jquery.com/jquery-1.10.2.min.js”></script>.

style.css, if you need it

.loginform-in {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #D6E5F5;
border-radius: 3px 3px 3px 3px;
height: 345px;
margin: auto;
padding: 0;
width: 460px;
}

.loginform-in fieldset {
border-bottom: 1px solid #EFEFEF;
margin: 20px auto;
padding: 0 0 10px;
width: 87%;
}

.loginbutton {
background: -moz-linear-gradient(center top , #F1F1F1, #E0E0E0) repeat scroll 0 0 transparent;
border: 1px solid #A7A7A7;
border-radius: 3px 3px 3px 3px;
color: #444444;
cursor: pointer;
font-family: “Helvetica Neue”;
font-size: 13px;
font-weight: normal;
height: 29px;
letter-spacing: 1px;
width: 92px;
}

.loginform-in fieldset label {
color: #7D7D7D;
float: left;
font-family: “Helvetica Neue”;
font-size: 14px;
font-weight: bold;
padding: 8px 0 0;
width: 140px;
}

.loginform-in fieldset input[type=”text”], input[type=”password”], fieldset select {
border: 1px solid #CBC7C5;
border-radius: 3px 3px 3px 3px;
float: left;
height: 33px;
padding: 1px 1px 1px 3px;
width: 250px;
}

This AJAX login form with Jquery and PHP is very basic but serves the purpose for small PHP applications. Since its an working example from a micro PHP application. You can even make this form more interesting by simply adding CSS and transition.
I prefer the ‘login.js’ to be added before the closing body tag but not the ‘jquery.js’.

I hope that this tutorial will be useful to you. If you have any doubt, do post them on the comment section.

And as usual, Thanks for reading,
Keep sharing.