Login System Using PHP, Mysql ,Ajax And Twitter Bootstrap

Today we are going to create a Login System using PHP, Mysql('As Database'), Ajax(' For scriptin') And Twitter Bootstrap('For Designing'). Although we can create an simple log-in system but the major disadvantage of this type of log-in system is that your page is refreshed every time when you press submit or Log-in button this is such a waist of time and bandwidth. So the better way is to create an login for with Ajax so if your username and password is correct only then you page will be refreshed and you will be sent to the next success page So lets We Start....

DOWNLOAD

An twitter Bootstrap Is being Used for the Designing. So making an login form is easy using Bootstrap. Read Full Artical Here

Creating An Form 

<form class="form-horizontal" method="post" action="" id="login_form">
					  <div class="control-group">
						<label class="control-label" for="username">Username</label>
						<div class="controls">
						  <input type="text" id="username" placeholder="Username">
						</div>
					  </div>
					  <div class="control-group">
						<label class="control-label" for="password">Password</label>
						<div class="controls">
						  <input type="password" id="password" placeholder="Password">
						</div>
					  </div>
					  <div class="control-group">
						<div class="controls">
						  <label class="checkbox">
							<input type="checkbox"> Remember me
						  </label>
						  <input name="Submit" type="submit" id="submit" value="Login" class="btn btn-success"/>
						  <input type="reset" name="Reset" value="Reset" class="btn"/>
						</div>
					  </div>
					</form

Now We have created A Login Form Now we can write the Ajax Script That will Pick the Data From The Page And Then It will Pass That Data To our Ajax-login Page That Means To the Page where we are going to check The Login information Provided by the Person.

<script type="text/javascript">
$(document).ready(function()
{
	$("#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='logsuccess.html';
			  });
			  
			});
		  }
		  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
	});
	//now call the ajax also focus move from 
	$("#password").blur(function()
	{
		$("#login_form").trigger('submit');
	});
});
</script>>

So after That Script our Infromation Will be send to the ajax_login.php  . so we have to create an Ajax_login Page that will receive our values which are being sent by ajax and then after processing will send the result to our page.

ajax_login.php page

<?php session_start();
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use

//Connect to database from here
$link = mysql_connect('localhost', 'root', ''); 
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
//select the database | Change the name of database from here
mysql_select_db('testing'); 

//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";
		 //Regenerate session ID to prevent session fixation attacks
    session_regenerate_id();


		//now set the session from here if needed
		$_SESSION['u_name']=$user_name; 
		$member=mysql_fetch_assoc($result);
		$_SESSION['u_id']=$member['id'];
		$name_show=$member['first_name'].' '.$member['last_name'];
		$_SESSION['name']=$name_show;
			//Write session to disc
			session_write_close();

		}
	else
		echo "no"; 
}
else
	echo "no"; //Invalid Login
?>

So now if The user is authenticated then in a result there will be a success message shown on the page. And user will be redirected to a success page and Success message will be shown to the user. Hope you like this if any query then you can leave a comment...
Thank You!!!!