How to Add Toastr Notification in Laravel 11?

By Hardik Savani September 21, 2024 Category : Laravel

In this article, I will explain to you how to add toastr flash notification in laravel 11 application.

Toastr.js is a JavaScript library used to display small, non-blocking notifications or alerts on a webpage. It is lightweight and customizable, allowing developers to show messages like success, error, warning, or info with different styles. Toastr helps improve user experience by showing quick feedback.

In this example, we will create a notifications Blade file and define success, info, warning, and error flash messages. Then, we will include that notifications file in the layout so we don't have to rewrite the same code repeatedly. When a flash message is triggered from the controller, it will pop up with a Toastr notification. Let's go through the simple steps to get it done.

laravel 11 toastr notification

Step for Laravel 11 Show Toastr JS Messages Example

  • Step 1: Install Laravel 11
  • Step 2: Define Notifications
  • Step 3: Create Routes
  • Step 4: Create Controller
  • Run Laravel App:
    • >

Step 1: Install Laravel 11

First of all, we need to get a fresh Laravel 11 version application using the command below because we are starting from scratch. So, open your terminal or command prompt and run the command below:

composer create-project laravel/laravel example-app

Step 2: Define Notifications

Here, we will create notifications blade file and define all flash messages.

we will import CDN js and css for JQuery and Toastr JS.

so, let's create the following blade files and update it.

resources/views/demo.blade.php

<!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-info">Warning</a>
        </div>
    </div>
</div>
  
@include("notifications")
  
</body>
</html>

resources/views/notifications.blade.php

<script type="text/javascript">
      
    @session("success")
        toastr.success("{{ $value }}", "Success");
    @endsession
  
    @session("info")
        toastr.info("{{ $value }}", "Info");
    @endsession
  
    @session("warning")
        toastr.warning("{{ $value }}", "Warning");
    @endsession

    @session("error")
        toastr.error("{{ $value }}", "Error");
    @endsession
  
</script>

Read Also: How to Generate Thumbnail Image in Laravel 11?

Step 3: Create Routes

In this step, we need to create some routes for notification. So open your "routes/web.php" file and add the following route.

routes/web.php

<?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 Controller

Here, we will create NotificationController controller. we will define two method on it. one will simple require view file and another will send back with flash message. so, let's create and update it.

app/Http/Controllers/NotificationController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class NotificationController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('demo');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function notification($type)
    {
        switch ($type) {
            case 'success':
                return back()->with("success", "User created successfully.");
                break;

            case 'info':
                return back()->with("info", "User updated successfully.");
                break;

            case 'warning':
                return back()->with("warning", "User can not access page.");
                break;

            case 'error':
                return back()->with("error", "This is testing error.");
                break;
            
            default:
                // code...
                break;
        }
    }
}

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

Read Also: Laravel 11 Store JSON Format Data in Database Tutorial
http://localhost:8000/

Output:

I hope it can help you...

Tags :
Previous

Angular 18 Add Social Media Share Buttons Example
Next

Angular 18 PDF Viewer using ng2-pdf-viewer Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares