Panduan Pengajar — Fasa 5: Multi-Page Portfolio

⏱

Tempoh Sesi

3-4 jam termasuk rehat. Boleh dibahagi kepada 2 sesi jika perlu.

📚

Tahap Pelajar

Permulaan hingga pertengahan. Sudah tahu HTML/CSS asas dari fasa sebelum ini.

💻

Hasil Akhir

Portfolio 3-5 halaman yang responsif, lengkap dengan navigasi, borang, dan komponen boleh guna semula.

🤖

Alat Utama

Claude AI (atau AI chat lain), editor kod (VS Code), browser untuk ujian.

1 Gambaran Keseluruhan Sesi

Fasa ini memperkenalkan pelajar kepada konsep laman web pelbagai halaman (multi-page website). Berbeza dengan fasa sebelum ini yang hanya membina halaman tunggal, pelajar sekarang akan belajar bagaimana menyusun, menghubung, dan mengurus beberapa halaman dalam satu projek portfolio.

Tip Pengajaran

Mulakan sesi dengan menunjukkan contoh portfolio profesional (pilihan: Behance, Dribbble, atau portfolio pensyarah sendiri). Tanya pelajar: "Apa yang anda perhatikan? Halaman apa yang ada? Bagaimana navigasi berfungsi?" Ini membantu pelajar faham mengapa multi-page penting sebelum bagaimana membinanya.

Objektif Pembelajaran

Memahami struktur multi-page — bagaimana fail HTML berasingan berfungsi sebagai satu laman web yang lengkap
Komponen boleh guna semula — konsep "bina sekali, guna berkali-kali" untuk navbar, footer, kad
Navigasi antara halaman — pautan relatif, anchor links, dan navigasi konsisten
Reka bentuk responsif — pendekatan mobile-first untuk portfolio yang berfungsi di semua peranti
Form handling asas — struktur borang, validation, dan UX borang yang baik
Kreativiti dengan AI — menggunakan prompt untuk menjana dan mengubah suai komponen

2 Aliran Sesi (3-4 Jam)

15 minit

Pengenalan & Konsep Multi-Page

Terangkan apa itu multi-page website, bezanya dengan single-page. Tunjukkan contoh. Perkenalkan struktur folder projek.

25 minit

Seni Bina Komponen

Konsep komponen boleh guna semula. Tunjukkan komponen navbar, footer, kad projek. Terangkan cara copy-paste dan ubah suai.

60 minit

Bina Setiap Halaman (Arahan)

Pelajar membina halaman satu persatu: Homepage, About, Projects, Contact. Setiap halaman menggunakan prompt AI yang diberi.

30 minit

Integrasi & Navigasi

Sambung semua halaman dengan navigasi yang konsisten. Pastikan semua pautan berfungsi. Tambah responsive design.

30 minit

Sentuhan Akhir & Ujian

Ujian merentas peranti, semak borang, baiki isu. Pelajar tweak gaya dan personalisasi portfolio masing-masing.

20 minit

Review & Checkpoint

Semak hasil pelajar. Bincang apa yang dipelajari. Kongsi cabaran dan penyelesaian.

Cadangan

Jika masa terhad, fokus pada 3 halaman utama (Homepage, About, Contact) dan jadikan halaman Projects sebagai cabutan. Halaman Blog boleh diabaikan atau diberi sebagai tugasan lanjutan.

3 Cara Terangkan Struktur Multi-Page

Pelajar sering keliru tentang bagaimana pelbagai fail HTML membentuk satu laman web. Gunakan analogi berikut:

🏠

Rumah & Bilik

Setiap halaman HTML adalah satu bilik dalam rumah yang sama. Setiap bilik ada fungsi berbeza (dapur, bilik tidur, ruang tamu), tapi semua guna reka bentuk yang sama.

📄

Buku & Bab

Laman web multi-page macam buku. Setiap halaman adalah bab berbeza, tapi ada kulit (header) dan indeks (navigasi) yang sama.

🎨

Galeri Seni

Setiap halaman adalah galeri berbeza. Pelawat melalui pintu masuk (homepage), ke galeri tertentu (about/projects), dan keluar melalui pintu yang sama (navigasi konsisten).

Bayangkan laman web ni macam rumah. Ada bilik depan — tu homepage. Ada bilik tidur — tu halaman tentang anda. Ada ruang kerja — tu halaman projek. Tapi semua bilik guna cat dinding, lampu, dan perabot yang sama. Jadi bila orang masuk, diorang rasa macam rumah yang sama, bukan rumah berbeza.

Struktur Folder Projek

