Web2 Developers

Home » Archives for August 2012

Create Login Box Using Ajax Jquery

Wednesday, August 15, 2012 0 comments

php html5 css3 javascript ajax jquery

First we need to create 4 files

index.php

post.php

and make new database

insert this code using phpmyadmin -> sql

Code:

CREATE TABLE `tbl_users` (
  `id` int(4) NOT NULL auto_increment,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;
INSERT INTO `tbl_users` VALUES (1, 'admin', 'pass');

in the index.php we insert this code

Code:

<?SESSION_START();
#########################
#       By DzKabyle       #
#          Email :        #
#    dzkabyle1@gmail.com #
# web2-teach.blogspot.com #
#      © Copyright ©      #
#########################
?>
<title>Login Box</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" >
$(function() {$(".submit").click(function(){var username = $("#user").val();
var password = $("#pass").val();
var dataString = 'username='+ username + '&password=' + password;
if(username=='' || password=='')
{alert('Please Give Valid Details');}else{
$("#Loading").show();
$("#Loading").fadeIn(400).html('<img src="se.gif" />Login...');
$.ajax({type: "POST",url: "post.php",data: dataString,cache: false,success: function(html)
{$("ol#Msg").append(html);$("ol#Msg li:last").fadeIn("slow");$("#Loading").hide();}});}return false;}); });
</script>
<link href="login.css" rel="stylesheet" type="text/css" />
<body>
<div style="padding: 100px 0 0 400px;"><div id="login-box"><br /><ol id="Msg" class="timeline"></ol><div id="Loading"></div>
<?if(!isset($_SESSION['user_name']))
{include("login.html");}else{
echo ' <div id="login-box-name" style="margin-top:70px;"> Welcom '.$_SESSION['user_name'] .'</div>';
unset($_SESSION['user_name']);
}?>

in the post.php we insert

Code:

<?#########################
#       By DzKabyle       #
#          Email :        #
#    dzkabyle1@gmail.com #
# web2-teach.blogspot.com #
#      © Copyright ©      #
#########################
SESSION_START();

$db_host="localhost";
$db_user="Your database user";
$db_pass="Your database Pass";
$db_name="Your database name ";

mysql_connect($db_host,$db_user,$db_pass) or die (mysql_error());
mysql_select_db($db_name)or die (mysql_error());

if($_POST)
{
$username1=htmlspecialchars($_POST['username']);
$password1=htmlspecialchars($_POST['password']);
$sql=mysql_query("select*from tbl_users where username ='$username1' and password ='$password1'") or die (mysql_error());
$fetch=mysql_fetch_array($sql);
$count=mysql_num_rows($sql);
if($count>0){$_SESSION['user_name']=$username1;
echo '<script type="text/javascript" src="jquery.js"></script><script>
$(function() { $("#login_box").hide(); }) </script> <div style="margin-top:70px;"> Welcom '.$username1 .'</div>';}
else {echo ' <div id="login-box-name" style="margin-top:30px;"> Invalid Username Or Password</div>';}}
?>

Now we open login.html files and insert this code

Code:

<table class="login_box" id="login_box" name="login_box" width="324" height="128" border="0">
<form method="post" action="#">
<tr> <td width="19">Username</td> <td width="10">
<input type="text" id="user"/><br /> </tr> <td>Password</td><td><input type="password" id="pass"/>
<br /></td></tr><tr><td></td><td><input type="submit" id="submit" class="submit" name="submit" value="submit" /></td></tr></form></table>

finally we insert this code to the login.css

Code:

/*
#########################
#       By DzKabyle       #
#          Email :        #
#    dzkabyle1@gmail.com #
# web2-teach.blogspot.com #
#      © Copyright ©      #
#########################

*/
#login-box {
   width:300px;
   height: 230px;
   padding: 0px 0px 0px;
   font: 10px;
   background: url("bk.png") no-repeat left top;
}

#login-box-name {
   float: left;
   display:inline;
   width:90px;
   color: #ebebeb;
   text-align: right;
   padding: 10px 110px 0 0;
   margin:0 0 100px 100;
   font-size: 15px;

}
.form-login {
   width: 120px;
   padding: 10px 4px 5px 4px;
   border: 1px solid #0d2c52;
   background-color:white;
   font-size: 10px;
   color: black;
}
table.login_box {
width: 220px;
   padding: 50px 41px 51px 41px;
   font-size: 16px;
   color: black;

}

download

Web2 Developers

Create Login Box Using Ajax Jquery

Category

Arsip Blog