Tutorial Laravel Livewire 3 : #7 Delete Data dari Database


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Laravel Livewire 3 : #7 Delete Data dari Database

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



Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami