0% found this document useful (0 votes)
22 views47 pages

Web Technologies Lab Guide - CSE

J K K Natraja College of Engineering and Technology offers a Web Technologies Laboratory course aimed at equipping students with essential skills in web development and programming. The course includes various experiments focused on HTML, CSS, Java, and server-side programming, with specific learning outcomes related to creating dynamic web applications. Students are expected to adhere to strict laboratory instructions and complete evaluations based on their preparedness and execution of experiments.

Uploaded by

Ponnarasi N
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
22 views47 pages

Web Technologies Lab Guide - CSE

J K K Natraja College of Engineering and Technology offers a Web Technologies Laboratory course aimed at equipping students with essential skills in web development and programming. The course includes various experiments focused on HTML, CSS, Java, and server-side programming, with specific learning outcomes related to creating dynamic web applications. Students are expected to adhere to strict laboratory instructions and complete evaluations based on their preparedness and execution of experiments.

Uploaded by

Ponnarasi N
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

J K K NATRAJA COLLEGE OF ENGINEERING AND TECHNOLOGY

(MANAGED BY [Link] CHARITABLE TRUST)


Natarajapuram, NH- 544, (Salem to Coimbatore) Komarapalayam - 638 183,Namakkal Dt., Tamil Nadu.
(Approved by AICTE - New Delhi and Affiliated to Anna University - Chennai)
Website:

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CCS375 WEB TECHNOLOGIES Laboratory


VISION AND MISSION OF THE INSTITUTION

VISION

To be a Leading Global Innovative Solutions provider for the


ever changing needs of the society.
MISSION
Enabling a Platform for all to size exponential opportunities
through bio convergence, thereby facilitating them to become Dynamic
Leaders who shape the future.

VISION / MISSION OF THE DEPARTMENT

VISION
To be a Leading Global Innovative Solutions provider for the
ever-changing needs of society
MISSION
To equip learners in the Computer Science and Engineering
Department with advanced engineering knowledge and skills, while
fostering collaboration with bio-convergence disciplines.

To cultivate leaders who contribute to sustainable development


and drive innovation in the field of block chain technology.
PROGRAM OUTCOMES (POs)

GRADUATE ATTRIBUTE

1. Engineering knowledge: Apply the knowledge of mathematics, science,


engineering fundamentals, and an engineering specialization to the solution of
complex engineering problems.

2. Problem analysis: Identify, formulate, review research literature, and analyse


complex engineering problems reaching substantiated conclusions using first
principles of mathematics, natural sciences, and engineering sciences.

3. Design/development of solutions: Design solutions for complex engineering


problems and design system components or processes that meet the specified needs
with appropriate consideration for the public health and safety, and the cultural,
societal, and environmental considerations.

4. Conduct investigations of complex problems: Use research-based knowledge


and research methods including design of experiments, analysis and interpretation of
data, and synthesis of the information to provide valid conclusions.

5. Modern tool usage: Create, select, and apply appropriate techniques, resources,
and modern engineering and IT tools including prediction and modelling to complex
engineering activities with an understanding of the limitations.

6. The engineer and society: Apply reasoning informed by the contextual knowledge
to assess societal, health, safety, legal and cultural issues and the consequent
responsibilities relevant to the professional engineering practice.

7. Environment and sustainability: Understand the impact of the professional


engineering solutions in societal and environmental contexts, and demonstrate the
knowledge of, and need for sustainable development.

8. Ethics: Apply ethical principles and commit to professional ethics and


responsibilities and norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member
or leader in diverse teams, and in multidisciplinary settings.

10. Communication: Communicate effectively on complex engineering activities with


the engineering community and with society at large, such as, being able to
comprehend and write effective reports and design documentation, make effective
presentations, and give and receive clear instructions.

11. Project management and finance: Demonstrate knowledge and understanding of


the engineering 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.

12. Life-long learning: Recognize the need for, and have the preparation and ability
to engage in independent and life-long learning in the broadest context of
technological change.

PROGRAM SPECIFIC OUTCOMES (PSO’S)

1. Have proficiency in programming skills to design, develop and apply appropriate


techniques, to solve complex engineering problems.
2. Have knowledge to build, automate and manage business solutions using cutting edge
technologies.

3. Have excitement towards research in applied computer technologies.


LABORATORY CLASSES – INSTRUCTIONS TO STUDENTS
1. Students must attend the lab classes with ID cards and in the prescribed uniform.

2. Boys-shirts tucked in and wearing closed leather shoes. Girls’ students with
cut shoes, overcoat, and plait incite the coat. Girls’ students should not wear
loose garments.

3. Students must check if the components, instruments and machinery are in


working condition before setting up the experiment.

4. Power supply to the experimental set up/ equipment/ machine must be


switched on only after the faculty checks and gives approval for doing the
experiment. Students must start to the experiment. Students must start
doing the experiments only after getting permissions from the faculty.

5. Any damage to any of the equipment/instrument/machine caused due to


carelessness, the cost will be fully recovered from the individual (or) group
of students.

6. Students may contact the lab in charge immediately for any unexpected incidents and
emergency.

7. The apparatus used for the experiments must be cleaned and returned to
the technicians, safely without any damage.

8. Make sure, while leaving the lab after the stipulated time, that all the power
connections are switched off.

9. EVALUATIONS:

● All students should go through the lab manual for the experiment to be
carried out for that day and come fully prepared to complete the experiment
within the prescribed periods. Student should complete the lab record work
within the prescribed periods.

● Students must be fully aware of the core competencies to be gained by


doing experiment/exercise/programs.

● Students should complete the lab record work within the prescribed periods.

● The following aspects will be assessed during every exercise, in every lab
class and marks will be awarded accordingly
● Preparedness, conducting experiment, observation, calculation, results,
record presentation, basic understanding and answering for viva
questions.
LIST OF EXPERIMENTS

Bloom’s Relevance Page


[Link] Experiments Name
level to COs No
1. Analyze CO1
Create a web page with the
following using HTML.
• To embed an image map in a
web page.
• To fix the hot spots.
• Show all the related information
when the hot spots are clicked.
2. Analyze Create a web page with all types of CO2
Cascading style sheets.
3. Analyze Client Side Scripts for Validating Web CO2
Form Controls using DHTML.
CO3
Installation of Apache Tomcat web
4. Analyze server.

5. Write programs in Java using Servlets: CO3


Understand
● To invoke servlets from HTML forms.
● Session Tracking.
Write programs in Java to create three- CO4
6 Understand tier applications using JSP and
Databases
● For conducting on-line examination.
● For displaying student mark list.
Assume that student information is
available in a database
which has been stored in a database
server
7 CO5
Programs using XML – Schema –
Analyze
XSLT/XSL.
COURSE OUTCOME:
CO1 Construct a basic website using HTML and Cascading Style Sheets

CO2 Build dynamic web page with validation using Java Script objects and by
applying different event handling mechanisms.
CO3 Develop server side programs using Servlets and JSP

CO4 Construct simple web pages in PHP and to represent data in XML
format
CO5 Develop interactive web applications.

Program
Outcomes
Course
Outcomes
PO PO PO PO PO PO PO PO PO PO PO PO PSO PSO- PSO-
1 2 3 4 5 6 7 8 9 10 11 12 -1 2 3
3 2 3 3 3 - - - 1 3 3 1 3 2 3
CO1

2 2 2 1 2 - - - 2 2 1 3 2 2 2
CO2
- - - 1 2 1
CO3 1 1 3 2 3 1 2 1 1
- - - 2 2 2
CO4 2 3 3 1 2 3 1 2 2
- - - 1 1 2
CO5 1 2 3 2 2 2 1 3 1
- - - 1.8 1.8 2
AVG 1.8 2 2.8 1.8 2.4 2.8 1.8 2 1.6
LIST OF EXPERIMENTS

SI.
Experiments Name Date Marks Signature
No
/ Time
1.
Create a web page with the
following using HTML.
• To embed an image map in a
web page.
• To fix the hot spots.
• Show all the related
information when the hot spots
are clicked.
2. Create a web page with all types of
Cascading style sheets.
3. Client Side Scripts for Validating Web
Form Controls using DHTML.
4. Installation of Apache Tomcat web
server.

Write programs in Java using Servlets:


5.
● To invoke servlets from HTML
forms.
● Session Tracking.
Write programs in Java to create
6 three-tier applications using JSP and
Databases
● For conducting on-line examination.
● For displaying student mark list.
Assume that student information is
available in a database
which has been stored in a database
server
Programs using XML – Schema –
7 XSLT/XSL.
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

LABORATORY

CCS375 WEB TECHNOLOGIES Laboratory

YEAR /SEMESTER : II/III

DEPARTMENT : COMPUTER SCIENCE AND ENGINEERING

ACADEMIC YEAR : 20…. – 20….

REGULATION : 2021
CCS375 WEB TECHNOLOGIES Laboratory

GENERAL INSTRUCTION

The following instructions should be strictly followed by


the students in the strength of Materials Laboratory.

1. All the students are expected to come to the lab, with shoe, uniform
etc., whenever they come for the laboratory class.

2. For each lab class, all the students are expected to come with
observation note book, record note book, pencil, eraser, sharpener,
scale, divider, graph sheets, French curve etc.

3. While coming to each laboratory class, students are expected to


come observation note book prepared for the class.

4. All the students are expected to complete their laboratory work


including calculations and get it corrected in the laboratory class
itself.

5. While coming to the next lab classes are expected to submit


the record note for correction.

6. All the equipments, tools accessories and expensive. Therefore,


students are expected to handle the instruments with utmost care
during the experiment.

7. The tools and accessories required for conducting the


experiments can be obtained from the technician and the same
should be returned as soon as the experiment over.

8. Breakage amount will be collected from the student(S) for


causing damage to the instruments / equipments due to wrong
operation or carelessness.
INDEX

Page
S. No NAME OF THE EXPERIMENTS No
Create a webpage with the following using HTML.
 To embed an image map in a webpage.
1.  To fix the hot spots. 1
 Show all the related information when the hotspots are clicked.

2. Create a webpage with all types of Cascading style sheets 8

3. Client Side Scripts for Validating Web Form Controls using DHTML. 10

4. Installation of Apache Tomcat web server. 15

5. Write programs in Java using Servlets:

i. To invoke servlets from HTML forms 19

ii. Session Tracking 22

6. Write programs in Java to create three-tier applications using JSP


and Databases
i. For conducting on-line examination 26

ii. For displaying student mark list. Assume that student information is
32
available in a database which has been stored in a database server

7. Programs using XML – Schema – XSLT/XSL 35

