JEPPIAAR ENGINEERING COLLEGE

RAJIV GANDHI SALAI, CHENNAI – 600119

DEPARTMENT OF INFORMATION TECHNOLOGY

WEB ESSENTIALS LABORATORY

IT3401

II YEAR - B. Tech Information

Technology IV SEMESTER
 JEPPIAAR NAGAR, RAJIVGANDHI SALAI

CHENNAI – 600 119.

DEPARTMENT OF INFORMATION TECHNOLOGY

II YEAR B.TECH – IV SEM

Name :

Register Number :

Subject Name : WEB ESSENTIALS LABORATORY

Subject Code : IT3401

Batch : 2023 -2027

Year : II Year
 JEPPIAAR NAGAR, RAJIV GANDHISALAI

CHENNAI – 600119.

DEPARTMENT OF INFORMATION TECHNOLOGY

This is a Bonafide Record Work of

Register No. submitted for the Anna University Practical

Examination held on in IT3401 – WEB ESSENTIALS

LABORATORY during the year .

Signature of the Lab-In-Charge Signature of the HOD

Date:

Examiners

Internal:

External:
 VISION & MISSION
To build Jeppiaar Engineering College as an institution of academic excellence in
technological and management education to become a world class university.

Mission
 To excel in teaching and learning, research and innovation by promoting the
principles of scientific analysis and creative thinking.
 To participate in the production, development and dissemination of knowledge and
interact with national and international communities.
 To equip students with values, ethics and life skills needed to enrich their lives and
enable them to contribute for the progress of society.
 To prepare students for higher studies and lifelong learning, enrich them with the
practical skills necessary to excel as future professionals and entrepreneurs for the
benefit of Nation’s economy.
Program Outcomes

Engineering knowledge: Apply the knowledge of mathematics, science, engineering

PO1 fundamentals, and an engineering specialization to the solution of complex engineering problems.
Problem analysis: Identify, formulate, review research literature, and analyze complex
PO2 engineering problems reaching substantiated conclusions using first principles of mathematics,
natural sciences, and engineering sciences.
Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
PO3
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
Conduct investigations of complex problems: Use research-based knowledge and research
PO4 methods including design of experiments, analysis and interpretation of data, and synthesis of the
information to provide valid conclusions.
Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern
PO5 engineering and IT tools including prediction and modeling to complex engineering activities
with an understanding of the limitations.
The engineer and society: Apply reasoning informed by the contextual knowledge to assess
PO6 societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional engineering practice.
Environment and sustainability: Understand the impact of the professional engineering
PO7 solutions in societal and environmental contexts, and demonstrate the knowledge of, and need for
sustainable development.
Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norms
PO8
of the engineering practice.
Individual and team work: Function effectively as an individual, and as a member or leader in
PO9
diverse teams, and in multidisciplinary settings.
Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and write
PO10 effective reports and design documentation, make effective presentations, and give and receive
clear instructions.
Project management and finance: Demonstrate knowledge and understanding of the engineering
PO11 and management principles and apply these to one’s own work, as a member and leader in a team,
to manage projects and in multidisciplinary environments.
Life-long learning: Recognize the need for, and have the preparation and ability to engage in
PO12 independent and life-long learning in the broadest context of technological change.
 DEPARTMENT OF INFORMATION TECHNOLOGY
Vision
To produce engineers with excellent knowledge in the field of Information Technology

through scientific and practical education to succeed in an increasingly complex world.

Mission
 To demonstrate technical and operational excellence through creative and critical
thinking for the effective use of emerging technologies.
 To involve in a constructive, team oriented environment and transfer knowledge to
enable global interaction.
 To enrich students with professional integrity and ethical standards that will make
them deal social challenges successfully in their life.
 To devise students for higher studies and perpetual learning, upgrade them as
competent engineers and entrepreneurs for country’s development.

Program Educational Objectives (PEOs)

PEO 1 To support students with substantial knowledge for developing and resolving
mathematical, scientific and engineering problems
PEO 2 To provide students with adequate training and opportunities to work as a
collaborator with informative and administrative qualities
PEO 3 To shape students with principled values to follow the code of ethics in social
and professional life
PEO 4 To motivate students for extensive learning to prepare them for graduate
studies, R&D and competitive exams
PEO 5 To cater the students with industrial exposure in an endeavor to succeed in the
emerging cutting edge technologies

Program Specific Outcomes

Students are able to analyze, design, implement and test any software with the
PSO1 programming and testing skills they have acquired.
Students are able to design algorithms, data management to meet desired needs, for real
PSO2
time problems through analytical, logical and problem solving skills.
Students are able to provide security solutions for network components and data storage
PSO3
& management which will enable them to work in the industry ethically.

Course Outcomes (COs)

C413.1 Apply JavaScript, HTML and CSS Effectively to create interactive and dynamic websites
C413.2 Create simple PHP scripts
C413.3 Design and deploy simple web applications
C413.4 Create simple database applications
C413.5 Handle Multimedia Components
 INDEX

