Part A · The Lesson

The Overall Structure of Web Applications

Lesson 3-1 · Unit 3 · Web Applications

نفس كلام الـ Study Companion بالظبط. الجديد هنا إن تحت أي جزء مش واضح فيه زرار مش فاهم؟، تدوس عليه يشرحلك نفس الجزء بطريقة تانية خالص، وتدوس تاني يديك طريقة ثالثة.

Textbook pages 55 to 61

Lesson 3-1: The Overall Structure of Web Applications

How is a web application structured, and how do its three tiers work together to respond to what a user does?

Every time you search on YouTube, buy on Amazon, or open Gmail, you are using a web application, a program you use through your browser, with nothing to install. Behind the simple screen, three tiers work together: the page you interact with, the hidden server that processes the request, and the database that holds all the data. Understanding these three tiers explains how almost every online service is built.

Key Fact. A web application is built from three tiers, frontend, backend and database, that cooperate to turn a user's action into a result.

1. What is a Web Application?

A web application is an application used through a web browser. It can be used as long as you have a browser, without needing to install dedicated software.

For example: YouTube, Amazon, Gmail, Google Maps.

2. The Three Tiers of a Web Application

A web application is broadly composed of the following three tiers.

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 organizes, stores, and manages data. It retrieves data when needed and records new data.	Product information, user information, order history.

Three-Tier Web Application Architecture.

3. The Flow of How the Three Tiers Cooperate

When a user operates a web application, the three tiers cooperate to perform the processing that makes it work. For example, searching for a product on an online shopping site:

The frontend receives the search keywords entered by the user.
The frontend sends the search keywords to the backend.
The backend searches the database for products that match the criteria.
The database returns the data of matching products to the backend.
The backend organizes the search results and returns them to the frontend.
The frontend displays the search results on the user's screen.

How the Three Layers Work Together, for a product search.

PAUSE & THINK

When you type in a search box and see results, which tier collected your input, and which tier found the answer?

Answer. The frontend collected the input: the search box is on the screen in your browser, and taking what the user types is its job. The database found the answer, because that is where the records are kept and searched. The backend is between them: it carried the keywords down and organized the results on the way back, but it neither displayed the box nor held the data.

The tiers also tell you what has broken

Because each tier has one job, a fault points at a tier. The textbook does not draw this, but its own Think as an Engineer question asks for it, so it is worth having in advance.

Work from the symptom back to the tier. Whatever still works tells you which tiers are fine.

4. Familiar Web Application Configurations

All familiar web applications also operate on this three-tier architecture.

Service	Frontend display and interaction	Backend processing and control	Database storage and management
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

PAUSE & THINK

In the table, every service uses the same three tiers. What changes from one service to the next?

Answer. The roles do not change at all: the frontend always displays and collects, the backend always processes and decides, the database always stores and retrieves. What changes is only the content of each role, because the services do different things. One backend picks recommended videos, another decides who may see a post, another checks stock and takes payment, but all three are the same kind of work: processing and control.

That is why the three-tier model is worth learning once. It is not a description of one website; it is the shape of almost all of them.

Key Terms

Term	Meaning
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 plus backend plus database, cooperating.

Worked Example

FROM THE TEXTBOOK

(1) Mark each statement with ○ if true or × if 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 organizes, stores, and manages data.
D	A web application operates with the frontend alone.

Solution. A ○ The frontend is the screen component that users see directly.
B × The backend runs on the server, not on the browser.
C ○ That is the correct definition of a database.
D × A web application operates with three tiers: frontend, backend and database.

FROM THE TEXTBOOK

(2) Match each description with the most appropriate term.

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 organizes, stores, and manages data

Choices: A Frontend · B Backend · C Database

Solution. a = B (backend), b = A (frontend), c = C (database).

Exam-Style Question

FROM THE TEXTBOOK

Explain how the three tiers of a web application cooperate when a user posts a photo on a social media app. [6]

Refer to: the role of the frontend, backend, and database.

Model answer. The frontend is the screen in the browser, so it shows the post form, lets the user choose the photo and type the caption, and sends what the user entered to the backend. The backend is the server-side processing the user does not see, so it receives the photo and the caption, checks that the user is signed in and allowed to post, decides who the post should be shown to, and passes the data to the database to be saved. The database organizes, stores and manages the data, so it records the photo, the caption, the time and the author, and returns the stored post when it is asked for. Finally the backend confirms to the frontend that the post was saved, and the frontend displays it on the screen. The three tiers cooperate, each doing only its own job: showing and collecting, processing and deciding, storing and retrieving.

Try

FROM THE TEXTBOOK

2 (1). When searching for a product on an online shopping site, which tier searches through the data for products that match the keywords?

A Frontend · B Backend · C Database

Answer: C, the database. The backend asks for the matching products, but the searching through the stored records happens in the database. Step 3 of the flow is the backend searching the database; step 4 is the database returning the data.

FROM THE TEXTBOOK

2 (2). For each item, say which tier of an e-commerce site it belongs to.

A Frontend · B Backend · C Database

a	Product listing page	d	Cart screen
b	Stock checking processing	e	Payment processing
c	Storage of customer information	f	Storage of order history

Answers. a = A, b = B, c = C, d = A, e = B, f = C.

Lesson Question, Answered

The lesson asked how a web application is structured and how its three tiers work together. A web application is used through a browser with nothing to install, and it is built from three tiers with separate jobs: the frontend displays and collects, the backend processes and decides, and the database stores and retrieves. They cooperate in one direction and back: the frontend passes what the user did to the backend, the backend asks the database, the database returns the data, and the answer travels back up to the screen. The frontend never speaks to the database directly. Because the roles stay the same and only the content changes, this one shape explains almost every online service.

خلصت الدرس

باقي الـ PDF فيه الأسئلة والتمارين بإجاباتها، وزيادة عليها Part C.

كل الواجبات

Programming and Artificial Intelligence · Egyptian Baccalaureate · Year 2