login form

In this Video tutorial, we build a login form which checks username and password and displays appropriate message on the same page, without refreshing the page.

Here we get the username and password from the user and check it against our database table records.

If the username, password combination is present, then the login success message is displayed, else login failed message is shown to the user.

Related Read: (for Database info and other related code)
Registration Form Using jQuery + PHP + AJAX (PART 1)
Registration Form Validation: PHP + jQuery + AJAX (PART 2)

HTML File: Login form
index.html

<html>
<head><title>Login Form: jQuery + PHP + AJAX</title></head>
<body>
 
<form id="myForm" action="login.php" method="POST">
username: <input type="text" name="username" id="username"/><br />
password: <input type="password" name="password" id="password"/><br />
<button id="submit">Login</button>
</form>
 
<div id="ack"></div>
 
<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>
</body>
</html>

Here we have a form with an id myForm.
It has two input fields.
One button. And a div with an id of ack, where we display the messages to the user.

For database info, please have a glance at:
Registration Form Using jQuery + PHP + AJAX (PART 1)

PHP File: Processing the username, password
login.php

< ?php
        include_once('db.php');
 
$username = mysql_real_escape_string( $_POST["username"] );
$password = mysql_real_escape_string( md5($_POST["password"]) );
 
if( empty($username) || empty($password) )
echo "Username and Password Mandatory - from PHP";
else
{
$sql = "SELECT count(*) FROM users WHERE(
        username='$username' 
AND 
password='$password')";
 
 
    $res = mysql_query($sql);
$row = mysql_fetch_array($res);
 
if( $row[0] > 0 )
 echo "Login Successful";
else
 echo "Failed To Login";
   }
?>

We protect our application against sql injection by wrapping the user entered data with mysql_real_escape_string() method.
Next we check whether the username and password is not empty: server side validation.
If it’s not empty:
We check if the username and password combination entered by the user is actually present inside our database.
Also note that, we md5() encrypt the user entered password, inorder to match with the md5() encrypted data present in our database: encrypted while registering.
If the username, password combination is present, then we display “Login Successful” else “Failed To Login”.

These messages will be caught by the call back function of jQuery and is displayed to the user.

jQuery File: With jQuery AJAX Mehod, $.post
my_script.js

$("button#submit").click( function() {
 
  if( $("#username").val() == "" || $("#password").val() == "" )
    $("div#ack").html("Please enter both username and password");
  else
    $.post( $("#myForm").attr("action"),
        $("#myForm :input").serializeArray(),
function(data) {
  $("div#ack").html(data);
});
 
$("#myForm").submit( function() {
   return false;
});
 
});

Here we validate the data at client end by checking if the user has entered both username and the password, if entered, we post the user entered data to login.php file after serializing it with jQuery serializeArray() method.

Once the login.php processes the data, the call back function present in our $.post() method accepts the data from login.php and displays it to the user.
Also we disable the form redirection by returning false, once the user clicks on the submit button of the form.

Login Form: jQuery + PHP + AJAX

[youtube https://www.youtube.com/watch?v=lUd0e9Uk6x0]

YouTube Link: https://www.youtube.com/watch?v=lUd0e9Uk6x0 [Watch the Video In Full Screen.]

We have just illustrated the way by which you can ajaxify the login form.
Using this method, you could do more. Like, redirect or include a page after the login is successful etc..

This video tutorial is a basic building block to all those amazing jQuery AJAX login forms.