It’s very simple and basic tutorial for beginners.
Create User Table
|
|
CREATETABLE`users`(
`uid`INT(11)NOT NULLAUTO_INCREMENT,
`username`VARCHAR(45),
`password`VARCHAR(100),
`email`VARCHAR(45),
PRIMARY KEY(`uid`));
|
To store user login records.
Required jQuery files for Login Page
|
|
<link rel=“stylesheet”href=“//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css”>
<script src=“//code.jquery.com/jquery-1.10.2.js”></script>
<script src=“//code.jquery.com/ui/1.11.0/jquery-ui.js”></script>
|
We need 3 files for login page. jQuery, jQuery ui and jQuery ui CSS file. We need jQuery ui files for shake effects.
jQuery Code for Login Page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<script>
$(document).ready(function(){
$(‘#btnLogin’).click(function(){
varusername=$(“#username”).val();
varpassword=$(“#password”).val();
vardataString=‘username=’+username+‘&password=’+password;
if($.trim(username).length>0&&$.trim(password).length>0)
{
$.ajax({
type:“POST”,
url:“ajax_login.php”,
data:dataString,
cache:false,
success:function(response){
if(response)
{
$(“body”).load(“welcome.php”).hide().fadeIn(1500).delay(6000);
window.location.href=“welcome.php”;
}
else
{
$(“#login-box”).effect(“shake”);//Shake Effect
$(“#login-error”).html(“<span style=’color:#cc0000′><strong>Error:</strong></span> Invalid Username/Password. “);
}
}
});
}
returnfalse;
});
});
</script>
|
We used $.ajax method of jQuery to check login information on Login button click event. If $.ajax receives any success response, It will redirect to welcome.php page, and in case of invalid username/password it shakes the login box and displays an error.
Login form on Login Page
|
|
<div id=“login-box”>
<form action=“”method=“post”>
Username
<input type=“text”class=“input” id=“username”/>
Password
<input type=“password”class=“input” id=“password”/>
<input type=“button”class=“button button-primary”value=“Log In”id=“btnLogin”/>
<div id=“login-error”></div>
</form>
</div>
|
It’s the basic login form.
Complete Login Page
create login.php page and paste the following code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<?php
session_start();
if(!empty($_SESSION[‘login_userid’]))
{
header(‘Location: welcome.php’);
}
?>
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>Ajax PHP Login with jQuery Shake Effect by sharp–coders.com</title>
<link rel=“stylesheet”href=“//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css”>
<script src=“//code.jquery.com/jquery-1.10.2.js”></script>
<script src=“//code.jquery.com/ui/1.11.0/jquery-ui.js”></script>
<script>
$(document).ready(function(){
$(‘#btnLogin’).click(function(){
varusername=$(“#username”).val();
varpassword=$(“#password”).val();
vardataString=‘username=’+username+‘&password=’+password;
if($.trim(username).length>0&&$.trim(password).length>0)
{
$.ajax({
type:“POST”,
url:“ajax_login.php”,
data:dataString,
cache:false,
success:function(response){
if(response)
{
$(“body”).load(“welcome.php”).hide().fadeIn(1500).delay(6000);
window.location.href=“welcome.php”;
}
else
{
$(“#login-box”).effect(“shake”);//Shake Effect
$(“#login-error”).html(“<span style=’color:#cc0000′><strong>Error:</strong></span> Invalid Username/Password. “);
}
}
});
}
returnfalse;
});
});
</script>
</head>
<body>
<div class=“container”>
<div class=“content”>
<h3>Ajax PHP Login with jQuery Shake Effect by<ahref=“http://sharp-coders.com”target=“_blank”>
http://sharp-coders.com
</a></h3>
<div id=“login-box”>
<form action=“”method=“post”>
Username
<input type=“text”class=“input” id=“username”/>
Password
<input type=“password”class=“input” id=“password”/>
<input type=“button”class=“button button-primary”value=“Log In”id=“btnLogin”/>
<div id=“login-error”></div>
</form>
</div>
</div>
</div><!—end.content—>
</div><!—end.container—>
</body>
</html>
|
Ajax Login Page
create ajax_login.php file and paste following code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
include(“config.php”);
session_start();
if(isset($_POST[‘username’])&&isset($_POST[‘password’]))
{
// Username
$username=mysql_real_escape_string($_POST[‘username’]);
//Password
$password=md5($_POST[‘password’]);
$result=mysql_query(“SELECT * FROM users WHERE username='”.$username.“‘ and password='”.$password.“‘”);
if($result){
$num_rows=mysql_num_rows($result);
if($num_rows==1){
$row=mysql_fetch_array($result);
$_SESSION[‘login_userid’]=$row[‘uid’];
echo$row[“uid”];
}
}
}
?>
|
It receives the posted information via $.ajax method on login.php and validate it from database. If login informations is valid it creates a session for that user.
Welcome Home Page
create welcome.php page and paste the following code
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?php
session_start();
if(empty($_SESSION[‘login_userid’]))
{
header(‘Location: login.php’);
}
?>
<div class=“container”>
<div class=“content”>
<h1>Welcome toHomePage</h1>
<p><ahref=“logout.php”>Logout</a></p>
</div><!—end.content—>
</div><!—end.container—>
|
Logout Page
create logout.php page and paste
|
|
<?php
session_start();
if(!empty($_SESSION[‘login_userid’]))
{
$_SESSION[‘login_userid’]=”;
session_destroy();
}
header(“Location:login.php”);
?>
|
It checks the session, if session is created it will destroy and redirect to login.php page
Database Connectivity Configuration Page
create config.php file and paste following:
|
|
<?php
define(‘DB_SERVER’,‘localhost’);
define(‘DB_USERNAME’,‘username’);
define(‘DB_PASSWORD’,‘password’);
define(‘DB_DATABASE’,‘database_name’);
$con=mysql_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD);
$db=mysql_select_db(DB_DATABASE);
?>
|
change values according to your database server.
