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 :
Baca Juga : Membuat CRUD dengan Laravel 9
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:listLangkah 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 :
min saya mau tanya, saya sudah ikutin tapi kok pas di klik tombolny tidak muncul apa2 ya ?
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