In this tutorial, we will see how to open sweetalert before deleting users in laravel application.
Here is the example of sweetalert before deleting user in laravel.
Step 1 :
Install Laravel App
composer create-project --prefer-dist laravel/laravel blog
Step 2 :
Database Configuration open ".env" file and change the database.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Step 3:
add new route /routes/web.php
Route::get('users', 'UserController@index');
Route::delete('users/{id}','UserController@destroy')->name('users.destroy');
Step 4:
Create UserController
php artisan make:controller UserController
app/http/controller/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UserController extends Controller
{
public function index()
{
$users = User::get();
return view('user',compact('users'));
}
public function destroy(Request $request,$id)
{
User::where('id',$id)->delete();
return back();
}
}
Step 5:
Create user blade resources/views/user.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Sweet Alert Tutorial Example - rathorji.in</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css">
<script src="http://demo.rathorji.in/plugin/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card mt-5">
<div class="card-header">
<h5>Laravel Sweet Alert Tutorial Example - rathorji.in</h5>
</div>
<div class="card-body">
<table class="table table-bordered">
<tr>
<td>Name</td>
<td>Email& lt;/td>
<td width="5%">Action</td>
</tr>
@foreach($users as $user)
<tr>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>
<button class="btn btn-danger btn-flat btn-sm remove-user" data-id="{{ $user->id }}" data-action="{{ route('users.destroy',$user->id) }}"> Delete</button>
</td>
</tr>
@endforeach
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("body").on("click",".remove-user",function(){
var current_object = $(this);
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "error",
showCancelButton: true,
dangerMode: true,
cancelButtonClass: '#DD6B55',
confirmButtonColor: '#dc3545',
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');
$('body').html("<form class='form-inline remove-form' method='post' action='"+action+"'></form>");
$('body').find('.remove-form').append('<input name="_method" type="hidden" value="delete">');
$('body').find('.remove-form').append('<input name="_token" type="hidden" value="'+token+'">');
$('body').find('.remove-form').append('<input name="id" type="hidden" value="'+id+'">');
$('body').find('.remove-form').submit();
}
});
});
</script>
</body>
</html>
Now run your application using artisan command
php artisan serve |
Open the following URL:
http://localhost:8000/users |
I hope this example helps you.