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.

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.

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

Contoh: Peranan Setiap Teknologi (Borang Pendaftaran)

Gambaran Keseluruhan

Laman web interaktif menyatukan klien, pelayan dan pangkalan data melalui aliran keadaan yang lengkap. Proses mereka bentuk laman web boleh diibaratkan seperti proses merancang dan membina sebuah bangunan: perancangan dibuat dahulu, kemudian struktur dibina, dan akhirnya kemasan ditambah. Reka bentuk perlu mengendalikan kejayaan, pengesahan, rangkaian perlahan, permintaan berulang dan keselamatan.

Prinsip reka bentuk laman web

Antara prinsip utama ialah navigasi yang jelas, konsistensi susun atur, tipografi yang mudah dibaca, kombinasi warna yang harmoni dengan kontras mencukupi, susun atur yang seimbang, serta penekanan pada maklumat utama. Setiap prinsip menyumbang kepada pengalaman pengguna yang lebih baik.

Navigasi

Navigasi memudahkan pelawat laman web untuk mengemudi laman web. Ia dilaksanakan melalui menu utama pada laman web, pautan (hyperlink) antara halaman web, dan butang seperti "Home" atau "Back". Navigasi yang tersusun membolehkan pengguna mencari maklumat dengan cepat tanpa tersesat.

Pengelasan maklumat dan struktur laman

Maklumat dikelaskan mengikut kategori yang bermakna kepada pengguna, bukan mengikut struktur dalaman organisasi. Peta laman menunjukkan hubungan antara halaman. Kedalaman struktur perlu seimbang: terlalu dalam menyukarkan pencarian, terlalu leper menyebabkan menu terlalu panjang.

Aliran hujung ke hujung

Tindakan pengguna mencetuskan peristiwa, data dihantar sebagai permintaan, pelayan mengesahkan dan berinteraksi dengan pangkalan data, kemudian respons mengemas kini paparan. Setiap sempadan antara komponen mempunyai format data serta kemungkinan kegagalan yang perlu ditangani.

Keadaan antara muka

Antara muka mempunyai beberapa keadaan: idle, loading, success, empty dan error. Setiap keadaan perlu direka supaya pengguna sentiasa tahu apa yang sedang berlaku. Melumpuhkan butang selepas ditekan memberi maklum balas, tetapi pelayan tetap perlu mengendalikan permintaan berulang dengan kunci unik atau kekangan pangkalan data.

Keselamatan berlapis

Gunakan HTTPS, sesi yang selamat, perlindungan CSRF, pengesahan di pihak pelayan, pengekodan output, prepared statement dan kebenaran berasaskan objek. Jangan percaya harga, peranan atau pemilikan yang dihantar oleh klien kerana nilai tersebut boleh diubah sebelum dihantar.

Ujian dan penilaian

Ujian meliputi ujian komponen, ujian integrasi antara skrip dan pangkalan data, ujian aliran pelayar, dan ujian keselamatan asas. Penilaian menyemak masa respons, kadar ralat, kebolehcapaian dan kepuasan pengguna. Sandaran dan pemulihan perlu disediakan sebelum laman digunakan secara sebenar.

Glosari Istilah

Kajian Kes Berpandu

Sebuah sistem tempahan tiket sukan sekolah menghantar id item dan kuantiti kepada pelayan, bukan jumlah harga yang dikira di pihak klien. Pelayan membaca harga semasa daripada pangkalan data, mengunci stok, mengira jumlah, dan mencipta tempahan dalam satu transaksi. Antara muka memaparkan keadaan loading semasa permintaan dihantar, dan butang dilumpuhkan untuk mengelakkan klik berganda. Namun kerana klik berganda masih boleh berlaku pada rangkaian perlahan, pelayan menggunakan kunci idempotensi supaya permintaan yang sama memulangkan tempahan yang sedia ada dan bukan mencipta tempahan baharu. Jika stok tidak mencukupi, keadaan error dipaparkan bersama mesej yang menerangkan bilangan tiket yang masih ada.

Perwakilan atau contoh teknikal

