1.0 Introduction to Web Environment

Memahami ekosistem pembangunan web, teknologi terkini, dan proses perancangan aplikasi yang efektif.

1.1 Web Development and Technologies

1.1.1 & 1.1.2 Overview & Features

Aplikasi web ialah perisian yang disimpan di pelayan jauh dan dihantar melalui internet melalui antara muka pelayar.

1.1.2 Features of a Web Application

Aplikasi web mempunyai ciri-ciri unik yang membezakannya daripada laman web statik atau perisian desktop tradisional:

1. Cross-Platform Compatibility

Boleh diakses dari mana-mana peranti (Windows, Mac, Android, iOS) asalkan mempunyai pelayar web dan sambungan internet.

2. No Installation Required

Pengguna tidak perlu memasang perisian pada komputer mereka. Semua logik dijalankan melalui pelayar web.

3. Real-Time Updates

Apabila pembangun mengemaskini aplikasi di pelayan (server), semua pengguna akan mendapat versi terkini secara automatik tanpa perlu 'patch'.

4. Data Persistence

Menggunakan pangkalan data (database) untuk menyimpan maklumat pengguna, membolehkan data diakses dari mana-mana sahaja.

Analogi: Fikirkan tentang Microsoft Word (Aplikasi Desktop - perlu install) berbanding Google Docs (Aplikasi Web - akses terus di browser).

1.1.3 Kelebihan Aplikasi Web berbanding Desktop

Kriteria Aplikasi Web Aplikasi Desktop
Aksesibiliti Boleh diakses dari mana-mana peranti dengan internet. Terhad pada peranti yang dipasang perisian sahaja.
Penyelenggaraan Kemaskini dilakukan di pelayan (pusat). Semua pengguna dapat versi terkini. Pengguna perlu memuat turun dan memasang kemaskini secara manual.
Kos Kos pembangunan lebih rendah untuk pelbagai platform (cross-platform). Kos tinggi kerana perlu dibangunkan mengikut OS (Windows, Mac, Linux).

1.1.4 Terminologies Related to Web Servers

Memahami istilah asas adalah langkah pertama untuk menguasai komunikasi antara pelayar (browser) dan pelayan (server).

a. Web Page (Halaman Web)

Satu dokumen digital yang ditulis dalam bahasa HTML (Hypertext Markup Language) yang boleh diakses melalui internet dan dipaparkan oleh pelayar web.

Contoh: Fail index.html yang anda sedang lihat sekarang adalah satu halaman web. Ia mengandungi teks, imej, dan pautan.

b. WWW (World Wide Web)

Satu sistem maklumat di mana dokumen dan sumber web lain dikenal pasti oleh URL, dihubungkan melalui pautan hiperteks, dan boleh diakses melalui Internet.

Analogi: Jika Internet adalah lebuh raya, WWW adalah bangunan-bangunan (perpustakaan, kedai) yang kita kunjungi di sepanjang lebuh raya tersebut.

c. Browser (Pelayar Web)

Perisian aplikasi yang digunakan untuk mencari, mengambil, dan memaparkan kandungan dari World Wide Web (WWW). Ia menterjemah kod HTML/CSS kepada paparan visual yang kita faham.

Contoh: Google Chrome, Mozilla Firefox, Microsoft Edge, dan Safari.

d. Hyperlink (Pautan)

Satu elemen (teks atau imej) dalam dokumen elektronik yang menghubungkan ke bahagian lain dalam dokumen yang sama atau ke dokumen lain secara terus.

Contoh Kod: <a href="notahtml.html">Klik Sini</a>. Apabila teks "Klik Sini" ditekan, browser akan membawa anda ke halaman baru.

e. URL (Uniform Resource Locator)

Alamat unik yang digunakan untuk mencari sumber (halaman web, imej, fail) di internet.

Contoh: https://www.kktemerloh.edu.my/index.php

f. Domain Name (Nama Domain)

Nama pengenalan yang digunakan untuk mengakses laman web manusia tanpa perlu menghafal alamat IP yang rumit.

Contoh: google.com, facebook.com, atau moe.gov.my.

g. IP Address (Alamat IP)

Satu set nombor unik yang diberikan kepada setiap peranti yang disambungkan ke rangkaian komputer yang menggunakan Internet Protocol untuk komunikasi.

