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:

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

How Toast Message is displayed in this application

  1. login.php - if login is successful, set a session variable to store successful login message, like $_SESSION['toast_msg'] = 'Login Successful' and redirect to home page
  2. index.php - In Home page, keep a position fixed to display the message and keep it hidden using styles. If $_SESSION['toast_msg'] is set, display the toast message in that position.
  3. Using JavaScript settimeout() function show the message for 5 seconds. After that make it hidden.
  4. Use CSS keyframes to animate the message, i.e., let it fadein and fadeout and appear from right side of the screen and then disappear.

Toast message when sending php form submitAssumption

  1. You must have basic knowledge of PHP, HTML, CSS and JavaScripts/jQuery
  2. Your computer configured to run PHP program and you have basic knowledge of PHP programming. 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

Watch YouTube Video

Use Toastr Alerts in PHPFolders and Files

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

How to display toast message in php

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)

display toast message in php javascript

Login Page (login.php)

show toast message in jquery

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.

display toatr message in modal popup 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. 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:

Implement Flash Messages In PHP

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

users.sql

After you run the scripts, verify if data is inserted correctly, it should have below data in it:

Create A Toast Notification in Javascript

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.

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 MySQL database connection understanding please read topic How to Connect to MySQL database using PHP.

Step 3 - Develop a Login form (login.php)

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:

login.php

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

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.

Even if toast_msg is set, it will not be visible. It will be visible from JavaScripts. Rest of the code in index.php is self-explanatory, it is just displaying the name, email id and logout link if user is logged in. Otherwise, it just shows login link.

Step 5 - Add JavaScripts

We need to add JavaScript/jQuery scripts to display the message (from hidden to show) and to display it for 5 seconds, after 5 seconds it will disappear. See below javaScripts:

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:

Here, toast message is made visible with CSS animation. Fadein and fadeout for 1 second and delay fadeout by 4 seconds. Using setTimeout() function, "display" class is removed after 5 seconds, so the message will disappear after 5 seconds. Above JavaScript is written in index.php. Using keyframes in CSS we are adding CSS animation, see the CSS section below in Step 6.

At the end, below are the header.php and logout.php

header.php

logout.php

Step 6 - Add Styles (style.css)

Below is style.css which is included in header.php.

style.css

PHP Flash MessageTest 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:

PHP Flash Message with toastr

Click on Login from home page. enter email id as 'test@test.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.

Login form for toast message in PHP

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.

Toastr alert in PHPImportant Note

Here, I have redirected the user to the home page, so I have written code for toast message in index.php incuding JavaScripts. If you redirect the user to a different page after successful login, then you have to write the code for the toast message in that page.

Scope of Enhancement:

  1. I have not developed a real home page for simplicity. You can develop a proper Home page, so that home page looks better.
  2. Change the position of the toast message appearing from the bottom or from the top.

Watch YouTube Video

download source code to display Toast message 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.

display toast message in php javascriptConclusion

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.