Laman Web Interaktif

Prinsip Reka Bentuk Laman Web

Mereka bentuk laman web diibaratkan seperti merancang dan membina sebuah rumah — setiap ruang ada fungsi, dan strukturnya dirancang SEBELUM pembinaan. Prinsip reka bentuk dinilai dari sudut kesesuaian PENGGUNA sasaran dan TUJUAN laman web.

Prinsip	Penerangan
Tujuan jelas	Setiap halaman ada fungsi khusus: maklumat, jualan, pendaftaran
Navigasi mudah	Menu konsisten; pengguna sentiasa tahu lokasi mereka
Kesesuaian sasaran	Reka bentuk untuk murid berbeza dengan untuk warga emas
Konsisten	Warna, fon dan susun atur seragam di semua halaman
Responsif	Boleh dipapar elok pada komputer, tablet dan telefon
Masa muat pantas	Imej dioptimumkan; elakkan elemen berat tidak perlu

Kerangka Aplikasi (Storyboard/Wireframe)

Sebelum membina, lakarkan KERANGKA setiap halaman: kedudukan banner, menu navigasi, kandungan utama dan footer; serta CARTA ALIRAN halaman yang menunjukkan hubungan antara halaman (Laman Utama → Tentang Kami → Hubungi → Borang). Kerangka memastikan pembangunan terancang dan menjimatkan masa.

Membina Laman Web Interaktif Lengkap

Laman web interaktif menggabungkan keempat-empat teknologi: HTML (struktur), CSS (gaya), JavaScript (interaksi klien — pengesahan borang, animasi) dan PHP (proses pelayan — simpan data, log masuk). Contoh aliran sistem pendaftaran: pengguna isi borang HTML → JavaScript sahkan medan tidak kosong → data dihantar ke PHP melalui POST → PHP memproses dan memaparkan pengesahan.

html

<!-- daftar.html: borang dengan pengesahan JavaScript -->
<form action="simpan.php" method="post"
      onsubmit="return sahkan()">
  Nama: <input type="text" id="nama" name="nama">
  <button type="submit">Daftar</button>
</form>

<script>
function sahkan() {
  if (document.getElementById("nama").value == "") {
    alert("Sila isi nama anda!");
    return false;   // halang penghantaran
  }
  return true;      // benarkan hantar ke simpan.php
}
</script>

php

<?php // simpan.php
$nama = $_POST['nama'];
echo "<h2>Pendaftaran Berjaya!</h2>";
echo "Terima kasih, " . $nama .
     ". Anda telah berjaya didaftarkan.";
?>

🎯 TIP SPM: Fahami PERANAN setiap teknologi dalam aliran — pengesahan segera di pelayar = JavaScript (klien); penyimpanan/pemprosesan data = PHP (pelayan). Soalan kerap minta anda kenal pasti teknologi yang sesuai bagi sesuatu tugas.

Contoh: Peranan Setiap Teknologi (Borang Pendaftaran)

Teknologi	Peranan
HTML	Bina medan borang
CSS	Gayakan borang
JavaScript	Sahkan medan tidak kosong (klien)
PHP	Simpan data ke pangkalan data (pelayan)