Laman Web Interaktif

3.3 Laman Web Interaktif

SAINS KOMPUTER • Tingkatan 5 • Bab 3: Pengaturcaraan Berasaskan Web

3.3 Laman Web Interaktif

Laman web interaktif membolehkan pengguna berinteraksi secara dinamik dengan kandungan paparan, melakukan carian, menghantar maklumat borang, serta menerima respons masa nyata daripada komputer pelayan. Modul ini membimbing murid memahami prinsip asas reka bentuk laman web, mereka bentuk kerangka aplikasi, mengekod menggunakan gabungan HTML dan CSS, mengaplikasikan penskripan klien (JavaScript) untuk interaktiviti, serta mengintegrasikan penskripan pelayan (PHP) bersama pangkalan data MySQL bagi pengurusan data pengguna dan pentadbir sistem.

Objektif Pembelajaran

Mengkaji dan merumus prinsip reka bentuk laman web dari sudut kesesuaian pengguna dan tujuan laman web.
Mereka bentuk kerangka aplikasi yang akan dibangunkan.
Membina laman web mudah dengan menggunakan Hypertext Markup Language (HTML) yang mengandungi frame, header, paragraph dan image.
Menggunakan Cascading Style Sheets (CSS) untuk menggayakan text, font, background, tables, borders dan position.
Menggunakan bahasa penskripan klien untuk membina laman web pengguna yang interaktif mengandungi fitur pengesahan data, butang pilihan, dan kotak popup.
Menggunakan bahasa penskripan pelayan untuk membina laman web yang boleh mencapai dan mengemas kini data dalam pangkalan data.
Menghasilkan sebuah laman web interaktif untuk kegunaan pengguna dan pentadbir sistem bagi menyelesaikan masalah.

Hubungan Tiga Komponen Pengaturcaraan Web Interaktif

Kerangka visual (HTML), penggayaan estetika (CSS), logik pengguna (JavaScript), dan pangkalan data pelayan (PHP-MySQL) berinteraksi dalam satu sistem web yang lengkap.

Aliran Log Masuk Pengguna

Aliran log masuk menentukan paparan pentadbir atau pengguna akhir.

Penerangan Ringkas

Prinsip reka bentuk, kerangka aplikasi, HTML, CSS, JavaScript, PHP dan MySQL dalam pembangunan laman web interaktif.

3.3.1 Prinsip Reka Bentuk Laman Web

Prinsip merujuk asas yang menjadi dasar kepada perkembangan atau pembinaan sesuatu benda, manakala reka bentuk merujuk susunan atau struktur dalam proses pembinaan. Ia diibaratkan seperti merancang, membina, mengubah suai dan menata hias kediaman.

1. Jenis Persekitaran Web yang Dibina

Merangkumi faktor teknikal seperti kesesuaian pelbagai jenis pelayar (Internet Explorer, Google Chrome, Firefox), kelajuan capaian Internet, keperluan perisian sokongan paparan (contohnya Flash), kepelbagaian sistem komputer atau peranti mudah alih, dan kepelbagaian saiz monitor atau resolusi skrin. Contoh skrin LCD 19 inci: 1440 × 900, 22 inci: 1680 × 1050. Semakin tinggi bilangan resolusi, semakin tinggi bilangan piksel dan paparan menjadi semakin jelas dan berkualiti.

2. Penekanan Maklumat dalam Web

Menentukan kandungan penting yang ingin diberi perhatian melalui penggunaan kesan khas (drop shadow, tekstur, cahaya, bentuk), ruang putih (white space), dan fungsi cetakan teks (bold, italic, warna berbeza, border).

3. Perbezaan Elemen dalam Web

Menggunakan konsep kontras untuk tarikan visual dan memandu navigasi pelawat. Kaedah: label dan pautan berbeza, border, warna kontra (contoh: menyerlahkan butang login), teks terbalik, teks condong (italic), saiz teks, dan ruang putih.

4. Typography

