Computer Networks and Communication · Semester 2

Web Technologies and Client-Server Model

Understanding the interaction between browsers and servers through HTTP and DNS.

About This Topic

The Web Technologies and Client-Server Model topic covers how browsers communicate with servers via HTTP and DNS. Students learn that entering a URL triggers a DNS query: the system checks local caches, then contacts root, TLD, and authoritative servers to resolve the domain to an IPv4 or IPv6 address. The browser sends an HTTP request to that IP; the server processes it and returns data like HTML, CSS, or JSON.

In the MOE JC2 Computing curriculum under Computer Networks and Cybersecurity, this builds on network fundamentals. Client-side processing happens in the browser with JavaScript for interactivity, while server-side uses languages like PHP for secure database access. Students address IPv4's address exhaustion (4.3 billion limits) versus IPv6's vast 128-bit space, preparing them for real-world internet scalability and security.

Active learning suits this topic well. Students cannot see network packets directly, so tools like Wireshark for tracing requests, role-plays of DNS lookups, or simple web app builds make invisible processes visible and hands-on, strengthening grasp of the layered model.

Learning Objectives

• Analyze the sequence of DNS queries required to resolve a given URL to an IP address.
• Compare and contrast client-side and server-side processing in terms of execution location and typical functionalities.
• Explain the technical limitations of IPv4 that necessitated the development of IPv6.
• Design a simple web page interaction that demonstrates the division between client-side and server-side scripting.
• Evaluate the impact of HTTP request/response cycles on web page loading times.

Before You Start

Introduction to Networks

Why: Students need a foundational understanding of network concepts like IP addresses and basic communication protocols before delving into web-specific protocols.

Basic Internet Concepts

Why: Familiarity with terms like 'browser,' 'website,' and 'URL' is necessary to understand how web technologies function.

Fundamentals of Programming (e.g., Python or JavaScript)

Why: Understanding basic programming constructs is essential for comprehending both client-side and server-side scripting.

Key Vocabulary

DNS (Domain Name System)	A hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names into machine-readable IP addresses.
HTTP (Hypertext Transfer Protocol)	The foundation of data communication for the World Wide Web. It defines how messages are formatted and transmitted, and what actions web servers and browsers should take in response to various commands.
IP Address (Internet Protocol Address)	A unique numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication. It serves to identify the host or network interface.
Client-Side Scripting	Code that is executed by the user's web browser. It is often used for enhancing user interface interactivity and dynamic content presentation on a web page.
Server-Side Scripting	Code that is executed on the web server. It is typically used for tasks such as database interaction, user authentication, and generating dynamic content before sending it to the client.

Active Learning Ideas

Packet Capture: DNS and HTTP Tracing

Install Wireshark or use browser dev tools. Have students visit a site, capture the DNS query, IP resolution, and HTTP exchange. Groups label packet components and discuss sequence in a shared diagram.

⏱ 45 min·Small Groups

Generate mission

Role-Play: Client-Server Workflow

Assign roles: browser, DNS resolver, web server. Students pass paper messages simulating URL input, resolution, request, and response. Introduce IPv6 addresses to contrast with IPv4.

⏱ 35 min·Whole Class

Generate mission

Coding Demo: Client vs Server Side

Pairs write client-side JavaScript for form validation in browser console. Then deploy a simple server-side script on Replit to echo user input securely. Compare execution locations.

⏱ 50 min·Pairs

Generate mission

IPv6 Simulation: Address Allocation

Use online IPv6 generators. Small groups assign addresses to classroom devices, calculate total possible vs IPv4. Debate transition challenges with real stats.

⏱ 40 min·Small Groups

Generate mission

Real-World Connections

Web developers at companies like Google use their understanding of DNS and HTTP to optimize website performance and ensure fast loading times for billions of users worldwide. They troubleshoot issues by analyzing network traffic using tools like Wireshark.

Network engineers at telecommunication providers such as Singtel manage the vast infrastructure that routes internet traffic. They are concerned with IP address allocation, including the transition from IPv4 to IPv6, to support the growing number of connected devices.

Cybersecurity analysts investigate network intrusions by examining HTTP request logs and DNS query patterns. Identifying suspicious activity often relies on recognizing deviations from normal client-server communication.

Watch Out for These Misconceptions

Common Misconception

DNS instantly knows all IP addresses without steps.

What to Teach Instead

DNS uses a hierarchical system of root, TLD, and authoritative servers for resolution. Packet-tracing activities with Wireshark let students observe the full query chain, correcting the idea of a single lookup and building evidence-based understanding.

Common Misconception

Client-side and server-side processing do the same tasks interchangeably.

What to Teach Instead

Client-side runs in the browser for fast UI changes; server-side handles secure data on the host. Hands-on coding demos show execution contexts, helping students distinguish through direct comparison and error testing.

Common Misconception

IPv6 adoption is unnecessary due to IPv4 NAT workarounds.

What to Teach Instead

NAT masks shortages but complicates peer-to-peer and adds security risks; IPv6 provides native abundance. Simulations of address exhaustion versus allocation clarify limitations, with group debates reinforcing the need for transition.

Assessment Ideas

Quick Check

Present students with a scenario: 'A user types www.example.com into their browser.' Ask them to list, in order, the key steps involved from DNS resolution to receiving the HTML. This checks their understanding of the DNS lookup process and HTTP request flow.

Discussion Prompt

Pose the question: 'Imagine you are building a simple online quiz. What types of tasks would you perform on the client-side using JavaScript, and what tasks would require server-side processing with a language like Python or PHP?' Facilitate a class discussion to gauge their grasp of client-server roles.

Exit Ticket

Provide students with two short code snippets: one demonstrating basic JavaScript DOM manipulation (client-side) and another showing a simple server-side script that fetches data from a database. Ask them to identify which is client-side and which is server-side, and briefly explain why.

Frequently Asked Questions

How does DNS resolve a URL to an IP address?

DNS resolution starts with a local cache check, then queries root servers, TLD servers like .com, and finally authoritative name servers for the exact IP. Caching speeds repeats. This process ensures human-readable URLs map reliably to machine addresses, vital for web stability. Students trace it via tools to see steps clearly.

What are key differences between client-side and server-side processing?

Client-side processing executes JavaScript in the browser for immediate UI feedback and user interactions. Server-side runs scripts like Node.js on the host for database queries, authentication, and sensitive computations. Understanding this split aids secure app design; demos highlight where code runs and why separation matters for performance and safety.

How does IPv6 solve IPv4 limitations?

IPv4's 32-bit addresses limit devices to 4.3 billion; NAT workarounds add complexity. IPv6's 128-bit format offers 340 undecillion addresses, simplifies routing, and supports auto-configuration. The transition eases IoT growth and ends address shortages, though dual-stack setups bridge old systems. Students model both to grasp scalability.

How can active learning help students understand web technologies and client-server model?

Active approaches like Wireshark packet captures reveal DNS and HTTP flows that lectures miss. Role-plays simulate communication steps, while coding client-server apps shows processing differences hands-on. IPv6 simulations quantify address spaces. These methods make abstract networks concrete, boost retention through collaboration, and connect theory to practice in JC2 cybersecurity contexts.