Jobsheet 5 — Interaktivitas DOM dan Validasi

Tujuan dan arsitektur

Jobsheet 5 menambahkan perilaku sisi klien menggunakan JavaScript vanilla. Berkas HTML menyediakan elemen dengan ID/kelas yang menjadi titik sambung skrip, assets/js/app.js memasang event listener, dan assets/style.css memberi presentasi responsif.

Tema tampilan CSS selaras dengan js sebelumnya.

Peta berkas

• index.html — beranda, kontrol hamburger, ringkasan, dan pemuatan skrip.
• buku/list.html — tabel buku dan kontrol pencarian/aksi.
• buku/tambah.html — form buku yang divalidasi.
• anggota/list.html — tabel anggota.
• anggota/tambah.html — form anggota.
• assets/style.css — tema dan aturan responsif seluruh halaman.
• assets/js/app.js — logika menu, konfirmasi hapus, filter, dan validasi.
• laporan/ — penjelasan tiap HTML, CSS, JavaScript, dan perubahan.

Empat perilaku di app.js

1. Menu responsif (initNavToggle): klik tombol #nav-toggle-btn menambah/menghapus kelas .nav-open pada header nav. CSS mengatur kondisi menu terbuka.
2. Konfirmasi hapus (initHapusConfirm): tombol .btn-hapus meminta konfirmasi, lalu menghapus baris tabel terdekat dari DOM jika disetujui.
3. Pencarian tabel (initTableFilter): teks pada #search-input dibandingkan dengan isi baris secara case-insensitive; baris yang tidak cocok disembunyikan.
4. Validasi form: helper menampilkan/menghapus pesan error; submit dibatalkan bila nama/judul atau pengarang kosong, tahun tidak pada rentang 1900–2026, atau stok negatif.

document.addEventListener("DOMContentLoaded", function () {
    initNavToggle();
    initHapusConfirm();
    initTableFilter();
    initValidasiForm();
});

Inisialisasi setelah DOM siap membuat elemen HTML tersedia sebelum skrip memasang handler.

Alur data dan batas fitur

Efek pencarian dan hapus hanya memanipulasi DOM pada halaman yang sedang terbuka. Tidak ada panggilan API/database pada modul ini; perubahan baris tidak tersimpan setelah halaman dimuat ulang. Tombol Edit juga merupakan bagian dari contoh antarmuka kecuali handler edit disediakan tersendiri.

Skenario pengujian

1. Pada viewport mobile, buka/tutup hamburger lalu buka tautan menu.
2. Ketik kata kunci yang cocok dan tidak cocok pada tabel; hapus pencarian untuk menampilkan semua baris.
3. Tekan Hapus dan pilih Batal, lalu ulangi dengan OK untuk melihat perilaku DOM.
4. Kirim form kosong dan input tahun/stok di luar batas; pesan error harus muncul dan submit tertahan.
5. Isi nilai valid lalu pastikan pesan error lama dihapus.

Tampilan stylesheet

Aturan CSS yang ada kini memakai latar krem, permukaan kartu terang, aksen rose, tabel/form yang terstruktur, dan keadaan interaksi yang jelas. Kelas .nav-open tetap menjadi penghubung visual untuk menu; berkas handbook tidak mengganti stylesheet aplikasi.