IT3401 Web Essentia

Unit-1 Website Basics

Internet
Internet is defined as an Information super Highway, to access information over the
web. However, It can be defined in many ways as follows:

• Internet is a world-wide global system of interconnected computer networks.

• Internet uses the standard Internet Protocol (TCP/IP).
• Every computer in internet is identified by a unique IP address.
• IP Address is a unique set of numbers (such as 110.22.33.114) which
identifies a computer location.
• A special computer DNS (Domain Name Server) is used to give name to the
IP Address so that user can locate a computer by a name.
• For example, a DNS server will resolve a name http://www.flipkart.com to a
particular IP address to uniquely identify the computer on which this website is
hosted.
• Internet is accessible to every user all over the world.
Evolution
The concept of Internet was originated in 1969 and has undergone several
technological & Infrastructural changes as discussed below:

1
 • The origin of Internet devised from the concept of Advanced Research
Project Agency Network (ARPANET).
• ARPANET was developed by United States Department of Defense.
• Basic purpose of ARPANET was to provide communication among the various
bodies of government.
• Initially, there were only four nodes, formally called Hosts.
• In 1972, the ARPANET spread over the globe with 23 nodes located at
different countries and thus became known as Internet.
□

Advantages
Internet covers almost every aspect of life, one can think of. Here, we will discuss
some of the advantages of Internet:

By the time, with invention of new technologies such as TCP/IP protocols,

DNS, WWW, browsers, scripting languages etc.,Internet provided a medium
to publish and access information over the web.

2
• Internet allows us to communicate with the people sitting at remote locations.
There are various apps available on the wed that uses Internet as a medium
for communication. One can find various social networking sites such as:
o Facebo
ok
o Twitter
o
Yahoo
o
Google
+
o Flickr o
Orkut
• One can surf for any kind of information over the internet. Information
regarding various topics such as Technology, Health & Science, Social
Studies, Geographical Information, Information Technology, Products etc can
be surfed with help of a search engine.
• Apart from communication and source of information, internet also serves a
medium for entertainment. Following are the various modes for entertainment
over internet.

3
 o Online Television
o Online Games o
Songs o Videos
o
Social Networking Apps
□ Internet allows us to use many services like:
o Internet Banking
o Matrimonial Services
o Online Shopping
o Online Ticket Booking
o Online Bill Payment
o Data Sharing
o E-mail
□ Internet provides concept of electronic commerce, that allows the business
deals to be conducted on electronic systems

Disadvantages
However, Internet has prooved to be a powerful source of information in almost
every field, yet there exists many disadvanatges discussed below:

4
 • There are always chances to loose personal information such as name,
address, credit card number. Therefore, one should be very careful while
sharing such information. One should use credit cards only through
authenticated sites.
• Another disadvantage is the Spamming.Spamming corresponds to the
unwanted e-mails in bulk. These e-mails serve no purpose and lead to
obstruction of entire system.
• Virus can easily be spread to the computers connected to internet. Such virus
attacks may cause your system to crash or your important data may get
deleted.
• Also a biggest threat on internet is pornography. There are many pornographic
sites that can be found, letting your children to use internet which indirectly
affects the children healthy mental life.
• There are various websites that do not provide the authenticated information.
This leads to misconception among many people.

2. Describe the Fundamentals of computer networking?

This tutorial will discover the definition of computer networking, its types, computer
networks work, networking concepts, commonly used terms, networking and
internet, how it works, and network topologies.

Computer Network
"A Computer Network is defined as a set of two or more computers that are linked
together?either via wired cables or wireless networks i.e., WiFi?with the purpose of
communicating, exchanging, sharing or distributing data, files and resources."

Computer Networks are built using a collection of hardware (such as routers,

switches, hubs, and so forth) and networking software (such as operating
systems, firewalls, or corporate applications).

Though one can also define the computer networks based on their geographic
location, a LAN (local area network) connects computers in a definite physical
dimension, such as home or within an office.

In contrast, a MAN (Metropolitan area network) connects computers ranging

between multiple buildings in a city.

5
The Internet is the most significant example of WAN (Wide Area
Network), connecting billions of networking devices across the world.

One can also describe the concept of computer networking by its communicating
protocols, the physical arrangement of its networking elements, how it manages
network traffic, and it's functioning.

Computer networks are globally used by businesses, the entertainment industry,

education in the research field for communication and transferring their data from
source to destination node.

All the other technologies, including the internet, Google search, instant
messaging apps, online video streaming, social media, email, cloud kitchen,
cloud data storage, etc., all exist because of computer networks.

Computer Network Types

Below are the most common computer network types that are frequently used these
days:

o LAN [Local Area Network} o WLAN

[Wireless local area network] o CAN
[Campus Area Network] o MAN
[Metropolitan Area Network] o PAN
[Personal Area Network] o SAN
[Storage Area Network] o VPN [Virtual
Private Network] o WAN [ Wide Area
Network]

6
1. LAN

LAN or Local Area Network is a group of devices connecting the computers

and other devices such as switches, servers, printers, etc., over a short distance
such as office, home. The commonly used LAN is Ethernet LAN. This network is
used as it allows the user to transfer or share data, files, and resources.

2. MAN

MAN or Metropolitan Area Network is typically a more extensive

network when compared to LANs but is smaller than WANs. This network ranges
between several

7
 buildings in the same city. Man networks are connected via fiber optic cable (usually
high-speed connection). Cities and government bodies usually manage MANs.

3.WAN

WAN or Wide Area Network is the most significant network type connecting
computers over a wide geographical area, such as a country, continent. WAN
includes several LANs, MANs, and CANs. An example of WAN
the Internet, which connects billions of computers globally.

Networking terms and concepts

is

Some of the most commonly used terms in day-to-day networking life are as
discussed below:

1. IP address
An IP address or Internet Protocol is a unique number that represents the
address where you live on the Internet. Every device that is connected to the
network has a string of numbers or IP addresses unlike house addresses.

You won't find two devices connected to a network with an identical IP address.
When your computer sends data to another different, the sent data contains a
'header' that

8
further contains the devices' IP address, i.e., the source computer and the
destination device.

2. Nodes
A node refers to a networking connection point where a connection occurs
inside a network that further helps in receiving, transmitting, creating, or
storing files or data.

Multiple devices could be connected to the Internet or network using wired or

wireless nodes. To form a network connection, one requires two or more nodes
where each node carries its unique identification to obtain access, such as an IP
address. Some examples of nodes are computers, printers, modems, switches,
etc.

3. Routers
A router is a physical networking device, which forwards data packets between
networks. Routers do the data analysis, perform the traffic directing functions on the
network, and define the top route for the data packets to reach their destination
node. A data packet may have to surpass multiple routers present within the
network until it reaches its destination.

4. Switches
In a computer network, a switch is a device that connects other devices and helps
in node-to-node communication by deciding the best way of transmitting data
within a network (usually if there are multiple routes in a more extensive
network).

Though a router also transmits information, it forwards the information only between
networks, whereas a switches forwards data between nodes present in a single
network.

Switching is further classified into three types, which are as follows:

o Circuit Switching
o Packet Switching o Message Switching

9
 o Circuit Switching: In this switching type, a secure communication path is
established between nodes (or the sender and receiver) in a network. It
establishes a dedicated connection path before transferring the data, and this
path assures a good transmission bandwidth and prevents any other traffic
from traveling on that path. For example, the Telephone network.
o Packet Switching: With this technique, a message is broken into
independent components known as packets. Because of their small size,
each packet is sent individually. The packets traveling through the network will
have their source and destination IP address.
o Message Switching: This switching technique uses the store and forward
mechanism. It sends the complete unit of the message from the source node,
passing from multiple switches until it reaches its intermediary node. It is not
suitable for real-time applications.

5. Ports
A port allows the user to access multiple applications by identifying a
connection between network devices. Each port is allocated a set of string
numbers. If you relate the IP address to a hotel's address, you can refer to ports as
the hotel room number. Network devices use port numbers to decide which
application, service, or method is used to forward the detailed information or the
data.

6. Network cable types

Network cables are used as a connection medium between different computers
and other network devices. Typical examples of network cable types are Ethernet
cables, coaxial, and fiber optic. Though the selection of cable type usually
depends on the size of the network, the organization of network components, and
the distance between the network devices.

Computer Networks and the Internet

The Internet is the major example of a WAN, which connects billions of computers
globally. Internet follows standard protocols that facilitate communication between
these network devices. Those protocols include:

1. HTTP (Hypertext Transfer Protocol)

10
 2. IP (Internet protocol or IP addresses)
3. TCP (Transmission Control Protocol)
4. UDP (User Datagram Protocol)
5. FTP (File Transfer Protocol)

ISPs (Internet Service Providers) NSPs (Network Service Providers) effectively

support the internet infrastructure. The infrastructure allows the transportation of
data packets to the recipient device over the Internet.

Internet is a giant hub of information, but this information is not sent to every
computer connected to the Internet. The protocols and infrastructure are responsible
for managing to share the precise information the user has requested.

Network Topology
"Network topology is defined as the arrangement of computers or nodes of a
computer network to establish communication among all."

A node refers to a device that can transmit, receive, create, or store information. The
nodes are connected via a network link that could be either wired (cables, Ethernet)
or wireless (Bluetooth, Wi-Fi).

To help build a successful network in different situations, topologies are further classified
into several types. Though there are several topologies but in
this tutorial, we will discuss the commonly used ones, which are as
follows:

11
1. Bus Topology

o A Bus network topology supports a common transmission medium

where each node is directly connected with the main network cable.
o The data is transmitted through the main network cable and is received by all
nodes simultaneously.
o A signal is generated through the source machine, which contains the
address of the receiving machine. The signal travels in both the direction
to all the nodes connected to the bus network until it reaches the
o destination node.
Bus topology is not fault-tolerant and has a limited cable length.
2. Ring Topology

12
 o A Ring topology is a modified version of bus topology where every node is
connected in a closed-loop forming peer-to-peer LAN topology.
o Every node in a ring topology has precisely two connections. The Adjacent
node pairs are connected directly, whereas the non-adjacent nodes are
indirectly connected via various nodes.
o Ring topology supports a unidirectional communication pattern where sending
and receiving of data occurs via TOKEN.

3. Star Topology

o In a Star network topology, every node is connected using a single

central hub or switch.
o

