When an user logs into a web application, there should always be an option for the user to change the login password. In this topic I will show how to write PHP code to change password using MySQL database. Change password works for the current logged in user who wants to change his/her password. So, I will show the code for login and logout also in this application.
The application will have a simple top menu where Login link will be displayed. After user logs into the application, he/she can see links for change password and logout. Also, user name will be displayed in the top menu after login.
You can also read below topics:
- How to create a login and registration form with menu in PHP and MySQL
- How to display user name on header after login using PHP session
Folders and Files
Below is a screenshot of the folder structure and files I am using:
I have created a folder called 'change_pwd' under 'htdocs' as I am using XAMPP. If you are using WAMP, create 'change_pwd' folder under 'www'. Not necessarily you have to create 'change_pwd' folder, you can use any folder you want.
- 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
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 the screenshot of the page after user logs in:
When user clicks on Change Password from menubar, below screen is displayed:
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:
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 (see download section later in this topic) and get the scripts.
Please verify if data is inserted correctly, it should have below data in it, signup_date should be current date.
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.
- server - in our case it is localhost
- userid - we are using root user
- password - no password for user root
- 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
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, Login, Change Password and Logout on a menu bar. I will include this menu in all the Home, Login and Change Password pages so that this menu will be visible in those pages.
PHP session is used here for login and logout. You can see I have added links corresponding to Home, Login, Change Password and Logout. Once user logs in we will set session variables and display Login or Logout.
Step 4 - Create a PHP Login form (login.php)
Login form has email id and password for the user to login to the system. For login we have to validate email id and password entered by the user against the values stored in the database.
Let us look at the code for
In the first two lines I have added top menu and our database connection php programs. A login form is defined. Once form is submitted, it checks email and password from database. After successful login, email id and user name are added in two session variables and user is redirected to home page.
Step 5 - Develop Change Password (change_pwd.php)
When user clicks on Change Password, the form is displayed, user can enter new password and submit. We will do some validation to check that passwords (password and confirm password) entered by the user are same. Also, I will check that new password is not same as current password.
Let's see the code of my change password program.
I am checking if user is logged in or not. Because user cannot change his/her password without login. If email session variable is set then user is logged in, else give message and redirect to home.page.
Once form is submitted, new password is checked with the current password. If it is different, new password is updated in database table.
I have created a simple home page (
index.php) just to display success message. I have not developed a detail home page here. You can create your own home page.
Lastly, I want to show
logout.php as below:
Here, we are unsetting all session variables by using
session_unset() function. Then deleting session using
session_destroy() function. After session is deleted, user is logged out and redirected to the home page.
Step 6 - Add CSS (style.css)
Let us add below styles. I have already added
You can see simple styles are added here. Keep this style.css file in your css folder.
You have already seen
togglePwd() function is called from login form when checkbox - "Show Password" is clicked. Also,
validate() function was called during change password form submission. Keep
validation.js file in js folder.
togglePwd() function, type of input object - password is changed from "text" to "password" and vice versa.
validate() function, it checks if password and confirm password are same or not. If they are not same it returns false so that the form is not submitted.
With this, our development is complete now, let us test the application now.
Test the Application
Make sure in your XAMPP control panel services are running. Open the browser and run localhost/change_pwd. You will see the home page displayed. See the below screen:
Click on Login from the menu. Enter email id as 'firstname.lastname@example.org', 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 options. Click on Change Password and give a new password and submit. You will see successful message displayed as below:
Close the message. To check the new password, logout and login again with new password. If you can login with new password successfully, then password was updated correctly. Again, go for password change and test by giving two different passwords to see if you get the alert. Also test by giving the current password as new password and see if error message is displayed.
You can play around with it and test various cases. Hope you could understand all the steps in this topic.
Change Password is a basic requirement for any application. In 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.