Hello there, today we are going to create a secure user login system using PHP. For security reasons, passwords are not stored in the database in clear text format. They are hashed using some mechanism and stored. One of the mechanism used is hashing using salt. A salt is simply added to make a common password uncommon.
This post is meant to teach you the basics of PHP
cyrpt() function and store passwords using salt. If you do not know what they are and want to learn. Here is a great answer on stackexchange.
At the end of this tutorial you will have a login system that uses database, session and encryption to build a login system that can be used in your project or anywhere that you wish to.
Before we begin the following video is a demo of what we are going to build:
Some basic HTML, PHP, mySQL and localhost testing on XAMPP or WAMP server.
HTML and some basic Bootstrap will be used on the front-end. Do not worry if you know nothing about Bootstrap, since you can pretty much follow along without it. Bootstrap is used here only to make the system look a little prettier.
Some basic knowledge of PHP will help you follow along easier but I will try my best to make it clear for everyone.
Okay now lets get on with it.
The first step is to download Bootstrap :
This is optional but I recommend you do it, since you will get a chance to learn some of it as well. Learning Bootstrap will help you create responsive mobile-friendly websites.
You will need some sort of “server” to run php scripts that we are going to create. These programs will help you use your local machine as a local server. The tutorial will be Xampp specific but I hear it is more or less the same on Wampp.
Third install sublime text:
It is a free (well almost) text editor that we will be using to code. Or you can use any text editor or IDE of your choice.
Create a folder inside
C:/xampp/htdocs/ or wherever you chose to install Xampp, which will be the working folder or the projects folder. Example:
Then extract the bootstrap zip folder (the one that we downloaded on the first step) to our project folder.
By now your project folder should have the following folders in it:
js folders in it from the bootstrap extraction.
Now the coding part, well the most of it:
Open sublime text and click File>Open Folder and select our project folder and create 6 new files. File>New File and name them, save as
.php files. I have named them:
The names are self descriptive as you can see. They are all for respective functionalities.
Now lets work on index.php
index.php is our homepage or in this case, the login page. The code for
Basically what this does is, it displays a form with username and password fields and sign in button. Or if the user is not signed up, a sign up button can be clicked to sign up.
An important thing to notice here is to put appropriate php files for form action attribute. The file put there is opened once the form is filled and submit button is clicked. The other important thing here is form method attribute. We have used POST method here. The POST method is used to retain the values provided in the form input ie. username and password. You can read more about POST method here.
So on clicking the sign in button a POST method is invoked and
login.php is opened up. While on clicking the sign up button
newuser.php is opened up. That’s it.
In case you don’t know, you can view index page by typing localhost/your_project_name in your browser. Also your xampp server should be running:
The index page output should look like this: (To open this type localhost/your_project_name in your browser)
Now we would need a database to insert our user’s details on. To create a database, open your browser and type localhost/phpmyadmin:
Create new database and name it, I have named mine practise. Then create a table named users with the following columns in it:
I am going fast on this because phpmyadmin is fairly easy to use because of its GUI, but you can also use sql query to create the table as:
CREATE TABLE `users` ( `id` int(3) UNSIGNED NOT NULL, `fname` text NOT NULL, `lname` text NOT NULL, `email` varchar(23) NOT NULL, `username` varchar(23) NOT NULL, `password` varchar(23) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- ALTER TABLE `users` ADD PRIMARY KEY (`id`), ADD UNIQUE KEY `username` (`username`), ADD KEY `username_2` (`username`);
And the database part is done.
Now that we have a database, let us create a new user using the sign up functionality
The code for the signup page (newuser.php) is :
newuser.php is fairly simple with a form containing fields:
password; the same fields that our database has. The form has
form action tag, so when the form is filled and Register button is clicked,
register.php is run which looks like:
Now this snippet might look short but there are a lot of things that need explanation here. You can also see that I have used a particular function named ` crypt whereby I hace passed the password from the POST request from our
newuser.php ‘s form and
$salt which is used to hash the password from the user and store to our database.
$hased_password variable stores the hashed password after
crypt() function does its job. If you want to read more on
crypt() function, you can do so by going here.
session_start() means we are starting a session so that we can get the values entered by the user in
newuser.php. Remember we are now in
register.php. So in order to be able to get those user entered values we need
POST values. Line 11-15 are just declaring variables and taking values from the
By this time the user entered password is hashed successfully but the data is not put in the database. That is what line 22 to 32 does. The value for id is left empty because, id is set to AI (Auto Increment) in our database.
The process till now is sign up on homepage>newuser.php>register button>register.php> INSERT into users.
So we will be able to create users for the database. The password field on the database will look like as shown below:
The password is stored in the database in hashed form.
The sign in functionality:
What happens when we enter username and password on the index page and click sign in? From
index.php , we can see that clicking sign in after entering the username and password will use POST method and open login.php.
login.php we will have to check if the username and password provided is in our database.
The code for
The connection to the database is made using lines 3 to 4. If a link could not be established to the databse it also throws out debug information on the screen becasue of lines 4 ot 9. Now crypt() is a one way string hashing, so there is no comparing the password provided during sign in with the password in the database by decrypting it. In other words there is no
decrypt() function. So what I have done here is encrypt the password provided during sign in and compare with the value in the database. Finally if the username and password are valid,
user_dashboard.php is opened up.
The logout functionality is implemented with
logout.php. The code to
The logout functionality is basically opening the databse connection and selcting our table. On successfull connection we start a session adn check if the sesion variable for username is set or not. If the session variable for username is set, that means the user is logged in and the user is logged out by clearing the session. If the session variable is not set or the session variable is empty, there is no one logged in and the system echoes out “Could not logout”
And there you have it your secure user login system using php. I know this tutorial is not super easy to understand and I have been lazy to make many concepts clearer but you can find the full github project repository here: Github repo and make it work on your local machine and do some self research. You yourself are the best teacher for you. If you do not know how to use git and github, consider reading our post on getting started with git and github.
In addition to that I made this system quite a while ago, infact when PHP 7 was not here with all its improved functions mysqli_something. “i” for improved. So I had to make some adjustments here and there to make it work. The code is not clean at all, my apologies, but it does work. If you want to have a look at my previous code which I wrote for PHP 5, I think you can follow this blog post and in my github repo, you can go view the project on the commit on Jun 7, 2017.
Also do comment if you have any questions or if you want me to cover a particular topic in this post in detail.