A secured login and registration system is a one of the important considerations when creating a system by scratch. One way to do that is by creating a registration system using PHP and MySQL.
Although there are a plenty of tutorials on the Web that teach how to create one using PHP and MySQL, most of them are for advanced learners.
This article is about how to write a simpler version of User Registration and Login System using PHP and MySQL for beginners. Let’s get started!
Resources You Need to Complete This Tutorial
Xampp (PHP version 5.3 or later and MySQL version 4.1.3 or later)
Basic Knowledge about PHP, HTML and CSS
Time and Patience
What We Are Going to Build
Download ZIP
Configuring Your Server
You can use any hosting service that has PHP and MySQL already installed (just make sure that it has the PHP version 5.3 or later and MySQL version 4.1.3 or later).
But for this tutorial, Xampp will be used as the server. If it’s your first time installing Xampp, this article might help you how to install it properly on your computer.
Step 1 – MySQL
First, create the database and table that will hold all the registrations. You can do this manually using the Graphical User Interface of PhpMyAdmin or use SQL to insert this information. Check out the SQL code below.
Notice that all of them are varchar, which even the password which will be converted later to md5 character to secure the user’s password. Also, use an auto_increment to automatically assign an ID or a number to users who would register later.
Now that the table has been created, what you have to do the markup and the CSS first and then later the PHP.
Step 2 – The Markup
For the markup, this will include three files and all of them should be saved as “.php” file since you are doing a server-side scripting program.
First, create the login.php file. Go ahead and copy the codes below.
With this code, you’ll have a similar result like the image below.
Next, create our register.php file. Copy and paste the code below.
Using the codes above, you’ll have a similar result like the image below.
Next, create our intropage.php. This will serve as the main page once a user successfully logs in.
With the codes above, you will get a similar result like the image below.
Step 3 – The CSS
Now that you have the markup ready, add the CSS. Basically, this will have the style for the class container of the pages as well as the buttons and some elements like text boxes and the likes.
By this time, you’ll have the same image like the final result above.
Step 4 – Re-using Elements
Now that you have all the markup and CSS ready, try to re-use elements like the head section and footer section. Inside your root folder, create a new folder and name it “includes“.
This will have all of the includes files. Next, create a new file inside the include folder name and it header.php. Copy the the head section part on any of the three php files you have created above. So you’ll have the code below.
The next thing you need to do is remove the markup you copied on the header.php file on all the three php files you created and replace it with the PHP code below.
Now, do the same thing with the footer. Copy the code below and create a new file name it footer.php. This will include the footer section. Copy the code below and paste it to footer.php file.
Then, remove this part again to all of the three PHP files and change it to the following codes.
Step – 5 Connecting to Database
Now that you have included the files for the head section and footer sections, it is time to create a new include file. Name it constants.php and copy the code below.
In the code above, you created the constants of the database information so that you can easily change the information whenever you need to.
Next, create a new file on includes folder and name it connection.php. This will hold of the database connection codes. Go ahead and copy and paste the code below.
Notice that you require constants.php. This will make sure to stop the script and will produce an error if there is any.
Include the connection.php to login.php and register.php file since these two files need connection-driven codes. Copy the code below and paste it above the header.php include code.
Step – 6 Configuring register.php File
Now its time to convert the registration form into a complete registration system. To achieve that, you need to add more PHP files under the header.php include file. Copy and paste the code below.
On the code above, notice that validations were used first before inserting data to the database. Also, the message variable was used to hold the error or success messages.
Step – 6 Configuring login.php File
Now that users can register on the site, you need to create the login system. By using this very simple PHP code below, you can enable the login system. Copy the code below and paste it to above the markup of our login.php file.
In the code above, you should check first if the session was set before redirecting the user to the intropage.php, which you will be adding later.
Otherwise, if it is not set. It will display the error through the message variable or redirect the user to login.php itself.
Step – 7 Configuring intropage.php File
All set is set for the register.php and login.php file. Now you just need to make sure that the user will stay login to the intropage.php if the session is set. Copy and paste the code below to the intropage.php.
Notice that an if statement was created to test if the session was set or not so you can decide if the user will be redirected to login.php or stay on the intropage.php.
Step – 8 Configuring logout.php File
Finally, for the user to be able to logout, you need to destroy the session using the session_destroy.
Go ahead and copy the code below to the logout.php.
Wrapping Up
Today you learned how to create a simple login system using PHP and MySQL. Although there are a lot things to consider when it comes to security, this is already a good start for beginners.
You are free to modify the use the codes above on your project. If you have any idea to improve the codes, please free to drop a comment on the comment section below.
Hope you enjoyed this tutorial and learn something. See you again next time!