How to code Login, Logout and Change Password in PHP and MySQL

Developing a login system for a web application is the most important part of the project. Here, you need to have a proper authenticating system to make sure only authorized users can login into the system.

In this topic, we will develop login, logout and change password for an web application using PHP and MySQL with some JavaScripts. Just for demo purpose, we will have a simple top menu in which Login link will be displayed. After user logs into the application, he/she can see the links for change password and logout. Also, user name will be displayed in the top menu after login.

Login form using PHP and MYSQLAssumption

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

simple login form in php with sessionFolders and Files

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

login form in php and mysql source code

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

  1. Folder 'cfg' - In this folder we have dbconnect.php which is used to connect to the MySQL database.
  2. Folder 'css' - Custom stylesheet is in this folder
  3. Folder 'js' - In this folder we have custom JavaScripts

A menu bar(top_menu.php) will be displayed on the top and there will be two links for Home (index.php) and Login (login.php). Below is my login page:

login, logout and Change password form in PHP

Below is the screenshot of the page after user logs in:

Changing a password PHP MySQL

When user clicks on Change Password from menubar, below screen is displayed:

Change password form in PHP

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:

change login password in PHP and MYSQL

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 it from the download section later in this topic.

users.sql

It should have below data in it.

PHP Profile System Change Password

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.

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, Login, Change Password and Logout on a menu bar. I will include this menu in all the pages so that this menu will be visible in every page.

top_menu.php

You can see I have added links for Home, Login, Change Password and Logout. Once user logs in we will set session variables. So, by checking session variables, I am displaying Change Password and Logout based on user logged in or not.

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

The Login form has email id and password for the user to login into the system.

Login form in PHP

Let us look at the code for login.php

login.php

It is a simple form, I am checking the input values with data in 'users' table. After successful login assigning email id and user name in two session variables and redirecting user to home page.

Step 5 - Develop Change Password (change_pwd.php)

I will do some validation to check that passwords (password and confirm password) entered by the user are the same. Also, I will check that new password is not same as current password.

Let's see the code of my change password program.

change_pwd.php

A JavaScript function named validate() is called when the form is submitted. This is to check if passwords entered by the user are same. This function is defined under JavaScript file validate.js.

In the form I have used a hidden input field email for which password will be updated and two input fields for new password.

I have created a simple home page (index.php) just to display success message. It is not a complete home page.

index.php

Here, if 'succ_msg' session variable is set and displaying it using Bootstrap alert and then unsetting the session variable.

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

logout.php

All session variables are unset by using session_unset() function. Then the session is deleted using session_destroy() function. After session is deleted, user is logged out and redirected to the home page.

With this our PHP development is done, I will now add some CSS and write the JavaScripts code.

Step 6 - Add CSS (style.css)

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

style.php

You can see simple styles are added here. Keep this style.css file in your css folder.

Step 7 - Add JavaScript/jQuery (validate.js)

You have already seen togglePwd() function is called from login form when checkbox - "Show Password" is clicked. Also, validate() function was called during form submission. Keep validation.js file in js folder.

validate.js

php login sessionTest the Application

Make sure in your XAMPP control panel services are running. Open the browser and run localhost/login. You will see the home page displayed. See the below screen:

write logout code in php

Click on Login from the menu. Enter email id as 'test@test.com', password as '123'. Click on Login button. You should be able to login successfully and see the home page again. But this time, you should see user name is displayed along with Change Password and Logout. Click on Change Password and give a new password and submit. You will see successful message displayed as below:

Change Login to logout after user login using php session

To check the new password, logout and login again with the new password.

Hope you could understand all the steps in this topic. You can play around with it and test various cases.

PHP Login logout example with sessionImportant Note

  1. Password policy is not used during change password, that is, requirements as mixture of digits, upper-case, lower-case letters or special characters etc. are not given. Since this is more for learning, I have not enforced any password rules here.
  2. In the Change Password form, current password si not asked as the user is already logged in. However, for better security, you can ask to enter current password. So, add an input password field in the form.
  3. Even though two passwords are validated in the JavaScript, this is verified again in php code. You can use one of them. However, server side validation is always better than client side validation.

Scope of Improvement:

  1. Put some contents in Home Page to make the page look better.
  2. Give some minimum password requirement at least enforce a minimum length of password.
  3. Send an email to the user as soon as password is changed successfully. You can read the topic How to send mail using mail() function in PHP with example and integrate it with change password.

Creating a User Login System with PHP and MySQLDownload 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, logout and change password in php and mysqlConclusion

Login, Logout and Change Password are the basic requirements for any application. In a real project there can be various other areas related to password policy, like user can not repeat any of the last 3 passwords or sending an email to the user as soon as password is changed. Here, I made it very simple for you, you can always improve it. Hope, it will be useful for you.