Contoh: 172.217.161.142 (Ini adalah alamat IP untuk Google).

h. HTTP / HTTPS

HTTP: Protokol untuk menghantar data antara browser dan server.
HTTPS: Versi selamat (Secure) yang menggunakan enkripsi SSL/TLS untuk melindungi data.

Penting: Sentiasa gunakan HTTPS untuk laman web yang mengendalikan data peribadi atau transaksi kewangan.

i. TCP/IP

Kumpulan protokol komunikasi yang digunakan untuk menyambungkan peranti di internet. Ia menentukan bagaimana data dihantar, dipecahkan kepada paket, dan dialamatkan.

[Image of TCP/IP model layers diagram]
Analogi: Ia seperti sistem pos; TCP memastikan surat itu sampai dengan lengkap, manakala IP memastikan surat itu sampai ke alamat rumah yang betul.

1.1.5 - 1.1.7 Scripting & Web Infrastructure

Client-side Scripting

Kod diproses oleh pelayar pengguna (Contoh: JavaScript). Sesuai untuk elemen interaktif dan validasi segera.

Server-side Scripting

Kod diproses di pelayan sebelum dihantar ke pelayar (Contoh: PHP). Digunakan untuk logik bisnes dan akses pangkalan data.

Perisian Pembangunan (Web Stack):

  • 🛠️ Web Server: Apache, Nginx
  • 🗄️ Database Server: MySQL, MariaDB
  • 🐘 Scripting: PHP, Python

1.2.1 Basic Web Design Principles

Kejayaan sesebuah aplikasi web bergantung kepada tiga prinsip utama untuk memastikan pengalaman pengguna yang optimum:

🤝

User Friendly

Definisi: Memastikan laman web mudah difahami, senang dilayari, dan boleh digunakan oleh semua orang tanpa bantuan pakar.

  • Navigasi Jelas: Menu yang mudah ditemui dan dilabel dengan bahasa yang ringkas.
  • Kebolehbacaan: Penggunaan jenis tulisan (font) dan saiz yang selesa untuk mata.
  • Responsif: Paparan yang kemas pada desktop, tablet, mahupun telefon pintar.
⚖️

Consistency

Definisi: Mengekalkan elemen yang sama di setiap halaman untuk memberikan identiti yang seragam kepada laman web.

  • Skema Warna: Menggunakan palet warna yang sama (Contoh: Warm Academic Palette) di seluruh sistem.
  • Tipografi: Mengekalkan penggunaan font yang seragam untuk tajuk dan teks badan.
  • Kedudukan Elemen: Lokasi header, sidebar, dan footer yang tidak berubah-ubah.
⚙️

Functionality

Definisi: Memastikan setiap komponen teknikal laman web berfungsi dengan sempurna tanpa ralat.

  • Pautan Berfungsi: Semua hyperlink membawa pengguna ke destinasi yang betul tanpa ralat 404.
  • Validasi Borang: Borang dapat memproses data pengguna dan memberi maklum balas yang tepat.
  • Kelajuan: Laman web memuat naik kandungan dalam tempoh masa yang munasabah.
Hubungan Antara Prinsip Reka Bentuk

User Friendly + Consistency = Pengguna tidak perlu belajar semula cara menggunakan web anda di setiap halaman baru.

Functionality + User Friendly = Laman web yang bukan sahaja nampak cantik, tetapi sangat membantu dalam menyelesaikan tugasan pengguna.

1.2.2 Website Planning using Storyboard

Storyboard merupakan lakaran visual atau prototaip awal yang menggambarkan susun atur sesebuah laman web sebelum proses pengekodan dimulakan. Ia berfungsi sebagai panduan untuk memastikan kedudukan elemen adalah konsisten dan berfungsi dengan baik.

A. Komponen Utama dalam Storyboard

Setiap lakaran storyboard bagi pembangunan web kursus STM21673 perlu mempunyai empat komponen asas berikut:

1. Header

Terletak di bahagian paling atas. Biasanya mengandungi logo kolej, tajuk modul (Web Development), atau banner visual.

2. Navigation

Menu atau pautan utama yang membolehkan pengguna berpindah ke halaman lain seperti Nota HTML, Borang, atau Database.

