Web Programming(CS735)

• Pre-requisite: Java Programming Basics

• Course Outcomes:
-CO1: Design web pages using XHTML and CSS.
-CO2: Develop dynamic web pages using JavaScript.
-CO3: Create XML documents and XML Schema for an
application.
-CO4: Build web applications using PERL and PHP.
-CO5: Implement a web-enabled information storage
and retrieval system using Perl, PHP and MySQL.
 Unit -01 & 02
• Unit 01- Introduction to HTML
What Is HTML and Where Did It Come from?, HTML
Syntax, Semantic Markup, Structure of HTML
Documents, Quick Tour of HTML Elements, HTML5
Semantic Structure Elements, Introducing Tables,
Introducing Forms, Form Control Elements.
• Unit 02- Introduction to Styles sheets and Frameworks
Introduction to CSS, What Is CSS, CSS Syntax, Location
of Styles, Selectors, The Cascade: How Styles Interact,
The Box Model, CSS Text Styling, Positioning Elements,
Floating Elements, Responsive Design, CSS Frameworks
 Unit -03
• JavaScript: Client-Side Scripting
What Is JavaScript and What Can It Do? , Client-Side
Scripting, JavaScript’s History and Uses, Where Does
JavaScript Go?, Syntax, JavaScript Objects, The
Document Object Model (DOM), JavaScript Events,
Forms.
jQuery Foundations, Including jQuery in Your Pagex,
jQuery Selectors, jQuery Attributes, jQuery Listeners,
Modifying the DOM
 Unit -04 & 05
• Unit 04 - Introduction to Server-Side Development with
PHP 
What Is Server-Side Development?, Quick Tour of PHP,
Program Control, Functions, Arrays, $_GET and $_POST
Superglobal Arrays, $_SERVER Array, $_FILES Array,
Reading/Writing Files, Accessing MySQL in PHP, Sample
Database Techniques .
• Unit 05 - Introduction to Data Interchange Format
XML Overview, Well-Formed XML, Valid XML, XSLT,
XPath, XML Processing, XML Processing in JavaScript,
XML Processing in PHP, JSON, Using JSON in JavaScript,
Using JSON in PHP
 Text Book
• Randy Connolly, Ricardo Hoar, "Fundamentals of Web
Development”, 1st Edition, Pearson Education India.
2015.
• Reference Books:
- Luke Welling, Laura Thomson, “PHP and MySQL Web
Development”, 5th Edition, Pearson Education, 2016.
(ISBN:978-9332582736)
- Nicholas C Zakas, “Professional JavaScript for Web
Developers”, 3rd Edition, Wrox/Wiley India, 2012. (ISBN:978-
8126535088)
- Jeffrey C. Jackson: Web Technologies- A Computer Science
Perspective, Pearson Education, Eleventh Impression, 2012.
 A quick history of WWW
• The WWW relies on a number of systems, protocols, and
technologies all working together in unison.
• Telephone networks in particular provide a good starting
place to learn about modern digital communications .
• In the telephone networks calls were routed through
operators who physically connected caller and receiver by
connecting a wire to a switchboard to complete a circuit.
• These operators were around in some areas for almost a
century before being replaced with automatic mechanical
switches.
• Even mechanical switches did the same job: physically
connect caller and receiver
 Circuit Switch
• One of the weaknesses of having a physical connection is
that you must establish a link and maintain a dedicated
circuit for the duration of the call.
• This type of network connection is sometimes referred to
as circuit switching .
• The problem with circuit switching is that it can be
difficult to have multiple conversations simultaneously.
• It also requires more bandwidth since even the silences
are transmitted.
Circuit Switch
 Packet Switching
• In the 1960s, as researchers explored digital
communications and began to construct the first
networks, the research network ARPANET was created.
• ARPANET did not use circuit switching but instead used
an alternative communications method called packet
switching.
• A packet-switched network does not require a
continuous connection.
• Instead it splits the messages into smaller chunks called
packets and routes them to the appropriate place based
on the destination address.
• The packets can take different routes to the destination
 Packet Switching
