Laravel 8 Simple Delete Confirmation with Bootstrap

Setup Aplikasi

Langkah Pertama

Install Laravel 8

Pada langkah ini, silahkan teman-teman install laravel dulu, disini saya menggunakan laravel versi 8. Saya menggunakan composer untuk menginstallnya.

composer create-project laravel/laravel:^8.0 laravel-datatable

cd example-app
 
php artisan serve

Jika teman-teman menggunakan install laravel global bisa gunakan kode berikut:

composer global require laravel/installer
 
laravel new laravel-datatable
 
cd laravel-datatable
 
php artisan serve

Namun, jika menggunakan cara tersebut. Project kita akan menggunakan versi terbaru dari laravel. Sedangkan requirement di laravel terbaru terkadang berbeda.

Route

Route::resource('spj',EntrySpjController::class);

Saya menggunakan Route Resource bawaan dari laravel. Method @destroy yang akan kita gunakan pada delete confirmation ini.

Tombol Hapus

<a class="dropdown-item delete" data-toggle="modal" data-target="#modal-delete" data-id="{{ $dt->id }}"><i class="fa fa-trash" aria-hidden="true"></i> Hapus</a>

Pad script di atas, tambahkan attribute “data-id”. fungsinya untuk menyimpan nilai ID yang akan kita gunakan untuk menghapus data sesuai dengan ID nya tersebut.

Kemudian, teman-teman buat sebuah modal. Saya contohkan adalah modal delete.

Modal Delete

<!-- Modal -->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Info</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Apakah Anda yakin akan menghapus? #
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tidak</button>
                {!! Form::open(['route' => ['spj.destroy', 3], 'method' => 'delete']) !!}
                {!! Form::hidden('id',null,['id'=>'id-destroy']) !!}
                <button type="submit" class="btn btn-danger">Ya</button>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

Pada modal delete diatas. tambahkan

Javascript

       $(document).on('click', '.delete', function() {
            let id = $(this).attr('data-id');
            $('#id-destroy').val(id);
        });

Selesai..