Aliran hujung ke hujung sistem tempahan:

  UI      : idle → pengguna klik "Tempah" → loading
  Klien   : POST /tempahan { idItem, kuantiti, kunciIdempotensi }
  Pelayan : sahkan sesi → sahkan input → semak kunci idempotensi
            → baca harga semasa dari pangkalan data
            → kunci stok → kira jumlah → INSERT → commit
  Respons : 201 Created { idTempahan }
  UI      : success → papar pautan resit

  Jika timeout: klien cuba semula dengan kunci idempotensi
  yang sama; pelayan memulangkan tempahan sedia ada.

Contoh tambahan

<!-- Navigasi yang jelas: menu utama, pautan dan butang -->
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="kemasukan.html">Kemasukan</a></li>
    <li><a href="fakulti.html">Fakulti</a></li>
    <li><a href="hubungi.html">Hubungi Kami</a></li>
  </ul>
</nav>

<style>
  .daftar {
    color: red;
    font-size: 70px;
  }
</style>

<p class="daftar">Pendaftaran Dibuka Sekarang</p>

Rujukan Pantas

Bahagian ini merangkumkan fakta Laman Web Interaktif yang paling kerap diuji. Gunakannya untuk ulang kaji pantas sebelum peperiksaan, bukan sebagai ganti kepada nota penuh.

Prinsip reka bentuk laman web dan pelaksanaannya

Istilah dan maksud dalam penyelesaian

Teknik Menjawab Bergaya Peperiksaan

Soalan Sains Komputer menilai ketepatan istilah dan kelengkapan isi. Bagi topik Laman Web Interaktif, markah lazimnya diberikan mengikut bilangan isi yang betul, jadi bilangan isi dalam jawapan perlu sepadan dengan bilangan markah yang diperuntukkan.

Contoh Soalan dan Jawapan Model

Soalan 1 [4 markah]

Penyataan berikut merupakan tujuan satu prinsip asas yang perlu ada dalam setiap laman web: "Memudahkan pelawat laman web untuk mengemudi laman web." Nyatakan prinsip asas tersebut dan tiga contoh penggunaannya.

Soalan 2 [6 markah]

Tulis kod atur cara Internal Cascading Style Sheets (CSS dalaman) untuk menambah teks "Pendaftaran Dibuka Sekarang" berwarna merah dan bersaiz 70.

Soalan 3 [3 markah]

Terangkan mengapa harga barang tidak boleh dipercayai apabila dihantar daripada pihak klien dalam sistem tempahan dalam talian.

Soalan 4 [3 markah]

Nyatakan tiga jenis ujian yang perlu dijalankan ke atas laman web interaktif sebelum ia digunakan secara sebenar.

Salah Faham yang Perlu Dielakkan

Strategi Menjawab Soalan

Semak Kendiri

Peta Modul — Apa yang Akan Dikuasai

Laman web interaktif menggabungkan keempat-empat lapisan: HTML (struktur), CSS (gaya), JavaScript (tindak balas klien) dan PHP (logik pelayan) bersama pangkalan data. Borang ialah titik pertemuan klien–pelayan: JavaScript mengesahkan di pelayar, PHP memproses di pelayan. Modul ini melatih pengaitan setiap teknologi dengan perannya dan merancang struktur laman.

Idea Utama

Apabila pengguna menghantar borang: (1) JavaScript di pelayar mengesahkan input (medan wajib diisi, format betul); (2) borang dihantar ke pelayan; (3) PHP menerima data melalui pemboleh ubah borang; (4) PHP menyambung ke pangkalan data dan melaksanakan INSERT/UPDATE; (5) PHP menjana halaman respons (cth "Pendaftaran berjaya") dan menghantarnya semula sebagai HTML. Pengesahan mesti berlaku di kedua-dua pihak.

Aliran — Data Borang dari Pengguna ke Pangkalan Data

Contoh Berpandu Beranotasi

Contoh Berpandu — peranan setiap teknologi [gaya Bahagian B]

Sistem tempahan tiket acara sekolah menggunakan HTML, CSS, JavaScript, PHP dan MySQL. Nyatakan peranan setiap teknologi.

Silap Lazim — yang Dipotong Markah oleh Pemeriksa

Cara Skema Jawapan Diberi