Hello, everyone in this article we are share with you how to delete records in laravel with bootstrap confirm model. when we are want delete any entry or records in laravel it's very simple but delete with confirm model it is some hard for some laravel developers.
In this article we are write one jquery delete snippet code which you can use in entiry all application. no need to all time write saperate code for it.
Why Confirm Model Required?
Confirm model is required in big project because in this project each and every entry or records more important. just thinks you not use confirm model message before delete any records is not goot for some user freindly interface. once you by-mistack press or click on delete button and you not aply confirm model on it so, at a time your antry or records delete.
In short confirm message model functionality is work as a reduce some human by-mistact operation in our application.
Follow this simple step for add confirm bootstrap model on laravel delete records.
Step : 1 Add Route
First, we have neet to write tqo route one is for listing all records and second is for delete records. so open your routes/web.php file and add following two routes in it.
Route::get('posts', 'PostController@index')->name('posts');
Route::delete('posts/{id}', 'PostController@destroy')->name('post-delete');
[ADDCODE]
Step : 2 Create Controller
Next, create PostController.php file in app/Http/Controllers folders and simple add following code in it.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use Session;
class ProductController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$posts = DB::table("posts")->get();
return view('posts',compact('posts'));
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
DB::table("posts")->delete($id);
Session::put('success', 'Your Record Deleted Successfully.');
return redirect()->route('posts');
}
}
Step : 3 Create blade/view File
Next, we are create post.blade.php file in resources/views folders and listing all post in table formate with one delete button.
This is demo article so, we are add confirm model in this file but you use this delete model in your all project you should be add in your laravel main layout file.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
@if ($message = Session::get('success'))
<div class="custom-alerts alert alert-success fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
{!! $message !!}
</div>
<?php Session::forget('success');?>
@endif
<div class="panel-heading">All Posts</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($post as $key => $value)
<tr>
<td>{!! $value->title !!}</td>
<td>{!! $value->description !!}</td>
<td>
<a class="btn btn-danger waves-effect waves-light remove-record" data-toggle="modal" data-url="{!! URL::route('post-delete', $value->id) !!}" data-id="{{$value->id}}" data-target="#custom-width-modal">Delete</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Delete Model -->
<form action="" method="POST" class="remove-record-model">
<div id="custom-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width:55%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="custom-width-modalLabel">Delete Record</h4>
</div>
<div class="modal-body">
<h4>You Want You Sure Delete This Record?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect remove-data-from-delete-form" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger waves-effect waves-light">Delete</button>
</div>
</div>
</div>
</div>
</form>
@endsection
@section('script')
<script src="{{ asset('custom.js') }}"></script>
@endsection
Look at the below code we are add custom.js file in script section so you must be create this section in your main layout file.
Step : 4 Create custom.js File
Last things we need to create custom.js file in public derectory and simply add following js code for confirm delete popup.
$(document).ready(function(){
// For A Delete Record Popup
$('.remove-record').click(function() {
var id = $(this).attr('data-id');
var url = $(this).attr('data-url');
var token = CSRF_TOKEN;
$(".remove-record-model").attr("action",url);
$('body').find('.remove-record-model').append('<input name="_token" type="hidden" value="'+ token +'">');
$('body').find('.remove-record-model').append('<input name="_method" type="hidden" value="DELETE">');
$('body').find('.remove-record-model').append('<input name="id" type="hidden" value="'+ id +'">');
});
$('.remove-data-from-delete-form').click(function() {
$('body').find('.remove-record-model').find( "input" ).remove();
});
$('.modal').click(function() {
// $('body').find('.remove-record-model').find( "input" ).remove();
});
});
Now we are ready to run our example so run bellow command ro quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/posts
If you want to any problem then please write comment and also suggest for new topic for make tutorials in future. Thanks...
