Laravel 10 - Toastr Notification
Laravel 10 - Toastr Notification
In this tutorial, we will discuss how to use Toastr in Laravel 10 to display real-time notifications, enhancing user experience with instant feedback
If you're a video person, feel free to skip the post and check out the video instead!
Step # 1 : Create fresh Laravel project or use existing project.
Two commands to create fresh laravel project.
Global Command : laravel new toastr
Or use
Non Global Command : composer create-project laravel/laravel --prefer-dist toastr
Step # 2 : Access the project.
Open a terminal (e.g., Git Bash) and navigate to your Laravel project's root folder.
Git Bash : cd c:xampp/htdocs/toastr
Next, install the required dependencies and run the Laravel Vite development server for front-end assets:
Command : npm install && npm run dev
In a new terminal window or tab (while keeping the Vite server running), navigate to the same project directory to execute further Laravel command.
Step # 3 : Create a controller.
Run the following command to create a new controller
Command : php artisan make:controller ToastrController
Open the ToastrController and add methods to trigger each type of Toastr message.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ToastrController extends Controller
{
public function success()
{
return redirect()->back()->with('success', 'Operation was successful!');
}
public function error()
{
return redirect()->back()->with('error', 'An error occurred!');
}
public function info()
{
return redirect()->back()->with('info', 'Here is some information!');
}
public function warning()
{
return redirect()->back()->with('warning', 'This is a warning!');
}
}
Step # 4 : Create a view.
To test Toastr notifications, create a view named master.blade.php. Use the following code in master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toastr Notifications</title>
<!-- Bootstrap 4 CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Toastr CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<h1 class="mb-4">Test Toastr Notifications</h1>
<div class="btn-group" role="group" aria-label="Toastr Buttons">
<a href="{{ route('toastr.success') }}" class="btn btn-success mr-2">Trigger Success</a>
<a href="{{ route('toastr.error') }}" class="btn btn-danger mr-2">Trigger Error</a>
<a href="{{ route('toastr.info') }}" class="btn btn-info mr-2">Trigger Info</a>
<a href="{{ route('toastr.warning') }}" class="btn btn-warning">Trigger Warning</a>
</div>
</div>
</div>
</div>
<!-- jQuery and Toastr JS -->
<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
</script>
</body>
</html>
By including the Toastr CDN links in the master.blade.php file, Toastr notifications will be available on every page. You can then trigger different types of notifications as needed based on user actions or system events.
Step # 5 : Create routes.
Update web.php to include routes for triggering Toastr messages.
<?php
use App\Http\Controllers\ToastrController;
use Illuminate\Support\Facades\Route;
Route::get('/', function(){
return view('master');
});
Route::get('/success', [ToastrController::class, 'success'])->name('toastr.success');
Route::get('/error', [ToastrController::class, 'error'])->name('toastr.error');
Route::get('/info', [ToastrController::class, 'info'])->name('toastr.info');
Route::get('/warning', [ToastrController::class, 'warning'])->name('toastr.warning');
Step # 6 : It's time to test.
Start the Laravel development server.
Command : php artisan serve.
Access below URL in your browser and test the Toastr notifications by clicking the buttons.
127.0.0.1:8000
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments