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!
Quick Overview
In this guide, we’ll walk you through setting up Toastr notifications in a Laravel project. You'll start by creating a new Laravel application and navigating to the project directory. Next, you’ll generate a controller to manage different types of notifications, such as success, error, info, and warning. Then, you’ll create a view to display these notifications with the help of Bootstrap and Toastr CSS. After defining the necessary routes in web.php, you’ll test the notifications by triggering them from the browser. By the end, you'll have a fully functional system for displaying Toastr notifications in your Laravel application.
Step # 1 : Create a New Laravel Project.
To start building your application, the first step is to create a new Laravel project. If you already have Laravel installed globally on your system, you can quickly generate the project by running the command.
laravel new toastr
Alternatively, if you’re using Composer, execute the following command to create the project.
composer create-project laravel/laravel --prefer-dist toastr
This will set up a new Laravel application, ensuring all necessary dependencies are installed. Once the setup is complete, you’ll have a fresh Laravel application ready for development, complete with essential files and configurations, such as .env, routes, controllers, and more. This step establishes the foundation for your development environment and allows you to move forward with building your application.
Step # 2 : Navigate to the Project Directory.
Once the project is created, open your terminal (e.g., Git Bash) and navigate to the root folder of the Laravel project. Run the following command to move into the project directory.
cd c:xampp/htdocs/toastr
This ensures you're working within the correct directory to execute further commands.
Step # 3 : Set Up the ToastrController.
To manage different types of Toastr notifications, you'll need to create a controller. Use the following command to generate a new controller.
php artisan make:controller ToastrController
Once the ToastrController is created, open it and define methods for each type of Toastr message you want to trigger. These methods will handle the different notification types like success, error, info, and warning. Here's an example of how to structure the controller.
<?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!');
}
}
Each method in this controller is responsible for sending a different type of message (success, error, info, warning) using Laravel's session flash data. By utilizing the redirect()->back() method, the user is sent back to the previous page with the appropriate notification message. This makes it easy to dynamically show notifications without having to reload or refresh the page. You can customize the messages to suit your application's needs or adjust them based on specific user actions.
Step # 4 : Set Up the View for Toastr Notifications.
To test and display Toastr notifications, create a view file named master.blade.php. This view will serve as the interface for triggering different types of notifications. It will include the necessary HTML structure to display the page, buttons to trigger each type of notification, and the required scripts for Toastr to function correctly. Here’s how you can structure the view.
<!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>
In this view, you include both Bootstrap and Toastr CSS for styling the page layout and notifications. The view features buttons that trigger different types of Toastr notifications (success, error, info, and warning) via routes linked to your ToastrController. The Toastr JavaScript checks for session data and displays the corresponding notification when a user performs an action, ensuring real-time feedback. This setup makes Toastr notifications accessible across the application, easily customizable to suit various actions, and enhances user interaction with the app.
Step # 5 : Define Routes for Toastr Notifications.
In this step, you'll update the web.php file to include routes that trigger the Toastr notifications. Each route corresponds to a different type of notification (success, error, info, warning) and is linked to the respective method in the ToastrController.
<?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');
This setup ensures that when a user accesses the route, the corresponding Toastr notification is triggered. By defining these routes, you make it easy to test different types of notifications, such as success, error, info, and warning. Each route links directly to a specific notification, simplifying the process of managing and verifying notifications in the app.
Step # 6 : Test the Toastr Notifications.
Now that everything is set up, it’s time to test your Toastr notifications. Start the Laravel development server using the following command.
php artisan serve
Once the server is running, open your browser and navigate to 127.0.0.1:8000. From here, you can test the Toastr notifications by clicking the buttons for success, error, info, and warning messages. Each button will trigger the respective notification, allowing you to verify that the notifications are being displayed correctly. This ensures everything is functioning as expected.
Conclusion
By following this guide, you’ve successfully set up Toastr notifications in your Laravel project. Your application is now equipped to trigger and display various types of notifications, such as success, error, info, and warning, providing a dynamic and user-friendly experience. With this foundation in place, you can further customize the notifications, integrate them into different parts of your application, and enhance the user interface. As your project grows, consider exploring additional notification features or integrating other Laravel packages to improve the overall functionality.
For more details, refer to the official Laravel and Toastr documentation.
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