The hub or switch performs the entire centralized administration. Each node
sends its data to the hub, and later hub shares the received information to the
destination device.
o Two or more-star topologies can be connected to each other with the help of a
repeater.

13
4. Mesh Topology

o In a
Mesh topology, every node the network connection is directly
in
connected to one other forming overlapping connections between the nodes.
o This topology delivers better fault tolerance because if any network device
fails, it won't affect the network, as other devices can transfer information.
o The Mesh networks self-configure and self-organize, finding the quickest,
most secure way to transmit the data.
o One can forpm a full mesh topology by connecting every single node to
another node in the network. Full mesh is expensive and is only used in the
networks, which demands high data redundancy.
o Another type of mesh topology is partial mesh topology, where only a few
devices are connected, and few are connected to the devices with which they
share the most information. This mesh type is applicable in the networks,
requiring less redundancy or a cost-effective network topology that is easy to
execute.

3. Explain the Types of Network protocols and their uses?

, there are vast numbers of users' communicating with different devices in different
languages. That also includes many ways in which they transmit data along with
the different software they implement. So, communicating worldwide will not be
possible if there were no fixed 'standards' that will govern the way user

14
communicates for data as well as the way our devices treat those data. Here we will
be discussing these standard set of rules.

Yes, we're talking about "protocols" which are set of rules that help in governing the
way a particular technology will function for communication. In other words, it can
be said that the protocols are digital languages implemented in the form of
networking algorithms. There are different networks and network protocols, user's
use while surfing.

Types of Protocols
There are various types of protocols that support a major and compassionate role in
communicating with different devices across the network. These are:

1. Transmission Control Protocol (TCP)

2. Internet Protocol (IP)
3. User Datagram Protocol (UDP)
4. Post office Protocol (POP)
5. Simple mail transport Protocol (SMTP)
6. File Transfer Protocol (FTP)
7. Hyper Text Transfer Protocol (HTTP)
8. Hyper Text Transfer Protocol Secure (HTTPS)
9. Telnet
10.Gopher
Let's discuss each of them briefly:

1. Transmission Control Protocol (TCP): TCP is a popular communication

protocol which is used for communicating over a network. It divides any
message into series of packets that are sent from source to destination
and there it gets reassembled at the destination.
2. Internet Protocol (IP): IP is designed explicitly as addressing protocol. It is
mostly used with TCP. The IP addresses in packets help in routing them
through different nodes in a network until it reaches the destination system.
TCP/IP is the most popular protocol connecting the networks.
3. User Datagram Protocol (UDP): UDP is a substitute communication
protocol to Transmission Control Protocol implemented primarily for
creating loss tolerating and low-latency linking between different
applications.

15
 4. Post office Protocol (POP): POP3 is designed for receiving incoming E-mails.
5. Simple mail transport Protocol (SMTP): SMTP is designed to send
and distribute outgoing E-Mail.
6. File Transfer Protocol (FTP): FTP allows users to transfer files from one
machine to another. Types of files may include program files, multimedia
files, text files, and documents, etc.
7. Hyper Text Transfer Protocol (HTTP): HTTP is designed for transferring a
hypertext among two or more systems. HTML tags are used for creating
links. These links may be in any form like text or images. HTTP is designed
on Client-server principles which allow a client system for establishing a
connection with the server machine for making a request. The server
acknowledges the request initiated by the client and responds accordingly.
8. Hyper Text Transfer Protocol Secure (HTTPS): HTTPS is abbreviated as
Hyper Text Transfer Protocol Secure is a standard protocol to secure the
communication among two computers one using the browser and other
fetching data from web server. HTTP is used for transferring data between
the client browser (request) and the web server (response) in the hypertext
format, same in case of HTTPS except that the transferring of data is done in
an encrypted format. So it can be said that https thwart hackers from
interpretation or modification of data throughout the transfer of packets.
9. Telnet: Telnet is a set of rules designed for connecting one system with
another. The connecting process here is termed as remote login. The
system which requests for connection is the local computer, and the system
which accepts the connection is the remote computer.
10.Gopher: Gopher is a collection of rules implemented for searching, retrieving
as well as displaying documents from isolated sites. Gopher also works on
the client/server principle.
Some Other Protocols
Some other popular protocols act as co-functioning protocols associated with these
primary protocols for core functioning. These are:

• ARP (Address Resolution Protocol)

• DHCP (Dynamic Host Configuration Protocol)
• IMAP4 (Internet Message Access Protocol)
• SIP (Session Initiation Protocol)
• RTP (Real-Time Transport Protocol)
• RLP (Resource Location Protocol)

16
 • RAP (Route Access Protocol)
• L2TP (Layer Two Tunnelling Protocol)
• PPTP (Point To Point Tunnelling Protocol)
• SNMP (Simple Network Management Protocol)  TFTP (Trivial File
Transfer Protocol)

4. Explain Web Essentials briefly?

Web Essentials:

Server:

The software that distributes the information and the machine where the
information and software reside is called the server.

• provides requested service to client

• e.g., Web server sends requested Web page

The software that resides on the remote machine, communicates with the
server, fetches the information, processes it, and then displays it on the remote
machine is called the client.

•initiates contact with server (“speaks first”)

•typically requests service from server
•Web: client implemented in browser

Web server:

17
 Software that delivers Web pages and other documents to browsers using the

HTTP protocol Web Page:

A web page is a document or resource of information that is suitable for the

World Wide Web and can be accessed through a web browser.

Website:

A collection of pages on the World Wide Web that are accessible from the
same URL and typically residing on the same server.

URL

Uniform Resource Locator, the unique address which identifies a resource on the
Internet for routing purposes.

Client-server paradigm:

The Client-Server paradigm is the most prevalent model for distributed

computing protocols. It is the basis of all distributed computing paradigms at a
higher level of abstraction. It is service-oriented, and employs a request-response
protocol.

A server process, running on a server host, provides access to a service. A

client process, running on a client host, accesses the service via the server
process.The interaction of the process proceeds according to a protocol.

The primary idea of a client/server system is that you have a central

repository of information—some kind of data, often in a database—that you want
to distribute on demand to some set of people or machines. The Internet:

18
 •Medium for communication and interaction in inter connected network.
• Makes information constantly and instantly available to anyone with a
connection.

Web Browsers

• User agent for Web is called a

browser: o Internet Explorer

Web

• Server for Web is called Web

server: o Apache (public

o MS Internet Information Server

Server:

domain)

Protocol:

Protocols are agreed formats for transmitting

data between devices. The protocol determines:

19
 i.The error checking required ii.Data
compression method used iii.The way the
end of a message is signaled iv.The way the
device indicates that it has received the
message

Internet Protocol:

There are many protocols used by the Internet and the WWW:
o TCP/IP
o HTTP
o FTP

o Electronic mail protocols IMAP

o POP
TCP/IP

The Internet uses two main protocols (developed by Vincent Cerf and Robert Kahn)
Transmission control protocol (TCP):Controls disassembly of message into packets
at the origin reassembles at the destination

20
 Internet protocol (IP):Specifies the addressing details for each packet Each
packet is labelled with its origin and destination.

Hypertext Transfer Protocol (HTTP)

• The hypertext transfer protocol (HTTP) was developed by Tim

BernersLee in 1991
•HTTP was designed to transfer pages between machines
• The client (or Web browser) makes a request for a given page and the
Server is responsible for finding it and returning it to the client
•The browser connects and requests a page from the server
• The server reads the page from the file system, sends it to the client and

Electronic Mail Protocols:

• Electronic mail uses the client/server model

terminates the connection.
• The organisation has an email server devoted to handling email o Stores
and forwards email messages

•Individuals use email client software to read and send email

o (e.g. Microsoft Outlook, or Netscape Messenger)
• Simple Mail Transfer Protocol (SMTP) o Specifies format of mail
messages

21
 • Post Office Protocol (POP) tells the email server to:
o Send mail to the user’s computer and delete it from the server

o Send mail to the user’s computer and do not delete it from

the server o Ask whether new mail has arrived.

Interactive Mail Access Protocol (IMAP)

Newer than POP, provides similar functions with additional features.

o e.g. can send specific messages to the client rather than all
the messages. A user can view email message headers and
the sender’s name before

downloading the entire message.

Allows users to delete and search mailboxes held on the email server.

The disadvantage of POP: You can only access messages from one PC.

The disadvantage of IMAP :Since email is stored on the email server, there is a
need for more and more expensive (high speed) storage space.

World Wide Web: comprises software (Web server and browser) and data
(Web sites).

Internet Protocol (IP) Addresses:

- Every node has a unique numeric address
- Form: 32-bit binary number

22
 - New standard, IPv6, has 128 bits (1998)

- Organizations are assigned groups of IPs for their computers -

Domain names
- Form: host-name. domain-names
- First domain is the smallest (Google)
- Last domain specifies the type of organization (.com)
- Fully qualified domain name - the host name and all of the domain
names
- DNS servers - convert fully qualified domain names to IPs

HTTP:
Hypertext Transfer Protocol (HTTP) is the communication protocol
used by the Internet to transfer hypertext documents.

A protocol to transfer hypertext requests and information between

servers and browsers

Hypertext is text, displayed on a computer, with references (hyperlinks) to

other text that the reader can immediately follow, usually by a mouse HTTP is
behind every request for a web document or graph, every click of a hypertext link,
and every submission of a form.

HTTP specifies how clients request data, and how servers respond to
these requests.

The client makes a request for a given page and the server is
responsible for finding it and returning it to the client.

23
 The browser connects and requests a page from the server.

The server reads the page from the file system and sends it to the client
and then terminates the connection

HTTP Transactions

HTTP Message:

HTTP message is the information transaction between the client and server.

Two types of HTTP Message:

1. Requests
a. Client to server

24
 2. Responses

a. Server to client

Fields
· Request line or Response line
· General header
· Request header or Response
header
· Entity header
· Entity body

Request Message:
Request Line:

• A request line has three parts, separated by spaces o a method

name

o the local path of the requested resource o the

version of HTTP being used

25
 •A typical request line is:
o GET /path/to/file/index.html HTTP/1.1
• Notes:

o GET is the most common HTTP method; it says "give me this

resource". Other methods include POST and HEAD. Method names are
always uppercase

o The path is the part of the URL after the host name, also called the
request URI o The HTTP version always takes the form
"HTTP/x.x", uppercase.

Request Header:

26
Response Message:
Response Line:

• A request line has three parts, separated by

