Laravel 5 - Confirmation before delete record from database example

By Hardik Savani | June 29, 2017 | | 18924 Viewer | Category : PHP Laravel Bootstrap jQuery MySql Ajax


Share this post:



Hi Guys, In this post we will learn how to open confirm model box before deleting item in laravel 5 application. As we know very well delete operation is very command and basic feature of every web application. Also delete operation is very important part because if you remove item, post, product, category etc then it will remove from your browser. So we should always prefer to confirmation before remove item.

There are several options available to use confirm like jquery ui confirm, sweetalert, bootbox, bootstrap confirmation etc jquery plugin. So we almost use bootstrap theme so it would always better if we use bootstrap plugin for this task. So In this example i am going to use bootstrap confirmation plugin for confirm box like toggle.

bootstrap-confirmation.js provide us very simple and better layout for confirm box and it's simply use event of their plugin. So let's see bellow full example and you can implement confirmation before delete record in your web application. you will get layout like as bellow screen shot.

Layout:

Step 1: Add Table and Dummy Records

I always prefer to give example from scratch, So in this example we will create "products" table with id, name, details, created_at and updated_at column. So you have to create table using migration and run that. After created successfully create table, make sure add some dummy data like as bellow:

Products Insert Query:

INSERT INTO `products` (`id`, `name`, `details`, `created_at`, `updated_at`) VALUES

(1, 'Product A', 'Product A Details', NULL, NULL),

(3, 'Product C', 'Product C Details', NULL, NULL),

(4, 'Product D', 'Product D Details', NULL, NULL),

(5, 'Product E', 'Product E Details', NULL, NULL),

(6, 'Product F', 'Product F Details', NULL, NULL);

Step 2: Add New Route

In this step, we are doing from scratch so we will add two routes, one for display data and another for delete request. So you have to simply add two new routes in your laravel application.

routes/web.php

Route::get('myproducts', 'ProductController@index');

Route::delete('myproducts/{id}', 'ProductController@destroy');

Step 3: Create ProductController

In third step, we will create new ProductController file to handle request of created two new route. In this Controller we define two method, index() and destroy(). Both method will handle route request. So let's create new controller and put code:

app/Http/Controllers/ProductController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;

use DB;


class ProductController extends Controller

{

/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function index()

{

$products = DB::table("products")->get();

return view('products',compact('products'));

}


/**

* Show the application dashboard.

*

* @return \Illuminate\Http\Response

*/

public function destroy($id)

{

DB::table("products")->delete($id);

return response()->json(['success'=>"Product Deleted successfully.", 'tr'=>'tr_'.$id]);

}

}

Step 4: Create products blade file

In last step we will create products.blade.php file and write code of display products and jquery ajax code. In this file we added following css and js files:

1)bootstrap.min.css

2)bootstrap.min.js

3)jquery.min.js

4)bootstrap-confirmation.min.js

So, let's create products.blade.php file and put bellow code:

resources/views/products.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel 5 - Confirmation before delete records from database example</title>


<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.5/bootstrap-confirmation.min.js"></script>

<meta name="csrf-token" content="{{ csrf_token() }}">


</head>

<body>


<div class="container">

<h3>Laravel 5 - Confirmation before delete records from database example</h3>

<table class="table table-bordered">

<tr>

<th width="80px">No</th>

<th>Product Name</th>

<th>Product Details</th>

<th width="100px">Action</th>

</tr>

@if($products->count())

@foreach($products as $key => $product)

<tr id="tr_{{$product->id}}">

<td>{{ ++$key }}</td>

<td>{{ $product->name }}</td>

<td>{{ $product->details }}</td>

<td>

<a href="{{ url('myproducts',$product->id) }}" class="btn btn-danger btn-sm"

data-tr="tr_{{$product->id}}"

data-toggle="confirmation"

data-btn-ok-label="Delete" data-btn-ok-icon="fa fa-remove"

data-btn-ok-class="btn btn-sm btn-danger"

data-btn-cancel-label="Cancel"

data-btn-cancel-icon="fa fa-chevron-circle-left"

data-btn-cancel-class="btn btn-sm btn-default"

data-title="Are you sure you want to delete ?"

data-placement="left" data-singleton="true">

Delete

</a>

</td>

</tr>

@endforeach

@endif

</table>

</div> <!-- container / end -->


</body>


<script type="text/javascript">

$(document).ready(function () {

$('[data-toggle=confirmation]').confirmation({

rootSelector: '[data-toggle=confirmation]',

onConfirm: function (event, element) {

element.trigger('confirm');

}

});


$(document).on('confirm', function (e) {

var ele = e.target;

e.preventDefault();


$.ajax({

url: ele.href,

type: 'DELETE',

headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},

success: function (data) {

if (data['success']) {

$("#" + data['tr']).slideUp("slow");

alert(data['success']);

} else if (data['error']) {

alert(data['error']);

} else {

alert('Whoops Something went wrong!!');

}

},

error: function (data) {

alert(data.responseText);

}

});


return false;

});

});

</script>


</html>

Ok, now we are ready to run above example with great layout. So let's run on following url: Site_URL+'/myproducts'.

I hope it can help you....



We are Recommending you: