Toastr.js is a JavaScript library which is used to display notifications or alerts with different colors, icons based on the type of notification on a webpage. Toastr.js helps to improve the user experience with display notification or message. Integrate Toastr.js in Laravel application is not a very difficult task.
You can do this by following the next steps.
Step 1: Install Laravel (if you already install Laravel 11, you can skip step 1) by using the below command.
composer create-project laravel/laravel example-app
Here, you can replace the example-app name with your project name like: blog, ecommerce, agency or any name.
Step 2: Now, you need to create a notification blade file and define all messages. You also need to import CDN js and CSS for JQuery and Toastr JS. So, let’s create a blade file in the following path-
resources/views/toastr.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags, CSS links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
<!-- Your app content here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
@if(session('success'))
toastr.success("{{ session('success') }}");
@elseif(session('error'))
toastr.error("{{ session('error') }}");
@elseif(session('info'))
toastr.info("{{ session('info') }}");
@elseif(session('warning'))
toastr.warning("{{ session('warning') }}");
@endif
toastr.options = {
"closeButton": true,
"progressBar": true,
"positionClass": "toast-top-right",
"timeOut": "5000",
};
</script>
</body>
</html>
Step 3 Create Route: You need to create some route for Toastr notification. You can create this in the following path- 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: You need to create a notification controller and update it by following the code below.
<?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;
}
}
}
Step 5 Test the notification: Now, all you need to do is done. Use the below command and check if everything is working well or not.
php artisan serve
This is all you need to add Toastr notification in Laravel apps. We hope this will be hrlpful for you.
