Computer Science
Grade 10
20 min
Introduction to Web Development: Client-Server Architecture
Understand the client-server model and the basics of web communication.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain the distinct roles of a client and a server in a web application.
Diagram the HTTP request-response cycle for a simple web interaction.
Differentiate between front-end (client-side) and back-end (server-side) code.
Write a basic server-side endpoint using Node.js/Express to handle a GET request.
Create a simple HTML form that sends data to a server using a POST request.
Use client-side JavaScript to fetch and display data from a server API.
Identify the key components (client, server, database) in a full-stack application.
Ever wonder what *actually* happens in the seconds after you type a message and hit 'Send' on a social media app? 📲 Let's uncover the secret conversation happening behind the screen!
In this lesson, you'l...
2
Key Concepts & Vocabulary
TermDefinitionExample
ClientThe user-facing part of an application, typically a web browser (like Chrome or Firefox) on a user's device (like a laptop or phone), which requests and displays information.When you open Instagram on your phone, the app itself is the client. It requests photos and videos from Instagram's servers.
ServerA powerful computer that stores website files, runs application logic, and manages databases. It listens for requests from clients and sends back appropriate responses.Netflix's servers store all the movie files and your viewing history. When you click 'play', your device (the client) requests the movie from a Netflix server.
HTTP RequestA message sent from the client to the server, asking for a specific resource (like a webpage or data)...
3
Core Syntax & Patterns
The HTTP Request-Response Cycle
Client sends Request -> Server processes Request -> Server sends Response -> Client processes Response
This is the fundamental communication pattern of the web. Every interaction, from loading a page to submitting a form, follows this cycle. The client always initiates the conversation.
Server-Side GET Endpoint (Node.js/Express)
app.get('/path', (request, response) => { response.send(data); });
This pattern defines a specific URL on your server. When a client sends a GET request to that '/path', the server executes the code inside the function and sends back the specified 'data' as the response.
HTML Form Submission
<form action="/server-endpoint" method="POST"> ... <...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You want to build a 'like' button. When clicked, the like count should update on the server and the new count should be displayed on the page without a full reload. Synthesizing the tutorial's concepts, what is the correct sequence of operations?
A.1. Client sends GET request. 2. Server increments count. 3. Server reloads the entire page with the new count.
B.1. Client sends POST request to an endpoint like `/api/like/message/123`. 2. Server updates the count in the database. 3. Server responds with the new count in JSON. 4. Client-side JavaScript uses `fetch()` to make the request and updates the like count on the page with the response.
C.1. Client-side JavaScript updates the count on the page. 2. The user must manually refresh the page to save the change to the server.
D.1. Client sends a POST request with the new count. 2. Server validates the count. 3. Server sends back a simple 'OK' message.
Challenging
The tutorial's GET endpoint `/api/user` returns a single, hardcoded user. How could you modify this pattern to fetch a *specific* user based on an ID provided in the URL, like `/api/user/123`?
A.Create a separate `app.get` for every possible user ID.
B.Use a POST request instead of a GET request.
C.Define the route with a parameter, like `app.get('/api/user/:userId', ...)` and use `req.params.userId` to find the user.
D.Put the user ID in the request body and read it with `req.body.userId`.
Challenging
Evaluate the security implications of the 'Common Pitfall'. If a client could directly run database queries, which attack becomes trivial, and why is the server a crucial defense?
A.Denial-of-Service (DoS) attack, because the client could overload the server with requests. The server defense is to limit request rates.
B.Cross-Site Scripting (XSS) attack, because the client could inject scripts. The server defense is to sanitize user input.
C.An SQL Injection attack, because the client could submit malicious queries like 'DELETE FROM users;'. The server is a defense because it can validate and sanitize all requests before building a database query.
D.Phishing attack, because the client could be tricked into entering credentials. The server defense is to use HTTPS.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free