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:

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.

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

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

Modify Sliding Login Panel
Now rename the input fields in the form to make it work with the login.php script.

index.html

Learn how to validate input fields in HTML forms using a single Javascript function that highlights empty required fields before sending the content off to a PHP script, for example.

See Demo

Required Fields
The validateForm() function below contains a list of conditional statements that check the value of each specified input. If a required field is empty, the CSS class for that input will change to highlight the field in red, then the variable “error” which begins as false, will be set to true to prevent form submission until all required fields are satisfied. Highlighted fields that have been filled out will return to the default CSS class upon re-validating the form. The function below also checks the general syntax of an email address. The input data must contain the @ symbol and a dot (.)

Styling
The CSS classes are very simple and use the color red to highlight empty input fields.

HTML Form
The form below contains commonly used input types including text, textarea and select.

You will notice that the id tag for required fields is different from its name tag. Javascript utilizes the getDocumentById() method to manipulate the input’s CSS styling, however, your server-side script will use the name tag to process the data entered.