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>
login-check.php
This login check file check that user and password are valid entered in databases. After checking this file sends the login.php file "yes" or "no".
<?php
include("dbconfig.php");
$user_name=$_POST['user_name'];
$pass=$_POST['password'] ;
$select=mysql_query("select * from userinfo where username='$user_name' AND password='$pass'");
$found=mysql_num_rows($select);
if($found>0){
$expire=time()+60*60*24*30;
setcookie("cookiename", $user_name, $expire);
echo "yes";
}
else{
echo "no";
}
?>
logout.php
After loging the cookie file is created and see that you are logged in. Now if you want to logged out destroy the cookie.
<!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>Simple ajax login using jquery</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<div id="header">
<h1>A Simple Project of Login And Register</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="content">
<?php
if(setcookie("cookiename","", time()-3600))
echo "You are logged out.";
else echo "No body are logeed";
?>
</div>
<div id="footer">
Copyright @ taslim. Anybody can use it for personal and commercial.
</div>
</body>
</html>
dbconfig.php
It is the databaase configuration file. If you want to create your own ajax login system you need to configure this page for your datase.
<?php
$server_name="";
$server_username="";
$server_password="";
$server_database="";
$connect=mysql_connect($server_name,$server_username,$server_password) or die ("Server error : Server information is wrong.");
$data=mysql_select_db($server_database) or die ("Database error : Database not found in your server.");
?>
sql file
-- -- Table structure for table `userinfo` -- CREATE TABLE IF NOT EXISTS `userinfo` ( `id` int(100) NOT NULL AUTO_INCREMENT, `state` varchar(20) NOT NULL, `country` varchar(10) NOT NULL, `email` varchar(20) NOT NULL, `username` varchar(12) NOT NULL, `password` varchar(12) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; INSERT INTO `userinfo` (`id`, `state`, `country`, `email`, `username`, `password`) VALUES (1, 'bangladesh', 'dhaka', 'mdtaslim1@yahoo.com', 'taslim', '1234'), (2, 'bangladesh', 'dhaka', 'mdtaslim1@yahoo.com', 'taslimone', '1234');
This comment has been removed by the author.
ReplyDeletefree wp plugin ajax login/registration bar is available download here.
ReplyDelete