3. Content

Ruang utama yang memaparkan maklumat subjek, nota pembelajaran, gambar rajah, atau video tutorial.

4. Footer

Terletak di bahagian bawah halaman. Mengandungi info hak cipta, nama pembangun, dan nama kolej.

B. Rajah Struktur Storyboard (Wireframe)

Berikut adalah contoh visual bagaimana elemen-elemen di atas disusun secara konsisten:

HEADER SECTION (Banner/Logo)
NAVIGATION MENU (Utama | Nota | Borang | PHP | Database)
SIDEBAR
(Pautan Topik)
MAIN CONTENT AREA
(Teks Nota, Gambar, & Kod Atur Cara)
FOOTER (Copyright © 2026 STM21673)

C. Kaedah Menghasilkan Storyboard yang Berkesan

  • 1 Tentukan Objektif: Kenal pasti tujuan utama halaman tersebut (contoh: untuk memaparkan nota atau mengumpul data borang).
  • 2 Lakar Secara Kasar: Gunakan kertas atau alatan digital untuk melukis kedudukan kotak elemen (Wireframing).
  • 3 Terapkan Konsistensi: Pastikan reka letak navigasi adalah sama bagi setiap helaian storyboard untuk memudahkan pengguna.
  • 4 Semak Fungsi: Pastikan setiap butang atau pautan yang dilakar mempunyai destinasi halaman yang betul.
💡 Tip Pro

Gunakan prinsip User Friendly semasa melakar storyboard: pastikan maklumat yang paling penting diletakkan di kawasan yang mudah dilihat oleh mata pengguna (biasanya di bahagian Content utama).

1.3 Web Server Installation

Untuk membangunkan aplikasi web secara tempatan (offline), kita perlu memasang perisian pelayan web pada komputer kita. Perisian yang paling popular digunakan ialah XAMPP.

Apa itu XAMPP? Ia adalah akronim bagi X (Cross-platform), Apache, MariaDB (MySQL), PHP, dan Perl.

Langkah-Langkah Pemasangan dan Konfigurasi:

1
Muat Turun (Download)

Muat turun installer XAMPP yang sesuai dengan sistem operasi anda (Windows/Linux/macOS) dari laman web rasmi Apache Friends.

2
Proses Pemasangan (Installation)

Jalankan fail installer tersebut. Semasa pemilihan komponen, pastikan Apache dan MySQL dipilih. Ikuti arahan 'Next' sehingga selesai.

3
Menjalankan Servis (Start Services)

Buka XAMPP Control Panel dan klik butang 'Start' bagi modul Apache dan MySQL. Status akan bertukar menjadi hijau apabila berjaya dijalankan.

4
Pengesahan (Verification)

Buka pelayar web (browser) dan taip http://localhost pada ruangan URL. Jika paparan 'Dashboard XAMPP' muncul, pemasangan anda telah berjaya!

📂 Di mana fail web disimpan?

Selepas pemasangan, semua fail projek web anda (seperti index.html atau index.php) mestilah disimpan di dalam folder:

C:\xampp\htdocs\nama_folder_anda\

Akses projek anda melalui: http://localhost/nama_folder_anda/

💡 Tips Konfigurasi

Jika Apache gagal dijalankan (Port Conflict), pastikan aplikasi lain seperti Skype atau VMware tidak menggunakan port yang sama (Port 80 atau 443).

Rumusan Topik 1.0

Tahniah! Anda telah berjaya menguasai asas Introduction to Web Environment. Melalui topik ini, anda kini sepatutnya sudah memahami:

  • ✔ Perbezaan antara aplikasi web dan desktop.
  • ✔ Fungsi komponen teknikal seperti URL, IP, dan protokol HTTPS.
  • ✔ Kepentingan prinsip reka bentuk User Friendly dan Consistency.
  • ✔ Langkah penyediaan persekitaran server menggunakan XAMPP.

Apa Seterusnya?

Sekarang setelah persekitaran web anda telah siap dipasang, kita akan mula membina struktur laman web pertama anda menggunakan HTML.

Mula Belajar HTML →
"Pembangunan web bukan sekadar menulis kod, tetapi membina jambatan komunikasi antara manusia dan teknologi melalui antara muka yang berkesan."