Notification message popup using toastr JS plugin in Laravel
In this section, we are going to learn notification message popup. We will use the toastr JS plugin and Laravel to do this. Toast is a type of JavaScript library, which is used to display non-block and unobtrusive popup boxes to send the information message to our web users or mobile. If we specify some time period for toastr notification, after that time period, it will automatically dismiss itself. When we perform some action, we always need to get the notification alert like if we remove items from any website or form or anywhere, a notification will open, which will show a message such as “Item removed Successfully”. The notification alert is important for the end-users so that they can easily understand what is happening, and it also provides them more readable power. In order to add notification alerts, we have various versions of Laravel like Laravel 5, 6, 7, and 8.
Now we can show a notification popup by adding the toastr js plugin. This plugin is used to provide notification of warning message, info message, error message, success message, etc. Using this, we are able to add a notification with an impressive layout. In order to show notification, Laravel also has a lot of packages, but in our below application, we will use the toastr JS plugin. In order to show the notification, we will add the code of toastr jQuery. After that, we are able to manage it using the session. The implementation and use of toastr JS plugin are described in the below example, and it is very easy to use. In order to add a notification, we have to follow some steps, which are described as follows:
Step 1:
In this step, we are going to Create New Route. This new route will be used to test toastr notifications like this:
app/Http/routes.php
Step 2:
In this step, we are going to Add Controller method. We will create HomeController as a new controller. After this, we will add the following code into it like this:
app/Http/Controllers/HomeController.php
Step 3:
In this step, we are going to Create Notification file for Layout. We will create notification-check.blade.php file as a new file for layout. Now we will use our resource directory to create this file.
resources/views/notification-check.blade.php
Step 4:
In this step, we are going to Display toastr.js notification. For this, we will create a file named notification.blade.php, which will be useful to show toastr.js notification. We will add this file to our default file so that we don’t need to write the same code everywhere. For this, we will use the notification.blade.php file. So we will add the following code into it like this:
resources/views/notification.blade.php
Now our above code is ready to run. When we run this code, any of the following message popup will be generated as an output on the basis of our action:
