Logo

Tutorial CRUD dengan Laravel Livewire Untuk Membuat Aplikasi Dinamis

  • Coding
  • Alfin Ardiansyah
  • 18 Sep 2024

Apabila sebelumnya kita sudah membahas tentang apa itu Laravel Livewire, maka kali ini kita akan membuat aplikasi dinamis dan interaktif tanpa perlu menggunakan JavaScript. Salah satu implementasi paling umum dalam pengembangan aplikasi web adalah operasi CRUD (Create, Read, Update, Delete). Dengan Livewire, Anda bisa dengan mudah membangun fitur CRUD yang real-time tanpa harus melakukan reload halaman.

Pada artikel ini, kita akan membahas cara membuat aplikasi CRUD menggunakan Laravel Livewire, mulai dari persiapan proyek hingga implementasi CRUD.

Persiapan Proyek Laravel dan Livewire

Sebelum kita mulai, pastikan Anda sudah menginstal Laravel dan Livewire pada proyek Anda. Jika belum, ikuti langkah-langkah berikut:

Instalasi Laravel
Jika Anda belum memiliki proyek Laravel, buat proyek baru dengan perintah berikut :

composer create-project --prefer-dist laravel/laravel crud-livewire

Instalasi Livewire
Setelah Laravel terinstal, tambahkan Livewire ke proyek Anda:

composer require livewire/livewire

Konfigurasi Blade
Tambahkan direktif Livewire di file layout Blade Anda (biasanya resources/views/layouts/app.blade.php), tepat sebelum tag </head> dan </body> :

@livewireStyles
@livewireScripts

Membuat Tabel Database

Untuk menyimpan data, kita perlu membuat tabel di database. Mari kita buat migration untuk tabel posts:

php artisan make:model Post -m 

Edit file migration di database/migrations untuk menambahkan kolom yang dibutuhkan:

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('content');
    $table->timestamps();
});

Setelah itu, jalankan migration:

php artisan migrate

Membuat Komponen Livewire

Setelah tabel dibuat, buat model untuk Post dan komponen Livewire yang akan menangani operasi CRUD.

Membuat Komponen Livewire CRUD
Buat komponen Livewire yang akan menangani operasi CRUD:

php artisan make:livewire PostCrud

Perintah ini akan menghasilkan dua file:

  • app/Http/Livewire/PostCrud.php untuk logika back-end
  • resources/views/livewire/post-crud.blade.php untuk tampilan front-end

Implementasi CRUD di Komponen Livewire

Mari kita tambahkan logika CRUD di dalam komponen PostCrud.php.

1. Menampilkan Data (Read)

Di dalam PostCrud.php, kita akan mengambil data dari tabel posts dan menampilkannya di tampilan Blade:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Post;

class PostCrud extends Component
{
    public $posts;

    public function render()
    {
        $this->posts = Post::all();
        return view('livewire.post-crud');
    }
}

2. Menambahkan Data (Create)

Tambahkan properti untuk menyimpan input pengguna dan fungsi untuk menambah data:

public $title, $content;

public function store()
{
    $this->validate([
        'title' => 'required',
        'content' => 'required',
    ]);

    Post::create([
        'title' => $this->title,
        'content' => $this->content,
    ]);

    session()->flash('message', 'Post berhasil ditambahkan.');
    $this->resetInputFields();
}

private function resetInputFields()
{
    $this->title = '';
    $this->content = '';
}

3. Memperbarui Data (Update)

Tambahkan logika untuk memperbarui data:

public $post_id;

public function edit($id)
{
    $post = Post::findOrFail($id);
    $this->post_id = $post->id;
    $this->title = $post->title;
    $this->content = $post->content;
}

public function update()
{
    $this->validate([
        'title' => 'required',
        'content' => 'required',
    ]);

    $post = Post::find($this->post_id);
    $post->update([
        'title' => $this->title,
        'content' => $this->content,
    ]);

    session()->flash('message', 'Post berhasil diperbarui.');
    $this->resetInputFields();
}

4. Menghapus Data (Delete)

Tambahkan fungsi untuk menghapus data:

public function delete($id)
{
    Post::find($id)->delete();
    session()->flash('message', 'Post berhasil dihapus.');
}

Tampilan Blade (UI)

Sekarang, kita akan menambahkan tampilan antarmuka pengguna untuk menampilkan, menambahkan, memperbarui, dan menghapus data. Edit file post-crud.blade.php:

<div>
    @if (session()->has('message'))
        <div>{{ session('message') }}</div>
    @endif

    <form wire:submit.prevent="store">
        <input type="text" wire:model="title" placeholder="Judul">
        <textarea wire:model="content" placeholder="Konten"></textarea>
        <button type="submit">Simpan</button>
    </form>

    <h3>Daftar Post</h3>
    <ul>
        @foreach($posts as $post)
            <li>
                {{ $post->title }} - {{ $post->content }}
                <button wire:click="edit({{ $post->id }})">Edit</button>
                <button wire:click="delete({{ $post->id }})">Hapus</button>
            </li>
        @endforeach
    </ul>
</div>

Menghubungkan Komponen ke Route

Agar komponen Livewire dapat diakses dari browser, tambahkan rute di file web.php:

use App\Http\Livewire\PostCrud;

Route::get('posts', PostCrud::class);

Menjalankan Aplikasi

Sekarang, jalankan aplikasi dengan perintah:

php artisan serve

Akses aplikasi melalui browser dengan mengunjungi http://localhost:8000/posts. Di sini, Anda akan melihat formulir untuk menambah post dan daftar post yang sudah ditambahkan, lengkap dengan fitur edit dan hapus.

CRUD dengan Laravel Livewire memudahkan pengembang untuk membangun aplikasi dinamis dan interaktif tanpa perlu menggunakan JavaScript. Dengan Livewire, operasi CRUD dapat dilakukan dengan cepat dan efisien, langsung dari server, sehingga Anda dapat membangun aplikasi yang powerful dengan kode yang lebih sedikit dan lebih sederhana. Jika Anda baru mengenal Laravel atau ingin menghindari kompleksitas JavaScript, Livewire adalah pilihan yang tepat.

Baca berbagai artikel menarik dan berbagai macam tutorial hanya di RuangBacaku