World Of Mine

I am that geek who is working in the programming field, in love with poetry, always appreciate good lyrics and addicted to loud music.

[PHP + jQuery ThickBox]: AJAX Login

I’ve just found out about jQuery thickBox which allows you to open a small window and disabled your current browser. There are some sites have been using this function nowadays. You can view some examples at thickBox’s own page as well at ajaxDaddy.

Here I’m going to show how to create an AJAX login using thickBox and PHP. Before we start, make sure you already have the main components:

We begin by creating a table called active_user in the database (SQL Script):

CREATE TABLE IF NOT EXISTS `active_user` (
`user_id` int(11) NOT NULL,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`user_id`)
);

Next is to create the most back end class file, since I hate typing the same lines or functions twice (file name: ActiveUser.class.php):

< ?php
/**
* Created on 20 Mar 2008, 09:51:30
* @author Mohd Rashidi Bin Mohd Zin
*/
class ActiveUser
{
public function __construct()
{
}
public function count($username, $password = null, $link = null)
{
$sql = "SELECT COUNT(*) FROM active_user WHERE username = ‘".mysql_real_escape_string($username)."’";
if (!empty($password))
{
$sql .= " AND password = ‘".md5($password)."’";
}
$query = $this->query($sql,$link);
return mysql_result($query, 0, 0);
}
public function insert($username, $password, $link)
{
$sql = "INSERT INTO active_user VALUES (”,’".$username."’, ‘".md5($password)."’)";
$query = $this->query($sql, $link);
}
private function query($sql, $link)
{
$query = mysql_query($sql,$link);
if (!$query)
{
return "Wooopsss!!! Something not right with the SQL statement, ".mysql_error();
}
else
{
return $query;
}
}
}
?>

Now is to create a PHP file which will act as the “middle man” between your HTML and Database. This PHP is responsible for checking the availability of submitted user name, based on given user name and password (file name: login.php):

< ?php
/**
* Created on 8 Mar 2008, 00:37:30
* @author Mohd Rashidi Bin Mohd Zin
*/
session_start();
require(‘ActiveUser.class.php’);
$username = $_GET[‘username’];
$password = $_GET[‘password’];
//TODO: Change entities for mysql_connect and db according to your environment
$link = mysql_connect("localhost","root","") or die("Damn it! Failed to connect, ".mysql_error());
mysql_select_db("test", $link);
$activeUser = new ActiveUser();
if ($count <1)
{
//TODO: change shidi and password to any value you desire
$sql = $activeUser->insert(’shidi’,‘password’,$link);
}
if (!empty($username) && !empty($password))
{
$count = $activeUser->count($username, $password, $link);
if ($count == 1)
{
$_SESSION[‘username’] = $username;
echo 1;
}
else
{
echo 0;
}
}
mysql_close($link);
?>

Next is where we will implement the javascript function to perform the action (file name: activeUser.js):

function login()
{
var username = $("#username").val();
var password = $("#password").val();
if ((username == ”) || (password == ”))
{
$("#warning").html("Both credentials are required!");
}
else
{
$.get("login.php?username="+username+"&password="+password, function(result) {
if (result == 0)
{
$("#warning").html("Nice try. Now do it again using correct password!");
}
else if (result == 1)
{
$("#activeUserDiv").html("Login successful");
setTimeout("window.location.reload()",1000);
setTimeout("tb_remove()",3000);
}
});
}
return false;
}

Next is to create the login page, not the main page, yet (file name: login.htm):

<p id="activeUserDiv">
username:
<input name="username" id="username" type="text" />
password:
<input name="password" id="password" type="password" />
<input value="Login" id="login" onclick="login()" type="submit" />
<input value="Cancel" id="cancel" onclick="tb_remove()" type="submit" /></p>

Finally is to create the page which the visitors / users will see, landing page, that is (file name: index.php):

< ?php
/**
* Created on 22 Mar 2008, 09:47:52
* @author Mohd Rashidi Bin Mohd Zin
*/
session_start();
?>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery ThickBox</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/thickBox.js"></script>
<script type="text/javascript" src="scripts/activeUser.js"></script>
<link rel="stylesheet" href="designs/thickBox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="designs/activeUser.css" type="text/css" media="screen" />
</meta></head>
<body>
< ?php
if (empty($_SESSION[‘username’]))
{
?>
<a href="login.htm?height=140&width=230&modal=true" class="thickbox">Login</a>
< ?
}
else
{
?>
Welcome < ?= $_SESSION[‘username’] ?>
< ?
}
?>
</body>
</html>

Just to make things looks not too dull, we add a little of CSS designs (file name: activeUser.css):

@CHARSET "UTF-8";
body
{
background-color: gray;
padding-top: 30px;
padding-left: 10px;
font-family: Arial, sans-serif;
font-size: 12px;
}
a
{
text-decoration: none;
text-align: center;
color: #F5F5F5;
}
#warning
{
color: red;
font-weight: bold;
}

TODO: As you can see in the login page, (login.htm) I’m implementing an obtrusive Javascript. Which, looks so uncool since we are using jQuery. If you have any ideas as to how implement unobtrusive Javascript in this page (or any suggestions at all and questions), feel free to contact me (or you can also leave a comment).

Cheers and happy coding!

Possibly related posts (generated by Yet Another Related Posts Plugin):

22nd March 2008 | Geek Talks | Back to Top

4 Responses to “[PHP + jQuery ThickBox]: AJAX Login”

spirit | March 22nd, 2008 at 14:26

nice tutorial bro.orang takkan tengok lagi yang minor bila yang laen run smoothly
tokmoh | April 13th, 2008 at 16:05

yeahh… gud tutorial.. thanx..
Matthew | April 20th, 2009 at 23:42

This is just point of concept code right. You are not using this as a real log in. You could simply sniff out the plain text username and password being sent to the server.

I would suggest using $.post and running thickbox over an ssl connection.
Login With PHP, MySQL, jQuery&Validation – สอนทำระบบเข้าสู่ระบบ PHP | | November 6th, 2009 at 23:34

[...] 4.[PHP + jQuery ThickBox]: AJAX Login 5.How to Validate Forms in both sides using PHP and jQuery Demo | Download [...]

Registered Linux User

World Of Mine

[PHP + jQuery ThickBox]: AJAX Login

4 Responses to “[PHP + jQuery ThickBox]: AJAX Login”

Leave a Reply

Subscribes

Archives

Random Photos