Form Handling (yesod-form) — CompileDaily Study

Penjelasan

yesod-form adalah library form Yesod yang applicative, artinya form didefinisikan dengan menggabungkan beberapa field lewat operator applicative (<$> dan <*>) menjadi satu form utuh yang otomatis menghasilkan validasi, tampilan HTML, dan proses parsing hasil submit sekaligus. Field seperti areq (required) dan aopt (optional) dipasangkan dengan tipe field seperti textField, intField, atau boolField. Di handler, form dijalankan dengan runFormPost yang mengembalikan tiga hal: hasil FormResult (bisa FormSuccess, FormFailure, atau FormMissing), widget untuk merender form itu sendiri, dan encoding type untuk file upload. Pola ini memastikan validasi tipe data terjadi otomatis — misalnya intField akan otomatis menolak input non-angka sebelum sampai ke logic aplikasi.

Contoh Konsep

produkForm :: Form Produk
produkForm = renderDivs $ Produk
  <$> areq textField "Nama" Nothing
  <*> areq intField "Harga" Nothing
  <*> aopt textField "Deskripsi" Nothing

getProdukNewR :: Handler Html
getProdukNewR = do
  (widget, enctype) <- generateFormPost produkForm
  defaultLayout [whamlet|
    <form method=post action=@{ProdukNewR} enctype=#{enctype}>
      ^{widget}
      <button>Simpan
  |]

postProdukNewR :: Handler Html
postProdukNewR = do
  ((result, _), _) <- runFormPost produkForm
  case result of
    FormSuccess produk -> runDB (insert_ produk) >> redirect ProdukR
    _ -> defaultLayout [whamlet|<p>Form tidak valid|]

Praktikum

Buat artikelForm dengan field judul (required, text) dan isi (required, text), lalu handler postArtikelNewR yang menyimpan hasil form ke database.

Editor Latihan

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

Tips

Gunakan renderDivs untuk styling form cepat berbasis div, atau renderBootstrap3 jika project sudah memakai Bootstrap agar markup form lebih rapi tanpa CSS custom.