Ajax Login in PHP | Lessoncup Programming Blog

Thursday, 7 November 2013

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

9 comments :

  1. Live demo link is broken, not working for me...

    ReplyDelete
  2. How can we change username after login via ajax without logout or refresh

    ReplyDelete
  3. My email Id
    vishwaskale51@gmail.com

    ReplyDelete
  4. Poor logic but good ajax demonstratiom . :)

    ReplyDelete
  5. it says "Checking your details please be patient..." why its not working .....

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons