Lesson 1

Web
Programming
and Applications

06/16/24 1
 Introduction to Web

• World Wide Web, also known as the web, is a collection of

websites and web pages stored in web servers and
connected to the local computer through the internet.

• A huge amount of images, documents, and other

resources are stored in the server and accessed using
hyperlinks.
• Thus people use the internet through the web.

06/16/24 2
 History of WWW

• Sir Tim Berners-Lee introduced the concept of the WWW

at the European Organization of Nuclear Research (CERN).
• He developed a personal database of people and software
models and used hypertext so that each new page details
was linked to an existing page.

06/16/24 3
 History of WWW(cont.)

• Sir Tim Berners-Lee introduced tools such as HyperText

Transfer Protocol (HTTP) between 1989-1991, Web
browser in 1990, and HyperText Markup Language (HTML)
in 1993.

06/16/24 4
 HTTP Protocol

• The Hypertext Transfer Protocol (HTTP) is application-level

protocol for collaborative, distributed, hypermedia
information systems.

• It is the data communication protocol used to establish

communication between client and server.

• Basically it follows the request response model.

• The client makes the request for the desire website or web
page to the server by giving the URL in the address bar in
browser.
• This request is receive by web server and web server gives
the response to the web browser by returning required web
page.

06/16/24 5
 HTTP Protocol(cont.)

06/16/24 6
 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

06/16/24 7
The HTTP Request Circle

• A typical HTTP request / response circle:

• The browser requests an HTML page. The server returns

an HTML file.
• The browser requests a style sheet. The server returns a
CSS file.
• The browser requests an JPG image. The server returns a
JPG file.
• The browser requests JavaScript code. The server returns
a JS file
• The browser requests data. The server returns data (in
XML or JSON).

06/16/24 8
XHR - XML Http Request

• All browsers have a built-in XMLHttpRequest Object (XHR).

• XHR is a JavaScript object that is used to transfer data

between a web browser and a web server.

• XHR is often used to request and receive data for the

purpose of modifying a web page.

• Despite the XML and Http in the name, XHR is used with
other protocols than HTTP, and the data can be of many
different types like HTML, CSS, XML, JSON, and plain text.

06/16/24 9
 XHR - XML Http
Request(cont.)
• The XHR Object is a Web Developers Dream, because you
can:

• Update a web page without reloading the page

• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background

06/16/24 10
 XHR - XML Http
Request(cont.)
• The XHR Object is the underlying concept of AJAX and
JSON:

06/16/24 11
 HTTP Request Examples

• Here’s a simple HTTP GET request example:

• GET /home/user/example.txt HTTP/1.1

• This example opens the file /home/user/example.txt via
the HTTP 1.1 protocol and displays its contents as a result.

06/16/24 12
 HTTP POST Request Examples
• An HTTP POST request has a similar header to the HTTP GET Request,
specifying the method POST.
• In this example, the values to be handled by the target server are
specified in the message body:

• POST /home/user/datafile HTTP/1.1

• From: user@linode33
• User-Agent: Mytools/0.8.0
• Content-Type: application/json
• Content-Length: 32

• {
• [Json-formatted data pairs]
• }
Here, the file /home/user/datafile is shown using the HTTP/1.1
protocol from user@linode33 using version 0.8.0 of a program
called MyTools. This application sends json formatted data with a
content length of 32 characters.

06/16/24 13
 HTTP Methods
HTTP methods Description
The GET method requests a representation of the specified resource. Requests
GET
using GET should only retrieve data.
The POST method is used to submit an entity to the specified resource, often
POST
causing a change in state or side effects on the server.
The HEAD method asks for a response identical to that of a GET request, but
HEAD
without the response body.
The OPTIONS method is used to describe the communication options for the target
OPTIONS
resource.
The PUT method replaces all current representations of the target resource with
PUT
the request payload.
DELETE The DELETE method deletes the specified resource.
The TRACE method performs a message loop-back test along the path to the target
TRACE
resource.
The CONNECT method establishes a tunnel to the server identified by the target
CONNECT
resource.
PATCH The PATCH method is used to apply partial modifications to a resource.

06/16/24 14
 Uniform Resource Identifier(URI)

• 2) Request URI: Uniform Resource Identifier also known as URI is

a string used to identify the resources or name on the Internet.

