Ajax login validation system in PHP using jQuery

Last time, I ve showed you how to check user availability in Ajax using jQuery s fading effect. But I ve just shown the example without connecting the database and some people have faced problem with database connecting solution of that problem.In this post, I ll show you how to use Ajax login system in php using jQuery and some animation as well.

In this example, first of all we¶ll validate the user login detail from ajax showing the messages with some animation. If authenticated, the user will be redirected to the secure page ³secure.php´. If you¶ll try to directly access ³secure.php´, you can¶t do that. Now let¶s look at the code how to do this, HTML Code
< form method="post" action="" id="login_form" /> < input name="username" type="text" id="username" value="" maxlength="20" /> < input name="password" type="password" id="password" value="" maxlength="20" /> < input name="Submit" type="submit" id="submit" value="Login" /> < /form >

As you can see in html code, we¶ve created the form with id ³login_form´. And furthermore, the CSS code is same as the one available in the pervious post of checking user availability in ajax and php.
JavaScript Code for Ajax Login validation system in PHP

First of all we need to use the jQuery library in our code,
< script src="jquery.js" type="text/javascript" language="javascript"></script >

Now let¶s look at the code in javaScript to call ajax and show the animated message with fading effects.
$("#login_form").submit(function() { //remove all the class add the messagebox classes and start fading $("#msgbox").removeClass().addClass('messagebox').text('Validating....').fa deIn(1000); //check the username exists or not from ajax $.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.rand

.0. //get the posted values $user_name=htmlspecialchars($_POST['user_name'].1.fadeTo(200.1. PHP Code for Ajax Login validation system First of all lets¶s look at the code of the ³ajax_login.addClass('messageboxok').location´ in JavaScript.om() } . $pass=md5($_POST['password']).html('Logging in.0. it starts validating the user detail using ajax. As you can see above this code is preety much similar to the previous post of checking username availability in ajax and php and you can see the explanation of the above code from that post..trigger('submit').php'. $("#password"). }).fadeTo(200. return false.1. But in above code.addClass('messageboxerror'). } else { $("#msgbox").'). }).1).location='secure.. when focus is moved away from the password it also call the for sumit action..blur(function() { $("#login_form").//not to post the form physically }). //now validating the username and password $sql="SELECT user_name.fadeTo(900. function() { //redirect to secure page document.php´. he¶ll be logged into the ³secure..php´ using ³document.function() //start fading the messagebox { //add message and change the class of the box and start fading $(this).function() //start fading the messagebox { //add message and change the class of the box and start fading $(this). Basically whenever you hit tab button in password field.fadeTo(900. password FROM tbl_user WHERE . as you can see above javaScript s code. where the user is validated. }).. } }).ENT_QUOTES).function(data) { if(data=='yes') //if correct login detail { $("#msgbox"). }).html('Your login detail sucks. Well.').

php?logout'><b>Logout<b></a> ". the user login detial is validated from the database. //if logout then destroy the session and redirect the user if(isset($_GET['logout'])) { session_destroy(). it just returns the ³no´ values and if the user login detial does exists the it just return ³yes´ values with setting username in session variable. . header("Location:index.html"). } echo " <a href='secure. //now set the session from here if needed $_SESSION['u_name']=$user_name."'". Finally. $row=mysql_fetch_array($result).$user_name. As you can see above the code of secure. echo " <div align='center'>You Are inside secured Page</a> ".user_name='". //if username exists if(mysql_num_rows($result)>0) { //compare the password if(strcmp($row['password']. If the user login detail doesn¶t exists.php if(empty($_SESSION['u_name'])) header("Location:index.php is simpleforward. } else echo "no". And there is link for logout in this page form where user can destroy the seession. $result=mysql_query($sql).$pass)==0) { echo "yes". If the user is not authenticated by session then he ll be redirected to index.html .html"). let¶s look at the code of secure. //Invalid Login As you can see above. } else echo "no".