Web Essentials - IT3401 - Notes Full Unit
Web Essentials - IT3401 - Notes Full Unit
Environmental Sciences
Professional English and Sustainability -
Professional English - - II - HS3252 Discrete Mathematics - GE3451
I - HS3152 MA3354
Statistics and Theory of Computation
Matrices and Calculus Numerical Methods - Digital Principles and - CS3452
3rd Semester
4th Semester
- MA3151 MA3251 Computer Organization
1st Semester
2nd Semester
Computer Networks -
CS3591
Object Oriented
Full Stack Web Software Engineering - Human Values and
5th Semester
8th Semester
6th Semester
Elective 1 Elective-5
Management Elective
Elective-6
Elective 2
All Computer Engg Subjects - [ B.E., M.E., ] (Click on Subjects to enter)
Programming in C Computer Networks Operating Systems
Programming and Data Programming and Data Problem Solving and Python
Structures I Structure II Programming
Database Management Systems Computer Architecture Analog and Digital
Communication
Design and Analysis of Microprocessors and Object Oriented Analysis
Algorithms Microcontrollers and Design
Software Engineering Discrete Mathematics Internet Programming
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 Data Cryptography and Resource Management
Mining Network Security Techniques
Service Oriented Architecture Embedded and Real Time Multi - Core Architectures
Systems and Programming
Probability and Queueing Theory Physics for Information Transforms and Partial
Science Differential Equations
Technical English Engineering Physics Engineering Chemistry
Engineering Graphics Total Quality Professional Ethics in
Management Engineering
Basic Electrical and Electronics Problem Solving and Environmental Science and
and Measurement Engineering Python Programming Engineering
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 1
lOMoARcPSD|46830608
www.BrainKart.com
• 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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 2
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 3
lOMoARcPSD|46830608
www.BrainKart.com
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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 4
lOMoARcPSD|46830608
www.BrainKart.com
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."
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 5
lOMoARcPSD|46830608
www.BrainKart.com
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.
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 6
lOMoARcPSD|46830608
www.BrainKart.com
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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 7
lOMoARcPSD|46830608
www.BrainKart.com
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.
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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 8
lOMoARcPSD|46830608
www.BrainKart.com
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.
o Circuit Switching
o Packet Switching o Message Switching
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 9
lOMoARcPSD|46830608
www.BrainKart.com
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 10
lOMoARcPSD|46830608
www.BrainKart.com
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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 11
lOMoARcPSD|46830608
www.BrainKart.com
1. Bus Topology
2. Ring Topology
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 12
lOMoARcPSD|46830608
www.BrainKart.com
3. Star Topology
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 13
lOMoARcPSD|46830608
www.BrainKart.com
4. Mesh Topology
, 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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 14
lOMoARcPSD|46830608
www.BrainKart.com
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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 15
lOMoARcPSD|46830608
www.BrainKart.com
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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 16
lOMoARcPSD|46830608
www.BrainKart.com
Web Essentials:
Server:
The software that distributes the information and the machine where the
information and software reside is called the server.
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.
Web server:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 17
lOMoARcPSD|46830608
www.BrainKart.com
Software that delivers Web pages and other documents to browsers using the
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 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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 18
lOMoARcPSD|46830608
www.BrainKart.com
Web Browsers
Web
domain)
Protocol:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 19
lOMoARcPSD|46830608
www.BrainKart.com
Internet Protocol:
There are many protocols used by the Internet and the WWW:
o TCP/IP
o HTTP
o FTP
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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 20
lOMoARcPSD|46830608
www.BrainKart.com
Internet protocol (IP):Specifies the addressing details for each packet Each
packet is labelled with its origin and destination.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 21
lOMoARcPSD|46830608
www.BrainKart.com
o Send mail to the user’s computer and do not delete it from the
server o Ask whether new mail has arrived.
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
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).
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 22
lOMoARcPSD|46830608
www.BrainKart.com
HTTP:
Hypertext Transfer Protocol (HTTP) is the communication protocol
used by the Internet to transfer hypertext documents.
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 23
lOMoARcPSD|46830608
www.BrainKart.com
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.
1.Requests
a.Client to server
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 24
lOMoARcPSD|46830608
www.BrainKart.com
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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 25
lOMoARcPSD|46830608
www.BrainKart.com
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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 26
lOMoARcPSD|46830608
www.BrainKart.com
Response Message:
Response Line:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 27
lOMoARcPSD|46830608
www.BrainKart.com
EXAMPLE
HTTP Method:
• HTTP method is supplied in the request line and specifies the operation
that
the client has requested.
Two methods that are mostly used are the GET and
POST: o GET for queries that can be safely
repeated
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 28
lOMoARcPSD|46830608
www.BrainKart.com
• 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.
•Used for operations that have side effects and cannot be safely repeated.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 29
lOMoARcPSD|46830608
www.BrainKart.com
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 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.
•Informational (1xx)
•Successful (2xx)
•Redirection (3xx) o 301: moved
permanently
• Client error (4xx)
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 30
lOMoARcPSD|46830608
www.BrainKart.com
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 31
lOMoARcPSD|46830608
www.BrainKart.com
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 script. Look
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.
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 32
lOMoARcPSD|46830608
www.BrainKart.com
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.
<html>
<head>
<title>List of cities</title>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 33
lOMoARcPSD|46830608
www.BrainKart.com
listItem.appendChild(document.createTextNode(cities[city]));
</script>
</head>
<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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 34
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 35
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 36
lOMoARcPSD|46830608
www.BrainKart.com
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:
Hello Group — Here is my message!
<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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 37
lOMoARcPSD|46830608
www.BrainKart.com
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 38
lOMoARcPSD|46830608
www.BrainKart.com
• link", etc.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 39
lOMoARcPSD|46830608
www.BrainKart.com
• The <!DOCTYPE html> declara on defines that this document is an HTML5 document
• The <head> element contains meta informa on about the HTML page
• The < tle> element specifies a tle for the HTML page (which is shown in the browser's tle 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.
HTML Element
The HTML element is everything from the start tag to the end tag:
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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 40
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 41
lOMoARcPSD|46830608
www.BrainKart.com
2. Define form tag. Design a registra on page by using all form controls?
The form is basically used for the registra on process, logging into your profile on a website or to create
your profile on a website, etc … The informa on 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 applica ons (like
PHP). So the backend applica on 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:
Registra on page
Example:
<form>
<div class="container">
<h1>Register Here</h1>
<hr>
<p>By crea ng an account you agree to our <a href="#">Terms & Privacy</a>.</p>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 42
lOMoARcPSD|46830608
www.BrainKart.com
</div>
</form>
Output:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 43
lOMoARcPSD|46830608
www.BrainKart.com
CSS Example
<style>
</style>
CSS Syntax
The declara on block (in curly braces) contains one or more declara ons separated by
semicolons.
Each declara on 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>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 44
lOMoARcPSD|46830608
www.BrainKart.com
<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 proper es that affects the HTML elements:
1. background-color
2. background-image
3. background-repeat
4. background-a achment
5. background-posi on
1) CSS background-color
The background-color property is used to specify the background color of the element.
2) CSS background-image
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 45
lOMoARcPSD|46830608
www.BrainKart.com
3) CSS background-repeat
By default, the background -image property repeats the background image horizontally and
ver cally. Some images are repeated only horizontally or ver cally.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 46
lOMoARcPSD|46830608
www.BrainKart.com
The background-a achment 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-posi on
The background-posi on property is used to define the ini al posi on of the background image.
By default, the background image is placed on the top-le of the webpage.
You can set the following posi ons:
1. center
2. top
3. bo om
4. le
5. right
4. How to create CSS anima on and briefly explain about user interface.?
Anima on is a way using which we can create the illusion of mo on by placing s ll images one
a er another in a typical format. For example, we can have a ball rising up at some instant than
falling down as an anima on effect. CSS provides us some proper es to control the anima on
effect by changing some of its variables like ming and key frames etc.
• @keyframes
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 47
lOMoARcPSD|46830608
www.BrainKart.com
• 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 anima on will gradually change
from the current style to the new style at certain mes.
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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 48
lOMoARcPSD|46830608
www.BrainKart.com
name: example;
animation-duration: 4s;
animation-delay: 2s; }
Animation-iteration-count:
Animation-direction:
• 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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 49
lOMoARcPSD|46830608
www.BrainKart.com
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).
• 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
User interface:
User Interface (UI) defines the way humans interact with the informa on systems. In Layman’s
term, User Interface (UI) is a series of pages, screens, bu ons, 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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 50
lOMoARcPSD|46830608
www.BrainKart.com
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:
Syntax:
resize: horizontal;
Supported Browsers: The browser supported by resize property are listed below:
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
• Opera 15.0
Syntax:
outline-offset: length;
Supported Browsers: The browser supported by outline-offset property are listed below:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 51
lOMoARcPSD|46830608
www.BrainKart.com
• Firefox 3.5
• Opera 10.5
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 52
lOMoARcPSD|46830608
www.BrainKart.com
UNIT-3
Introduc on to JavaScript
Part-b
JavaScript provides different data types to hold different types of values. There are two types of data
types in JavaScript.
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 primi ve data types in JavaScript. They are as follows:
1. var a=40;//holding number
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 53
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 54
lOMoARcPSD|46830608
www.BrainKart.com
A JavaScript variable is simply a name of storage loca on. There are two types of variables in JavaScript :
There are some rules while declaring a JavaScript variable (also known as iden fiers).
3. JavaScript variables are case sensi ve, for example x and X are different variables.
global variable.
1. var x = 10;
2. var _value="sonoo";
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 55
lOMoARcPSD|46830608
www.BrainKart.com
A JavaScript local variable is declared inside block or func on. It is accessible within the func on or block
Example of JavaScript variable
<script> var
x = 10; var
y = 20; var
z=x+y;
document.w
rite(z);
</script>
30
x=10;//local variable
</script>
A JavaScript global variable is accessible from any func on. A variable i.e. declared outside the func on
or declared with window object is known as global variable. For example:
<script> var
data=200;//gloabal variable
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 56
lOMoARcPSD|46830608
www.BrainKart.com
func on a(){
document.writeln(data);
func on b(){
document.writeln(data);
b();
</script>
JavaScript Operators
JavaScript operators are symbols that are used to perform opera ons on operands. For example:
+ Addi on 10+20 = 30
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 57
lOMoARcPSD|46830608
www.BrainKart.com
- Subtrac on 20-10 = 10
var sum=10+20;
/ Division 20/10 = 2
1. Arithme c Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
Arithme c operators are used to perform arithme c opera ons on the operands. The following operators
are known as JavaScript arithme c operators.
follows:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 58
lOMoARcPSD|46830608
www.BrainKart.com
The bitwise operators perform bitwise opera ons on operands. The bitwise operators are as follows:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 59
lOMoARcPSD|46830608
www.BrainKart.com
Operator Descrip on
(?:) Condi onal Operator returns value based on the condi on. It is like if-else.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 60
lOMoARcPSD|46830608
www.BrainKart.com
= Assign 10+10 = 20
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 61
lOMoARcPSD|46830608
www.BrainKart.com
Operator precedence:
Mul plica on (*) and division (/) have higher precedence than addi on (+) and subtrac on (-).
Operator precedence describes the order in which opera ons are performed in an arithme c expression.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 62
lOMoARcPSD|46830608
www.BrainKart.com
Math Property Descrip on
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 Proper es
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 63
lOMoARcPSD|46830608
www.BrainKart.com
Math Methods
Methods Descrip on
<html>
<head>
< tle>JavaScript Math Object Methods</ tle>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 64
lOMoARcPSD|46830608
www.BrainKart.com
</head>
<body>
<script type="text/javascript">
Output
2. Date Object
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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 65
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 66
lOMoARcPSD|46830608
www.BrainKart.com
Methods Descrip on
getTime() Returns the number of milliseconds since January 1, 1970 at 12:00 AM.
getTimezoneOffset() Returns the mezone offset in minutes for the current locale.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 67
lOMoARcPSD|46830608
www.BrainKart.com
setTime() Sets the number of milliseconds since January 1, 1970 at 12:00 AM.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 68
lOMoARcPSD|46830608
www.BrainKart.com
<html>
<body>
<center>
<h2>Date Methods</h2>
<script type="text/javascript">
var d = new Date();
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 69
lOMoARcPSD|46830608
www.BrainKart.com
</center>
</body>
</html> Output:
4. Write a JavaScript code for valida ng new user registra on form which includes the fields like
username, password, confirm password, gender, date of birth, contact number and mail id.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{ font-family:
Calibri;
input[type="text"] {
width: 250px;
input[type="submit"], input[type="reset"] {
180px;
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 70
lOMoARcPSD|46830608
www.BrainKart.com
form{ text-align:
center; font-family:
20px auto;
td {
padding: 10px;
td:first-child {
weight: bold;
td:last-child {
text-align: le ;
</style> <script>
func on validate() {
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 71
lOMoARcPSD|46830608
www.BrainKart.com
if (fname.value.length <= 0) {
alert("Name is required");
fname.focus(); return
false;
if (lname.value.length <= 0) {
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");
if (mobile.value.length <= 0) {
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 72
lOMoARcPSD|46830608
www.BrainKart.com
return false;
return false;
</script>
</head>
<body>
<hr>
<table>
<tr>
<td>
</td>
</tr>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 73
lOMoARcPSD|46830608
www.BrainKart.com
<tr>
<td>
<td><label>Mobile: </label></td>
<input type="text" name="lname" placeholder="Last Name">
</td>
</tr>
<tr>
<td><label>Address: </label></td>
<td>
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
</td>
</tr>
<tr>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 74
lOMoARcPSD|46830608
www.BrainKart.com
<td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td><label>Course: </label></td>
<td>
<select name="course">
</select>
</td>
</tr>
<tr>
<td>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 75
lOMoARcPSD|46830608
www.BrainKart.com
</td>
</tr>
</table>
</form>
</body>
</html>
Output
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 76
lOMoARcPSD|46830608
www.BrainKart.com
UNIT-IV
PHP is an open source programming and server scrip ng language that is par cularly 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 en re 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 rela vely simple .PHP is compa ble with a variety of
databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microso SQL Server, and can
communicate with other services through protocols including LDAP, POP3, HTTP, IMAP, and COM.
And, PHP operates on a variety of pla orms, including Windows, Linux, Unix, and Mac OS X,etc.
<!DOCTYPE html>
<html>
?>
</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 reques ng a file from the web server. Addi onally, when you press a web page bu on 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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 77
lOMoARcPSD|46830608
www.BrainKart.com
Step 3 – Now PHP interpreter will take the Date from Database and responce it back to the Web server.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 78
lOMoARcPSD|46830608
www.BrainKart.com
Step 4 – At last Web server responce to the client who has asked for the page request.
PHP Variables
In PHP, a variable starts with the $ sign, followed by the name of the variable
Example:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 79
lOMoARcPSD|46830608
www.BrainKart.com
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>
A er the execu on 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 descrip ve name (age, carname, total_volume).
A variable starts with the $ sign, followed by the name of the variable
A variable name can only contain alpha -numeric characters and underscores (A -z, 0-9, and _ )
Variable names are case -sensi ve ($age and $AGE are two different variables)
The following example will show how to output text and a variable:
•
Output variables:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 80
lOMoARcPSD|46830608
www.BrainKart.com
Example:
<?php
$txt = "Msajce"; echo
"I love $txt!"; ?>
PHP Variables :
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-insensi ve: Specifies whether the constant name should be case -insensi ve. Default is false
different variable :
• local
• global
• sta c
PHP Constants
A constant is an iden fier (name) for a simple value. The value cannot be changed during the script.
A valid constant name starts with a le er or underscore (no $ sign before the constant name).
Unlike variables, constants are automa cally global across the en re script.
Constants are like variables except that once they are defined they cannot be changed or undefined.
Parameters:
Example:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 81
lOMoARcPSD|46830608
www.BrainKart.com
<?php
GREETING;
?> o/p:
Welcome to msajce!
• Arithme c operators
• Assignment operators
• Comparison operators
• Increment/Decrement operators
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 82
lOMoARcPSD|46830608
www.BrainKart.com
• Logical operators
• String operators
• Array operators
The PHP arithme c operators are used with numeric values to perform common arithmet ical opera ons,
such as addi on, subtrac on, mul plica on etc.
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 le operand gets set to the value of the
assignment expression on the right.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 83
lOMoARcPSD|46830608
www.BrainKart.com
The PHP comparison operators are used to compare two values (number or string):
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 84
lOMoARcPSD|46830608
www.BrainKart.com
The PHP logical operators are used to combine condi onal statements.
PHP has two operators that are s pecially designed for strings.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 85
lOMoARcPSD|46830608
www.BrainKart.com
Condi onal statements are used to perform different ac ons based on different condi ons.
• if...else statement - executes some code if a condi on is true and another code if that condi on is
false
• if...elseif...else statement - executes different codes for more than two condi ons
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 86
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 87
lOMoARcPSD|46830608
www.BrainKart.com
Example:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 88
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 89
lOMoARcPSD|46830608
www.BrainKart.com
o/p:
o/p:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 90
lOMoARcPSD|46830608
www.BrainKart.com
o/p:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 91
lOMoARcPSD|46830608
www.BrainKart.com
o/p:
An array is a special variable, which can hold more than one value at a me.
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.
array();
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 92
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 93
lOMoARcPSD|46830608
www.BrainKart.com
PHP has more than 1000 built-in func ons, and in addi on you can create your own custom func ons.
PHP has over 1000 built-in func ons that can be called directly, from within a script, to perform a specific
task.
Besides the built-in PHP func ons, it is possible to create your own func ons.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 94
lOMoARcPSD|46830608
www.BrainKart.com
Syntax
code to be exeuted;
A func on name must start with a le er or an underscore. Func on names are NOT case -sensi ve.
In the example below, we create a func on named "writeMsg()". The openi ng curly brace ( { ) indicates
the beginning of the func on code, and the closing curly brace ( } ) indicates the end of the func on. The
func on outputs "Hello world!". To call the func on, just write its name followed by brackets ():
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 95
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 96
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 97
lOMoARcPSD|46830608
www.BrainKart.com
File handling is an important part of any web applica on. You o en need to open and process a file for
different tasks.
PHP has several func ons for crea ng, reading, uploading, and edi ng files.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 98
lOMoARcPSD|46830608
www.BrainKart.com
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 "webdic onary.txt" file to the end:
fread($myfile,filesize("webdic onary.txt"));
It's a good programming prac ce to close all files a er 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:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 99
lOMoARcPSD|46830608
www.BrainKart.com
The example below outputs the first line of the "webdic onary.txt" file: Example
The feof() func on checks if the "end -of-file" (EOF) has been reached.
The feof() func on is useful for looping through data of unknown length.
The example below reads the "webdic onary.txt" file line by line, un l end -of-file is reached:
The example below reads the "webdic onary.txt" file character by character, un l end-of-file is reached:
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 100
lOMoARcPSD|46830608
www.BrainKart.com
The fopen() func on is also used to create a file. Maybe a li le confusing, but in PHP, a file is created
the same func on 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 wri ng (w)
or appending (a).
The example below creates a new file called "tes ile.txt". The file will b e created in the same directory
where the PHP code resides:
The first parameter of fwrite() contains the name of the file to write to and the second parameter is the
using string to be wri en.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 101
lOMoARcPSD|46830608
www.BrainKart.com
The example below writes a couple of names into a new file called "newfile.txt":
PHP Overwri ng
Now that "newfile.txt" contains some data we can show what happens when we open an exis ng file for
wri ng. All the exis ng data will be ERASED and we start with an empty file.
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 102
lOMoARcPSD|46830608
www.BrainKart.com
However, with ease comes danger, so always be careful when allowing file uploads!
The mail() func on allows you to send emails directly from a script.
Requirements
For the mail func ons to be available, PHP requires an installed and working email syst em. The program
to be used is defined by the configura on se ngs in the php.ini file.
Installa on
The mail func ons are part of the PHP core. There is no installa on needed to use these func ons.
Run me Configura on
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 103
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 104
lOMoARcPSD|46830608
www.BrainKart.com
MySQL
The data in a MySQL database are stored in tables. A table is a collec on of related data, and it consists of
columns and rows.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 105
lOMoARcPSD|46830608
www.BrainKart.com
Databases are useful for storing informa on categorically. A company may have a database with the
following tables:
• Employees
• Products
• Customers
• Orders
PHP combined with MySQL are cross -pla orm (you can develop in Windows and serve on a Unix
We can query a database for specific informa on and have a recordset returned.
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 and end
-
Another great thing about MySQL is that it can be scaled down to support embedded database
• pla orm)
Database Queries
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 106
lOMoARcPSD|46830608
www.BrainKart.com
applica ons.
• PDO (PHP Data Objects) we demonstrate three ways of working with PHP and MySQL:
• MySQLi (object-oriented)
• MySQLi (procedural)
• PDO
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 107
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 108
lOMoARcPSD|46830608
www.BrainKart.com
UNIT-V
Servlets and Database Connectivity
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 109
lOMoARcPSD|46830608
www.BrainKart.com
Servlets Tasks
Servlets perform the following major tasks −
• Read the explicit data sent by the clients (browsers). This
includes an HTML form on a 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
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 110
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 111
lOMoARcPSD|46830608
www.BrainKart.com
• FirstAdvantages
the HTTPOfrequests
Servlets :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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 112
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 113
lOMoARcPSD|46830608
www.BrainKart.com
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.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 114
lOMoARcPSD|46830608
www.BrainKart.com
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 { }
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 115
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 116
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 117
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 118
lOMoARcPSD|46830608
www.BrainKart.com
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(" irst_name")
+ "\n" + " <li><b>Last Name</b>: " +
request.getParameter("last_name") + "\n" + "</ul>\n"
+ "</body>" + "</html>" );
}
}
Assuming your environment is set up properly, compile
HelloForm.java as follows −
$ javac HelloForm.java If everything goes ine, above
compilation would produce HelloForm.class ile. Next you
would have to copy this class ile in
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 119
lOMoARcPSD|46830608
www.BrainKart.com
<Tomcatinstallationdirectory>/webapps/ROOT/WEB-
INF/classes and create following entries in web.xml ile
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? irst_name=ZARA&last
_name=ALI in your browser's Location:box and make sure you
already started tomcat server, before iring 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 this input.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 120
lOMoARcPSD|46830608
www.BrainKart.com
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 modi ication 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 java.io.*; import javax.servlet.*; import
javax.servlet.http.*;
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 121
lOMoARcPSD|46830608
www.BrainKart.com
out.println(docType + "<html>\n" +
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 122
lOMoARcPSD|46830608
www.BrainKart.com
doGet(request, response);
}
}
Now compile and deploy the above Servlet and test it using
Hello.htm with the POST method as follows −
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 123
lOMoARcPSD|46830608
www.BrainKart.com
<html> <body>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 124
lOMoARcPSD|46830608
www.BrainKart.com
Types of Cookie
There are 2 types of cookies in servlets.
PlayNext
Unmute Current TimeA 0:00
/
DurationA 18:10 Loaded: 0.37%
A
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 125
lOMoARcPSD|46830608
www.BrainKart.com
Fullscreen
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 126
lOMoARcPSD|46830608
www.BrainKart.com
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
Method Description
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 127
lOMoARcPSD|46830608
www.BrainKart.com
public changes
void the name of the
setName(String
name)
For adding cookie or getting the value from the cookie, we need some
methods provided by other interfaces. They are:
To create Cookie
Let's see the simple code to create cookie.
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 128
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 129
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 130
lOMoARcPSD|46830608
www.BrainKart.com
response.setContentType("text/html");
PrintWriter out = response.getWriter();
vletResponse response){
try{
String n=request.getParameter("userName");
out.print("Welcome "+n);
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 131
lOMoARcPSD|46830608
www.BrainKart.com
}catch(Exception e){System.out.println(e);}
out.close();
}
}
SecondServlet.java import
java.io.*; import
javax.servlet.*; import
javax.servlet.http.*;
public class SecondServlet
extends HttpServlet {
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 132
lOMoARcPSD|46830608
www.BrainKart.com
<servlet -mapping>
response.setContentType("text/html");
<servlet -name>s1</servlet
PrintWriter -name>
out = response.getWriter();
<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>
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 133
lOMoARcPSD|46830608
www.BrainKart.com
</servlet-mapping>
<servlet-mapping> <servlet-name>s2</servlet-name>
<url-pattern>/servlet2</url-pattern> </servlet-
mapping>
</web-app>
Output
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 134
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 135
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 136
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 137
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 138
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 139
lOMoARcPSD|46830608
www.BrainKart.com
https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes 140
Click on Subject/Paper under Semester to enter.
Environmental Sciences
Professional English and Sustainability -
Professional English - - II - HS3252 Discrete Mathematics - GE3451
I - HS3152 MA3354
Statistics and Theory of Computation
Matrices and Calculus Numerical Methods - Digital Principles and - CS3452
3rd Semester
4th Semester
- MA3151 MA3251 Computer Organization
1st Semester
2nd Semester
Computer Networks -
CS3591
Object Oriented
Full Stack Web Software Engineering - Human Values and
5th Semester
8th Semester
6th Semester
Elective 1 Elective-5
Management Elective
Elective-6
Elective 2
All Computer Engg Subjects - [ B.E., M.E., ] (Click on Subjects to enter)
Programming in C Computer Networks Operating Systems
Programming and Data Programming and Data Problem Solving and Python
Structures I Structure II Programming
Database Management Systems Computer Architecture Analog and Digital
Communication
Design and Analysis of Microprocessors and Object Oriented Analysis
Algorithms Microcontrollers and Design
Software Engineering Discrete Mathematics Internet Programming
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 Data Cryptography and Resource Management
Mining Network Security Techniques
Service Oriented Architecture Embedded and Real Time Multi - Core Architectures
Systems and Programming
Probability and Queueing Theory Physics for Information Transforms and Partial
Science Differential Equations
Technical English Engineering Physics Engineering Chemistry
Engineering Graphics Total Quality Professional Ethics in
Management Engineering
Basic Electrical and Electronics Problem Solving and Environmental Science and
and Measurement Engineering Python Programming Engineering