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.
Below is a screenshot of folder structure and files I am using:
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
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:
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 the scripts from download section.
After you created the table and inserted data in it, please verify if data is inserted correctly, 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.
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.
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:
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.
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:
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.
Step 7 - Add CSS (style.css)
Let us add below styles. We have already added style.css in top_menu.php.
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.
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.
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:
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.
Test 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:
Click on Login from menu. Login modal should be displayed. Enter email id as 'firstname.lastname@example.org', password as '123', check/uncheck 'Show Password' to see if password is displayed/hidden.
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:
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".
You can now play around with it and test on your own.
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.
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:
Put some contents in Home Page to make the page look better.
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.
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.