• Home
• About Me
• Advertise
• Blogroll
• Contact Me

Ajax login validation system in PHP using jQuery’s animation

Posted on April 24, 2008 
Filed Under ajax, jquery, php, tutorial

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.

View Demo

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....').fadeIn(1000);
	//check the username exists or not from ajax
	$.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
        {
	  if(data=='yes') //if correct login detail
	  {
		$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
		{
 		  //add message and change the class of the box and start fading
		  $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,
                  function()
		  {
  	  	     //redirect to secure page
		     document.location='secure.php';
		  });
		});
	  }
	  else
	  {
	  	$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
		{
		  //add message and change the class of the box and start fading
		  $(this).html('Your login detail sucks...').addClass('messageboxerror').fadeTo(900,1);
		});
          }
       });
       return false;//not to post the  form physically
});

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. But in above code, where the user is validated, he’ll be logged into the “secure.php” using “document.location” in JavaScript.

$("#password").blur(function()
{
	$("#login_form").trigger('submit');
});

Well, as you can see above javaScript’s code, when focus is moved away from the password it also call the for sumit action. Basically whenever you hit tab button in password field, it starts validating the user detail using ajax.

PHP Code for Ajax Login validation system

First of all lets’s look at the code of the “ajax_login.php”.

//get the posted values
$user_name=htmlspecialchars($_POST['user_name'],ENT_QUOTES);
$pass=md5($_POST['password']); 

//now validating the username and password
$sql=”SELECT user_name, password FROM tbl_user WHERE user_name=’”.$user_name.”‘”;
$result=mysql_query($sql);
$row=mysql_fetch_array($result); 

//if username exists
if(mysql_num_rows($result)>0)
{
	//compare the password
	if(strcmp($row['password'],$pass)==0)
	{
		echo “yes”;
		//now set the session from here if needed
		$_SESSION['u_name']=$user_name;
	}
	else
		echo “no”;
}
else
	echo “no”; //Invalid Login

As you can see above, the user login detial is validated from the database. If the user login detail doesn’t exists, 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.

Finally, let’s look at the code of secure.php

if(empty($_SESSION['u_name']))
  header(”Location:index.html”);
//if logout then destroy the session and redirect the user
if(isset($_GET['logout']))
{
  session_destroy();
  header(”Location:index.html”);
}
echo ” <a href=’secure.php?logout’><b>Logout<b></a> “;
echo ” <div align=’center’>You Are inside secured Page</a> “;

As you can see above the code of “secure.php” is simpleforward. If the user is not authenticated by session then he’ll be redirected to “index.html”. And there is link for “logout” in this page form where user can destroy the seession.

Download Full Source Code

Implementation Guide:

To implement this code, dump the tbl_user “table” available in the zip file to your database and configure the database connection in “ajax_login.php”.

Popularity: 22% [?]

If you like this post then please subscribe to my full RSS feed . You can also subscribe by email and have new posts sent directly to your inbox.

Related Posts

» Jquery : Benefits, Examples and Free Ebook
» How to call php from ajax in every second using Jquery
» Image hover effect using jQuery
» Password protect a page using HTTP Authentication in PHP

Comments

• Rss and Readers

   Subscribe in a reader

  Subscribe Feed by Email:

  

• Recent Posts

  • Some unusual comparison operation in PHP
  • Create mobile sites in a fly using mobilemo
  • 8 useful server variables available in PHP
  • Date format validation in PHP
  • All kind of vehicle services for you
  • Animated content navigation effect using jquery
  • Understanding and Validating Integers in PHP
  • How to redirect browser to https (ssl) in php
  • Upgrade your wordpress - easily and quickly
• 
  

• Most Popular Posts

  • Hide .php extension with url rewriting using .htaccess
  • Getting real IP address in PHP
  • 5 useful url rewriting examples using .htaccess
  • Change dropdown list (options) values from database with ajax and php
  • Slider Using PHP, Ajax And Javascript
  • Uploading large(big) files in PHP using .htaccess
  • A simple Class to export data to excel using PHP

• Donate

  If you really find this blog useful for yourself then you can contribute a small amount($2) by clicking on Paypal donate button below and help me monetize this blog and keep it up and running.
  
  

  

• Today's Blog

  
  

• Affiliates

  

• PHP search

• Sponsors

  

• Categories

  • ajax
  • blogs
  • coding technique
  • css
  • Date-Time manipulation
  • how-to
  • htaccess
  • javascript
  • jquery
  • Others
  • php
  • php attack
  • seo
  • tips and technique
  • tutorial
  • website review

• Archives

  • May 2008
  • April 2008
  • March 2008
  • February 2008
  • January 2008
  • December 2007

• Calendar

  April 2008

  M	T	W	T	F	S	S
  « Mar				May »
  	1	2	3	4	5	6
  7	8	9	10	11	12	13
  14	15	16	17	18	19	20
  21	22	23	24	25	26	27
  28	29	30