• Packet switching seem a more complicated and
inefficient approach than circuit switching.
• But it is in fact, more robust (it is not reliant on a single
pathway that may fail) and a more efficient use of
network resources (since a circuit can communicate data
from multiple connections).
Packet Switching
 Protocols and Internet
• In 1981, protocols for the Internet were published and
ready for use.
• A protocol is the name given to a formal set of publicly
available rules that manage data exchange
between two points.
• Later computers are began to adopt the TCP/IP
(Transmission Control Protocol/Internet Protocol)
communication model.
 The birth of the web
• In the early days, email and text-based systems were the
extent of the Internet experience.
• This transition from the old terminal and text-only Internet
of the 1980s to the Internet of today is of course due to the
invention and massive growth of the World Wide Web.
• This early web incorporated the following essential
elements that are still the core features of the web today:
■ A Uniform Resource Locator (URL) to uniquely identify a
resource on the WWW.
■ The Hypertext Transfer Protocol (HTTP) to describe how
requests and responses operate.
 Cont..
■ A software program (later called web server software)
that can respond to HTTP requests.
■ Hypertext Markup Language (HTML) to publish
documents.
■ A program (later called a browser) that can make HTTP
requests from URLs and that can display the HTML it
receives.
• The developers shows their interest in creating web
applications .
 Web applications v/s Desktop application
• There are a variety of advantages and disadvantages to
web-based applications in comparison to desktop
applications.
• Some of the advantages of web applications include:
 Accessible from any Internet-enabled computer.
■ Usable with different operating systems and browser applications.

 Easier to roll out program updates since only software on the

server needs to be updated and not on every desktop in the
organization.
 Centralized storage on the server means fewer security concerns
about local storage (which is important for sensitive information
such as health care data).
Web applications v/s Desktop application
• Some of the disadvantages include:
■ Requirement to have an active Internet connection (the
Internet is not always available everywhere at all times).
■ Security concerns about sensitive private data being
transmitted over the Internet.
■ Concerns over the storage, licensing, and use of uploaded
data.
■ Problems with certain websites on certain browsers not
looking quite right.
■ Restrictions on access to the operating system can prevent
software and hardware from being installed or accessed (like
Adobe Flash on iOS)
 Internet Protocol
• The Internet exists today because of a suite of interrelated
communications protocols.
• A protocol is a set of rules that partners in communication use
when they communicate.
• These protocols have been implemented in every operating system,
and make fast web development possible.
A Layered Architecture:
• The TCP/IP Internet protocols were originally abstracted as a four-
layer stack. Layers communicate information up or down one level.
• Lower layers handle the more fundamental aspects of transmitting
signals through networks, allowing the higher layers to think about
how a client and server interact.
• In web development developer mainly focuses on the highest layer,
the application layer.
 Layered Architecture
• Four Layer Network Layers
 Link Layer
• The link layer is the lowest layer, responsible for both
the physical transmission across media (wires, wireless)
and establishing logical links.
• It handles issues like packet creation, transmission,
reception, error detection, collisions, line sharing, and
more.
• Responsible for creating MAC(Medium Access Control).
• These are unique 48- or 64-bit identifiers assigned to
network hardware and which are used at the physical
networking level.
 Internet Layer
• The Internet layer (sometimes also called the IP Layer)
routes packets between communication partners across
networks.
• The Internet layer provides “best effort” communication.
• It sends out the message to the destination, but expects
no reply, and provides no guarantee the message will
arrive intact, or at all.
• The Internet uses the Internet Protocol (IP) addresses to
identify destinations on the Internet.
• Every device connected to the Internet has an IP address,
which is a numeric code that is meant to uniquely identify
it.
Internet Protocol Address
 Internet Protocol Version- 4
• There are two types of IP addresses: IPv4 and IPv6.
• IPv4 addresses are the IP addresses from the original
TCP/IP protocol.
• In IPv4, 12 numbers are used (implemented as four 8-bit
integers), written with a dot between each integer.
• Since an unsigned 8-bit integer’s maximum value is 255,
• four integers together can encode approximately 4.2
billion unique IP addresses .
 Internet Protocol Version- 6
