1

TOPIC 1: INTRODUCTION TO
WEB APPLICATION
UECS 2094/ UECS 2194 Web Application Development
Jan 2024
 2

DEFINING WEB APPLICATIONS

• Web applications are interactive programs accessed via a web browser.
• They operate on a client-server model, utilizing web browsers as clients.
• Unlike traditional applications, they don't require installation on the user's
device.
 3

WEBSITE AND WEB APPLICATION

Aspect Website Web Application
Primarily informational or Interactive, allowing users to
Purpose
content-driven. perform tasks.
Typically limited to Extensive interaction, like filling
User Interaction
reading/viewing content. forms or customization.
Simpler; uses HTML, CSS, basic More complex; involves server-
Complexity
JavaScript. side programming, databases.
Minimal or not required for Substantial; manages user
Back-end Interaction
static sites. data, transactions, security.
Responsive design mainly for Responsive in both display and
Responsiveness and Scaling
display purposes. functionality.
 4

HOW WEB APPLICATIONS WORK

• Web applications use a combination of server-side scripts (like PHP, ASP) to

handle storage and retrieval of information.
• Client-side scripts (like HTML, JavaScript) present information to users.
• Data is processed on the server and displayed dynamically to users on the
web page.
 5

TYPES OF WEB APPLICATIONS

• Static web applications display fixed content to all users.
• Dynamic web applications interact with the server for real-time content
update.
• E-commerce, portal, and content management systems are examples of
specialized web apps.
 6

EVOLUTION FROM STATIC TO

DYNAMIC WEB APPLICATION
• Early Web (1990s): The early internet consisted mostly of static HTML pages.
These pages were purely informational, displaying the same content to every
visitor.

• Dynamic Content and CGI (Mid-1990s): The introduction of the Common

Gateway Interface (CGI) allowed web servers to generate dynamic
content. This was the beginning of interactive websites, where pages could
respond to user input.

• JavaScript and DHTML (Late 1990s): The advent of JavaScript and Dynamic
HTML (DHTML) brought more interactivity to the client side. Pages could now
include animations, forms, and content that changed without needing to
reload the entire page.
 7

EVOLUTION FROM STATIC TO

DYNAMIC WEB APPLICATION
• AJAX and Web 2.0 (Early 2000s): Asynchronous JavaScript and XML (AJAX) allowed
web applications to retrieve data from the server asynchronously in the background
without interfering with the display and behavior of the existing page. This led to the
Web 2.0 era, characterized by interactive, social web applications like Google Maps
and Facebook.

• HTML5 and Modern Frameworks (2010s): The introduction of HTML5 and advanced
JavaScript frameworks has enabled the creation of sophisticated, responsive, and
highly interactive web applications. These technologies have blurred the lines
between web and desktop applications in terms of capabilities.

• Progressive Web Apps (PWAs): Recently, the concept of Progressive Web Apps has
emerged, combining the best of web and mobile apps. PWAs can work offline,
receive push notifications, and load on the home screen, all while still being a web
application.
 8

ADVANTAGES OF WEB
APPLICATIONS
• Accessible from anywhere with internet connectivity.
• Updates and maintenance are easier as they're done on the server.
• They are cross-platform, functioning on any operating system with a web
browser.
 9

DISADVANTAGES OF WEB
APPLICATIONS
• Dependence on internet connectivity for functionality.
• Can be slower than desktop applications due to web server processing.
• Security risks due to data transmission over the internet.
 10

OVERVIEW
 11

CLIENT – SERVER MODEL

• The 'client' is the user's device (like a computer or smartphone) running
a web browser. The 'server' is a remote computer where the web
application's data and processing occur.
• Interaction Process:
• Request: When a user interacts with a web application through their browser, it
sends a request to the server.
• Processing: The server processes this request. This may involve retrieving or
modifying data, or generating dynamic page content.
• Response: The server sends a response back to the client. This could be a full
web page, some data, or a status message.
• Rendering: The client's browser renders the response for the user to view. If it's a
web page, the browser interprets HTML, CSS, and JavaScript to display it.
 12

