Chapter 3 · Web Applications
3-1 The Overall Structure of Web Applications
Every time you search on YouTube, buy something on Amazon, or open Gmail, you are using a web application — a program you use through your browser, with nothing to install. Behind that simple screen, three parts work together, and knowing them explains how almost every online service is built.
Guiding question
How is a web application built, and how do its three tiers work together to answer what a user does?
Learning outcome. Explain what a web application is and describe the roles of its three tiers — frontend, backend and database — and trace how they cooperate to turn a user’s action into a result.
With a partner. Think of one website you both used this week. Write down three things it did for you. Then guess: which of those happened on your own screen, and which needed a computer somewhere else? Keep your guesses — you will check them at the end.
1 · What is a web application?
Web application … an application used through a web browser. It can be used as long as you have a browser, without needing to install dedicated software.
e.g., YouTube, Amazon, Gmail, Google Maps
That is the whole difference. A game you download and install lives on your device. A web application lives somewhere else, and your browser is just the window you look at it through. This is why you can open Gmail on a friend’s laptop without installing anything.
2 · The three tiers of a web application
| Tier | Role | Examples |
|---|---|---|
| Frontend | The screen component that users see directly. It runs on the browser and accepts user input. | Search screen, product listing pages, input forms |
| Backend | The server-side processing that users do not see. It processes data and makes decisions. | Searching for products that match search criteria, login authentication |
| Database | A system that organises, stores and manages data. It retrieves data when needed and records new data. | Product information, user information, order history |
Three words, if you remember nothing else.
The frontend shows and collects. The backend decides and processes. The database stores and retrieves. Almost every question in this lesson is answered by putting a job into one of those three boxes.
3 · How the three tiers cooperate
When a user operates a web application, the three tiers cooperate to do the work. Here is the book’s own example — searching for a product on an online shopping site. The interactive below walks it step by step.
- 1The frontend receives the search keywords the user typed in.
- 2The frontend sends the search keywords to the backend.
- 3The backend searches the database for products that match.
- 4The database returns the data of the matching products to the backend.
- 5The backend organises the search results and returns them to the frontend.
- 6The frontend displays the search results on the user’s screen.
The message goes down to the database and comes back up again. Once you can picture that shape, working out which tier does a job becomes easy.
Press 1 to send a search on its way. Watch which box lights up each time — that is the tier doing the work at that moment.
A fair question about that diagram: why bother splitting a web application into three parts? It would be simpler to write one program. The answer is not tidiness — it is that one of those three parts runs on a computer you do not control.
The difference that matters is whose computer it runs on.
The frontend is downloaded to the user’s own device and runs there. They can read every line of it, change it, and send whatever they like back. Every browser has a menu item for viewing it — this is not a loophole, it is how the web works.
The backend runs on the company’s server. Nobody outside can read it or alter it, and the only way to reach it is by asking, through the doorway the company opened.
The book’s wording, which is what an exam wants: The frontend is the part the user directly sees and operates; the backend performs processing that the user cannot see. (p.56)
🧮 Why the price cannot be checked in the browser
- 1
Imagine an online shop that stores the price in the page and lets the frontend work out the total: 3 items × 100 EGP = 300 EGP, then sends “please charge 300” to the server.
Why this step: This is the simple design, and it is the one people reach for first. Everything happens in one place and the server just does as it is told.
- 2
Now remember where the frontend is running: on the customer’s laptop, where they can open the developer tools that ship with every browser and change 100 to 1.
Why this step: Nothing here is hacking. The code was sent to their machine, so it is theirs to inspect and edit — the same way you can scribble on a letter somebody posted to you.
Most people slip here: It does not help to hide the price, scramble the code, or disable right-click. All of that arrives on their computer too, so all of it can be undone. A secret that has been sent to somebody is not a secret.
- 3
The browser now sends “please charge 3”. If the server trusts it, the order goes through at 3 EGP.
Why this step: The server was never attacked and nothing was broken into. It was simply asked a question and believed the answer — which is exactly the mistake.
- 4
The fix: the server ignores the price it was sent, looks the price up in the DATABASE itself, and works out the total there.
Why this step: The database sits behind the backend, out of reach — the browser cannot read it or write to it, and can only ask the backend for things. That is what the three-tier split is FOR.
- 5
State the rule: never trust anything that arrives from the frontend.
Why this step: The frontend’s job is to show things and be pleasant to use. Any check it does is a convenience for honest users — telling them their password is too short before they submit — and never a defence. Every check that matters has to be repeated on the backend.
Where the comparison breaks down: A customer can walk into a real kitchen if they are determined enough. On the web the separation can be absolute — the browser has no route to the database except through the backend. That is why the architecture is worth getting right: it is one of the few places where a boundary can be made genuinely impassable.
The reason it keeps happening is that the broken version works perfectly in testing. Every honest customer sends the right price, so the bug is invisible until somebody sends a wrong one on purpose. That is worth remembering generally: a design flaw in the trust boundary does not show up as a failure — it shows up as a system that behaves beautifully right up until it is abused.
A category of flaw so common it has its own name in security testing.
Familiar web applications, all built the same way
All the web applications you already use run on this same three-tier architecture. Only the contents of each box change.
| Service | Frontend | Backend | Database |
|---|---|---|---|
| Video sharing site | Display of video playback and search screens; reception of user operations | Selection of recommended videos; aggregation of view counts | Storage of video data, user information and viewing history |
| SNS | Display of timelines and post screens; sending of input content | Determining the audience for posts; control of push notifications | Storage of post data, follow relationships and messages |
| E-commerce site | Display of product listings and cart screens; reception of order operations | Stock checking; execution of payment systems | Storage of product information, order history and customer information |
How the real paper is built
The ministry sets half multiple choice and half written answer in every subject. The two halves are not the same skill. In the multiple-choice half you have to spot the wrong options quickly — and the wrong options are built out of the mistakes students really make. In the written half nobody gives you the answer to recognise; you have to produce it, in your own words, with a reason.
Practise both. Being good at one half and weak at the other costs you exactly half the paper.
- web application
- — an application used through a web browser, with no dedicated software to install.
- frontend
- — the screen users see and interact with.
- backend
- — the hidden server-side processing.
- database
- — where data is stored and managed.
- three-tier architecture
- — frontend + backend + database cooperating.
Worked Example
(1) Mark each statement with ○ if it is true or × if it is false.
A The frontend is the screen component that users see directly.
B The backend is the part that runs on the browser.
C A database is a system that organises, stores and manages data.
D A web application operates with the frontend alone.
(2) Match each description (a–c) with the choice that fits: A Frontend, B Backend, C Database.
a The part responsible for server-side processing that users do not see
b The screen component that users interact with directly
c A system that organises, stores and manages data
1 · Answer the following questions.
2 · Answer the following questions.
(2) For each job, which tier of an e-commerce site does it belong to?
Match each description with the choice that fits it.
Product listing page
Stock checking processing
Storage of customer information
Cart screen
Payment processing
Storage of order history
Notice the pattern. Every one of these is either a screen (frontend), a decision (backend) or something kept (database). If a job has the word “storage” in it, the answer is the database every single time.
Think as an Engineer — Investigate & Decide
A clinic wants a web app where patients book appointments, check which time slots are free, and see their past visits. You plan its three tiers.
1 · Assign the work.
For three features — the booking form, checking which time slots are free, and storing past visits — say which tier (frontend, backend or database) should handle each, and why.2 · Diagnose a fault.
The booking page opens normally, but no free slots appear on screen. Which tier is clearly working, and which one has probably failed? Explain your reasoning.3 · Decide.
Recommend whether the clinic should separate its app into three tiers, and give two reasons. In pairs, compare your assignments and agree together on where “checking free time slots” belongs. Give evidence for your answer.
Step 2 is the useful one. If the page itself opened, the frontend is alive. If the page is empty where the slots should be, something further down did not answer — so the fault is in the backend or the database, not in the screen. Being able to say which part broke just from what the user sees is a real engineer’s skill, and it comes straight out of knowing the three tiers.
In a New Context
Lesson Question — Answered
The lesson asked how a web application is structured and how its tiers cooperate. A web application runs in a browser and is built from three tiers. The frontend is the screen the user sees and interacts with; the backend is the hidden server-side processing that makes decisions; and the database organises, stores and manages the data.
When a user acts — searching for a product, for example — the frontend collects the input and passes it to the backend, the backend queries the database, the database returns the data, and the backend sends the organised result back to the frontend to display. Overall, a web application works not through one part but through three tiers cooperating, each with a clear role.
1 · Quiz yourself first.
Cover the Point! section and say the three tiers and their roles out loud, in order, in your own words. Only then come back and do the questions below.
2 · Read the passage and fill in the blanks.
A web application is broadly composed of three tiers. The screen component that users see directly is called the ( a ). The part responsible for server-side processing that users do not see is called the ( b ). A system that organises, stores and manages data is called the ( c ). In response to user actions, these three tiers cooperate to perform processing.
3(1) · For each job, which tier of an SNS does it belong to?
Match each description with the choice that fits it.
Timeline screen
Processing that determines the audience for a post
Storage of post data
Post screen
Notification processing
Storage of follow relationships
3(2) · Which one most appropriately describes the three-tier architecture?
Mark each statement with ○ if it is true or × if it is false.
The frontend has the role of storing and managing data.
The backend is the part that users interact with directly on the browser.
In response to user actions, the frontend, backend and database cooperate to perform processing.
The database has the role of displaying screens to users.
Reflect: Which tier do you think fails most noticeably to a user when something goes wrong, and why?
Challenge: Name one online service you use and describe what its frontend, backend and database each do.
Sign In to Keep Going
You've reached the end of the free preview. Sign in — and upgrade to Plus or Pro — to keep going with Programming and Artificial Intelligence.
Full Access
Unlock all 30 lessons