• The URI is a combination of URN and URL. URN means Uniform

Resource Name and URL means Uniform Resource Locator.

• The web address denotes the URL and the specific name of the place
or a person or item denotes URN.

• Identifies a resource by name. It always starts with the prefix urn: For
example,

• urn:isbn:0451450523 to identify a book by its ISBN

number.
• urn:publishing:book – An XML namespace that identifies
the document as a type of book.

06/16/24 15
 URI(cont.)
• The URIs are case insensitive and generally written in lower
case.
• If the URI is written in the form of http: then it is both an URI
and URL but there are some other URI which can also be
used as URL. For example,

Intended Server
URI
ftp://ftp.example.com/index.html file can be located on FTP server
telnet://example.com Telnet server
mailto:admin@codesnail.com Mailbox
https://www.codesnail.com Web Server

06/16/24 16
 Status Codes
Status code Reason phrase Description
200 OK The request has succeeded.
The request has succeeded and a new resource has been created as a result.
201 Created
This is typically the response sent after POST requests or some PUT requests.
The request has been received but not yet acted upon. It is noncommittal
since there is no way in HTTP to later send an asynchronous response
202 Accepted
indicating the outcome of the request. It is intended for cases where another
process or server handles the request, or for batch processing.
Moved The URL of the requested resource has been changed permanently. The new
301
permanetaly URL is given in the response.
Although the HTTP standard specifies “unauthorized”, semantically this
401 Unauthorized response means “unauthenticated”. That is, the client must authenticate
itself to get the requested response.
The client does not have access rights to the content; that is, it is
403 Forbidden unauthorized, so the server is refusing to give the requested resource. Unlike
401, the client’s identity is known to the server.
The server can not find the requested resource. In the browser, this means
the URL is not recognized. In an API, this can also mean that the endpoint is
valid but the resource itself does not exist. Servers may also send this
404 Not Found
response instead of 403 to hide the existence of a resource from an
unauthorized client. This response code is probably the most famous one
due to its frequent occurrence on the web.
Internal server
500 The server has encountered a situation it doesn’t know how to handle.
06/16/24
error 17
 Client Server Architecture

• An N-Tier Application program is one that is distributed

among three or more separate computers in a distributed
network.

• N-Tier architecture can be 2-tier, 3-tier or multi-tier

architecture.

06/16/24 18
 One-tier Architecture:

• One-tier architecture has a Presentation layer, Business

layer and Data layers at the same tier i.e. at the Client
Tier.
• As the name suggested, all the layers and components are
available on the same machine.
• MP3 players, MS Office etc. are some examples of one-tier
architecture.
• To store the data (as a function of the Data Layer) local
system or a shared drive is used.

06/16/24 19
 Two-tier Architecture:

• In such type of architecture, the

client tier handles both Presentation
and Application layers and the
server handles the Database layer.
• The two-tier architecture is also
known as a ‘Client-Server
Application’.
• In two-tier architecture,
communication takes place between
the Client and the Server.
• The client system sends the request
to the server system and the server
system processes the request and
sends the response back to the
client system.
06/16/24 20
 Three-tier Architecture:

• All three major layers are separated

from each other.
• The presentation layer resides at
Client Tier, the Application layer acts
as middleware and lies at Business
Tier and the Data layer is available
at Data Tier.
• This is a very common architecture.

06/16/24 21
 N-tier Architecture

• N-tier architecture is
also called Distributed
Architecture or Multi-tier
Architecture.
• It is similar to three-tier
architecture but the
number of the
application server is
increased and
represented in individual
tiers in order to
distribute the business
logic so that the logic
can be distributed.

06/16/24 22
 Web Browser

• A browser is a software program

that is used to explore, retrieve,
and display the information
available on the World Wide Web.

• A client program that runs on a

user computer or mobile device
and contacts the webserver for
the information requested by the
user.

• This information may be in the

form of pictures, web pages,
videos, and other files that all are
connected via hyperlinks and
categorized with the help of URLs
(Uniform Resource Identifiers).

06/16/24 23
 Web Browser(cont.)

• The web server sends the data back to the browser that
displays the results on internet supported devices.
• On behalf of the users, the browser sends requests to web
servers all over the internet by using HTTP (Hypertext
Transfer Protocol).
• A browser requires a smartphone, computer, or tablet and
internet to work.

• Examples include Google Chrome, Mozilla Firefox, Opera,

Safari, Internet explorer, etc.

06/16/24 24
 Browser Functions
• The many functions of web browsers are-
i. Reformat the URL and send the valid HTTP request on
Internet.

ii. When user gives the URL address of particular domain then
web browsers helps converts the DNS to corresponding IP
address.

iii. Web browser helps establishes the connection with web

servers and client.

iv. The web browsers send the HTTP request to the server.

v. Web browsers display the web pages that request by client.

vi. Web browsers automatically store (Cache) the recently
visited web pages. This feature is called Cache control.

06/16/24 25
 Web Browser Architecture

06/16/24 26
 Browser Components
• User Interface: The User Interface subsystem is the layer
between the user and the Browser Engine. It provides features
such as toolbars, visual page-load progress, smart download
handling, preferences, and printing.

• Browser Engine: The Browser Engine subsystem is an

embedded component that provides a high-level interface to the
Rendering Engine(Which is the next layer). It loads a given URL
and supports primitive browsing actions such as forward, back,
and reload.

• Rendering Engine: The Rendering Engine subsystem produces

a visual representation for a given URL. It is capable of displaying
HTML and Extensible Markup Language (XML) documents,
optionally styled with CSS, as well as embedded content such as
images.

06/16/24 27
 Browser Components(cont.)

• Networking: The Networking subsystem implements file

transfer protocols such as HTTP and FTP
• JavaScript Interpreter: The JavaScript Interpreter evaluates
JavaScript code, which may be embedded in web pages.
• XML Parser: The XML Parser subsystem parses XML documents
into a Document Object Model (DOM) tree.

• Display Back-end: The Display Back-end subsystem provides

drawing and windowing primitives, a set of user interface
widgets, and a set of fonts

• Data Persistence: The Data Persistence subsystem stores

various data associated with the browsing session on disk.

06/16/24 28
 Web Server
• A Web server is a computer where the web content is
stored.
• Basically web server is used to host the web sites but
there exists other servers also such as gaming, storage,
FTP, email etc.
• Web Server Operations
• Web server software is accessed through the domain
names of websites and ensures the delivery of the site’s
content to the requesting user.

• A web server as a hardware is the computer that contains

shared resources

• A Web server as a software is the software installed on a

hardware such as IIS or apache HTTP server
06/16/24 29
 Web Programming

• Writing the necessary source code to create a website.

• At the very least, it refers to writing the HTML pages.

• However, Web pages also contain CSS, JavaScript, and

any website that provides access to databases or any
processing for the user requires additional programs that
run in the Web server.

• Web server processing is programmed in Java, PHP, Perl

and other languages.

06/16/24 30
 Web Development

• Web development is the process of building web

applications, software that is accessible in a Web browser.

• Web development is divided into two areas: front-end web

development (or client-side development) and back-end
web development (or server-side development).

• Using a car as an analogy: front-end web development is

the steering wheel and dashboard while back-end web
development encompasses all the mechanics under the
car’s hood.

06/16/24 31
 Front End Web Development

• Front-end development is the process of building the

portion of a web application that a user visually sees:
• The content on the screen, design elements such as colors
and style, and the ways in which you interact with these
elements.
• Front-end developers and even many web designers
usually have to learn the three major coding languages
used in front-end web development: HTML, CSS, and
JavaScript.

06/16/24 32
 Front-End Design Roadmap

• To become a web developer, start with the subjects below,

• in the following order:
• 1. Create your first web page
• The first thing you have to learn, is HTML, which is the
standard markup language for creating web pages.
• 2. Style your web page
• The next step is to learn CSS, to set the layout of your
web page with beautiful colors, fonts, and much more.
• 3. Make your web page interactive
• After studying HTML and CSS, you should learn JavaScript to
create dynamic and interactive web pages for your users.

06/16/24 33
 What About Back-End?
• Front-end development refers to the client-side (how a
web page looks).
• Back-end development refers to the server-side (how a
web page works).
• Front-end code is used to create static websites, where
the purpose is to display the web page.
• However, if you want to make your website dynamic
(manage files and databases, add contact forms, control
user-access, etc.), you need to learn a back-end
programming language, like PHP or Python, and use SQL
to communicate with databases.

06/16/24 34
 THE END
Thank you!

06/16/24 35