Course Title: Web
Engineering(CSE-305)
Session: GU-BS-6th
Miss Tehseen baig-MS(CS)
Reference/ material
Reference Book/Material:
1. W3Schools ([Link]
2. PHP Homepage ([Link]
3. Laravel framework ([Link]
4. Node JS ([Link]
5. React JS ([Link]
6. Express JS ([Link]
Week-01
Introduction to Web & Web
Applications
Understanding the foundation, protocols, and
models of web engineering.
Introduction
Course Introduction, Web: Definition, Internet
Protocols
(Layers), Client Server Model, Request Response
Loop, Peer to
Peer model, Role of DNS, HTTP, URLs, Web Servers
01
Topic 1: Introduction to Web
Applications
1.1: Definition of the Web
The World Wide Web (WWW) is an information
system on the Internet that allows documents to
be accessed via hyperlinks. It's a system built on
top of the Internet.
• Network of interconnected resources accessible via
the internet.
• Documents: composes web pages, applications,
and services that utilize standardized protocols.
• A clear understanding of the web's structure is
foundational for web engineering.
1.2: Key Internet Protocols
Internet protocols facilitate
communication between devices online.
Notable examples include HTTP for web
traffic, HTTPS for secure transactions,
and FTP for file transfers.
Familiarity with these protocols is crucial
for developing and maintaining web
applications.
Layers of internet protocol:
OSL model
The OSI Model consists of seven layers, each with a specific function:
• Physical Layer: Handles raw bit transmission over physical media.
• Data Link Layer: Manages frame transmission and error detection.
• Network Layer: Handles routing and addressing (e.g., IP).
• Transport Layer: Ensures reliable data delivery (e.g., TCP).
• Session Layer: Manages sessions and synchronization.
• Presentation Layer: Handles data formatting and encryption.
• Application Layer: Interfaces with user applications (e.g., HTTP,
FTP).
The OSI Model is primarily a theoretical framework used for
understanding and designing networks. It emphasizes layer
independence, where each layer operates independently of others.
TCP/IP Stack
The TCP/IP Stack is a practical model with four layers:
• Network Access Layer: Combines OSI's Physical and Data
Link layers, handling hardware and media access.
• Internet Layer: Corresponds to OSI's Network layer, focusing
on routing and addressing (e.g., IP).
• Transport Layer: Similar to OSI's Transport layer, ensuring
reliable communication (e.g., TCP, UDP).
• Application Layer: Combines OSI's Application, Presentation,
and Session layers, supporting protocols like HTTP, FTP, and
SMTP.
The TCP/IP model is protocol-driven and widely used in real-world
networking, especially for the internet.
TCP/IP model
Explanation of TCP/IP
• Application: HTTP, FTP, SMTP
(What the user sees)
• Transport: TCP, UDP (Reliable
vs. Unreliable data transfer)
• Internet: IP (Addressing and
routing)
• Network Access: Ethernet, Wi-
Fi (Physical connection)
TCP/IP working(both at sender & receiver)
When Sending Data (From Sender to Receiver)
•Application Layer: Prepares user data using
protocols like HTTP, FTP, or SMTP.
•Transport Layer (TCP/UDP): Breaks data into
segments and ensures reliable (TCP) or fast
(UDP) delivery.
•Internet Layer (IP): Adds IP addresses and
decides the best route for each packet.
•Link Layer (Network Access Layer): Converts
packets into frames and sends them over the
physical network.
TCP/IP working(both at sender & receiver)
When Receiving Data (At the Destination)
• Link Layer: Receives bits from the network and rebuilds
frames to pass to the next layer.
• Internet Layer: Checks the IP address, removes the IP
header, and forwards data to the Transport Layer.
• Transport Layer: Reassembles segments, checks for
errors, and ensures data is complete.
• Application Layer: Delivers the final data to the correct
application (e.g., displays a web page in the browser).
1.3: Understanding the Client-Server Model
• Fundamental to web architecture.
• In this model, the client (user device)
sends requests to the server,
• Which processes these requests and
returns the appropriate responses.
This interaction underlies many web-based
applications and is crucial for understanding
how services are delivered across the
internet.
Client server model example:
Real-World Examples
•Email Systems: Email clients like Gmail request emails from
servers, which deliver them. Similarly, outgoing emails are sent
via the server.
•The World Wide Web: Web browsers request web pages from
servers, which respond with the necessary files to render the
page.
•Cloud Storage: Services like Google Drive allow clients to upload
and download files stored on centralized servers.
02
Topic 2: Web Architecture
Fundamentals
Web architecture
1. Defines how websites and web
applications work behind the scenes.
2. the blueprint of a web application
building
3. it uses clients, servers, databases, and
networks.
Web architecture layer
representation:
How a Web architecture Works –
[Link] Example
Step 1: You Enter the URL
•You type [Link] in your browser and hit enter.
•Browser checks DNS (Domain Name Server) to find the IP
address of the server.
•If visited before, it may use the cached IP address.
•Request is sent using HTTPS protocol for secure
communication.
Step 2: Server Processes the Request
•The web server receives the request and looks for the
requested page/data.
•Business Logic (BL), which are called Domain Logic and
Application Logic handles routing and data access rules.
•BL interacts with storage/database to fetch relevant content.
Step 3: You Get the Response
•The server sends back the requested data.
•The front end (UI/UX) is rendered in your browser.
•You see the web page with all interactive elements.
Components of web
architecture
Component Role
The browser or app you use (Chrome,
Client
Firefox, etc.)
The machine that handles your request and
Server
sends back data
Stores information like user profiles,
Database
products, or messages
The internet connection that links client and
Network
server
Frontend What users see (HTML, CSS, JavaScript)
The logic and data processing behind the
Backend
scenes (PHP, Python, [Link])
Layers of web applications
architecture:
• Presentation Layer
• Business Layer
• Presistance layer
• Cross-cutting code layer
• Third-party integrations
• Presentation Layer:
Accessible to the client via a browser and it includes user interface
components and UI process components.
• Business Layer:
refers to Business Logic or Domain Logic or Application Layer.
accepts the user's request from the browser, processes it, and regulates the
routes through which the data will be accessed.
• Persistence Layer / Data Access Layer
1. Handles data calls and provides access to persistent storage.
2. Closely connected to the business logic layer for optimized data retrieval.
3. Uses servers and DBMS software to manage communication with
databases.
4. Supports data storage in hardware servers or the cloud.
5. Enables interaction between applications, user interfaces, and databases.
Acts as the storage layer of the application.
2.1: The Request-Response Loop
• The request-response loop describes
the cycle of communication between
client and server.
• When a client requests data, the
server processes this request, often
querying databases or systems, and
returns the result.
• Understanding this loop is vital as it
impacts user experience and
application performance.
2.2: Peer-to-Peer Model Explained
• The peer-to-peer (P2P) model allows devices to communicate and share
resources directly without a central server.
• This decentralization can enhance efficiency and resilience but may also
introduce complexities in management and security.
• Examples of P2P applications include file-sharing services and
decentralized networks.
P2P model diagram
• Peer are called nodes, which
are connected together
Merits and demerits
1. Advantages:
•Centralized control makes management and updates
easier.
•Better security since data and access can be monitored
from one location.
Client •Scalable for large organizations with structured access.
server •Reliable performance when servers are properly
maintained.
model 2. Disadvantages:
•Server dependency—if the server fails, clients lose access.
•Higher cost for setup and maintenance (hardware, software,
IT staff).
•Limited scalability—server can become a bottleneck under
heavy load.
•Less fault tolerance compared to distributed systems.
Merits and demerits
1. Advantages:
•Decentralized architecture—no single point of failure.
•Cost-effective—no need for dedicated servers.
•Scalable—performance improves as more peers join and
share resources.
P2P •Efficient for file sharing and collaborative tasks.
model 2. Disadvantages:
•Security risks—harder to monitor and control access.
•Data consistency can be difficult to maintain across peers.
•Performance varies depending on peer availability and
bandwidth.
•Less suitable for enterprise-level applications requiring
centralized control
Compare P2P and Client-server
Feature Client-Server Model Peer-to-Peer Model
Architecture Centralized Decentralized
Roles Distinct client & server Each node is both
Limited by server Grows with number of
Scalability
capacity peers
Easier to manage
Security More complex to secure
centrally
File sharing, LAN
Examples Email, websites
games
2.3: Role of DNS and HTTP in Web Communication
DNS (Domain Name System) translates human-
friendly domain names into IP addresses.
HTTP (Hypertext Transfer Protocol) governs data
communication on the web.
Both are integral in ensuring that user requests are
directed accurately and efficiently to the correct
servers.
DNS (Domain Name System)
Definition:
DNS is like the phonebook of the internet. It translates human-readable domain
names (e.g., [Link]) into machine-readable IP addresses (e.g., [Link]) so
browsers can locate and connect to web servers.
Role in Web Communication:
When a user enters a URL, DNS resolves it to the correct IP address.
It enables seamless access to websites without needing to remember numeric addresses.
DNS queries involve multiple steps: checking local cache → contacting DNS resolver →
querying root, TLD, and authoritative servers2
This process happens in milliseconds, allowing fast and efficient browsing.
HTTP(Hyper Text Transfer Protocol)
1. Definition:
HTTP is the protocol used to transfer web content between a client (browser) and a
server. It defines how requests and responses are formatted and exchanged
2. Role in Web Communication:
After DNS resolves the domain, HTTP initiates the request-response cycle.
The browser sends an HTTP request to the server (e.g., GET /[Link]).
The server responds with the requested content (e.g., HTML, images, scripts).HTTP supports
methods like GET, POST, PUT, DELETE, and works over TCP/IP.
It’s the backbone of all web interactions—whether loading a page, submitting a form, or
fetching data.
Conclusions
In summary, understanding web applications begins with foundational concepts.
From the client-server model to fundamental protocols like HTTP and DNS,
these elements shape the functioning of web technology and applications.
Knowledge of these topics is crucial for effective web engineering and
development.
Thank you!
Do you have any questions?
