Matriks Silibus Rasmi 14 Minggu & Pemetaan VBE-ESD
Modul Pembelajaran Kendiri (SIM v2.0) STM21673 Web Development dirangka secara holistik mengikut standard MQF 2.0 merangkumi 120 Jam Pembelajaran Pelajar (SLT). Modul ini mengintegrasikan kemahiran praktikal (CLO 1), kepimpinan beretika (CLO 2), dan keusahawanan digital mampan (CLO 3).
📊 Pecahan 14 Minggu Pengajaran & Pembelajaran (PdP)
14 Minggu LengkapPenguasaan protokol HTTP/HTTPS, semantik HTML5, CSS3 Box Model, Flexbox & Grid Studio serta manipulasi DOM menggunakan JavaScript ES6.
Penilaian Kajian Kes 1 (7%) & Pembentangan Cadangan Web Komersial (15%) menerapkan nilai VBE 2 (Justice) & ESD SC2 (Anticipatory).
Skrip sisi pelayan PHP 8.x, reka bentuk pangkalan data hubungan MySQL, integrasi PHP PDO, pembangunan CRUD EcoMart & sekuriti siber.
Kajian Kes 2 (13%), Perbincangan Pasukan (15%) [VBE 1 Dignity / ESD SC5 Collaboration], penerbitan Netlify dan persediaan Peperiksaan Akhir (30%).
Seni Bina Klien-Pelayan, Kitaran HTTP/HTTPS & Localhost
Memahami bagaimana pelayar web (klien) berkomunikasi dengan pelayan web (Apache/Nginx) melalui protokol permintaan (Request) dan respons (Response) berasaskan status kod standard.
Uji kaedah HTTP (GET/POST) dan lihat bagaimana pelayan web memproses Header & Status Kod.
> GET /v1/produk HTTP/1.1
> Host: api.ecomart.my
> User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
> Accept: application/json
< HTTP/1.1 200 OK
< Date: Wed, 26 Aug 2026 12:00:00 GMT
< Content-Type: application/json; charset=utf-8
< Content-Length: 142
<
[
{"id": 1, "nama": "Kopi Tenom TVET", "harga": 18.50, "stok": 45},
{"id": 2, "nama": "Madu Kelulut Asli", "harga": 65.00, "stok": 20}
]
Semantik HTML5 & Kawalan Borang Moden
Membina dokumen web yang mesra enjin carian (SEO) dan teknologi bantuan pembaca skrin (WCAG) menggunakan tag semantik seperti <header>, <nav>, <main>, <article>, serta validasi borang asli HTML5.
<form action="proses.php" method="POST"> <label for="email">E-Mel Pelajar:</label> <input type="email" id="email" required> <label for="umur">Umur (18-60):</label> <input type="number" min="18" max="60" required> <button type="submit">Daftar Kursus</button> </form>
CSS3 Box Model, Tipografi & Palet Warna Moden
Menguasai konsep teras Box Model: Margin, Border, Padding, dan Content serta penggunaan pembolehubah CSS (`var(--primary)`) untuk reka bentuk yang fleksibel dan boleh diurus.
CSS3 Flexbox Studio & Bento Grid Layout
Membina susun atur laman web moden tanpa 'float' menggunakan CSS Flexbox untuk komponen satu dimensi dan CSS Grid untuk susun atur dua dimensi responsif.
Asas JavaScript ES6: Pembolehubah, Fungsi Anak Panah & Array
Menguasai logik pengaturcaraan moden JavaScript (`let`, `const`, Arrow Functions `() => {}`, Array Methods `.map()` & `.filter()`).
> Sedia untuk menjalankan kod...
Manipulasi DOM JavaScript & Pengendalian Acara (Events)
Menghidupkan elemen HTML dengan mendengar acara pengguna (`click`, `input`, `submit`) serta mengubah suai gaya dan kandungan dokumen web secara dinamik.
- Troli masih kosong.
Kajian Kes 1 (7%) & Pembentangan Nilai Komersial Web (15%)
Pentaksiran amali pertama menggabungkan kemahiran membina antaramuka web pelanggan serta membentangkan justifikasi etika hak cipta, perlindungan data peribadi (PDPA), dan impak teknologi hijau.
Pasukan anda dikehendaki membangunkan portal jualan usahawan tempatan. Seorang ahli pasukan mencadangkan untuk menyalin keseluruhan templat e-dagang berbayar tanpa membeli lesen komersial.
Bagaimanakah pengoptimuman saiz imej WebP dan penggunaan CDN (Content Delivery Network) mampu mengurangkan penggunaan tenaga pelayan awan dan jejak karbon digital?
Pengenalan PHP 8.x & Pemprosesan Borang ($_POST / $_GET)
Memahami bagaimana kod PHP dieksekusi di pelayan sebelum menghasilkan HTML kepada klien. Mengambil data borang menggunakan array superglobal `$_POST` dan `$_GET` berserta sanitasi data input.
<?php $nama = htmlspecialchars($_POST['nama']); $kategori = $_POST['kategori']; echo "Tahniah $nama, pendaftaran anda dalam kategori $kategori berjaya direkodkan!"; ?>
Reka Bentuk Skema MySQL & Enjin Pertanyaan SQL
Membina jadual pangkalan data hubungan (`db_ecomart`), mengurus Primary Key & Foreign Key, serta melaksanakan pertanyaan DDL (`CREATE`, `ALTER`) dan DML (`SELECT`, `INSERT`, `UPDATE`, `DELETE`).
Penyambungan PHP & MySQL Melalui PHP Data Objects (PDO)
Menggunakan antaramuka PDO dengan sokongan *Prepared Statements* dan kawalan ralat berasaskan *Exception Handling* (`try-catch`) bagi memastikan kesinambungan pangkalan data yang stabil.
<?php
$host = "localhost";
$dbname = "db_ecomart";
$username = "root";
$password = "";
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
]);
// Sambungan Berjaya
} catch (PDOException $e) {
error_log($e->getMessage());
die("Ralat sambungan pangkalan data. Sila hubungi pentadbir sistem.");
}
?>
Aplikasi CRUD Penuh EcoMart: Cipta, Baca, Kemaskini & Padam
Membangunkan modul lengkap operasi pengurusan inventori produk: `tambah_produk.php` (Create), `senarai_produk.php` (Read), `kemaskini_produk.php` (Update), dan `padam_produk.php` (Delete).
Keselamatan Siber Web: SQL Injection, XSS, Hashing & Sesi
Melindungi aplikasi web daripada kerentanan keselamatan OWASP Top 10 melalui pengesahan sesi pengguna (`session_start()`), pencegahan XSS (`htmlspecialchars`), penentangan SQL Injection melalui Prepared Statements, dan penyulitan kata laluan (`password_hash`).
<script>alert('Sistem Anda Telah Digodam!');</script>
Kajian Kes 2 (13%) & Perbincangan Pasukan Projek Web (15%)
Pentaksiran amali kedua menilai keupayaan menyelesaikan masalah integrasi pangkalan data kompleks serta kepimpinan dan kebertanggungjawaban dalam kerja berpasukan.
Setiap ahli pasukan bertanggungjawab terhadap modul yang diamanahkan, menghormati komitmen masa rakan sepasukan, serta mendokumentasikan log git secara telus dan berintegriti.
Menangani ralat integriti pangkalan data (Foreign Key Constraint Failures), kebocoran memori, dan mengoptimumkan indeks carian MySQL.
Penerbitan Awan (Netlify/Apache), Audit Kod & Persediaan Peperiksaan Akhir (PA 30%)
Menguji keseluruhan aplikasi web pada pelayan pengeluaran sebenar, melaksanakan audit keselamatan kod sumber, dan mengulang kaji teori serta amali bagi menghadapi Penilaian Akhir (PA).
Tahniah! Anda Telah Menamatkan Silibus 14 Minggu
Anda telah melengkapkan kesemua 14 modul teori, amali eksplorasi kendiri, dan kajian kes berteraskan nilai VBE & kelestarian ESD.