HTMX Simple Jos | Tutorial Web

Daftar Isi

Pengenalan HTMX 1.1. Apa itu HTMX? 1.2. Keuntungan Menggunakan HTMX 1.3. Perbandingan HTMX dengan Pendekatan Lain
Arsitektur Aplikasi yang Didorong oleh Hypermedia (HDA) 2.1. Apa itu Arsitektur HDA? 2.2. Contoh Penerapan Arsitektur HDA 2.3. Peran Scripting dalam Arsitektur HDA
Perbedaan antara API Hypermedia dan API Data 3.1. Karakteristik API Hypermedia 3.2. Karakteristik API Data 3.3. Desain API Hypermedia 3.4. Perubahan API dalam Sistem Hypermedia
Memulai dengan HTMX 4.1. Instalasi HTMX 4.2. Contoh Sederhana Penggunaan HTMX 4.3. Atribut-atribut HTMX
Studi Kasus: Membangun Aplikasi Kontak dengan HTMX 5.1. Persiapan Proyek 5.2. Menampilkan Daftar Kontak 5.3. Menambahkan Kontak Baru 5.4. Memperbarui Daftar Kontak Secara Berkala
Kesimpulan

1. Pengenalan HTMX

1.1. Apa itu HTMX?

HTMX adalah sebuah library kecil yang memungkinkan Anda mengakses AJAX, CSS Transitions, WebSockets, dan Server Sent Events langsung dalam HTML menggunakan atribut. Dengan HTMX, Anda dapat membangun antarmuka pengguna modern dengan kesederhanaan dan kekuatan hypertext.

1.2. Keuntungan Menggunakan HTMX

HTMX memiliki beberapa keuntungan, di antaranya:

Ukurannya kecil (sekitar 14KB setelah di-minify dan di-gzip)
Tidak memiliki dependensi eksternal
Dapat diperluas sesuai kebutuhan
Kompatibel dengan IE11
Terbukti mengurangi ukuran basis kode hingga 67% dibandingkan dengan menggunakan React

1.3. Perbandingan HTMX dengan Pendekatan Lain

Berbeda dengan pendekatan tradisional dalam pengembangan web, HTMX menghilangkan batasan-batasan berikut:

Hanya elemen <a> dan <form> yang dapat membuat permintaan HTTP
Hanya event click dan submit yang dapat memicu permintaan HTTP
Hanya metode GET dan POST yang tersedia
Hanya dapat mengganti seluruh layar

Dengan menghilangkan batasan-batasan ini, HTMX melengkapi HTML sebagai sebuah hypertext yang utuh.

2. Arsitektur Aplikasi yang Didorong oleh Hypermedia (HDA)

2.1. Apa itu Arsitektur HDA?

Arsitektur Hypermedia-Driven Application (HDA) adalah pendekatan baru/lama dalam membangun aplikasi web. Arsitektur ini menggabungkan kesederhanaan dan fleksibilitas dari Multi-Page Applications (MPA) tradisional dengan pengalaman pengguna yang lebih baik dari Single-Page Applications (SPA).

2.2. Contoh Penerapan Arsitektur HDA

Berikut adalah contoh penggalan kode yang menunjukkan penerapan arsitektur HDA menggunakan HTMX:

<h3>
  Search Contacts
  <span class="htmx-indicator"> <img src="/img/bars.svg" /> Searching... </span>
</h3>
<input
  class="form-control"
  type="search"
  name="search"
  placeholder="Begin Typing To Search Users..."
  hx-post="/search"
  hx-trigger="keyup changed delay:500ms, search"
  hx-target="#search-results"
  hx-indicator=".htmx-indicator"
/>

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="search-results"></tbody>
</table>

Dalam contoh ini, ketika pengguna mengetik di kolom pencarian, setelah jeda singkat, hasil pencarian akan mengisi tabel di bawahnya. Hal ini dicapai sepenuhnya dalam HTML menggunakan atribut HTMX.

2.3. Peran Scripting dalam Arsitektur HDA

Dalam arsitektur HDA, scripting (seperti JavaScript) digunakan terutama untuk meningkatkan pengalaman pengguna di sisi klien. Beberapa pendekatan scripting yang sesuai dengan arsitektur HDA adalah:

hyperscript
Alpine.js
Vanilla JavaScript (ketika disematkan langsung pada elemen HTML)

Scripting melengkapi hypermedia (HTML) yang ada, tetapi tidak menggantikan atau mengganggu arsitektur REST dasar dari HDA.

3. Perbedaan antara API Hypermedia dan API Data

3.1. Karakteristik API Hypermedia

API hypermedia memiliki karakteristik sebagai berikut:

Akan menjadi REST-ful secara alami, karena sesuai dengan deskripsi Roy Fielding
Harus didorong oleh kebutuhan aplikasi hypermedia yang mendasarinya
Dapat berubah secara dramatis tanpa informasi versi, karena hypermedia menggunakan pesan yang menjelaskan dirinya sendiri
Harus diteruskan langsung ke manusia untuk memaksimalkan fleksibilitas sistem

3.2. Karakteristik API Data

Di sisi lain, API data memiliki karakteristik sebagai berikut:

Tidak akan mendapatkan manfaat yang signifikan dari sifat REST-ful, selain mungkin Level 2 dari Richardson Maturity Model
Harus berusaha untuk mencapai keteraturan dan ekspresivitas karena kebutuhan data yang arbitrer dari konsumen
Harus memiliki versi dan harus sangat stabil dalam versi API tertentu
Harus dikonsumsi oleh kode, diproses, dan kemudian berpotensi disajikan kepada manusia

3.3. Desain API Hypermedia

