Simple Ajax Login Tutorial

Ajax (an acronym for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page.
in this post I will explain (line by line code commentary) how to create a simple ajax login page using JQuery and PHP
the Form (ajax submit) index.php
<form method="POST"><!-- We can use GET also as submitting method--> <label>Username</label> <input id="username" name="username" type="text"><!-- the username input --> <label>Password</label> <input id="password" name="pasword" type="password"><!-- the password input --> <input id="submit_login" name="submit" value="Login" type="submit"><!-- submit button --> <span class="errormess"></span><!-- the ajax result wrapper --> </form>
the JQuery Code (ajax processor) functions.js
$(function() { $("#submit_login").click(function() { // if submit button is clicked var username = $("input#username").val(); // define username variable if (username == "") { // if username variable is empty $('.errormess').html('Please Insert Your Username'); // printing error message return false; // stop the script } var password = $("input#password").val(); // define password variable if (password == "") { // if password variable is empty $('.errormess').html('Please Insert Your Password'); // printing error message return false; // stop the script } $.ajax({ // JQuery ajax function type: "POST", // Submitting Method url: 'login.php', // PHP processor data: 'username='+ username + '&password=' + password, // the data that will be sent to php processor dataType: "html", // type of returned data success: function(data) { // if ajax function results success if (data == 0) { // if the returned data equal 0 $('.errormess').html('Wrong Login Data'); // print error message } else { // if the reurned data not equal 0 $('.errormess').html('<b style="color: green;">you are logged. wait for redirection</b>');// print success message document.location.href = 'private.php'; // redirect to the private area } } }); return false; }); });
the PHP Code (php processor) login.php
session_start(); // define a username and password for test you can change this to a query from database or anything else that fetch a username and password $username = 'demouser'; $password = 'demopass'; if (isset($_POST)) { // if ajax request submitted $post_username = $_POST['username'] ; // the ajax post username $post_password = $_POST['password'] ; // the ajax post password if ($username == $post_username && $password == $post_password) { // if the username and password are right $_SESSION['username'] = $post_username; // define a session variable echo $post_username; // return a value for the ajax query } }
the Private Area (to check if the code is work or not) private.php
session_start(); if (!isset($_SESSION['username'] )) { // if the session variable is not exists echo 'You are not logged. <a href="index.php">login</a>'; // print error message } else { // if the session variable is exists echo 'hello <b>'.$_SESSION['username'] .'</b> you are logged in. <a href="logout.php">logout</a>'; // print welcome message }