How to Show Notification using Sweet Alert in Laravel

March 26, 2024 - By admin

Show Notification using Sweet Alert in Laravel

Sweet Alert in Laravel

Show Notification using Sweet Alert or sweet Alert in Laravel, you’ll discover how to easily use the Sweet Alert library to show alert notifications in your Laravel application. We’ll walk you through integrating Sweet Alerts in Laravel, ensuring that you grab users’ attention instantly.

Show Notification using Sweet Alert, you’ll learn how to use the Sweet Alert library to display alert notifications in your Laravel application. We’ll guide you through integrating Sweet Alerts in Laravel, helping you effectively capture users’ attention.

Sweet Alert is a small package that enables you to monitor user interactions with alerts. It provides extensive customization options, giving you greater flexibility.

In this tutorial, you’ll learn how to utilize Sweet Alerts in Laravel using the MVC pattern extensively.

Implement Notification using Sweet Alert in Laravel

We use following step :-

Set up Laravel Project
Provide Database Information
Create a New Controller
Develop View Templates
Define New Routes
Start the Development Server

Step -1 : Set up Laravel Project

Before displaying notification messages using an alert, we need to create a new application.

composer create-project laravel/laravel --prefer-dist laravel-notification-demo

Step-2 : Provide Database Information

You can do it by adding your database information in .env file.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_database
DB_USERNAME=root
DB_PASSWORD=

Step- 3: Create a New Controller

A controller serves as the backbone of Laravel. In this file, you can write code to create various functionalities for your application.

You can easily generate a controller using the Composer command.

php artisan make:controller UserController

<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
class UserController extends Controller
{
    public function index()
    {
      $users = User::get();
      return view('home', compact('users'));
    }
    public function removeData(Request $request,$id)
    {
      User::where('id',$id)->delete();
      return back();
    }
}

Step -4: Develop View Templates

Enter into the resources/views/ directory; here you have to create a new file.

Ensure that you name it index.blade.php and insert given code into the file.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Sweet Alert Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body class="bg-light">
    <div class="container mt-5">
    <h2 class="mb-3">Laravel Ajax Sweetalert 2 Example</h2>
    <table class="table">
        <tr>
            <td>Name</td>
            <td>Email</td>
            <td>Action</td>
        </tr>
        @foreach($users as $user)
            <tr>
                <td>{{$user->name}}</td>  
                <td>{{$user->email}}</td>  
                <td>
                    <button class="btn btn-outline-danger btn-sm delete-data" data-id="{{ $user->id }}" data-action="{{ route('users.removeData',$user->id) }}">Delete</button>
                </td>  
            </tr>
        @endforeach
    </table>
          
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.27/dist/sweetalert2.all.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.27/dist/sweetalert2.min.css" rel="stylesheet">
    <script type="text/javascript">
        $("body").on("click"," .delete-data", function(){
            var current_object = $(this);
            swal.fire({
                title: "Are you sure?",
                text: "We are going to delete this user.",
                type: "error",
                showCancelButton: true,
                dangerMode: true,
                cancelButtonClass: 'red',
                confirmButtonColor: 'blue',
                confirmButtonText: 'Delete',
            },function (result) {
                if (result) {
                    var action = current_object.attr('data-action');
                    var token = jQuery('meta[name="csrf-token"]').attr('content');
                    var id = current_object.attr('data-id');
                }
            });
        });
    </script>
</body>
</html>

Step -5 : Create New Routes

Make sure to add given code into the routes/web.php file.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('/users', [UserController::class, 'index']);
Route::post('/users/{id}', [UserController::class, 'removeData'])->name('users.removeData');

Step-6 : Start the Development Server

Run the command to evoke the server.