DATE OF PAGE SIGN

S.NO DATE TITLE
SUBMISSION NO.
1.1 Sample Website

1.2 College Details

2 Image Mapping

3.1 Frames

3.2 Tables

4 Cascading Style Sheet

5 Client-Side validation

6.1 Changing Font Using AJAX

6.2 Changing Color Using AJAX

7 Program Using Document Object Model

8 Program Using XML-Schema XSLT/XSL

9 Checking well Formedness of XML

document using SAX API
10.1 Displaying the contents of XML document
using SAX API
10.2 Invoke Servlets from HTML forms

11 Three-tier applications using JSP and

Database
 Create a simple web page

Aim:

To create a simple web page using HTML

Algorithm:

1. Start the program

2. Create time.html file using notepad
3. The <map> tag is used to define a client-side image-map.
4. An image-map is an image with clickable areas.
5. The name attribute is required in the map element. This attribute is associated with the
<img>'s use map attribute and creates a relationship between the image and the map.
6. display the content using <p> tag
7. end the program

Program:
<html>
<head>
<title>Time</title>
</head>
<body>
<h1>TIME</h1>
<img src=”clock.jpg” height=”100” width=”100”>
<p>Time is a precious thing which once wasted cannot be regained. Use leisure time
wisely<br> Never put yourself in a situation to think that you have wasted your time. Do
anything that will make you successful in life</p>
<marquee>Time and tide waits for none</marquee>
</body>
</html>
Output:

Result:

Thus the above program was completed and executed successfully.

 Create web page with college details

Aim:

To create a simple web page with college details using HTML

Algorithm:

1. Start the program

2. Include bg color,heading,images,address
3. Add hyperlinks for location
4. Add details about the college
5. add departments with their email ids
6. stop the program

Program:
<html>
<head>
<title>jeppiaar</title>
</head>
<body bgcolor="yellow">
<b><h1 align="center">JEPPIAAR ENGINEERING COLLEGE</h1></b>
<img src="flowers.jpg" height="100" width="800">
<b> <u> <h3>Contacts</h3> </u> </b>
<img align="right" src="map.jpg" height="200" width="200">
<p>Address: Rajiv Gandhi Salai, Chennai-600119, Tamilnadu <br>
website:<a href="http://www.jeppiaarcollege.org/jeppiaar/">www.jeppiaarcollege.org</a>
</p><b> <u> <h3>Departments</h3> </u> </b>
<p> <b>Information Technology </b> email:[email protected] <br>
<b>Computer Science </b>email:[email protected]<br>
<b>Biotechnology</b>email:[email protected]<br>
<b>Civil Engineering</b>email:[email protected]<br>
<b>Mechanical Engineering</b>email:[email protected]</p>
<marquee>respect-manners-discipline-education</marquee>
</body></html>
Output:

Result:

Thus the above program was completed and executed successfully.

 Image mapping

Aim:

To create web page which includes a map and display the related informations when
a hotspot is clicked in a map

Algorithm:

1. Start the program for embed map in web page

2. Create world.html file using notepad
3. The <map> tag is used to define a client-side image-map.
4. An image-map is an image with clickable areas.
5. The name attribute is required in the map element. This attribute is associated with the
<img>'s use map attribute and creates a relationship between the image and the map.
6. The map element contains a number of area elements that defines the clickable areas
in the image map.
7. Set the coordination for the Hotspot areas
8. Finally terminate the program and embed a web page.

Program:
<html>
<head>
<title>image mapping</title>
</head>
<body>
<h1 align="center">INDIA</h1>
<p>(click on the states to view information)</p>
<img src="map.jpg" align="center" usemap="#pic">
<map name="pic">
<area shape="rect" coords="206,535,151,458" href="tamilnadu.html">
<area shape="rect" coords="121,531,145,468" href="kerala.html">
<area shape="rect" coords="227,433,163,322" href="andhra.html">
<area shape="rect" coords="172,463,87,385" href="karnataka.html">
</map>
</body>
</html>
tamilnadu.html:
<html>
<head>
<title>tamil nadu</title>
</head>
<body>
<h1 align="center">TAMIL NADU</h1>
<p>Tamil Nadu is the eleventh largest state in India by area and the seventh most populous
state. It is the second largest state economy in India as of 2012. The state ranked 6th among
states in India according to the Human Development Index as of 2011.Tamil Nadu is also the
most urbanized state in India.The state has the highest number (10.56 per cent) of business
enterprises and stands second in total employment (9.97 per cent) in India, compared to the
population share of about 6 per cent.</p>
<img src="tamil.jpg" height="500" width="500">
</body>
</html>

kerala.html:
<html>
<head>
<title>kerala</title>
</head>
<body>
<h1 align="center">KERALA</h1>
<p>Kerala regionally used as Keralam is a state located in the south-west region of India on
the Malabar coast. It was formed on 1 November 1956 per the States Reorganisation Act by
combining various Malayalam-speaking regions. Spread over 38,863 km2 (15,005 sq mi)
with a population of 33,387,677, it is bordered by Karnataka to the north and north east,
Tamil Nadu to the east and south, and the Laccadive Sea to the west. Thiruvananthapuram is
the state capital among the 14 districts; other major cities include Kochi, Kozhikode, Kollam
and Thrissur.</p>
<img src="kerala.jpg" height="500" width="500">
</body>
</html>
andhra.html:
<html>
<head>
<title>andhra pradesh</title>
</head>
<body>
<h1 align="center">ANDHRA PRADESH</h1>
<p>Andhra Pradesh is one of the 28 states of India, situated on the country's southeastern
coast. It is India's fourth largest state by area and fifth largest by population, with more than
84 million inhabitants in 2011. Its capital and largest city, Hyderabad, is the fourth most
populous city in the country. Andhra Pradesh is bordered by Maharashtra, Chhattisgarh and
Odisha states in the north, the Bay of Bengal in the east, and the states of Tamil Nadu to the
south and Karnataka to the west.</p>
<img src="andhra.jpg" height="500" width="500">
</body>
</html>

karnataka.html:
<html>
<head>
<title>karnataka</title>
</head>
<body>
<h1 align="center">KARNATAKA</h1>
<p>Karnataka is a state in South West India. It was created on 1 November 1956, with the
passage of the States Reorganisation Act, which is celebrated annually as Karnataka
Rajyotsava. Originally known as the State of Mysore, it was renamed Karnataka in 1973. It
is the land of the Kannadigas, Tuluvas, Konkanis and Kodavas. The capital and largest city is
Bangalore, also known as Bengaluru, which is at the forefront of the rapid economic and
technological development that India is experiencing.</p>
<img src="karnataka.jpg" height="500" width="500">
</body>
</html>
Output:
Result:

Thus the above program was completed and executed successfully.

 Frames

Aim:
To create a frames in a webpage using HTML

Algorithm:
1. start the program.
2.divide the rows and columns using frameset tag.
3.create three html frames f1,f2,f3.
4.insert images in each of the html frames
5.Stop the program

Program:
<html>
<head>
<title>frame</title>
</head>
<frameset cols="50%,50%">
<frame src="f1.html" noresize="yes" >
<frameset rows="50%,50%">
<frame src="f2.html" noresize="yes" scrolling="no">
<frame src="f3.html" noresize="yes">
</frameset>
</frameset>
</html>

f1.html:
<html>
<head>
<title>first</title>
</head>
<body bgcolor="orange">
<h1>FIRST FRAME</h1>
<img src="flower.jpg" height="500" width="500">
</body>
</html>
f2.html:
<html>
<head> <title>second</title>
</head> <body bgcolor="green">
<h1> SECOND FRAME</h1>
<img src="star.jpg" height="500" width="500">
</body>
</html>

f3.html:
<html>
<head>
<title>third</title>
</head>
<body bgcolor="pink">
<h1> THIRD FRAME</h1>
<p>frames concept divides the screen into desired number of parts</p>
<marquee>Frames</marquee>
</body>
</html>
Output:

Result:

Thus the above program was completed and executed successfully.

 TABLE

Aim:
To create a table using HTML tags

Algorithm:
1. startthe program
2. use table tag and initialize the table border
3. use <th> for table heading,<td> for table definitions,<tr> to create new rows
4. use background color and border color
5. stop the program

Program:
<html>
<head>
<title>table</title>
</head>
<body>
<h1 align="center">TIME TABLE IT-A</h1>
<table border="2" bordercolor="red" bgcolor="lavender" cellspacing="2" cellpadding="5">
<th>days/hours</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<tr>
<td>Mon</td>
<td>cns</td>
<td>es</td>
<td>ooad</td>
<td>wt</td>
<td>npm</td>
<td>ooad lab</td>
<td>ooad lab</td>
<td>ooad lab</td> </tr>
<tr>
<td>Tue</td>
<td>uid</td>
<td>cns</td>
<td>npm</td>
<td>app</td>
<td>ooad</td>
<td>npm</td>
<td>ooad</td>
<td>wt</td>
</tr>
<tr>
<td>Wed</td>
<td>npm lab</td>
<td>npm lab</td>
<td>npm lab</td>
<td>es</td>
<td>cns</td>
<td>uid</td>
<td>ooad</td>
<td>cns</td>
</tr>
<tr>
<td>Thru</td>
<td>ooad</td>
<td>es</td>
<td>cns</td>
<td>app</td>
<td>wt</td>
<td>wt</td>
<td>npm</td>
<td>uid</td>
</tr>
<tr>
<td>Fri</td>
<td>npm</td>
<td>uid</td>
<td>lib</td>
<td>wt</td>
<td>es/uid</td>
<td>wt lab</td>
<td>wt lab</td>
<td>wt lab</td> </tr> </table>
<p>NOTE: Every day 5th hour cycle test is conducted</p> </body> </html>
Output:

Result:

Thus the above program was completed and executed successfully.

 CASCADING STYLE SHEET

Aim:
To create a web page with all types of cascading style sheets.

Algorithm:

1. Start by three ways of employing CSS in your Web pages :inline styles, embedded or
global styles, and linked or external style sheets. I
2. To create an inline style
a. Add the style attribute to the HTML tag.
b. The style declaration must be enclosed within double quotation marks.
3. To create an embedded style
a. Insert a <style> tag within the head section of the HTML file.
b. Within the <style> tag, enclose the style declarations needed to the entire Web page.
c. The style sheet language identifies the type of style used in the document.
d. The default and the most common language is “text/css” for use with CSS.
4. To create an External styles
a. Create a text file containing style declarations
b. Create a link to that file in each page of the Web site using a <link> tag.
c. Specify the link attributes, such as href, rel, and type.
d. Link a stylesheet, the value of the href attribute should be the “URL” of the
linked document, the value of the rel attribute should be “stylesheet” and the
value of the type attribute should be “text/css”.
5. Write the source code for the separate style sheet and finally terminate the program.

Program:
inline.html:
<html>
<head>
<title>shopping area</title>
<body>
<h2 align="center">shopping details</h2>
<hr size="3">
<ul type="disc">
<li>monday<li>tuesday<li>wednesday<li>thursday<li>friday<li>saturday<li>sunday</li>
</ul>
<a href="embedded.html">go to embedded</a>
</body>
</html>
embedded.html:
<html>
<head>
<title>more style</title>
<style type="text/css">
a:nodec{text-decoration:none}
a:hover{text-decoration:underline;color:red;background-color:#ccffc}
li em{color:red;font-weight:bold}
ul{margin-left:75px}
ul ul{text-decoration:underline;margin-left:15px}
</style>
</head>
<body>
<h1>shopping list for <em>monday</em></h1>
<ul>
<li>milk</li>
<li>bread</li>
<li>rice</li>
<li>pizza <em>with mushroom</em></li>
</ul>
<p> <a class=”nodex” href=”external.html”>go to external</a> </p>
</body>
</html>

style.css:
body{font-size:18pt;font-family:serif;color:black;background-color:white;}
h1{font-size:24pt;font-family:sans-serif;color:purple;text-align:center;}
p{text-indent:1.5in;margin-left:50px;margin-left:50px;margin-right:50px;}
a:link{color:blue}
a:visited{color:red}
a:active{color:yellow}
a:hover{color:orange}

external.html:
<html>
<head><title>style sheet linking</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<h1>html with style</h1>
<hr size="5">
<p>external style sheet proves a powerful page<br><a href="inline.html">inline</a>
click to see the inline</p>
</body> </html>
Output:

Result:

Thus the above program was completed and executed successfully.

 Client side validation using DHTML

Aim:

To create Client Side Scripts for Validating Web Form Controls using DHTML.

Algorithm:

1. Start the Program

2. Create a bank.html and in that page create two textboxes to enter the account number
and name
3. User given input is validated and it is linked to either “deposit.html” /”withdraw.html”
4. This script validates text inputs typed and selects boxes after something has been
selected.
5. Insert Attributes on the tags are used to determine the validation process.
6. Embed JavaScript in the Web page for Client-side form validation.
7. Run the form with Internet explorer to check the details entered by the user.

Program:
<html>
<head>
<script
type="text/javascript">
function validate()
{
var c=0;
valid = true;
if(document.contact_form.contact_name.value == "" )
{
alert("please fill in the 'your name' box." );
valid = false;
}
if(document.contact_form.email.value.indexOf("@") == -1)
{
alert("enter a valid email address");
valid=false;
}
if((document.contact_form.gender[0].checked == false )
&&(document.contact_form.gender[1].checked == false ) )
{
alert("Please choose your gender male or female" );
valid = false;
}
if(document.contact_form.age.selectedIndex == 0 )
{
alert("Please select your age." );
valid = false;
}
if(document.contact_form.degree[0].checked == false)
{
c=c+1;
}
if( document.contact_form.degree[1].checked == false )
{
c=c+1;
}
if(document.contact_form.degree[2].checked == false )
{
c=c+1;
}
if( document.contact_form.degree[3].checked == false)
{c=c+1;
}
if( document.contact_form.degree[3].checked == false)
{
c=c+1;
}
if(document.contact_form.area.options[0].selected)
{
alert ( "Please select any of area of interest" );
valid = false;
}
if(document.contact_form.myname.value=="" )
{
alert("Please type the address." );
valid = false;
}
if(document.contact_form.phone.value=="" )
{
alert("value
required:"); valid=false;
}
else
{
var valid = 1;
var GoodChars = "0123456789()-+ "
var i = 0
var
text=document.contact_form.phone.value;
for(i =0; i <=text.length -1; i++)
{
if(GoodChars.indexOf(text.charAt(i)) == -1)
{
alert(text.charAt(i) + " is no good.")
valid = 0
}
}
alert("this is a valid number:");
}
return valid;
}
</script>
</head>
<body bgcolor="pink">
<CENTER><H1>CLIENT SIDE VALIDATION</H1></CENTER>
<form name="contact_form" onsubmit="return validate();">
name : <input type="text" name="contact_name"></p>
<label>email :</label>
<input type="text" name="email"><br><br>
<label> sex &nbsp;&nbsp;&nbsp;&nbsp;:</label>
<label>female<Input type=radio name=gender value="female"></label>
<label>male<Input type=radio name=gender value="male"><br><br></label>
<label> Enter the Age :</label>
<select name=age>
<option name=age value="20">20</option>
<option name=age value="21">21</option>
<option name=age value="22">22</option>
<option name=age value="23">23</option>
</select><br><br>
<label>Degree:</label><br>
<input type="checkbox" name ="degree" value="SSC" >diploma<br>
<input type="checkbox" name ="degree" value="INTER" >inter<br>
<input type="checkbox" name ="degree" value="DEGREE">degree<br>
<input type="checkbox" name ="degree" value="B.TECH">b.tech<br>
<label>area of interest</label>
<SELECT NAME="area">
<OPTION VALUE="0" >application Development</OPTION>
<OPTION VALUE="1">networking</OPTION>
<OPTION VALUE="2">web application</OPTION>
</SELECT><br><br>
<label>Address :</label>&nbsp;&nbsp;&nbsp;
<textarea cols="20" rows="2" name="Address">
</textarea><br><br>
<label>Phone Number :</label>
<Input type="text" name="phone"><br><br>
<p><input type="submit" name="send" value="Send Details">&nbsp;
<input type=Reset name=reset value="clear">
</form>
</body>
</html>

Output:

Result:

Thus the above program was completed and executed successfully.

 Changing font using AJAX

Aim:
To write an AJAX program to change fonts.

Algorithm:

1. A client event is created.

2. Use the div section to display information returned from a server.
3. Create a button to call a function named loadXMLDoc(), if it is clicked.
4. Add a <script> tag to the page's head section containing the loadXMLDoc() function.
5. Use an XMLHttpRequest object to exchange data with a server behind the scenes.
6. Use the open() and send() methods of the XMLHttpRequest object to send a
request to a server.
7. Click the button to view the changes in the browser.

Program:
<html>
<head>
<title>change font</title>
</head>
<body>
<p><a onmouseover="this.style.color='blue';this.style.font='20pt arial';"
onmouseout="this.style.color='black';this.style.font='12pt normal';">
before you speak,</a>listen.<br/>
<a onmouseover="this.style.color='red';this.style.font='20pt arial';"
onmouseout="this.style.color='black';this.style.font='12pt
normal';"> before you write,</a>think.
</p><br/><br/>
<p><em>-by william</em></p>
</body>
</html>
Output:

Result:

Thus the above program was completed and executed successfully.

 Changing color using AJAX

Aim:
To write an AJAX program to change color

Algorithm:

1. A client event is created.

2. Use the div section to display information returned from a server.
3. Create a button to call a function named loadXMLDoc(), if it is clicked.
4. Add a <script> tag to the page's head section containing the loadXMLDoc() function.
5. Use an XMLHttpRequest object to change color with a server behind the scenes.
6. Use the open() and send() methods of the XMLHttpRequest object to send a
request to a server.
7. Click the button to view the changes in the browser.

Program:
<html>
<head>
<title>changing color</title>
<script
type="text/javascript">
function my_fun()
{
var f_color=document.getElementById("fore_Color").value;
var
b_color=document.getElementById("back_Color").value;
document.body.style.backgroundColor=b_color;
document.body.style.color=f_color;
}</script>
</head>
<body>
<h2>change color!!!</h2>
<form><label>enter the foreground color
<input type="text" value="" id="fore_Color"/>
</label><br/><br/>
<label>enter background color
<input type="text" value="" id="back_Color"/>
</label>
<br/><br/>
<input type="button" value="click to change the color" onclick="my_fun();"/>
</form> </body> </html>
Output:

Result:

Thus the above program was completed and executed successfully.

 Program using DOM

Aim:

To Use Microsoft DOM to navigate and extract information from the book’s XML
document.

Algorithm:

1. Open a new, empty text file in your text editor, and type in the XML document to
store the elements of an address book.
2. Use your text editor’s save command to save the document on your hard disk, by
assigning the filename
3. Create the book’s XML document which contains title, author, ISBN number, book
name, publication and book rates.
4. Using Document Object Model, extract the book’s XML document.
5. This could be done by the method of DOM API which is written either using Java or
C#.
6. In the same manner, navigate the document from the book's XML.

Program:
html code:
<html>
<head>
<title> DOM EXTRACTION </title>
<script language="Javascript" for="window" event="onload">
Document=dsoBook.XMLDocument;
name.innerText=Document.documentElement.childNodes(0).text;
author.innerText=Document.documentElement.childNodes(0).text;
Edition.innerText=Document.documentElement.childNodes(0).text;
publisher.innerText=Document.documentElement.childNodes(0).text;
pageno.innerText=Document.documentElement.childNodes(0).text;
price.innerText=Document.documentElement.childNodes(0).text;
</script>
</head>
<body>
<xml id="dsoBook" src="C:\Documents and Settings\Administrator\Desktop/book.xml"></xml>
<h2> Book Description</h2>
<table datasrc="#dsoBook" border="1' cellpadding="5">
<thead>
<th> Title</th>
<th> Author</th>
<th> Edition</th>
<th> publisher</th>
<th> pageno</th>
<th> price</th>
</thead>
<tr align="center">
<td><span datafld="name"></span></td>
<td><span datafld="author"></span></td>
<td><span datafld="Edition"></span></td>
<td><span datafld="publisher"></span></td>
<td><span datafld="pageno"></span></td>
<td><span datafld="price"></span></td>
</tr>
</table>
</body>
</html>

book.xml
<?xml version="1.0"?>
<books>
<book>
<name> Harry Potter</name>
<author> Rowling </author>
<Edition> 2008 </Edition>
<publisher> Pearson </publisher>
<pageno> 123 </pageno>
<price> 290 </price>
</book>
<book>
<name> C++ </name>
<author> Balagurusamy</author>
<Edition> 1988 </Edition>
<publisher> Tata </publisher>
<pageno>236 </pageno>
<price> 150 </price>
</book>
<book>
<name> Data Structures </name>
<author> Sahani </author>
<Edition> 2006 </Edition>
<publisher> McGrawHill </publisher>
<pageno> 345 </pageno>
<price> 180 </price>
</book>
<book>
<name> C </name>
<author> Kanetkar </author> <Edition> 1978 </Edition>
<publisher> Pearson </publisher> <pageno> 123 </pageno>
<price> 290 </price> </book> </books>
Output:

Result:

Thus the above program was completed and executed successfully.

 Programs using XML – Schema
XSLT/XSL

Aim:
To create an XML document to store an address book

Algorithm:
1. Open a new, empty text file in your text editor, and type in the XML document to
store the elements of an address book.
2. Use your text editor’s Save command to save the document on your hard disk, by
assigning the filename
3. Add elements to the XML document.
4. Add attributes to an element.
5. The address book consists of name, mobile number, email id.
6. Print the results.

Program:
<?xml version="1.0"?>
<book>
<ser1>
<name>
<firstname>Aswin</firstname>
<lastname>Sundar</lastname>
</name>
<Birth>5-7-1984</Birth>
<Gender>Male</Gender>
<mar.status>single</mar.status>
<e-mail>[email protected]</e-mail>
<mobno>+91-98941 62478</mobno>
<contactadd>
<doorno>2/365</doorno>
<street>pulla goundar thottam</street>
<city>coimbatore</city>
<pincode>641014</pincode>
<state>Tamilnadu</state>
<country>India</country>
</contactadd>
</ser1>
<ser2>
<name>
<firstname>Achtung babee</firstname>
<lastname>Ramu</lastname>
</name>
<Birth>2-12-1984</Birth>
<Gender>Female</Gender>
<mar.status>single</mar.status>
<e-mail>[email protected]</e-mail>
<mobno>+91-98422 62766</mobno>
<contactadd>
<doorno>98/k</doorno>
<street>goundar thottam</street>
<city>Tirupur</city>
<pincode>641 454</pincode>
<state>Tamilnadu</state>
<country>India</country>
</contactadd>
</ser2>
<ser3>
<name>
<firstname>Athiamaan.S</firstname>
<lastname>Swamy nathan</lastname>
</name>
<Birth>6-4-1983</Birth>
<Gender>Male</Gender>
<mar.status>single</mar.status>
<e-mail>[email protected]</e-mail>
<mobno>+91-99941 68794</mobno>
<contactadd>
<doorno>2/45</doorno>
<street>Ramanatha puram</street>
<city>coimbatore</city>
<pincode>641014</pincode>
<state>Tamilnadu</state>
<country>India</country>
</contactadd>
</ser3>
</book>
Output:

Result:

Thus the above program was completed and executed successfully.

 Checking well Formedness of XML
document using SAX API

Aim:
To Check well Formedness of XML document using SAX API

Algorithm:
1. start the program
2. import all the required java packages.
3. create a class SAXdemo
4. Enter the xml document for Checking well Formedness of XML document using
SAX API
5. stop the program

Program:
import org.xml.sax.*;
import
org.xml.sax.helpers.*;
import java.io.*;
public class parsing_SAXDemo
{
public static void main(String[] args) throws IOException
{
try
{
System.out.print("enter the name of XML document:");
BufferedReader input=new BufferedReader(new InputStreamReader(System.in));
String file_name=input.readLine();
File fp=new File(file_name);
if(fp.exists())
{
try
{
XMLReader reader=XMLReaderFactory.createXMLReader();
reader.parse(file_name);
System.out.println(file_name+"is well-formed");
}
catch(Exception e)
{
System.out.println(file_name+"is not well-formed");
System.exit(1);
}
}
else
{
System.out.println("file is not present:"+file_name);
}
}
catch(IOException ex)
{
ex.printStackTrace();
}
}
}

student.xml:
<?xml version="1.0"?>
<student>
<roll no>10</roll no>
<Personal_Info>
<name>parth</name>
<address>pune</address>
<phone>8144324471</phone>
</Personal_Info>
<class>second</class>
<subject>math</subject>
<marks>100</marks>
</student>

Output:
Enter the name of XML document: student.xml
student.xml is well-formed

Result:

Thus the above program was completed and executed successfully.

 Display the contents of XML document
using SAX API

Aim:
To display the contents of XML documentusing SAX API.
Algorithm
1. Display the content of XML document using SAX API
2. In coding create three important objects.
3. Label sent and received and button click to send to servlets.
4. Then create java coding for parsing_SAXDemo1 and display the name of
XML document.
5. Finally save and run the program.

Program:
import
org.xml.sax.helpers.*;
import javax.xml.parsers.*;
import java.io.*;
public class parsing_SAXDemo1
{
public static void main(String args[]) throws IOException
{
System.out.print("enter the name of XML document");
BufferedReader input=new BufferedReader(new InputStreamReader(System.in));
String file_name=input.readLine();
File fp=new File(file_name);
if(fp.exists())
{
try
{
SAXParseFactory parsefact=SAXParseFactory.newInstance();
SAXParse parser=parsefact.new SAXParser();
System.out.println("xml elements from the file"+file_name+"are");
DefaultHandler handler=new DefaultHandler()
{
public void startElement(String uri, String localName, String elements, Attributes
attributes)throws SAXException
{
System.out.println("\t"+elements);
}
};
parser.parse(file_name,handlers);
}
catch(Exception e)
{
e.printStackTrace();
}
}
else
System.out.println("\nfile is not present");
}
}

student.xml:
<?xml version="1.0"?>
<student>
<rollno>10</rollno>
<Personal_Info>
<name>parth</name>
<address>pune</address>
<phone>8144324471</phone>
</Personal_Info>
<class>second</class>
<subject>maths</subject>
<marks>100</marks>
</student>

Output:
enter the name of XML document: student.xml
xml elements from the file student.xml are
student
rollno
Personal_info
name
address
phone
class
subject
marks

Result:

Thus the above program was executed and completed successfully.

 Invoke Servlets from HTML forms

Aim:
To invoke servlets from HTML forms and Applets.
Algorithm
1. Start the Invoking Servlets from Applet
2. Create the Ats.html
3. Use the one input type for roll no
4. When submit button is click it perform the action=
http://localhost:8080/Student/Student
5. Then save as the Ats.html
6. Then create java coding for AppletToServlet.java
7. In coding create three important objects
8. Label sent and received and button click to send to servlets.
9. Set the url as http://localhost:8080"+"/servlet/ServletToApplet
10. Then create java coding for ServletToApplet.java and Intermediate.java
11. Finally save and run the program

Program:
<html>
<head>
<title>student</title>
</head>
<body>
<center>
<form name="form1" action="http://localhost:8080/examples/servlet/myservletDemo">
<h3>enter student information</h3>
<table>
<tr>
<td><b>roll no.</b></td>
<td><input type="text" name="roll number" size="25" value=""></td>
</tr>
<tr>
<td><b>student name</b></td>
<td><input type="text" name="student name" size="25" value=""></td>
</tr>
<tr>
<td><b>student address</b></td>
<td><input type="text" name="student address" size="50" value=""></td>
</tr>
<tr>
<td><b>phone</b></td>
<td><input type="text" name="phone" size="25" value=""></td>
</tr>
<tr>
<td><b>total marks</b></td>
<td><input type="text" name="total marks" size="10" value=""></td>
</tr>
</table>
<input type="submit" value="submit">
<input type="reset" value="cancel">
</form>
</center>
</body>
</html>

my_servletDemo.java:
import java.io.*;
import java.util.*;
import javax.servlet.*;
public class my_servletDemo extends GenericServlet
{
public void service(ServletRequest req, ServletResponse res)throws ServletException,
IOException
{
PrintWriter out=res.getWriter();
Enumeration en=req.getParameter.Names();
while(en.hasMoreElements())
{
String
name_received=(String)en.nextElement();
out.print(name_received+"=");
String
value_received=req.getParameter(name_received);
out.println(value_received);
out.println("");
}
out.close();
}
}
Output:

Result:

Thus the above program was executed and completed successfully.

 Three-tier applications using JSP and
Databases

Aim:
To write java servlet programs to conduct online examinations and to display student
mark lists available in a database.
Algorithm:
Client:
Step1: In index.html on the client side declare the contents that you like to
transfer to the server using html form and input type tags.
Step2: create a submit button and close all the included tags.

Servlet:
Step 1: Import all necessary packages
Step 2: Define a class that extends servlet
Step 3: In the doPost() method, do the following:
a. Set the content type of the response to "text/html"
b. Create a writer to the response
c. Get a parameter from the request
d. If its value is equal to right answer then add 5 to mark variable
e. Similarly repeat step
f. for all parameters
g. Display the result in an html format using the writer

STUDENT MARK LIST DATABASE

Step 1: Import necessary to java packages and javax packages and classes
Step 2: Create a class that extends HttpServlet and
implements ServletException
and IOException
Step 3: In the doGet() method, do the following:
i. Create a PrintWriter object
ii. Open a connection with the data source name
iii. Write a sql query and execute to get the resultset
iv. Display the result set information in html form
 Program:

SERVLET CODE:
import java.io.*; import
java.sql.*; import
javax.servlet.*;
import javax.servlet.http.*;
public class StudentServlet3 extends HttpServlet
{
String message,Seat_no,Name,ans1,ans2,ans3,ans4,ans5; int
Total=0;
Connection connect;
Statement
stmt=null; ResultSet
rs=null;
public void doPost(HttpServletRequest request,HttpServletResponse response) throws
ServletException,IOException
{
try
{
String url="jdbc:odbc:NEO";
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
connect=DriverManager.getConnection(url," "," ");
message="Thank you for participating in online Exam";
}
catch(ClassNotFoundException cnfex)
{ cnfex.printStackTrace();
}
catch(SQLException sqlex)
{ sqlex.printStackTrace();
}
catch(Exception excp){
excp.printStackTrace();
}

Seat_no=request.getParameter("Seat_no");
Name=request.getParameter("Name");
ans1=request.getParameter("group1");
ans2=request.getParameter("group2");
ans3=request.getParameter("group3");
ans4=request.getParameter("group4");
ans5=request.getParameter("group5");
if(ans1.equals("True"))
Total+=2;
if(ans2.equals("False"))
Total+=2;
if(ans3.equals("True"))
Total+=2;
if(ans4.equals("False"))
Total+=2;
if(ans5.equals("False"))
Total+=2;
try
{
Statement stmt=connect.createStatement();
String query="INSERT INTO student("+"Seat_no,Name,Total"+")
VALUES('"+Seat_no+"','"+Name+"','"+Total+"')";
int result=stmt.executeUpdate(query);
stmt.close();
}catch(SQLException ex){
}
response.setContentType("text/html");
PrintWriter out=response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<body bgcolor=cyan>");
out.println("<center>");
out.println("<h1>"+message+"</h1>\n");
out.println("<h3>Yours results stored in our database</h3>");
out.print("<br><br>");
out.println("<b>"+"Participants and their Marks"+"</b>");
out.println("<table border=5>");
try
{
Statement stmt=connect.createStatement();
String query="SELECT * FROM student";
rs=stmt.executeQuery(query);
out.println("<th>"+"Seat_no"+"</th>");
out.println("<th>"+"Name"+"</th>");
out.println("<th>"+"Marks"+"</th>");
while(rs.next())
{
out.println("<tr>");
out.print("<td>"+rs.getInt(1)+"</td>");
out.print("<td>"+rs.getString(2)+"</td>");
out.print("<td>"+rs.getString(3)+"</td>");
out.println("</tr>");
}
out.println("</table>");
}
catch(SQLException ex){
} finally
{
try
{
if(rs!=null)
rs.close();
if(stmt!=null)
stmt.close();
if(connect!=null)
connect.close();
}
catch(SQLException e){ }
}
out.println("</center>");
out.println("</body></html>");
Total=0; } }
HTML CODE:

<html>
<head><title>Database Test</title></head>
<body>
<center>
<h1>Online Examination</h1>
</center>
<form action="StudentServlet3.view" method="POST">
<div align="left"><br></div>
<b>Seat Number:</b> <input type="text" name="Seat_no">
<div align="Right">
<b>Name:</b> <input type="text" name="Name" size="50"><br>
</div>
<br><br>
<b>1. Every host implements transport layer.</b><br/>
<input type="radio" name="group1" value="True">True
<input type="radio" name="group1" value="False">False<br>

<b>2. It is a network layer's responsibility to forward packets reliably from source to

destination</b><br/>
<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False<br>

<b>3. Packet switching is more useful in bursty traffic</b><br/>

<input type="radio" name="group3" value="True">True
<input type="radio" name="group3" value="False">False<br>

<b>4. A phone network uses packet switching</b><br/>

<input type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False<br>

<b>5. HTML is a Protocol for describing web contents</b><br/>

<input type="radio" name="group5" value="True">True
<input type="radio" name="group5" value="False">False<br>

<br><br><br>
<center>
<input type="submit" value="Submit"><br><br>
</center>
</form>
</body>
</html>
Output:

Result:

Thus the above program was executed and completed successfully.