Web Computing
-Liza Khan
Marks Distribution
THEORY MARKS DISTRIBUTION
• Term Test = 20 Marks = 2 will be conducted
• Avg marks will be given
• Theory Paper = 80 marks ( 6 Questions of 20 marks)
• ( Question 1 compulsory)
( Students need to solve 4 questions)
• ( Select any 3 from Q2 to Q6)
• Total Marks = 80 + 20 = 100
PRACTICAL MARKS of WCNL Lab DISTRIBUTION
• Term Work = 25 Marks
• Practical and oral = 25 Marks
Presentation title 2
Module 1
Web Programming
Fundamentals
-Liza Khan
Agenda
A
Introduction to web
browser
Working of Web
Browser
Three tier web
architecture
Presentation title 4
What is a Web Browser?
A software application used to access
information on the World Wide Web is called
a Web Browser.
A web browser takes you anywhere on the
internet, letting you see text, images and
video from anywhere in the world.
We use web browsers like Mozilla Firefox,
Google Chrome, Microsoft Edge, etc.
Presentation title 5
Working of Web Browser
• When you type the website’s URL into the browser’s address bar and hit
Enter, your browser sends a request to the server where the website’s files
are stored. This communication happens over protocols such as HTTPS
(Hypertext Transfer Protocol Secure) or HTTP (Hypertext Transfer Protocol).
• On receiving your request, the server sends back the website’s files. These
files are often written in languages like HTML, CSS, and JavaScript. Your
browser’s job is to interpret this code and render it into the web page you
see.
• The process begins with Domain Name System (DNS) resolution, where the
browser translates the domain name into an IP address to locate the server
where the web page is stored.
Presentation title 6
Working of Web Browser
Presentation title 7
Working of Web Browser
• The browser then sends an HTTP request to the server, specifying the path
and parameters of the requested resource.
• Once the server receives the request, it sends an HTTP response to the
browser containing the requested resource in HTML, CSS, and JavaScript
code.
• The browser’s rendering engine interprets and renders the code to display
the web page on the user’s device.
• The CSS stylesheets are applied to format the web page’s content, including
fonts, colors, and layout.
• The browser may also execute JavaScript code on the web page to add
interactivity and dynamic behavior.
Presentation title 8
THREE TIER WEB ARCHITECTURE
• What is Three-Tier Architecture?
Three-Tier Architecture is a well-established software
application design pattern which will organize the
application in the three logical and physical computing tiers
as following:
Presentation Tier
Application Tier
Data Tier
Presentation title 9
THREE TIER WEB ARCHITECTURE
Presentation Tier :
• It is the user interface and topmost tier in the architecture.
Its purpose is to take request from the client and displays
information to the client. It communicates with other tiers
using a web browser as it gives output on the browser. It is
developed using languages like- HTML, CSS, JavaScript.
Application Tier :
• It is the middle tier of the architecture also known as the
logic tier as the information/request gathered through the
presentation tier is processed in detail here. It also
interacts with the server that stores the data. It processes
the client’s request, formats, it and sends it back to the
client. It is developed using languages like- Python, Java,
PHP, etc.
Presentation title 10
THREE TIER WEB ARCHITECTURE
Data Tier :
• It is the last tier of the architecture also known as the
Database Tier. It is used to store the processed
information so that it can be retrieved later on when
required. It consists of Database Servers like- Oracle,
MySQL, DB2, etc. The communication between the
Presentation Tier and Data-Tier is done using middle-tier
i.e. Application Tier.
Presentation title 11
THREE TIER WEB ARCHITECTURE
Presentation title 12
HTTP PROTOCOL
The Hypertext Transfer Protocol (HTTP) is
the foundation of the World Wide Web, and it
is used to load webpages using hypertext
links.
A typical flow over HTTP involves a client
machine making a request to a server, which
then sends a response message.
Presentation title 13
HTTP Request / Response
Communication between clients and servers is done
by requests and responses:
• A client (a browser) sends an HTTP request to the
web
• A web server receives the request
• The server runs an application to process the
request
• The server returns an HTTP response (output) to
the browser
• The client (the browser) receives the response
Presentation title 14
HTTPS
Hypertext transfer protocol secure (HTTPS) is the
secure version of HTTP, which is the primary protocol
used to send data between a web browser and a
website.
HTTPS is encrypted in order to increase security of
data transfer. This is particularly important when users
transmit sensitive data, such as by logging into a bank
account, email service, or health insurance provider.
Presentation title 15
DNS (Domain Name System)
What Is DNS?
A DNS or a domain name system is used to translate domain names
into IP addresses.
• The process of DNS resolution involves converting a hostname
(such as [Link]) into a computer-friendly IP address
(such as [Link]).
• An IP address is given to each device on the Internet, and that
address is necessary to find the appropriate Internet device - like
a street address is used to find a particular home.
• When a user wants to load a webpage, a translation must occur
between what a user types into their web browser ([Link])
and the machine-friendly address necessary to locate the
[Link] webpage.
Presentation title 16
DNS (Domain Name System)
How Does DNS Work?
• You type a web address: You enter a website name, like
"[Link]", into your web browser.
• Check the local directory: Your computer looks in its own
memory (cache) to see if it has recently visited "[Link]"
and stored the address. If it finds it, great! You're connected.
• Calling the DNS helper: If not, your computer calls a DNS
Resolver (like a phone book helper). This resolver is usually
provided by your internet service provider (ISP).
• Asking the root servers: The resolver first contacts special root
servers that act like a big index for the internet.
Presentation title 17
DNS (Domain Name System)
How Does DNS Work?
• Following directions: The root servers don't have the exact
address (IP) of "[Link]", but they point the resolver in the
right direction, like telling you which city your friend lives in.
• Reaching the .com neighborhood: The resolver then goes to the
server responsible for ".com" addresses (like finding the right
neighborhood in the city).
• Finding the friend's house: This ".com" server knows exactly
where "[Link]" lives (its IP address) and tells the resolver.
• Delivery! Finally, the resolver sends the IP address back to your
computer, which can now connect to the website and show you
[Link]!
Presentation title 18
Transport Layer Security (TLS)
Transport Layer Security, or TLS, is a
widely adopted security protocol designed
to facilitate privacy and data security for
communications over the Internet.
A primary use case of TLS is encrypting
the communication between web
applications and servers, such as web
browsers loading a website.
Presentation title 19
What does TLS do?
There are three main components to what the TLS
protocol accomplishes: Encryption, Authentication,
and Integrity.
• Encryption: hides the data being transferred from
third parties.
• Authentication: ensures that the parties exchanging
information are who they claim to be.
• Integrity: verifies that the data has not been forged
(fake copy of information) or tampered (altering
information) with.
Presentation title 20
What is the difference between TLS and HTTPS?
HTTPS is an implementation of TLS encryption on top
of the HTTP protocol, which is used by all websites
as well as some other web services.
Any website that uses HTTPS is therefore employing
TLS encryption.
Presentation title 21
Extensible Markup
Language(XML)
• XML is a markup language much like HTML
• XML was designed to store and transport
data
• XML was designed to be self-descriptive
• XML is just information wrapped in tags.
Presentation title 22
The Difference Between XML and HTML
XML and HTML were designed with different goals:
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data
looks
• XML tags are not predefined like HTML tags are
What is a DTD?
DTD stands for Document Type Definition.
A DTD defines the structure and the legal elements and
attributes of an XML document.
Presentation title 23
DOM (Document Object Model)
When a web page is loaded, the browser creates a Document
Object Model of the page.
The HTML DOM model is constructed as a tree of Objects
Presentation title 24
DOM (Document Object Model)
Presentation title 25
JSON (JavaScript Object Notation
JSON, is a lightweight and human-readable format for storing
and transmitting data. Here's a breakdown of its key features:
Data Interchange: JSON is an open standard specifically
designed for exchanging data between different systems and
applications.
Text-based: Being human-readable makes it easy for
developers to understand and work with JSON data.
Simple Structure: JSON uses a basic structure built on two
fundamental elements:
Objects: collections of key-value pairs, where keys are strings
and values can be strings, numbers, booleans, arrays, or null.
Arrays: ordered lists of values, where each value can again be
any JSON data type.
Presentation title 26
JSON (JavaScript Object Notation
Language Independence: Although derived from JavaScript,
JSON is not limited to that language. Most programming
languages have libraries to parse and generate JSON data.
Example:
{
"name": "Alice",
"age": 30,
"city": "New York",
"skills": ["programming", "writing"]
}
Presentation title 27
JSON (JavaScript Object Notation
In this example:
•"name", "age", and "city" are keys representing properties of
the object.
•"Alice", 30, and "New York" are values associated with the
corresponding keys.
•"skills" is another key with an array of strings ("programming",
"writing") as its value.
Presentation title 28
URL
A URL (Uniform Resource Locator) is a unique identifier used to
locate a resource on the Internet. It is also referred to as a web
address. URLs consist of multiple parts -- including a protocol
and domain name -- that tell a web browser how and where to
retrieve a resource.
End users use URLs by typing them directly into the address
bar of a browser or by clicking a hyperlink found on a webpage,
bookmark list, in an email or from another application.
Presentation title 29
URI
URI stands for Uniform Resource Identifier. It's essentially a
string of characters that uniquely identifies a resource. This
resource can be anything from a webpage to a file, a person, a
concept, or even a physical object.
Examples of URIs:
• URL (Uniform Resource Locator): A type of URI that specifies
how to access a resource.
[Link]
• URN (Uniform Resource Name): A type of URI that identifies
a resource without specifying its location.
urn:isbn:0-393-04000-0 (ISBN number)
Presentation title 30
URI
How does it work?
A URI typically consists of several parts:
•Scheme: Specifies the protocol to be used (e.g., http, https,
ftp).
•Authority: Identifies the server or resource provider (e.g.,
[Link]).
•Path: Specifies the location of the resource within the server
(e.g., /path/to/[Link]).
•Query: Optional parameters or search criteria (e.g., ?
search=query).
•Fragment: Identifies a specific part of the resource (e.g.,
#section1).
Presentation title 31
REST API
REST API stands for Representational State Transfer
Application Programming Interface. It's a way for different
software applications to communicate with each other over
the internet.
• Imagine it like this:
• You're ordering food online. The website (your application)
communicates with the restaurant's system (another
application) to place your order, check its status, and
eventually get your food delivered. This communication
happens through a REST API.
Presentation title 32
REST API
• Key Points:
• REST is a set of architectural rules for how the API should work.
• API is a middleman that allows different applications to talk to each
other.
• Representational State Transfer means that the API sends data
(representations) about the state of a resource (like your order).
• How it works:
• HTTP requests: The communication happens through HTTP requests
(like GET, POST, PUT, DELETE).
• JSON or XML: The data is usually sent in JSON or XML format, which are
easy-to-read formats for computers.
• Endpoints: Specific URLs are used to access different parts of the API
(like /orders, /menu, /payments).
Presentation title 33
REST API
• Benefits of REST APIs:
• Simple: Easy to understand and use.
• Scalable: Can handle a large number of requests.
• Flexible: Can be used with different programming languages
and platforms.
• Stateless: Each request is independent, making it easier to
handle.
• In essence, a REST API is a powerful tool that enables
seamless communication between different software
applications.
Presentation title 34
Thank
-Liza Khan
you