How to Add Toastr Notification in Laravel 11?

How to Add Toastr Notification in Laravel 11?

How to Add Toastr Notification in Laravel 11. 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.

Table of Contents HIDE
1 Step 1: Install Laravel 11
2 Step 2: Define Notifications
3 Step 3: Create Routes
4 Step 4: Create Controller
5 Run Laravel App:
5.1 Like this:
You Can Learn Laravel 11 Add Watermark on Image Tutorial

Step for How to Add Toastr Notification in Laravel 11

  • 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>

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:

http://localhost:8000/

I hope it can help you…

You Can Learn Udemy – SQL Bootcamp – Manipulate Data Like a Pro 2024

Tags: ,

This Post Has One Comment

Leave a Reply