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 blogStep 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:
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.
