Components of a web application
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which part of a web application runs on the client side?
2. Which part of a web application is a server-side component?
3. A student opens a school canteen web app. Where is the order data permanently stored?
4. Which statement about how the parts connect is correct?
5. Which pair contains only server-side components?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1Web server + database server + server-side code | AWeb server -> Server-side code -> Database server | |
| 2Browser + user device | BBrowser --HTTP request--> Web server --HTTP response--> Browser | |
| 3The client side talks to the server side over the internet by sending a request and getting a response | CThese are server-side components, not client-side ones. The client side is the browser and the user device. | |
| 4Server-side code asks the database server for stored data before the web server replies to the browser | DThe browser does not connect straight to the database server. The request goes through the web server and server-side code first. | |
| 5Client side = web server, database server, server-side code | EThe server-side components of a web application, which run on the host computers and not on the user's device | |
| 6Browser --> Database server (browser reads data directly) | FThe client-side components of a web application, which the user runs and sees |
C
Definitions
web application
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
import requests
r = requests.___("http://localhost:5000/")
print(r.text)
2.
from flask import Flask
app = Flask("shop")
app.___(port=5000)
3.
cur = db.cursor()
cur.execute("______ name FROM players")
rows = cur.fetchall()
4.
<form action="/login" ______="post">
<input type="text" name="user">
</form>
5.
@app.route("/api/score")
def score():
______ jsonify({"score": 42})
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
from flask import Flask
B
app == Flask(__name__)
C
@app.route("/")
D
def home():
E
return "Hello"
Question 2
A
import sqlite3
B
db = sqlite3.connect("my.db")
C
sql = "SELECT * FROM items"
D
rows = db.executes(sql)
Question 3
A
<form action="/login">
B
<input name="user">
C
<button>Log in<button>
D
</form>
Question 4
A
fetch(/api/scores)
B
.then(r => r.json())
C
.then(d => console.log(d))
Question 5
A
def serve_page():
B
html = load("index.html")
C
return page
Answer Key
Components of a web application
Section A: Quick Questions
Q1
A — The web browser on the user's device
Q2
A — Server-side code that builds a response
Q3
B — On the database server
Q4
A — The browser sends requests over the internet and the web server sends responses back
Q5
B — Web server and database server
Section B: Match the Pairs
Q1
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
Q2
Browser + user device → The client-side components of a web application, which the user runs and sees
Q3
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
Q4
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
Q5
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.
Q6
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.
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
import requests
r = requests.get("http://localhost:5000/")
print(r.text)Q2
from flask import Flask
app = Flask("shop")
app.run(port=5000)Q3
cur = db.cursor()
cur.execute("SELECT name FROM players")
rows = cur.fetchall()Q4
<form action="/login" method="post">
<input type="text" name="user">
</form>Q5
@app.route("/api/score")
def score():
return jsonify({"score": 42})Section E: Spot the Error
Q1
B — The server-side app object is created with assignment, so it needs a single = (app = Flask(__name__)). == only compares values.
Q2
D — The method that sends a query to the database server is execute, not executes. It should be rows = db.execute(sql).
Q3
C — The closing tag needs a slash. It should be <button>Log in</button>, so the browser can display the form.
Q4
A — The URL the browser asks the server for must be a string in quotes: fetch("/api/scores").
Q5
C — The server-side function loads the page into the variable html, so it must return html. The name page was never created.