ii
CCS375 WEB TECHNOLOGIES LABORATORY
OBJECTIVES
 To understand different Internet Technologies
 To learn java-specific web services architecture
 To Develop web applications using frameworks

LIST OF EXPERIMENTS
1. Create a web page with the following using HTML.

To embed an image map in a web page.

To fix the hot spots.

Show all the related information when the hot spots are clicked.
2. Create a web page with all types of Cascading style sheets.
3. Client Side Scripts for Validating Web Form Controls using DHTML.
4. Installation of Apache Tomcat web server.
5. Write programs in Java using Servlets:

To invoke servlets from HTML forms.

Session Tracking.
6. Write programs in Java to create three-tier applications using JSP and Databases

For conducting on-line examination.

For displaying student mark list. Assume that student information
is available in a databasewhich has been stored in a database server.
7. Programs using XML – Schema – XSLT/XSL.

TOTAL: 30 PERIODS
OUTCOMES:
At the end of the course, the student should be able to
CO1: Construct a basic website using HTML and Cascading Style Sheets
CO2: Build dynamic web page with validation using Java Script objects and by
applying differentevent handling mechanisms.
CO3: Develop server side programs using Servlets and JSP.
CO4: Construct simple web pages in PHP and to represent data in XML
format.
CO5: Develop interactive web applications.

iii
[Link] CREATING A WEB PAGE USING IMAGE MAP
DATE :

AIM: To create a webpage with the following using HTML:


i) To embed an image map in a webpage.
ii) To fix the hotspots.
iii) Show all the related information when the hot spots arec licked.

ALGORITHM:
Step 1: Open notepad and type the HTML coding for homepage home. Html which has
an image map using<MAP>tag and create some hotspots
Step 2: Hotspots are created by including a link at required coordinate position using
<a> tag which directs to its corresponding web pages
Step 3: Write the coding for all the link web pages
Step 4: Run the home. Html in suitable web browser
Step 5: Display output.

PROGRAM:

[Link]
<html>
<head>
<title>Home-StatesofIndia!!!</title>
</head>
<bodybgcolor="gold">
<h1><u><center>RepublicofIndia</center></u></h1>
<p>
IndiaistheSeventhLargestcountryintheworldbygeographicalare
a,thesecondmostPopulouscountrywithover1.3billionpeople,Ind
iaisavastSouthAsiancountrywithdiverseterrain–
fromHimalayanpeakstoIndianOceancoastline–
andhistoryreachingback5millennia..Indiaisafederalconstitutionalrepublicwithaparliamentaryde
mocracyconsistingof28states and7Union Territories.</p>
<center>
<imgalign="center"width="275"height="290"alt="India"src="[Link]"usemap="#indi
a"ismap="ismap">

1
<mapname="india">
<areashape="circle"coords="100,200,10"href="[Link]"alt="Learnabout
andra">
<areashape="circle"coords="70,275,10"href="[Link]"alt="Learnaboutkerala">
<areashape="circle"coords="70,210,20"href="[Link]"alt="Learnaboutkarnata
ka">
<areashape="circle"coords="100,250,20"href="[Link]"alt="Learnabouttamiln
adu">
</map></center>
<h2>Features</h2>
<ul>
<li><b>Population</b>-133.92crores(2019).
<li><b>Capital</b>-NewDelhi
<li><b>LargestCity</b>-Mumbai
<li><b>Currency</b>-IndianRupee
<li><b>TimeFormat</b>-IST(UTC+5:30)
<li><b>NationalSport</b>-Hockey
<li><b>CurrentPM</b>-NarendraModi
<li><b>CurrentPresident</b>-PranabMukherjee
</li>
</ul>
<h2><b>Toviewdetailsofsouthernstatespleaseclickonthespecifiedareainthemap!</b>
</h2>
</body>
</html>
[Link]
<html>
<head><title>TamilNadu-India</title></head>
<bodybgcolor="palegreen">
<h1><center>TamilNadu</center></h1>
<h3>[Link]
inthesouthernmostpartoftheIndianPeninsulaand
ItisborderedbytheStatesofPuducherry,Kerala,Karnataka,AndhraPradesh
</h3><h3>
<ul>
2
<li>Districts<i>-37</i>
<li>CapitalCity<i>-Chennai</i>
<li>LargestCity<i>-Chennai</i>
<li>Governor<i>-BanwarilalPurohit</i>
<li>ChiefMinister<i>-Palanisamy</i>
<li>Population<i>-80,351,195</i>
<li>Touristspots<i>-
Mamallapuran,Ooty,Kodaikanal,Marina,MuduraiMeenakshiAmmanTem
ple,Thanjavuretc.,</i>
</ul>
<ahref="[Link]">back</a>
</body>
</html>

[Link]
<html>
<head><title>AndhraPradesh-India</title></head>
<bodybgcolor="tan">
<h1><center>AndhraPradesh</center></h1>
<h3>A.P.,[Link]'sfourthl
argeststatebyareaandfifthlargestbypopulation.</h3>
<h3>
<ul>
<li>Districts<i>-13</i>
<li>CapitalCity<i>-Hyderabad</i>
<li>LargestCity<i>-Hyderabad</i>
<li>Governor<i>-BISWABHUSANHARICHARAN</i>
<li>ChiefMinister<i>-[Link]</i>
<li>Population<i>-91,103,010</i>
<li>Touristspots<i>-
TirumalaTirupati,Guntur,GolcondaFort,Chandragiri,Arakuvalley,F
alaknumaPalaceetc.,</i>
</ul>
<ahref="[Link]">back</a>

