ICT Elective B ICT 選修乙

Chapter 6
Network Services & Web Application Development 第六章
網絡服務與網頁應用程式開發

Master web servers, network services, HTML/CSS, PHP, JavaScript, databases, and security concepts for DSE ICT Elective B. 掌握網頁伺服器、網絡服務、HTML/CSS、PHP、JavaScript、資料庫及安全概念，為DSE ICT選修乙做好準備。

6
Topics主題
15
Quiz Questions測驗題目
24
Flashcards閃卡
6
Past Questions試題
Table of Contents學習目錄

What You Will Learn 學習內容

Network Services網絡服務
Web, File, DHCP, Domain Controller, Proxy網頁、檔案、DHCP、域控制器、代理伺服器
Web App Development網頁應用開發
HTML, CSS, PHP, JavaScript, DatabaseHTML、CSS、PHP、JavaScript、資料庫
Interactive Quiz互動測驗
15 questions with instant feedback15條題目，即時評分
Flashcards閃卡練習
24 key terms with 3D flip24個關鍵詞彙，3D翻轉
Past Questions歷屆試題
DSE-style questions with model answersDSE模式試題及參考答案
Key Concepts重點概念
Port numbers, security, HTTP端口號、安全性、HTTP
Section 6.26.2節

Network Services 網絡服務

Behind every web application, multiple network services work together to deliver content seamlessly. 每個網頁應用程式背後，多項網絡服務協同運作，為用戶提供無縫體驗。

A. Web Server網頁伺服器

A web server delivers web content (HTML, images, videos) when clients send HTTP requests. It can also execute server-side scripts (e.g. PHP) to generate dynamic responses. Common examples: NGINX and Apache. 網頁伺服器在客戶端發送HTTP請求時，提供網頁內容（HTML、圖片、影片）。它也能執行伺服器端腳本（如PHP）以動態生成回應。常見例子：NGINX及Apache。

HTTP Request/Response Flow HTTP 請求/回應流程
Client客戶端
→
GET https://mysite.net/app.html
→
Web Server網頁伺服器
Server processes request → returns HTTP Response (Status 200 OK) 伺服器處理請求 → 返回HTTP回應（狀態碼 200 OK）
Key HTTP Status Codes:重要HTTP狀態碼：
200 OK – Success | 404 Not Found – Resource missing | 500 Internal Server Error – Server fault 200 OK – 成功 | 404 Not Found – 找不到資源 | 500 Internal Server Error – 伺服器錯誤

B. File Server vs Cloud Storage檔案伺服器 vs 雲端儲存

Aspect方面 File Server檔案伺服器 Cloud Storage雲端儲存
Setup Cost設置成本 Higher initial cost初始成本較高 Easier & quick setup設置簡單快捷
Long-term Cost長期成本 Lower cost per storage unit每單位儲存成本較低 Monthly/yearly subscription需月費/年費
Access Speed存取速度 Faster (within LAN)較快（在區域網路內） Slower (over Internet)較慢（透過互聯網）
Ease of Access存取便利性 Needs technical knowledge需要技術知識 Anywhere with Internet有互聯網即可存取
Scalability可擴展性 Needs technical expertise需要技術人員 Easy but provider-limited容易但受供應商限制

C. Database Server資料庫伺服器

A database server manages multiple databases using a DBMS. It implements user authentication (username/password) and user access control (varying privilege levels). Web servers connect to it using credentials to execute SQL queries. 資料庫伺服器使用DBMS管理多個資料庫。它實施用戶驗證（用戶名/密碼）及用戶存取控制（不同權限等級）。網頁伺服器使用憑證連接並執行SQL查詢。

D. DHCP ServerDHCP 伺服器

DHCP (Dynamic Host Configuration Protocol) automatically assigns IP addresses to devices on a network. The server defines a scope (range of available IPs). Assigned IPs have a lease duration — devices must renew when it expires. DHCP（動態主機配置協定）自動為網絡上的設備分配IP地址。伺服器定義範圍（可用IP範圍）。分配的IP有租用期限——到期後設備必須更新。

Advantages優點

  • Automatic IP assignment (reduces conflicts)自動分配IP（減少衝突）
  • Centralised network management集中管理網絡配置
  • Faster network setup for new devices新設備快速加入網絡

