Laravel 8 Simple Delete Confirmation with Bootstrap

simple delete confirmation laravel

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..

brillian

Leave a Reply

%d bloggers like this:
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Adblockers perform their job via blocking communication with ad-forcing servers, and by hiding the webpage elements containing commercial content. By referring to filter lists containing the addresses of ad servers, ad blockers seek matches in website elements and define what should be blocked.

Adblocking detection in its turn is performed through “bait content”. Invisible to the user, such bait is implemented the way adblockers recognize it as commercial content. As soon as the webpage finishes loading, the detection algorithm calls to the properties of the bait. If the bait is hidden, the algorithm recognizes that there’s an active adblocker. Although baits are different and have different levels of complexity, it’s not that hard to disable adblock detection.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock