Add Toastr Notification in Laravel 11

 <?php


namespace App\Http\Controllers;

use Illuminate\Http\Request;

class NotificationController extends Controller
{
    public function indexNotification()
    {
        return view("demo");
    }
    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:
                break;
        }
    }

    public function index_notification()
    {
        return view("notifications.list");
    }

    public function notification_list($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:
                break;
        }
    }
}
Above File is app\Http\Controllers\NotificationController.php File





Below File is views\notifications\list.blade.php File
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel 11 Toastr Notification</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</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_list", "success") }}" class="btn btn-success">Success</a>
                <a href="{{ route("notification_list", "info") }}" class="btn btn-info">Info</a>
                <a href="{{ route("notification_list", "warning") }}" class="btn btn-warning">Warning</a>
            </div>
        </div>
    </div>
    @include("notifications.notifications")
</body>
</html>





Below File is views\notifications\notifications.blade.php File
<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>





Below File is resources\views\demo.blade.php File
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel 11 Toastr Notification</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="container">
        <div class="card mt-3">
            <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>
                <a href="{{ route("notification","error") }}" class="btn btn-danger">Error</a>
            </div>
        </div>
    </div>
    @include("notifications")
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>





Below File is resources\views\notifications.blade.php File
<script>
    @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>





Below File is routes\web.php File
<?php

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

Route::get('/', function () {
    return view('welcome');
});

Route::controller(NotificationController::class)->group(function () {
    Route::get("notification", "indexNotification");
    Route::get("notification/{type}", "notification")->name("notification");
    Route::get("notification_list", "index_notification");
    Route::get("notification_list/{type}", "notification_list")->name("notification_list");
});





Comments

Post a Comment

Popular posts from this blog

Eloquent Many to Many Relationship Tutorial in Laravel 11

Image
  <?php namespace App\Http\Controllers ; use App\Models\ User ; use Illuminate\Http\ Request ; class UserController extends Controller {     /**      * Display a listing of the resource.      */     public function index ()     {         // $users = User::find(2);         // return $users;         // $users = User::with("roles")->get();         // return $users;         // $users = User::find(1);         // return $users->roles;         // $users = User::find(1);         // foreach($users->roles as $data) {         //     echo $data->role_name . "<br>";         // }         // To show All users data as shown below :         $users = User :: get ();...
Read more

Blade Template Tutorial Three Template Inheritance in Laravel 11

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Master Layout - @yield ( "title" , "Website" ) </ title >     {{-- Below "asset('css/style.css')" is for declaring Absolute Path and "asset() is helper function for Absolute Path" --}}     < link rel = "stylesheet" href = " {{ asset ('css/style.css') }} " > </ head > < body >     < div id = "wrapper" >         < header >             < h1 > Hello World </ h1 >         </ header >         < nav >             < a href = "/welcomeT...
Read more