Ketika merancang API hypermedia, Anda harus menggunakan pola pikir desain yang berbeda dari yang Anda gunakan untuk API data. Perubahan (churn) jauh lebih tidak menjadi perhatian, dan menyediakan titik akhir (endpoint) yang Anda butuhkan untuk pengalaman hypermedia yang baik harus menjadi tujuan utama Anda.

3.4. Perubahan API dalam Sistem Hypermedia

Perubahan API dalam sistem hypermedia tidak menjadi masalah karena pesan dalam sistem hypermedia bersifat menjelaskan dirinya sendiri. Kita dapat mengubah API secara signifikan dan aplikasi tidak akan rusak: pengguna manusia hanya akan melihat hypermedia (HTML) yang baru dan memilih tindakan yang ingin mereka lakukan.

4. Memulai dengan HTMX

4.1. Instalasi HTMX

Untuk menggunakan HTMX dalam proyek Anda, cukup sertakan skrip berikut dalam dokumen HTML Anda:

<script src="https://unpkg.com/[email protected]"></script>

4.2. Contoh Sederhana Penggunaan HTMX

Berikut adalah contoh sederhana penggunaan HTMX:

<button hx-post="/clicked" hx-swap="outerHTML">Click Me</button>

Atribut hx-post dan hx-swap pada tombol ini memberi tahu HTMX:

“Ketika pengguna mengklik tombol ini, kirim permintaan AJAX ke /clicked, dan ganti seluruh tombol dengan respons HTML”

4.3. Atribut-atribut HTMX

HTMX menyediakan berbagai atribut yang dapat Anda gunakan untuk memanipulasi permintaan dan respons. Beberapa atribut umum meliputi:

hx-get / hx-post / hx-put / hx-delete: Menentukan metode HTTP yang digunakan untuk permintaan
hx-target: Menentukan elemen target untuk menempatkan respons
hx-trigger: Menentukan pemicu untuk permintaan (misalnya, click, change, dll.)
hx-swap: Menentukan strategi penukaran untuk menampilkan respons (misalnya, outerHTML, innerHTML, dll.)

Untuk daftar lengkap atribut HTMX dan penggunaannya, silakan merujuk ke dokumentasi resmi HTMX.

5. Studi Kasus: Membangun Aplikasi Kontak dengan HTMX

Mari kita lihat bagaimana membangun aplikasi kontak sederhana menggunakan HTMX.

5.1. Persiapan Proyek

Pertama, siapkan struktur proyek dasar dengan file index.html dan sertakan skrip HTMX:

<!doctype html>
<html>
  <head>
    <title>Aplikasi Kontak</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <!-- Konten aplikasi akan ditambahkan di sini -->
  </body>
</html>

5.2. Menampilkan Daftar Kontak

Tambahkan elemen <table> untuk menampilkan daftar kontak:

<table id="contact-table">
  <thead>
    <tr>
      <th>Nama</th>
      <th>Email</th>
      <th>Telepon</th>
    </tr>
  </thead>
  <tbody hx-get="/contacts" hx-trigger="load">
    <!-- Daftar kontak akan dimuat di sini -->
  </tbody>
</table>

Atribut hx-get dan hx-trigger pada elemen <tbody> akan memuat daftar kontak dari endpoint /contacts saat halaman dimuat.

5.3. Menambahkan Kontak Baru

Tambahkan formulir untuk menambahkan kontak baru:

<form hx-post="/contacts">
  <input type="text" name="name" placeholder="Nama" required />
  <input type="email" name="email" placeholder="Email" required />
  <input type="tel" name="phone" placeholder="Telepon" required />
  <button type="submit">Tambah Kontak</button>
</form>

Atribut hx-post pada elemen <form> akan mengirim data formulir ke endpoint /contacts saat tombol “Tambah Kontak” diklik.

5.4. Memperbarui Daftar Kontak Secara Berkala

Untuk memperbarui daftar kontak secara berkala, tambahkan atribut hx-trigger pada elemen <tbody>:

<tbody hx-get="/contacts" hx-trigger="load, every 5s">
  <!-- Daftar kontak akan dimuat di sini -->
</tbody>

Atribut hx-trigger="load, every 5s" akan memicu permintaan ke endpoint /contacts setiap 5 detik, memastikan daftar kontak selalu terbaru.

6. Kesimpulan

HTMX adalah library yang kuat dan sederhana untuk membangun aplikasi web modern dengan memanfaatkan kekuatan hypertext. Dengan menggunakan atribut HTML, HTMX memungkinkan Anda membuat antarmuka pengguna yang interaktif dan dinamis tanpa perlu menulis banyak JavaScript.

Arsitektur Hypermedia-Driven Application (HDA) yang didukung oleh HTMX menawarkan pendekatan yang lebih sederhana dan fleksibel dalam pengembangan aplikasi web dibandingkan dengan arsitektur Single-Page Application (SPA) tradisional. Dengan menerapkan prinsip-prinsip REST dan menggunakan hypermedia sebagai mesin untuk menggerakkan aplikasi, HDA memungkinkan evolusi API yang lebih mudah dan pengalaman pengguna yang lebih baik.

Dengan HTMX, pengembang dapat fokus pada pengalaman pengguna dan fungsionalitas aplikasi tanpa terjebak dalam kompleksitas yang tidak perlu. HTMX menyederhanakan pengembangan aplikasi web modern sambil tetap memberikan kinerja dan interaktivitas yang luar biasa.

Jika Anda mencari cara untuk membangun aplikasi web yang elegan, mudah dipelihara, dan berfokus pada pengalaman pengguna, HTMX adalah pilihan yang tepat. Dengan kesederhanaan dan kekuatan hypertext yang ditawarkannya, HTMX menjanjikan masa depan yang cerah bagi pengembangan web.