spaces o the HTTP version,

o a response status code that gives the result of the

request, and o an English reason phrase describing
the status code
• Typical status lines are:
o HTTP/1.0 200 OK or
o HTTP/1.0 404 Not Found
• Notes:
o The HTTP version is in the same format as in the request line,
"HTTP/x.x".

o The status code is meant to be computer-readable; the reason phrase

is meant to be human-readable, and may vary.

HTTP Request Header:

27
EXAMPLE

HTTP Method:

• HTTP method is supplied in the request line and specifies the operation
that
the client has requested.

Some common methods:

• Options
• Get
• Head
• Post
• Put
• Move
• Delete

Two methods that are mostly used are the GET and
POST: o GET for queries that can be safely
repeated

28
 o POST for operations that may have side effects
(e.g. ordering a book from an online store).

The GET Method

• It is used to retrieve information from a specified URI and

is assumed to be a safe, repeatable operation by browsers, caches and
other HTTP aware components

• Operations have no side effects and GET requests can be re-issued.

• For example, displaying the balance of a bank account has

no effect on the account and can be safely repeated.

• Most browsers will allow a user to refresh a page that

resulted from a GET, without displaying any kind of warning

• Proxies may automatically retry GET requests if they

encounter a temporary network connection problem.

• GET requests is that they can only supply data in the form
of parameters encoded in the URI (known as a Query String) –
[downside]

Cannot be unused for uploading files or other operations that require large amounts
of data to be sent to the server.

The POST Method

• Used for operations that have side effects and cannot be safely repeated.

29
 • For example, transferring money from one bank account
to another has side effects and should not be repeated without explicit
approval by the user.

If you try to refresh a page in Internet Explorer that resulted from a POST, it displays
the following message to warn you that there may be side effects:

The POST request message has a content body that is normally

used to send parameters and data

• The IIS server returns two status codes in its response for a POST request
o The first is 100 Continue to indicate that it has successfully
received the POST
request
o The second is 200 OK after the request has been processed.

HTTP response status codes

• Informational (1xx)
• Successful (2xx)
• Redirection (3xx) o 301:
moved permanently
• Client error (4xx)

30
 o 403 : forbidden o
404: Not
found
• Server error (5xx) o 503: Service
unavailable o 505: HTTP
version not supported
5. Describe client side scripting?

Client side scripting is a process in which the code along with HTML web
page is sent to the client by the server. Here, the code refers to the script.
In other simple words, client side scripting is a process in which scripts are
executed by browsers without connecting the server.
The code executes on the browser of client’s computer either during the
loading of web page or after the web page has been loaded.
Client side scripting is mainly used for dynamic user interface elements,
such as pull-down menus, navigation tools, animation buttons, data
validation purpose, etc.
Today, it is rapidly growing and evolving day by day. As a result, writing
client side web programming is now easier and faster, thereby, reducing
load on the server.
JavaScript and jQuery are by far the most important client-side scripting
languages or web scripting languages and widely used to create a
dynamic and responsive webpage and websites.
The browser (temporarily) downloads the code in the local computer and
starts processing it without the server. Therefore, the client side scripting is
browser dependent.

A client-side script is a small program (or set of instructions) that is

embedded (or inserted) into a web page. It is processed within the client
browser instead of the web server.

31
The client side script downloads at the client end from the server along
with the HTML web page it is embedded in. The web browser
interprets and executes the code and then displays the results on the
monitor.
The script that executes on the user’s computer system is called client. It
is embedded (or inserted) within the HTML document or can be stored in
an external separate file (known as external script).
The script files are sent to the client machine from the web server (or
severs) when they are requested. The client’s web browser executes the
script, then displays the web page, including any visible output from the

Client side scripts may also have some instructions for the web browser
to follow in response to certain user actions, such as pressing a page
button. They can often be looked if client want to view the source code
of web page.
script. Look
at the below figure to understand better.
Popular Client side Scripting Language
A language in which a client side script or program is written using syntax is
called client side scripting language or client side programming. The
most popular client side scripting languages is as follows:
1. JavaScript: It is the most widely client side scripting or programming
language. It is based on ECMAScript standard language.
JavaScript is an object based oriented, dynamically typed (or also called
weakly typed) scripting language. It runs directly on the browser with the
help of an inbuilt interpreter.

32
Here, weakly typed means the variables are easily converted implicitly
from one data type to another.
2. VBScript: This scripting language is developed by Microsoft, based
on the Visual Basic. It is basically used to enhance the features of web
pages in Internet Explorer. VBScript is interpreted by Internet Explorer web
browser.
3. jQuery: jQuery is a fast, small, lightweight JavaScript library. It is used
to facilitate a lot of JavaScript code into simple-to-use-functionality.
Most of the biggest companies such as Google, Microsoft, IBM, Netflix,
etc. on the Web are using jQuery language.

Client side Scripting Language Example

Let’s take a very simple example of JavaScript client side script. In this
example, a simple JavaScript client side script will run in the browser to
display the name of cities.
The HTML file located on the server will be the same one sent to the
browser, but JavaScript changes the HTML web page that is loaded in the
browser.
Program code:
<DOCTYPE html>

<html>

<head>

<title>List of cities</title>

<script> function displayCities()

33
 var cities = ["New York", "Dhanbad", "Paris", "London", "Mumbai"];

var ulElement = document.getElementById("cityList");

for(var city in cities)

var listItem = ulElement.appendChild(document.createElement("li"));

listItem.appendChild(document.createTextNode(cities[city]));

</script >

</head>

<body onload = "displayCities()">

<ul id = "cityList"></ul>

</body>

</html>
Look at the below diagram that shows the flow of data between server and
browser.
Application of Client side Scripting
Client side scripting is used to make web pages or website more
interactive. It is primarily used at the frontend, where the user can see
using the browser. Some important applications of client side scripting are
listed, as below:
• To retrieve data from web browser or user’s screen.
• Used in the field of online games.

34
 • To customize the web page without reloading the page.
• Client side scripting is used for validation purpose. If the user enters
incorrect credentials on the login page, the web page displays an
error message on the client machine without submitting it to the web
server.
• To create ad banners that interact with the user, rather than
simply displaying graphics.
• To create animated images that change when we move the
mouse over them.
• Client side script can be used to detect installed plug-ins and notify
the user if a plugin is required.

Advantage of Client side Scripting

There are several great advantages of client side scripting that are
as follows:
1. The client side scripting language is quite easy to learn and use.
It requires minimum programming knowledge or experienced
required.
2. The main advantage of client side scripting is that it is lightweight and
relatively easy to implement (syntax not too complex). The editing
and executing the code is fast.
3. Data processing is done on the client side from the server, which
makes it easier to scale applications with large numbers of users.
Thereby, load on the server reduces.
4. The client side data validation can be possible using the client
side scripting language like JavaScript.
5. The execution of client side script is more quickly because once the
script is downloaded from the server, it is executed by the browser
directly on the user’s computer.
6. Mathematical assessment is also possible using client side scripting.

35
7. The client side programming helps to perform the complex tasks in
relatively few steps.
8. Script code only executed by the browser without connecting the server.
9. It takes too less time to execute script code.
10. Browser respond immediately when user presses any key,
mouse movement, clicks, etc.

Disadvantage of Client side Scripting

There are certain disadvantages of client side scripting that are as follows:
1. The main disadvantage of client side scripting is that it is unsecure
because the code is sent as is to the client and, therefore, visible to it if
the client looks at the sources of his web page. In short, code is usually
visible.
2. Client side programming cannot be used if we need to
access databases or needs to transmit sensitive data over the
internet.
3. There is no guarantee that user has enabled JavaScript on his
computer’s browser. Therefore, any required functionality must be loaded
on the server despite the possibility that it could be offloaded.
4. The smooth running of the script (or program) depends entirely on
the client’s browser, its configuration, and security level.
5. The web application based on the heavy JavaScript can
be complicated to debug and maintain.
6. Client side scripting languages are usually more limited
in functionality than server side scripting languages.

Client side Web Attacks

In this section, we will understand web attacks on the client side. They are
as follows:

36
1. Malicious HTML tags embedded in web request can cause the server
to generate malformed pages. It can be dangerous if run on the server
side. Malformed pages sent back to the client may produce the further
problems if executes on the client side.
2. Malicious code can be sent to the server from the attackers in a
discussion group website. An example of malicious code can be like
this: Group — Here is my message!
Hello

<script>Malicious code</script>

If JavaScript is enabled on the victim client’s browser, the browser will run
this code unexpectedly.
3. An attacker can send a file to a client and encourage him to post it to
the server. The file may contain malicious code that can hack the website.
4. When a client visits a website, a small text file called a cookie is
often placed in the client’s computer. At the next visiting, the web server
scans that cookie. If it found on the computer, the attacker can use the
cookie data to trigger the download of malicious code.
5. Tags like <FORM> can trouble if they are inserted at the wrong
place. These HTML tags can change the appearance of the web page.
6. Browsers interpret the information according to the character set
chosen by the client. If the client does not specify the character set,
the web browser uses the default setting, that can display the garbled
appearing or unintended meanings.

General Client side Attack Prevention

There are the following general measures to prevent client side attacks.
They are as follows:

37
1. Client can use client side scripting to clean up form data before it is
transmitted.
2. Users can turn off JavaScript functions in the browser. It may
disable some web functionality.
3. They should set the security level high in the browser and lower it
only for those users you are sure will not violate that trust.
4. Scan all the files including cookie for viruses to prevent the injection of
malicious code.
5. Client should declare their character set when configuring browsers.

38
 UNIT-2 Web Designing

1. Explain the structure of the html webpage with an example?

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages

• HTML describes the structure of a Web page

• HTML consists of a series of elements, link", etc.

A Simple HTML Document

Example

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

39
Example explanation:

• The <!DOCTYPE html> declaration defines that this document is an HTML5 document

• The <html> element is the root element of an HTML page

• The <head> element contains meta information about the HTML page

• The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)

• The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

• The <h1> element defines a large heading

• The <p> element defines a paragraph

HTML Element

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display
them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

40
HTML Page Structure

41
2. Define form tag. Design a registration page by using all form controls?

The form is basically used for the registration process, logging into your profile on a website or to create
your profile on a website, etc … The information that is collected from the form is -1. Name 2.Email
Addresses etc. Now the form will take input from the form and post that data in backend applications
(like PHP). So the backend application will process the data which is received by them. There are various
form elements that we can use like text fields, text area, drop-down list, select, checkboxes, radio, etc.

