Menu docs ＋

Catatan Belajar · · 2 menit baca

Belajar Livewire: Laravel interaktif tanpa JavaScript

Tutorial Livewire 3: instalasi satu perintah, komponen counter pertama, pencarian live dengan wire:model.live, dan validasi tanpa reload — filosofi yang sama dengan HTMX di situs ini.

Livewire 3LaravelPHP

Livewire membuat halaman Laravel jadi interaktif — tanpa menulis JavaScript dan tanpa membangun API. Komponen PHP-mu dirender ulang di server setiap kali user berinteraksi, mirip filosofi HTMX yang kupakai di situs ini, tapi menyatu penuh dengan Laravel.

1. Instalasi

Prasyarat: project Laravel yang sudah jalan (lihat tutorial Laravel). Lalu:

composer require livewire/livewire

Selesai. Livewire 3 menyuntikkan asset-nya otomatis — tidak perlu menambah @livewireStyles/@livewireScripts manual selama layout-mu punya tag <html> normal.

2. Komponen pertama: counter

php artisan make:livewire counter

Perintah itu membuat dua file:

// app/Livewire/Counter.php
namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public int $count = 0;          // public property = state

    public function increment()     // public method = aksi dari browser
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

{{-- resources/views/livewire/counter.blade.php --}}
<div>
    <h2>{{ $count }}</h2>
    <button wire:click="increment">+1</button>
</div>

Pasang di halaman mana pun:

<livewire:counter />

Klik tombolnya: Livewire mengirim request ke server, menjalankan increment(), merender ulang komponen, dan menukar HTML-nya di browser. Kamu tidak menulis satu baris JavaScript pun.

3. Form real-time dengan wire:model

// app/Livewire/CariProduk.php
class CariProduk extends Component
{
    public string $kata = '';

    public function render()
    {
        return view('livewire.cari-produk', [
            'produk' => Produk::where('nama', 'like', "%{$this->kata}%")->take(10)->get(),
        ]);
    }
}

<div>
    <input type="text" wire:model.live.debounce.300ms="kata" placeholder="Cari produk..." />
    <ul>
        @foreach ($produk as $p)
            <li>{{ $p->nama }}</li>
        @endforeach
    </ul>
</div>

wire:model.live.debounce.300ms = setiap ketikan (dengan jeda 300ms) memicu render ulang — pencarian live tanpa endpoint API, tanpa fetch, tanpa state management.

4. Validasi langsung di komponen

public function simpan()
{
    $this->validate([
        'nama'  => 'required|min:3',
        'harga' => 'required|integer|min:0',
    ]);
    Produk::create(['nama' => $this->nama, 'harga' => $this->harga]);
    $this->reset();
    session()->flash('sukses', 'Produk tersimpan.');
}

@error('nama') <span class="error">{{ $message }}</span> @enderror

Pesan error muncul di bawah input tanpa reload — pola yang sama dengan form kontak HTMX di situs ini, tapi versi Laravel-nya.

Tips dari pengalaman

  • Elemen root komponen Livewire harus satu <div> pembungkus — dua elemen root adalah sumber bug klasik.
  • Pakai wire:model.live hanya saat perlu real-time; default wire:model (update saat submit) jauh lebih hemat request.
  • Livewire cocok untuk dashboard admin dan form CRUD; untuk halaman publik yang butuh SEO + kecepatan maksimal, render biasa (Blade murni) tetap lebih ringan.

Mau fitur seperti ini dibangun untuk bisnismu?

Mulai projectDocs lainnya