Jobsheet 6 — Data JSON dan Modularitas

Tujuan dan arsitektur

Jobsheet 6 menyusun aplikasi menjadi halaman HTML, data JSON, dan skrip terpisah. Berkas JavaScript membaca data melalui Fetch API, membentuk baris tabel, lalu fungsi interaksi umum menangani menu, filter, hapus, dan validasi.

Tema tampilan CSS selaras dengan js sebelumnya.

Peta berkas

• index.html — beranda dan tombol hamburger.
• buku/list.html — target tabel yang diisi modul pemuat buku.
• buku/tambah.html — form buku.
• anggota/list.html — target tabel anggota.
• anggota/tambah.html — form anggota.
• data/buku.json — array buku berisi judul, pengarang, tahun, dan stok.
• data/anggota.json — array anggota berisi nomor, nama, alamat, dan nomor telepon.
• assets/js/buku.js — mengambil JSON buku dan membangun baris tabel.
• assets/js/anggota.js — mengambil JSON anggota dan membangun baris tabel.
• assets/js/app.js — menu, delegasi konfirmasi hapus, filter, dan validasi form.
• assets/style.css — token warna, komponen, validasi visual, menu, tabel, dan breakpoint.

Urutan pemuatan data

1. Browser memuat halaman daftar dan elemen tabelnya.
2. Modul terkait meminta JSON relatif terhadap halaman, misalnya ../data/buku.json.
3. Respons JSON diparse menjadi array objek.
4. Setiap objek dipetakan menjadi sel/baris tabel, kemudian disisipkan pada tbody.
5. app.js menangani aksi pada dokumen, termasuk klik tombol hapus yang baru dibuat secara dinamis melalui event delegation.

Karena pemanggilan fetch biasanya dibatasi saat halaman dibuka langsung lewat file://, uji melalui server HTTP statis atau deployment, bukan double-click file lokal.

JavaScript umum dan kontrol

• Tombol hamburger mengubah kelas .nav-open sehingga stylesheet dapat menampilkan menu.
• Handler hapus dipasang pada dokumen; ini menjaga baris yang dibangun kemudian oleh Fetch tetap dapat ditangani.
• Filter membaca setiap baris tabel dan menyembunyikan yang tidak cocok dengan kata pencarian.
• Validasi form mencegah submit untuk nama/judul atau pengarang kosong, tahun di luar 1900–2026, dan stok kurang dari nol.

Styling yang diperbarui

Stylesheet Jobsheet 6 mempertahankan struktur dan aturan responsif asli sambil menyelaraskan token/warna dengan portal Jobsheet 7–13: latar krem, kartu terang beradius, aksen rose, bayangan lembut, tabel lebih mudah dibaca, serta tombol mobile yang tetap mudah ditemukan. Gaya validasi, pencarian, dan menu tetap terhubung dengan kelas/elemen yang digunakan JavaScript.

Semua penyesuaian dilakukan pada aturan yang sudah ada; tidak ada tema terpisah atau @import.

Alur pengujian

1. Buka halaman daftar buku dan anggota melalui server; pastikan JSON berhasil dimuat.
2. Ubah JSON sementara pada lingkungan lokal untuk menguji penambahan/penyuntingan record, lalu pulihkan berkas sebelum commit.
3. Uji pencarian, konfirmasi hapus, validasi form, dan menu mobile.
4. Refresh halaman setelah menghapus baris: data kembali dari JSON karena perubahan DOM tidak menulis balik ke berkas sumber.
5. Pastikan browser tidak menampilkan error jaringan atau kesalahan JavaScript.

JSON di sini adalah sumber data statis yang dibaca browser, bukan API database. Operasi hapus hanya mengubah tampilan sesi halaman.