Merujuk penyusunan teks untuk kebolehbacaan dan sifat profesional. Corak susunan teks merangkumi corak paparan berasaskan skrin, corak paparan berasaskan kertas, corak paparan Z-shaped, dan corak paparan F-shaped. Panduan penggunaan: pilih fon senarai selamat disokong kebanyakan platform (contoh: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact), seragamkan fon bagi setiap halaman, dan bezakan saiz fon untuk tajuk dan kandungan.

5. Warna dan Grafik

Menyerlahkan imej dan identiti laman web. Elakkan warna latar belakang dan teks yang senada kerana menyukarkan pembacaan; elakkan warna terlalu banyak (warna-warni) yang menyebabkan pengguna hilang fokus.

6. Navigasi

Memudahkan pelawat mengemudi laman web dan memberi petunjuk tentang lokasi semasa pengguna. Teknik navigasi: bar navigasi (navigation bar), breadcrumbs, peta tapak (site map), menu pilihan juntai ke bawah (drop-down menu), toolbar, dan pautan menggunakan grafik.

7. Keseimbangan Visual

Gabungan elemen visual seperti garisan, imej, teks, bentuk dan warna mengikut pengguna sasaran. Contoh: laman web kanak-kanak mengutamakan grafik atau imej berbanding teks yang banyak.

Reka Bentuk Berasaskan Pengguna

Menepati kehendak dan cita rasa sasaran. Contoh: enjin carian Google yang ringkas, pantas, padat maklumat, tanpa gangguan iklan, dan fokus kepada satu objektif carian.

3.3.2 Mereka Bentuk Kerangka Aplikasi

Empat fasa mereka bentuk kerangka aplikasi:

Penstrukturan Kandungan atau Maklumat — membentuk inventori maklumat dan mengelaskan maklumat mengikut kesamaan kategori. Pengelasan mengikut turutan abjad, kronologi, kategori atau jenis, hierarki, spatial, dan urutan magnitud.

Penstrukturan Halaman — menekankan sambungan antara halaman menggunakan gambar rajah tapak (site diagram). Tiga gaya struktur halaman: hierarki, jujukan, dan kompleks.

Reka Bentuk Antara Muka — menggambarkan struktur laman web secara visual menggunakan rangka wayar (wireframe / skema halaman / pelan halaman) untuk menyusun elemen mengikut konsep.

Reka Bentuk Navigasi — menghubungkan objek teks, rajah, audio dan video menggunakan pautan hiperteks atau hipermedia. Teknik merangkumi toolbar, bar navigasi, breadcrumbs, sitemap, pautan grafik, dan menu drop-down.

3.3.3 Membina Laman Web Mudah Menggunakan HTML

HTML ialah fail teks yang ditulis menggunakan Hypertext Markup Language. Bahasa yang menghuraikan struktur dokumen. Elemen dan atribut ditulis menggunakan perisian text editor seperti Notepad.

Tag Berpasangan

Mempunyai start tag dan close tag. Contoh: <html></html>, <head></head>, <body></body>, <title></title>.

Empty Element

Tag tunggal tanpa close tag. Contoh: <br> (garis pemisah atau baris baharu) dan <img> (memaparkan imej).

Elemen Utama HTML
Elemen	Fungsi
`<h1>` hingga `<h6>`	Elemen tajuk (heading), bermula daripada tajuk terbesar (`<h1>`) hingga terkecil (`<h6>`).
`<header>`	Mengandungi pengenalan laman web, satu atau lebih heading, logo atau ikon, serta maklumat pengarang.
`<p>`	Elemen perenggan (paragraph).
`<br>`	Elemen pemutus baris (line break).
`<img>`	Memaparkan imej menggunakan atribut `src` (alamat atau URL fail imej), serta atribut `width` dan `height`.
`<iframe>`	Menghasilkan bingkai paparan untuk membuka dokumen HTML lain dalam halaman web semasa menggunakan atribut `src`, `height` dan `width`.