Disadvantages缺點

  • Single point of failure單點故障
  • Less control over IP addresses對IP地址控制較少

E. Domain Controller域控制器

Login Authentication登入驗證
Stores user accounts (username + password). Users must authenticate before accessing network resources. 儲存用戶帳戶（用戶名+密碼）。用戶必須先驗證身份才能存取網絡資源。
User Rights Control用戶權限控制
Sets access rights for each user on each resource separately. E.g. only certain users can access the file server. 為每個用戶分別設置每項資源的存取權限。例如只有特定用戶可存取檔案伺服器。
Group Policy Management群組原則管理
Administrators define system settings, security policies, and software installations across the entire network. 管理員可為整個網絡定義系統設定、安全策略及軟件安裝。

F. Proxy Server代理伺服器

An intermediary between a network and the Internet. Provides two main benefits: 網絡與互聯網之間的中間人。提供兩大主要功能：

Content Caching內容緩存
Saves responses locally. When another device requests the same resource, the proxy returns the cached copy — faster and reduces Internet traffic. 在本地儲存回應。當另一設備請求相同資源時，代理直接返回緩存副本——更快且減少互聯網流量。
Content Filtering內容過濾
Intercepts requests to certain domains, blocking access to inappropriate websites (e.g. violent or indecent content). 攔截對特定域名的請求，阻止存取不適當網站（如暴力或不雅內容）。
Proxy vs Firewall:代理伺服器 vs 防火牆： A proxy filters content (blocks websites). A firewall protects against security threats. They serve different purposes! 代理伺服器過濾內容（封鎖網站）。防火牆防禦安全威脅。兩者用途不同！

G. Port Numbers端口號

A port number identifies specific services/applications on the same network address. Valid range: 0–65535 (unsigned 16-bit). 端口號識別同一網絡地址上的特定服務/應用程式。有效範圍：0–65535（無符號16位元）。

Reason for Non-default Port使用非預設端口的原因 Example例子
Port conflict端口衝突Two services need port 80兩個服務都需要80端口
Security considerations安全考慮Hide service from automated scans隱藏服務免受自動掃描
Multiple instances多個實例Production on 443, testing on 8080生產在443，測試在8080
Firewall restrictions防火牆限制Default port blocked by firewall預設端口被防火牆封鎖
To access a non-default port, specify it in the URL: https://www.mysite.net:8080/notice.html 要存取非預設端口，在URL中指定：https://www.mysite.net:8080/notice.html
Web App Dev網頁應用開發

Web Application Development 網頁應用程式開發

HTML, CSS, JavaScript (client-side), PHP & databases (server-side), and security best practices. HTML、CSS、JavaScript（客戶端），PHP及資料庫（伺服器端），以及安全最佳實踐。

HTML & CSS BasicsHTML & CSS 基礎

Inline Styles (Avoid)行內樣式（應避免）
Defining styles directly in HTML tags. Disadvantages: lack of reusability, reduced maintainability, poor readability. 直接在HTML標籤中定義樣式。缺點：缺乏可重用性、降低可維護性、可讀性差。
Class Selectors (Best Practice)類選擇器（最佳實踐）
Apply styles selectively using .classname. Allows reuse across elements, centralised changes, better readability. 使用.classname選擇性應用樣式。允許跨元素重用，集中修改，更佳可讀性。
CSS SpecificityCSS 優先順序
When multiple rules apply: Inline > ID > Class > Element. A class rule overrides an element rule. 當多個規則適用時：行內 > ID > 類 > 元素。類規則覆蓋元素規則。
CSS Frameworks (e.g. Bootstrap)CSS框架（如Bootstrap）
Advantages: Faster development time, Consistent design across browsers and devices. 優點：更快的開發時間、跨瀏覽器和設備的一致設計。
/* Class selector example */ .mandatory { text-decoration: underline; } .group { color: SkyBlue; } li { font-family: Arial; }

HTML Forms & HTTP MethodsHTML 表單與 HTTP 方法

GET MethodGET 方法

  • Data appended to URL as query string資料附加到URL作為查詢字串
  • Visible in browser address bar在瀏覽器地址欄可見
  • Use for: retrieving data (search, filter)用途：擷取資料（搜尋、篩選）
  • No server state change不改變伺服器狀態

