HTMX menyediakan berbagai fitur yang memungkinkan kita untuk memanipulasi DOM (Document Object Model) secara dinamis tanpa perlu menulis kode JavaScript yang kompleks. Dalam bab ini, kita akan menjelajahi beberapa teknik manipulasi DOM menggunakan HTMX, termasuk memuat konten baru, mengganti elemen yang ada, menambah dan menghapus elemen, serta menggunakan pemilih (selector) untuk menargetkan elemen tertentu.
4.1 Memuat Konten Baru dengan HTMX
Salah satu kegunaan utama HTMX adalah memuat konten baru ke dalam halaman web secara dinamis. Dengan menggunakan atribut hx-get atau hx-post, kita dapat meminta konten baru dari server dan menyisipkannya ke dalam elemen target yang ditentukan.
Contoh:
<div id="content">
<h2>Daftar Produk</h2>
<ul>
<li>Produk 1</li>
<li>Produk 2</li>
</ul>
<button hx-get="/load-more-products" hx-target="#content" hx-swap="afterend">
Muat Lebih Banyak
</button>
</div>
Dalam contoh di atas, kita memiliki sebuah daftar produk yang ditampilkan dalam elemen <div> dengan id “content”. Tombol “Muat Lebih Banyak” menggunakan atribut hx-get untuk mengirimkan permintaan GET ke URL “/load-more-products” ketika ditekan. Atribut hx-target menentukan bahwa konten baru akan disisipkan setelah elemen <div> dengan id “content”. Atribut hx-swap dengan nilai afterend menginstruksikan HTMX untuk menyisipkan konten baru setelah elemen target.
Ketika tombol “Muat Lebih Banyak” ditekan, HTMX akan mengirimkan permintaan ke server untuk memuat lebih banyak produk. Server kemudian dapat mengembalikan respons HTML yang berisi daftar produk tambahan. HTMX akan secara otomatis menyisipkan konten baru tersebut setelah elemen <div> yang ada, sehingga daftar produk akan bertambah tanpa perlu memuat ulang seluruh halaman.
4.2 Mengganti Elemen dengan HTMX
Selain memuat konten baru, HTMX juga memungkinkan kita untuk mengganti elemen yang ada dengan konten yang diambil dari server. Kita dapat menggunakan atribut hx-target untuk menentukan elemen target yang akan diganti.
Contoh:
<div id="profile">
<h2>Profil Pengguna</h2>
<p>Nama: John Doe</p>
<p>Email: [email protected]</p>
<button hx-get="/load-profile" hx-target="#profile" hx-swap="outerHTML">
Perbarui Profil
</button>
</div>
Dalam contoh di atas, kita memiliki sebuah elemen <div> dengan id “profile” yang menampilkan informasi profil pengguna. Tombol “Perbarui Profil” menggunakan atribut hx-get untuk mengirimkan permintaan GET ke URL “/load-profile” ketika ditekan. Atribut hx-target menentukan bahwa elemen <div> dengan id “profile” akan menjadi target penggantian. Atribut hx-swap dengan nilai outerHTML menginstruksikan HTMX untuk mengganti seluruh elemen target dengan konten baru yang diterima dari server.
Ketika tombol “Perbarui Profil” ditekan, HTMX akan mengirimkan permintaan ke server untuk memuat profil pengguna yang diperbarui. Server kemudian dapat mengembalikan respons HTML yang berisi informasi profil yang diperbarui. HTMX akan secara otomatis mengganti seluruh elemen <div> yang ada dengan konten baru tersebut, sehingga informasi profil pengguna akan diperbarui tanpa perlu memuat ulang seluruh halaman.
4.3 Menambah dan Menghapus Elemen dengan HTMX
HTMX juga menyediakan kemampuan untuk menambahkan dan menghapus elemen pada halaman web secara dinamis. Dengan menggunakan atribut hx-swap, kita dapat menentukan bagaimana konten baru harus diintegrasikan ke dalam DOM.
Contoh menambahkan elemen:
<ul id="todoList">
<li>Tugas 1</li>
<li>Tugas 2</li>
</ul>
<form hx-post="/add-todo" hx-target="#todoList" hx-swap="beforeend">
<input type="text" name="task" placeholder="Tugas baru" />
<button type="submit">Tambah Tugas</button>
</form>
Dalam contoh di atas, kita memiliki sebuah daftar tugas dalam elemen <ul> dengan id “todoList”. Terdapat juga sebuah formulir yang digunakan untuk menambahkan tugas baru. Formulir menggunakan atribut hx-post untuk mengirimkan permintaan POST ke URL “/add-todo” ketika dikirimkan. Atribut hx-target menentukan bahwa elemen <ul> dengan id “todoList” akan menjadi target penambahan tugas baru. Atribut hx-swap dengan nilai beforeend menginstruksikan HTMX untuk menyisipkan konten baru sebelum akhir elemen target.
Ketika formulir dikirimkan, HTMX akan mengirimkan permintaan POST ke server dengan data tugas baru yang dimasukkan oleh pengguna. Server kemudian dapat memproses permintaan tersebut dan mengembalikan respons HTML yang berisi elemen <li> baru untuk tugas yang ditambahkan. HTMX akan secara otomatis menyisipkan elemen <li> baru tersebut ke dalam daftar tugas yang ada.
Contoh menghapus elemen:
<ul id="todoList">
<li>
Tugas 1
<button
class="delete-btn"
hx-delete="/delete-todo/1"
hx-target="closest li"
hx-swap="delete"
>
Hapus
</button>
</li>
<li>
Tugas 2
<button
class="delete-btn"
hx-delete="/delete-todo/2"
hx-target="closest li"
hx-swap="delete"
>
Hapus
</button>
</li>
</ul>
Dalam contoh di atas, setiap tugas dalam daftar memiliki tombol “Hapus” dengan atribut hx-delete yang mengirimkan permintaan DELETE ke URL yang sesuai ketika ditekan. Atribut hx-target dengan nilai closest li menentukan bahwa elemen <li> terdekat akan menjadi target penghapusan. Atribut hx-swap dengan nilai delete menginstruksikan HTMX untuk menghapus elemen target setelah permintaan berhasil.
Ketika tombol “Hapus” ditekan, HTMX akan mengirimkan permintaan DELETE ke server untuk menghapus tugas yang sesuai. Server kemudian dapat memproses permintaan tersebut dan mengembalikan respons kosong atau pesan sukses. HTMX akan secara otomatis menghapus elemen <li> yang terkait dari daftar tugas.
4.4 Menggunakan Pemilih (Selector) dengan HTMX
HTMX mendukung penggunaan pemilih (selector) CSS untuk menargetkan elemen tertentu dalam manipulasi DOM. Kita dapat menggunakan pemilih dalam atribut seperti hx-target dan hx-indicator untuk menentukan elemen yang akan dipengaruhi.
Contoh penggunaan pemilih:
<div>
<p id="message" class="text-muted">Pesan awal</p>
<button
hx-post="/update-message"
hx-target="#message"
hx-swap="outerHTML"
hx-indicator=".loading-spinner"
>
Perbarui Pesan
</button>
<div class="loading-spinner" style="display: none;">
<img src="loading.gif" alt="Loading..." />
</div>
</div>
Dalam contoh di atas, atribut hx-target menggunakan pemilih #message untuk menargetkan elemen dengan id “message”. Ketika tombol “Perbarui Pesan” ditekan, HTMX akan mengirimkan permintaan POST ke URL “/update-message” dan mengganti konten elemen <p> dengan id “message” dengan respons dari server menggunakan atribut hx-swap dengan nilai outerHTML.
Atribut hx-indicator menggunakan pemilih .loading-spinner untuk menargetkan elemen dengan kelas “loading-spinner”. Ketika permintaan sedang dalam proses, HTMX akan secara otomatis menampilkan elemen dengan kelas “loading-spinner” sebagai indikator loading. Setelah permintaan selesai, indikator loading akan disembunyikan kembali.
Pemilih dalam HTMX juga mendukung penggunaan pemilih yang lebih kompleks, seperti pemilih kelas (.class), pemilih atribut ([attribute]), dan kombinasi pemilih (selector1 selector2). Ini memberikan fleksibilitas dalam menargetkan elemen yang spesifik untuk manipulasi DOM.
Bacaan Lanjutan Mengenai Swapping di HTMX
Dengan menggunakan teknik-teknik manipulasi DOM yang disediakan oleh HTMX, kita dapat dengan mudah memuat konten baru, mengganti elemen yang ada, serta menambah dan menghapus elemen pada halaman web secara dinamis. Penggunaan pemilih yang fleksibel juga memungkinkan kita untuk menargetkan elemen tertentu dengan mudah.
HTMX menyederhanakan proses manipulasi DOM dengan memberikan atribut dan perilaku yang intuitif, sehingga kita dapat membuat antarmuka pengguna yang interaktif dan responsif tanpa perlu menulis kode JavaScript yang kompleks. Ini membuat pengembangan aplikasi web menjadi lebih efisien dan mudah dipelihara.
Dalam bab selanjutnya, kita akan menjelajahi lebih lanjut fitur-fitur canggih HTMX, seperti pemicu (trigger) khusus, permintaan yang ditunda (deferred requests), dan integrasi dengan pustaka pihak ketiga. Tetap semangat dalam mempelajari HTMX dan jangan ragu untuk bereksperimen dengan berbagai teknik manipulasi DOM yang telah kita pelajari!