Halo teman-teman semuanya, pada artikel-artikel sebelumnya kita telah belajar banyak hal, seperti menampilkan data, insert, edit dan juga update. Pada artikel kali ini kita semua akan belajar bagaimana cara membuat proses delete data dari database di Laravel menggunakan Livewire.
Langkah 1 - Membuat Method Destroy
Disini kita tidak akan membuat component baru, karena kita cukup membuat sebuah method saja di dalam component post index.
Silahkan teman-teman buka file app/Livewire/Posts/Index.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<?php
namespace App\Livewire\Posts;
use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;
class Index extends Component
{
use WithPagination;
/**
* destroy
*
* @param mixed $id
* @return void
*/
public function destroy($id)
{
//destroy
Post::destroy($id);
//flash message
session()->flash('message', 'Data Berhasil Dihapus.');
//redirect
return redirect()->route('posts.index');
}
public function render()
{
return view('livewire.posts.index', [
'posts' => Post::latest()->paginate(5)
]);
}
}
Dari perubahan kode di atas, kita menambahkan method baru dengan nama destoy dan di dalam parameter kita berikan variable $id.
public function destroy($id)
{
//...
}
Di dalamnya kita melakukan delete data dari database menggunakan Model dengan method destroy.
//destroy
Post::destroy($id);
Kemudian kita tampilkan pesan sukses delete data menggunakan session flash dan kita redirect ke route posts.index.
//flash message
session()->flash('message', 'Data Berhasil Dihapus.');
//redirect
return redirect()->route('posts.index');
Langkah 2 - Memanggil Method Destroy di View
Sekarang kita tinggal menambahkan sebuah event di dalam button DELETE, yang nanti kita arahkan ke dalam method destroy.
Silahkan teman-teman buka file resources/views/livewire/posts/index.blade.php, kemudian cari kode berikut ini.
<button class="btn btn-sm btn-danger">DELETE</button>
Dan ubahlah menjadi seperti berikut ini.
<button wire:click="destroy({{ $post->id }})" class="btn btn-sm btn-danger">DELETE</button>
Di atas, kita tambahkan direktif wire:click dan kita arahkan ke method destroy dan di dalamnya kita berikan parameter post ID.
Langkah 3 - 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.
Kesimpulan
Pada artikel ini kita semua telah belajar bagaimana cara menambahkan method di dalam class component untuk proses delete data.
Jika teman-teman ada kendala saat belajar dan mengikuti seri materi ini, maka silahkan bisa bertanya melalui kolom komentar atau bisa juga ke group Telegram SantriKoding.
Terima Kasih