3.3.4 Menggunakan Cascading Style Sheets (CSS)

CSS ialah bahasa pengaturcaraan tambahan (extension) kepada HTML untuk menggayakan dan menerangkan persembahan dokumen.

External Style Sheet

Gaya disimpan dalam fail berasingan dengan sambungan .css dan dipanggil di bahagian <head> menggunakan tag <link rel="stylesheet" type="text/css" href="style1.css">.

Internal Style Sheet

Tag <style> ditulis di dalam kawasan <head> atau <body>.

Inline Style

Gaya ditulis terus di dalam atribut elemen tertentu, contohnya <h1 style="color: blue;">.

Keutamaan Perlaksanaan

Jika ketiga-tiga jenis gaya hadir bersama, gaya dalam barisan (Inline Style) akan dilaksanakan dahulu berbanding internal dan external.

Ciri-Ciri Penggayaan CSS
Kategori	Contoh
Teks	`color`, `text-align` (`center`, `left`, `right`), `text-shadow` (contoh: `2px 2px #000000`).
Fon	`font-family` (contoh: `"Arial Black"`), `font-size` (contoh: `70px` atau `70`), `font-style` (`italic`, `bold`, `normal`).
Latar Belakang	`background-color` (contoh: `lightgreen`), `background-image: url(...)` (imej latar belakang daripada direktori tempatan atau pautan Internet; gambar secara lalai akan diulang sehingga penuh).
Jadual	`border` (contoh: `1px solid`), `border-collapse: collapse`, jenis garisan (`solid`, `dotted`, `dashed`, `inset`, `outset`), `width` dan `height`, `text-align`, serta `padding`.
Sempadan	`border-style`, `border-width`, `border-color` untuk elemen seperti `<h1>` atau `<p>`.
Kedudukan	`static` (nilai lalai), `fixed` (kekal pada paparan walaupun pengguna menatal), `relative` (berganjak relatif terhadap kedudukan normal asalnya), `absolute` (tidak mengikut turutan susunan laman web; ditempatkan berpandukan titik asal `(0,0)` bekas rujukan terdekat atau tetingkap pelayar).

3.3.5 Membina Laman Web Interaktif Penskripan Klien (JavaScript)

Bahasa penskripan klien (JavaScript) bertindak memproses interaksi pada peringkat peranti pengguna tanpa membebankan pelayan.

1. Pengesahan Data

Mengesahkan data yang dimasukkan dalam borang sebelum dihantar. Contoh: menyemak sama ada medan kosong menggunakan if (teksnama == ""), atau memastikan nilai yang dimasukkan adalah nombor menggunakan fungsi isNaN(teksnombor).

2. Butang Pilihan

Butang Radio (<input type="radio">): pengguna hanya boleh memilih satu pilihan sahaja daripada kumpulan yang sama (berkongsi nilai atribut name yang serupa). Butang Checkbox (<input type="checkbox">): pengguna dibenarkan memilih lebih daripada satu pilihan pada masa yang sama.

3. Kotak Popup

window.alert("mesej"): memberikan maklumat atau amaran; mengandungi satu butang "OK". window.confirm("mesej"): mengesahkan tindakan; mengembalikan nilai boolean (true jika klik "OK", false jika klik "Cancel"). window.prompt("mesej", "lalai"): memaparkan kotak dialog teks untuk menerima input nilai daripada pengguna sebelum memasuki laman web.

3.3.6 Bahasa Penskripan Pelayan (PHP) dan Pangkalan Data (MySQL)

Laman web dinamik memproses maklumat di komputer pelayan menggunakan PHP dan pangkalan data MySQL. Ciri laman web interaktif: menggunakan bahasa pelayan (PHP/ASP), berhubung dengan pangkalan data, kandungan berubah mengikut permintaan pengguna, dan sentiasa dikemas kini.

Elemen Penting Laman Web Interaktif