FRONT-END DEVELOPMENT
• Involves creating the user interface and experience of the web app.
• Utilizes technologies like:
➢ HTML - the backbone of any web page. It defines the structure and content of a
web page using various elements and tags.
➢ CSS - used for styling and visually presenting HTML elements.
➢ JavaScript - adds interactivity and dynamic behavior to web pages. It can
manipulate HTML and CSS, allowing for real-time content updates, interactive
forms, animations, and much more.
• Focuses on the design, layout, and interactivity experienced by the user.
 13

BACK-END DEVELOPMENT
• Handles the server, application, and database.
• Involves programming in languages like PHP, Python, Ruby, or Java.
• Manages data and ensures the functionality of the front-end.
 14

DATABASE TECHNOLOGY
• Databases store, manage, and retrieve data for web applications. This can
include user information, product data, posts, etc.
• Essential for dynamic web applications that require data retrieval and
storage.
• The back-end communicates with the database to fetch or write data
based on client requests.
• Structured Query Language (SQL) databases, like MySQL, use a structured
query language to manage and manipulate relational data.
 15

SECURITY IN WEB APPLICATIONS

• Crucial to protect data from unauthorized access and breaches.
• Includes implementing data encryption, and secure coding practices.
• Regular security updates and testing are essential to maintain integrity.
 16

THE ROLE OF WEB BROWSERS

• Web browsers act as the client in the client-server model of web communication.
They are software applications installed on users' devices (computers,
smartphones, tablets) that enable users to access and interact with web content.
• Web browsers interpret and render web pages. They interpret HTML documents,
apply CSS styles, and execute JavaScript code to display web content in a
visually appealing and interactive manner.
• Web browsers provide a graphical user interface (GUI) that allows users to interact
with web pages.
• Browsers send HTTP (Hypertext Transfer Protocol) requests to web servers to retrieve
web content.
 17

THE ROLE OF WEB SERVERS

• Web servers handle the server-side logic of web applications. This includes
processing requests, executing code, and generating responses to be sent back
to the client (web browser).
• When a web server receives an HTTP request from a web browser, it processes the
request based on the URL, HTTP method, and any associated data
• Web servers often interact with databases to retrieve or update data. They use
server-side scripting languages like PHP to communicate with databases and
generate dynamic content.
• Web servers generate HTML documents, JSON data, or other formats based on
the request and data retrieved from databases or other sources. These generated
responses are sent back to the web browser for rendering.
 18

WEB BROWSER COMPATIBILITY

• It is the ability of a web application to function correctly and consistently
across different web browsers (like Chrome, Firefox, Safari, Edge, etc.).
• This is a critical aspect of web development due to the diversity in web
browsers and the differences in how they interpret and render HTML, CSS,
and JavaScript.
 19

WEB BROWSER COMPATIBILITY

• Key aspects of web browser compatibility include:
• Rendering Consistency: Ensuring that the web application looks and functions the
same way across various browsers..
• Feature Support: Not all browsers support the same features
• Responsive Design: Ensuring that the web application is usable and visually
appealing across a variety of devices with different screen sizes and resolutions,.
• Performance Optimization: Browsers may have different performance
characteristics. Optimization is key to ensure that the application loads and runs
quickly on all browsers.
• Accessibility: Ensuring that web applications are accessible to all users, including
those using assistive technologies, which may have varying levels of support across
different browsers.
 20

FUTURE TRENDS IN WEB

APPLICATION DEVELOPMENT
• Progressive web apps (PWAs) offer an app-like experience in browsers.
• Increased focus on mobile-first design due to growing mobile usage.
• Artificial Intelligence and Machine Learning integration for smarter
applications.
 21

CONCLUSION
• Web applications are integral to modern digital experiences.
• They offer flexibility, accessibility, and a wide range of functionalities.
• Ongoing advancements continue to enhance their capabilities and user
experiences.
 22

END OF TOPIC 1