2025
ADVANCED WEB
APPLIC
ATION
DESIG
N
CONCEPTION D'APPLICATIONS WEB
AVAN
CEES |
CAW
A
DR. H. BOUGHANEM
UNIVERSITY OF BOUMERDES
Master 1 ILTI & TI
Dr. H. Boughanem </> CAWA
Semester: 2
Teaching unit: Methodological
credits: 5
coefficients: 3
Course load: lectures + practical work
Assessment method: The final grade is calculated as follows:
((Exam score * 2) + Average of continuous assessment notes) /
3
Table des matières
1. World Wide Web/ Web/ www...................................................................................3 2.
Interconnected Networks (Internet) .........................................................................4 3.
Web Page...............................................................................................................4 4.
Website .................................................................................................................5 5.
Web Addressing......................................................................................................5
a. URL (Uniform Resource Locator): ........................................................................5
b. URI (Uniform Resource Identifier): .......................................................................5 c.
URN (Uniform Resource Names): ........................................................................6 d.
IP Address.........................................................................................................6
6. Web architecture....................................................................................................7
6.1. The client-server architecture ..........................................................................7
6.2. Types of Client-Server Architecture...................................................................8
6.2.1. Two-Tier Architecture (Architecture à deux
niveaux)........................................8 6.2.2. Three-Tier Architecture (Architecture à
trois niveaux)......................................8 6.2.3. Multi-tier
architectures.................................................................................9
6.3. Types of servers and clients .............................................................................9
6.3.1. Types of servers .........................................................................................10
6.3.2. Client Typologies .......................................................................................10
6.3.3. How to choose the type of client in a client-server architecture?
...................11
Dr. H. Boughanem </> CAWA
7. Static website VS Dynamic website........................................................................12
7.1. Static website ...............................................................................................12 7.2.
Dynamic website...........................................................................................12
8. Web applications..................................................................................................13
8.1. Definition......................................................................................................13 8.2.
Characteristics .............................................................................................14 8.3.
Operation .....................................................................................................14 8.4.
Technologies used.........................................................................................14
Dr. H. Boughanem </> CAWA
Chapter 1:
Introduction to Web Development
[Link] Wide Web/ Web/ www
Its original principle is to access textual documents located on machines accessible via
the internet, which are interconnected through a “hypertext” linking mechanism.
The web currently serves as a platform for various types of resources, including texts,
documents, images, and videos. These resources enable users to access different
services such as information retrieval, account consultation, email access, and online
shopping… through hyperlinks.
The web is one of the various services offered by the internet, enabling users to
navigate and consult web pages using browsers. It primarily uses the HTTP protocol
(Hypertext Transfer Protocol) for data transfer.
The World Wide Web Consortium (W3C) is an international non-profit organization
founded in 1994 by Tim Berners-Lee, the inventor of the Web. Its primary role is to
develop technical standards to ensure the compatibility and accessibility of the Web for
everyone. The W3C develops recommendations and standards, such as HTML, CSS,
and XML, which assist developers in creating efficient and accessible websites.
Dr. H. Boughanem </> CAWA
2. Interconnected Networks (Internet)
Internet: Interconnected Networks: A network of networks, encompassing devices,
routers, computers, and servers, (interconnected through routers).
TCP/IP Protocol (Transmission Control Protocol/Internet Protocol): The protocol suite
used for communication over the internet.
Network: A collection of interconnected machines (computers interconnected using
various communication media).
[Link] Page
A web page is a document intended to be accessed via a web browser. Web pages are
typically composed of a document written in HTML (Hypertext Markup Language), which
defines the structure of the page.
This document can contain various elements such as text, images, videos, audio, other
types of multimedia content, and hyperlinks that link to other pages. Pages can include
interactive elements through scripts (such as JavaScript) and styles (CSS), allowing for
an enhanced user experience.
Dr. H. Boughanem </> CAWA
[Link]
A website is a group or collection of web pages and related content linked together by
hyperlinks, identified by a common domain name, and hosted on a web server.
Websites serve various purposes, such as providing information, facilitating online
transactions, or offering entertainment.
[Link] Addressing
Refers to how resources are identified and located using a specific
address. a. URL (Uniform Resource Locator):
Each website is accessible through a unique URL (Uniform Resource Locator),
which directs users to the site.
A web address is a string entered into the address bar of a browser to access a
website or web page.
Standard web address: [Link]
Structure : [Link]
Websites are accessed through web browsers using a unique URL.
b. URI (Uniform Resource Identifier):
A URI is a sequence of characters that uniquely identifies a resource, such as
electronic documents, web pages, or images, whether abstract or physical, on
a network, primarily the internet. It identifies a resource by its name, location,
or both.
Examples:
[Link]
[Link]
Dr. H. Boughanem </> CAWA
c. URN (Uniform Resource Names):
A URN is a stable and permanent identifier for a resource, even if the
resource changes location or access method. URNs are often used in
contexts where a stable reference is necessary, such as in digital libraries,
academic resource management, content management systems, and
cataloging.
urn: isbn:0451450523 designates a book by its ISBN number.
d. IP Address:
An IP address (Internet Protocol) is a set of numbers that, in contrast to a web
address, uniquely identifies a device on the internet. It is used for
communication between devices on the internet.
DNS Server (Domain Name System): It is a protocol that associates domain names
(e.g., [Link]) with IP addresses (e.g., [Link]).
Machines connect to each other using IP addresses, but domain names are used to
facilitate memorization and use for humans.
[Link] a sequence of characters that includes a prefix (www), a
domain name, and an extension (.fr for France, .dz for Algeria, .com for commercial)
How to Find a Domain Name:
Use the following two links to find an available domain name.
[Link]
[Link]
Dr. H. Boughanem </> CAWA
[Link] architecture
Refers to the overall structure and framework that defines how websites and web
applications function. It encompasses the design, implementation, and deployment of
various components that interact to deliver content and functionality to users.
6.1. The client-server architecture
Is a foundational model in computing that divides tasks and workloads
between service providers, known as servers, and service requesters,
referred to as clients.
• Servers: are powerful machines designed to handle multiple requests
simultaneously. They store data, run applications, and manage network
resources. Examples include web servers, database servers, and file
servers…
• Clients: can be various devices such as personal computers,
smartphones, or tablets that request services from the server. They
send
Dr. H. Boughanem </> CAWA
requests to the server and receive responses, displaying the content to
the user.
6.2. Types of Client-Server Architecture
6.2.1. Two-Tier Architecture (Architecture à deux
niveaux)
In this model, the client communicates directly with the server. In
other words, the server responds to the client's request directly
using its own resources.
6.2.2. Three-Tier Architecture (Architecture à trois
niveaux)
- Client: The user interface (client-side): The computer requesting
resources (browser responsible for the presentation).
- Application server: oversees supplying resource, while requesting it
from another server. business logic processing (server-side).
Dr. H. Boughanem </> CAWA
- Data server: Database management, providing the necessary data to
the application server. (server-side).
6.2.3. Multi-tier architectures
There are also other more complex multi-tier architectures, where
servers can be organized into distinct layers
This multi-tier architecture is well-suited for complex applications,
with each level playing a specific role in the processing and
management of information.
For example, placing an order on an e-commerce website: Client -
web server - application server - services - database management
system
6.3. Types of servers and clients
Servers, like clients, come in various types, each serving specific
functions within a network:
Dr. H. Boughanem </> CAWA
6.3.1. Types of servers
• Web Server: Hosts websites and manages HTTP requests from
browsers to deliver web pages. (Apache, NGINX, Microsoft IIS…)
• Mail Server: Manages the sending, receiving, and storage of emails.
(Microsoft Exchange, Postfix, Dovecot…)
• File Server: Provides storage and file-sharing capabilities within a
network. (Windows Server, Samba...)
• FTP Servers: Facilitate the transfer of files over the internet using the File
Transfer Protocol (FTP).
• Database Server: Manages and stores databases, allowing applications
to access and manipulate data. (MySQL, PostgreSQL, Microsoft SQL
Server)
• Application Server: Executes software applications and provides
services to users or other applications. (Apache Tomcat, JBoss, Microsoft
.NET)
• Proxy Server: Acts as an intermediary between clients and other
servers, offering security, caching, and traffic management.
• DNS Server: Translates domain names into IP addresses, enabling users
to access websites using easy-to-remember domain names.
• Security Server: Provides security services such as firewalls, intrusion
detection, and antivirus protection to protect network resources.
6.3.2. Client Typologies
a. Thin client (Client léger)
A thin client is a lightweight computing device or software application that
relies heavily on a server for computing tasks. It requires minimal local
Dr. H. Boughanem </> CAWA
processing power and mainly relays inputs and outputs between the user
and the server.
b. Fat/Thick/Heavy client (Clients lourds)
A fat client is a software application that runs on the user's local system,
providing advanced functionalities and performing complex processing
tasks independently without relying heavily on a remote server. This type
of client is more autonomous and typically requires significant local
resources such as processing power, memory, and storage to handle its
operations.
c. Rich client (Client riche)
A rich client is a software application that executes some tasks locally
while interacting with a server for other functions. It combines the benefits
of thin and fat clients by offering a rich user interface and intelligent
workload distribution between the client and server, optimizing both
performance and user experience.
6.3.3. How to choose the type of client in a client
server architecture?
The choice of client type in a client-server architecture is contingent upon a
multifaceted evaluation of several key factors. These include the specific
requirements and constraints of the application itself, the desired user
experience, performance benchmarks, security considerations, and the
need for centralized control. Furthermore, the selection of programming
languages and development tools plays a crucial role in determining the
most suitable client type, as these can significantly impact the overall
efficiency, scalability, and maintainability of the system.
Dr. H. Boughanem </> CAWA [Link] website VS Dynamic
website
7.1. Static website
Static content is indeed delivered to the user exactly as it is stored on the
server, without any real-time changes. It refers to a static website, which
consists of web pages with fixed content. The content displayed on these
pages remains unchanged unless someone manually edits the underlying
code.
Examples: Portfolio sites, informational sites with limited content updates,
business website…
Essential servers: Web server
7.2. Dynamic website
A dynamic website creates content in real time in response to user input or
other factors. The server handles requests and may extract information from
databases or other sources.
Dynamic websites can include interactive features such as forms, user
accounts, and real-time data updates (e.g., stock prices, weather
information).
Dr. H. Boughanem </> CAWA
Dynamic websites use server-side scripting languages (like PHP, [Link]) to
generate HTML on-the-fly, allowing for real-time interaction and data
manipulation.
They are suitable for stock prices, weather information and any websites with
frequently changing content.
Essential Servers: web server, application server and database Server.
[Link] applications
8.1. Definition
Web applications are complex and sophisticated systems that integrate
multiple dynamic and interactive functionalities, providing users with a
rich and engaging experience. They leverage advanced technologies to
deliver a wide range of services and features, making them highly
versatile and adaptable to various needs. These software applications
are executed within a web browser, hosted on a server, and are
accessible over the internet (or intranet) using standard web browsers
(like Chrome, Firefox,
Dr. H. Boughanem </> CAWA
Opera...). They offer a wide range of services and features without
requiring installation on the user's device, making them highly
accessible and flexible.
8.2. Characteristics
Include their flexibility, (they do not require installation on the user's
device). They provide an enriched user experience through dynamic
and interactive interfaces. Moreover, they offer straightforward
accessibility via a simple internet connection, allowing users to access
them from a variety of connected devices.
8.3. Operation
Is based on the web client-server architecture. This architecture
involves a client, typically a web browser, interacting with various
servers to request and retrieve data, enabling dynamic and interactive
web experiences.
8.4. Technologies used
Key web development technologies, including HTML, CSS, JavaScript,
and PHP, are fundamental for designing and building a web
application.