1. Objek borang (form) dalam laman web. 2. Sambungan kepada komputer pelayan (web server). 3. Carian maklumat berdasarkan permintaan pengguna. 4. Paparan maklumat yang diperoleh daripada komputer pelayan. 5. Kemudahan mengemas kini data dan menyimpan semula ke dalam pangkalan data.

Mencapai data

SELECT nama_lajur FROM nama_jadual WHERE syarat;

Mengemas kini data

UPDATE nama_jadual SET lajur1='nilai1', lajur2='nilai2' WHERE lajur_kunci='nilai';

Simbol * digunakan untuk memilih semua lajur. Struktur fail kemas kini data: Senarai.php memaparkan senarai semua rekod dan membolehkan pemilihan rekod; Kemaskini.php memaparkan rekod terpilih dalam bentuk borang teks untuk disunting; ProsesKemaskini.php menerima input borang dan melaksanakan pertanyaan SQL UPDATE untuk menyimpan data terkini ke pangkalan data, kemudian menghalakan semula pengguna menggunakan header('location:...').

3.3.7 Laman Web Interaktif untuk Pengguna dan Pentadbir Sistem

Membezakan hak capaian antara pengguna biasa dan pentadbir sistem (admin):

Pentadbir Sistem

Mengendalikan prosedur pengurusan sistem, mendaftar atau mengurus pengguna, dan menyunting pangkalan data secara menyeluruh.

Pengguna Biasa / Akhir

Hanya dibenarkan melihat atau memanipulasi maklumat tertentu yang dibenarkan.

Aliran pengesahan log masuk: 1. Laman LogMasuk.php mengumpul nama pengguna dan kata laluan melalui kaedah POST. 2. Laman JenisPengguna.php membuat semakan dengan jadual pangkalan data menggunakan SELECT * FROM PENGGUNA WHERE NAMAPENGGUNA='$nama' AND KATALALUAN='$katalaluan'. 3. Berdasarkan atribut JENISPENGGUNA: jika 'Pentadbir' → diarahkan ke Admin.php; jika pengguna biasa → diarahkan ke Pengguna.php?namapengguna=...; jika rekod tidak wujud → memaparkan ralat "Nama Pengguna atau Katalaluan Salah".

Cuba Jawab Dulu

Cuba jawab sendiri dahulu, kemudian tekan butang untuk menyemak.

Apakah perbezaan utama dari segi fungsi pemilihan antara butang radio (radio button) dengan kotak semak (checkbox) dalam borang web?

Butang radio hanya membenarkan pengguna memilih tepat satu pilihan sahaja daripada satu kumpulan medan yang berkongsi atribut nama yang sama, manakala butang checkbox membenarkan pengguna memilih lebih daripada satu pilihan serentak.

Jika sebuah laman web serentak menggunakan helaian gaya luar (external style), helaian gaya dalaman (internal style), dan gaya dalam barisan (inline style), gaya manakah yang akan diberi keutamaan untuk dilaksanakan terlebih dahulu?

Gaya dalam barisan (Inline Style) akan dilaksanakan terlebih dahulu.

Apakah kegunaan fungsi JavaScript isNaN() dalam pengesahan data borang laman web?

Fungsi isNaN() (is Not-a-Number) digunakan untuk memeriksa sama ada nilai input yang dimasukkan adalah bukan nombor. Jika input bukan nombor, ia mengembalikan nilai true untuk membolehkan mesej peringatan dipaparkan kepada pengguna.

Kesalahan Biasa

Mengabaikan atribut name yang sama pada butang radio, menyebabkan pengguna boleh menandakan kesemua butang radio secara serentak (ciri eksklusif satu pilihan hilang).
Menetapkan tag penutup </img> atau </br>, sedangkan kedua-dua elemen tersebut ialah empty element yang tidak memerlukan tag penutup.
Tersalah meletakkan klausa syarat dalam arahan kemas kini SQL: menggunakan UPDATE tanpa klausa WHERE, yang mengakibatkan semua rekod dalam jadual pangkalan data terkemas kini kepada nilai baharu yang sama secara tidak sengaja.
Kekeliruan antara nilai kedudukan relative dan absolute: menganggap relative diukur dari bucu atas kiri pelayar, sedangkan ia sebenarnya berganjak relatif dari kedudukan asal elemen itu sendiri.

