BLANTERORIONv101

Membuat Konfirmasi Hapus Data menggunakan SweetAlert2 pada Laravel

27 Mei 2022
Membuat Konfirmasi Hapus Data menggunakan SweetAlert2 pada Laravel
Pada postingan kali ini saya akan membahas tentang Cara Membuat Konfirmasi Hapus Data menggunakan SweetAlert pada Laravel. Disini kita akan menggunakan Box SweetAlert2 untuk membuat konfirmasi Ya atau Tidak sebelum menghapus data.

Tentunya konfirmasi Sweetalert ini sangat penting sebelum kita melakukan penghapusan data dan lebih baik dari pada kita menghapus data secara langsung.

Cara ini kita bisa gunakan pada versi Laravel 5, Laravel 6, Laravel 7, Laravel 8 dan Laravel 9. Mari kita langsung ke langkah awal :


Langkah 1 : Tambahkan Route

Kita perlu untuk menambahkan rute terlebih dahulu untuk menghapus data.

Route::delete('mahasiswa/destroy/{id}', [MahasiswaController::class, 'destroy'])->name('mahasiswa.destroy');

Jika Anda menggunakan route dengan tipe resource, silahkah cek route destroy atau hapus di list route Anda, anda bisa jalankan perintah di bawah ini untuk melihat list route Anda.

php artisan route:list

Langkah 2 : Tambahkan Metode Hapus

Tambahkan metode pada controller anda.

public function destroy($id)
    {
        $mahasiswa = Mahasiswa::find($id);
        $mahasiswa->delete();

        return response()->json(['status' => 'Mahasiswa Berhasil di hapus!']);
    }

Langkah 3 : File Blade

Anda perlu untuk menambahkan tag input dibawah foreach dan di dalam tag <tr>.

<input type="hidden" class="delete_id" value="{{ $hasil->id }}">

Kemudian untuk buttonnya, bisa dibuat seperti kode dibawah ini.

<form action="{{ route('mahasiswa.destroy', $hasil->id) }}" method="POST">
	@csrf
	@method('delete')
	<button class="btn btn-danger btn-sm btndelete">Hapus</button>
</form>

Dan setelah itu tambahkan script js di atas tag penutup body </body>.


<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script>
    $(document).ready(function () {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.btndelete').click(function (e) {
            e.preventDefault();

            var deleteid = $(this).closest("tr").find('.delete_id').val();

            swal({
                    title: "Apakah anda yakin?",
                    text: "Setelah dihapus, Anda tidak dapat memulihkan Tag ini lagi!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {

                        var data = {
                            "_token": $('input[name=_token]').val(),
                            'id': deleteid,
                        };
                        $.ajax({
                            type: "DELETE",
                            url: 'mahasiswa/destroy/' + deleteid,
                            data: data,
                            success: function (response) {
                                swal(response.status, {
                                        icon: "success",
                                    })
                                    .then((result) => {
                                        location.reload();
                                    });
                            }
                        });
                    }
                });
        });

    });

</script>

Dan untuk file blade lengkapnya seperti dibawah ini :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>SarjanaIT</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>
  <body>
    
    <div class="container mt-5">
        <h1 class="text-center mb-5">Data Mahasiswa</h1>
        <a href="{{ route('mahasiswa.create') }}" class="btn btn-primary mb-3">Tambah Data</a>
        @if (session('success'))
            <div class="alert alert-success" role="alert">
                {{ session('success') }}
            </div>
        @endif
        <div class="card">
            <div class="card-body">
                <table class="table">
                    <thead>
                        <th>NO</th>
                        <th>NIM</th>
                        <th>NAMA</th>
                        <th>JURUSAN</th>
                        <th>AKSI</th>
                    </thead>
                    <tbody>
                        @if ($mahasiswa->count() > 0)
                        @foreach ($mahasiswa as $no => $hasil)
                        <tr>
                            <input type="hidden" class="delete_id" value="{{ $hasil->id }}">
                            <th>{{ $no+1 }}</th>
                            <td>{{ $hasil->nim }}</td>
                            <td>{{ $hasil->nama }}</td>
                            <td>{{ $hasil->jurusan }}</td>
                            <td>
                                <form action="{{ route('mahasiswa.destroy', $hasil->id) }}" method="POST">
                                    @csrf
                                    @method('delete')
                                    <a href="{{ route('mahasiswa.edit', $hasil->id) }}" class="btn btn-success btn-sm">Edit</a>
                                    <button class="btn btn-danger btn-sm">Hapus</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                        @else
                        <tr>
                            <td colspan="10" align="center">Tidak ada data</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    <script>
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.btndelete').click(function (e) {
                e.preventDefault();

                var deleteid = $(this).closest("tr").find('.delete_id').val();

                swal({
                        title: "Apakah anda yakin?",
                        text: "Setelah dihapus, Anda tidak dapat memulihkan Data ini lagi!",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {

                            var data = {
                                "_token": $('input[name=_token]').val(),
                                'id': deleteid,
                            };
                            $.ajax({
                                type: "DELETE",
                                url: 'mahasiswa/' + deleteid,
                                data: data,
                                success: function (response) {
                                    swal(response.status, {
                                            icon: "success",
                                        })
                                        .then((result) => {
                                            location.reload();
                                        });
                                }
                            });
                        }
                    });
            });

        });

    </script>
  </body>
</html>

Kurang lebih sepeti cara diatas untuk Membuat Konfirmasi Hapus Data menggunakan SweetAlert pada Laravel, saya harap ini dapat berhasil untuk Anda. Jika terdapat kendala ada bisa bertanya pada kolom komentar dibawah ini, terimakasih.

Video Tutorial :



2 komentar

  1. Little
    Little 31 Juli 2022 01.48

    min saya mau tanya, saya sudah ikutin tapi kok pas di klik tombolny tidak muncul apa2 ya ?

    Reply
    • SarjanaIT
      31 Juli 2022 09.37

      Coba klik kanan kemudian inspect lalu pilih console dan refresh halaman setelah itu klik lagi buttonnya... lihat error yg muncul apa?

      Pastikan ID yang di tambahkan di buttonnya sama dengan ID yang di tangkap pada jsnya