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:
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 | 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.
| 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.
SELECT nama_lajur FROM nama_jadual WHERE syarat;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
nameyang 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
UPDATEtanpa klausaWHERE, yang mengakibatkan semua rekod dalam jadual pangkalan data terkemas kini kepada nilai baharu yang sama secara tidak sengaja. - Kekeliruan antara nilai kedudukan
relativedanabsolute: menganggaprelativediukur dari bucu atas kiri pelayar, sedangkan ia sebenarnya berganjak relatif dari kedudukan asal elemen itu sendiri.
Salah Faham Konsep
JavaScript dan PHP menjalankan fungsi yang sama di tempat yang sama.
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.
Atribut id dan name dalam tag input HTML boleh digunakan secara bertukar ganti bagi butang pilihan.
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?
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.