• To future-proof the Internet against the 4.2 billion limit, a
new version of the IP protocol was created, IPv6.
• This newer version uses eight 16-bit integers for 2 ^128
unique addresses.
• These 16-bit integers are normally written in hexadecimal,
due to their longer length.
 Transport Layer
• The transport layer ensures transmissions arrive in order and
without error.
• This is accomplished through a few mechanisms.
• First, the data is broken into packets formatted according to the
Transmission Control Protocol (TCP).
• Each data packet has a header that includes a sequence
number, so the receiver can put the original message back in
order, no matter when they arrive.
• Secondly, each packet is acknowledged back to the sender so in
the event of a lost packet, the transmitter will realize a packet
has been lost since no ACK arrived for that packet.
• That packet is retransmitted, and although out of order, is
reordered at the destination
Transport Layer Functionality
 Application Layer
• Application layer protocols implement process-to-process
communication.
• There are many application layer protocols. A few that are
useful to web developers include:
■ HTTP. The Hypertext Transfer Protocol is used for web
communication.
■ SSH. The Secure Shell Protocol allows remote command-line
connections to servers.
■ FTP. The File Transfer Protocol is used for transferring files between
computers.
■ POP/IMAP/SMTP. Email-related protocols for transferring and
storing email.
■ DNS. The Domain Name System protocol used for resolving domain
names to IP addresses.
 The Client – Server Model
• The web is sometimes referred to as a client-server model
of communications.
• A client is a computer agent that makes requests and
receives responses from the server, in the form of response
codes, images, text files, and other data.
• Client machines are the desktops, laptops, smart phones,
and tablets .
• These machines have a broad range of specifications
regarding operating system, processing speed, screen size,
available memory, and storage.
• In the most familiar scenario, client requests for web pages
come through a web browser.
 The Client – Server Model
• The server in this model is the central repository, the
command center, and the central hub of the client-server
model.
• It hosts web applications, stores user and program data,
and performs security authorization tasks.
• Since one server may serve many thousands, or millions of
client requests.
• The essential characteristic of a server is that it is listening
for requests, and upon getting one, responds with a
message.
• The request and response of both client and server is
considered as a loop.
 The Request – Response Loop
• The client initiates a request to a server and gets a response
that could include some resource like an HTML file, an image, or
some other data.
• This response can also contain other information about
the request, or the resource provided such as response codes,
cookies, and other data.
 Servers Types
• Web servers. A web server is a computer servicing HTTP
requests. This typically refers to a computer running web
server software such as Apache or Microsoft IIS (Internet
Information Services) .
• Application servers. An application server is a computer
that hosts and executes web applications, which may be
created in PHP, ASP.NET, Ruby on Rails, or some other web
development technology.
• Database servers. A database server is a computer that is
devoted to running a Database Management System
(DBMS), such as MySQL, Oracle, or SQL Server, that is being
used by web applications.
 Servers Types
• Mail servers. A mail server is a computer creating and
satisfying mail requests, typically using the Simple Mail
Transfer Protocol (SMTP).
• Media servers. A media server (also called a streaming
server) is a special type of server dedicated to servicing
requests for images and videos. It may run special software
that allows video content to be streamed to clients.
• Authentication servers. An authentication server handles
the most common security needs of web applications. This
may involve interacting with local networking resources
such as LDAP (Lightweight Directory Access Protocol)
or Active Directory.
 Different types of Servers

.
 Domain Name System
• Humans beings are not capable of remembering IP address.
• As far back as the days of ARPANET, researchers assigned
domain names to IP addresses.
• In those early days, the number of Internet hosts was small.
• So a list of a few hundred domain and IP addresses could
be downloaded as needed from the Stanford Research
Institute as a hosts file.
• Those key-value pairs of domain names and IP addresses
allowed people to use the domain name rather IP address.
• Number of computers on the Internet grew, this hosts file
had to be replaced with a better, more scalable, and
distributed system.
 Domain Name System
