login script with php mysql jquery
Today we are making a cool & simple login / registration system. It will give you the ability to easily create a member-only area on your site and provide an easy registration process.
It is going to be PHP driven and store all the registrations into a MySQL database.
Step 1 – MySQL
First we have to create the table that will hold all the registrations. This code is available in table.sql.
Notice that we've defined the id as an integer with auto_increment – it is automatically assigned to every site member. Also, we've defined usr as an unique key – no two users with the same usernames are allowed.
We later use this in the registration to determine whether the username has been taken.
After you create the table, do not forget to fill in your database credentials in connect.php so you can run the demo on your own server.
Step 2 – XHTML
At several places in this code, there are some PHP operators that check whether $_SESSION['usr'] or $_SESSION['id'] are defined. This is true only if the page visitor is logged in the site, which allows us to show specific content to site members. We will cover it in detail in a moment.
After the form, we put the rest of the page.
Nothing special here. Lets continue with the PHP backend.
Step 3 – PHP
It is time to convert the form into a complete registration and login system. To achieve it, we will need more than the usual amount of PHP. I'll divide the code into two parts.
If you plan to add more code, it would be a good idea to split it into several files which are included when needed. This aids the development of large projects and allows code reuse in different parts of a site.
But lets see how we've done it here.
Here the tzRemember cookie acts as a control whether we should log-off users that have not marked the "remember me" checkbox. If the cookie is not present (due to browser restart) and the visitor has not checked the remember me option, we destroy the session.
The session itself is kept alive for two weeks (as set by session_set_cookie_params).
Lets see the second part of demo.php.
We store all the encountered errors in an $err array, which is later assigned to a $_SESSION variable. This allows it to be accessible after a browser redirect.
You may have noticed on some sites, that when you submit a form and later refresh the page, the data is sent all over again. This could become problematic as it could lead to a double registrations and unnecessary server firstname.lastname@example.org
We use the header function to prevent this, by redirecting the browser to the same page. This starts a fresh view of the page, without the browser associating it with a form submit. The result is that, on page refresh, no data is sent.
But as we use $_SESSION to store all the encountered errors it is important that we unset these variables, once we show the errors to the user. Otherwise they will be shown on every page view (the highlighted lines on the XHTML part of the tutorial).
Also notice how we create an additional script (lines 60-70 of the second part of the PHP code) which shows the panel on page load, so that the messages are visible to the user.
Now lets take a look at the CSS.
Step 4 – CSS
The sliding panel comes with its own style sheet. This means we are only left with creating the page styles.
Step 5 – jQuery
The sliding panel comes with its own jQuery files.
First we include the jQuery library from Google's CDN. Later comes a special fix for IE6 PNG transparency issues and lastly the panel's script is included.
At the bottom of the page is the $script variable – it shows the panel on page load if needed.
With this our cool login system is complete!
Today we learned how to use a fantastic form component and turn it into a functional log in / registration system.
You are free to built upon this code and modify it any way you see fit.