Latihan 1 dari materi HTMX dengan Laravel di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya komentar TODO dan <body> berisi <nav> dengan tiga link (Home /, About /about, Todos /todos), plus <main id="content">. Ini layout yang dirender Laravel. Biarkan semuanya, lalu di tag <body>:
hx-boost="true", supaya ketiga link di dalamnya dikirim lewat htmx. Laravel tetap merender halaman penuh, htmx menukar isi <body>, dan <head> gak dimuat ulang.hx-headers='{"X-CSRF-TOKEN": "x7Rk2pQ9"}', supaya setiap request htmx dari halaman ini membawa token CSRF. Di Blade nilainya {{ csrf_token() }}; layout ini sudah dirender, jadi tokennya sudah berupa teks, x7Rk2pQ9.Yang dicek:
<nav> dan <main>.hx-boost dengan nilai persis true, dan link-nya berada di dalam elemen itu.<a> di halaman, dan minimal 3 <a href="..."> di dalam elemen ber-hx-boost.<body> punya hx-headers yang memuat "X-CSRF-TOKEN".hx-boost.Di pratinjau, link yang diklik dikirim htmx sebagai GET /about dengan header HX-Request: true, HX-Boosted: true, dan X-CSRF-TOKEN, lalu dijawab 404 karena belum ada contoh balasan, jadi halamannya gak berubah.