• This system is called the Domain Name System (DNS)
• DNS is responsible for converting host address to IP address
• domain names provide a human-friendly way to identify
computers on the Internet

.
 Name Levels

.
 Name Levels
• A domain name can be broken down into several parts.
• All domain names have at least a top-level domain (TLD)
name and a second-level domain (SLD) name.
• Most websites also maintain a third-level WWW
subdomain.
• The rightmost portion of the domain name (to the right of
the rightmost period) is called the top-level domain.
• Top level domain names are categorized into two main
broad categories.
 Generic top-level domain (gTLD)
• Unrestricted. TLDs include .com, .net, .org, and .info.
• Sponsored. TLDs including .gov, .mil, .edu, and others.
These domains can have requirements for ownership and
thus new second-level domains must have permission from
the sponsor before acquiring a new address.
• New. Companies and individuals could submit applications
for new TLDs. Which include a wide range of both
contested and single applicant domains. These include
corporate ones like .apple, .google, and .macdonalds, and
contested ones like .buy, .news, and .music.
 Country code top-level domain (ccTLD)
• TLDs include .us, .ca, .uk, and .au. At the time of writing, there
were 252 codes registered.
• These codes are under the control of the countries
which they represent
• In the United Kingdom, for example, commercial entities and
businesses must register subdomains to co.uk rather than
second-level domains directly.
• Since some nations use nonwestern characters in their native
languages, the concept of the internationalized top-level
domain name (IDN).
• Some IDN’s include Greek, Japanese, and Arabic domains
which have test domains at http: //παρά δειγμα. δοκιμή,
http:// 例え . テスト , and http:// , ‫ الثم‬.‫ رابتخإ‬respectively
 Uniform Resource Locators(URL)
• In order to allow clients to request particular resources
from the server, a naming mechanism is required.
• So that the client knows how to ask the server for the file.
• For the web that naming mechanism is the Uniform
Resource Locator (URL).
• It consists of two required components: the protocol used
to connect, and the domain (or IP address) to connect to.
• Optional components of the URL are the path (which
identifies a file or directory to access on that server), the
port to connect to, a query string, and a fragment identifier
 Uniform Resource Locators(URL)

• Protocol : The first part of the URL is the protocol that we

are using. Many of the application layer protocols can be
used as a communication protocol.
• Example:
1. ftp://example.com/abc.txt sends out an FTP request on
port 21
2. http://example.com/abc.txt would transmit on port 80.
• Many of the application layer protocols may appear in the
in a URL.
 Uniform Resource Locators(URL)

• Domain: The domain identifies the server from which we are

requesting resources. As a domain part alternative IP address can
also be used
• Path: The defines the resource location on the server.
• Port: The optional port attribute allows us to specify connections
to ports other than the defaults defined by the IANA authority.
• A port is a type of software connection point used by the
underlying TCP/IP protocol and the connecting computer.
• If the IP address is analogous to a building address, the port
number is analogous to the door number for the building.
• The syntax for the port is to add a colon after the domain, then
specify an integer port number. Ex: http://funwebdev.com:888/
 Uniform Resource Locators(URL)
• Path: The defines the resource location on the server.
• Query String: They are the way of passing information such as
user form input from the client to the server. In URLs, they are
encoded as key-value pairs delimited by “&” symbols and
preceded by the “?” symbol.

• Fragment: The last part of a URL is the optional fragment. This is

used as a way of requesting a portion of a page.
• Browsers will see the fragment in the URL, seek out the
fragment tag anchor in the HTML and scroll the website down
to it
 Hyper Text Transfer Protocol(HTTP)
• There are several layers of protocols in the TCP/IP model,
each one building on the lower ones until we reach the
highest level .
• The application layer, allows for different types of services,
like Secure Shell (SSH), (FTP), and the World Wide Web’s
protocol, i.e., the Hypertext Transfer Protocol (HTTP).
• The HTTP establishes a TCP connection on port 80 (by
default).
• The server waits for the request, and then responds with a
response code, headers, and an optional message (which
can include files)
HTTP illustrated
 Parsing and subsequent requests
