How to Add Toastr Notifications in Laravel 11

programing tips August 04, 2021



  In this guide, we'll explore how to integrate Toastr notifications into your Laravel 11 application. Toastr.js is a lightweight JavaScript library that allows developers to display non-blocking notifications for user feedback. With its customizable features, Toastr enables you to show messages such as success, error, warning, or information, enhancing the user experience significantly.

Overview

In this example, we’ll create a dedicated Blade file for notifications, define various flash messages (success, info, warning, and error), and include this notifications file in our layout. This approach prevents code duplication. When a flash message is triggered from a controller, a Toastr notification will pop up.

Steps to Implement Toastr Notifications in Laravel 11

Step 1: Install Laravel 11

First, let’s set up a new Laravel 11 application. Open your terminal or command prompt and run the following command:

composer create-project laravel/laravel example-app

Step 2: Create Notifications Blade File

Next, we will create a Blade file to define our flash messages. We’ll also include the necessary CDN links for jQuery and Toastr.js.

Create the following Blade files and update them:

resources/views/demo.blade.php

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 11 Toastr Notification</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css" />
</head>
<body>
  
<div class="container">
    <div class="card mt-5">
        <div class="card-header"><h4>Laravel 11 Toastr Notification</h4></div>
        <div class="card-body">
            <a href="{{ route('notification', 'success') }}" class="btn btn-success">Success</a>
            <a href="{{ route('notification', 'info') }}" class="btn btn-info">Info</a>
            <a href="{{ route('notification', 'warning') }}" class="btn btn-warning">Warning</a>
        </div>
    </div>
</div>
  
@include("notifications")
  
</body>
</html>

resources/views/notifications.blade.php

html
<script type="text/javascript">
    @if(session('success'))
        toastr.success("{{ session('success') }}", "Success");
    @endif
  
    @if(session('info'))
        toastr.info("{{ session('info') }}", "Info");
    @endif
  
    @if(session('warning'))
        toastr.warning("{{ session('warning') }}", "Warning");
    @endif

    @if(session('error'))
        toastr.error("{{ session('error') }}", "Error");
    @endif
</script>

Step 3: Create Routes

Next, we need to set up the routes for our notifications. Open your routes/web.php file and add the following code:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\NotificationController;

Route::get('notification', [NotificationController::class, 'index']);
Route::get('notification/{type}', [NotificationController::class, 'notification'])->name("notification");

Step 4: Create the Notification Controller

Now, let’s create the NotificationController to handle our notifications. This controller will have two methods: one to display the view and another to send back the flash message.

app/Http/Controllers/NotificationController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class NotificationController extends Controller
{
    /**
     * Display the notification view.
     *
     * @return \Illuminate\View\View
     */
    public function index()
    {
        return view('demo');
    }

    /**
     * Set flash messages based on notification type.
     *
     * @param string $type
     * @return \Illuminate\Http\RedirectResponse
     */
    public function notification($type)
    {
        switch ($type) {
            case 'success':
                return back()->with("success", "User created successfully.");
            case 'info':
                return back()->with("info", "User updated successfully.");
            case 'warning':
                return back()->with("warning", "User cannot access this page.");
            case 'error':
                return back()->with("error", "This is a testing error.");
            default:
                return back();
        }
    }
}

Running the Laravel Application

After completing all the steps, run the following command to start your Laravel application:

php artisan serve

Now, open your web browser and navigate to:

http://localhost:8000/

You should see your app output with the Toastr notifications functioning correctly.

Conclusion

By following these steps, you have successfully integrated Toastr notifications into your Laravel 11 application. This implementation enhances the user interface by providing instant feedback for user actions, making your application more interactive and user-friendly.

Post a Comment

0 Comments