Request dan Response di HTMX

Published: at 09.25

Dalam pengembangan aplikasi web modern, interaksi antara klien dan server melalui permintaan (request) dan respons (response) adalah hal yang sangat penting. HTMX menyediakan cara yang mudah dan deklaratif untuk mengirim permintaan dan menangani respons menggunakan atribut HTML khusus. Dalam bab ini, kita akan menjelajahi berbagai jenis permintaan yang didukung oleh HTMX, cara memicu permintaan, mengirim data dengan permintaan, menangani respons, serta menangani galat dan kode status HTTP.

3.1 Jenis-jenis Permintaan HTMX (GET, POST, PUT, DELETE)

HTMX mendukung berbagai jenis permintaan HTTP, termasuk GET, POST, PUT, dan DELETE. Setiap jenis permintaan memiliki tujuan dan karakteristik yang berbeda.

Contoh:

<button hx-get="/api/data">Muat Data</button>

Contoh:

<form hx-post="/api/submit">
  <input type="text" name="username" />
  <button type="submit">Kirim</button>
</form>

Contoh:

<form hx-put="/api/update/1">
  <input type="text" name="title" value="Judul Baru" />
  <button type="submit">Perbarui</button>
</form>

Contoh:

<button hx-delete="/api/delete/1">Hapus</button>

Bab 3.2: Memicu Permintaan dengan HTMX

Dalam HTMX, permintaan AJAX dapat dipicu oleh berbagai event atau kondisi yang terjadi pada elemen. Secara default, HTMX memicu permintaan berdasarkan event “natural” pada elemen tertentu, seperti event change untuk elemen input, textarea, dan select, event submit untuk elemen form, dan event click untuk elemen lainnya.

Namun, kita juga dapat menggunakan atribut hx-trigger untuk menentukan event atau kondisi khusus yang akan memicu permintaan.

Penggunaan Atribut hx-trigger

Atribut hx-trigger memungkinkan kita untuk menentukan event atau kondisi yang akan memicu permintaan HTMX. Berikut adalah beberapa contoh penggunaan hx-trigger:

  1. Memicu permintaan saat mouse memasuki elemen:

    <div hx-post="/mouse_entered" hx-trigger="mouseenter">
  [Here Mouse, Mouse!]
</div>

  2. Memicu permintaan hanya sekali:

    <div hx-post="/mouse_entered" hx-trigger="mouseenter once">
  [Here Mouse, Mouse!]
</div>

  3. Memicu permintaan jika nilai elemen berubah:

    <input type="text" hx-get="/search" hx-trigger="keyup changed" />

  4. Memicu permintaan setelah penundaan waktu tertentu:

    <input type="text" hx-get="/search" hx-trigger="keyup delay:500ms" />

  5. Memicu permintaan dengan batasan waktu (throttling):

    <input type="text" hx-get="/search" hx-trigger="keyup throttle:1s" />

  6. Memicu permintaan dari elemen lain:

    <input type="text" hx-get="/search" hx-trigger="keyup from:body" />

Modifier Pemicu

Selain menentukan event, atribut hx-trigger juga mendukung beberapa modifier yang dapat mengubah perilaku pemicu. Berikut adalah beberapa modifier yang dapat digunakan:

Filter Pemicu

HTMX juga mendukung filter pemicu menggunakan ekspresi JavaScript yang diapit dalam tanda kurung siku [] setelah nama event. Ekspresi ini akan dievaluasi, dan jika hasilnya true, permintaan akan dipicu.

Contoh:

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">Control Click Me</div>

Dalam contoh di atas, permintaan hanya akan dipicu jika tombol Ctrl ditekan saat mengklik elemen.

Event Khusus

HTMX menyediakan beberapa event khusus yang dapat digunakan dalam hx-trigger:

Contoh:

<div hx-get="/news" hx-trigger="revealed">
  <!-- Konten akan dimuat saat elemen muncul dalam viewport -->
</div>

Polling

HTMX juga mendukung pemicu polling, di mana elemen akan secara berkala mengirimkan permintaan ke URL tertentu. Kita dapat menggunakan sintaks every dalam atribut hx-trigger untuk mengaktifkan polling.

