- Langkah 1 - Menambahkan Method Delete di Page Component Index
- Langkah 2 - Uji Coba Delete Data Post
- Kesimpulan
Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah berhasil edit dan update data ke dalam database menggunakan Laravel Livewire 4, lengkap dengan validasi, upload file, dan flash message.
Pada artikel kali ini, kita akan melanjutkan ke tahap terakhir dari proses CRUD, yaitu delete data dari database menggunakan Livewire 4. Di sini kita akan belajar bagaimana cara menghapus data langsung dari halaman index tanpa menggunakan controller dan tanpa menulis JavaScript tambahan.
Langkah 1 - Menambahkan Method Delete di Page Component Index
Untuk proses delete data, kita tidak perlu membuat page component baru. Kita cukup menambahkan method delete di page component index posts yang sudah kita buat sebelumnya.
Silahkan buka file resources/views/pages/posts/⚡index.blade.php. Kemudian ubah kodenya menjadi seperti berikut:
resources/views/pages/posts/⚡index.blade.php
<?php
use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;
new class extends Component
{
use WithPagination;
public function delete($id)
{
$post = Post::findOrFail($id);
// delete data
$post->delete();
// flash message
session()->flash('message', 'Data Post Berhasil Dihapus.');
}
public function render()
{
return $this->view([
// Get all posts with latest pagination
'posts' => Post::latest()->paginate(5),
])
->layout('layouts::app')
->title('Posts List');
}
};
?>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<!-- flash message -->
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<!-- end flash message -->
<a href="/create" wire:navigate
class="btn btn-md btn-success rounded shadow-sm border-0 mb-3">
ADD NEW POST
</a>
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
<table class="table table-bordered">
<thead class="bg-dark text-white">
<tr>
<th scope="col">Image</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col" style="width: 15%">Actions</th>
</tr>
</thead>
<tbody>
@forelse ($posts as $post)
<tr>
<td class="text-center">
<img src="{{ asset('/storage/posts/'.$post->image) }}"
class="rounded" style="width: 150px">
</td>
<td>{{ $post->title }}</td>
<td>{!! $post->content !!}</td>
<td class="text-center">
<a href="/edit/{{ $post->id }}" wire:navigate
class="btn btn-sm btn-primary">
EDIT
</a>
<button
class="btn btn-sm btn-danger"
onclick="confirm('Yakin ingin menghapus data ini?') || event.stopImmediatePropagation()"
wire:click="delete({{ $post->id }})">
DELETE
</button>
</td>
</tr>
@empty
<div class="alert alert-danger">
Data Post belum Tersedia.
</div>
@endforelse
</tbody>
</table>
{{ $posts->links('vendor.pagination.bootstrap-5') }}
</div>
</div>
</div>
</div>
</div>
Dari perubahan kode di atas, kita menambahkan sebuah method baru dengan nama delete dan di dalam parameter kita berikan variable $id.
public function delete($id)
{
// ...
}
Di dalam method delete tersebut, pertama kita ambil data post berdasarkan ID menggunakan findOrFail().
$post = Post::findOrFail($id);
Setelah itu, kita melakukan proses delete data menggunakan method delete().
// delete data
$post->delete();
Kemudian, kita menampilkan pesan sukses delete data menggunakan session flash.
// flash message
session()->flash('message', 'Data Post Berhasil Dihapus.');
Sekarang kita tinggal memanggil method delete di dalam button DELETE pada tabel data posts.
Perhatikan kode button berikut ini.
<button class="btn btn-sm btn-danger">DELETE</button>
Kemudian ubah menjadi seperti berikut ini.
<button
class="btn btn-sm btn-danger"
onclick="confirm('Yakin ingin menghapus data ini?') || event.stopImmediatePropagation()"
wire:click="delete({{ $post->id }})">
DELETE
</button>
Di atas, kita menambahkan directive wire:click dan mengarahkannya ke method delete yang ada di page component, lalu kita kirimkan parameter ID dari post.
wire:click="delete({{ $post->id }})"
Kemudian kita tambahkan konfirmasi sederhana menggunakan confirm(). Jika user menekan Cancel, maka event.stopImmediatePropagation() akan menghentikan event Livewire agar method delete tidak dijalankan.
onclick="confirm('Yakin ingin menghapus data ini?') || event.stopImmediatePropagation()"
Dengan cara ini, kita bisa membuat fitur konfirmasi delete tanpa perlu menulis JavaScript tambahan yang kompleks.
Langkah 2 - Uji Coba Delete Data Post
Silahkan teman-teman klik button DELETE disalah satu data yang teman-teman miliki, jika berhasil maka akan menampilkan hasil seperti berikut ini.
Silahkan klik Ok, maka data akan dihapus dari database dan hasilnya kurang lebih seperti berikut ini.
SOURCE CODE: https://github.com/SantriKoding-com/CRUD-Laravel-Livewire-4
Kesimpulan
Pada artikel ini, kita telah belajar bagaimana cara delete data dari database menggunakan Laravel Livewire 4, langsung dari halaman index menggunakan method di page component, serta menambahkan konfirmasi delete pada button tanpa membuat controller dan tanpa menulis JavaScript tambahan.
Dengan selesainya artikel ini, maka seluruh proses CRUD (Create, Read, Update, Delete) menggunakan Laravel Livewire 4 telah berhasil kita bangun secara lengkap dan modern.
Terima Kasih
SAWERIA
Memuat komentar...