Tunjukkan pelajar struktur folder yang ringkas dan jelas:

portfolio-saya/
└── index.html         <-- Homepage
└── about.html         <-- Halaman About
└── projects.html      <-- Halaman Projek
└── contact.html       <-- Halaman Contact
└── blog.html          <-- Halaman Blog (opsional)
└── style.css          <-- Gaya dikongsi semua halaman

Perangkap Biasa

Pelajar baru sering lupa bahawa setiap halaman HTML adalah fail berasingan yang perlu dipautkan. Mereka mungkin cuba letak semua kandungan dalam satu fail. Tegaskan: setiap halaman HTML adalah dokumen lengkap dengan <head> dan <body> sendiri, dan pautan navigasi menghala ke fail berbeza.

4 Konsep Komponen Boleh Guna Semula

Ini adalah konsep paling penting dalam fasa ini. Terangkan dengan analogi "resipi" — kita buat satu resipi (komponen) dan guna banyak kali dengan bahan berbeza (isi kandungan).

Komponen Utama

🎨

Navbar

Bar navigasi yang sama di semua halaman. Pelajar perlu copy-paste kod navbar ke setiap fail HTML dan hanya ubah pautan "active" mengikut halaman semasa.

📍

Footer

Bahagian bawah yang sama untuk semua halaman. Biasanya ada copyright, pautan sosial, dan info hubungi.

📅

Project Card

Komponen kad yang digunakan semula untuk setiap projek dalam halaman Projects. Cuma tukar gambar, tajuk, dan penerangan.

👤

Hero Section

Bahagian pembuka yang menarik perhatian. Boleh diubah suai untuk setiap halaman dengan latar, teks, dan butang berbeza.

Pendekatan Pengajaran

Tunjukkan komponen siap — tunjuk satu navbar yang lengkap. Terangkan setiap bahagian HTML dan CSS.
Demonstrasi copy-paste — salin kod navbar ke halaman kedua. Tunjukkan cara ubah suai (contoh: highlight pautan aktif).
Galakkan eksperimen — minta pelajar ubah warna, saiz, atau tambah item menu sendiri.
Kenal pasti corak — tanya: "Apa yang SAMA antara halaman? Apa yang BERBEZA?" Ini bina pemahaman komponen.

Tip: Guna AI Untuk Copy-Paste

Daripada copy-paste manual, ajar pelajar cara minta AI salin komponen ke fail lain: "Salin kod navbar dari index.html dan ubah suai untuk about.html. Pastikan pautan 'About' ditandakan sebagai aktif." Ini ajar mereka berkomunikasi dengan AI secara efektif.

5 Responsive Design (Mobile-First)

Kebanyakan pelajar akan mengakses portfolio dari telefon. Ajar mereka pendekatan mobile-first: reka untuk skrin kecil dulu, kemudian besarkan untuk desktop.

Konsep Utama

Viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1.0"> mesti ada dalam setiap halaman
Media queries — guna @media (max-width: 768px) untuk ubah layout pada skrin kecil
Flexbox/Grid — ajar guna CSS Flexbox dan Grid untuk layout yang fleksibel
Relative units — guna %, rem, em, vw, vh daripada px tetap
Mobile navigation — hamburger menu untuk skrin kecil

Prompt untuk Responsive Design

Ajar pelajar cara minta AI buatkan responsive design:

Contoh Prompt Pelajar

"Saya ada kod navbar untuk desktop. Boleh tak tambah media query supaya navbar jadi hamburger menu pada skrin telefon? Guna CSS sahaja, tanpa JavaScript."

Contoh Prompt Lanjutan

"Buat grid projek yang tunjuk 3 kolum pada desktop, 2 kolum pada tablet, dan 1 kolum pada telefon. Guna CSS Grid."

Cabaran Biasa

Pelajar sering lupa untuk menguji portfolio di saiz skrin berbeza. Ajar mereka guna alat Pembangun Browser (F12 > Toggle Device Toolbar) untuk ujian pantas. Ingatkan: "Jika portfolio tak cantik di telefon, 80% pelawat anda akan tinggalkannya."

6 Form Handling Asas

Borang adalah komponen interaktif pertama yang pelajar bina. Terangkan struktur asas borang HTML:

<form action="#" method="POST">
  <label for="name">Nama</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Mesej</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Hantar</button>
</form>

Konsep Yang Perlu Ditekankan

Label → Input — setiap input mesti ada label untuk aksesibiliti
Type attributes — guna type="email" untuk validation email automatik
Required attribute — tanda ruangan wajib diisi
Placeholder — contoh teks dalam ruangan input
Textarea — untuk mesej yang panjang
Submit button — guna <button type="submit"> bukan <input type="submit">

