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 projectFirst step to create a fresh laravel 8 project in using bellow command.
composer create-project --prefer-dist laravel/laravel blogStep 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 : .envDB_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_PasswordStep 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_tablePath : 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 migrateStep 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 StudentPath : 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 StudentControllerapp/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..