POST MethodPOST 方法

  • Data in request body (not visible in URL)資料在請求主體中（URL不可見）
  • More secure for sensitive data對敏感資料更安全
  • Use for: submitting data to database用途：提交資料到資料庫
  • Changes server state改變伺服器狀態

Form Validation表單驗證

Validation Type驗證類型 Client-side客戶端 Server-side伺服器端
Presence check (required field)存在性檢查（必填欄位） Yes Yes
Format check (phone numbers only)格式檢查（只限數字） Yes Yes
Password match check密碼匹配檢查 Yes Yes
Uniqueness check (username taken?)唯一性檢查（用戶名已被使用？） No Yes
Important:重要： Even if client-side validation is implemented, server-side validation is still necessary. Users can bypass client-side validation (e.g. by disabling JavaScript or modifying requests). 即使實施了客戶端驗證，仍需要伺服器端驗證。用戶可以繞過客戶端驗證（例如禁用JavaScript或修改請求）。

PHP & Database IntegrationPHP 與資料庫整合

PHP is a server-side scripting language. It connects to MySQL databases using mysqli_connect() and executes SQL queries to retrieve or update data. PHP是伺服器端腳本語言。它使用mysqli_connect()連接MySQL資料庫並執行SQL查詢以擷取或更新資料。

<?php // Connect to database $conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname); if(!$conn) { die("Failed to connect!"); } // Safe query (prevent SQL injection) $safe = mysqli_real_escape_string($conn, $_GET["search"]); $query = "SELECT * FROM BOOKS WHERE TITLE LIKE '%{$safe}%'"; $result = mysqli_query($conn, $query); while($row = mysqli_fetch_assoc($result)){ echo "<li>" . $row['title'] . " by " . $row['author'] . "</li>"; } ?>

SQL Injection AttackSQL 注入攻擊

When user input is directly inserted into SQL queries without sanitisation, attackers can inject malicious SQL code to manipulate the database. 當用戶輸入未經過濾直接插入SQL查詢時，攻擊者可注入惡意SQL代碼以操控資料庫。

Vulnerable Code有漏洞的代碼

$query = "SELECT * FROM MEMBER WHERE name = (" . $_POST["username"] . ")";

Attacker input: ' OR '1'='1 bypasses authentication!攻擊者輸入：' OR '1'='1 繞過驗證！

Mitigation防範方法

$safe = mysqli_real_escape_string($conn, $_POST["username"]);

Escapes special characters — prevents injection.轉義特殊字符——防止注入。

JavaScript (Client-side)JavaScript（客戶端）

JavaScript runs in the browser. It can manipulate the DOM, validate forms, and create interactive experiences without server round-trips. JavaScript在瀏覽器中運行。它可以操作DOM、驗證表單，並在無需伺服器往返的情況下創建互動體驗。

function checkAnswer() { let g = document.getElementById("guess").value; let r1 = Number(document.getElementById("random1").innerText); let r2 = Number(document.getElementById("random2").innerText); if (g == (r1 + r2)) { document.getElementById("msg").innerText = "Correct answer"; // Generate new random numbers document.getElementById("random1").innerText = Math.floor(Math.random()*101); } else { document.getElementById("msg").innerText = "Incorrect answer"; } document.getElementById("guess").value = ""; // Clear input }

Client-side Script Advantages客戶端腳本優點

  • Faster response (no server round-trip)更快回應（無需伺服器往返）
  • Reduces server load減少伺服器負載

Server-side Script Advantages伺服器端腳本優點

  • User input can be recorded in database用戶輸入可記錄到資料庫
  • Consistent across all devices/browsers在所有設備/瀏覽器上一致
Test Yourself自我測試

Interactive Quiz 互動測驗

15 questions covering network services and web application development. Click an option to answer. 15條題目涵蓋網絡服務及網頁應用程式開發。點擊選項作答。

0/15

Memorise記憶練習

Flashcards 閃卡

Click any card to reveal its definition. 24 key terms from Chapter 6. 點擊任意卡片查看定義。第六章24個關鍵詞彙。

Exam Practice考試練習

Past-style Questions 試題練習

DSE-style questions with model answers. Filter by difficulty level. DSE模式試題附參考答案。按難度篩選。