How to display toast message in PHP login form with CSS animation
In this topic, we will see how to display a toast alert or toast notification in PHP after a form is submitted. We will develop a simple PHP login form and display a toast message after successful login. The toast message appears on the screen for a few seconds and then it disappears. It can appear from left, right, top, or bottom of the screen based on the position you define in the stylesheet.
Along with the login form we will create a simple home page where Login link will be displayed. If login is successful, toast message saying "Login Successful" will appear on the home page.
You can also read below topics where step by step description of the topics are available:
Below is a screenshot of folder structure and files I am using:
I have created a folder called 'toast' under 'htdocs' as I am using XAMPP. If you are using WAMP, create 'toast' folder under 'www'.
Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
Folder 'css' - The custom stylesheet is in this folder
I have a simple home page (index.php), login page (login.php) and logout code (logout.php). I have used a header.php file just to include it in login.php and index.php. Below are the screenshots of the home and login pages:
Home Page (index.php)
Login Page (login.php)
If login successful, toast message will be displayed like below, message will appear from right side of the screen and fade away after 5 seconds.
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 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 from the download section later in this topic.
After you run the scripts, 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 MySQL database. Note that we have this database connection php program in 'cfg' folder. This is written once and used in every program where MySQL 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.
I have developed a simple PHP login form to using email id and password. If login is successful, I set few session variables using PHP session and redirect user to home page. Note that, I set a session variable for toast message also.
Let us look at the code for login.php below:
Note in line 18, I have set a session variable for toast message for successful login. Then, I redirect user to home page. This will be used to display as toast message in home page.
Step 4 -Create Home Page (index.php)
The Home page is very simple. There is a heading that indicates it is the Home page and a login link if not already logged in. If user is logged in, it displays user's name, email id and a Logout link. If toast_msg session variable is set, it will display the message.
Let us look at the code for index.php
Here I have defined a div where I want to display the toast message. I am checking if toast_msg session variable is set, then display it in this div. There are some styles used for this div to make it hidden.
It checks if toast_msg session variable is set, then adds a class "display" to the div where I want to display the message. The class "display" has the properties in style.css as below:
At the end, below are the header.php and logout.php
Step 6 - Add Styles (style.css)
Below is style.css which is included in header.php.
Test the Application
Make sure your XAMPP control panel is running with Apache and MySQL services green. Open the browser and run localhost/toast. You will see the home page displayed. See the below screen:
Click on Login from home page. enter email id as 'email@example.com', password as '123'. You should be able see a toast message of successful login appears from right end of the computer screen and disappears after few seconds. Also, you should see user name, email id and Logout link are displayed on the home page.
You can also test logout and test for error message by giving wrong email id and/or password in login form.
Hope you could test it successfully.
Scope of Enhancement:
I have not developed a real home page for simplicity. You can develop a proper Home page, so that home page looks better.
Change the position of the toast message appearing from the bottom or from the top.
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.
Displaying toast alert is a popular way to show messages to the users. You can display it after an user action is performed. In your project, you can try adding toast message wherever possible. I hope this topic will help you.