Contoh:

<div hx-get="/news" hx-trigger="every 2s"></div>

Dalam contoh di atas, permintaan GET akan dikirim ke “/news” setiap 2 detik, dan respons akan dimuat ke dalam elemen <div>.

Jika kita ingin menghentikan polling dari respons server, kita dapat mengembalikan kode respons HTTP 286, dan elemen akan membatalkan polling.

Load Polling

Teknik lain untuk mencapai polling dalam HTMX adalah dengan menggunakan “load polling”. Dalam pendekatan ini, sebuah elemen menentukan pemicu load bersama dengan delay, dan menggantikan dirinya sendiri dengan respons yang diterima.

Contoh:

<div hx-get="/messages" hx-trigger="load delay:1s" hx-swap="outerHTML"></div>

Jika endpoint “/messages” terus mengembalikan <div> yang dikonfigurasi dengan cara ini, elemen akan terus “polling” ke URL tersebut setiap detik.

Load polling dapat berguna dalam situasi di mana polling memiliki titik akhir, seperti saat menampilkan progress bar kepada pengguna.

3.3 Mengirim Data dengan Permintaan HTMX

HTMX memungkinkan Anda mengirim data dengan permintaan menggunakan beberapa metode:

Contoh:

<form hx-post="/api/submit">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <button type="submit">Kirim</button>
</form>

Contoh:

<button
  hx-post="/api/submit"
  hx-vars='{"username": "john", "email": "[email protected]"}'
>
  Kirim
</button>

Contoh:

<button hx-get="/api/search" hx-params="query=htmx&limit=10">Cari</button>

3.4 Menangani Respons dengan HTMX

Setelah permintaan berhasil, HTMX akan menangani respons dari server dan memperbarui DOM sesuai dengan konfigurasi yang ditentukan.

Contoh:

<button hx-get="/api/content" hx-target="#result">Muat Konten</button>
<div id="result"></div>

Contoh:

<div id="message">
  <button hx-get="/api/message" hx-swap="outerHTML">Perbarui Pesan</button>
</div>

Contoh:

<div
  id="result"
  hx-get="/api/content"
  hx-target="#result"
  hx-swap="innerHTML"
  hx-on:htmx:afterSwap="console.log('Konten diperbarui')"
></div>

3.5 Menangani Galat dan Kode Status HTTP

HTMX menyediakan mekanisme untuk menangani galat dan kode status HTTP yang tidak sukses.

Contoh:

<button hx-get="/api/data" hx-on:htmx:error="alert('Terjadi galat!')">
  Muat Data
</button>

Contoh:

<button
  hx-get="/api/data"
  hx-on:htmx:error="alert('Terjadi galat!')"
  hx-on:400="alert('Permintaan tidak valid')"
  hx-on:401="alert('Tidak diautentikasi')"
  hx-on:403="alert('Tidak diizinkan')"
  hx-on:404="alert('Sumber daya tidak ditemukan')"
>
  Muat Data
</button>

Dalam contoh di atas, tindakan yang berbeda akan diambil berdasarkan kode status HTTP yang dikembalikan oleh server. Misalnya, jika server mengembalikan kode status 404, pesan “Sumber daya tidak ditemukan” akan ditampilkan.

Permintaan dan respons adalah inti dari interaksi antara klien dan server dalam aplikasi web. HTMX menyederhanakan proses ini dengan menyediakan atribut deklaratif untuk mengirim permintaan, menangani respons, dan memperbarui DOM secara dinamis.

Dengan memahami berbagai jenis permintaan, cara memicu permintaan, mengirim data dengan permintaan, menangani respons, serta menangani galat dan kode status HTTP, Anda dapat membangun aplikasi web yang interaktif dan responsif menggunakan HTMX.

Dalam bab selanjutnya, kita akan mempelajari lebih lanjut tentang manipulasi DOM menggunakan HTMX, termasuk memuat konten baru, mengganti elemen yang ada, serta menambah dan menghapus elemen secara dinamis. Tetap semangat dalam menjelajahi kemampuan HTMX!