Supercharge Your Laravel Notifications with SweetAlert
SweetAlert is a fantastic library that can enhance your Laravel applications by providing elegant, user-friendly notifications and alerts. In this article, we’ll walk you through the process of integrating SweetAlert into your Laravel application using a practical example. By the end of this tutorial, you’ll have a solid understanding of how to use SweetAlert to create eye-catching notifications in your projects.
Prerequisites
Before we dive into the integration process, make sure you have the following prerequisites in place:
- A Laravel application (if you don’t have one, you can quickly set up a new Laravel project using Laravel Installer or Composer).
- Basic knowledge of HTML, PHP, and JavaScript.
- Composer installed on your local machine to manage Laravel dependencies.
Integrating SweetAlert into Laravel
Step 1: Install SweetAlert Dependencies
SweetAlert comes with some CSS and JavaScript files that we need to include in our Laravel project. To do this, open your Laravel project and add the following lines to your resources/views/layouts/app.blade.php file within the <head> section:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.27/dist/sweetalert2.min.css" rel="stylesheet">
These links will import the necessary CSS files for SweetAlert and Bootstrap.
Step 2: Create a Notification Blade File
In your Laravel project, create a new Blade template file named notification.blade.php in the resources/views directory. This file will serve as the template for our notifications.
Step 3: Set Up Your Notification Layout
In notification.blade.php, you can structure your notification layout as follows:
<!DOCTYPE html>
<html>
<head>
<title> Laravel Sweet Alert Notification by code.yoblogger.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- sweet alert 2 -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.27/dist/sweetalert2.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center">Laravel Sweet Alert Notification</h1>
<button type="button" id="success" class="btn btn-primary">Suceess</button>
<button type="button" id="warning" class="btn btn-warning">Warning</button>
<button type="button" id="left" class="btn btn-success">Left Success</button>
</body>
<!-- sweetalert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.27/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
var msg = 'Notification by code.yoblogger.com'
$(document).ready(function(){
$('#success').click(function(e){
e.preventDefault();
Swal.fire('Good job!', msg,'success');
});
$('#warning').click(function(e){
e.preventDefault();
Swal.fire('Warning!', msg,'warning');
});
$('#left').click(function(e){
e.preventDefault();
Swal.fire({
position: 'top-end',
icon: 'success',
title: msg,
showConfirmButton: false,
timer: 1500
})
});
});
</script>
</html>In this layout, we’ve included three buttons that will trigger different types of notifications when clicked.
Step 4: Add SweetAlert JavaScript Code
In the same notification.blade.php file, we’ve included JavaScript code to handle SweetAlert notifications. Here’s an explanation of what each button does:
- The “Success” button triggers a success notification.
- The “Warning” button triggers a warning notification.
- The “Left Success” button triggers a success notification positioned at the top right corner with an auto-dismiss timer.
We use the Swal.fire() function to display these notifications, passing in the title, message, and notification type (success or warning).
Step 5: Define a Route
To access this notification page, you need to define a route in your routes/web.php file:
use App\Http\Controllers\HomeController; Route::get('/notification', [HomeController::class, 'notification'])->name('notifications');This route maps to the notification method in the HomeController controller.
Conclusion
With SweetAlert integrated into your Laravel project, you can easily create visually appealing notifications and alerts for your users. This tutorial has walked you through the process of setting up SweetAlert, creating a notification layout, and adding JavaScript code to trigger different types of notifications.
Feel free to customize and expand upon these examples to meet your specific project needs. SweetAlert offers many more features and customization options, allowing you to create engaging notifications that enhance the user experience in your Laravel applications.
By implementing SweetAlert, you can take your Laravel notifications to the next level, making your web application more interactive and user-friendly. Happy coding!
Other Articles
