NOTA SAINS KOMPUTER TINGKATAN 5 BAB 3

Nota Interaktif: Pengaturcaraan Berasaskan Web

</>

{ }

<?php

#css

PENGATURCARAAN WEB

Sains Komputer Tingkatan 5 – Bab 3

Bahasa Penskripan Klien (Client-Side)

Penskripan Klien dilaksanakan di dalam pelayar web (browser) komputer pengguna. Ia digunakan untuk mengawal paparan, gaya, dan tindak balas elemen pada laman web tanpa perlu menghantar permintaan ke pelayan secara berterusan.

HTML

Struktur & Kandungan

Menyediakan rangka kerja dan kandungan asas seperti teks, pautan, borang dan jadual.

CSS

Gaya & Reka Bentuk

Mencantikkan HTML dengan menetapkan warna, font, susun atur, latar belakang dan animasi.

JavaScript

Logik & Interaktiviti

Menjadikan laman web ‘hidup’ (tindak balas klik, kotak amaran, pengesahan borang, manipulasi DOM).

Contoh JavaScript (Tindak Balas Butang)

script.html

<!– Butang dalam HTML –>
<button onclick=“paparMesej()”>Klik Saya</button>

<!– Kod JavaScript –>
<script>
    function paparMesej() {
        alert(“Selamat Datang ke Laman Web Saya!”);
    }
</script>
                    

Bahasa Penskripan Pelayan (Server-Side)

Penskripan pelayan (contohnya PHP) dilaksanakan di komputer pelayan web (web server). Ia membolehkan laman web berinteraksi dengan Pangkalan Data (MySQL) untuk menyimpan, membaca, mengemas kini dan memadam data pengguna.

Bagaimana Laman Web Dinamik Berfungsi

Kaedah Hantar Data (Method)

method=”GET”
Data yang diisi dipaparkan pada URL pelayar. Kurang selamat dan terhad pada jumlah data. (Contoh penggunaan: Kotak carian).
method=”POST”
Data dihantar secara tersembunyi (tidak dipapar di URL). Lebih selamat untuk menghantar kata laluan atau maklumat peribadi.

Contoh Kod PHP (Log Masuk)

<?php
// Menyambung ke pangkalan data
$con = mysqli_connect(“localhost”, “root”, “”, “db_sekolah”);

// Menerima data dari borang HTML
$id = $_POST[‘id_pelajar’];
$katalaluan = $_POST[‘password’];

// Arahan SQL Semakan
$sql = “SELECT * FROM Pelajar WHERE id=’$id’ AND pass=’$katalaluan’”;
?>
                        

Pengesahsahihan (Validation): Penting untuk memastikan data yang dimasukkan ke dalam borang adalah tepat formatnya (seperti format e-mel atau nombor sahaja) sebelum dihantar ke pelayan bagi mengelakkan sistem menjadi ralat (error).

Reka Bentuk Laman Web Interaktif

Pembangunan sistem berasaskan web memerlukan perancangan reka letak (wireframe) serta pematuhan prinsip reka bentuk bagi memastikan kelancaran penggunaan (User Experience).

Kerangka Aplikasi (Wireframe)

Halakan tetikus (hover) pada kerangka di atas.

Prinsip Reka Bentuk Laman Web

1. Kesesuaian

Pemilihan grafik, teks, dan reka letak perlu bersesuaian dengan kumpulan sasaran pengguna (contoh: laman sekolah berbeza gayanya dengan laman e-dagang).

2. Konsisten

Tema warna, jenis muka taip (font), dan corak butang hendaklah seragam di setiap halaman supaya pengguna tidak keliru.

3. Mudah Dilayari (Navigation)

Menu bar, pautan dan butang kembali mestilah jelas dan mudah diakses supaya pengguna tidak tersesat ketika melayari maklumat.

< Kuiz Interaktif Web />

Sains Komputer Tingkatan 5 (Bab 3)

Uji Kemahiran Pengekodan Anda!

Kuiz ini mengandungi 10 soalan rawak daripada Bab 3: Pengaturcaraan Berasaskan Web.
Topik meliputi HTML, CSS, JavaScript, PHP dan borang interaktif.