Laravel5 confirmation box for deleting a record from mysql database example

By | May 29, 2018

Sometimes we need a confirmation box like “Are you sure to delete this record” before deleting a record from database. In this article i will tell you about how to integrate the confirmation box for deleting a records from database with a simple example. I will use Bootstrap Confirmation plugin in laravel for this.

As we all know how important a confirmation alert before deleting something from database. If we are not using any confirmation and if by mistake a user click on the delete button, It may cause the data loss.

So before going anywhere else we start the step to implement delete confirmation box in laravel by using bootstrap confirmation plugin.

Step1: Create Table

Before doing any database related activity we will need a database table where all the records will be putted. So you need to just copy and execute the following query to create table. Here in this example i am creating member table but it depends upon you and you are free to choose anything else you like.

CREATE TABLE `members` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(100) NOT NULL,
 `email` varchar(100) NOT NULL,
 `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

Step2: Add Routes

In the second step we will add required routes to perform the task. So just need to copy the below lines of code into your routes/web.php file.

routes/web.php

Route::get('members', 'MemberController@index');
Route::delete('member/{id}', ['as'=>'members.destroy','uses'=>'MemberController@destroy']);

Step3: Create Controller

Now we will create a controller to perform the operational tasks through the different methods. Here in this example  i will create a controller file named as “MemberController.php” in path app/Http/Controllers directory with two methods index() and destroy().

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class MemberController extends Controller
{
    public function index(Request $request){        
        $members = \DB::table("members")->paginate(5);
        return view('members',compact('members'))
                ->with('i', ($request->input('page', 1) - 1) * 5);        
    }
    public function destroy($id){
        \DB::table("members")->delete($id);
        return redirect()->back()->with('success','Member deleted');
    }
}

Step4: Create a view file

In this step we will create a blade file named as members.blade.php to view the records and from where we can delete a particular record. And in this file we will use required bootstrap confirmation plugin files.

resources/views/members.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/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>
</head>
<body>
    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif
    <table class="table table-bordered">
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Email</th>
            <th width="280px">Action</th>
        </tr>
    @foreach ($members as $member)
    <tr>
        <td>{{ ++$i }}</td>
        <td>{{ $member->name}}</td>
        <td>{{ $member->email}}</td>
        <td>            
            {!! Form::open(['method' => 'DELETE','route' => ['members.destroy', $member->id],'style'=>'display:inline']) !!}
            {!! Form::button('Delete', ['class' => 'btn btn-danger','data-toggle'=>'confirmation']) !!}
            {!! Form::close() !!}
        </td>
    </tr>
    @endforeach
    </table>
    {!! $members->render() !!}
<script type="text/javascript">
    $(document).ready(function () {        
        $('[data-toggle=confirmation]').confirmation({
            rootSelector: '[data-toggle=confirmation]',
            onConfirm: function (event, element) {
                element.closest('form').submit();
            }
        });   
    });
</script>
</body>
</html>

As you can see i have used four files of bootstrap confirmation plugin –

  • bootstrap.min.css >= 3.2
  • jQuery >= 1.9
  • bootstrap.min.js >= 3.2
  • bootstrap-confirmation.min.js

Here i am using cdn link but you download these files and can use your local download file.

And you have an option available for alignment of confirmation box. You can use as you wish by using data-placement attribute with values left, top, bottom, right.

And after following the above steps your page will look like the screenshot below.

laravel5 confirmation box