In this tutorial we are going to create the front-end of an AJAX login page, with the help of jQuery UI. This is similar to the loading screen of Gmail, except all the action happens in the same page!
You may also like:
Introduction
When you log in to web-applications, most of them checks not only your username and password but also things like session ID, whether you are already logged in. It then checks whether the username and password you supplied match with the ones in the database. Finally, it signs you in by setting cookies or session variables. All this can be executed in a single PHP (or some other) script or multiple scripts. That means a lot of work goes on in the background. Our ajax login page will show a progressbar as things happen in the background.
Getting Started
First we download the
jQuery UI library available at the
download page. There are many themes available; just download any one of them. I have made the page with the Lightness theme.
Once you have downloaded it, unpack the archive. Your folder structure should look like this:
Create the Layout
Create a file called login.php and put the following code in it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Login</title>
<style type='text/css'>
body {
font-size: 14px;
line-height:1.3em;
text-align:center;
}
#wrapper {
width:480px;
margin:0 auto;
text-align:left;
border:1px solid #F6AD36;
padding:6px;
}
fieldset {
width:397px;
margin:0 auto;
padding:22px 0 0;
border:none;
background-color:#ffffff;
}
label {
width:150px;
display:block;
float:left;
text-align:right;
padding-top:2px;
margin-right:10px;
}
input {
float:left;
width:200px;
margin-bottom:13px;
border:1px solid #F6AD36;
}
</style>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
</head>
<body>
<div id='wrapper'>
<div id='progress'></div>
<div id='credentials'>
<h2>Log in</h2>
<fieldset>
<label>Username</label><input type="text">
<label>Password</label><input type="password">
</fieldset>
<div style='text-align:center;'><button id='signin'>Sign in</button></div>
</div>
</div>
</body>
</html>
Here we created a very basic layout. We created a div with id #wrapper. To center this div, we added text-align:center to body and then text-align:left to #wrapper. (Find out more about this technique:
How to Center Divs in Internet Explorer 6.)
Within the wrapper, we created a div with id progress. This is going to be our progressbar.
Another div with id 'credentials' contains the login form. We have added some css for styling the form. We also have a button with id 'signin'. Clicking on this button, user should be able to login.
Notice that we have linked to jQuery and jQueryUI javascript libraries. So we are ready to take it further.
Thoughts about the Back-end
Our login process will check 3 things:
— whether the user is logged in or not
— check the username and password
— finally, sign in
To accomplish this, we create three php files —
checkLogged.php,
checkPassword,
signIn.php These three files, as the names suggest, does the above three things. These files should check the conditions and return
true or
false, and accordingly the ajax requests should be made. But in order to make this tutorial simple and not delving into back-end coding, we put
nothing in these files. Only ajax calls will be made to these files.
Magic with jQuery
Now, within the
<head> tag, put the following code.
<script type='text/javascript'>
$(function(){
$("#progress").progressbar();
$("#progress").progressbar('disable');
$("#signin").click( function() {
$("#progress").progressbar('enable');
$("#credentials").fadeOut("fast");
$("#wrapper").append("<div id='msg'></div>");
ajax_signin();
});
});
</script>
Here, we set the div with id 'progress' as the progressbar and then disable this. It is disabled until the user clicks the sign-in button. When the user clicks on the sign-in button, we enable the progressbar, fade out the login form. Next, we append a div (with id 'msg') — this div will show up what's happening in the background. Then, we call function
ajax_signin which we are going to create in the next step.
Make Ajax Calls
Now, we create the
ajax_signin function. Put the following code within the
<script> tag.
function ajax_signin(){
$.ajax({
type: "POST",
url: "checkLogged.php",
success: function(msg){
$("#progress").progressbar('option', 'value', $("#progress").progressbar('option', 'value') + 33);
$("#msg").html("checking whether logged in...");
checkPass();
}
});
}
function checkPass(){
$.ajax({
type: "POST",
url: "checkPassword.php",
success: function(msg){
$("#msg").html("checking the password...");
$("#progress").progressbar('option', 'value', $("#progress").progressbar('option', 'value') + 33);
signIn();
}
});
}
function signIn(){
$.ajax({
type: "POST",
url: "signIn.php",
success: function(msg){
$("#msg").html("signing in...");
$("#progress").progressbar('option', 'value', $("#progress").progressbar('option', 'value') + 34);
}
});
}
Here, we made three functions. The first function ajax_signin sends call to checkLogged.php to check whether logged in. (Note that we have not sent any data since we are not dealing with back-end.) After sending ajax call to checkLogged.php, it updates the progressbar to 33%. (We set 33% because there will be three things happening in the background — checking password, checking whether logged in and signing in, and 3x33% ~ 100% ) Then we show up a msg (within #msg) as "checking whether logged in..."
After checking whether already logged in, we go further to check the password with
checkPass function. This function does the same job as the earlier one — makes ajax call, updates the progressbar, updates the message and then goes to sign-in the user. The
signIn() function is pretty simple to.
And that's all!
Conclusion
As I said earlier, it deals with the front-end only. You need to hard code the back-end.
Labels: javascript, PHP, Tutorials
icon from the toolbar. Set the parameters as shown below.
