How to develop a bootstrap modal login form in PHP and MySQL

Modal is a small dialog box displayed on top of the current screen in a web application. In this topic, we will develop a modal login form in PHP and MySQL. We will use bootstrap modal for this. We will use email id and password to login. For incorrect credentials, we will show error message on the modal form.

To open the modal login form user will use a Login link in a top menu. So, we will have code for a Top Menu, Modal Login and Logout using PHP, MySQL along with jQuery.

Watch YouTube Video

bootstrap 5 modalAssumption

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

modal bootstrap 5Folders and Files

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

bootstrap login modal

I have created a folder called 'modal_login' under 'htdocs' as I am using XAMPP. If you are using WAMP, create 'modal_login' folder under 'www'. All my codes are in this folder.

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
Login modal is defined in login_modal.php

A menubar(top_menu.php) will be displayed on the top and there will be links for Home (index.php) and Login (login.php). When user clicks on Login link, login bootstrap modal will be displayed. In this topic I will show only login form. Home page will be just for displaying purpose, it is not a complete home page. Top menu (top_menu.php) will be included in the Home page.

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. During login, email id and password will be verified against the values in this table. 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:

bootstrap modal login

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
Create table script for this table is given below, you can use this code to create the table. You can also download the scripts from download section.

users.sql

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

bootstrap modal popup

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 MySQL 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 and Login on a menubar. We will include this menu in home page. If you add more links in the menubar, you can just include top_menu.php in the new page.

top_menu.php

PHP code at the beginning is explained in step 5, this is for failed login attempt. Next, I have added my custom stylesheet (style.css) and custom JavaScripts (login.js). By checking session variables, I am displaying Logout like if user is already logged in. Similarly, if theuser is not logged in I should display Login link. Look at line 42 for Login. Here, I am calling the login modal by using href="#user-login". This is the login modal which is explained in next step. Also, note that I included login_modal.php at the end.

Step 4 - Create Login Modal (login_modal.php)

In this step we will create a modal login form where user can enter email id and password and submit the form. When user clicks on login link from menu, Login modal is displayed. Let us look at the code for login modal below:

login_modal.php

In the modal header we are showing a title and close button. Within modal body we are showing the form two input fields - email id and password. After password we give a checkbox to display/hide password. Then we have a submit button. You must have noticed, I am using two JavaScript functions clearMsg() and togglePwd(). These are explained later.

Step 5 - Write code for modal form submission (login.php)

After entering email id and password when user clicks on Login button, login.php is executed. Let's see the code below for login.php.

login.php

This is very simple and self-explanatory. Simply take the values entered by the user and check them against values stored in the database table. If matching row found then it is successful login else it is a failed login.

For successful login, set two session variables $_SESSION['name'] and $_SESSION['userid'] and redirect the user to the home page.

For failed attempt, I am adding two session variables, one is email and other is an error message. $_SESSION['email'] will be used to display email id in the input field. $_SESSION['login_err_msg'] will be displayed in the modal. Then I am redirecting the user to the Home page. In Home page, I will check if error exists then show the modal with the error message.

Below code is added at the beginning of top_menu.php to print error message and to show email id value in modal.

All I am doing here is that just check if session values exist for those two session variables, then put them in two php variables and make those session variables empty. Now, see the modal where I am displaying the error message just after <form> tag.

Step 6 - Create Home Page (index.php)

I will not design a complete home page here. I will just display in <h1> tag something to show that it is a home page. But two things I will be doing in Home page - 1) scripts to show active page in the menubar 2) scripts to check for login error and display Login modal. See the code below:

index.php

First script is adding an active class, so that Home will be highlighted in the menubar when clicked. Second script is to check for login error message and if exists then call click() function of login from menu which will show the modal.

Hope you understood how error message is displayed and modal is shown. Now let's add some styles and our custom JavaScripts.

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 home page 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 (login.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 login.js file in js folder.

login.js

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

clearMsg() function is called when close button is clicked in the login modal. This is just to clear the error message and the values entered in the modal form when user closes the modal.

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 the session using session_destroy() function.

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

php login pageTest the Application

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

bootstrap popup

Click on Login from menu. Login modal should be displayed. Enter email id as 'test@test.com', password as '123', check/uncheck 'Show Password' to see if password is displayed/hidden.

modal login bootstrap

Click on Login button. You should be able to login successfully and see the home page. Also, you should see user name is displayed on top right corner along with Logout link. But Login link will not be displayed any more. You should see below screen:

modal login

This successfully test our application as session variables are set as soon as user logs in.

Now click on Logout, you should now see Login in the menubar again, but Logout and user name are disappeared. Also try to login with incorrect emailid/password, you should see modal displayed again with error message displayed on top saying "Incorrect Email id/Password".

How to insert modal in PHP

You can now play around with it and test on your own.

How to use login form in PHPImportant Note

  1. I have not explained much about stylesheet, as our main purpose is to explain PHP code and not the design of the form how it should look like. You can always modify the styles to give forms a better look.
  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 a modal Signup page and add link in the menubar, 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

Watch YouTube Video

modal login php mysql 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 code or you can modify them as per your requirements.

login php codeConclusion

In this example I have showed you how you can develop modal 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.