Salah Faham Konsep

Salah Faham

JavaScript dan PHP menjalankan fungsi yang sama di tempat yang sama.

Fakta Betul

JavaScript ialah bahasa penskripan sisi klien yang beroperasi dalam peranti pelayar pengguna (contohnya memvalidasi borang atau memaparkan kotak alert), manakala PHP ialah bahasa penskripan sisi pelayan yang beroperasi di komputer pelayan untuk berhubung dengan pangkalan data MySQL.

Salah Faham

Atribut id dan name dalam tag input HTML boleh digunakan secara bertukar ganti bagi butang pilihan.

Fakta Betul

Atribut name digunakan untuk mengumpulkan pilihan dalam kumpulan yang sama (terutamanya radio button dan pemprosesan borang), manakala id mestilah unik bagi setiap elemen bagi membolehkan rujukan tepat dibuat oleh fungsi penskripan JavaScript.

Ringkasan

Pembangunan laman web interaktif menggabungkan prinsip reka bentuk visual (tipografi, warna, navigasi, dan keseimbangan visual), penstrukturan kandungan (hierarki, jujukan, kompleks), dan sintaks pengaturcaraan.
HTML bertindak sebagai kerangka struktur asas.
CSS menyediakan reka letak serta gaya penampilan visual.
JavaScript memproses interaksi dan pengesahan borang pada sisi peranti klien.
PHP bersama MySQL mengurus proses capaian data, kemas kini, serta pengasingan antara muka antara pengguna awam dan pentadbir sistem di bahagian pelayan.

Aktiviti Ringkas

A. Kuiz Objektif

1 Antara nilai penetapan kedudukan (position) dalam CSS berikut, yang manakah mengekalkan elemen pada kedudukan yang sama pada skrin paparan pelayar walaupun halaman web ditatal (scroll) ke bawah?

A. absolute B. fixed C. relative

2 Arahan SQL manakah yang betul digunakan untuk menukar rekod negeri kelahiran murid bernama SITI KHADIJAH kepada JOHOR bagi nombor murid 'CL001'?

A. SELECT NEGERILAHIR = 'JOHOR' FROM MURID WHERE NOMURID = 'CL001'; B. UPDATE MURID SET NEGERILAHIR = 'JOHOR' WHERE NOMURID = 'CL001'; C. INSERT INTO MURID (NEGERILAHIR) VALUES ('JOHOR') WHERE NOMURID = 'CL001';

B. Isi Tempat Kosong

3 Elemen HTML yang digunakan untuk memaparkan dokumen HTML lain di dalam bingkai pada dokumen HTML semasa ialah tag .

4 Kotak dialog JavaScript yang digunakan untuk meminta dan menerima input teks daripada pengguna sebelum membenarkan kemasukan ke dalam laman web ialah kotak .

C. Padankan Konsep Web dengan Penerangannya

Seret konsep ke penerangan yang betul. Jika menggunakan telefon, tekan pilihan jawapan dahulu, kemudian tekan kotak padanan.

Konsep Web

Breadcrumbs

Wireframe

Butang Checkbox

border-collapse: collapse

Penerangan / Fungsi

1 Bantuan navigasi grafik yang membolehkan pengguna menjejaki lokasi semasa mereka dalam hierarki laman web.

2 Panduan visual atau pelan halaman yang mewakili susunan rangka kerja keseluruhan elemen laman web.

3 Butang pilihan borang yang membenarkan pengguna memilih lebih daripada satu pilihan pada masa yang sama.

4 Penggayaan CSS jadual yang menggabungkan sempadan bersebelahan menjadi satu garisan tunggal.

