Ajax Login in PHP

Hi, today i am going to show a awesome Ajax login system using php and Mysql and jquery, i have developed this login form with  client slide and server side validations, lets see how we do the php login system

HTML

take a form elements and arrange it a proper structure, here i have taken two div's to display loader image and error messages.

<div class="message">
<div class="success"></div>
    <div class="error"></div>
    <div id="loader"></div>
</div>

<div class="lessoncup">
  <div id="formbox">

    <ul>
      <li> <span> Email:</span><br/>
        <input name="email" type="text" id="email" class="forms1" placeholder="Email">
      </li>
      <li>Password<span>:</span><br/>
        <input name="pass" type="password" id="pass" class="forms1" placeholder="Password">
      </li>
      
      <li style="margin-top:5px;">
        <input name="send" type="button" value="Sign In" class="send">
      </li>
    </ul>
  </div>
</div>

CSS

write styles for form elements, and error and success div's and put in display:none,

<style>

<style>

body{ font-family:Verdana, Geneva, sans-serif; color:#fff; font-size:11px; background-color:#fff; margin:0; padding:0;}

.lessoncup{width:400px; height:200px; background-color:#593472; border:solid #609 5px;-webkit-box-shadow: 0 2px 5px #666;
box-shadow: 0 2px 5px #666; padding:10px; margin:0 auto;  font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-top:10px;}

.message{width:428px; height:30px; padding:10px; margin:0 auto;margin-top:100px;}

#loader{font-size:12px; padding:15px; padding-left:0; color:#06F;display:none;}

.error{padding:15px;height:14px;display:none; color:#fff; background-color:#63C;font-size:12px; border-radius:5px;}

ul{ margin:0; padding:0; list-style:none;}

li{ padding:10px; padding-bottom:0; font-size:12px; color:#fff;}

.send{ background-color:#63C; border:none; border-radius:5px; padding:10px; cursor:pointer; color:#FFF; outline:none;}

.forms1{color:#09F;padding:10px; width:200px; border:solid #63C 1px; font-size:14px; resize:none; margin:5px 0 5px 0; outline:none;border-radius:5px; background-color:#4D2471;}

#formbox{width:240px; height:auto;margin:0 auto;}


.slide{height:150px;background-color:#060;transition:height 0.80s;-webkit-transition:height 0.80s easeIn;}


.slide
{
height:150px;
background-color:#060;
transition:height 0.80s;
-webkit-transition:height 0.80s easeIn;
}

</style>

JAVASCRIPT

include the UI library along with common jquery plugin, i have used UI library to animate the error div while displaying the message, after filling the form fields , i have used ajax to check the user data from database without refresh the page, while ajax request the signin.php file, if the email and password is not matched will show the error message, if every thing goose fine will show the success message with logged user name.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<script>

$(document).ready(function(){
 
 $('.send').click(function(){

  var email=$('#email').val();
  var pass=$('#pass').val();
  
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  
  if(email==""){
   
   $('.error').effect("bounce",500).fadeIn(400).html('Enter email address');
   
  }else if(!emailReg.test(email)){
   
   $('.error').effect("bounce",500).fadeIn(400).html('Enter Valid email address');
   
  }else if(pass==""){
   
   $('.error').effect("bounce",500).fadeIn(400).html('Enter your password');
   
  }else{
   
   
   $('.error').hide();
   var userdata= "email="+email+"&pass="+pass;
   
   
   $("#loader").show();
   $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">Checking your details please be patient</span>');
   
   $.ajax({
    
    type:"post",
    data:userdata,
    url:"signin.php",
    cache:false,
    success:function(msg){

     $("#loader").hide();
     $('.error').fadeIn(200).html(msg);
     
    }
    
   });
   
   
   
  }
 });
 
});

</script>

PHP

connect this file to database and write the query to check the email address, if the given email address is not matched will show the error message, in second step will check the password, if the password is not matched, will show the error message, if the both email and password are matched will retrieve the username form matched row form users table and display the success message

<?php
extract($_REQUEST);
include("db.php");

$sql=mysql_query("select * from users where email='$email'");
if($row=mysql_num_rows($sql)==0){
 echo "the email you entered it is not matching";
}else{
 
$sql=mysql_query("select * from users where pass='$pass'");
if($row=mysql_num_rows($sql)==0){
 echo "the password you entered it is not matching";

}else{
 
$sql=mysql_query("select * from users where email='$email' and pass='$pass'");
$row=mysql_fetch_array($sql);

$user=$row['username'];

echo "Welcome Mr <b>".$user."</b> you are signed in successfully.";

}
 
}

?>

Live Demo   Download Script