← QCE Digital Solutions Unit 3

Components of a web application

Software run through a browser, made of server-side parts (web server, database server, server-side code) and client-side parts (browser, user device) that connect over the internet.

Part of: QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 29

Understanding Components of a web application in QCE Digital Solutions Unit 3

What it does: This shows how the parts connect. The browser sends a request, and the web server replies with a response. The browser and user device are the client side. The web server, database server and server-side code are all on the server side. These three parts sit on the server side. They handle requests, run the logic and store the data. Mixing up the sides is a common error. Servers hold the logic and data, and the client displays the page to the user.

Common mistakes: The server-side app object is created with assignment, so it needs a single = (app = Flask(__name__)). == only compares values. The method that sends a query to the database server is execute, not executes. It should be rows = db.execute(sql).

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Components of a web application to a class →

This module's key terms are also in a printable crossword (Modules 15–119) and word search (Modules 15–176).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which part of a web application runs on the client side?

The database serverThe web browser on the user's device

Matches

Client side = web server, database server, server-side code

↓

These are server-side components, not client-side ones. The client side is the browser and the user device.

Applying

Meanings

Term

web application

Meaning

Software run through a browser, made of server-side parts (web server, database server, server-side code) and client-side parts (browser, user device) that connect over the internet.

Practice

CLIENT: browser sends request

Testing

Gaps

r = requests.("http://localhost:5000/")

Check Answer

Spots

1from flask import Flask

2app == Flask(__name__)

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which part of a web application runs on the client side?

A. The web browser on the user's device ✓

B. The database server

The browser and user device are the client side. The web server, database server and server-side code are all on the server side.

2. Which part of a web application is a server-side component?

A. Server-side code that builds a response ✓

B. A user's phone screen

Server-side code runs on the server. A phone screen is part of the user's device, which is the client side.

3. A student opens a school canteen web app. Where is the order data permanently stored?

A. In the user's browser window

B. On the database server ✓

The database server stores the app's data. The browser only displays what the server sends back.

4. Which statement about how the parts connect is correct?

A. The browser sends requests over the internet and the web server sends responses back ✓

B. The browser connects directly to the database server and skips the web server

The browser talks to the web server. The web server runs server-side code, which then talks to the database server.

5. Which pair contains only server-side components?

A. Web server and web browser

B. Web server and database server ✓

The web browser is client side. The web server and database server both sit on the server side.

Match the Pairs

Web server + database server + server-side code → The server-side components of a web application, which run on the host computers and not on the user's device

Browser + user device → The client-side components of a web application, which the user runs and sees

The client side talks to the server side over the internet by sending a request and getting a response → Browser --HTTP request--> Web server --HTTP response--> Browser

Server-side code asks the database server for stored data before the web server replies to the browser → Web server -> Server-side code -> Database server

Client side = web server, database server, server-side code → These are server-side components, not client-side ones. The client side is the browser and the user device.

Browser --> Database server (browser reads data directly) → The browser does not connect straight to the database server. The request goes through the web server and server-side code first.

Key Term

web application

Software run through a browser, made of server-side parts (web server, database server, server-side code) and client-side parts (browser, user device) that connect over the internet.

Fill in the Blanks

1. import requests r = requests.get("http://localhost:5000/") print(r.text)

Hint: Type the method that makes the client send a request for a page to the server.

2. from flask import Flask app = Flask("shop") app.run(port=5000)

Hint: Type the method name that starts the web server so it listens for requests.

3. cur = db.cursor() cur.execute("SELECT name FROM players") rows = cur.fetchall()

Hint: Type the SQL keyword that reads data from the database server.

4. <form action="/login" method="post"> <input type="text" name="user"> </form>

Hint: Type the form attribute that sets how the browser sends data to the server.

5. @app.route("/api/score") def score(): return jsonify({"score": 42})

Hint: Type the keyword that sends the server-side result back to the browser.

Spot the Error

Question 1

A from flask import Flask

B app == Flask(__name__)

C @app.route("/")

D def home():

E return "Hello"

Line B — The server-side app object is created with assignment, so it needs a single = (app = Flask(__name__)). == only compares values.

Question 2

A import sqlite3

B db = sqlite3.connect("my.db")

C sql = "SELECT * FROM items"

D rows = db.executes(sql)

Line D — The method that sends a query to the database server is execute, not executes. It should be rows = db.execute(sql).

Question 3

A <form action="/login">

B <input name="user">

C <button>Log in<button>

D </form>

Line C — The closing tag needs a slash. It should be <button>Log in</button>, so the browser can display the form.

Question 4

A fetch(/api/scores)

B .then(r => r.json())

C .then(d => console.log(d))

Line A — The URL the browser asks the server for must be a string in quotes: fetch("/api/scores").

Question 5

A def serve_page():

B html = load("index.html")

C return page

Line C — The server-side function loads the page into the variable html, so it must return html. The name page was never created.

Student with a class code? Join your class →