Simulasi: Pengaturcaraan Berasaskan Web

Sains Komputer Tingkatan 5 – Bab 3. Fahami interaksi klien-pelayan dan pembinaan laman web interaktif.

Aliran Seni Bina Klien-Pelayan

Bagaimanakah laman web berfungsi? Tekan butang di bawah untuk melihat bagaimana pelayar web (Klien) berkomunikasi dengan Pelayan Web (Server) dan Pangkalan Data.

Sedia. Klik butang di atas untuk memulakan simulasi interaksi web.

Penskripan Klien (Client-Side)

Dijalankan pada pelayar pengguna. Terdiri daripada HTML (Struktur), CSS (Gaya/Rupa), dan JavaScript (Interaksi). Klik butang untuk melaksanakan skrip ke atas kotak demonstrasi.

index.html

<div id="kotak-demo">
  Salam Dunia!
</div>

/* --- Arahan CSS --- */
#kotak-demo {
  background-color: purple;
  color: white;
  border-radius: 1rem;
}

// --- Arahan JavaScript ---
document.getElementById('kotak-demo').innerHTML = 
   "Teks ditukar oleh JS!";

Paparan Pelayar (Browser Preview)

Salam Dunia!

Penskripan Pelayan (Server-Side: PHP & MySQL)

Dijalankan pada pelayan web. Digunakan untuk memproses borang dan mencapai pangkalan data. Cuba simulasi log masuk di bawah.

Borang Klien (HTML)

ID Pengguna (Username)

Kata Laluan (Password)

logmasuk.php (Pelayan)


<?php
// 1. Terima data POST dari borang HTML
$id = $_POST['username'];
$katalaluan = $_POST['password'];

// 2. Bina Kuiri SQL
$sql = "SELECT * FROM pengguna 
        WHERE id='...' 
        AND laluan='...'";

// 3. Laksanakan Kuiri pada Pangkalan Data
$result = mysqli_query($conn, $sql);

// 4. Semak hasil dan beri maklum balas
if (mysqli_num_rows($result) > 0) {
    echo "Log Masuk Berjaya!";
} else {
    echo "Akses Ditolak.";
}
?>

> _

Nota: Fail PHP tidak boleh dibaca oleh pelayar web (browser). Pelayan web (seperti Apache) akan memproses kod PHP, berhubung dengan pangkalan data, dan hanya memulangkan kod HTML biasa kepada pengguna demi keselamatan data.