How to create a login and registration form with menu in PHP and MySQL

In this topic we will develop a simple registration (signup) and login form in PHP and MySQL. We will have a top menu where Signup and Login links will appear. When user clicks on the Signup or Login link, corresponding form will be displayed.

After successful registration, user can login into the system. You can download the source code for the login and registration in PHP later in this topic.

login and registration in php

registration and login form

php registration formAssumption

  1. You must have basic knowledge of PHP, HTML, CSS and 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

signup and login in phpFolders and Files

Below is a screenshot of folder structure and files needed:

php login form

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' - custom stylesheet is in this folder
Folder 'js' - In this folder I have a custom JavaScript file

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). Top menu (top_menu.php) will be included in each of the pages. Below are the screenshots of Signup and Login forms:

registration and login form

Signup and login with menu in PHP

Watch YouTube Video

Step 1 - Create a MySQL table to store user details

Let us create a table named 'users' in MySQL database. This table will have all information given by the user during signup. 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 does not exist already. Table structure is given below:

Signup and login with menu in PHP

Table has 5 columns.

  1. id - it is the primary key and auto incremented
  2. email - email id of the user who is signing up
  3. name - name of the user
  4. password - password given by the user during signup
  5. signup_date - date of signup, default is current date
Create table script is given below, you can use this code to create the table. You can also download it from download section.

users.sql

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.

These four parameters are:

  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.

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.

top_menu.php

Step 4 - Create a Home page (index.php)

We will create a simple html page here, just to show that you are in home page, when you click on Home link from top menu.

Home Page with Menu will look like below:

Signup and login with menu in PHP

Let us look at the code for index.php

index.php

You can see that I have just printed a heading and coded 2 lines of jQuery just to indicate current active menu is the Home. So when you click on Home, 'Home' will be highlighted in the menu.

Step 5 - Develop a PHP Signup or registration form (signup.php)

In this step we will create a PHP registration form where user can register by submitting the form. Once the form is submitted, we will store user details in the MySQL table. We will also do some form validation like email id format and if password and confirm password are the same.

php registration form

Let us look at the source code for signup.php

signup.php

After the form is submitted, if form validation fails, $error flag is set to true. Otherwise, we are just inserting the user details in 'users' table and setting the success or error messages accordingly.

Step 6 - 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. Validate email id and password entered by the user against the values stored in the database.

php login page

login.php

Here we are using a form to get the email id and password from the user. When the user clicks on Submit button, if matching row found, we redirect user to home page, if not, we give a message in the login form, so that user can re-enter login details.

Step 7 - 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 8 - Add JavaScript/jQuery (validation.js)

We need to write some scripts to validate password and confim password are same. Also, we have to write codes for show/hide password. You have already seen that validateForm() function and togglePwd() function are called from the signup page. So, here is the code for them. Keep validation.js file in js folder.

validation.js

In validateForm() function, password and confirm password values are taken in two variables. If they are not same, then an alert is given and returning false so that form will not be submitted.

In togglePwd() function, types of two input fields - password and conf_password are changed from "text" to "password" and vice versa.

We are done with our development, let us now test our application.

login and registration form in phpTest the Application

Open the browser and run localhost/signup. You will see the home page displayed. See the below screen, you can see Home link is selected and highlighted:

Home page of Signup and Login in PHP

Now click on Signup, you will see Signup form is displayed and it is highlighted in the menubar. Same way, click on Login and check if it is highlighted.

Now you need to test if Signup and Login forms are working correctly.

After successful registration, check in the database table if a row is inserted correctly and then try to login with the same email id and password used during registration.

Also, try registering with the same email id again and see if you get the error message.

php form validationImportant Note

  1. In this example we are using email id to login. You can use separate userid also for login. In that case you have to check if userid is already registered during signup.
  2. We have used md5() function for password hash. This is very simple and used in many places for learning purpose. However, there are more secured options available for password encryption that are used in actual project.
  3. Here, we have not used password policy, that is, minimum requirement as mixture of digits, upper-case, lower-case letters or special characters etc. Since this is more for learning, we have not enforced any password rules here.

Watch YouTube Video

download login and registration source codeDownload 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 codes or you can modify them as per your requirements.

Signup and login with menu in PHPConclusion

In this topic, we have developed the simplest menu and the forms. In actual project there could 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.