Laravel 8 Multiple Delete Records With CheckBox Example

Laravel 8 Multiple Delete Records With CheckBox Example

Hi Guys,

In this blog, I will learn how to implement delete multiple checkbox value in laravel 8 and other version so you are just following into the my steps in step by step and learn to the laravel 8 multiple checkbox to delete value.

So, let's start to the example and follow to the my all step.

Step 1: Create laravel 8 project

First step to create a fresh laravel 8 project in using bellow command.

composer create-project --prefer-dist laravel/laravel blog
Step 2: Configuration your database

This step to configure your database details in .env file.So let's create username, password etc. So let's add.

Path : .env
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: Create a students table

We require students table for the store in your value and students table field to require in name and email field.so create a product table in just following command.

php artisan make:migration create_students_table
Path : database/migrations/2021_06_09_062032_create_students_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateStudentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('students');
    }
}

Then next to run your migration in following command.

php artisan migrate
Step 4: create a Student model

Next we can need to the Student model so create a Student model in just following command through.

php artisan make:model Student
Path : App\Models\Product.php
<?php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    protected $fillable = ['name', 'email'];
}
Step 5: create Controller

Next, in this step we need to the StudentController so create a StudentController in just following command through.

php artisan make:Controller StudentController
app/Http/Controllers/StudentController.php
<?php

namespace App\Http\Controllers;

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

class StudentController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        $studentsData = Student::get();
        return view('student',compact('studentsData'));
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function destory(Request $request,$id)
    {
        $input = $request->all();
        $data = Student::find($id);
        $data->delete($id);
        return response()->json(['success'=>"Product Deleted successfully.", 'tr'=>'tr_'.$id]);
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function deleteAll(Request $request)
    {   
        $ids = $request->ids;
        Student::whereIn('id',explode(',',$ids))->delete(); 
        return response()->json(['success'=>"Products Deleted successfully."]);
    }
}

Step 6: Create Routes Path : routes/web.php
<?php
use App\Http\Controllers\StudentController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', [StudentController::class, 'index']);
Route::delete('students/{id}', [StudentController::class, 'destory']);
Route::delete('studentsDeleteAll', [StudentController::class, 'deleteAll']);
Step 7: Add Blade File Path : resources/views/student.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Laravel 8 - Multiple delete records with checkbox example</title>
    <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() }}">
    <style type="text/css">
        body{
            background: #fcf3f2;
        }
        table{
            background: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="container wrapper">
        <div class="row">
            <div class="col-md-10 offset-1">
                <div class="card">
                    <div class="card-header">
                        <h4>Laravel 8 - Multiple delete records with checkbox example</h4>
                        <button style="margin-bottom: 15px;" class="btn btn-warning delete_all" data-url="{{ url('studentsDeleteAll') }}">Delete All Selected</button>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered table-hover">
                            <tr>
                                <th width="50px"><input type="checkbox" id="master"></th>
                                <th width="80px">No.</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th width="100px">Action</th>
                            </tr>
                            @if($studentsData->count())
                                @foreach($studentsData as $key => $studentData)
                                <tr id="tr_{{ $studentData->id }}">
                                    <td><input type="checkbox" class="sub_chk" data-id="{{$studentData->id}}"></td>
                                    <td>{{ ++$key }}</td>
                                    <td>{{ $studentData->name }}</td>
                                    <td>{{ $studentData->email }}</td>
                                    <td>
                                        <a href="{{ url('students',$studentData->id) }}" class="btn btn-danger btn-sm"
                                            data-tr="tr_{{$studentData->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">
                                            {{-- <i class="fas fa-trash"></i> --}}
                                            Delete
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            @endif
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function(){
        $('#master').on('click',function (e) {
            if ($(this).is(':checked',true)) {
                $('.sub_chk').prop('checked',true)
            }else {
                $('.sub_chk').prop('checked',false)
            }
        });

        $('.delete_all').on('click',function (e) {
            var allVals = [];
            $('.sub_chk:checked').each(function () {
                allVals.push($(this).attr('data-id'));
            });

            if (allVals.length <= 0) {
                alert("Please select row.");
            }else {
                var check = confirm("Are you sure you want to delete this row?");
                if (check == true) {
                    var join_selected_values = allVals.join(",");

                    $.ajax({
                        url: $(this).data('url'),
                        type: 'DELETE',
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        data:'ids='+join_selected_values,
                        success:function (data) {
                            console.log(data);
                            if (data['success']) {
                                $(".sub_chk:checked").each(function () {
                                    $(this).parents("tr").remove();
                                });
                                alert(data['success']);
                            } else if (data['success']){
                                alert(data['error']);
                            } else{
                                alert('Whoops Something went wrong!!');
                            }
                        },
                        error: function (data) {
                            alert(data.responseText);
                        }
                    });

                    $.each(allVals, function( index, value ){
                        $('table tr').filter("[data-row-id='" + value + "']").remove();
                    });
                }
            }
        });

        $('[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>

So, finally we are done with our code we can get below output.

Run your project in following command:

php artisan serve
Browser url run : http://localhost:8000

I Hope It Will Help You..