Developing a login system for a web application is the most important part of the project. Here, you need to have a proper authenticating system to make sure only authorized users can login into the system.
Folders and Files
Below is a screenshot of the folder structure and files I am using:
I have created a folder called 'login' under 'htdocs' as I am using XAMPP. If you are using WAMP, create 'change_pwd' folder under 'www'.
- Folder 'cfg' - In this folder we have
dbconnect.php which is used to connect to the MySQL database.
- Folder 'css' - Custom stylesheet is in this folder
A menu bar(
top_menu.php) will be displayed on the top and there will be two links for Home (
index.php) and Login (
login.php). Below is my login page:
Below is the screenshot of the page after user logs in:
When user clicks on Change Password from menubar, below screen is displayed:
Step 1 - Create a MySQL table to store user details
Let us create a table named 'users' in MySQL database. This table will have user details. I have a database called 'demo'. So 'users' Table will be created in this database. If you have an existing database other than demo you can also use it. Just make sure same table name does not exist already. Table structure is given below:
Table has 5 columns.
- id - it is the primary key and auto incremented
- email - email id of the user
- name - name of the user
- password - password for the user
- signup_date - date of signup, default is current date, this is not required for login, used as information purpose only
Create table script for this table is given below, you can use this code to create the table. You can also download it from the download section later in this topic.
It should have below data in it.
Step 2 - Connect to MySQL database (dbconnect.php)
Use below script to connect to the database. Note that we have this database connection php program in 'cfg' folder. This is written once and used in every program where database connection is needed. This will be easy for maintenance and also will enable reusability of the code.
I am using
mysqli_connect() function which needs 4 parameters.
- server - in our case it is localhost
- userid - we are using root user
- password - no password for user root
- database name - demo in our case.
For detail database connection understanding please read topic How to Connect to MySQL database in PHP using mysqli_connect.
Step 3 - Create a top menu (top_menu.php)
This is the top menu which will display the Menu items - Home, Login, Change Password and Logout on a menu bar. I will include this menu in all the pages so that this menu will be visible in every page.
You can see I have added links for Home, Login, Change Password and Logout. Once user logs in we will set session variables. So, by checking session variables, I am displaying Change Password and Logout based on user logged in or not.
Step 4 - Create a Login form (login.php)
The Login form has email id and password for the user to login into the system.
Let us look at the code for login.php
It is a simple form, I am checking the input values with data in 'users' table. After successful login assigning email id and user name in two session variables and redirecting user to home page.
Step 5 - Develop Change Password (change_pwd.php)
I will do some validation to check that passwords (password and confirm password) entered by the user are the same. Also, I will check that new password is not same as current password.
Let's see the code of my change password program.
In the form I have used a hidden input field email for which password will be updated and two input fields for new password.
I have created a simple home page (
index.php) just to display success message. It is not a complete home page.
Here, if 'succ_msg' session variable is set and displaying it using Bootstrap alert and then unsetting the session variable.
Lastly, I want to show logout.php as below:
All session variables are unset by using
session_unset() function. Then the session is deleted using
session_destroy() function. After session is deleted, user is logged out and redirected to the home page.
Step 6 - Add CSS (style.css)
Let us add below styles. I have already added
You can see simple styles are added here. Keep this
style.css file in your css folder.
You have already seen
togglePwd() function is called from login form when checkbox - "Show Password" is clicked. Also,
validate() function was called during form submission. Keep
validation.js file in js folder.
Test the Application
Make sure in your XAMPP control panel services are running. Open the browser and run localhost/login. You will see the home page displayed. See the below screen:
Click on Login from the menu. Enter email id as 'firstname.lastname@example.org', password as '123'. Click on Login button. You should be able to login successfully and see the home page again. But this time, you should see user name is displayed along with Change Password and Logout. Click on Change Password and give a new password and submit. You will see successful message displayed as below:
To check the new password, logout and login again with the new password.
Hope you could understand all the steps in this topic. You can play around with it and test various cases.
Login, Logout and Change Password are the basic requirements for any application. In a real project there can be various other areas related to password policy, like user can not repeat any of the last 3 passwords or sending an email to the user as soon as password is changed. Here, I made it very simple for you, you can always improve it. Hope, it will be useful for you.