SweetAlert2 is a popular JavaScript library for creating beautiful and customizable alert dialogs. In this tutorial, you will learn how to install and use SweetAlert2 with Laravel 10 to display success, failed, warning, and error messages.
This tutorial will guide you step by step on how to use sweet alert with success message, delete message, and warning massage using ajax in laravel apps.
Sweetalert 2 in Laravel 10|9|8
Steps to integrate and use sweetalert 2 in laravel 10 for display success, error, warning, etc message into apps:
- Step 1: Install SweetAlert2
- Step 2: Create Methods in Controller
- Step 3: Add Routes
- Step 4: Create a Blade View & Use Sweetalert2 Messages
- Step 5: Run Development Server
Step 1: Install SweetAlert2
Firstly, open your terminal or cmd and execute the following command into it to install sweetalert2 into your laravel project:
npm install sweetalert2
Step 2: Create Controller with Methods
Next, create a controller that will handle your application logic. For this example, let’s create a simple controller called MessageController with methods for displaying success, warning, and error messages:
php artisan make:controller MessageController
Once you have created controller by using above command. Next, In your MessageController.php file, define the success, warning, and error methods:
use Illuminate\Http\Request;
use RealRashid\SweetAlert\Facades\Alert;
class MessageController extends Controller
{
public function success()
{
Alert::success('Success Message', 'You have successfully completed an action.');
return view('messages');
}
public function warning()
{
Alert::warning('Warning Message', 'This is a warning message.');
return view('messages');
}
public function error()
{
Alert::error('Error Message', 'An error occurred.');
return view('messages');
}
}
Step 3: Add Routes
In your routes/web.php file, define routes that point to your controller methods:
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\MessageController;
Route::get('/success', [MessageController::class, 'success']);
Route::get('/warning', [MessageController::class, 'warning']);
Route::get('/error', [MessageController::class, 'error']);
Step 4: Create a Blade View & Use Sweetalert2 Messages
In Laravel, it’s a good practice to create a Blade layout for displaying SweetAlert2 messages. You can create a new layout file in the resources/views/layouts directory, e.g., app.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel SweetAlert2 Example</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
@yield('content')
<script src="{{ asset('js/app.js') }}"></script>
@yield('scripts')
</body>
</html>
Create a Blade view file named messages.blade.php in the resources/views directory to display the SweetAlert2 messages:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">SweetAlert2 Messages</div>
<div class="card-body">
<p>Click on the buttons below to display different types of SweetAlert2 messages:</p>
<button onclick="window.location='{{ url('/success') }}'" class="btn btn-success">Success Message</button>
<button onclick="window.location='{{ url('/warning') }}'" class="btn btn-warning">Warning Message</button>
<button onclick="window.location='{{ url('/error') }}'" class="btn btn-danger">Error Message</button>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script>
// Auto-close the alert messages after 3 seconds (3000 milliseconds)
setTimeout(function() {
$('.swal2-popup').fadeOut();
}, 3000);
</script>
@endsection
Step 5: Run Development Server
You can now run your Laravel application using Artisan’s built-in development server:
php artisan serve
Visit http://localhost:8000 in your web browser and click the buttons to see the SweetAlert2 messages in action.
http://localhost:8000/users
Conclusion
Congratulations! You have successfully integrated SweetAlert2 with Laravel 10 to display success, warning, and error messages in your web application. You can further customize the appearance and behavior of SweetAlert2 to match your project’s requirements by referring to the SweetAlert2 documentation.
