How to Add toastr js plugin notification popup in laravel?

Today now in this post, i would like to talk with you about how to add toastr js plugin notification popup in laravel 6, laravel 7 and laravel 8 from the scratch. We know that toastr js plugin provide us success message notification, info message notification, warning message notification, and also error message notification on that way we can add the notification with the good layout.

Laravel have also the several package for notification show but i will use toastr js plugin, that is provide nice layout and also pretty interesting.

We need to add just one time toastr jquery code for the notification, then we can manage all by using session. Now in this example we can easily understand about how to implement and how to use.

At first we need to add new route for testing toastr notification as like as bellow:

All Step Toastrjs Plugin Notification

app/Http/routes.php

Route::get('notification', 'HomeController@notification');

Ok, now we need to add the controller method, so if we haven’t HomeController then need to create new HomeController and add the code as bellow:

app/Http/Controllers/HomeController.php

namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
class HomeController extends Controller
{
    public function notification()
    {
        session()->set('success','Item created successfully.');
        return view('notification-check');
    }
}

Next, we need to create the notificationcheck.blade.php file for the layout. So create the new notificationcheck.blade.php file in the resources directory.

resources/views/notificationcheck.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Check For Notification toastr</title>
    <script src="../jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.min.css">
</head>
<body>
@include('notification')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    Check for notification
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

So at last we need to create the notification.blade.php file for display our toastr.js notification. Now this file we need to include in our default file on that way. We don’t need to write the same code in all place.

So, let’s create the notification.blade.php and put the bellow code on that file.

resources/views/notification.blade.php
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
<script>
  @if(Session::has('success'))
  		toastr.success("{{ Session::get('success') }}");
  @endif
  @if(Session::has('info'))
  		toastr.info("{{ Session::get('info') }}");
  @endif
  @if(Session::has('warning'))
  		toastr.warning("{{ Session::get('warning') }}");
  @endif
  @if(Session::has('error'))
  		toastr.error("{{ Session::get('error') }}");
  @endif
</script>

Read Also: How to Get Current Month Records in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.