Phoenix

LiveView Dasar (mount/render/handle_event)

Penjelasan

LiveView memungkinkan Phoenix membangun UI interaktif yang ter-update secara real-time hanya dengan Elixir di server, tanpa menulis JavaScript custom untuk logic. Sebuah LiveView minimal punya tiga callback penting: mount/3 yang dijalankan saat koneksi pertama kali dibuat untuk menyiapkan state awal lewat assign, render/1 yang mengembalikan template HEEx untuk ditampilkan, dan handle_event/3 yang menangani event dari client seperti klik tombol. Setiap perubahan assign akan otomatis membuat Phoenix mengirim diff HTML minimal lewat WebSocket ke browser, sehingga halaman terasa reaktif seperti aplikasi single-page tanpa perlu membangun API terpisah. Ini bekerja karena LiveView menyimpan proses state di server (per koneksi), bukan di client.

Contoh Konsep

defmodule TokoAppWeb.CounterLive do
  use TokoAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, count: 0)}
  end

  def render(assigns) do
    ~H"""
    <div>
      <p>Hitungan: {@count}</p>
      <button phx-click="tambah">Tambah</button>
    </div>
    """
  end

  def handle_event("tambah", _params, socket) do
    {:noreply, update(socket, :count, &(&1 + 1))}
  end
end

Praktikum

Buat LiveView sederhana bernama LampuLive dengan assign status boolean nyala, dan event toggle untuk membalik nilainya.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Daftarkan route LiveView dengan live "/path", NamaLive di router.ex, bukan dengan get seperti controller biasa.

← Kembali Context Module (Phoenix Contexts Pattern) Lanjutkan → LiveView State & Assigns