Widget & Hamlet Template — CompileDaily Study

Penjelasan

Widget adalah unit komposisi UI di Yesod yang menggabungkan HTML (Hamlet), CSS (Lucius/Cassius), dan JavaScript (Julius) menjadi satu kesatuan yang bisa digabung dengan widget lain tanpa duplikasi asset. Berbeda dari template biasa yang hanya menghasilkan string HTML, Widget adalah monoid — banyak widget kecil bisa digabung (mappend) menjadi widget besar, dan Yesod otomatis menggabungkan semua CSS/JS terkait tanpa duplikasi walau widget yang sama dipakai berkali-kali di halaman. Hamlet adalah bahasa template HTML milik Yesod yang whitespace-sensitive (mirip Python), mendukung interpolasi Haskell lewat #{ekspresi} dan kontrol alur seperti $if, $forall, $maybe langsung di dalam markup. defaultLayout adalah fungsi yang membungkus Widget menjadi halaman HTML lengkap sesuai layout yang didefinisikan di Foundation.hs.

Contoh Konsep

produkWidget :: Produk -> Widget
produkWidget p = do
  toWidget [lucius| .produk-card { border: 1px solid \#ccc; padding: 8px; } |]
  toWidget
    [whamlet|
      <div .produk-card>
        <h3>#{produkNama p}
        <p>Rp#{show (produkHarga p)}
    |]

getProdukR :: Handler Html
getProdukR = do
  produkList <- runDB $ selectList [] []
  defaultLayout $ do
    setTitle "Daftar Produk"
    mapM_ (produkWidget . entityVal) produkList

Praktikum

Buat fungsi artikelWidget yang menerima satu Artikel dan menghasilkan Widget berisi judul di dalam tag h2 dan isi di dalam tag p.

Editor Latihan

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

Tips

Hamlet sensitif terhadap indentasi seperti Python, pastikan konsisten memakai spasi (bukan campur tab dan spasi) supaya tidak muncul error parsing yang membingungkan.