Kata Kunci

HTML CSS Penskripan Klien Penskripan Pelayan Wireframe Breadcrumbs Empty Element Radio Button Checkbox UPDATE (SQL)

Laman Web Interaktif

3.3 Laman Web Interaktif

SAINS KOMPUTER • Tingkatan 5 • Bab 3: Pengaturcaraan Berasaskan Web

3.3 Laman Web Interaktif

Objektif Pembelajaran

Mengkaji dan merumus prinsip reka bentuk laman web dari sudut kesesuaian pengguna dan tujuan laman web.
Mereka bentuk kerangka aplikasi yang akan dibangunkan.
Membina laman web mudah dengan menggunakan Hypertext Markup Language (HTML) yang mengandungi frame, header, paragraph dan image.
Menggunakan Cascading Style Sheets (CSS) untuk menggayakan text, font, background, tables, borders dan position.
Menggunakan bahasa penskripan klien untuk membina laman web pengguna yang interaktif mengandungi fitur pengesahan data, butang pilihan, dan kotak popup.
Menggunakan bahasa penskripan pelayan untuk membina laman web yang boleh mencapai dan mengemas kini data dalam pangkalan data.
Menghasilkan sebuah laman web interaktif untuk kegunaan pengguna dan pentadbir sistem bagi menyelesaikan masalah.

Hubungan Tiga Komponen Pengaturcaraan Web Interaktif

Kerangka visual (HTML), penggayaan estetika (CSS), logik pengguna (JavaScript), dan pangkalan data pelayan (PHP-MySQL) berinteraksi dalam satu sistem web yang lengkap.

Aliran Log Masuk Pengguna

Aliran log masuk menentukan paparan pentadbir atau pengguna akhir.

Penerangan Ringkas

Prinsip reka bentuk, kerangka aplikasi, HTML, CSS, JavaScript, PHP dan MySQL dalam pembangunan laman web interaktif.

3.3.1 Prinsip Reka Bentuk Laman Web

1. Jenis Persekitaran Web yang Dibina

2. Penekanan Maklumat dalam Web

3. Perbezaan Elemen dalam Web

4. Typography

5. Warna dan Grafik

6. Navigasi

7. Keseimbangan Visual

Gabungan elemen visual seperti garisan, imej, teks, bentuk dan warna mengikut pengguna sasaran. Contoh: laman web kanak-kanak mengutamakan grafik atau imej berbanding teks yang banyak.

Reka Bentuk Berasaskan Pengguna

Menepati kehendak dan cita rasa sasaran. Contoh: enjin carian Google yang ringkas, pantas, padat maklumat, tanpa gangguan iklan, dan fokus kepada satu objektif carian.

3.3.2 Mereka Bentuk Kerangka Aplikasi

Empat fasa mereka bentuk kerangka aplikasi:

Penstrukturan Halaman — menekankan sambungan antara halaman menggunakan gambar rajah tapak (site diagram). Tiga gaya struktur halaman: hierarki, jujukan, dan kompleks.

Reka Bentuk Antara Muka — menggambarkan struktur laman web secara visual menggunakan rangka wayar (wireframe / skema halaman / pelan halaman) untuk menyusun elemen mengikut konsep.

3.3.3 Membina Laman Web Mudah Menggunakan HTML

HTML ialah fail teks yang ditulis menggunakan Hypertext Markup Language. Bahasa yang menghuraikan struktur dokumen. Elemen dan atribut ditulis menggunakan perisian text editor seperti Notepad.

Tag Berpasangan

Mempunyai start tag dan close tag. Contoh: <html></html>, <head></head>, <body></body>, <title></title>.

Empty Element

Tag tunggal tanpa close tag. Contoh: <br> (garis pemisah atau baris baharu) dan <img> (memaparkan imej).

