Validasi, Create, Update dan Delete data pada Laravel 10 #7

Selanjutnya kita akan membuat route menghapus data, langkah awal silahkan tambahkan code berikut pada file students.blade.php setelah tombol edit :

<form onsubmit="return deleteData('{{ $row->fullname }}')" style="display: inline"
      method="GET" action="{{ url('destroy/' . $row->idstudents) }}">
      @csrf
      @method('DELETE')
      <button type="submit" title="Hapus Data" class="btn btn-sm btn-info">
      <i class="fa fa-trash"></i> 
      </button>
</form>  

Penjelasan :

Kode tersebut adalah sebuah formulir dalam HTML yang memiliki fungsi untuk menghapus data.

• form: adalah tag HTML untuk membuat formulir.
• onsubmit="return deleteData('{{ $row->fullname }}')": disini ada event onsubmit yang akan memanggil fungsi JavaScript deleteData saat formulir disubmit. Fungsi ini akan menerima parameter berupa nama lengkap (‘fullname’) dari data yang akan dihapus.
• style="display: inline": ini adalah atribut CSS inline yang membuat formulir memiliki display inline, kata lain formulir ini akan berada sejajar dengan elemen sebelumnya.
• method="GET": ini adalah metode HTTP yang digunakan oleh formulir untuk mengirim data ke server.
• action="{{ url('destroy/' . $row->idstudents) }}": ini adalah URL tujuan saat formulir ini disubmit. Pesan akan dikirim ke URL tersebut dan akan menghapus data siswa dengan id yang sesuai.
• @csrf: ini adalah tag blade Laravel untuk men-generate token CSRF. Ini adalah fitur keamanan yang mencegah serangan CSRF.
• @method('DELETE'): Metode ini memberitahu server bahwa ini adalah request DELETE, yang biasanya digunakan untuk menghapus data.
• button: berfungsi sebagai tombol submit untuk formulir. Ketika tombol ini ditekan, formulir tersebut akan di-submit.
• <i class="fa fa-trash"></i>: ini adalah ikon keranjang sampah yang diambil dari font awesome.

Selanjutnya tambahkan script berikut di bawah div paling akhir pada file students.blade.php

<script>
   function deleteData(name) {
      pesan = confirm(`Yakin data students dengan nama ${name} ini dihapus ?`);
      if (pesan) return true;
      else return false;
   }
</script>

Penjelasan :

Fungsi deleteData(name) adalah sebuah fungsi JavaScript yang berfungsi untuk memastikan sebelum data siswa dengan nama tertentu dihapus.

1. Parameter fungsi name digunakan sebagai input nama siswa yang akan dihapus.
2. confirm(....): Fungsi ini dipanggil untuk menampilkan kotak dialog konfirmasi dengan pesan “Yakin data siswa dengan nama ini dihapus?”, dimana ${name} akan digantikan dengan nilai dari parameter name.
3. Jika pengguna membuka kotak dialog konfirmasi dan memilih “OK”, maka confirm() akan mengembalikan true dan karena itu if (pesan) return true akan dieksekusi, maka fungsi deleteData akan mengembalikan true.
4. Namun, jika pengguna memilih “Cancel” dalam kotak dialog, maka confirm() akan mengembalikan false dan else return false akan dieksekusi. Sehingga fungsi deleteData akan mengembalikan false.

Sehingga, hasil dari fungsi ini (true atau false) akan menjadi hasil dari event “onsubmit” dalam form HTML, jika false maka pengiriman form (penghapusan data) akan dibatalkan dan jika true maka form akan dikirimkan (data akan dihapus).

Langkah selanjutnya tambahkan method destroy pada file StudentsController.php berikut :

public function destroy(Students $students, $idstudents)
{
   $data = $students->find($idstudents);
   $data->delete();
   return redirect('students')->with('msg', 'Data dengan nama students '.$data->fullname.' berhasil di-hapus');
}

Penjelasan :

Kode tersebut adalah metode destroy dalam suatu kelas controller dalam kerangka kerja Laravel. Fungsinya adalah untuk menghapus data siswa berdasarkan id tertentu.

1. public function destroy(Students $students, $idstudents): Ini adalah deklarasi metode destroy() yang membutuhkan dua parameter: objek $students dan $idstudents.
2. $data = $students->find($idstudents);: Ini mencari data siswa berdasarkan $idstudents menggunakan metode find(). Hasil dari find() ini akan ditempatkan ke dalam variabel $data.
3. $data->delete();: Ini memanggil metode delete() pada objek $data yang merupakan hasil dari metode find(). Ini akan menghapus data siswa dari database.
4. return redirect('students')->with('msg', 'Data dengan nama students '.$data->fullname.' berhasil di-hapus'): Untuk yang terakhir, ini mengarahkan pengguna kembali ke halaman ‘students’ dan memberikan pesan bahwa data siswa dengan nama tertentu telah berhasil dihapus.

Lalu selanjutnya tambahkan code berikut pada file web.php

Route::get('/destroy/{idstudents}', [StudentsController::class, 'destroy'])->name('destroy');

Penjelasan :

Kode tersebut adalah bagian dari routing dalam kerangka kerja Laravel, dan fungsinya adalah untuk mendefinisikan rute GET pada URL ‘/destroy/{idstudents}’.

1. Route::get('/destroy/{idstudents}', [StudentsController::class, 'destroy'])->name('destroy'); : Pada kode ini, Laravel akan mengarahkan permintaan HTTP GET ke URL ‘/destroy/{idstudents}’ ke metode ‘destroy’ pada class ‘StudentsController’.
2. ‘/destroy/{idstudents}’: Dalam URL ini, {idstudents} adalah parameter yang dinamis yang akan diterima oleh metode ‘destroy’ di ‘StudentsController’. Nilai ini biasanya diisi dengan ID siswa yang ingin dihapus.
3. [StudentsController::class, 'destroy']: Ini menspesifikkan ke mana rute tersebut harus diarahkan. Kode ini mengarahkan ke metode ‘destroy’ pada class ‘StudentsController’.
4. ->name('destroy');: Bagian ini merujuk pada penamaan rute tersebut, dengan memberikan nama alias yaitu ‘destroy’ agar dapat diakses lebih mudah di tempat lain dalam kode Anda.

Dengan demikian, ketika user mengakses halaman dengan URL ‘/destroy/{idstudents}’ (dengan {idstudents} digantikan dengan ID siswa tertentu), maka Laravel otomatis akan mengeksekusi metode ‘destroy’ dari class ‘StudentsController’.

Dan hasilnya adalah sebagai berikut :