This post show how to create ajax login system using mysql Jquery and PHP. In jquery and ajax login system it looking very good and also easily navigate. But one thing we must remember that if anybody want to work jquery or ajax validation, the same works must be done using php validation. Because some user browsers javascript is not enable. Here we show the basic ajax login system.
Our final output screenshot
Ajax login system looking very good and easily navigate. But it is not a traft thing. We can do this easily. Here is the sample of the projects.
File structure of ajax login system
In this simple and easy project, we use jquery, php and mysql. So we need this types of files. Se the list of files of this project.
ajax login/ css/ style.css admin/ dbconfig.php img/ ajax-load.gif login.php logout.php login-check.php and finaly a sql file
style.css
This css file decorate our projctes.
body{
width:600px;
margin:0 auto;
}
#header{
width:96%
padding:2%;
}
#navbar{
background:#f1f1f1;
padding:2%;
width:96%;
color:darkgray;
margin-top:60px;
}
#navbar a{
padding:5px 10px;
text-decoration:none;
color:green;
}
#content{
padding:2%;
width:96%;
margin:10px 0px;
background:#f1f1f1;
color:dimgray;
}
.clear{
clear:both;
}
#footer{
background:#f6f6f6;
padding:2%;
width:96%;
color:darkgray;
margin-top:60px;
}
caption{
background:green;
color:white;
padding:5px;
}
input[type="text"],input[type="password"]{
padding:10px;
border:1px solid darkgray;
width:200px;
}
input[type="submit"]{
padding:10px 30px;
border:1px solid darkgray;
background:#f1f1f1;
cursor:pointer;
}
.login{
width:60%;
margin:0 auto;
}
.login td{
padding:5px;
font-size:15px;
color:dimgray;
}
#report{
width:96%;
padding:2%;
background:white;
margin:10px 0px;
position:relative;
}
.loader{
text-align:center;
}
.error{
color:red;
}
.log{
color:green;
}
login.php
This login file create the basic form of login system and jquery animation. Here we post the login form data using jquery. So that no refresshing required for this page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
<head>
<title>Jquery login form using ajax and php</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#loginForm").submit(function(){
$("#report").removeClass().addClass('loader').html('<img src="ajax-load.gif">').fadeIn(1000);
$.post("login-check.php",{ user_name:$('#username').val(),password:$('#password').val()},function(data){
if(data=='yes'){
$("#report").fadeTo(200,1,function(){
$(this).html('Logging in.....').addClass('log').fadeTo(900,1,function(){
document.location='login.php';
});
});
}
else {
$("#report").fadeTo(200,1,function(){
$(this).html('Username or password error.').addClass('error').fadeTo(900,1);
});
}
});
return false;
});
$("#password").blur(function(){
$("#login_form").trigger('submit');
});
});
</script>
</head>
<body>
<div id="header">
<h1>A simple jquery ajax login form</h1>
</div>
<div id="navbar">
<a href="index.php">Home</a>
<a href="register.php">Register</a>
<a href="data.php">Data</a>
<?php
if (isset($_COOKIE["cookiename"])){
echo "User : " . $_COOKIE["cookiename"] . "";
echo " <a href='logout.php'>logout</a>";}
else{
echo "<a href='login.php'>Login</a>";
echo " User : Guest!<br />";}
?>
</div>
<div id="report"></div>
<div id="content">
<form action="" method="post" id="loginForm">
<table class="login" cellpadding="0" cellspacing="0">
<caption>Login</caption>
<tr>
<td>Username</td>
<td><input type="text" name="username" id="username" maxlength="12" value=""/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" maxlength="12" value=""/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="login" id="login" value="Login"/></td>
</tr>
<tr>
<td colspan="2">If you are a new user, <a href="">click here </a></td>
</tr>
</table>
</form>
</div>
<div id="footer">
Copyright @ taslim. Anybody can use it for personal and commercial.
</div>