Elemen Utama HTML
Elemen	Fungsi
`<h1>` hingga `<h6>`	Elemen tajuk (heading), bermula daripada tajuk terbesar (`<h1>`) hingga terkecil (`<h6>`).
`<header>`	Mengandungi pengenalan laman web, satu atau lebih heading, logo atau ikon, serta maklumat pengarang.
`<p>`	Elemen perenggan (paragraph).
`<br>`	Elemen pemutus baris (line break).
`<img>`	Memaparkan imej menggunakan atribut `src` (alamat atau URL fail imej), serta atribut `width` dan `height`.
`<iframe>`	Menghasilkan bingkai paparan untuk membuka dokumen HTML lain dalam halaman web semasa menggunakan atribut `src`, `height` dan `width`.

3.3.4 Menggunakan Cascading Style Sheets (CSS)

CSS ialah bahasa pengaturcaraan tambahan (extension) kepada HTML untuk menggayakan dan menerangkan persembahan dokumen.

External Style Sheet

Gaya disimpan dalam fail berasingan dengan sambungan .css dan dipanggil di bahagian <head> menggunakan tag <link rel="stylesheet" type="text/css" href="style1.css">.

Internal Style Sheet

Tag <style> ditulis di dalam kawasan <head> atau <body>.

Inline Style

Gaya ditulis terus di dalam atribut elemen tertentu, contohnya <h1 style="color: blue;">.

Keutamaan Perlaksanaan

Jika ketiga-tiga jenis gaya hadir bersama, gaya dalam barisan (Inline Style) akan dilaksanakan dahulu berbanding internal dan external.

Ciri-Ciri Penggayaan CSS
Kategori	Contoh
Teks	`color`, `text-align` (`center`, `left`, `right`), `text-shadow` (contoh: `2px 2px #000000`).
Fon	`font-family` (contoh: `"Arial Black"`), `font-size` (contoh: `70px` atau `70`), `font-style` (`italic`, `bold`, `normal`).
Latar Belakang	`background-color` (contoh: `lightgreen`), `background-image: url(...)` (imej latar belakang daripada direktori tempatan atau pautan Internet; gambar secara lalai akan diulang sehingga penuh).
Jadual	`border` (contoh: `1px solid`), `border-collapse: collapse`, jenis garisan (`solid`, `dotted`, `dashed`, `inset`, `outset`), `width` dan `height`, `text-align`, serta `padding`.
Sempadan	`border-style`, `border-width`, `border-color` untuk elemen seperti `<h1>` atau `<p>`.
Kedudukan	`static` (nilai lalai), `fixed` (kekal pada paparan walaupun pengguna menatal), `relative` (berganjak relatif terhadap kedudukan normal asalnya), `absolute` (tidak mengikut turutan susunan laman web; ditempatkan berpandukan titik asal `(0,0)` bekas rujukan terdekat atau tetingkap pelayar).

3.3.5 Membina Laman Web Interaktif Penskripan Klien (JavaScript)

Bahasa penskripan klien (JavaScript) bertindak memproses interaksi pada peringkat peranti pengguna tanpa membebankan pelayan.

1. Pengesahan Data

2. Butang Pilihan

3. Kotak Popup

3.3.6 Bahasa Penskripan Pelayan (PHP) dan Pangkalan Data (MySQL)

Elemen Penting Laman Web Interaktif

Mencapai data

SELECT nama_lajur FROM nama_jadual WHERE syarat;

Mengemas kini data

UPDATE nama_jadual SET lajur1='nilai1', lajur2='nilai2' WHERE lajur_kunci='nilai';

3.3.7 Laman Web Interaktif untuk Pengguna dan Pentadbir Sistem

Membezakan hak capaian antara pengguna biasa dan pentadbir sistem (admin):

Pentadbir Sistem

Mengendalikan prosedur pengurusan sistem, mendaftar atau mengurus pengguna, dan menyunting pangkalan data secara menyeluruh.

Pengguna Biasa / Akhir

Hanya dibenarkan melihat atau memanipulasi maklumat tertentu yang dibenarkan.