• In reality the experience of seeing a single web page is
facilitated by the client’s browser, which requests the initial
HTML page, then parses the returned HTML to find all the
resources referenced from within it, like images, style
sheets, and scripts.
• Only when all the files have been retrieved is the page fully
loaded for the user.
• A single web page can reference dozens of files and
requires many HTTP requests and responses.
• The fact that a single web page requires multiple resources,
possibly from different domains
Browser parsing HTML and making subsequent request
 HTTP Headers
• Headers are sent in the request from the client and
received in the response from the server.
• These encode the parameters for the HTTP transaction,
meaning they define what kind of response the server will
send.
• Headers are one of the most powerful aspects of HTTP.
• Request headers include data about the client machine (as
in your personal computer).
• Web developers can use this information for analytic
reasons and for site customization.
 Headers
• Host. The host header was introduced in HTTP 1.1, and it
allows multiple websites to be hosted off the same IP
address.
• User-Agent. The User-Agent string is the most referenced
header in modern web development. It tells us what kind of
operating system and browser the user is running.
• Accept. The Accept header tells the server what kind of
media types the client can receive in the response.
• The server must adhere to these constraints and not
transmit data types that are not acceptable to the client.
• Accept-Encoding. The Accept-Encoding headers specify
what types of modifications can be done to the data before
transmission.
 Cont..
• This is where a browser can specify that it can unzip or
“deflate” files compressed with certain algorithms.
• Compressed transmission reduces bandwidth usage, but
is only useful if the client can actually deflate and see the
content.
• Connection. This header specifies whether the server
should keep the connection open, or close it after
response.
• Although the server can abide by the request, a response
Connection header can terminate a session, even if the
client requested it stay open.
• Cache-Control. The Cache header allows the client to
control caching mechanisms.
 Response Headers
• Response headers have information about the server
answering the request and the data being sent.
• Server. The Server header tells the client about the server.
It can include what type of operating system the server is
running as well as the web server software that it is using.
• Last-Modified. Last-Modified contains information about
when the requested resource last changed.
• This allows cache mechanisms decide whether to download
a fresh copy of the file or use a locally cached copy.
• Content-Length. Content-Length specifies how large the
response body (message) will be. The requesting browser
can then allocate an appropriate amount of memory to
receive the data.
 Cont..
• Content-Type. To accompany the request header Accept,
the response header Content-Type tells the browser what
type of data is attached in the body of the message.
• Some media-type values are text/html, image/jpeg,
image/png, application/xml, and others.
• Since the body data could be binary, specifying what type
of file is attached is essential.
• Content-Encoding. Even though a client may be able to gzip
decompress files and specified so in the Accept-Encoding
header, the server may or may not choose to encode the
file.
• The server must specify to the client how the content was
encoded so that it can be decompressed if need be.
 Request Methods
• The HTTP protocol defines several different types of
requests, each with a different intent and characteristics.
• The most common requests are the GET and POST request,
along with the HEAD request.
• Other requests, such as PUT, DELETE, CONNECT, TRACE,
and OPTIONS are used for general purpose.
• GET request is asking for a resource located at a specified
URL to be retrieved.
• Whenever you click on a link, type in a URL in your browser,
or click on a book mark, you are usually making a GET
request.
 Cont..
• The other common request method is the POST request.
• This method is normally used to transmit data to the server
using an HTML form.
• In a POST request, data is transmitted through the header
of the request, and as such is not subject to length
limitations like with GET.
• A HEAD request is similar to a GET except that the response
includes only the header information, and not the body
that would be retrieved in a full GET.
GET V/S POST request methods
 Response Codes
• Response codes are integer values returned by the server
as part of the response header.
• These codes describe the state of the request, including
whether it was successful, had errors, requires permission,
and more.
• The codes use the first digit to indicate the category of
response.
• 2## codes are for successful responses, 3## are for
redirection-related responses, 4## codes are client errors,
while 5## codes are server errors.