How to develop a login form with a simple menu in PHP and MySQL

We all know that a login form simply needs an id and password to start a user session. We are going to develop a login form in PHP and MySQL. Using PHP we will process the form and verify in the MySQL database if user credentials are correct or not. If correct, we will let user login and if incorrect, we will give message as “Invalid userid/password”.

Along with the login form we will create a simple menu where Login link will be displayed. Also, we will display user name and Logout link after successful login. So, we will code for Logout also.

PHP Login form

After Login

php login page

Login page in PHPAssumption

  1. You must have basic knowledge of PHP, HTML, CSS, JavaScript/jQuery.You can read below topics for more details:
    1. How to install xampp for Windows with setup for PHP development
    2. How to write PHP code with examples for beginners
    3. How to build a simple CRUD application in PHP and MySQL

Login form in PHP with menuFolders and Files

Below is a screenshot of folder structure and files I am using:

Login form in PHP with form validation

I have created a folder called 'login' under 'htdocs' as I am using XAMPP. If you are using WAMP, create 'login' folder under 'www'.

Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
Folder 'css' - My custom stylesheet is in this folder
Folder 'js' - In this folder I have my custom JavaScripts

A menu bar(top_menu.php) will be displayed on the top and there will be three links, Home (index.php), Signup (signup.php) and Login (login.php). When user clicks on any of these links corresponding page will be displayed. In this topic I will show only login form. Signup page will be just for displaying purpose, it is not the actual signup page. Top menu (top_menu.php) will be included in each of the pages.

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:

PHP Login form and logout

Table has 5 columns.

  1. id - it is the primary key and auto incremented
  2. email - email id of the user
  3. name - name of the user
  4. password - password for the user
  5. signup_date - date of signup, default is current date, this is not required for login, used as information purpose only
MySQL create table script for this table is given below, you can use this code to create the table. You can also download it from download section later in this topic.

users.sql

After you create the table and inserted data in it, please verify if data is inserted correctly, it should have below data in it.

php code for login page

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.

dbconnect.php

I am using mysqli_connect() function which needs 4 parameters.

  1. server - in our case it is localhost
  2. userid - we are using root user
  3. password - no password for user root
  4. database name - demo in our case.

We will include this dbconnect.php in other php programs so that we do not need to write it again in the program. 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, Signup and Login on a menu bar. We will include this menu in all the three other pages (Home, Signup and Login) so that this menu will be visible in all pages. Note that we are not developing signup page here, it is used just to show a sample page.

top_menu.php

I am using PHP session as it is needed to display user name and check if user is logged in. You can see I have added links corresponding to Home, Signup and Login and Logout. Once user logs in we will set session variables. So, by checking session variables, I am displaying Logout if already logged in. Similarly, if user is not logged in I should display Login and Signup. Also, I am displaying user name if user is logged in.

Step 4 - Develop a PHP Login form (login.php)

Our Login form will have email id as userid and password for the user to login to the system. So, while login we have to validate email id and password entered by the user against the values stored in the database.

php session and login

Let us look at the code for login.php

login.php

'Show Password' checkbox is used to show/hide password. On clicking this checkbox, a JavaScript function togglePwd() is called. Note that password is stored as md5 hash, so I am converting it to md5 hash before checking with database.

If user enters correct credentials login will be successful and I am assigning user name and email id in two PHP session variables and redirecting user to the home page.

There is a piece of jQuery code used to highlight Login link in the menu, that means, it is used to show the active page to the user. addClass() function adds a class "active" for the Login link in the menu. This active class is added in my custom CSS file style.css.

That's it for our main program login.php. Now we will add few more things like styles and JavaScript for show/hide password. We will also create two simple pages for Home and Signup. These will be only for displaying purpose.

Step 5 - Add CSS (style.css)

Let us add below styles. We have already added style.css in top_menu.php.

style.css

You can see simple styles are added here. Keep this style.css file in your css folder. One point you must remember, since we added "active" class in our pages using jQuery, we must add properties for this class in our stylesheet. So, in style.css, properties for "active" class are added.

Step 6 - Add JavaScript/jQuery (validation.js)

You have already seen togglePwd() function is called from login form when checkbox - "Show Password" is clicked. So, here is the code for it. Keep validation.js file in js folder.

validation.js

You can see togglePwd() function is written here. It is used to show/hide password.

In this function, type of input object - password is changed from "text" to "password" and vice versa.

Now, I will just add two simple pages for Home and Signup. Remember that these are not actual home or signup pages, just for navigation purpose. See below codes for them

index.php

signup.php

All I am doing here is displaying some messages so that you can confirm that you have landed in correct pages during navigation from the menu. Also note the same jQuery added for active pages.

Lastly, I want to show logout.php as below:

logout.php

Here, I am unsetting all session variables by using session_unset() function. Then deleting session using session_destroy() function.

Our development is complete, let us test the application now.

php login sessionTest the Application

Make sure your XAMPP control panel is running with services running. Open the browser and run localhost/login. You will see the home page displayed. See the below screen, you can see Home link in the menu is selected and highlighted:

login logout form in php

Click on Login, Login Page will be opened and highlighted in the menubar. This is just to check our menu is working fine.

Test if Login form is working correctly.

php login formImportant Note

  1. For example purpose md5 hash is used here. For actual project usually strong encryption method is used for the password.
  2. In this example I am using email id to login. You can use separate userid also for login. In that case, the table should have a column for userid.

Scope of Enhancement:

  1. Put some contents in Home Page to make the page look better.
  2. Create actual Signup page, so that user can signup and use that details to login. You can read topic How to create a login and registration form with menu in PHP and MySQL

download php source code for Login form in PHPDownload Source Code

I have put all codes in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can directly use the code or you can modify them as per your requirements.

Login form in PHP and mysql with menuConclusion

In this topic I have showed you how you can develop a PHP login form with a simple menu. This is the simplest menu and the form. In actual project there would be many other things you have to code for. I made it very simple for you, you can always improve it. Hope it will be useful for you.