Course Title: Web
Engineering(CSE-305)
Session: GU-BS-6th
Miss Tehseen baig-
MS(CS)
Reference/ material
Reference Book/Material:
1. W3Schools (https://www.w3schools.com/)
2. PHP Homepage (http://php.net/)
3. Laravel framework (https://laravel.com/)
4. Node JS (https://nodejs.org)
5. React JS (https://reactjs.org)
6. Express JS (https://expressjs.com)
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.
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
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
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 –
Flipkart.com Example
Step 1: You Enter the URL
•You type flipkart.com 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, Node.js)
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
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.
• Scalable for large organizations with structured access.
Client • Reliable performance when servers are properly maintained.
server 2. Disadvantages:
• Server dependency—if the server fails, clients lose access.
model • 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., www.example.com) into machine-readable IP addresses (e.g., 192.0.2.1) 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 /index.html).
• 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?
