In the fast-paced world of web development, crafting user-centric applications that deliver a seamless experience has always been my top priority. As a developer, I understand the importance of real-time feedback to keep users engaged and informed throughout their journey.
That's why I've turned to Laravel, my go-to PHP framework, for its elegance and ease of use in building robust applications.
With each new release, Laravel never fails to impress, introducing groundbreaking features that simplify development tasks and boost application performance.
In the latest version, Laravel 10, I couldn't wait to explore one of its key enhancements: Toastr notifications.
Toastr notifications have always been a personal favorite, thanks to their simplicity and effectiveness in conveying important messages to users. These unobtrusive and stylish alerts offer a seamless way to communicate vital updates, warnings, or success messages without disrupting the user's flow.
In this article, I'm excited to take you on a journey into the all-new Toastr notification system in Laravel 10. Together, we'll discover how this feature elevates the user experience to new heights.
Through practical examples and hands-on demonstrations, I'll show you just how effortless it is to integrate these sleek notifications into your Laravel applications, ensuring your users stay informed and engaged.
Let's get started laravel 10 toastr notification example, how to add toastr notification in laravel 10, toastr notification cdn, toastr js, toastr in laravel 10, toast notification js example.
If you haven't already, create a new Laravel project or use an existing one. Open your terminal or command prompt and run the following command
composer create-project --prefer-dist laravel/laravel laravel-toastr-example
To use Toastr notifications, we need to include the Toastr library. You can do this via npm or by using a CDN. For this guide, we'll use the CDN approach. Open your resources/views/layouts/app.blade.php file and add the following line within the <head> section.
<head>
<title>Laravel 10 Toastr Notification Example - Vidvatek</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-
alpha/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
Now, create a new Blade view file named toastr_example.blade.php inside the resources/views directory. In this file, we'll add a simple form to trigger the Toastr notification
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Toastr Notification Example</h1>
<form action="{{ route('show_example') }}" method="POST">
@csrf
<button type="submit" class="btn btn-primary">Show Toastr Notification</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
@if(Session::has('message'))
toastr.options =
{
"closeButton" : true,
"progressBar" : true
}
toastr.success("{{ session('message') }}");
@endif
@if(Session::has('error'))
toastr.options =
{
"closeButton" : true,
"progressBar" : true
}
toastr.error("{{ session('error') }}");
@endif
@if(Session::has('info'))
toastr.options =
{
"closeButton" : true,
"progressBar" : true
}
toastr.info("{{ session('info') }}");
@endif
@if(Session::has('warning'))
toastr.options =
{
"closeButton" : true,
"progressBar" : true
}
toastr.warning("{{ session('warning') }}");
@endif
</script>
@endsection
After that, we need to display messages in the view file using a redirect URL in the controller. Therefore, we need to add some code to the controller as well. Please copy the following code into your controller.
return redirect()->route('add-route-name')->with('message','User added Successfully');
return redirect()->route('add-route-name')->with('error','Something want wrong');
return redirect()->route('add-route-name')->with('Warning','Are you sure you want to delete? ');
return redirect()->route('add-route-name')->with('info','This is information');
Finally, run the Laravel development server using the following command.
php artisan serve
Congratulations! You've successfully implemented Toastr notifications in your Laravel 10 application. You now have the foundation to add more notification types, customize their appearance, and use them to enhance the user experience throughout your application.
You might also like:
- Read Also: Laravel 10 Many To Many Polymorphic Relationship
- Read Also: How to Send Email with PDF Attachment in Laravel 10
- Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal
- Read Also: How to Get Current Date and Time in Python