Dalam pengembangan aplikasi web modern, manipulasi riwayat (history) browser menjadi fitur yang sangat penting. Dengan menggunakan HTMX, kita dapat dengan mudah memanipulasi riwayat browser tanpa harus menulis kode JavaScript yang kompleks. Dalam bab ini, kita akan mempelajari bagaimana Push URL ke riwayat browser, mengganti URL saat ini, serta mengaktifkan dan menonaktifkan fitur riwayat dalam HTMX.
6.1 Push URL ke Riwayat Browser
HTMX memungkinkan kita untuk Push URL baru ke riwayat browser menggunakan atribut hx-push-url. Dengan menggunakan atribut ini, kita dapat memperbarui URL browser tanpa memuat ulang halaman secara penuh.
Contoh:
<a href="/halaman-baru" hx-push-url="true">Menuju Halaman Baru</a>
Dalam contoh di atas, ketika tautan diklik, HTMX akan mengirim permintaan GET ke “/halaman-baru” dan Push URL tersebut ke riwayat browser. Ini memungkinkan pengguna untuk menggunakan tombol “kembali” dan “maju” pada browser untuk menavigasi antar halaman tanpa memuat ulang halaman secara penuh.
Kita juga dapat menggunakan atribut hx-push-url pada elemen lain, seperti tombol atau formulir, untuk Push URL ke riwayat browser setelah tindakan tertentu dilakukan.
Contoh:
<form hx-post="/simpan-data" hx-push-url="true">
<div>
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
</div>
<div>
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" required></textarea>
</div>
<button type="submit">Simpan</button>
</form>
Dalam contoh ini, setelah formulir berhasil dikirim dan data disimpan, HTMX akan Push URL “/simpan-data” ke riwayat browser, memungkinkan pengguna untuk kembali ke halaman sebelumnya jika diperlukan.
6.2 Mengganti URL Saat Ini
Selain Push URL baru ke riwayat browser, HTMX juga memungkinkan kita untuk mengganti URL saat ini tanpa memuat ulang halaman. Kita dapat menggunakan atribut hx-replace-url untuk mencapai hal ini.
Contoh:
<button hx-get="/halaman-baru" hx-replace-url="true">Perbarui URL</button>
Dalam contoh di atas, ketika tombol diklik, HTMX akan mengirim permintaan GET ke “/halaman-baru” dan mengganti URL saat ini dengan URL tersebut tanpa Pushnya ke riwayat browser. Ini berguna ketika kita ingin memperbarui URL tanpa menambahkan entri baru ke riwayat browser.
6.3 Mengaktifkan dan Menonaktifkan Riwayat HTMX
Secara default, HTMX akan secara otomatis mengelola riwayat browser saat melakukan permintaan AJAX. Namun, terkadang kita mungkin ingin menonaktifkan fitur ini untuk halaman atau bagian tertentu dari aplikasi web kita.
Untuk menonaktifkan riwayat HTMX secara global, kita dapat mengatur nilai false pada atribut hx-history.
Contoh:
<body hx-history="false">
<!-- Konten halaman -->
</body>
Dengan mengatur hx-history="false" pada elemen <body>, HTMX tidak akan melakukan manipulasi riwayat browser untuk semua permintaan AJAX yang dilakukan di dalam elemen tersebut.
Kita juga dapat menonaktifkan riwayat HTMX pada elemen tertentu menggunakan atribut hx-history="false" pada elemen itu sendiri.
Contoh:
<div hx-history="false">
<button hx-get="/data">Muat Data</button>
</div>
Dalam contoh ini, permintaan AJAX yang dipicu oleh tombol di dalam <div> tidak akan memengaruhi riwayat browser karena atribut hx-history="false" diterapkan pada elemen <div> tersebut.
Sebaliknya, jika kita ingin mengaktifkan kembali riwayat HTMX setelah menonaktifkannya, kita dapat menggunakan atribut hx-history="true" pada elemen yang sesuai.
Contoh:
<body hx-history="false">
<!-- Konten halaman -->
<div hx-history="true">
<button hx-get="/data">Muat Data</button>
</div>
</body>
Dalam contoh ini, meskipun riwayat HTMX dinonaktifkan secara global pada elemen <body>, permintaan AJAX yang dipicu oleh tombol di dalam <div> akan tetap memengaruhi riwayat browser karena atribut hx-history="true" diterapkan pada elemen <div> tersebut.
Nah, itu dia penjelasan lengkap tentang manipulasi riwayat (history) dengan HTMX. Dengan menggunakan atribut seperti hx-push-url, hx-replace-url, dan hx-history, kita dapat dengan mudah mengontrol bagaimana HTMX berinteraksi dengan riwayat browser.
Push URL baru ke riwayat memungkinkan pengguna untuk menavigasi antar halaman menggunakan tombol “kembali” dan “maju” pada browser, sementara mengganti URL saat ini memungkinkan kita untuk memperbarui URL tanpa menambahkan entri baru ke riwayat.
Selain itu, kita juga dapat mengaktifkan atau menonaktifkan fitur riwayat HTMX secara global atau pada elemen tertentu sesuai kebutuhan aplikasi web kita.
Dengan pemahaman yang baik tentang manipulasi riwayat dalam HTMX, kita dapat menciptakan pengalaman pengguna yang lebih baik dan intuitif dalam aplikasi web kita. Jadi, jangan ragu untuk bereksperimen dan menerapkan teknik-teknik ini dalam proyek HTMX Anda!