How to develop a login and logout system in PHP and MySQL for beginners

This topic is about developing a login and logout system with a top menu using PHP and MySQL. This is more for a beginner in PHP. We will have a database to store user details with password and we will develop a login, logout and a html menu page.

PHP $_SESSION super global is used to set session variables. These session variables retain their values as long as session is on for the user. So, during the session you can use those session values globally. Login code sets the session variable and Logout code unsets those session variables.

Set session variables in Login

Unset session variables in Logout

session_start() - This PHP function creates a session or resumes an existing session.
session_unset() - This PHP function unset all session variables which were set earlier.
session_destroy() - This PHP function deletes the session, that means, session no longer exists.

After session is deleted, redirect user to the home page.

Let us apply these in an application where user can login into a system and after successful login, a Logout link will appear in a top navigation panel. We will develop a simple menu, a login form with logout PHP code for your complete understanding.

Before Login login and logout system in PHP

After Login login and logout in PHP and mysql You can see after login, user name is displayed on top right corner along with a Logout link.

You can also read below topics to get more details about Signup and Login.

  1. How to Develop a Login form with a Simple Menu in PHP and MySQL
  2. How to create a login and registration form with menu in PHP and MySQL
  3. How to display user name on header after login using PHP session

PHP create Login and User Auth SystemAssumption

  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

Create a Login System with PHP Easy StepsFolders and Files

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

Create a Login System with PHP for beginners

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

  1. Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
  2. Folder 'css' - My custom stylesheet is in this folder
  3. 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 links for Home (index.php) and Login (login.php). When user clicks on any of these links, corresponding page will be displayed. Note that here I am not developing a complete Home Page, it is just for display purpose.

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, userid (here email id will be used as userid) 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:

login page in php with mysql source code

The table 'users' has 5 columns in it.

  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 and get the scripts.

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, signup_date should be current date.

simple login form in php with session in PHP and MYSQL

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.
If connection is successful then it will return true and false otherwise. This Boolean value is returned and stored in the $conn variable. 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 other pages so that this menu will be visible in all pages.

top_menu.php

In the first line I added PHP session_start() function. You must start a session to use PHP $_SESSION array as we will use $_SESSION array to check if user is logged in or not.

You can see for Logout and Login I must check if user is already logged in or not. If user is logged in then session variable 'name' will be set, so display Logout only. But, if user is not logged in, display Login only. The session variable 'name' is set in login.php discussed in next step. I am also displaying user name if user is logged in.

Step 4 - Create a Login form (login.php)

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

login logout page in php with mysql source code

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 which is explained later. After successful login, two session variables, 'name' and 'userid', are set with the values of user name and email id. So, these values will be available as long as user session is on.

Using jQuery, active class for this page is added to highlight Login link in the menubar after the page is loaded.

Step 5 - Create Logout scripts (logout.php)

When user clicks on Logout, logout.php is called. Here, we have to unset all session variables and delete the session. Let us add below scripts for Logout:

logout.php

After session is deleted, redirect user to the home page.

Step 6 - Add CSS (style.css)

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

style.css

Keep this style.css file in your css folder. One point to mention here, 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 7 - 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

It is used to show/hide password. In this function, type of input object - password is changed from "text" to "password" and vice versa. If type is "text", password values will be shown, if type is "password", stars ("*") will be displayed for password.

Now, we will add a simple Home page. See below codes for it:

index.php

All I am doing here is displaying some messages so that you can confirm that you have landed in correct page during navigation from the menu.

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

Login form using PHP and MYSQL Test the Application

Make sure your XAMPP control panel is running with Apache and MySQL services on. Open the browser and run localhost/login. You will see the home page displayed.

PHP create a Login and User Auth System

Now click on Login, you will see Login Page is displayed and it is highlighted in the menubar.

Create A Login System In PHP For Beginners
  1. In the login form, enter email id as 'test@test.com', 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. Look at right side of the menu bar. You should see user name is displayed along with Logout link. Create a User Login System with PHP and MySQL Login and logout in PHP and MySQL
  2. Now click on Logout, you should now see Login in the menubar again, but Logout and user name are disappeared.

Hope you understood how the application works.

PHP MySQL Login SystemImportant Note

  1. For exmpale purpose md5 hash is used for password encryption. In actual project you must encrypt password using standard password encryption.
  2. You can put some contents in Home Page to make the page look better. Also, you can add Signup 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 to see details about Signup code.

download source code for login and logout 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 and logout PHPConclusion

Login and Logout are the basic functionalities of any web application. So these could be the very first thing you might be coding during your project development. I have explained how you can code Login and Logout in PHP along with a simple menu using simple PHP code. Hope it will be useful for you.