Membuat Modal Delete Data Pada Laravel

Halo, kali ini saya akan membagi pengalaman bagaimana cara membuat Modal Delete Data menggunakan SweetAlert pada Website Framework Laravel. 

    Pada suatu website CRUD (Create, Read , Update, Delete) tidak luput dari namanya Delete yang berfungsi untuk menghapus data. Untuk menghapus data tersebut kita membutuhkan konfimasi terlebih dahulu sebelum melakukan eksekusi atau penghapusan data secara langsung contoh Tampilan seperti dibawah ini.

Gambar diatas terdiri dari 2 pilihan : Cancel : berfungsi jika kita tidak jadi menghapus data tersebut, Sedangkan OK : berfungsi jika kita jadi menghapus data tersebut .

Langsung saja ke tutorialnya, ikuti dengan sabar dan teliti :

1.    Anda copy script CDN sweet alert  terlebih dahulu dibawah ini :

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

2.     Lalu Paste pada file app.blade.php diatas tag </body>  yang berada pada folder layouts dan save.

3.     Buka file blade yang ingin menggunakan modal sweet alert 

        Untuk menggunakan sweet alert pada tombol Delete tersebut berdasarkan id  letakan script                    dibawah ini pada tombol delete

        

                  <a href="#" class="genric-btn danger circle modal-delete" data-id="{{ $data->id  }}" 

                   data-judul="{{ $data->judul_tes }}">Delete</a>

    Keterangan : tambahkan modal-delete pada ujung class.

                 perhatikan pada script bagian class="genric-btn danger circle modal-delete"    

4.    Copy script dibawah ini letakan pada file yang sama dengan tombol delete , lalu paste kan diatas           tag </body>

<script>
      $('.modal-delete').click( function(){
                  var judulid = $(this).attr('data-id');
                  var judul_data = $(this).attr('data-judul');
                  swal({
                      title: "Yakin?",
                      text: "kamu akan menghapus data dengan judul desain "+judul_data+"",
                      icon: "warning",
                      buttons: true,
                      dangerMode: true,
                      })
                      .then((willDelete) => {
                      if (willDelete) {
                          window.location = "/delete/judulData/"+judulid+"" 
                          swal("Data berhasil dihapus", {
                          icon: "success",
                          });
                      } else {
                          swal("Data Tidak Jadi dihapus");
                      }
                      });
              })
                          
          </script>
     

    Keterangan

   -  $('.modal-delete') = Sebagai penanda modal pada bagian class

   - var judulid = $(this).attr('data-id'); 

     Berfungsi menampung nilai yang diambil dari properti data-id pada button delete

   - var judul_data = $(this).attr('data-judul');
     Berfungsi menampung nilai yang diambil dari properti data-judul pada button delete, 
     lalu ditampilkan pada bagian  text: "kamu akan menghapus data dengan judul desain "+judul_data+"",

   - window.location = "/delete/judul/"+judulid+""

     Berfungsi menjalankan pada route

5. Sekarang bagian route, cari folder routes lalu cari file web.php, berfungsi mengarahkan ke id pada Controllers EditJudul lalu menjalankan class "delete" 

   versi menggunakan Role

 //Route Modal Delete 

Route::middleware('role:user')->get('/delete/judulData/{id}',

        [EditJudul::class, 'delete'])->name('delete_judul');

    versi tidak menggunakan Role

 //Route Modal Delete 

Route::get('/delete/judulData/{id}',

        [EditJudul::class, 'delete'])->name('delete_judul');

6.Selesai. Untuk dokumentasi SweetAlert bisa klik Disini