Syntax:

<form> Form Content... </form>

Registration page

Use a <form> element to process the input.

Example:

<form>

<div class="container">

<h1>Register Here</h1>

<p>Please fill in the details to create an account with us.</p> <hr>

<label for="email"><b>Enter Email</b></label>

<input type="text" placeholder="Enter Email" name="email"> <label

for="pwd"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="pwd">

<label for="confirm"><b>Confirm Password</b></label>

<input type="password" placeholder="Confirm Password" name="confirm">

<hr>

<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

<button type="submit" class="registerbtn"><strong>Register</strong></button> </div>

<div class="container signin">

42
<p>Already have an account? <a href="#">Sign in</a>.</p>

</div>

</form>

Output:

3. Explain about Cascading Style Sheet with an example?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements
are positioned and laid out, what background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!

CSS can be added to HTML documents in 3 ways:

43
 • Inline - by using the style attribute inside HTML elements

• Internal - by using a <style> element in the <head> section

• External - by using a <link> element to link to an external CSS file

CSS Example

<style>

body {background-color:lightblue; text-align:center;} h1

{color:blue; font-size:40px;}
p {font-family:verdana; font-size:20px;}

</style>

CSS Syntax

A CSS rule consists of a selector and a declaration block:

The selector points to the HTML element to style (h1).

The declaration block (in curly braces) contains one or more declarations separated by
semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

In the following example all <p> elements will be center -aligned, red and have a font size of
32 pixels:

Example
<style>
p {font-size:32px; color:red; text-align:center;} </style>

Same example can also be written like this:

44
<style> p {
font-size: 32px;
color: red;
text-align: center;
}
</style>

CSS Background

CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affects the HTML elements:

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

1) CSS background-color

The background-color property is used to specify the background color of the element.

2) CSS background-image

45
The background-image property is used to set an image as a background of an element. By
default the image covers the entire element. You can set the background image for a page like
this.

3) CSS background-repeat

By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

4) CSS background-attachment

46
The background-attachment property is used to specify if the background image is fixed or scroll
with the rest of the page in browser window. If you set fixed the background image then the
image will not move during scrolling in the browser.

5) CSS background-position

The background-position property is used to define the initial position of the background image.
By default, the background image is placed on the top-left of the webpage.
You can set the following positions:

1. center

2. top

3. bottom

4. left

5. right

4. How to create CSS animation and briefly explain about user interface.?

CSS animation:

Animation is a way using which we can create the illusion of motion by placing still images one
after another in a typical format. For example, we can have a ball rising up at some instant than
falling down as an animation effect. CSS provides us some properties to control the animation
effect by changing some of its variables like timing and key frames etc.

• @keyframes

47
 • animation-name
• animation-duration
• animation-delay
• animation-iteration-count •
animation-direction
• animation-timing-function
• animation-fill-mode
• animation

The @keyframes

When you specify CSS styles inside the @keyframes rule, the animation will gradually change
from the current style to the new style at certain times.

@keyframes example { from

{background-color: red;} to
{background-color: yellow;}
}

