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 FileBelow 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");
});
.png)
.png)
.png)
.png)
Comments
Post a Comment