MySQL and jQuery Sliding Login Panel
The Sliding Login Panel with jQuery (v 1.3.2) is easy to integrate and an extremely efficient way to allow users to login from any page throughout your website. Using the jQuery JS framework, the sliding panel works like a charm in Firefox, Safari, Opera, Chrome and even inferior browsers like IE6, IE7 and IE8!
The purpose of having a sliding login panel is to make your website user-friendly as well as practical, by providing a login and logout feature without redirecting users away from any content on your website. The Sliding Login Panel with jQuery overlaps content instead of shifting it down, and since all images are transparent that means you can retain the background content intact.
See Demo Here >>
Read Me
This tutorial will demonstrate how to create a login system using PHP, MySQL and the Sliding Login Panel with jQuery. If you don’t already have a MySQL database with an users table, below I will show you how to begin from scratch. To proceed with this tutorial you will need to have a Linux web hosting environment with a MySQL database accessible preferably via phpMyAdmin.
You will also need to download the Sliding_login_panel_jquery.zip file from here.
Create “Members” Table
Using phpMyAdmin create a “members” table to use for storing user accounts. The following SQL query will create a table with two fields to store an username and password. However, you can add more fields to log IP address, last login time, user verified, etc.
CREATE TABLE `members` (`members_id` SERIAL NOT NULL, `members_username` VARCHAR(65) NOT NULL, `members_password` VARCHAR(65) NOT NULL, PRIMARY KEY (`members_id`))
TYPE = MyISAM AUTO_INCREMENT = 1;
–
– Now dump data for table “members”
–
INSERT INTO `members` VALUES (NULL, ‘hektor@myserver.com’, md5(’testPW123′));
This SQL query will result in:
Security
SQL injections are a common method that allow malicious access to your database. Such SQL injection attacks are the act of hackers using an HTML form to submit a MySQL statement that exploits raw processing of user input data. For example, a login form has two input fields, username and password, which are submitted to a MySQL SELECT query that returns matches found. However, an SQL injection will attempt to make the query behave differently.
SQL injection example:
1 2 3 4 5 6 7 | $username = $_POST["username"]; //Suppose the input value is "hektor" $query = "SELECT * FROM members WHERE username = 'hektor@myserver.com'"; //Valid SQL statement //Now the same variable with an SQL injection $username = "' OR 1'"; //The SQL query will be compromised and behave differently $query = "SELECT * FROM member WHERE username = '' OR 1'" //SQL injection |
By using the OR operand in conjunction with the single quote symbol (’), the SQL query conditional statement ends the username string prematurely, resulting in a valid SQL statement that will always return true. The MySQL WHERE clause followed by the OR operand accompanied with a 1 alters the conditional statement to always return true. The consequences of using username = ” OR 1 will be that the entire members table will be selected by this SQL injection.
To prevent SQL injection attacks, use the mysql_real_escape_string() PHP function to escape special characters in a string for use in a SQL statement. The function escapes special characters while taking into account the current character set of the connection so that it is safe to place it in the mysql_query() function. A call to the MySQL library function mysql_real_escape_string() prepends backslashes to the following characters: \x00, \n, \r, \, ‘, “ and \x1a.
This function must always (with few exceptions) be used to make data safe before sending a query to MySQL.
1 2 3 4 5 | //escape the string before assigning it to the variable $username = mysql_real_escape_string($_POST["username"]); // ' OR 1' //SELECT * FROM members WHERE members_username = '\' OR 1\'' $query = "SELECT * FROM members WHERE members_username = '$username'"; |
Create Database Configuration File
The next step is to create a database configuration file to connect to the member’s table and validate login attempts.
db_config.inc.php
1 2 3 4 5 6 7 8 | //Define database connection $hostname = "db.myserver.com"; $username = "hektor"; $password = "testPW123"; $dbname = "sqldb"; mysql_connect($hostname, $username, $password) or die("Cannot connect: " .mysql_error()); mysql_select_db($dbname); |
Create a Registration and Login Script
If you would like to retain the Sliding Login Panel’s default columns, member login and registration, you can process both using a single script.
login.php
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 | session_start(); include("db_config.inc.php"); //establish DB connection //capture all form fields and set as variables foreach($_POST as $field => $value) { $$field = mysql_real_escape_string($value); } //authenticate login attempts if(isset($_POST["login"])) { if(!empty($email)) { $query = "SELECT * FROM members WHERE members_username = '" .$email ."' AND members_password = '" .md5($password) ."'"; $find_user = mysql_query($query); if(mysql_num_rows($find_user) > 0) { $result = mysql_fetch_array($find_user); //register user session $_SESSION["user_sid"] = md5($result["members_username"]); //redirect authenticated users header("Location: login_success.php"); } else { //implement your custom error handling method echo "Cannot validate your login credentials."; } } } //register new users if(isset($_POST["register"])) { if(!empty($signup_email) && !empty($signup_password)) { $insert_user = "INSERT INTO members(members_username, members_password) VALUES('" .$signup_email ."', '" .md5($signup_password) ."')"; if(mysql_query($insert_user)) { //implement your custom success method echo "User account created successfully"; } else { //implement your custom error handling method die(); echo mysql_error(); } } else { //implement your custom error handling method echo "You must provide a valid email address and password."; } } |
Modify Sliding Login Panel
Now rename the input fields in the form to make it work with the login.php script.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!-- Login Form --> <form class="clearfix" action="login.php" method="post"> <h1>Member Login</h1> <label class="grey" for="log">Email:</label> <input id="email" class="field" name="email" size="23" type="text" /> <label class="grey" for="pwd">Password:</label> <input id="password" class="field" name="password" size="23" type="password" /> <input class="bt_login" name="login" type="submit" value="Login" /> <a class="lost-pwd" href="#">Lost your password?</a> </form> <!-- Register Form --> <form action="login.php" method="post"> <h1>Not a member yet? Sign Up!</h1> <label class="grey" for="signup">Email:</label> <input id="signup_email" class="field" name="signup_email" size="23" type="text" /> <label class="grey" for="email">Password:</label> <input id="signup_password" class="field" name="signup_password" size="23" type="text" /> <label>A password will be e-mailed to you.</label> <input class="bt_register" name="register" type="submit" value="Register" /> </form> |