3
</body> </html>

[Link]
<html>
<head><title>Karnataka-India</title></head>
<bodybgcolor="wheat">
<h1><center>Karnataka</center></h1>
<h3> <ul>
<li>Districts<i>-30</i>
<li>CapitalCity<i>-Bangalore</i>
<li>LargestCity<i>-Bangalore</i>
<li>Governor<i>-VajubhaiVala</i>
<li>ChiefMinister<i>-[Link]</i>
<li>Population<i>- 68,308,304</i>
<li>Touristspots<i>-GolGumbaz,MysorePalace,KeshavaTempleetc.,</i>
</ul>
</h3>
<ahref="[Link]">back</a>
</body>
</html>

[Link]
<html>
<head><title>Kerala-India</title></head>
<bodybgcolor="indianred">
<h1><center>Kerala</center></h1>
<h3>
<ul>
<li>Districts<i>-14</i>
<li>CapitalCity<i>-Thiruvanandapuram</i>
<li>LargestCity<i>-Thiruvanandapuram</i>
<li>Governor<i>-ARIFMOHAMMADKHAN</i>
<li>ChiefMinister<i>-PINARAYIVIJAYAN</i>
<li>Population<i>-34,545,868</i>
<li>Touristspots<i>-
4
EdakkalCaves,Palayur,KovalamBeach,Munnar,Kochi,Alapuzhaetc.,</i>
</ul>
<ahref="[Link]">back</a>
</h3>
</body>
</html>

OUTPUT:

5
Result :
Thus a web page with given specifications was created and its output was
verified

6
[Link]: 2 CREATING A WEBPAGE WITH CASCADING STYLE SHEET
DATE :
AIM:

To create a webpage with the following using html to embedded the style sheet

ALGORITHM:

Step1: Create html file with the style tag, inside head tag.

Step2: Set the style such as font-family, font-size, color, left etc, for the heading

h1,h2,…h6 and respectively.

Step3: Close the head tag.

Step4: Specify the heading and information required inside the body tag.

Step5: Close the opened tag.

PROGRAM:

<! DOCTYPE html PUBLIC"-////W3C//DTD XHTML 1.0


TRANSTION//EN"[Link] [Link]>

<html xmlns="[Link]
<head>
<title>Embedded style sheet</title>
<style type="text/css">h1
{
font-family:arial;
color:green;
}
h2
{
font-family:arial;
color:red; left:20px
}
h3
{

7
font-family:arial;
color:blue;
}
p
{
font-sise:14pt;
font-family:verdana
}
</style>
</head>
<body>
<h1>
<center>This is created using embedded style sheet
</center>
</h1>
<h2>This line is allingned left and red colored;
</h2>
<p>
The embedded style sheet is the most commonly used style sheet
This paragragh is return in verdana font with font size of 14.
</p>
<h3>
This is a blue <a href="[Link]">colored</a> line
</h3>
</body>
</html>

OUTPUT:

RESULT: Thus creation of an webpage using cascading style sheet has been developed
successfully.

8
[Link] :3 CLIENT SIDE SCRIPTS for validating web form control using DHTML
DATE:
AIM:

To develop a program for validating web form control using DHTML.


ALGORITHM:

Step1:Start the program.


Step2: Define the title within the tag.
Step3: Give the script type within the script tag.
Step4: Validate each and every column as the box with the if condition.
Step5: If empty value are given or the block term are next then it is verified with certain
condition.
Step6:If values is empty then a message is been displayed.
Step7: Form is designed with GUI tool is description.
Step8: All buttons are processed accordingly.
Step9: Stop the program.