Tip: Borang dengan AI

Untuk pelajar yang lebih mahir, ajar mereka minta AI tambah validation JavaScript ringkas: "Tambah validation JavaScript pada borang. Pastikan email mempunyai format yang betul, dan mesej tidak kosong. Tunjuk mesej ralat jika ada masalah."

7 Review Checkpoint

Gunakan checkpoint berikut untuk menilai kemajuan pelajar pada setiap peringkat:

Checkpoint 1: Selepas Pengenalan (15 minit)

✓ Pelajar boleh terangkan apa itu multi-page website
✓ Pelajar faham struktur folder projek
✓ Pelajar tahu bezanya single-page vs multi-page

Checkpoint 2: Selepas Komponen (25 minit)

✓ Pelajar boleh kenal pasti komponen yang dikongsi antara halaman
✓ Pelajar boleh terangkan konsep "bina sekali, guna banyak kali"
✓ Pelajar faham kod navbar dan footer

Checkpoint 3: Selepas Membina Halaman (60 minit)

✓ Pelajar telah bina sekurang-kurangnya 3 halaman HTML
✓ Setiap halaman ada kandungan yang berbeza dan relevan
✓ Pelajar boleh guna AI prompt untuk hasilkan kod

Checkpoint 4: Selepas Integrasi (30 minit)

✓ Navigasi berfungsi di semua halaman
✓ Footer konsisten di semua halaman
✓ Semua pautan berfungsi (tiada broken links)
✓ Portfolio berfungsi di desktop dan mobile

Checkpoint 5: Selepas Ujian & Siap (30 minit)

✓ Borang contact berfungsi (sekurang-kurangnya dari segi struktur)
✓ Responsive design berfungsi dengan baik
✓ Pelajar bangga dengan hasil kerja sendiri
✓ Pelajar boleh explain semula kod yang dihasilkan

Soalan Review untuk Pelajar

"Apa yang anda belajar tentang multi-page website yang tak ada dalam single-page?"
"Bagaimana anda pastikan semua halaman nampak konsisten?"
"Apa cabaran terbesar bila bina portfolio ni?"
"Jika nak tambah halaman baru, apa langkah pertama yang anda akan buat?"
"Bagaimana AI membantu proses pembinaan portfolio ni?"

8 Soalan Lazim & Penyelesaian

Masalah	Punca	Penyelesaian
Navigasi tak berfungsi	Path fail salah	Semak href attribute: href="about.html" (bukan "/about.html")
CSS tak sama di semua halaman	Lupa pautkan CSS	Pastikan <link rel="stylesheet" href="style.css"> ada dalam setiap halaman
Layout pecah di mobile	Guna px tetap	Tukar ke %, rem, atau guna flexbox/grid
Gambar tak muncul	Path gambar salah	Guna path relatif: src="images/projek1.jpg"
Borang tak hantar	Tiada action URL	Guna action="#" untuk sementara atau Formspree/Web3Forms
Halaman nampak kosong	Kandungan tak mencukupi	Guna AI prompt untuk hasilkan lebih kandungan: "Tambah section testimonials"

9 Aktiviti Lanjutan

Untuk pelajar yang siap awal atau mahukan cabaran tambahan:

📄

Halaman Blog

Tambah halaman blog dengan 2-3 entri. Gunakan komponen kad yang sama tapi untuk artikel.

🌐

Animasi & Transit

Tambah animasi CSS pada elemen: fade-in, slide-up, hover effects pada kad.

🗃

Dark Mode Toggle

Tambah butang untuk tukar antara tema terang dan gelap guna CSS variables.

🔂

Filter Projek

Tambah button filter untuk susun projek mengikut kategori (web, mobile, design).

10 Penutup & Rumusan

Pada akhir sesi, pastikan pelajar pulang dengan:

Satu folder projek portfolio yang mengandungi 3-5 halaman HTML
Satu fail CSS yang dikongsi semua halaman
Navigasi yang berfungsi sepenuhnya
Pemahaman asas tentang responsive design dan komponen
Keyakinan untuk terus membangun dan menambah baik portfolio sendiri

Kata-kata Penutup

Ingatkan pelajar bahawa portfolio adalah dokumen hidup. Mereka boleh terus mengemaskini, menambah projek baru, dan memperbaiki reka bentuk. Yang penting sekarang adalah mereka ada asas yang kukuh untuk terus berkembang. Galakkan mereka untuk berkongsi URL portfolio (jika dihost) dengan rakan dan dapatkan maklum balas.