Membangun Aplikasi Peminjaman Alat Lab Interaktif dengan Tailwind CSS dan JavaScript DOM

Posted by By Abrar Arabani 5 Min Read

Pengelolaan inventaris laboratorium teknologi sering kali menghadapi kendala klasik: pencatatan peminjaman manual yang rentan tercecer, ketidakjelasan status ketersediaan alat secara real-time, hingga antarmuka sistem yang kaku. Melalui studi kasus ini, kita akan membedah arsitektur pembangunan aplikasi web peminjaman alat laboratorium yang ringan, interaktif, dan responsif menggunakan integrasi Tailwind CSS dan manipulasi Document Object Model (DOM) JavaScript murni.

1. Arsitektur Dasar & Integrasi Tailwind CSS

Fondasi aplikasi dibangun menggunakan berkas tunggal berstruktur HTML5 standar (index.html). Pendekatan ini memfasilitasi rapid prototyping dan implementasi mandiri tanpa dependensi bundler yang kompleks. Kerangka kerja antarmuka dirancang memanfaatkan CDN utilitas Tailwind CSS di bagian <head>, memungkinkan penataan hierarki visual, margin, grid responsif, dan palet warna status secara konsisten langsung dari class HTML.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sistem Peminjaman Alat Lab</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen p-6">
  <!-- Layout Utama -->
</body>
</html>

2. Desain Antarmuka: Katalog Inventaris & Formulir Pengajuan

Antarmuka pengguna dipecah menjadi tata letak dua kolom (two-column layout) berbasis Flexbox/Grid agar alur interaksi praktisi menjadi intuitif:

  • Katalog Inventaris (Sisi Kiri/Utama): Panel visual untuk me-render kartu-kartu inventaris perangkat keras lab (seperti mikrokontroler Arduino Uno, modul kamera AI, dan sensor IoT). Setiap kartu dilengkapi indikator lencana status ketersediaan (Tersedia berwarna hijau emerald vs. Dipinjam berwarna slate redup).
  • Formulir Pengajuan (Sisi Kanan/Sidebar): Panel pengajuan interaktif yang memuat input nama peminjam, dropdown select alat yang tersedia, pemilih tanggal pengembalian (date picker), serta tombol aksi submit dengan umpan balik visual instan.
Tampilan Antarmuka Aplikasi Peminjaman Alat Lab dengan Tailwind CSS
Gambar 1: Antarmuka terintegrasi Katalog Alat Lab dan Form Pengajuan Peminjaman.

3. Arsitektur State Sisi Klien (Client-Side State Management)

Untuk menjaga performa aplikasi tetap cepat tanpa jeda reload halaman, status data dikelola secara lokal pada sisi klien menggunakan array JavaScript terstruktur:

// State Management Inventaris Lab
const inventory = [
  { id: 1, nama: "Arduino Uno R3", kategori: "Mikrokontroler", status: "Tersedia" },
  { id: 2, nama: "ESP32 Wi-Fi + BLE DevKit", kategori: "IoT Module", status: "Tersedia" },
  { id: 3, nama: "Kamera AI Vision Kit", kategori: "Sensor & Optik", status: "Tersedia" },
  { id: 4, nama: "Sensor Ultrasonik HC-SR04", kategori: "Sensor", status: "Dipinjam" }
];

Array inventory berfungsi sebagai sumber kebenaran tunggal (single source of truth) data sesi. Setiap mutasi data—baik saat alat dipinjam maupun dikembalikan—hanya memodifikasi objek di dalam memori sebelum memicu siklus pembaruan tampilan.

4. Logika Re-rendering & Validasi Formulir

Dua fungsi inti JavaScript bertindak sebagai jembatan antara logika state dan representasi DOM:

  • Fungsi renderCatalog(): Melakukan iterasi terhadap data inventaris, memetakan setiap item ke dalam blok kartu Tailwind, dan menyematkan atribut data dinamis. Jika status alat bernilai “Tersedia”, sistem memberikan aksen hijau terang; jika “Dipinjam”, sistem menurunkan opasitas dan menonaktifkan interaksi langsung.
  • Fungsi populateDropdown(): Secara cerdas hanya menyaring dan menampilkan alat yang berstatus “Tersedia” pada pilihan dropdown. Ini mencegah kesalahan logika peminjaman ganda (*double booking*) sejak sisi antarmuka pengguna.
Proses Validasi Input Form dan Filter Dropdown Alat Tersedia
Gambar 2: Pengisian formulir peminjaman dengan filter dinamis alat lab.

5. Penanganan Event & Sinkronisasi Real-Time Tanpa Reload

Saat pengawas lab atau peminjam menekan tombol Submit, Event Listener mencegat aksi default peramban via e.preventDefault(). Alur pemrosesannya berjalan runtut:

  1. Membaca data input peminjam (Nama, ID Alat, Tanggal).
  2. Mencari referensi objek terkait di dalam array inventory berdasarkan id.
  3. Memperbarui atribut status objek menjadi “Dipinjam”.
  4. Memanggil kembali renderCatalog() dan populateDropdown() secara berurutan.

Hasilnya, kartu alat yang baru saja dipinjam secara seketika berganti status visual, opsi alat tersebut otomatis hilang dari dropdown form berikutnya, dan pengguna mendapatkan konfirmasi visual langsung tanpa adanya kedipan (flicker) akibat reload halaman.

Umpan Balik Visual Perubahan Status Alat Terpinjam Secara Reaktif
Gambar 3: Status inventaris berubah reaktif secara otomatis setelah transaksi peminjaman.

6. Kesimpulan & Peluang Pengembangan Arsitektur

Pola perancangan berbasis komponen ringan ini membuktikan bahwa tanpa perlu kerangka kerja frontend berskala besar (seperti React atau Vue), kombinasi Tailwind CSS dan DOM Manipulation JavaScript sudah lebih dari cukup untuk menghasilkan aplikasi internal lab yang cepat, elegan, dan fungsional.

Untuk pengembangan tahap berikutnya, arsitektur ini sangat mudah diekspansi ke arsitektur client-server penuh: cukup mengganti array lokal inventory dengan panggilan fetch() ke REST API backend (seperti FastAPI atau Express.js) serta menambahkan persistensi database relasional.

Artikel studi kasus ini ditulis oleh Abrar Arabani, praktisi pengembang antarmuka web dan kontributor teknologi di DudukDulu.com. Seluruh kode dan alur implementasi telah diverifikasi melalui pengujian operasional lab internal.