Jobsheet 3 — Layout Flexbox dan Grid

Tujuan dan hasil

Jobsheet 3 menggunakan layout CSS modern pada aplikasi perpustakaan: Flexbox untuk susunan satu dimensi seperti header/navigasi dan Grid untuk area statistik. Tabel/form dan halaman buku/anggota tetap menjadi konten HTML yang sama.

Tema CSS mengikuti tema sebelumnya.

Peta berkas

• index.html — beranda, header, navigasi, dan kartu ringkasan.
• buku/list.html — tabel koleksi buku.
• buku/tambah.html — form buku.
• anggota/list.html — tabel anggota.
• anggota/tambah.html — form anggota.
• assets/style.css — layout, tema visual, komponen, dan breakpoint responsif.
• laporan/ — penjelasan HTML, stylesheet, dan hasil perubahan praktikum.

Flexbox dan Grid

Flexbox dipakai ketika elemen perlu mengalir pada satu sumbu, misalnya item navigasi yang berjajar dan dapat membungkus. Grid menata ringkasan ke kolom-kolom yang sejajar dan memberi ruang konsisten melalui gap. Pada breakpoint kecil, jumlah kolom dikurangi agar kartu tidak terlalu sempit.

/* Pola konseptual untuk statistik */
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;

Ini contoh konsep layout; aturan stylesheet asli tetap digunakan dan berisi penyesuaian responsif untuk ukuran perangkat.

Navigasi dan responsivitas

Menu layar kecil menggunakan mekanisme checkbox dan label hamburger pada markup halaman. CSS menampilkan kontrol menu pada breakpoint tertentu, menyembunyikan/menampilkan navigasi berdasarkan keadaan checkbox, dan mengubah susunan kartu. Jangan menghapus relasi for/id pada checkbox karena CSS bergantung pada relasi tersebut.

Tabel dibungkus dengan area yang mengizinkan overflow horizontal agar kolom tetap dapat diakses pada layar sempit.

Tema CSS dan cakupan perubahan

Aturan yang telah ada untuk latar, warna teks, header, kartu statistik, tabel, form, tombol, dan footer diselaraskan dengan palet krem/rose. Kartu dibuat lebih jelas melalui permukaan terang, radius, bayangan lembut, serta jarak yang konsisten. CSS sumber tetap berada di Jobsheet3/assets/style.css; tidak ada impor tema eksternal.

Alur dan pemeriksaan

1. Jelajahi Beranda, Daftar Buku, Tambah Buku, Daftar Anggota, dan Tambah Anggota.
2. Periksa tiga kolom ringkasan di desktop dan perubahan jumlah kolom pada ukuran tablet/mobile.
3. Uji tombol hamburger dengan mouse dan keyboard serta pastikan tautan dapat difokuskan.
4. Pastikan tabel tidak memotong kolom dan setiap halaman menggunakan stylesheet yang sama.

Data Jobsheet 3 masih disediakan sebagai contoh halaman statis; tata letak responsif tidak dengan sendirinya menambahkan backend atau penyimpanan.