Laravel – Add Delete Confirm Sweet Alert Example

Are you looking for a simple example of Laravel deleting a record with a confirmation sweet alert? You’re in the right place! In this article, we will go into detail about Laravel sweet alert confirm delete example. You will learn how to use sweet alert for delete confirmation in the Laravel app. In our example…

By.

min read

Are you looking for a simple example of Laravel deleting a record with a confirmation sweet alert? You’re in the right place! In this article, we will go into detail about Laravel sweet alert confirm delete example. You will learn how to use sweet alert for delete confirmation in the Laravel app.

In our example implementation, we will create a Delete confirmation alert box using the Sweet Alert library.

 

How to Add Sweet Alert Confirm Delete Box in Laravel?

Follow these quick steps to implement the Sweet Alert custom confirm box in Laravel:

Step 1 – Install Laravel

Step 2 – Add Dummy Users

Step 3 – Create a Route

Step 4 – Create a Controller

Step 5 – Create Blade Files

Step 6 – Install Sweet Alert

Step 7 – Write Script Code

Step 8 – Run Laravel App

 

Prerequisites

Before we dive into the steps, there are a few things you need to set up on your system:

  • PHP >= 7.4
  • Composer installed
  • Node.js and NPM installed

Step 1 – Install Laravel

First of all, we need to get a fresh Laravel 8 version application using the following command. Open your terminal or command prompt and run the command:

composer create-project --prefer-dist laravel/laravel blog

Step 2 – Add Dummy Users

In this step, we need to create some dummy users using factory. Run the following command:

php artisan tinker

User::factory()->count(10)->create();

Step 3 – Create Route

We need to create some routes for the users’ index and delete functions in the routes/web.php file:

Route::get('users', [UserController::class, 'index'])->name('users.index');
Route::delete('users/{id}', [UserController::class, 'delete'])->name('users.delete');

Step 4 – Create Controller

In this step, we need to create the UserController and add the following code to that file:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class UserController extends Controller
{
    public function index(Request $request)
    {
        $users = User::select("*")->paginate(10);

        return view('users', compact('users'));
    }

    public function delete($id)
    {
        User::find($id)->delete();

        return back();
    }
}

Step 5 – Create Blade Files

Now, we need to create blade files for the users’ page, which will show the list of users, and add a delete button. Create the following files:

users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel - Add Delete Confirm Sweet Alert Example - FreakyJolly.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Laravel - Add Delete Confirm Sweet Alert Example - FreakyJolly.com</h1>

    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        <form action="{{ route('users.delete', $user->id) }}" method="POST">                <td>
                    <form action="{{ route('users.delete', $user->id) }}" method="POST">
          
                        <a class="btn btn-primary" href="{{ route('users.edit', $user->id) }}">Edit</a>
          
                        @csrf
                        @method('DELETE')
          
                        <button type="submit" class="btn btn-danger delete-confirm">
                            Delete
                        </button>
                    </form>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
    $(function () {
  
        $('.delete-confirm').click(function (event) {
            event.preventDefault();
            var url = $(this).attr("href");
  
            Swal.fire({
                title: 'Are you sure?',
                text: 'This will delete the selected record!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            })
        });
  
    });
</script>

 

Step 6 – Start Development Server

In this step, we need to run the development server using below command:

php artisan serve

 

Step 7 – Run the Application

In this is the last step, now we are ready to run our Laravel application, so run the below command and check the output:

php artisan serve

Now open bellow URL on the browser:

http://localhost:8000/users

We are done, now you can see your Laravel sweet alert confirmation for deletion in your Laravel application.

 

FAQs

 

Q1. What is Sweet Alert?

Sweet Alert is a JavaScript library that allows you to create beautiful alert boxes. It is easy to use and customizable.

 

Q2. How can I install Sweet Alert?

You can install Sweet Alert using npm or by including it in your project through a CDN.

 

Q3. Can I use Sweet Alert with Laravel?

Yes, you can use Sweet Alert with Laravel. It is very easy to integrate it with Laravel.

 

Q4. What is the use of Sweet Alert with Laravel?

Sweet Alert is used to create beautiful and customizable alert boxes in Laravel. It is mainly used for delete confirmation or any other alert messages.

 

Q5. How can I use Sweet Alert with Laravel for delete confirmation?

You can use Sweet Alert with Laravel for delete confirmation by adding the Sweet Alert code in your blade file and creating a route and method in your controller.

 

 

Conclusion

Sweet alert is a great library to give a beautiful alert box. In this article, we have covered how to use Sweet alert with Laravel and delete confirmation. It is very easy to use with Laravel, and you can use it with all Laravel versions. This confirmation box is very helpful when you want to delete any record.

Leave a Reply

Your email address will not be published. Required fields are marked *