Membuat Konfirmasi Saat menghapus data menggunakan Laravel 5 dan ajax
Jurnalcode.com

Membuat Konfirmasi Saat menghapus data di Laravel 5

Membuat Konfirmasi Saat menghapus data menggunakan Laravel 5 dan ajax


Jurnalcode : Kali ini saya akan membuat sebuah tutorial bagaimana membuat konfirmasi sebelum melakukan delete data menggunakan laravel yang dikombinasikan dengan javascript ajax.  teknik ini sangat dibutuhkan dan sering digunakan saat membuat aplikasi .

nah langsung saja kita ke pokok pembahasan sekarang langsung saja buat sebuah database dengan nama produk

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);

kemudian silahkan instal Laravel nya dan silahkan Tambahkan Route seperti dibawah ini  Routes/web.php :

Route::get('myproducts', '[email protected]');
Route::delete('myproducts/{id}', '[email protected]');

setelah itu silahkan buat controller dengan nama  ProductController.php di app/Http/Controllers/ProductController.php dan tambahkan code berikut :

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use DB;

class ProductController extends Controller
{
    public function index()
    {
        $products = DB::table("products")->get();
        return view('products',compact('products'));
    }


    public function destroy($id)
    {
    	DB::table("products")->delete($id);
    	return response()->json(['success'=>"Product Deleted successfully.", 'tr'=>'tr_'.$id]);
    }
}

 

Kemudian Buat View nya di resources/views/products.blade.php dengan nama file products.blade.php  dan isi dengan code berikut , kali ini saya menggunakan bootstrap sebagai kombinasi untuk layout.

<!DOCTYPE html>
<html>
<head>

    <title>Jurnalcode Konfimasi Delete</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() }}">
</head>
<body>
<div class="container">
    <h3>Jurnalcode Konfimasi Delete</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>

dan silahkan akses aplikasi kamu dan coba semoga berhasil . terimkasih

 

 

 

 

.

Ayo Komentar