Cuba Jawab Dulu

Cuba jawab sendiri dahulu, kemudian tekan butang untuk menyemak.

Apakah perbezaan utama dari segi fungsi pemilihan antara butang radio (radio button) dengan kotak semak (checkbox) dalam borang web?

Gaya dalam barisan (Inline Style) akan dilaksanakan terlebih dahulu.

Apakah kegunaan fungsi JavaScript isNaN() dalam pengesahan data borang laman web?

Kesalahan Biasa

Mengabaikan atribut name yang sama pada butang radio, menyebabkan pengguna boleh menandakan kesemua butang radio secara serentak (ciri eksklusif satu pilihan hilang).
Menetapkan tag penutup </img> atau </br>, sedangkan kedua-dua elemen tersebut ialah empty element yang tidak memerlukan tag penutup.
Tersalah meletakkan klausa syarat dalam arahan kemas kini SQL: menggunakan UPDATE tanpa klausa WHERE, yang mengakibatkan semua rekod dalam jadual pangkalan data terkemas kini kepada nilai baharu yang sama secara tidak sengaja.
Kekeliruan antara nilai kedudukan relative dan absolute: menganggap relative diukur dari bucu atas kiri pelayar, sedangkan ia sebenarnya berganjak relatif dari kedudukan asal elemen itu sendiri.

Salah Faham Konsep

Salah Faham

JavaScript dan PHP menjalankan fungsi yang sama di tempat yang sama.

Fakta Betul

Salah Faham

Atribut id dan name dalam tag input HTML boleh digunakan secara bertukar ganti bagi butang pilihan.

Fakta Betul

Ringkasan

Pembangunan laman web interaktif menggabungkan prinsip reka bentuk visual (tipografi, warna, navigasi, dan keseimbangan visual), penstrukturan kandungan (hierarki, jujukan, kompleks), dan sintaks pengaturcaraan.
HTML bertindak sebagai kerangka struktur asas.
CSS menyediakan reka letak serta gaya penampilan visual.
JavaScript memproses interaksi dan pengesahan borang pada sisi peranti klien.
PHP bersama MySQL mengurus proses capaian data, kemas kini, serta pengasingan antara muka antara pengguna awam dan pentadbir sistem di bahagian pelayan.

Aktiviti Ringkas

A. Kuiz Objektif

A. absolute B. fixed C. relative

2 Arahan SQL manakah yang betul digunakan untuk menukar rekod negeri kelahiran murid bernama SITI KHADIJAH kepada JOHOR bagi nombor murid 'CL001'?

B. Isi Tempat Kosong

3 Elemen HTML yang digunakan untuk memaparkan dokumen HTML lain di dalam bingkai pada dokumen HTML semasa ialah tag .

4 Kotak dialog JavaScript yang digunakan untuk meminta dan menerima input teks daripada pengguna sebelum membenarkan kemasukan ke dalam laman web ialah kotak .

C. Padankan Konsep Web dengan Penerangannya

Seret konsep ke penerangan yang betul. Jika menggunakan telefon, tekan pilihan jawapan dahulu, kemudian tekan kotak padanan.

Konsep Web

Breadcrumbs

Wireframe

Butang Checkbox

border-collapse: collapse

Penerangan / Fungsi

1 Bantuan navigasi grafik yang membolehkan pengguna menjejaki lokasi semasa mereka dalam hierarki laman web.

2 Panduan visual atau pelan halaman yang mewakili susunan rangka kerja keseluruhan elemen laman web.

3 Butang pilihan borang yang membenarkan pengguna memilih lebih daripada satu pilihan pada masa yang sama.

4 Penggayaan CSS jadual yang menggabungkan sempadan bersebelahan menjadi satu garisan tunggal.

Kata Kunci

HTML CSS Penskripan Klien Penskripan Pelayan Wireframe Breadcrumbs Empty Element Radio Button Checkbox UPDATE (SQL)