Assalamualaikum Warahmatullahi Wabarakatuh, Pada artikel ini adalah lanjutan dari artikel sebelumnya. Jadi silahkan simak secara runtut untuk dapat lebih mendalami tentang membuat crud sederhana menggunakan laravel 10. Pada sesi kali ini saya akan membahas cara menghapus data dari database menggunakan Laravel 10 dengan Ajax JQuery.
Silahkan lakukan secara berurutan sesuai artikel ini ya
Table of Contents
Routes
Langkah pertama kita mengubah routes terlebih dahulu. Karena pengaksesan awal dari sebuah aplikasi website yang pertama dijalankan adalah membaca routes. Jika client ingin mengakses url tertentu, maka sistem akan membaca melalui rotes terlebih dahulu apakah url/route tesebut tersedia atau nggak atau methodnya diperbolehkan apa tidak.
Silahkan salin kode dibawah ini
Route::delete('{id}/hapus',[ BukuController::class, "hapusData" ])->name('hapusData');Kali ini kita hanya menggunakan route delete, yang dimana hanya bisa diakses oleh method http delete. Jadi tanpa perlu membuat view/tampilan lain.
Kode diatas kita masih tetap menggunakan BukuController sebagai controllernya, lalu akan mengeksekusi function hapusData untuk proses penghapusan data pada database.
Ubah Controller
Kita ubah terlebih dahulu pada function dataTables. Karena didalam kode tersebut terdapat button untuk menghapus data, kita harus memodifikasi sesuai yang kita butuhkan. Silahkan ubah pada function dataTable seluruhnya menggunakan kode dibawah ini.
public function dataTable(Request $request)
{
$totalFilteredRecord = $totalDataRecord = $draw_val = "";
$columns_list = array(
0 =>'judul_buku',
1 =>'tahun_terbit',
2=> 'stok_buku',
3=> 'gambar_buku',
4=> 'id',
);
$totalDataRecord = Buku::count();
$totalFilteredRecord = $totalDataRecord;
$limit_val = $request->input('length');
$start_val = $request->input('start');
$order_val = $columns_list[$request->input('order.0.column')];
$dir_val = $request->input('order.0.dir');
if(empty($request->input('search.value')))
{
$buku_data = Buku::offset($start_val)
->limit($limit_val)
->orderBy($order_val,$dir_val)
->get();
} else {
$search_text = $request->input('search.value');
$buku_data = Buku::where('id','LIKE',"%{$search_text}%")
->orWhere('judul_buku', 'LIKE',"%{$search_text}%")
->offset($start_val)
->limit($limit_val)
->orderBy($order_val,$dir_val)
->get();
$totalFilteredRecord = Buku::where('id','LIKE',"%{$search_text}%")
->orWhere('judul_buku', 'LIKE',"%{$search_text}%")
->count();
}
$data_val = array();
if(!empty($buku_data))
{
foreach ($buku_data as $buku_val)
{
$url = route('ubahData',['id' => $buku_val->id]);
$urlHapus = route('hapusData',$buku_val->id); // kode baru
$bukunestedData['judul_buku'] = $buku_val->judul_buku;
$bukunestedData['tahun_terbit'] = $buku_val->tahun_terbit;
$bukunestedData['stok_buku'] = $buku_val->stok_buku;
$bukunestedData['gambar_buku'] = "<img src='$buku_val->gambar_buku' class='img-thumbnail' width='200px'>";
$bukunestedData['options'] = "<a href='$url'><i class='fas fa-edit fa-lg'></i></a> <a style='border: none; background-color:transparent;' class='hapusData' data-id='$buku_val->id' data-url='$urlHapus'><i class='fas fa-trash fa-lg text-danger'></i></a>"; // kode baru
$data_val[] = $bukunestedData;
}
}
$draw_val = $request->input('draw');
$get_json_data = array(
"draw" => intval($draw_val),
"recordsTotal" => intval($totalDataRecord),
"recordsFiltered" => intval($totalFilteredRecord),
"data" => $data_val
);
echo json_encode($get_json_data);
}
untuk mengetahui perubahannya dimana, silahkan lihat pada comment // kode baru .
Setelah itu buka app/Http/Controllers/BukuController.php, silahkan tambahkan kode dibawah ini didalam class BukuControllers, pastikan method hapusData harus ada ya, karena pada routes kita mendefinisikan method yang kita panggil ialah method hapusData.
public function hapusData($id)
{
$buku = Buku::findOrFail($id);
if ($buku->gambar_buku && file_exists(public_path().$buku->gambar_buku)) {
// hapus gambar
unlink(public_path().$buku->gambar_buku);
}
// hapus data
$buku->delete($id);
return response()->json([
'msg' => 'Data yang dipilih telah dihapus'
]);
}Penjelasan:
Pada function hapusData terdapat 1 params, yaitu variable id sebagai menerima data id dari url.
Setelah itu kita cek apakah dengan id tersebut terdapat data serupa apa nggak. Jika terdapat data yang sama maka akan mengambil data tersebut lalu disimpan ke dalam varaiable buku. Jika tidak terdapat data, maka akan langsung http 404 yang berarti data tersebut tidak ada.
if ($buku->gambar_buku && file_exists(public_path().$buku->gambar_buku)) {
// hapus gambar
unlink(public_path().$buku->gambar_buku);
}Jika gambar_buku valuenya tidak kosong dan terdapat file yang serupa didalam alamat gambar tersebut, maka akan terjadi proses penghapusan file.
Setelah proses penghapusan file lama selesai, sistem akan melanjutkan ke penghapusan data pada database berdasarkan id yang akan ditunjukkan pada kode dibawah;
// hapus data
$buku->delete($id);Terakhir, akan membuat response berupa json yang berisi pesan data berhasil dihapus.
return response()->json([
'msg' => 'Data yang dipilih telah dihapus'
]);
Layouting
Langkah terakhir kita layouting blade. Silahkan buka file pada folder resources/views/crudapp/index.blade.php, silahkan ubah kode lama menggunakan kode baru seperti dibawah ini;
<html>
<head>
<title>Membuat CRUD sederhana menggunakan Laravel 9</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<!-- Font Awesome JS -->
<script
defer="defer"
src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
crossorigin="anonymous"></script>
<script
defer="defer"
src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<center>
<h1>Membuat CRUD sederhana menggunakan Laravel 9</h1>
<h3>Afrizal's Blog</h3>
</center>
<br/>
<br/>
<div class="container">
<a class="btn btn-primary" href="{{ route('tambahData') }}">Tambah data</a>
<table
id="crudapp"
class="table table-striped table-bordered"
style="width:100%">
<thead>
<tr>
<th>Judul Buku</th>
<th>Tahun Terbit</th>
<th>Stok Buku</th>
<th>Gambar Buku</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
type="text/javascript"
src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script
type="text/javascript"
src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
// tabel data
$('#crudapp').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "{{ route('dataTable') }}",
"dataType": "json",
"type": "POST",
"data": {
_token: "{{csrf_token()}}"
}
},
"columns": [
{
"data": "judul_buku"
}, {
"data": "tahun_terbit"
}, {
"data": "stok_buku"
}, {
"data": "gambar_buku"
}, {
"data": "options"
}
],
"language": {
"decimal": "",
"emptyTable": "Tak ada data yang tersedia pada tabel ini",
"info": "Menampilkan _START_ hingga _END_ dari _TOTAL_ entri",
"infoEmpty": "Menampilkan 0 hingga 0 dari 0 entri",
"infoFiltered": "(difilter dari _MAX_ total entri)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Tampilkan _MENU_ entri",
"loadingRecords": "Loading...",
"processing": "Sedang Mengambil Data...",
"search": "Pencarian:",
"zeroRecords": "Tidak ada data yang cocok ditemukan",
"paginate": {
"first": "Pertama",
"last": "Terakhir",
"next": "Selanjutnya",
"previous": "Sebelumnya"
},
"aria": {
"sortAscending": ": aktifkan untuk mengurutkan kolom ascending",
"sortDescending": ": aktifkan untuk mengurutkan kolom descending"
}
}
});
// hapus data
$('#crudapp').on('click', '.hapusData', function () {
var id = $(this).data("id");
var url = $(this).data("url");
Swal
.fire({
title: 'Apa kamu yakin?',
text: "Kamu tidak akan dapat mengembalikan ini!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, hapus!',
cancelButtonText: 'Batal'
})
.then((result) => {
if (result.isConfirmed) {
// console.log();
$.ajax({
url: url,
type: 'DELETE',
data: {
"id": id,
"_token": "{{csrf_token()}}"
},
success: function (response) {
// console.log();
Swal.fire('Terhapus!', response.msg, 'success');
$('#crudapp').DataTable().ajax.reload();
}
});
}
})
});
});
</script>
{{-- <script>
$(document).ready(function () {
$('#example').DataTable();
});
</script> --}}
</body>
</html>Penjelasan:
Silahkan fokus pada kode dibawah ini yang merupakan proses penghapusan data melalui ajax JQuery
// hapus data
$('#crudapp').on('click', '.hapusData', function () {
var id = $(this).data("id");
var url = $(this).data("url");
Swal
.fire({
title: 'Apa kamu yakin?',
text: "Kamu tidak akan dapat mengembalikan ini!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, hapus!',
cancelButtonText: 'Batal'
})
.then((result) => {
if (result.isConfirmed) {
$.ajax({
url: url,
type: 'DELETE',
data: {
"id": id,
"_token": "{{csrf_token()}}"
},
success: function (response) {
Swal.fire('Terhapus!', response.msg, 'success');
$('#crudapp').DataTable().ajax.reload();
}
});
}
})
});pada kode diatas jika kita menekan tombol icon sampah, maka akan menampilkan box dari sweetalert untuk konfimasi penghapusan data.
Untuk proses pertama kita mendapatkan data id dan url yang didapatkan dari kode html ini
data-id='$buku_val->id' data-url='$urlHapus'setelah itu akan muncul box dari sweetalert untuk konfimasi penghapusan data.
Jika kalian menekan tombol `ya hapus!`, maka akan menjalankan proses ajax untuk menghapus data
if (result.isConfirmed) {
$.ajax({
url: url,
type: 'DELETE',
data: {
"id": id,
"_token": "{{csrf_token()}}"
},
success: function (response) {
Swal.fire('Terhapus!', response.msg, 'success');
$('#crudapp').DataTable().ajax.reload();
}
});
}url kita isikan pada variable url yang didapatkan dari data-url tadi.
type kita pilih DELETE karena kita hanya membutuhkan proses penghapusan data.
data ini berisikan id data pada database yang didapatkan dari data-id tadi dan _token berisikan csrf token untuk membuktikan bahwa request ini benar dari laravel itu sendiri bukan dari request luar
jika sukses terhapus maka akan menampilkan box dari sweetalert yang menyatakan bahwa data telah terhapus. Selain itu data pada dataTable akan mereload secara otomatis tanpa refresh halaman.
success: function (response) {
Swal.fire('Terhapus!', response.msg, 'success');
$('#crudapp').DataTable().ajax.reload();
}
Jalankan Server
Akhir dari sesi ini, pastinya kalian harus cobain dong.
Jalankan server local kalian, bisa menggunakan perintah dibawah ini
php artisan servemaupun jika menggunakan laragon atau apapun. setelah itu silahkan buka melalui browser lalu akses ke url domain-mu/
Hasil Percobaan
Silahkan lihat video ini
Oke sampai sini kita telah berhasil melakukan hapus data dengan Ajax JQuery dengan framework Laravel 9.
Wassalamualaikum Warahmatullahi Wabarakatuh.
File project bisa di unduh disini.
Baca sesi lainnya:
Belajar Laravel 10 : A simple guide CRUD app - Menambah Data
Belajar Laravel 10 : A simple guide CRUD app - Menampilkan Data
Belajar Laravel 10 : A simple guide CRUD app - Mengubah Data
Belajar Laravel 10 : A simple guide CRUD app - Menghapus Data
Comments