div { width: 100px;

height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Animation-duration

The animation-duration property defines how long an animation should take to complete.
If the animation-duration property is not specified, no animation will occur, because the default
value is 0s

Delay an Animation

The animation-delay property specifies a delay for the start of an animation.

div { width: 100px;

height: 100px; position:
relative; background-
color: red; animation-

48
name: example;
animation-duration: 4s;
animation-delay: 2s; }

Animation-iteration-count:

The animation-iteration-count property specifies the number of times

an animation should run. div { width: 100px; height: 100px; position: relative;
background-color: red; animation-name: example; animation-duration: 4s; animation-
iteration-count: 3; }

Animation-direction:

The animation-direction property specifies whether an animation should be played

forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

• normal - The animation is played as normal (forwards). This is default

• reverse - The animation is played in reverse direction (backwards)

• alternate - The animation is played forwards first, then backwards

• alternate-reverse - The animation is played backwards first, then forwards

The Speed Curve of the Animation:

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

• ease - Specifies an animation with a slow start, then fast, then end slowly (this
is default)

• linear - Specifies an animation with the same speed from start to end

• ease-in - Specifies an animation with a slow start

• ease-out - Specifies an animation with a slow end

• ease-in-out - Specifies an animation with a slow start and end

• cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier

function #div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}

49
#div4 {animation-timing-function: ease-out;} #div5
{animation-timing-function: ease-in-out;} The fill-
mode For an Animation:

CSS animations do not affect an element before the first keyframe is played or after the last
keyframe is played. The animation-fill-mode property can override this behavior.

The animation-fill-mode property specifies a style for the target element when the animation is
not playing (before it starts, after it ends, or both).

The animation-fill-mode property can have the following values:

• none - Default value. Animation will not apply any styles to the element before or after
it is executing

• forwards - The element will retain the style values that is set by the last
keyframe (depends on animation-direction and animation-iteration-count)

• backwards - The element will get the style values that is set by the first keyframe
(depends on animation-direction), and retain this during the animation-delay
period

• both - The animation will follow the rules for both forwards and backwards,
extending the animation properties in both directions

Animation Shorthand Property:

div { animation: example 5s linear 2s infinite
alternate;
}

User interface:

User Interface (UI) defines the way humans interact with the information systems. In Layman’s
term, User Interface (UI) is a series of pages, screens, buttons, forms and other visual elements
that are used to interact with the device. Every app and every website has a user interface. The
user interface property is used to change any element into one of several standard user
interface elements.

• resize

• outline-offset

50
 Resize Property: The resize property is used to resize a box by user. This property does not
apply to inline elements or block elements where overflow is visible. In this property, overflow
must be set to “scroll”, “auto”, or “hidden”.

Syntax:

resize: horizontal,vertical,both;

• horizontal: This property is used to resize the width of the element.

Syntax:

resize: horizontal;

Supported Browsers: The browser supported by resize property are listed below:

Internet Explorer Not Supported

outline-offset: The outline-offset property in CSS is used to set the amount of space between an outline
and the edge or border of an element. The space between the element and its outline is transparent.
• Apple Safari 4.0

• Google Chrome 4.0

• Firefox 5.0 4.0 -moz-

• Opera 15.0

Syntax:

outline-offset: length;

Supported Browsers: The browser supported by outline-offset property are listed below:

• Apple Safari 3.1

51
• Google Chrome 4.0

• Firefox 3.5

• Opera 10.5

• Internet Explorer 15.0

52
 UNIT-3

Introduction to JavaScript

Part-b

1. Explain in details about variables and data types in java Script.?

JavaScript provides different data types to hold different types of values. There are two types of data
types in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type of the variable because it is
dynamically used by JavaScript engine. You need to use var here to specify the data type. It c an hold
any type of values such as numbers, strings etc. For example:

There are five types of primitive data types in JavaScript. They are as follows:
1. var a=40;//holding number

2. var b="Rahul";//holding string

53
 JavaScript primitive data types

JavaScript non-primitive data types

Data Type Description

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Boolean represents boolean value either false or true

Undefined represents undefined value

Null represents null i.e. no value at all

The non-primitive data types are as follows:

54
 Variable: local variable and

Data Type Description

Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

A JavaScript variable is simply a name of storage location. There are two types of variables in JavaScript :

There are some rules while declaring a JavaScript variable (also known as identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.

2. After first letter we can use digits (0 to 9), for example value1.

3. JavaScript variables are case sensitive, for example x and X are different variables.
global variable.

Correct JavaScript variables

1. var x = 10;

2. var _value="sonoo";

55
A JavaScript local variable is declared inside block or function. It is accessible within the function or block
Example of JavaScript variable

Let’s see a simple example of JavaScript variable.

<script> var

x = 10; var

y = 20; var

z=x+y;

document.w

rite(z);

</script>

Output of the above

example 30

JavaScript local variable

only. For example:

<script> function abc()

{ var x=10;//local

variable

</script>

JavaScript global variable

A JavaScript global variable is accessible from any function. A variable i.e. declared outside the
function or declared with window object is known as global variable. For example:

<script> var

data=200;//gloabal variable

56
 function a(){

document.writeln(data);

function b(){

document.writeln(data);

a();//calling JavaScript

function b();

</script>

2. Explain in detail about operators and operator precedence in java

Script.? JavaScript Operators

JavaScript operators are symbols that are used to perform operations on operands. For example:

Operator Description Example

+ Addition 10+20 = 30

57
 - Subtraction 20-10 = 10

var sum=10+20;

Here, + is the arithmetic operator and = is the assignment operator.

There are following types of operators in JavaScript.

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

1. Arithmetic Operators

2. Comparison (Relational) Operators

3. Bitwise Operators

4. Logical Operators

5. Assignment Operators

6. Special Operators

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations on the operands. The following operators
are known as JavaScript arithmetic operators.

follows:

58
JavaScript Bitwise Operators

The bitwise operators perform bitwise operations on operands. The bitwise operators are as follows:

Operator Description Example

&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

59
avaScript Logical Operators

JavaScript Assignment Operators

The following operators are known as JavaScript assignment operators.

Operator Description

(?:) Conditional Operator returns value based on the condition. It is like if-
else.

, Comma Operator allows multiple expressions to be evaluated as single statement.

Delete Delete Operator deletes a property from the object.

In In Operator checks if object has the given property

instanceof checks if the object is an instance of given type

60
 New creates an instance (object)

Operator Description Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

*= Multiply and assign var a=10; a*=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0

JavaScript Special Operators

The following operators are known as JavaScript special operators.

61
 Typeof checks the type of object.

Void it discards the expression's return value.

Yield checks what is returned in a generator by the generator's iterator.

Operator precedence:
Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).

Expressions in parentheses are computed before the rest of the expression

Function are executed before the result is used in the rest of the expression

Operator precedence describes the order in which operations are performed in an arithmetic expression.

62
Math Property Description

SQRT2 Returns
square root
of 2.
PI Returns Π
value.
E\ Returns
Euler's
Constant.
LN2 Returns
natural
logarithm of
2.

3. Brief about various date and math related object with

examples? Math Object

• Math object is a built-in static object.

• It is used for performing complex math operations.

Math Properties

63
 LN10 Returns natural logarithm of 10.

LOG2E Returns base 2 logarithm of E.

LOG10E Returns 10 logarithm of E.

Math Methods
Methods Description

abs() Returns the absolute value of a number.

acos() Returns the arccosine (in radians) of a number.

ceil() Returns the smallest integer greater than or equal to a number.

cos() Returns cosine of a number.

floor() Returns the largest integer less than or equal to a number.

log() Returns the natural logarithm (base E) of a number.

max() Returns the largest of zero or more numbers.

min() Returns the smallest of zero or more numbers.

pow() Returns base to the exponent power, that is base exponent.

Example: Simple Program on Math Object Methods

<html>
<head>
<title>JavaScript Math Object Methods</title>

64
 </head>
<body>
<script type="text/javascript">

var value = Math.abs(20);

document.write("ABS Test Value : " + value +"<br>");

var value = Math.acos(-1);

document.write("ACOS Test Value : " + value +"<br>");

var value = Math.asin(1);

document.write("ASIN Test Value : " + value +"<br>");

var value = Math.atan(.5);

document.write("ATAN Test Value : " + value +"<br>");
</script>
</body> </html>

Output

ABS Test Value : 20

ACOS Test Value : 3.141592653589793
ASIN Test Value : 1.5707963267948966
ATAN Test Value : 0.4636476090008061

2. Date Object

• Date is a data type.

• Date object manipulates date and time.

Date() constructor takes no arguments. • Date object allows you to get and
set the year, month, day, hour, minute, second and millisecond fields.

Syntax:
var variable_name = new Date();

Example:
var current_date = new Date();

Date Methods

65
66
Methods Description

Date() Returns current date and time.

getDate() Returns the day of the month.

getDay() Returns the day of the week.

getFullYear() Returns the year.

getHours() Returns the hour.

getMinutes() Returns the minutes.

getSeconds() Returns the seconds.

getMilliseconds() Returns the

getTime() milliseconds.

getTimezoneOffset() e number of milliseconds since January 1, 1970 at 12:00 AM.

getMonth() Returns the timezone offset in minutes for the current locale.

setDate() Returns the month.

setFullYear() Sets the day of the month.

setHours() Sets the full year.

setMinutes() Sets the hours.

setSeconds() Sets the minutes.

setMilliseconds() Sets the seconds.

Sets the milliseconds.

67
setTime() Sets the number of milliseconds since January 1, 1970 at 12:00 AM.

68
Example : JavaScript Date() Methods Program

document.write("<b>Locale String:</b> " + d.toLocaleString()+"<br>");

document.write("<b>Hours:</b> " + d.getHours()+"<br>");
document.write("<b>Day:</b> " + d.getDay()+"<br>");
document.write("<b>Month:</b> " + d.getMonth()+"<br>");
document.write("<b>FullYear:</b> " + d.getFullYear()+"<br>");
document.write("<b>Minutes:</b> " + d.getMinutes()+"<br>");
</script>

setMonth() Sets the month.

toDateString() Returns the date portion of the Date as a human-readable string.

toLocaleString() Returns the Date object as a string.

toGMTString() Returns the Date object as a string in GMT timezone.

valueOf() Returns the primitive value of a Date object.

<html>
<body>
<center>
<h2>Date Methods</h2>
<script type="text/javascript">
var d = new Date();

69
 </center>
</body>
</html> Output:

4. Write a JavaScript code for validating new user registration form which includes the fields like
username, password, confirm password, gender, date of birth, contact number and mail id.

<!DOCTYPE html>

<html>

<head>

<title>Reg Form</title>

<style type="text/css">

body{ font-family:

Calibri;

input[type="text"] {

width: 250px;

input[type="submit"], input[type="reset"] {

width: 77px; height:

27px; position: relative;left:

180px;

70
 form{ text-align:

center; font-family:

Calibri; font-size: 20px;

border: 3px solid black;

width: 600px; margin:

20px auto;

td {

padding: 10px;

td:first-child {

text-align: right; font-

weight: bold;

td:last-child {

text-align: left;

</style> <script>

function validate() {

var fname = document.reg_form.fname;

var lname = document.reg_form.lname;

var address = document.reg_form.address;

var gender = document.reg_form.gender;

var email = document.reg_form.email;

var mobile = document.reg_form.mobile; var course =

document.reg_form.course;

71
 if (fname.value.length <= 0)

{ alert("Name is required");

fname.focus(); return

false;

if (lname.value.length <= 0)

{ alert("Last Name is required");

lname.focus(); return false;

if (address.value.length <= 0)

{ alert("Address is required");

address.focus(); return

false;

if (gender.value.length <= 0) {

alert("Gender is required");

gender.focus(); return

false;

if (email.value.length <= 0)

{ alert("Email Id is required");

email.focus(); return false;

if (mobile.value.length <= 0)

{ alert("Mobile number is

required"); mobile.focus();

return false;

72
 }

if (course.value == "select course")

{ alert("Course is required"); course.focus();

return false;

return false;

</script>

</head>

<body>

<center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>

<hr>

<form method="" action="" name="reg_form" onsubmit="return validate()" >

<td><label>First Name: </label></td>

<input type="text" name="fname" placeholder="First Name">

<h2>Registration Form</h2>

<table>

<tr>

<td>

</td>

</tr>

73
<tr>

<td><label>Last Name: </label></td>

<td>

<td><label>Email Id: </label></td>

<input type="text" name="email" placeholder="[email protected]">

<td><label>Mobile: </label></td>
<input type="text" name="lname" placeholder="Last Name">

</td>

</tr>

<tr>

<td><label>Address: </label></td>

<td>

<input type="textarea" size="50" name="address" placeholder="Address">

</td>

</tr>

<tr>

<td><label>Gender: </label></td>

<td>

<input type="radio" name="gender" value="male">Male

<input type="radio" name="gender" value="femele">Female

</td>

</tr>

<tr>

74
 <td>

<input type="submit" name="submit" value="Submit">

<input type="reset" name="reset" value="Reset" >

</td>

</tr>

<tr>

<td>

<input type="number" name="mobile">

</td>

</tr>

<tr>

<td><label>Course: </label></td>

<td>

<select name="course">

<option value="select course">select course</option>

<option value="HTML">HTML</option>

<option value="CSS">CSS</option>

<option value="JavaScript">JAVASCRIPT</option>

<option value="Java">JAVA</option>

</select>

</td>

</tr>

<tr>

<td>

75
 </td>

</tr>

</table>

</form>

</body>

</html>

Output

76
 UNIT-IV

SERVER-SIDE PROCESSING AND SCRIPTING-PHP

PHP is an open source programming and server scripting language that is particularly well adapted to
Create Dynamic web pages and can be includes in HTML codes. It’s used to handle complex content,
databases, and session logging, as well as to create entire e-commerce websites. PHP is generally known
as Hypertext preprocessor but it was first known as Personal Home Page. It was Designed in 1994 by the
programmer named Rasmus Lerdorf. PHP would be relatively simple .PHP is compatible with a variety of
databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server, and can
communicate with other services through protocols including LDAP, POP3, HTTP, IMAP, and COM.
And, PHP operates on a variety of platforms, including Windows, Linux, Unix, and Mac OS X,etc.

Example of PHP Code!

<!DOCTYPE html>

<html>

<body> <?php echo "My

first PHP script!";

?>

</body>

</html>

PHP Works:

The PHP program interacts with the site server, which is the program that sends out web pages to the
rest of the world. When you type a URL into the address bar of your web browser, you’re telling the web
server at that URL to email you an HTML file. The requested file is sent by the web server in response.
The HTML file is read by your browser, and then shows the web page. When you press a source on a
web page, you’re also requesting a file from the web server. Additionally, when you press a web page
button that submits a form, the web server processes a file. When PHP is mounted, the procedure is
exactly the same.
You submit a file, and the web server, which happens to be running PHP, responds with HTML, because
of PHP it all happens.

77
Step 1 – Client send a page request to the web server.

Step 2 – Web server forwards that request to the PHP interpreter.

Step 3 – Now PHP interpreter will take the Date from Database and responce it back to the Web server.

78
Step 4 – At last Web server responce to the client who has asked for the page request.

2. Explain PHP variables and constants?

Variables are "containers" for storing information.

PHP Variables

In PHP, a variable starts with the $ sign, followed by the name of the variable

Example:

79
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>

After the execution of the statements above, the variable $txt will hold the value Hello world!, the
variable $x will hold the value 5, and the variable $y will hold the value 10.5.

PHP Variables

A variable can have a short name (like x and y) or a more descriptive name (age, carname,

total_volume). Rules for PHP variables:

A variable starts with the $ sign, followed by the name of the variable

A variable name must start with a letter or the underscore character

A variable name cannot start with a number

A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )

Variable names are case-sensitive ($age and $AGE are two different variables)

PHP variable names are case-sensitive!

The PHP echo statement is often used to output data to the screen.

The following example will show how to output text and a variable:
•

Output variables:

80
Example:

<?php
$txt = "Msajce"; echo
"I love $txt!"; ?>

PHP Variables :

In PHP, variables can be declared anywhere in the script.

The scope of a variable is the part of the script where the variable can be referenced/used.
name: Specifies the name of the constant
PHP
has value: Specifies the value of the constant
three
case-insensitive: Specifies whether the constant name should be case-insensitive. Default is false
different variable :

• local

• global

• static

PHP Constants

A constant is an identifier (name) for a simple value. The value cannot be changed during the script.

A valid constant name starts with a letter or underscore (no $ sign before the constant name).

Unlike variables, constants are automatically global across the entire script.

Constants are like variables except that once they are defined they cannot be changed or undefined.

Create a PHP Constant:

To create a constant, use the define() function.

Syntax define(name, value, case-insensitive)

Parameters:

Example:

81
<?php

// case-sensitive constant name

define("GREETING", "Welcome to msajce!"); echo

GREETING;

?> o/p:

Welcome to msajce!

3. Explain PHP operators with example?

PHP Operators:

Operators are used to perform operations on variables and values.

PHP divides the operators in the following groups:

• Arithmetic operators

• Assignment operators

• Comparison operators

• Increment/Decrement operators

82
 • Logical operators

• String operators

• Array operators

• Conditional assignment operators

PHP Arithmetic Operators

The PHP arithmetic operators are used with numeric values to perform common arithmetical
operations, such as addition, subtraction, multiplication etc.

PHP Assignment Operators:

The PHP assignment operators are used with numeric values to write a value to a variable.

The basic assignment operator in PHP is "=". It means that the left operand gets set to the value of the
assignment expression on the right.

83
PHP Comparison Operators

The PHP comparison operators are used to compare two values (number or string):

PHP Increment / Decrement Operators

The PHP increment operators are used to increment a variable's value.

The PHP decrement operators are used to decrement a variable's value.

84
PHP Logical Operators

The PHP logical operators are used to combine conditional statements.

PHP String Operators

PHP has two operators that are specially designed for strings.

PHP Array Operators

The PHP array operators are used to compare arrays.

85
PHP Conditional Assignment Operators
The PHP conditional assignment operators are used to set a value depending on conditions:

4. Explain Flow controls and Looping in PHP? With examples.

Conditional statements are used to perform different actions based on different conditions.

Conditional statements are flow controls.

PHP Conditional Statements

In PHP we have the following conditional statements:

• if statement - executes some code if one condition is true

• if...else statement - executes some code if a condition is true and another code if that condition
is false

• if...elseif...else statement - executes different codes for more than two conditions

• switch statement - selects one of many blocks of code to be executed

86
87
Example:

88
89
o/p:

o/p:

90
o/p:

91
o/p:

5. Explain arrays and strings in PHP?

An array is a special variable, which can hold more than one value at a time.

If you have a list of items (a list of car names, for example), storing the cars in single variables could look
like this:

An array can hold many values under a single name, and you can access the values by referring to an
index number.

Create an Array in PHP

In PHP, the array() function is used to create an array:

array();

In PHP, there are three types of arrays:

• Indexed arrays - Arrays with a numeric index

• Associative arrays - Arrays with named keys

• Multidimensional arrays - Arrays containing one or more arrays

92
PHP String Functions:

93
6. Explain the functions in PHP?

The real power of PHP comes from its functions.

PHP has more than 1000 built-in functions, and in addition you can create your own custom functions.

PHP Built-in Functions

PHP has over 1000 built-in functions that can be called directly, from within a script, to perform a
specific task.

PHP User Defined Functions

Besides the built-in PHP functions, it is possible to create your own functions.

• A function is a block of statements that can be used repeatedly in a program.

• A function will not execute automatically when a page loads.

• A function will be executed by a call to the function.

94
Create a User Defined Function in PHP

A user-defined function declaration starts with the word function:

Syntax

function functionName(){

code to be exeuted;

A function name must start with a letter or an underscore. Function names are NOT case -sensitive.
In the example below, we create a function named "writeMsg()". The openi ng curly brace ( { )
indicates the beginning of the function code, and the closing curly brace ( } ) indicates the end of the
function. The function outputs "Hello world!". To call the function, just write its name followed by
brackets ():

95
96
97
7. Explain File Handling and uploading in

PHP? PHP file handling:

File handling is an important part of any web application. You often need to open and process a file for
different tasks.

PHP Manipulating Files:

PHP has several functions for creating, reading, uploading, and editing files.

98
PHP Read File - fread()

The fread() function reads from an open file.

The first parameter of fread() contains the name of the file to read from and the second parameter
specifies the maximum number of bytes to read.

The following PHP code reads the "webdictionary.txt" file to the end:

fread($myfile,filesize("webdictionary.txt"));

PHP Close File - fclose()

The fclose() function is used to close an open file.

It's a good programming practice to close all files after you have finished with them. You don't want an
open file running around on your server taking up resources!

The fclose() requires the name of the file (or a variable that holds the filename) we want to close:

99
 PHP Read Single Line - fgets()

The fgets() function is used to read a single line from a file.

The example below outputs the first line of the "webdictionary.txt" file: Example

PHP Check End-Of-File - feof()

The feof() function checks if the "end-of-file" (EOF) has been reached.

The feof() function is useful for looping through data of unknown length.

The example below reads the "webdictionary.txt" file line by line, until end -of-file is reached:

PHP Read Single Character - fgetc()

The fgetc() function is used to read a single character from a file.

The example below reads the "webdictionary.txt" file character by character, until end-of-file is reached:

100
 PHP Create File - fopen()

The fopen() function is also used to create a file. Maybe a little confusing, but in PHP, a file is created
the same function used to open files.

If you use fopen() on a file that does not exist, it will create it, given that the file is opened for writing
(w) or appending (a).

The example below creates a new file called "testfile.txt". The file will b e created in the same directory
where the PHP code resides:

PHP Write to File - fwrite()

The fwrite() function is used to write to a file.

The first parameter of fwrite() contains the name of the file to write to and the second parameter is the
using string to be written.

101
 The example below writes a couple of names into a new file called "newfile.txt":

PHP Overwriting

Now that "newfile.txt" contains some data we can show what happens when we open an existing file for
writing. All the existing data will be ERASED and we start with an empty file.

PHP Append Text

You can append data to a file by using the "a" mode. The "a" mode appends text to the end of the file,
while the "w" mode overrides (and erases) the old content of the file.

102
 PHP File Upload:

With PHP, it is easy to upload files to the server.

However, with ease comes danger, so always be careful when allowing file uploads!

Configure The "php.ini" File

First, ensure that PHP is configured to allow file uploads.

In your "php.ini" file, search for the file_uploads directive.

8. Explain E-mail basics in PHP?

PHP Mail Introduction

The mail() function allows you to send emails directly from a script.

Requirements

For the mail functions to be available, PHP requires an installed and working email syst em. The program
to be used is defined by the configuration settings in the php.ini file.

Installation

The mail functions are part of the PHP core. There is no installation needed to use these functions.

Runtime Configuration

The behavior of the mail functions is affected by settings in php.ini:

103
PHP mail() Function

104
9. Explain Database with PHP in Detail?

PHP MySQL Database

With PHP, you can connect to and manipulate databases.

MySQL is the most popular database system used with PHP.

MySQL

• MySQL is a database system used on the web

• MySQL is a database system that runs on a server

• MySQL is ideal for both small and large applications

• MySQL is very fast, reliable, and easy to use

• MySQL uses standard SQL

• MySQL compiles on a number of platforms

• MySQL is free to download and use

• MySQL is developed, distributed, and supported by Oracle Corporation

• MySQL is named after co-founder Monty Widenius's daughter: My

The data in a MySQL database are stored in tables. A table is a collection of related data, and it consists of
columns and rows.

105
 Databases are useful for storing information categorically. A company may have a database with the
following tables:

• Employees

• Products

• Customers

• Orders

PHP + MySQL Database System

PHP combined with MySQL are cross-platform (you can develop in Windows and serve on a Unix

We can query a database for specific information and have a recordset returned.

Look at the following query (using standard SQL):

SELECT LastName FROM Employees

The query above selects all the data in the "LastName" column from the "Employees" table.

MySQL is the- de facto standard database system for web sites with HUGE volumes of both data ande- nd

Another great thing about MySQL is that it can be scaled down to support embedded database
• platform)

Database Queries

A query is a question or a request. users (like

Facebook, Twitter, and Wikipedia).

106
applications.

PHP 5 and later can work with a MySQL database using:

• MySQLi extension (the "i" stands for improved)

• PDO (PHP Data Objects) we demonstrate three ways of working with PHP and MySQL:

• MySQLi (object-oriented)

• MySQLi (procedural)

• PDO

107
108
 UNIT-V
Servlets and Database Connectivity

Java Servlets are programs that run on a Web

or Application server and act as a middle layer
between a requests coming from a Web browser or
other HTTP client and databases or applications on
the HTTP server.
Using Servlets, you can collect input from users
through web page forms, present records from a
database or another source, and create web pages
dynamically.
Java Servlets often serve the same purpose as
programs implemented using the Common Gateway
Interface (CGI). But Servlets offer several
advantages in comparison with the CGI.
• Performance is significantly better.
• Servlets execute within the address space of a
Web server. It is not necessary to create a
separate process to handle each client
request.
• Servlets are platform-independent because
they are written in Java.
109
 • Java security manager on the server
enforces a set of restrictions to protect the
resources on a server machine. So servlets
are trusted.
• The full functionality of the Java class
libraries is available to a servlet. It can
communicate with applets, databases, or
other software via the sockets and RMI
mechanisms that you have seen already.
Servlets Architecture The following
diagram shows the position of
Servlets in a Web
Application.

Servlets
Tasks Servlets perform the following
major tasks −
• Read the explicit data sent by the clients
(browsers). This includes an HTML form on a
110
 Web page or it could also come from an applet
or a custom HTTP client program.
• Read the implicit HTTP request data sent by
the clients (browsers). This includes cookies,
media types and

111
 compression schemes the browser
understands, and so forth.
• Process the data and generate the results.
This process may require talking to a
database, executing an RMI or CORBA call,
invoking a Web service, or computing the
response directly.
• Send the explicit data (i.e., the document) to
the clients (browsers). This document can be
sent in a variety of formats, including text
(HTML or XML), binary (GIF images), Excel,
etc.
• Send the implicit HTTP response to the clients
(browsers). This includes telling the browsers
or other clients what type of document is
being returned (e.g., HTML), setting cookies
and caching parameters, and other such tasks.
Servlets Packages
Java Servlets are Java classes run by a web server
that has an interpreter that supports the Java
Servlet specification.
Servlets can be created using the javax.servlet and
javax.servlet.http packages, which are a standard
part of the Java's enterprise edition, an expanded
version of the Java class library that supports
largescale development projects.
112
These classes implement the Java Servlet and JSP
specifications. At the time of writing this tutorial,
the versions are Java Servlet 2.5 and JSP 2.1.
Java servlets have been created and compiled just
like any other Java class. After you install the
servlet packages and add them to your computer's
Classpath, you can compile servlets with the JDK's
Java compiler or any other current compiler.
Architecture Diagram
The following figure depicts a typical servlet life-
cycle scenario.

•
Advantages Of Servlets :
• First the HTTP requests coming to the server
are delegated to the servlet container.
• The servlet container loads the servlet before
invoking the service() method.
• Then the servlet container handles multiple
requests by spawning multiple threads, each
thread executing the service() method of a
single instance of the servlet.

113
 1.As servlets support all protocols like FTP,
SMTP, HTTP etc. they can be used to develop
any kind of web applications like E-commerce,
Content management systems, chat based or
file based web applications etc.

2.As servlets are fully compatible with Java, you

can make use of wide range of available Java
APIs inside the servlets.

3.As they run on Java enabled servers, You need

not to worry about garbage collection and
memory leaks. JVM handles them for you.

4.Since servlets are written in Java, they are

portable and platform independent. You can
run them on any operating systems and on any
web servers available today.

5.Servlets inherit security features from JVM

and web server.

6.As servlets are written in Java, you can extend

them according to your requirements.

7.As servlets are compiled into bytecodes, they

are faster than any other server-side scripting
languages.

2. EXPLAIN SERVLET LIFECYCLE.?

114
A servlet life cycle can be defined as the entire process from its
creation till the destruction. The following are the paths followed by a
servlet.
• The servlet is initialized by calling the init() method.
• The servlet calls service() method to process a client's request.
• The servlet is terminated by calling the destroy() method.
• Finally, servlet is garbage collected by the garbage collector of
the JVM.
Now let us discuss the life cycle methods in detail.

The init() Method

The init method is called only once. It is called only when the servlet is
created, and not called for any user requests afterwards. So, it is used
for one-time initializations, just as with the init method of applets.
The servlet is normally created when a user first invokes a URL
corresponding to the servlet, but you can also specify that the servlet
be loaded when the server is first started.
When a user invokes a servlet, a single instance of each servlet gets
created, with each user request resulting in a new thread that is
handed off to doGet or doPost as appropriate. The init() method
simply creates or loads some data that will be used throughout the life
of the servlet. The init method definition looks like this −
public void init() throws ServletException {
// Initialization code... }

The service() Method

The service() method is the main method to perform the actual task.
The servlet container (i.e. web server) calls the service() method to
handle requests coming from the client( browsers) and to write the
formatted response back to the client.
Each time the server receives a request for a servlet, the server
spawns a new thread and calls service. The service() method checks
the HTTP

115
request type (GET, POST, PUT, DELETE, etc.) and calls doGet,
doPost, doPut, doDelete, etc. methods as appropriate.
Here is the signature of this method −
public void service(ServletRequest request, ServletResponse response)
throws ServletException, IOException { }

The service () method is called by the container and service method

invokes doGet, doPost, doPut, doDelete, etc. methods as appropriate.
So you have nothing to do with service() method but you override
either doGet() or doPost() depending on what type of request you
receive from the client.
The doGet() and doPost() are most frequently used methods with in
each service request. Here is the signature of these two methods.

The doGet() Method

A GET request results from a normal request for a URL or from an
HTML form that has no METHOD specified and it should be handled
by doGet() method.
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws
ServletException, IOException {
// Servlet code }

The doPost() Method

A POST request results from an HTML form that specifically lists
POST as the METHOD and it should be handled by doPost() method.
public void doPost(HttpServletRequest request,
HttpServletResponse response) throws
ServletException, IOException {
// Servlet code }

116
The destroy() Method
The destroy() method is called only once at the end of the life cycle of
a servlet. This method gives your servlet a chance to close database
connections, halt background threads, write cookie lists or hit counts
to disk, and perform other such cleanup activities.
After the destroy() method is called, the servlet object is marked for
garbage collection. The destroy method definition looks like this −
public void destroy() {
// Finalization code...
}

3. Explain Form GET and POST actions in servlets?

GET Method The GET method sends the encoded
user information appended to the page request.
The page and the encoded information are
separated by the ? (question mark) symbol as
follows − http://www.test.com/hello?key1 =
value1&key2 = value2
The GET method is the default method to pass
information from browser to web server and it
produces a long string that appears in your
browser's Location:box. Never use the GET
method if you have password or other sensitive
information to pass to the server. The GET method
has size limitation: only 1024 characters can be
117
used in a request string.

118
This information is passed using QUERY_STRING
header and will be accessible through
QUERY_STRING environment variable and Servlet
handles this type of requests using doGet() method.
POST Method
A generally more reliable method of passing
information to a backend program is the POST
method. This packages the information in exactly
the same way as GET method, but instead of
sending it as a text string after a ? (question mark)
in the URL it sends it as a separate message. This
message comes to the backend program in the
form of the standard input which you can parse and
use for your processing. Servlet handles this type of
requests using doPost() method.
Reading Form Data using Servlet Servlets handles
form data parsing automatically using the following
methods depending on the situation −
• getParameter() − You call
request.getParameter() method to get the
value of a form parameter.
• getParameterValues() − Call this method if the
parameter appears more than once and returns
multiple values, for example checkbox.
• getParameterNames() − Call this method if you
want a complete list of all parameters in the
119
current request.

120
GET Method Example using URL
Here is a simple URL which will pass two values to
HelloForm program using GET method.
http://localhost:8080/HelloForm?first_name =
ZARA&last_name = ALI
Given below is the HelloForm.java servlet program to
handle input given by web browser. We are going
to use getParameter() method which makes it very
easy to access passed information −
// Import required java libraries
import java.io.*; import
javax.servlet.*; import
javax.servlet.http.*;

// Extend HttpServlet class public class HelloForm

extends HttpServlet {

public void doGet(HttpServletRequest

request, HttpServletResponse
response) throws ServletException,
IOException {

121
 // Set response content
type
response.setContentType("text/html");

PrintWriter out = response.getWriter(); String

title = "Using GET Method to Read Form Data";
String docType =
"<!doctype html public \"-//w3c//dtd html 4.0 " +
"transitional//en\">\n";

out.println(docType + "<html>\n"
+ "<head><title>" + title + "</title></head>\n"
+ "<body bgcolor =
\"#f0f0f0\">\n" + "<h1 align =
\"center\">"
+ title + "</h1>\n" + "<ul>\n" +
" <li><b>First Name</b>: "
+
request.getParameter("first_name")
+ "\n" + " <li><b>Last Name</b>: "
+
request.getParameter("last_name") + "\n" + "</ul>\
n"
+ "</body>" + "</html>" );
}

122
}
Assuming your environment is set up properly,
compile HelloForm.java as follows −
$ javac HelloForm.java If everything goes fine,
above compilation would produce HelloForm.class
file. Next you would have to copy this class
file in

123
 <Tomcatinstallationdirectory>/webapps/
ROOT/WEB- INF/classes and create following
entries in web.xml file located in <Tomcat-
installation- directory>/webapps/ROOT/WEBINF/
<servlet>

</servlet>

<servlet-mapping>
<servlet-name>HelloForm</servlet- name> <url-
pattern>/HelloForm</url-pattern> </servlet-
mapping> Now
type http://localhost:8080/HelloForm?first_name=ZARA&last
_name=ALI in your browser's Location:box and make
sure you already started tomcat server, before firing
above command in the browser. This would
generate following result −
Using GET Method to Read Form Data
• First Name: ZARA
• Last Name: ALI
GET Method Example Using Form
Here is a simple example which passes two values
using HTML FORM and submit button. We are
going to use same Servlet HelloForm to handle
124
this input.

125
<html> <body> <form action = "HelloForm"
method = "GET"> First Name: <input type
= "text" name = "first_name"> <br /> Last
Name: <input type = "text" name =
"last_name" /><input type = "submit" value =
"Submit" /> </form> </body>
</html>
Keep this HTML in a file Hello.htm and put it in
<Tomcatinstallationdirectory>/webapps/ROOT
directory. When you would access
http://localhost:8080/Hello.htm, here is the actual
output of the above form.
First Name: Last Name:

Try to enter First Name and Last Name and then

click submit button to see the result on your local
machine where tomcat is running. Based on the
input provided, it will generate similar result as
mentioned in the above example.
POST Method Example Using Form
Let us do little modification in the above servlet, so
that it can handle GET as well as POST methods.
Below is HelloForm.java servlet program to handle
input given by web browser using GET or POST
methods. // Import required java libraries import
126
java.io.*; import javax.servlet.*; import
javax.servlet.http.*;

127
// Extend HttpServlet class public class HelloForm extends
HttpServlet {

// Method to handle GET method request.

public void doGet(HttpServletRequest
request, HttpServletResponse
response) throws ServletException,
IOException {

// Set response content type

response.setContentType("text/html");

PrintWriter out = response.getWriter();

String title = "Using GET Method to Read Form Data";

String docType = "<!doctype html public \"-

//w3c//dtd html 4.0 " + "transitional//en\">\

n"; out.println(docType + "<html>\

128
n" +

129
 "<head><title>" + title +
"</title></head>\n"+ "<body
bgcolor = \"#f0f0f0\">\n" + "<h1 align =
\"center\">" + title + "</h1>\n" + "<ul>\n" + "
<li><b>First Name</b>: "+
request.getParameter("first_name") + "\n" + "
<li><b>Last Name</b>: "+
request.getParameter("last_name") + "\n" + "</ul>\n"
+ "</body>" "</html>" );
}
// Method to handle POST method request.
public void doPost(HttpServletRequest
request, HttpServletResponse response) throws
ServletException, IOException {

doGet(request, response);
}
}
Now compile and deploy the above Servlet and test
it using Hello.htm with the POST method as follows
−

130
 <html><body>

<form action = "HelloForm" method = "POST" >

First Name: <input type = "text" name = "first_name">

Last Name: <input type = "text" name = "last_name" />

<input type = "submit" value = "Submit" />
<br />

</form> </body> </html>

Here is the actual output of the above form, Try to
enter First and Last Name and then click submit
button to see the result on your local machine
where tomcat is running.
First Name: Last Name:

4.Explain Cookies in
servlets? Cookies in
Servlet
A cookie is a small piece of information that is
persisted between the multiple client requests.

131
A cookie has a name, a single value, and optional
attributes such as a comment, path and domain
qualifiers, a maximum age, and a version number.
How Cookie works
By default, each request is considered as a new
request. In cookies technique, we add cookie with
response from the servlet. So cookie is stored in
the cache of the browser. After that if request is
sent by the user, cookie is added with request by
default. Thus, we recognize the user as the old
user.

Types of Cookie
There are 2 types of cookies in
servlets. PlayNext
Unmute Current TimeA 0:00
/
DurationA 18:10 Loaded:
0.37% A

132
 Fullscreen

Backward Skip 10sPlay VideoForward Skip 10s

1. Non-persistent cookie
2. Persistent cookie
Non-persistent cookie

It is valid for single session only. It is removed each

time when user closes the browser.
Persistent cookie
It is valid for multiple session . It is not removed each
time when user closes the browser. It is removed
only if user logout or signout.
Advantage of Cookies

1.Simplest technique of maintaining the state.

2.Cookies are maintained at

client side. Disadvantage of
Cookies

1.It will not work if cookie is disabled from the browser.

2.Only textual information can be set in Cookie object.

133
 Note: Gmail uses cookie technique for login. If you
disable the cookie, gmail won't work. Cookie class
javax.servlet.http.Cookie class provides the
functionality of using cookies. It provides a lot of
useful methods for cookies.
Constructor of Cookie class

Constructor Description

Cookie constructs a

Cookie(String name, constructs a

cookie with a String value) specified

Useful Methods of Cookie class

There are given some commonly used methods of the
Cookie class.
Method Description

public voi Sets the maximum

setMaxAge(i d age of the cookie in
nt expiry) seconds.

134
 public Returns the name of
the cookie. The name
String cannot be changed
getName() after creation.

public Returns the value of

the cookie.
String getValue()
public the name of the

void
setName(Stri
ng name)
public changes the value of
the cookie.
void
setValue(Stri
ng value)

Other methods required for using Cookies

For adding cookie or getting the value from the cookie, we

need some methods provided by other interfaces. They are:

1.public void addCookie(Cookie ck)

2.public Cookie[] getCookies()

To create Cookie
Let's see the simple code to create cookie.

135
 Cookie ck=new Cookie("user","sonoo
jaiswal");//creating cookie object
response.addCookie(ck);//adding cookie in the
response To delete Cookie
Let's see the simple code to delete cookie. It is
mainly used to logout or signout the user.
Cookie ck=new Cookie("user","");//deleting value
of cooki e ck.setMaxAge(0);//changing the
maximum age to 0 secon ds
response.addCookie(ck);//adding cookie in the
response How to get Cookies?
Let's see the simple code to get all the
cookies. Cookie
ck[]=request.getCookies(); for(int
i=0;i<ck.length;i++){
out.print("<br>"+ck[i].getName()+"
"+ck[i].getValue());// printing name and value of
cookie
}

136
Simple example of Servlet Cookies
In this example, we are storing the name of the
user in the cookie object and accessing it in
another servlet. As we know well that session
corresponds to the particular user. So if you access
it from too many browsers with different values,
you will get the different value.

index.html <form action="servlet1"

method="post"> Name:<input type="text"
name="userName"/><br/> <input type="submit"
value="go"/> </form>
FirstServlet.java
import java.io.*;
import
javax.servlet.*;
import
137
javax.servlet.http.*;

138
public class FirstServlet extends HttpServlet
{

public void doPost(HttpServletRequest request,

HttpSer

response.setContentType("text/html");
PrintWriter out = response.getWriter();
vletResponse response){
try{

String

n=request.getParameter("userName");
out.print("Welcome "+n);

Cookie ck=new Cookie("uname",n);//creating

cookie ob jectresponse.addCookie(ck);//adding
cookie in the respons e
139
 //creating submit button
out.print("<form
action='servlet2'>");
out.print("<input
type='submit' value='go'>");
out.print("</form>");

}catch(Exception e){System.out.println(e);}
out.close();

}
}
SecondServlet.java
import java.io.*;
import
javax.servlet.*;
import
javax.servlet.http.*;
140
public class SecondServlet
extends HttpServlet {

141
 public void doPost(HttpServletRequest request, HttpServ
letResponse response){
try{

<servlet-
respone.setConte Type("text/
<servlet-name>s1</servlet-
PrintWiter out = Wri er()
<url-pattern>/servlet1</url-
pattern>
Cookie ck[]=request.getCookies();
out.print("Hello "+ck[0].getValue());

out.close();

}catch(Exception e){System.out.println(e);}
}

}
web.xml <web-app>

<servlet><servlet-name>s1</servlet-name> <servlet-
class>FirstServlet</servlet-class> </servlet>

142
 </servlet-mapping>

<servlet><servlet-name>s2</servlet-name> <servlet-
class>SecondServlet</servlet-class> </servlet>

<servlet-mapping> <servlet-name>s2</servlet-name>
<url-pattern>/servlet2</url-pattern>

</servlet- mapping>

</web-
app>
Output

143
144
5.Explain Database Connectivity using
JDBC?
Database connectivity in servlet. There are
different approaches to communicating with
databases through servlet components. We need to
perform the servlet to
• To save the inputs coming from -user
the end - Email
forms to database software.
Example: registration.
• To save the result generated by servlet
Component in database software. Example:-
Bill generation
• To get inputs from the database software to
the Servlet component.
statement generation
Example:- Balance inquiry, account

145
 For servlet to database software
communication, we need to place
JDBC code/Hibernate

code/Spring JDBC/Spring
ORM/Spring Data code in Servlet
Component. Since JDBC is the most
basic one therefore here we will
discuss servlet to database
communication through JDBC
code.
Different Approaches for Database Connectivity in
Servlet There are 4 approaches for Database
Connectivity in Servlet. Approach-1:- Writing logics in
multiple methods.
• Create JDBC Connection in the init()
• Use the JDBC Connection in the service(-,-)/doXxx(-,-)
• Close JDBC Connection in the destroy method.
Here JDBC Connection (con) must be taken as an
instance variable of the Servlet Component class.
The disadvantage of this approach:- Since JDBC
Connection is an instance variable, it is not thread-
safe by default. So, we should use the
synchronization concept.

146
Advantage:- All the requests coming to Servlet
Component will use a single JDBC Connection to
interact with database software, due to this the
performance will be improved.

147
Note:- This approach is outdated and nowadays no
one is using this approach (except the
maintenance side).
Approach-2:- Write all the logics in service(-,-) or doXxx(,-)
method.
• Create JDBC Connection in service(-,-
)/doXxx(-,-) method.
• Use JDBC Connection in service(-,-)/doXxx(-,-) method.
• Close JDBC Connection in service(-,-)/doXxx(-,-) method.
Note:- Here JDBC Connection (con) will be a local
variable to service(-,-)/doXxx(-,-) method.
Disadvantage:- The JDBC Connection (con) is a local
variable so, every request which is given to the
servlet will create one JDBC Connection object
with database software, hence the performance
will be poor.
Advantage:- Since JDBC Connection is a local
variable, it is thread-safe by default. Hence there
is no need to work with the synchronization
concept.
Approach-3:- Use server-managed JDBC connection from
the connection pool.

148
 • Get JDBC Connection object from JDBC
Connection pool being from service(-,-)/doXxx(-,-)
• Use JDBC Connection object in
service(-,-)/doXxx(-,-) • Return JDBC connection
back to JDBC connection pool being from
service(-,-
)/doXxx(-,-)
Advantage:- Here JDBC connection is local to service(-
,)/doXxx(-,-) method. So, it becomes thread-safe.
We can get all the advantages of the JDBC
connection pool. The main advantages of the JDBC
connection pool are,
• Reusability of JDBC connection objects.
• With minimum JDBC connection objects, we
can make max clients/requests talking with
database software.
• Programmer is free from creating connection
objects, managing connection objects, and
destroying connection objects.
Web servers are also supplying existing created
JDBC connections. Therefore programmers should
not worry about how to create JDBC connections,
manage them and destroy them. These tasks will
be done by the web server itself. The programmer
will just fetch those JDBC connections and use
them in the servlet component. Moreover, one
149
JDBC connection can be used for multiple
requests, therefore performance will be good
compared to approach2.
Approach4:- Use DAO class for the persistence operation.

150
What is DAO:- The Java class/component that
separates persistence logic from other logics of
the application and makes that logic as flexible
logic to modify and reusable logic is called DAO
(Data access object).
In this approach, we can use either approach-2 or
approach3 to get the JDBC connection. The main
task in this approach,
• Write JDBC code (persistence logic) in DAO class
either by using direct connection object or
server-managed pooled connection object.
• Create a DAO class object in Servlet Component
and use its persistence logic in Servlet
Component

151
 Click on Subject/Paper under Semester to
enter. Environmental Sciences
Professional English
Professional and Sustainability -
English - I - - II - HS3252 Discrete GE3451
HS3152 Mathematics -
Statistics and MA3354 Theory of
Numerical Computation
Matrices and
Methods - MA3251 Digital Principles
Calculus - CS3452
and Computer
- MA3151 Engineering Organization
Semester

Artificial
Semester
Semester

- CS3351

Semester
Graphics Intelligence and
Engineering Machine Learning
Physics - PH3151 - GE3251
Foundation of Data - CS3491
Science - CS3352
Physics for
2nd

Database Management
1st

Engineering Information
3rd

4th
Science Data Structures and System - CS3492
Chemistry
- PH3256 Algorithms - CD3291
- CY3151
Web Essentials -
Basic Electrical and
Electronics Object Oriented IT3401
Problem Solving Engineering - BE3251 Programming -
and Python CS3391 Introduction to
Programming - Programming in C Operating
GE3151 Systems - CS3451
-
CS3251

Computer Networks
-
CS3591 Object Oriented
Software Human Values and
Full Stack Web Engineering - Ethics - GE3791
CCS356
Development -
Project Work /
Semester

Semester

IT3501 Open Elective 2

Semester

Semester

Open Intership
Distributed Open Elective 3
Elective-1
Computing
Open Elective 4
7th

8th

- CS3551 Elective-3
5th

6th

Elective-4 Management
Embedded Systems
and IoT - CS3691
Elective-5 Elective
Elective 1
Elective-6
Elective 2
 All Computer Engg [ B.E., M.E., ] (Click on Subjects to
Subjects - enter)
Programming in C Computer Operating Systems
Networks
Programming and Data Programming and Problem Solving and
Structures I Data Python
Structure II Programming
Database Management Computer Analog and Digital
Systems Architecture Communication
Design and Analysis of Microprocessors and Object Oriented
Algorithms Microcontrollers Analysis
and Design
Software Engineering Discrete Internet Programming
Mathematics
Theory of Computation Computer Graphics Distributed Systems
Mobile Computing Compiler Design Digital Signal
Processing
Artificial Intelligence Software Testing Grid and Cloud
Computing
Data Ware Housing and Cryptography and Resource
Data Mining Network Security Management
Techniques
Service Oriented Embedded and Real Multi - Core
Architecture Time Systems Architectures and
Programming
Probability and Queueing Physics for Transforms and
Theory Information Partial
Science Differential
Equations
Technical English Engineering Engineering Chemistry
Physics
 Engineering Graphics Total Quality Professional Ethics in
Management Engineering
Basic Electrical and Problem Solving Environmental Science
Electronics and and Python and Engineering
Measurement Engineering Programming