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"> <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
Live demo link is broken...
ReplyDeleteit is working fine check once's
ReplyDeleteLive demo link is broken, not working for me...
ReplyDeletethe link is broken Mohamm
ReplyDeletedemo link is not working
ReplyDeleteHow can we change username after login via ajax without logout or refresh
ReplyDeleteMy email Id
ReplyDeletevishwaskale51@gmail.com
Poor logic but good ajax demonstratiom . :)
ReplyDeleteit says "Checking your details please be patient..." why its not working .....
ReplyDelete