Realtime Partial Rendering

LamdaPHP menggunakan pendekatan Server-Side HTML Injection untuk fitur realtime-nya. Ini berarti server merender potongan HTML (Partial View) yang sudah berisi data terbaru, lalu mengirimkannya ke browser untuk menggantikan tampilan lama secara otomatis.

Keuntungan: Anda tidak perlu menulis logika rendering Javascript di frontend. Cukup gunakan syntax @foreach PHP biasa di file view Anda.

1 Buat Partial View (Component)

Pisahkan bagian HTML yang ingin di-update secara realtime ke file terpisah. Ini memudahkan controller untuk merender hanya bagian ini saja.

resources/views/components/_annon.lamda.php

<!-- Loop PHP standar, tidak perlu template JS -->
@foreach($annon as $a)
    <div class="bg-white p-4 rounded-lg border-l-4 border-indigo-500">
        <h3 class="font-bold text-lg">{{ $a['title'] }}</h3>
        <p class="text-sm mt-2">
            {{ substr($a['content'], 0, 20) }}....
        </p>
    </div>
@endforeach

2 Siapkan Container di View Utama

Di halaman utama, gunakan atribut data-bind="kunci_unik" pada elemen pembungkus. LamdaPHP akan mencari elemen ini untuk menginjeksikan HTML baru.

resources/views/beranda.lamda.php

<!-- Atribut data-bind="annon" adalah target update -->
<div class="space-y-4" data-bind="annon">
    
    @foreach($annon as $a)
    <div class="bg-white p-4 rounded-lg border-l-4 border-indigo-500">
        <h3 class="font-bold text-lg">{{ $a['title'] }}</h3>
        <p class="text-sm mt-2">
            {{ substr($a['content'], 0, 20) }}....
        </p>
    </div>
@endforeach

</div>

3 Controller Logic

Di controller, cek apakah request adalah permintaan realtime. Jika ya, render partial view ke dalam string dan kirimkan menggunakan Response::sendRealtime.

App/Http/Controllers/AnnoncementController.php

public function beranda() {
    $annon = Annoncement::all();

    // 1. Render partial view ke variabel string
    $view = $this->view('components._annon', compact('annon'));

    // 2. Cek Realtime Request
    if (Request::realtime()) {
        // Kirim array: key 'annon' harus cocok dengan data-bind="annon" di HTML
        return Response::sendRealtime(['annon' => $view]);
    }

    // 3. Render Normal (Halaman penuh)
    return $this->view('beranda', compact('annon'));
}

Flow Eksekusi:

User mengakses halaman, controller me-return view beranda penuh.
Client secara otomatis melakukan koneksi realtime.
Jika ada trigger update, controller menjalankan blok if(Request::realtime()).
Variable $view berisi HTML matang (bukan JSON data mentah).
Browser menerima HTML tersebut dan langsung menukar isi div[data-bind="annon"].

Triggering Realtime Update

Cara mengirim event dari server agar client melakukan realtime render ulang.

Realtime rendering di LamdaPHP tidak berjalan otomatis ketika data berubah. Developer harus mengirim trigger event dari server agar client mengetahui bahwa terdapat perubahan data yang perlu dirender ulang.

Gunakan method berikut:

EventDispatcher::dispatch();

Method ini akan mencatat event ke event.queue dan memberi sinyal kepada semua client yang sedang terkoneksi realtime bahwa terdapat perubahan data.

Contoh Penggunaan

public function store(){
    $input = Request::input();
    Annoncement::create($input);

    // Trigger realtime update ke client
    EventDispatcher::dispatch();

    return $this->redirect('/dashboard');
}

Bagaimana Prosesnya?

Server menyimpan atau mengubah data
EventDispatcher::dispatch() dipanggil
Event dicatat di event.queue
Koneksi realtime (SSE) mendeteksi event baru
Client menerima sinyal update
Client melakukan realtime request ke server
Controller menjalankan blok Request::realtime()
Server mengirim partial HTML terbaru
HTML diinject ke DOM tanpa reload halaman

Kapan Harus Memanggil Dispatch?

Setelah create data
Setelah update data
Setelah delete data
Setiap perubahan yang mempengaruhi tampilan realtime

Previous Views & Templates

Next Step Model & Database