PROGRAM:
//[Link]
<html>
<head>
<script
type='text/javascript'>
function formValidator()
{
var
firstname=[Link]('firstname');
var lastname=[Link]('lastname');
var addr=[Link]('addr');
var zip=[Link]('zip');
var
Countries=[Link]('Countries');
var username=[Link]('username');
var email=[Link]('email');
var dd=[Link]('dd');
var
mm=[Link]('mm');
var yyyy=[Link]('yyyy');
var
comment=[Link]('comment');var
password=[Link]('password');
if(isAlphabet(firstname,"Please enter only letters for your First name"))
{
if(isAlphabet(lastname,"Please enter only letters for your Last name"))
{
if(isNumeric(dd,"Please enter a date"))
{
if(madeSelection(mm,"Please Choose"))
{
9
if(isNumeric(yyyy,"Please enter a year"))
{
if(isAlphanumeric(addr,"Enter Numbers and letters only for address"))
{
if(isNumeric(zip,"please enter a valid zip code"))
{
if(madeSelection(Countries,"Please Choose"))
{
if(lengthRestriction(username,6,8))
{
if(isAlphanumeric(password,"Enter Numbers and letters only for password"))
{
if(emailValidator(email,"Please enter a valid email address"))
{
if(notEmpty(comment,"Please fill the comment"))
{
[Link]("<b><i>Thank's for submitting
your details</i></b>");alert("Successful Entry!!");
return true;
}}}}}}}}}}}}
return false;
}
function notEmpty(elem,helperMsg)
{
if([Link]==0)
{
alert(helperMsg)
;[Link]();
return false;
}
return true;
}
function isNumeric(elem,helperMsg)
{
var numericExpression=/^[0-9]+$/;
if([Link](numericExpression))
{
return true;
}
else
{
alert(helperMsg)
;[Link]();
return false;
}
}
function isAlphabet(elem,helperMsg)
{
var alphaExp=/^[a-zA-Z]+$/;
if([Link](alphaExp)
)
{
1
return true;
}
else
{
alert(helperMsg);
[Link]()
;return false;
}
}
function isAlphanumeric(elem,helperMsg)
{
var alphaExp=/^[0-9, a-z a-z, 0-9, A-Z A-Z, - 0-9 .
]+$/;if([Link](alphaExp))
{
return true;
}
else
{
alert(helperMsg)
;[Link]();
return false;
}
}
function lengthRestriction(elem,min,max)
{
var unput=[Link];
if([Link]>=min&&[Link]<=max)
{
return true;
}
else
{
alert("Please enter between "+min+" and
"+max+" charactters");[Link]();
return false;
}
}
function madeSelection(elem,helperMsg)
{
if([Link]=="Please Choose")
{
alert(helperMsg)
;[Link]();
return false;
}
else
{
return true;
}
}
function emailValidator(elem,helperMsg)
{
1
var emailExp=/^[0-9 a-z . a-z 0-9]+\@[a-z]+\.[a-
z]{2,4}$/;if([Link](emailExp))
{
return true;
}
else
{
alert(helperMsg)
;[Link]();
return false;
}
}
</script>
<h1><center><b><font color="#347235">Please
Enter YourDetails</font></b></center></h1>
</head>
<body bgcolor="LIGHTGREEN">
<hr>
<form onsubmit='return formValidator()' height="50%">
<table height="50%" border="3pt" align="center">
<tr><td><b><font color="#347235">First
Name:</font></b></td><td><inputtype='text'
id='firstname'/></td></tr><br />
<tr><td><b><font color="#347235">Last
Name:</font></b></td><td><inputtype='text' id='lastname'/></td></tr><br
/>
<tr><td><b><font color="347235">Date of
Birth(dd/mm/yyyy):</font></b></td><td><input
type='text' id='dd' />
<select id='mm'>
<option>Please Choose</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<input type='text' id='yyyy' /></td></tr><br />

<tr><td><b><font
color="#347235">Address:</font></b></td><td><inputtype='text'
id='addr'/></td></tr><br />
<tr><td><b><font color="#347235">Zip
code:</font></b></td><td><inputtype='text' id='zip'/></td></tr><br />
<tr><td><b><font
1
color="#347235">Countries:</font></b></td><td><selectid='Countries'>
<option>Please Choose</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="America">America</option>
<option value="India">India</option>
<option value="Tanzania">Tanzania</option>
<option value="Zimbabwe">Zimbabwe</option>
<option value="Switzerland">Switzerland</option>
</select></td></tr><br />
<tr><td><b><font color="#347235">Username(6-8
characters):</font></b></td><td><input type='text'
id='username'
/></td></tr><br />
<tr><td><b><font
color="#347235">Password:</font></b></td><td><inputtype='password'
id='password' /></td></tr><br />
<tr><td><b><font
color="#347235">Email:</font></b></td><td><inputtype='text'
id='email' /></td></tr><br />

<tr><td><b><font
color="#347235">Comment:</font></b></td><td><textarea
id='comment'cols="20"rows="5"
name="Address"></textarea></td></tr><br />
<tr><td><input type='submit' value='Check Form' /></td></tr>
</table>
</form>
</body></html>

1
OUTPUT:

1
RESULT :
Thus developing client side scripts for validating web from
controls usingDHTML has been verified.

1
[Link] :4 INSTALLING & CONFIGURING TOMCAT - WEBSERVER
DATE:

AIM:

INSTALLING & CONFIGURING TOMCAT WEBSERVER


PROCEDURE:
Step 1: Visit Apache Tomcat home page with a Web browser, and click the "Download" link
under the "Tomcat 7.0.70 Released" section. You will see the"Tomcat 7 Downloads"
page.
Step 2: Click "32-bit Windows zip" link under "Binary Distributions" section. Youwill see the
download file save dialog box.(this supports jdk1.6 kit)
Step 3: Use the "Save file" option to save the download file
"[Link]" to a temporary folder.
Step 4: Unzip "[Link]" to file installation folder“C:\
apache-tomcat-7.0.70”.
Step 5: Try to start Tomcat server by running the "startup" command in acommand
linewindow:
C:\ >cd apache-tomcat-7.0.70\bin
C:\ >cd apache-tomcat-7.0.70\bin>startup
The CATALINA_HOME environment variable is not defined correctlyThis
environment variable is needed to run this program
Step 6: To fix the missing environment variables, CATALINA_HOME,JAVA_HOME &
JRE_HOME,
● Click my computer->right click properties->Select Advance SystemSetting
● In this tab, Click Environment variable
● Click new in User variables for admin
● Enter variable name & Variable value
▪ CATALINA_HOME C:\apache-tomcat-7.0.70
▪ JAVA_HOME C:\Program Files\Java\
▪ JRE_HOME C:\Program Files\Java\jre7
Step 7: Configuring Tomcat
Open “C:\apache-tomcat-7.0.70\conf”
Folder It consist of the following xml
files [Link]
[Link]
Tomcat-
[Link]
[Link]
Open [Link] in notepad & modify default-listings-false to true
Open [Link] & change port number 8080 to any other (8081) if any
application access the same port Open [Link] change reloadable attribute to
true on figuration procedure varies according to the version
1
Step 8: Try to start Tomcat server by running the "startup" command in a command
Line window:

OUTPUT:

RESULT:
Thus the Tomcat server is installed and configured successfully

[Link] : 5 A INVOKING SERVLET FROM HTML FORMS

1
DATE:

AIM:

To write a html program for invoking servlet using html.


ALGORITHM:

Step1: In html program, define the html, head and title tag.

Step2: Then the title is Student Information Form and close the title and head tag.

Step3: Define the body tag inside the body tag create form
and table simultaneously.
Step4: The table consists of following information Roll no, Student
name, Address, Phone no and total marks.
Step5: In the servlet program, import the summary package and create a
own servlet class extends with generic servlet.
Step6: In the service method defined to request and response.
Step7: Create the object and for print writer and get writer()value.
Step8: The enumeration object get the servlet request parameter.
Step9: Create objects for string method and it is displayed another
object valuereceived get parameter of name received and
displayed the value received value.
PROGRAM:
//[Link]
<html>
<head>
<title>Processing get requests with data</title>
</head>
<body>
<form action = "Servlet3" method = "get">
<b><p><label>Enter Your name Please!!
<br />
<input type = "text" name = "firstname" />
<input type = "submit" value = "Submit" />
</label></p></b>
</form>
</body>
</html>

//[Link]
import
[Link];import
[Link];
import [Link];
import
[Link];
import [Link];
import [Link];
import
[Link];

1
public class Servlet3 extends HttpServlet {
protected void doGet(HttpServletRequest
request, HttpServletResponseresponse)
throws ServletException, IOException {
String firstName = [Link](
"firstname"
);[Link]( "text/html" );
PrintWriter out = [Link]();
// send XHTML document to client
// start XHTML
[Link](
"<html>" );
// head section of
[Link](
"<head>" );
[Link]("<title>Processing get requests with data</title>"
);[Link]( "</head>" );
// body section of
[Link](
"<body>" );
[Link]( "<h1>Hello " + firstName + ",<br />"
);[Link]( "Welcome to Servlets!</h1>" );
[Link]( "</body>" );
// end XHTML document
[Link]( "</html>" );
[Link](); // close stream to complete the page
}
public String
getServletInfo() {
return "Short
description";
}
}

1
OUTPUT:

RESULT: Thus the invocation of servlet from HTML from has been
developedsuccessfully.

2
[Link] : 5 B SESSION TRACKING
DATE:

AIM:
To write a html program for invoking servlet using html.
ALGORITHM:

STEP 1: Remove a specific attribute You can delete the value associated with a specific key
by
calling the public void remove Attribute(String name) function.
STEP 2:Delete your whole session. To delete an entire session, use the public void invalidate()
function.
STEP 3:Setting Session Timeout You may set the timeout for a session separately by calling
the
public void set MaxInactiveInterval(int interval) function.
STEP 4:Log the user out On servers that support servlets 2.4, you may use the logout method
to
log the client out of the Web server and invalidate all of the users’ sessions.
STEP 4:[Link] Configuration If you’re using Tomcat, you may set the session timeout in the
[Link] file, in addition to the ways listed above.
PROGRAM:
import [Link].*;
import [Link].*;
import [Link].*;
import [Link].*;

// Extend HttpServlet class


public class GfgSession extends HttpServlet {

public void doGet(HttpServletRequest request,


HttpServletResponse response)
throws ServletException, IOException
{

// Create a session object if it is already not


// created.
HttpSession session = [Link](true);

// Get session creation time.


Date createTime
= new Date([Link]());

// Get last access time of this web page.


Date lastAccessTime
= new Date([Link]());

String title = "Welcome Back to geeksforgeeks";


Integer visitCount = new Integer(0);
String visitCountKey = new String("visitCount");
String userIDKey = new String("userID");
String userID = new String("GFG");
2
// Check if this is new comer on your web page.
if ([Link]()) {
title = "Welcome to GeeksForGeeks";
[Link](userIDKey, userID);
}
else {
visitCount = (Integer)[Link](
visitCountKey);
visitCount = visitCount + 1;
userID
= (String)[Link](userIDKey);
}
[Link](visitCountKey, visitCount);

// Set response content type


[Link]("text/html");
PrintWriter out = [Link]();

String docType
= "<!doctype html public \"-//w3c//dtd html 4.0 "
+ "transitional//en\">\n";

[Link](
docType + "<html>\n"
+ "<head><title>" + title + "</title></head>\n"
+

"<body bgcolor = \"#f0f0f0\">\n"


+ "<h1 align = \"center\">" + title + "</h1>\n"
+ "<h2 align = \"center\">Gfg Session Information</h2>\n"
+ "<table border = \"1\" align = \"center\">\n"
+
"<tr bgcolor = \"#949494\">\n"
+ " <th>Session info</th><th>value</th>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>id</td>\n"
+ " <td>" + [Link]() + "</td>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>Creation Time</td>\n"
+ " <td>" + createTime + " </td>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>Time of Last Access</td>\n"
2
+ " <td>" + lastAccessTime + "</td>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>User ID</td>\n"
+ " <td>" + userID + "</td>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>Number of visits</td>\n"
+ " <td>" + visitCount + "</td>"
+ "</tr>\n"
+ "</table>\n"
+ "</body>"
+ "</html>");
}
}
File: [Link]

 XML

<web-app>
<servlet>
<servlet-name>GfgSession</servlet-name>
<servlet-class>GfgSession</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>GfgSession</servlet-name>
<url-pattern>/GfgSession</url-pattern>
</servlet-mapping>
</web-app>
Compile the servlet SessionTrack described above and add it to the [Link] file. When you
run [Link] for the first time, you should get the
following result:

Output:

2
If we try to run the same servlet again, we will get the following result.

RESULT:
Thus the invocation of servlet in session tracking been developed successfully.

2
[Link] : 6 A ONLINE EXAMINATION
DATE:

AIM:
To write a java servlet program to conduct online examination and to display

studentmark list available in a database.

ALGORITHM:

Step1: Create a html file with form tag.

Step2: The form tag action=”[Link]

Step3: Create a two textbox(name & seat number).

Step4: The 5 question are defined into true or false model and close the all tags.

Step5: Import the necessary packages and declare class, class name in exam.

Step6: Declare the connection, statement and result set object.

Step7: Use the deposit () for check the connection in JDBC:ODBC driver.

Step8: The data are inserting into corresponding table.

Step9: The execute update () are update the database.

Step10: Display the table in after html file

compilation.

PROGRAM:
//[Link]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome to Online Examination!!!!</title>
</head>
<body>
Welcome to Online Examination!!!!
<form action="exam" method="get">
<label><p> Enter Your name Please!!<br/> <input
type="text"name="name"/>
<br/>
<input type="submit" name="SUBMIT"/>
</p></label>
</form>

2
</body>
</html>
//[Link]
import [Link];import
[Link];
import [Link]; import
[Link];import
[Link];
import [Link]; import
[Link];public class
exam extends HttpServlet {
protected void doGet(HttpServletRequest
request, HttpServletResponseresponse)
throws ServletException, IOException {
[Link]("text/html");
PrintWriter out=[Link]();
String
name=[Link]("name");
[Link]("<html>");
[Link]("<head>");
[Link]("<title>Online Examination</title>");
[Link]("</head>");
[Link]("<body bgcolor=PINK>");
[Link]("<h2 align=center>Online Examination</h2><hr>");
[Link]("<h3 align=center> Welcome
Mr."+name+"</h3><hr>");[Link]("<h4><u>Terms and
Conditions:</u></h4>"); [Link]("<ul type=disc>");
[Link]("<li>The Paper consists a set of five questions.</li>");
[Link]("<li>Every question consists of two options.</li>");
[Link]("<li>All must be answered</li></ul><hr>");
[Link]("<center><h5><u>Your
Questions</u></h5></center>");[Link]("<hr>");
[Link]("<form method=get action=exam2>");
[Link]("<p>[Link] System is a.................</p>");
[Link]("<input type=radio name=q1
value=0>Hardware");[Link]("<br>");
[Link]("<input type=radio name=q1
value=1>Software");[Link]("<hr>");
[Link]("<p>[Link] of C Language is................</p>");
[Link]("<br>");
[Link]("<input type=radio name=q2
value=0>Dennis Richee");[Link]("<br>");
[Link]("<input type=radio name=q2
value=1>James Thompson");[Link]("<hr>");
[Link]("<p>[Link] of the following is a multitasking,multi
user,multiprocessing);
[Link]("OS........</p>");
[Link]("<br>");
[Link]("<input type=radio name=q3
value=0>MS DOS");[Link]("<br>");
[Link]("<input type=radio name=q3
value=1>Windows NT");[Link]("<hr>");
2
[Link]("<p>[Link] of Computers is.................</p>");
[Link]("<br>");
[Link]("<input type=radio name=q4 value=1>Charles
babbage");[Link]("<br>");
[Link]("<input type=radio name=q4
value=0>Charles Dickson");[Link]("<hr>");
[Link]("<p>[Link] is the current generation of computers
?</p>");[Link]("<br>");
[Link]("<input type=radio
name=q5
value=0>Fifth");[Link]("<br>");
[Link]("<input type=radio
name=q5
value=1>Sixth");[Link]("<hr>");
[Link]("<input type=submit
value=Done>");[Link]("</form>");
[Link]("</body>");
[Link]("</html>");
}
public String getServletInfo()
{ return "A Servlet of
the user";
}
}
//[Link]
import
[Link];import
[Link];
import [Link];
import
[Link];

import [Link];
import [Link];
import
[Link];public
class exam2 extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse
response)
throws ServletException,
IOException {int count=0,j;
[Link]("text/html
");PrintWriter
out=[Link](); String
q1=[Link]("q1");
String

2
q2=[Link]("q2");
String
q3=[Link]("q3");
String
q4=[Link]("q4");
String
q5=[Link]("q5");
if([Link]("1"))
{
count=count+1;
}
if([Link]("1"))
{
count=count+1;
}
if([Link]("1"))
{
count=count+1;
}
if([Link]("1"))
{
count=count+1;
}
if([Link]("1"))
{
count=count+1;
}

[Link]("<html>");
[Link]("<head><title>Examination
Results</title></head>");[Link]("<body>");
[Link]("<h2 align=center<Online Examination</h2><hr>");
[Link]("<h3>Number of Questions answered
correctly:</h3>"+count);if(count>=3)
{
[Link]("<hr><h3>Congrats!!! You Have
Passed!!!</h3><hr>");
[Link]("<h4><b>Try Other Tests!!</b></h4>");
}

else
{
[Link]("<hr><h3>Sorry!!! You Have
Failed!!!</h3><hr>");[Link]("<h4><b>Try
Again:</b></h4>");
}

2
[Link]("</body>");
[Link]("</html>");
}
public String getServletInfo() {
return "A Servlet of the
User";
}
}

OUTPUT:

2
RESULT: Thus the development of program in java to create three tire
applicationusing servlet has been verified successfully.

3
[Link] : 6 B DISPLAYING STUDENT MARKLIST USING JSP
DATE:

AIM:
To create a three tier application for displaying student mark list using JSP and database.

ALGORITHM:
1. Design the HTML page ([Link]) with the following
a) Create a form to get the input (Register Number) from the user.
b) Set the URL of the server ([Link]) as the value of the action attribute.
c) Use submit button to invoke the server and send the form data to the server.
2. Create the JSP file with the following
a) Read the parameter value (Register Number) from the form by using the
method getParameter().
b) Server retrieves the details from the database table with respect to the form input.
c) Server displays the mark list to the client as the response.

[Link]:

<%@ page contentType="text/html" language="java" import="[Link].*"%>


<html>
<head>
<title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style></head><body>
<h2>EXAMINATION RESULT</h2><hr/>
<%
String str=[Link]("regno");
[Link]("[Link]");
Connection con=[Link]("jdbc:odbc:markDS");
Statement stmt=[Link]();
ResultSet rs=[Link]("SELECT*FROM markTab WHERE rno="+str);
while([Link]())
{
%>
Register No:<%=[Link](1)%><br/>
Name:<%=[Link](2)%><br/>
<table border="1">
<th>SUBJECT</th><th>Mark</th>
<tr><td>Network Programming and Management</td><td><%=[Link](3)%></td></tr>
<tr><td>Object Oriented Analysis and Design</td><td><%=[Link](4)%></td></tr>
<tr><td>Cryptography and Network Security</td><td><%=[Link](5)%></td></tr>
<tr><td>Embedded Systems</td><td><%=[Link](6)%></td></tr>
<tr><td>Web Technology</td><td><%=[Link](7)%></td></tr>
<tr><td>Software Requirement and Engineering</td><td><%=[Link](8)%></td></tr>
</table>
<%}
%>
<br/>
<a href="[Link]">Back</a>
</body></html>
3
[Link]:
<html>
<head>
<title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style>
</head>
<body>
<h2>EXAMINATION RESULT</h2><hr/>
<form name="f1" method"GET" action="[Link]">
Enter Your [Link]:
<input type="text" name="regno"/><br/><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="SUBMIT"/>
</form>
</body>
<html>

DATABASE

3
OUTPUT SCREENSHOTS

RESULT:Thus the creation of a three tier application for displaying student


mark list using JSP and database has been verifiedsuccessfully.

3
[Link] : 7 XML SCHEMA FOR STUDENT DETAILS
DATE:

AIM:
To write a program for implementing student information using XML & XSL.

ALGORITHM:

Step1:The XML document reference to the XSL document.


Step2: The create the student information in the student tag and insert the same
information about the student.
Step3:Close all opened tags.
Step4:In XSL document create a html file include the student information in table format.
Step5:Close the necessary tags.
PROGRAM:
//[Link]
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="[Link]"?>
<!DOCTYPE student SYSTEM "[Link]">
<students>
<student>
<sno>801041</sno>
<sname>[Link]</sname>
<dob>05/081991</dob>
<address>Neyveli</address>
<m1>80</m1>
<m2>90</m2>
<m3>95</m3>
</student>
<student>
<sno>801049</sno>
<sname>[Link]</sname>
<dob>22/07/1990</dob>
<address>Pondicherry</address>
<m1>90</m1>
<m2>95</m2>
<m3>80</m3>
</student>
<student>
<sno>801037</sno>
<sname>[Link]</sname>
<dob>21/01/1991</dob>
<address>Kanyakumari</address>
<m1>80</m1>
<m2>90</m2>
<m3>95</m3>
</student>
</students>

3
//[Link]
Student { [Link]:#aabbcc;width:100%;} Sno {
display:block; color:GREEN; [Link]:25pt; } Sname {
display:block; color:BLACK; [Link]:20pt; }Dob {
display:block; color:BLUE; [Link]:15pt; } Address {
display:block; color:BLUE; [Link]:15pt; }m1 {
display:block; color:BLUE; [Link]:15pt; }
m2 { display:block; color:BLUE; [Link]:15pt; }m3
{ display:block; color:BLUE; [Link]:15pt;}
//[Link]`
<?xml version="1.0"?>
<!ELEMENT students (student+)>
<!ELEMENT student (sno,sname,dob,address,m1,m2,m3)>
<!ELEMENT sno (#PCDATA)>
<!ELEMENT sname (#PCDATA)>
<!ELEMENT dob (#PCDATA)>
<!ELEMENT address (#PCDATA)>
<!ELEMENT m1 (#PCDATA)>
<!ELEMENT m2 (#PCDATA)>
<!ELEMENT m3 (#PCDATA)>
OUTPUT:

RESULT: Thus the creation of XSL document using Xml has been verified successfully

You might also like