PHP Ajax Login Validation Tutorial

This post explains you about php login with ajax.
In this example, first of all we will validate the user details using ajax library and showing the appropriate result. If user enter correct detail (ie:- admin/admin in this example)we will be redirected to the “index.php” and if you will try to directly access “index.php” means without entering the user details you will redirected to “login.php”.

Download Link   Demo Link

Sample database design for table name contact.
This table contains id (primary key), name and age.

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `uname` varchar(50) NOT NULL
  `password` varchar(50) NOT NULL,
   PRIMARY KEY (`id`)
)

dbConnect.inc.php
Contains database connectivity code

$mysql_db_hostname = "Host name";
$mysql_db_user = "UserName";
$mysql_db_password = "Password";
$mysql_db_database = "Database Name";

$con = mysql_connect($mysql_db_hostname, $mysql_db_user,
       $mysql_db_password or die("Could not connect database");
//Create a new connection
mysql_select_db($mysql_db_database, $con) or
                 die("Could not select database");
// select database

login.php
Contains login form and ajax code.

<script type="text/javascript">
    function validLogin(){
       var uname=$('#uname').val();
       var password=$('#password').val();
       var dataString = 'uname='+ uname + '&password='+ password;
       $("#flash").show();
       $("#flash").fadeIn(400).html('<img src="image/loading.gif" />');
       $.ajax({
             type: "POST",
             url: "processed.php",
             data: dataString,
             cache: false,
             success: function(result){
             var result=trim(result);
             $("#flash").hide();
             if(result=='correct'){
                 window.location='index.php'; 

 //window.location='index.php';
      //$("#login").hide();
      //$('#login').modal('toggle');
      location.reload();

 }else{
                  $("#errorMessage").html(result);
             }
        }
  });
}

function trim(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;
}
</script>

processed.php
Contains login logic  and validation code.

<?php
session_start();
include_once('inc/dbConnect.inc.php');
$message=array();
if(isset($_POST['uname']) && !empty($_POST['uname'])){
     $uname=mysql_real_escape_string($_POST['uname']);
}else{ 
     $message[]='Please enter username';
}

if(isset($_POST['password']) && !empty($_POST['password'])){
     $password=mysql_real_escape_string($_POST['password']);
}else{
     $message[]='Please enter password';
}

$countError=count($message);
if($countError > 0){
     for($i=0;$i<$countError;$i++){
         echo ucwords($message[$i]).'<br/><br/>';
     }
}else{
     $query="select * from user where uname='$uname' and
             password='$password'";
     $res=mysql_query($query);
     $checkUser=mysql_num_rows($res);
     if($checkUser > 0){
         $_SESSION['LOGIN_STATUS']=true;
         $_SESSION['UNAME']=$uname;
         echo 'correct';
    }else{
         echo ucwords('please enter correct user details');
    }
}
?>

index.php
Contains welcome message  and check if session is not set than redirect to login.php

<?php
 session_start();

 if(!isset($_SESSION['LOGIN_STATUS'])){
      header('location:login.php');
 }
?>

logout.php
Contains session destroy code.

<?php
 session_start();
 session_destroy();
 header('location:login.php');
?>