SlideShare a Scribd company logo
i
PRATHYUSHA ENGINEERING COLLEGE
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
LAB MANUAL
for
CCS375 – WEB TECHNOLOGIES LABORATORY
(Regulation 2021 – V Semester)
ACADEMIC YEAR: 2023-2024
(Odd Semester)
PREPARED BY,
Ms. SHIMONA E
AP - CSE
ii
INDEX
S. No NAME OF THE EXPERIMENTS
Page
No
1.
Create a webpage with the following using HTML.
• To embed an image map in a webpage.
• To fix the hot spots.
• Show all the related information when the hotspots are clicked.
1
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
available in a database which has been stored in a database server
32
7. Programs using XML – Schema – XSLT/XSL 35
iii
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.
1
EX.NO:1 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:
home.html
<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="IndiaMap.jpg"usemap="#indi
a"ismap="ismap">
2
<mapname="india">
<areashape="circle"coords="100,200,10"href="ANDHRAPRADESH.html"alt="Learnabout
andra">
<areashape="circle"coords="70,275,10"href="KERALA.html"alt="Learnaboutkerala">
<areashape="circle"coords="70,210,20"href="KARNATAKA.html"alt="Learnaboutkarnata
ka">
<areashape="circle"coords="100,250,20"href="TAMILNADU.html"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>
Tamilnadu.html
<html>
<head><title>TamilNadu-India</title></head>
<bodybgcolor="palegreen">
<h1><center>TamilNadu</center></h1>
<h3>isoneofthe29statesofIndia.ItscapitalandlargestcityisChennai.TamilNadulies
inthesouthernmostpartoftheIndianPeninsulaand
ItisborderedbytheStatesofPuducherry,Kerala,Karnataka,AndhraPradesh
</h3><h3>
<ul>
3
<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="Home.html">back</a>
</body>
</html>
andhrapradesh.html
<html>
<head><title>AndhraPradesh-India</title></head>
<bodybgcolor="tan">
<h1><center>AndhraPradesh</center></h1>
<h3>A.P.,isastatesituatedonthesoutheasterncoastofIndia.ItisIndia'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>-Y.S.JAGANMOHANREDDY</i>
<li>Population<i>-91,103,010</i>
<li>Touristspots<i>-
TirumalaTirupati,Guntur,GolcondaFort,Chandragiri,Arakuvalley,F
alaknumaPalaceetc.,</i>
</ul>
<ahref="Home.html">back</a>
4
</body> </html>
Karnataka.html
<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>-B.S.YEDIYURAPPA</i>
<li>Population<i>- 68,308,304</i>
<li>Touristspots<i>-GolGumbaz,MysorePalace,KeshavaTempleetc.,</i>
</ul>
</h3>
<ahref="Home.html">back</a>
</body>
</html>
Kerala.html
<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>-
5
EdakkalCaves,Palayur,KovalamBeach,Munnar,Kochi,Alapuzhaetc.,</i>
</ul>
<ahref="Home.html">back</a>
</h3>
</body>
</html>
OUTPUT:
6
Result :
Thus a web page with given specifications was created and its output was
verified
7
EX.NO: 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"http://www.w3.org/TR/html1/DTD/html1 1.dtd>
<html xmlns="http://www.w3org/1999/xhtml">
<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
{
8
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="colorname.html">colored</a> line
</h3>
</body>
</html>
OUTPUT:
RESULT: Thus creation of an webpage using cascading style sheet has been developed
successfully.
.
9
EX.NO :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:
//Webforms.html
<html>
<head>
<script
type='text/javascript'>
function formValidator()
{
var
firstname=document.getElementById('firstname');
var lastname=document.getElementById('lastname');
var addr=document.getElementById('addr');
var zip=document.getElementById('zip');
var
Countries=document.getElementById('Countries');
var username=document.getElementById('username');
var email=document.getElementById('email');
var dd=document.getElementById('dd');
var
mm=document.getElementById('mm');
var yyyy=document.getElementById('yyyy');
var
comment=document.getElementById('comment');var
password=document.getElementById('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"))
{
10
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"))
{
document.write("<b><i>Thank's for submitting your
details</i></b>");alert("Successful Entry!!");
return true;
}}}}}}}}}}}}
return false;
}
function notEmpty(elem,helperMsg)
{
if(elem.value.length==0)
{
alert(helperMsg)
;elem.focus();
return false;
}
return true;
}
function isNumeric(elem,helperMsg)
{
var numericExpression=/^[0-9]+$/;
if(elem.value.match(numericExpression))
{
return true;
}
else
{
alert(helperMsg)
;elem.focus();
return false;
}
}
function isAlphabet(elem,helperMsg)
{
var alphaExp=/^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)
)
{
11
return true;
}
else
{
alert(helperMsg);
elem.focus()
;return false;
}
}
function isAlphanumeric(elem,helperMsg)
{
var alphaExp=/^[0-9, a-z a-z, 0-9, A-Z A-Z, - 0-9 .
]+$/;if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg)
;elem.focus();
return false;
}
}
function lengthRestriction(elem,min,max)
{
var unput=elem.value;
if(unput.length>=min&&unput.length<=max)
{
return true;
}
else
{
alert("Please enter between "+min+" and "+max+"
charactters");elem.focus();
return false;
}
}
function madeSelection(elem,helperMsg)
{
if(elem.value=="Please Choose")
{
alert(helperMsg)
;elem.focus();
return false;
}
else
{
return true;
}
}
function emailValidator(elem,helperMsg)
{
12
var emailExp=/^[0-9 a-z . a-z 0-9]+@[a-z]+.[a-
z]{2,4}$/;if(elem.value.match(emailExp))
{
return true;
}
else
{
alert(helperMsg)
;elem.focus();
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
13
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>
14
OUTPUT:
15
RESULT :
Thus developing client side scripts for validating web from controls
usingDHTML has been verified.
16
EX.NO :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
"apache-tomcat-7.0.70-windows-x86.zip" to a temporary folder.
Step 4: Unzip "apache-tomcat-7.0.70-windows-x86.zip" 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.70bin
C: >cd apache-tomcat-7.0.70bin>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 FilesJava
▪ JRE_HOME C:Program FilesJavajre7
Step 7: Configuring Tomcat
Open “C:apache-tomcat-7.0.70conf”
Folder It consist of the following xml files
Server.xml
Web.xml
Tomcat-
user.xml
Context.xml
Open web.xml in notepad & modify default-listings-false to true
Open server.xml & change port number 8080 to any other (8081) if any
application access t
h
esame port Open context.xml change reloadable attribute to
true on figurationprocedure varies according to the version
17
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
EX.NO : 5 A INVOKING SERVLET FROM HTML FORMS
18
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
ownservlet 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:
//index.jsp
<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>
//Servlet3.java
import
java.io.IOException;import
java.io.PrintWriter;
import javax.servlet.ServletException;
import
javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
19
public class Servlet3 extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponseresponse)
throws ServletException, IOException {
String firstName = request.getParameter( "firstname"
);response.setContentType( "text/html" );
PrintWriter out = response.getWriter();
// send XHTML document to client
// start XHTML
documentout.println(
"<html>" );
// head section of
documentout.println(
"<head>" );
out.println("<title>Processing get requests with data</title>"
);out.println( "</head>" );
// body section of
documentout.println(
"<body>" );
out.println( "<h1>Hello " + firstName + ",<br />"
);out.println( "Welcome to Servlets!</h1>" );
out.println( "</body>" );
// end XHTML document
out.println( "</html>" );
out.close(); // close stream to complete the page
}
public String
getServletInfo() {
return "Short
description";
}
}
OUTPUT:
20
RESULT: Thus the invocation of servlet from HTML from has been
developedsuccessfully.
EX.NO : 5 B SESSION TRACKING
21
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:web.xml Configuration If you’re using Tomcat, you may set the session timeout in the
web.xml file, in addition to the ways listed above.
PROGRAM:
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
// 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 = request.getSession(true);
// Get session creation time.
Date createTime
= new Date(session.getCreationTime());
// Get last access time of this web page.
Date lastAccessTime
= new Date(session.getLastAccessedTime());
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");
22
// Check if this is new comer on your web page.
if (session.isNew()) {
title = "Welcome to GeeksForGeeks";
session.setAttribute(userIDKey, userID);
}
else {
visitCount = (Integer)session.getAttribute(
visitCountKey);
visitCount = visitCount + 1;
userID
= (String)session.getAttribute(userIDKey);
}
session.setAttribute(visitCountKey, visitCount);
// Set response content type
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String docType
= "<!doctype html public "-//w3c//dtd html 4.0 "
+ "transitional//en">n";
out.println(
docType + "<html>n"
+ "<head><title>" + title + "</title></head>n"
+
"<body bgcolor = "#f0f0f0">n"
+ "<h1 align = "center">" + title + "</h1>n"
+ "<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>" + session.getId() + "</td>"
+ "</tr>n"
+
"<tr>n"
+ " <td>Creation Time</td>n"
+ " <td>" + createTime + " </td>"
+ "</tr>n"
+
"<tr>n"
+ " <td>Time of Last Access</td>n"
23
+ " <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: web.xml
• 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 web.xml file. When you
run http://localhost:8080/SessionTrackingGfg/GfgSession for the first time, you should get the
following result:
Output:
24
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.
25
EX.NO : 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=”http://localhost:8080/example/servlet/exam”.
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:
//index.jsp
<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>
</body>
</html>
26
//exam.java
import java.io.IOException;import
java.io.PrintWriter;
import javax.servlet.ServletException; import
javax.servlet.annotation.WebServlet;import
javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest; import
javax.servlet.http.HttpServletResponse;public class
exam extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponseresponse)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out=response.getWriter();
String
name=request.getParameter("name");
out.println("<html>");
out.println("<head>");
out.println("<title>Online Examination</title>");
out.println("</head>");
out.println("<body bgcolor=PINK>");
out.println("<h2 align=center>Online Examination</h2><hr>");
out.println("<h3 align=center> Welcome
Mr."+name+"</h3><hr>");out.println("<h4><u>Terms and
Conditions:</u></h4>"); out.println("<ul type=disc>");
out.println("<li>The Paper consists a set of five questions.</li>");
out.println("<li>Every question consists of two options.</li>");
out.println("<li>All must be answered</li></ul><hr>");
out.println("<center><h5><u>Your
Questions</u></h5></center>");out.println("<hr>");
out.println("<form method=get action=exam2>");
out.println("<p>1.Operating System is a .................</p>");
out.println("<input type=radio name=q1
value=0>Hardware");out.println("<br>");
out.println("<input type=radio name=q1
value=1>Software");out.println("<hr>");
out.println("<p>2.Developer of C Language is ................</p>");
out.println("<br>");
out.println("<input type=radio name=q2 value=0>Dennis
Richee");out.println("<br>");
out.println("<input type=radio name=q2 value=1>James
Thompson");out.println("<hr>");
out.println("<p>3.Which of the following is a multitasking,multi
user,multiprocessing);
out.println("OS........ </p>");
out.println("<br>");
out.println("<input type=radio name=q3 value=0>MS
DOS");out.println("<br>");
out.println("<input type=radio name=q3 value=1>Windows
NT");out.println("<hr>");
27
out.println("<p>4.Father of Computers is................. </p>");
out.println("<br>");
out.println("<input type=radio name=q4 value=1>Charles
babbage");out.println("<br>");
out.println("<input type=radio name=q4 value=0>Charles
Dickson");out.println("<hr>");
out.println("<p>5.What is the current generation of computers
?</p>");out.println("<br>");
out.println("<input type=radio name=q5
value=0>Fifth");out.println("<br>");
out.println("<input type=radio name=q5
value=1>Sixth");out.println("<hr>");
out.println("<input type=submit
value=Done>");out.println("</form>");
out.println("</body>");
out.println("</html>");
}
public String getServletInfo()
{ return "A Servlet of the
user";
}
}
//exam2.java
import
java.io.IOException;import
java.io.PrintWriter;
import javax.servlet.ServletException;
import
javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;public
class exam2 extends HttpServlet {
protected void doGet(HttpServletRequest request,
HttpServletResponse
response)
throws ServletException,
IOException {int count=0,j;
response.setContentType("text/html
");PrintWriter
out=response.getWriter(); String
q1=request.getParameter("q1");
String
q2=request.getParameter("q2");
String
28
q3=request.getParameter("q3");
String
q4=request.getParameter("q4");
String
q5=request.getParameter("q5");
if(q1.equals("1"))
{
count=count+1;
}
if(q2.equals("1"))
{
count=count+1;
}
if(q3.equals("1"))
{
count=count+1;
}
if(q4.equals("1"))
{
count=count+1;
}
if(q5.equals("1"))
{
count=count+1;
}
out.println("<html>");
out.println("<head><title>Examination
Results</title></head>");out.println("<body>");
out.println("<h2 align=center<Online Examination</h2><hr>");
out.println("<h3>Number of Questions answered
correctly:</h3>"+count);if(count>=3)
{
out.println("<hr><h3>Congrats!!! You Have
Passed!!!</h3><hr>");
out.println("<h4><b>Try Other Tests!!</b></h4>");
}
else
{
out.println("<hr><h3>Sorry!!! You Have
Failed!!!</h3><hr>");out.println("<h4><b>Try
Again:</b></h4>");
}
29
out.println("</body>");
out.println("</html>");
}
public String getServletInfo() {
return "A Servlet of the
User";
}
}
OUTPUT:
30
RESULT: Thus the development of program in java to create three tire
applicationusing servlet has been verified successfully.
31
EX.NO : 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 (stud.html) with the following
a) Create a form to get the input (Register Number) from the user.
b) Set the URL of the server (marklist.jsp) 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.
marklist.jsp:
<%@ page contentType="text/html" language="java" import="java.sql.*"%>
<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=request.getParameter("regno");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:markDS");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT*FROM markTab WHERE rno="+str);
while(rs.next())
{
%>
Register No:<%=rs.getObject(1)%><br/>
Name:<%=rs.getObject(2)%><br/>
<table border="1">
<th>SUBJECT</th><th>Mark</th>
<tr><td>Network Programming and Management</td><td><%=rs.getObject(3)%></td></tr>
<tr><td>Object Oriented Analysis and Design</td><td><%=rs.getObject(4)%></td></tr>
<tr><td>Cryptography and Network Security</td><td><%=rs.getObject(5)%></td></tr>
<tr><td>Embedded Systems</td><td><%=rs.getObject(6)%></td></tr>
<tr><td>Web Technology</td><td><%=rs.getObject(7)%></td></tr>
<tr><td>Software Requirement and Engineering</td><td><%=rs.getObject(8)%></td></tr>
</table>
<%}
%>
<br/>
<a href="stud.html">Back</a>
</body></html>
32
stud.HTML:
<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="marklist.jsp">
Enter Your Reg.No:
<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
33
OUTPUT SCREENSHOTS
RESULT: Thus the creation of a three tier application for displaying student
mark list using JSP and database has been verifiedsuccessfully.
34
EX.NO : 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:
//student.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="student.css"?>
<!DOCTYPE student SYSTEM "student.dtd">
<students>
<student>
<sno>801041</sno>
<sname>S.Soundarapandian</sname>
<dob>05/081991</dob>
<address>Neyveli</address>
<m1>80</m1>
<m2>90</m2>
<m3>95</m3>
</student>
<student>
<sno>801049</sno>
<sname>R.Vadivelan</sname>
<dob>22/07/1990</dob>
<address>Pondicherry</address>
<m1>90</m1>
<m2>95</m2>
<m3>80</m3>
</student>
<student>
<sno>801037</sno>
<sname>R.Satheesh</sname>
<dob>21/01/1991</dob>
<address>Kanyakumari</address>
<m1>80</m1>
<m2>90</m2>
<m3>95</m3>
</student>
</students>
35
//student.css
Student { background.color:#aabbcc;width:100%;} Sno {
display:block; color:GREEN; font.size:25pt; } Sname {
display:block; color:BLACK; font.size:20pt; }Dob {
display:block; color:BLUE; font.size:15pt; } Address {
display:block; color:BLUE; font.size:15pt; }m1 {
display:block; color:BLUE; font.size:15pt; }
m2 { display:block; color:BLUE; font.size:15pt; }m3 {
display:block; color:BLUE; font.size:15pt;}
//student.dtd`
<?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

More Related Content

PDF
Web technology practical list
DOCX
Portalimagesstart_here.jpgPortalindex.htmlClasses      .docx
PPTX
cloud_content useful for engineering stu
DOCX
Foundation and PathwaysCOS10020 Creating Web Application.docx
PDF
CAW_Lecture1_03102023.pdf11111111111111111111
PDF
Web programming manual
PPTX
WT Practical List MCA 168jwjsjsisiisie.pptx
DOCX
E-COMMERCE-PPROJECT-REPORT FOR ALL DESIGN AND ASSCESSORIES MAKE A REPORT
Web technology practical list
Portalimagesstart_here.jpgPortalindex.htmlClasses      .docx
cloud_content useful for engineering stu
Foundation and PathwaysCOS10020 Creating Web Application.docx
CAW_Lecture1_03102023.pdf11111111111111111111
Web programming manual
WT Practical List MCA 168jwjsjsisiisie.pptx
E-COMMERCE-PPROJECT-REPORT FOR ALL DESIGN AND ASSCESSORIES MAKE A REPORT

Similar to wt record.pdf web technology lab manual ver useful for reg 21 (20)

PPTX
getting started with java script
PDF
GTU IT Sem4 Internet Techology 3341604
PDF
Intro to mobile web application development
PPT
Rutgers - FrontPage 98 (Advanced)
PDF
Rails Girls - Introduction to HTML & CSS
PPTX
Introduction to asp
PDF
Building Restful Web App Rapidly in CakePHP
DOCX
Internet Programming laboratory -manual.docx
PDF
Rapid Development With CakePHP
PPT
Creating web form
PPT
Creating web form
DOCX
1 Project 2 Introduction - the SeaPort Project seri.docx
DOC
Cis363 a all ilabs devry university
DOC
Cis363 a all ilabs devry university
DOC
Cis363 all i labs devry university
DOC
Cis363 all i labs devry university
PDF
mca-5thSem-curriculum-and-Syllabus-2017-Batch.pdf
PDF
Asp.net web application framework management system.pdf
PDF
A Case studies of common csharp project report.pdf
getting started with java script
GTU IT Sem4 Internet Techology 3341604
Intro to mobile web application development
Rutgers - FrontPage 98 (Advanced)
Rails Girls - Introduction to HTML & CSS
Introduction to asp
Building Restful Web App Rapidly in CakePHP
Internet Programming laboratory -manual.docx
Rapid Development With CakePHP
Creating web form
Creating web form
1 Project 2 Introduction - the SeaPort Project seri.docx
Cis363 a all ilabs devry university
Cis363 a all ilabs devry university
Cis363 all i labs devry university
Cis363 all i labs devry university
mca-5thSem-curriculum-and-Syllabus-2017-Batch.pdf
Asp.net web application framework management system.pdf
A Case studies of common csharp project report.pdf
Ad

Recently uploaded (20)

PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PDF
SEVA- Fashion designing-Presentation.pdf
PDF
Phone away, tabs closed: No multitasking
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
Fundamental Principles of Visual Graphic Design.pptx
PDF
Urban Design Final Project-Site Analysis
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PPTX
An introduction to AI in research and reference management
DOCX
The story of the first moon landing.docx
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
PPT
UNIT I- Yarn, types, explanation, process
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPTX
HPE Aruba-master-icon-library_052722.pptx
PDF
The Advantages of Working With a Design-Build Studio
Tenders & Contracts Works _ Services Afzal.pptx
YOW2022-BNE-MinimalViableArchitecture.pdf
BRANDBOOK-Presidential Award Scheme-Kenya-2023
pump pump is a mechanism that is used to transfer a liquid from one place to ...
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
SEVA- Fashion designing-Presentation.pdf
Phone away, tabs closed: No multitasking
AD Bungalow Case studies Sem 2.pptxvwewev
Fundamental Principles of Visual Graphic Design.pptx
Urban Design Final Project-Site Analysis
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
An introduction to AI in research and reference management
The story of the first moon landing.docx
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
UNIT I- Yarn, types, explanation, process
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
YV PROFILE PROJECTS PROFILE PRES. DESIGN
HPE Aruba-master-icon-library_052722.pptx
The Advantages of Working With a Design-Build Studio
Ad

wt record.pdf web technology lab manual ver useful for reg 21

  • 1. i PRATHYUSHA ENGINEERING COLLEGE DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING LAB MANUAL for CCS375 – WEB TECHNOLOGIES LABORATORY (Regulation 2021 – V Semester) ACADEMIC YEAR: 2023-2024 (Odd Semester) PREPARED BY, Ms. SHIMONA E AP - CSE
  • 2. ii INDEX S. No NAME OF THE EXPERIMENTS Page No 1. Create a webpage with the following using HTML. • To embed an image map in a webpage. • To fix the hot spots. • Show all the related information when the hotspots are clicked. 1 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 available in a database which has been stored in a database server 32 7. Programs using XML – Schema – XSLT/XSL 35
  • 3. iii 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.
  • 4. 1 EX.NO:1 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: home.html <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="IndiaMap.jpg"usemap="#indi a"ismap="ismap">
  • 5. 2 <mapname="india"> <areashape="circle"coords="100,200,10"href="ANDHRAPRADESH.html"alt="Learnabout andra"> <areashape="circle"coords="70,275,10"href="KERALA.html"alt="Learnaboutkerala"> <areashape="circle"coords="70,210,20"href="KARNATAKA.html"alt="Learnaboutkarnata ka"> <areashape="circle"coords="100,250,20"href="TAMILNADU.html"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> Tamilnadu.html <html> <head><title>TamilNadu-India</title></head> <bodybgcolor="palegreen"> <h1><center>TamilNadu</center></h1> <h3>isoneofthe29statesofIndia.ItscapitalandlargestcityisChennai.TamilNadulies inthesouthernmostpartoftheIndianPeninsulaand ItisborderedbytheStatesofPuducherry,Kerala,Karnataka,AndhraPradesh </h3><h3> <ul>
  • 6. 3 <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="Home.html">back</a> </body> </html> andhrapradesh.html <html> <head><title>AndhraPradesh-India</title></head> <bodybgcolor="tan"> <h1><center>AndhraPradesh</center></h1> <h3>A.P.,isastatesituatedonthesoutheasterncoastofIndia.ItisIndia'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>-Y.S.JAGANMOHANREDDY</i> <li>Population<i>-91,103,010</i> <li>Touristspots<i>- TirumalaTirupati,Guntur,GolcondaFort,Chandragiri,Arakuvalley,F alaknumaPalaceetc.,</i> </ul> <ahref="Home.html">back</a>
  • 7. 4 </body> </html> Karnataka.html <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>-B.S.YEDIYURAPPA</i> <li>Population<i>- 68,308,304</i> <li>Touristspots<i>-GolGumbaz,MysorePalace,KeshavaTempleetc.,</i> </ul> </h3> <ahref="Home.html">back</a> </body> </html> Kerala.html <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>-
  • 9. 6 Result : Thus a web page with given specifications was created and its output was verified
  • 10. 7 EX.NO: 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"http://www.w3.org/TR/html1/DTD/html1 1.dtd> <html xmlns="http://www.w3org/1999/xhtml"> <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 {
  • 11. 8 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="colorname.html">colored</a> line </h3> </body> </html> OUTPUT: RESULT: Thus creation of an webpage using cascading style sheet has been developed successfully. .
  • 12. 9 EX.NO :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: //Webforms.html <html> <head> <script type='text/javascript'> function formValidator() { var firstname=document.getElementById('firstname'); var lastname=document.getElementById('lastname'); var addr=document.getElementById('addr'); var zip=document.getElementById('zip'); var Countries=document.getElementById('Countries'); var username=document.getElementById('username'); var email=document.getElementById('email'); var dd=document.getElementById('dd'); var mm=document.getElementById('mm'); var yyyy=document.getElementById('yyyy'); var comment=document.getElementById('comment');var password=document.getElementById('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")) {
  • 13. 10 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")) { document.write("<b><i>Thank's for submitting your details</i></b>");alert("Successful Entry!!"); return true; }}}}}}}}}}}} return false; } function notEmpty(elem,helperMsg) { if(elem.value.length==0) { alert(helperMsg) ;elem.focus(); return false; } return true; } function isNumeric(elem,helperMsg) { var numericExpression=/^[0-9]+$/; if(elem.value.match(numericExpression)) { return true; } else { alert(helperMsg) ;elem.focus(); return false; } } function isAlphabet(elem,helperMsg) { var alphaExp=/^[a-zA-Z]+$/; if(elem.value.match(alphaExp) ) {
  • 14. 11 return true; } else { alert(helperMsg); elem.focus() ;return false; } } function isAlphanumeric(elem,helperMsg) { var alphaExp=/^[0-9, a-z a-z, 0-9, A-Z A-Z, - 0-9 . ]+$/;if(elem.value.match(alphaExp)) { return true; } else { alert(helperMsg) ;elem.focus(); return false; } } function lengthRestriction(elem,min,max) { var unput=elem.value; if(unput.length>=min&&unput.length<=max) { return true; } else { alert("Please enter between "+min+" and "+max+" charactters");elem.focus(); return false; } } function madeSelection(elem,helperMsg) { if(elem.value=="Please Choose") { alert(helperMsg) ;elem.focus(); return false; } else { return true; } } function emailValidator(elem,helperMsg) {
  • 15. 12 var emailExp=/^[0-9 a-z . a-z 0-9]+@[a-z]+.[a- z]{2,4}$/;if(elem.value.match(emailExp)) { return true; } else { alert(helperMsg) ;elem.focus(); 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
  • 16. 13 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>
  • 18. 15 RESULT : Thus developing client side scripts for validating web from controls usingDHTML has been verified.
  • 19. 16 EX.NO :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 "apache-tomcat-7.0.70-windows-x86.zip" to a temporary folder. Step 4: Unzip "apache-tomcat-7.0.70-windows-x86.zip" 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.70bin C: >cd apache-tomcat-7.0.70bin>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 FilesJava ▪ JRE_HOME C:Program FilesJavajre7 Step 7: Configuring Tomcat Open “C:apache-tomcat-7.0.70conf” Folder It consist of the following xml files Server.xml Web.xml Tomcat- user.xml Context.xml Open web.xml in notepad & modify default-listings-false to true Open server.xml & change port number 8080 to any other (8081) if any application access t h esame port Open context.xml change reloadable attribute to true on figurationprocedure varies according to the version
  • 20. 17 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 EX.NO : 5 A INVOKING SERVLET FROM HTML FORMS
  • 21. 18 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 ownservlet 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: //index.jsp <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> //Servlet3.java import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;
  • 22. 19 public class Servlet3 extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponseresponse) throws ServletException, IOException { String firstName = request.getParameter( "firstname" );response.setContentType( "text/html" ); PrintWriter out = response.getWriter(); // send XHTML document to client // start XHTML documentout.println( "<html>" ); // head section of documentout.println( "<head>" ); out.println("<title>Processing get requests with data</title>" );out.println( "</head>" ); // body section of documentout.println( "<body>" ); out.println( "<h1>Hello " + firstName + ",<br />" );out.println( "Welcome to Servlets!</h1>" ); out.println( "</body>" ); // end XHTML document out.println( "</html>" ); out.close(); // close stream to complete the page } public String getServletInfo() { return "Short description"; } } OUTPUT:
  • 23. 20 RESULT: Thus the invocation of servlet from HTML from has been developedsuccessfully. EX.NO : 5 B SESSION TRACKING
  • 24. 21 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:web.xml Configuration If you’re using Tomcat, you may set the session timeout in the web.xml file, in addition to the ways listed above. PROGRAM: import java.io.*; import java.util.*; import javax.servlet.*; import javax.servlet.http.*; // 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 = request.getSession(true); // Get session creation time. Date createTime = new Date(session.getCreationTime()); // Get last access time of this web page. Date lastAccessTime = new Date(session.getLastAccessedTime()); 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");
  • 25. 22 // Check if this is new comer on your web page. if (session.isNew()) { title = "Welcome to GeeksForGeeks"; session.setAttribute(userIDKey, userID); } else { visitCount = (Integer)session.getAttribute( visitCountKey); visitCount = visitCount + 1; userID = (String)session.getAttribute(userIDKey); } session.setAttribute(visitCountKey, visitCount); // Set response content type response.setContentType("text/html"); PrintWriter out = response.getWriter(); String docType = "<!doctype html public "-//w3c//dtd html 4.0 " + "transitional//en">n"; out.println( docType + "<html>n" + "<head><title>" + title + "</title></head>n" + "<body bgcolor = "#f0f0f0">n" + "<h1 align = "center">" + title + "</h1>n" + "<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>" + session.getId() + "</td>" + "</tr>n" + "<tr>n" + " <td>Creation Time</td>n" + " <td>" + createTime + " </td>" + "</tr>n" + "<tr>n" + " <td>Time of Last Access</td>n"
  • 26. 23 + " <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: web.xml • 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 web.xml file. When you run http://localhost:8080/SessionTrackingGfg/GfgSession for the first time, you should get the following result: Output:
  • 27. 24 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.
  • 28. 25 EX.NO : 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=”http://localhost:8080/example/servlet/exam”. 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: //index.jsp <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> </body> </html>
  • 29. 26 //exam.java import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class exam extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponseresponse) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out=response.getWriter(); String name=request.getParameter("name"); out.println("<html>"); out.println("<head>"); out.println("<title>Online Examination</title>"); out.println("</head>"); out.println("<body bgcolor=PINK>"); out.println("<h2 align=center>Online Examination</h2><hr>"); out.println("<h3 align=center> Welcome Mr."+name+"</h3><hr>");out.println("<h4><u>Terms and Conditions:</u></h4>"); out.println("<ul type=disc>"); out.println("<li>The Paper consists a set of five questions.</li>"); out.println("<li>Every question consists of two options.</li>"); out.println("<li>All must be answered</li></ul><hr>"); out.println("<center><h5><u>Your Questions</u></h5></center>");out.println("<hr>"); out.println("<form method=get action=exam2>"); out.println("<p>1.Operating System is a .................</p>"); out.println("<input type=radio name=q1 value=0>Hardware");out.println("<br>"); out.println("<input type=radio name=q1 value=1>Software");out.println("<hr>"); out.println("<p>2.Developer of C Language is ................</p>"); out.println("<br>"); out.println("<input type=radio name=q2 value=0>Dennis Richee");out.println("<br>"); out.println("<input type=radio name=q2 value=1>James Thompson");out.println("<hr>"); out.println("<p>3.Which of the following is a multitasking,multi user,multiprocessing); out.println("OS........ </p>"); out.println("<br>"); out.println("<input type=radio name=q3 value=0>MS DOS");out.println("<br>"); out.println("<input type=radio name=q3 value=1>Windows NT");out.println("<hr>");
  • 30. 27 out.println("<p>4.Father of Computers is................. </p>"); out.println("<br>"); out.println("<input type=radio name=q4 value=1>Charles babbage");out.println("<br>"); out.println("<input type=radio name=q4 value=0>Charles Dickson");out.println("<hr>"); out.println("<p>5.What is the current generation of computers ?</p>");out.println("<br>"); out.println("<input type=radio name=q5 value=0>Fifth");out.println("<br>"); out.println("<input type=radio name=q5 value=1>Sixth");out.println("<hr>"); out.println("<input type=submit value=Done>");out.println("</form>"); out.println("</body>"); out.println("</html>"); } public String getServletInfo() { return "A Servlet of the user"; } } //exam2.java import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class exam2 extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {int count=0,j; response.setContentType("text/html ");PrintWriter out=response.getWriter(); String q1=request.getParameter("q1"); String q2=request.getParameter("q2"); String
  • 33. 30 RESULT: Thus the development of program in java to create three tire applicationusing servlet has been verified successfully.
  • 34. 31 EX.NO : 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 (stud.html) with the following a) Create a form to get the input (Register Number) from the user. b) Set the URL of the server (marklist.jsp) 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. marklist.jsp: <%@ page contentType="text/html" language="java" import="java.sql.*"%> <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=request.getParameter("regno"); Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Connection con=DriverManager.getConnection("jdbc:odbc:markDS"); Statement stmt=con.createStatement(); ResultSet rs=stmt.executeQuery("SELECT*FROM markTab WHERE rno="+str); while(rs.next()) { %> Register No:<%=rs.getObject(1)%><br/> Name:<%=rs.getObject(2)%><br/> <table border="1"> <th>SUBJECT</th><th>Mark</th> <tr><td>Network Programming and Management</td><td><%=rs.getObject(3)%></td></tr> <tr><td>Object Oriented Analysis and Design</td><td><%=rs.getObject(4)%></td></tr> <tr><td>Cryptography and Network Security</td><td><%=rs.getObject(5)%></td></tr> <tr><td>Embedded Systems</td><td><%=rs.getObject(6)%></td></tr> <tr><td>Web Technology</td><td><%=rs.getObject(7)%></td></tr> <tr><td>Software Requirement and Engineering</td><td><%=rs.getObject(8)%></td></tr> </table> <%} %> <br/> <a href="stud.html">Back</a> </body></html>
  • 35. 32 stud.HTML: <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="marklist.jsp"> Enter Your Reg.No: <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
  • 36. 33 OUTPUT SCREENSHOTS RESULT: Thus the creation of a three tier application for displaying student mark list using JSP and database has been verifiedsuccessfully.
  • 37. 34 EX.NO : 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: //student.xml <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="student.css"?> <!DOCTYPE student SYSTEM "student.dtd"> <students> <student> <sno>801041</sno> <sname>S.Soundarapandian</sname> <dob>05/081991</dob> <address>Neyveli</address> <m1>80</m1> <m2>90</m2> <m3>95</m3> </student> <student> <sno>801049</sno> <sname>R.Vadivelan</sname> <dob>22/07/1990</dob> <address>Pondicherry</address> <m1>90</m1> <m2>95</m2> <m3>80</m3> </student> <student> <sno>801037</sno> <sname>R.Satheesh</sname> <dob>21/01/1991</dob> <address>Kanyakumari</address> <m1>80</m1> <m2>90</m2> <m3>95</m3> </student> </students>
  • 38. 35 //student.css Student { background.color:#aabbcc;width:100%;} Sno { display:block; color:GREEN; font.size:25pt; } Sname { display:block; color:BLACK; font.size:20pt; }Dob { display:block; color:BLUE; font.size:15pt; } Address { display:block; color:BLUE; font.size:15pt; }m1 { display:block; color:BLUE; font.size:15pt; } m2 { display:block; color:BLUE; font.size:15pt; }m3 { display:block; color:BLUE; font.size:15pt;} //student.dtd` <?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