Latihan 1: Apa itu HTMX? — HTMX

Latihan 1 dari materi Apa itu HTMX? di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah benar, tinggal dibaca lalu dijalankan:

Baca tombolnya: <button hx-get="/api/hello" hx-target="#result">. Saat diklik, tombol ini meminta /api/hello dan menaruh balasannya di #result.
Biarkan <div id="result"></div> di bawahnya. Itu tempat tujuan balasannya.
Tekan Run Test.

Yang dicek:

Ada <button> di halaman.
Tombol itu sendiri punya hx-get dan hx-target="#result".
Ada elemen ber-id result.
Kodenya memuat hx-get dan hx-target di luar komentar.

Di pratinjau, htmx berjalan: klik tombolnya mengirim GET /api/hello, yang dijawab 404 karena belum ada contoh balasan, jadi #result tetap kosong. Mau melihatnya terisi? Tambahkan <template id="contoh-balasan"><p>Halo dari server!</p></template> di bawahnya. Template itu gak dinilai.

Hint

htmx bekerja lewat atribut di tag HTML: satu atribut menyebut alamat yang diminta, satu lagi menyebut ke mana balasannya ditaruh.
Kedua atribut itu menempel di tag button yang sama, dan elemen tujuannya, yang ber-id result, harus ada di halaman.
<button hx-get="/api/hello" hx-target="#result">Klik saya</button> <div id="result"></div>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Apa itu HTMX? — HTMX

Hint

Memperbarui Aplikasi