SMTEC Web T Ech LAB MANUEL

2021 Regulation CCS375 - WEB TECHNOLOGIES LAB Semester-05
CCS375 - WEB TECHNOLOGIES SYLLABUS
PRACTICAL EXERCISES: 30 PERIODS
List of Experiments:
1. Create a web page using HTML and fix the hot spots.
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 from HTML forms.
6. Write programs in Java using Servlets from Session Tracking.
7. Write programs in Java to create three-tier applications using JSP and Databases For
conducting on-line examination.
8. Write programs in Java to create three-tier applications using JSP and Databases For
displaying student mark listwhich has been stored in a database server.
9. Programs using XML – Schema
10. Programs using XSL.
1
Ex. No. 1 CREATION OF WEB PAGE USING HTML AND FIXING THE HOT
SPOTS
Date:
Aim:
To create a web page using HTML and fix the hot spots.
Algorithm:
1. Use the HTML <map> element to define an image map.

2. Use the HTML <area> element to define the clickable areas in the image map.
3. Use the HTML usemap attribute of the <img> element to point to an image map.
4. Attribute of area in coords is used to point out that image co-ordination.
5. Attribute of area in shape is used to denote the shape type of that images.
Program:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Map Example</title>
<style>
#container{
margin:auto;
width:900px;
height:1000px;}
</style>
</head>
<body>
<div id="container">
<img src="map1.jpg" usemap="#Map" border="0" />
<map name="Map" id="Map">
2
<area shape="poly" cords = "142, 598, 145, 588, 148, 577, 150,5 64, 149, 557, 159, 552,
165,549,178,544,184,536,193,537,204,526,213,520,225,512,224,525,221,535,221,545,22
1,558,218,568,212,573,208,583,207,592,204,600,202,606,203,611,207,617,209,624,211,
632,220,634,230,635,241,637,245,645,248,650,240,653,231,654,224,658,223,665,223,67
2,220,679,214,681,203,681,195,681,186,677,181,673,174,667,171,663,161,655,156,649,
152,630" href="karnataka.jpg" title="Badami Cave" />
<area shape="poly" cords = "220, 625, 215, 615, 212, 607, 215, 597, 218, 590, 217, 580,
222,576,228,569,229,560,229,554,230,542,231,529,233,522,234,512,234,502,237,495,24
0,487,244,481,249,474,254,470,266,476,276,478,284,477,286,484,286,492,289,498,295,
501,302,504,308,513,312,522,319,524,334,523,350,516,354,510,362,512,367,504,375,49
8,382,491,393,495,398,498,384,510,370,522,360,530,349,539,345,551,334,558,322,560,
316,567,314,571,304,567,300,572,293,581,290,590,287,601,290,617,291,628,286,636,27
8,639,268,642,257,646,253,640,244,629,237,625,227,625" href="andhrapardesh.jpg"
title="Belumcave" />
<area shape="poly" cords =" 159, 659, 161, 668, 169, 677, 174, 686, 179, 695, 185, 709,
187,721,189,731,192,741,196,753,201,762,208,771,211,774,213,760,214,749,213,739,21
4,728,208,729,203,726,204,715,204,711,199,703,194,694,189,688,190,681,175,672,166,
663" href="kerla.jpg" title="Thekkady" />
</map>
</div>
</body>
</html>
3
Output:
Result:
Thus the creation of web page using HTML and fix the hot spots has been completed
and successfully verified.
4
Ex. No. 2 Creation of web page with all types of Cascading style sheets.
Date :
Aim:
To create a web page with all types of Cascading style sheets.
Algorithm:
1. Create a simple HTML page.

2. Write internal CSS using <style> tag in the same page become internal CSS.
3. Create another CSS file using <style> tag with extension .css file for external CSS file.
4. Create a style using style attribute for an internal css.
5. Include the external CSS file in HTML file.
6. Find the style changes on the page.
Program:
Index.html:
<!DOCTYPE html>

<html>
<head>
<title>Css Types and Selectors</title>
5
<link rel="stylesheet" type="text/css" href="style.css">

<style>
h3{ /*Element selector*/
color:red;
}
</style>
</head>
<body style="border-style: solid;"> 
<h1>Simple Selector</h1>
<h3>Element selector</h3>
<h6>The element selector selects HTML elements based on the element name (or tag) for
example
p, h1, div, span, etc.</h6>
<h3>Id Selector</h3>
<p id="idselector">The id selector uses the id attribute of an HTML element to select a
specific
element.</p>
<h3>Class Selector</h3>
<p class="classselector" >The class selector selects HTML elements with a specific class
attribute.</p>
<h3>Group Selector</h3>
<p>This selector is used to style all <span>comma-separated</span> elements with the
same
style.</p>
<h3>Universal selector</h3>
<p>The Universal selector (*) in CSS is used to select all the elements in an HTML
document. It also
includes other elements which are inside under another element. </p>
<h3>Attribute selector</h3>
6
<p >The attribute selector [attribute] is used to select the elements with a specified
attribute or attribute value.</p>
<a href="a.html">Learn HTML</a>
<a href="b.html">Learn CSS</a>
<a href="c.html">Learn Javascript</a>
<h3>Pseudo-class selector</h3>
<p > It is used to style a special type of state of any element. For example- It is used to
style an
element when a mouse cursor hovers over it.</p>
<h3>Pseudo-Element selector</h3>
<p >It is used to style any specific part of the element. For Example- It is used to style
the first letter
or the first line of any element.</p>
</body>
</html>
Style.css:
#idselector /*ID selector*/

{
background-color: olive;
}
.classselector /*Class selector*/
{
background-color: blue;
}
* /*universal selector*/
{
color:sandybrown;
}
h1,span /*Group slector*/
7
{
color:magenta;
}
[href] /*attribute selector*/
{
color: white;
}
/*Pseudo-Class selector*/
a:link {background-color:black;}
a:visited {background-color:red}
a:hover {background-color: green}
a:active {background-color: yellow}
h1:hover
{
background-color: aqua;
}
p::first-letter/*Pseudo-Element selector*/
{
color: darkred;
}
8
Output:
Result:
Thus the creation of web page with all types of Cascading style sheets has been
completed and successfully verified.
9
Ex. No. 3 CLIENT SIDE SCRIPTS FOR VALIDATING WEB FORM CONTROLS
USING DHTML.
Date :
Aim:
To create a web form with client side validation using Java script.
Algorithm:
1. Insert a <form> element in the HTML document with the

Action – specifies the target of the form data to be submitted.
Onsubmit – to call the Java script validation function when the submit button is
pressed.
2. Insert all the necessary form elements such as <input>, <textarea>, <select>, and
<fieldset>.
3. Insert various types of input fields (such as text, radio, checkbox, and submit) by using
“type‟ attribute of <input> element.
4. Embed the form validation function within the head section of the HTML document
by using <script> element as follows: <script type="text/javascript">.
5. Add the necessary elements in formvalid.html file.
6. Execute form valid.html file in any of the web browsers that support javascript.
Program:
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
</head>
<body>
<form id="my-form">
<label for="name">Name:</label>
10
<input type="text" id="name" name="name" required><br><br>
<label for="PN">Phone NO:</label>

<input type="text" id="pn" name="Phono" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="Add">Address:</label>
<textarea name="address" rows="3" cols="30" maxlength="100"
required></textarea><br><br>
<button type="submit">Submit</button>
<script type="text/javascript">
const form = document.getElementById('my-form');
const nameRegex = /^[a-zA-Z ]{2,30}$/;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
const phone=/^$?([0-9]{3})$?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
const add=/^(\d{1,}) [a-zA-Z0-9\s]+(\,)? [a-zA-Z]+(\,)? [A-Z]{2} [0-9]{5,6}$/;
form.addEventListener('submit', (event) => {
event.preventDefault();
const nameInput = form.elements['name'];
const emailInput = form.elements['email'];
const passwordInput = form.elements['password'];
const pno = form.elements['phono'];
const address = form.elements['address'];
11
if (!nameRegex.test(nameInput.value)) {
alert('Please enter a valid name');
nameInput.focus();
return;
}
if (!emailRegex.test(emailInput.value)) {
alert('Please enter a valid email');
emailInput.focus();
return;
}
if (!passwordRegex.test(passwordInput.value)) {
alert('Please enter a valid password (must contain at least 8 characters, including 1
uppercase, 1 lowercase, and 1 number)');
passwordInput.focus();
return;
}
if (!phono.test(pno.value)) {
alert('Please enter a valid Reg NO');
regno.focus();
return;
}
if (!add.test(address.value)) {
alert('Please enter a valid Address');
address.focus();
return;
}
form.submit();
});
12
</script>
</form>
</body>
</html>
Output:
Result:
Thus to create a web form with client side validation using Java script has been
completed and successfully verified.
13
Ex. No. 4 Installation of Apache Tomcat web server
Date :
Aim:
To Install Apache Tomcat web server.
Algorithm:
1. Shut down Apache Tomcat. ...

2. Start Installation Manager.
3. On the Start page, click Install.
4. Follow the instructions in the Installation Manager wizard to install the product.
5. Complete installation through Installation Manager.
Procedure:
STEP 1.Download Apache Tomcat
Start by download the binary distribution of tomcat 8 by visiting the official tomcat
download website. You can visit the website. Under Binary Distributions, in Core,
download the 64 bit Windows zip format or 32 bit if you are using 32 bit of windows.
Or you can just click the link below to download Tomcat 8.0.5:
 64-bit Windows zip

 32-bit Windows zip
STEP 2. Extract Files
After finishing downloading, extract the files to somewhere you want, in our case,
we extract it at C:/
14
STEP 3. Add Tomcat Server to NetBeans
Next, add your tomcat server in NetBeans. Open your NetBeans. Under Service tab,
right click server and click Add Server. A pop up dialog should open. In the dialog,
select Apache Tomcat as the server that will be added.
15
STEP 4.Testing your Tomcat Server
Search using Java Servlet.33

To test your tomcat server, in Services tab, expand Servers section. Right click
apache tomcat and click Start.
You can view the logs in the console tab. After successfully starting tomcat, in
your web browser eg. Chrome, open up localhost:8080 which is the default port
for tomcat. You should be able to see something like below. Done, you have
successfully added tomcat in netbeans.
Result:
Thus the Installation of Apache Tomcat web server has been completed and
successfully Installed.
16
Ex. No. 5 INVOKE SERVLETS FROM HTML FORMS
Date :
Aim:
To write programs in Java using Servlets from HTML forms.
Algorithm:
1. Create the html code to develop the Form field.

2. Form field of action value is using that servlet file and using post method.
3. Selection tag to select which type user want to convert currency (ex: Euro,
Rupee).
4. Now create the servlet program to develop a currency converter.
5. After finish the servlet program, then run the index page of html.
Program:
Index.html
<html>
<body>
<form name="form1"method="post" action="NewServlet "> Select the type of

Currency:
<Select name="currency">
<option value="Euro">Euro</option>
<option value="Pound">Pound</option>
<option value="Rupees">Rupees</option>
</select>
17
<br/> <br/>
Enter the value:
<input type="text" name="currencyVal" value=""/> <br/> <br>
<input type="submit" value="Submit"/>
</form>
</body> </html>
Servlet Code:
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
@WebServlet("/NewServlet")
public class NewServlet1 extends HttpServlet {
public void doPost(HttpServletRequest req,HttpServletResponse res)throws
ServletException, IOException, NullPointerException{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
String c=req.getParameter("currency");
double RupeeValue,EuroValue,PoundValue;
double DollarValue=0;
String value=req.getParameter("currencyVal");
if(c.equals("Rupees"))
{
RupeeValue=Double.parseDouble(value);
DollarValue=RupeeValue/61;
}
if(c.equals("Euro")){
18
EuroValue=Double.parseDouble(value);
DollarValue=EuroValue/0.77;
}
if(c.equals("Pound")){
PoundValue=Double.parseDouble(value);
DollarValue=PoundValue*1.62;
}
out.println("<p> The dollar value="+DollarValue+"</p>");
out.close();
}
}
Output:
Result:
Thus the invocation of servlet from HTML forms has been completed and successfully
verified.
19
Ex. No. 6 SESSION TRACKING USING SERVLET
Date :
Aim:
To write the Servlet code to track the user session.
Algorithm:
1. Create the Java Web application.

2. Inside the web application form field method is get.And action is value of that servlet
file.
3. Then Develop the servlet program to tracking the user.
4. Using date and last modified time also we tracking user and count of visit that
particular in Web page.
5. Finally display using table format.
Program:
Index.html
<html>
<body>
<form name="form1" method="get" action="Servlet">
Enter the User Name:
<input type="text" name="currencyVal" value=""/> <br/> <br>
<input type="submit" value="Submit"/>
</form>
</body> </html>
20
Servlet.java
import java.io.*;
import java.util.Date;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
@WebServlet("/NewServlet1")
public class NewServlet1 extends HttpServlet
{
public void doGet(HttpServletRequest request,HttpServletResponse
response)throws IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
HttpSession session = request.getSession();
Date createTime= new Date(session.getCreationTime());
Date lastAccessTime= new Date(session.getLastAccessedTime());
String title=" ";
Integer visitCount=new Integer(0);
String visitCountKey =" ";
if (session.isNew())
{
title = "Welcome to Web Technology";
}
else
{
title = "Welcome Back to Web Technology";
visitCount = (Integer) session.getAttribute(visitCountKey);
visitCount = visitCount + 1;
}
session.setAttribute(visitCountKey, visitCount);
21
out.println(
"<!Doctype html>\n"
+ "<head><title>" + title + "</title></head>\n"
+
"<body >\n"
+ "<h1 align = \"center\">" + title + "</h1>\n"
+ "<h2 align = \"center\">WT Session Information</h2>\n"
+ "<table bgcolor = \"grey\" border = \"1\" align = \"center\">\n"
+
"<tr>\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"
+ " <td>" + lastAccessTime + "</td>"
+ "</tr>\n"
+"<tr>\n"
+ " <td>Number of visits</td>\n"
+ " <td>" + visitCount + "</td>"
+ "</tr>\n"
22
+ "</table>\n"
+ "</body>"
+ "</html>");
session.setMaxInactiveInterval(10);
}
}
Output:
Result:
Thus the Servlet code to track the user session has been completed and successfully
verified.
23
Ex. No. 7 THREE-TIER APPLICATIONS USING JSP AND DATABASES FOR

CONDUCTING ON-LINE EXAMINATION
Date :
Aim:
To create a three-tier applications using JSP and Databases For conducting on-line
examination.
Algorithm:
1. Create a database named examdb in mysql workbench
2. Inside examdb database create a table named examtable

3. Inside the examtable add column name as ans and set the datatype to be varchar(50)
4. Insert the coorect answer into the tables.
5. Design the HTML page (index.html) with the following
a) Create a form to get the input from the user.
b) Use radio buttons to make various options for the questions.
c) Set the URL of the server (examserver.jsp) as the value of the action attribute.
d) Use submit button to invoke the server and send the form data to the server.
6. Create the JSP file with the following
a) Read the input from the client.
b) Retrieve the answers from the database.
c) Match the answers from the user with the correct answers from the database table.
d) For each correct answer increment the mark by 5.
e) Server displays the mark and result to the client as a response
24
Program:
Index.html
<html>
<head>
<title>Online Exam Client</title>
<style type="text/css">
body{
background-color:black;
color:blue;
}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>
<h3>Answer the following questions (5 marks for each correct answer)</h3>
<hr/>
<form name="examForm" method="post" action="examserver.jsp">
1.C was developed by?<br/>
<input type="radio" name="ans1" value="Dennis Ritchie">Dennis Ritchie
<input type="radio" name="ans1" value="Stroustrup">Stroustrup
<input type="radio" name="ans1" value="David Ritchie">David Ritchie
<input type="radio" name="ans1" value="Charles Babbage">Charles Babbage
<br/><br/>
2. All computers must have <br/>
<input type="radio" name="ans2" value="Operating System">Operating System
<input type="radio" name="ans2" value="Application Software">Application
Software
<input type="radio" name="ans2" value="CD Drive">CD Drive
<input type="radio" name="ans2" value="Microsoft word">Microsoft word
<br/><br/>
25
3. The term PC means <br/>

<input type="radio" name="ans3" value="Private Computer">Private Computer
<input type="radio" name="ans3" value="Professional Computer">Professional
Computer
<input type="radio" name="ans3" value="Personal Computer">Personal
Computer
<input type="radio" name="ans3" value="Personal Calculator">Personal
Calculator
<br/><br/>
<input type="submit" value="Check Your Result"/>
</form>
</body>
</html>
Exam.jsp:
<%@page contentType="text/html" language="java" import="java.sql.*"%>

<html>
<head>
<title>Online Exam Server</title>
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>
<p>
<a href="index.html">Back To Main Page</a>
</p>
<hr/>
<%
26
String str1=request.getParameter("ans1");
int mark=0;
String dbDriver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql:// localhost:3306/";
String dbname = "examdb";
String username = "root";
String password = "root";
Class.forName(dbDriver);
Connection con = DriverManager.getConnection(url +
dbname,username,password);
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT * FROM examtable");
int i=1;
while(rs.next())
{
if(i==1)
{
String dbans1=rs.getString(1);
if(str1.equals(dbans1))
{
mark=mark+5;
}
}
if(i==2)
{
{
mark=mark+5;
27
}
}
if(i==3)
{
{
mark=mark+5;
}
}
i++;
}
if(mark>=10)
{
out.println("<h4>Your Mark Is : "+mark+"</h4>");
out.println("<h3>Congratulations....! You Are Eligible For The Next
Round...</h3>");
}
else
{
out.println("<h4>Your Mark is : "+mark+"</h4>");
out.println("<h3>Sorry....!! You Are Not Eligible For The Next Round...</h3>");
}
%>
</form>
</body>
</html>
28
Output:
Result:
Thus the three-tier applications using JSP and Databases for conducting on-line
examination has been completed and successfully verified.
29
Ex. No. 8 THREE-TIER APPLICATIONS USING JSP AND DATABASES FOR

DISPLAYING STUDENTS MARKS
Date :
Aim:
To create a three tier application for displaying student marks using JSP and database.
Algorithm:
1. Create a database named studentdb2 in mysql workbench
2. Inside studentdb2 database create a table named student
3. Inside the student table add column name as studentsid, studentname, mark and set the
datatype to be int,varchar(50),int respectively.
4. Design the HTML page (index.html) with the following
a) Create a form to get the input from the user.
b) Set the URL of the server (examserver.jsp) as the value of the action attribute.
c) Use submit button to invoke the server and send the form data to the server.
5. Create the JSP (student.jsp) file with the following
a) Read the input from the client.
b) Retrieve the student details from the database.
e) Server displays the id, name and mark to the client as a response.
30
Program:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
</head>
<body>
<form action="student.jsp" method="post">
<p>ID:</p>

<input type="text" name="studentid"/>
<br/>
<p>Name:</p>
<input type="text" name="studentname"/>
<br/>
<p>Mark:</p>
<input type="text" name="mark"/>
<br/>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>
31
Student.jsp:
</html>
<%@page contentType="text/html" language="java" import="java.sql.*"%>
<html>
<head>
<title>Student mark display</title>
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body>
<h2 style="text-align:center">student mark</h2>
<p>
<a href="index.html">Back To Main Page</a>
</p>
<hr/>
<%
String dbDriver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql:// localhost:3306/";
String dbname = "studentdb2";
String username = "root";
String password = "root";
Class.forName(dbDriver);
Connection con = DriverManager.getConnection(url +
dbname,username,password);
PreparedStatement st;
st = con.prepareStatement("insert into student values(?, ?,?)");
st.setInt(1, Integer.valueOf(request.getParameter("studentid")));
st.setString(2, request.getParameter("studentname"));
st.setInt(3,Integer.valueOf(request.getParameter("mark")));
32
st.executeUpdate();
out.println("<html><body><b>Successfully Inserted"+
"</b></body></html>");
out.print("<table
border=1><tr><td>studentid</td><td>Name</td><td>Mark</td></tr>");
ResultSet rs=st.executeQuery("select * from student");
while(rs.next())
{
int id=rs.getInt("studentid");
String name=rs.getString("studentname");
int mark=rs.getInt("mark");
out.print("<tr><td>"+id+"</td><td>"+name+"</td><td>"+mark+"</td></tr>");
}
rs.close();
con.close();
st.close();
%>
</form>
</body>
</html>
33
Output:
Result:
Thus the three tier application for displaying student marks using JSP and database has
been completed and successfully verified.
34
Exp. No. 9 PROGRAMS USING XML – SCHEMA
Date :
Aim:
To write Programs using XML – Schema.
Algorithm:
1. In Net Beans , point to New on the File menu, and then click Project.
2. Select the XML File type, and then click Open.
3. Save the file as book. xsd in the same folder as your XML document.
4. Save the modified XML document
5. Finally validate the xml file
Program:
XML.xml
<?xml version="1.0"?>
<bookstore xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="book.xsd">
<book isbn="978-1234567890" edition="1st" language="English"
availability="in_stock">
<title> Web Technologies</title>
<author>Jeffrey Jackson </author>
<price>19.99</price>
<genre>Non-Fiction</genre>
<publish_date>2023-01-15</publish_date>
<description>A great book that you won't be able to put down.</description>
</book>
<book isbn="978-0987654321" language="Spanish">
<title> The Blue Umbrella </title>
35
<author>Ruskin BOnd </author>

<publish_date>2023-03-20</publish_date>
</book>
</bookstore>
book.xsd:
<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="bookstore">
<xs:complexType>
<xs:sequence>
<xs:element name="book"
minOccurs="1" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title"
type="xs:string"/>
<xs:element name="author"
type="xs:string"/>
<xs:element name="price"
type="xs:decimal"/>
<xs:element name="genre"
type="xs:string" minOccurs="0"/>
<xs:element name="publish_date"
type="xs:date"/>
<xs:element name="description"
type="xs:string" minOccurs="0"/>
</xs:sequence>
<xs:attribute name="isbn"
type="xs:string" use="required"/>
36
<xs:attribute name="edition"
type="xs:string" use="optional"/>
<xs:attribute name="language"
default="English">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration
value="English"/>
<xs:enumeration
value="Spanish"/>
<xs:enumeration
value="French"/>
<xs:enumeration
value="German"/>
<xs:enumeration
value="Other"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
<xs:attribute name="availability"
default="in_stock">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration
value="in_stock"/>
<xs:enumeration
value="out_of_stock"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
</xs:complexType>
37
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Output:
Result:
Thus the Programs using XML – Schema has been completed and successfully verified.
38
Exp. No. 10 WRITE PROGRAMS USING XSL
Date :
Aim:
To write Programs using XSL.
Algorithm:
1. Select File > New > Other. In the New window, select XML > XSL. Click Next.
2. Select the MyProject directory.
3. In the File name field, type Title. xsl and click Next.
4. In the Select XML file page, select the Title. xml file.
5. Click on xsl transformation and open the generated html file.
Program:
XML.xml
<?xml version="1.0" encoding="UTF-8"?>

<bookstore>
<book>
<title>CBook </title>
<author>Author 3</author>
</book>
<book>
<title>BBook </title>
</book>
<book>
<title>ABook </title>
39
</book>
</bookstore>
XSL.xsl:
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/T
ransform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/bookstore">
<html>
<head>
<title>book.xsl</title>
</head>
<body>
<h1>Bookstore</h1>
<ul>
<xsl:for-each select="book">
<xsl:sort select="title"
order="ascending" />
<li>
<strong>Title:</strong>
<xsl:value-of select="title" /><br />
<strong>Price:</strong>
$<xsl:value-of select="price" />
<xsl:if test="price <
15.00">
<span style="color:
red;"> (Discounted)</span>
40
</xsl:if>
<xsl:choose>
<xsl:when test="price
< 20.00">
<span style="color:
green;"> (Cheap)</span>
</xsl:when>
<xsl:when test="price
> 20.00 and price < 30.00">
<span style="color:
blue;"> (Affordable)</span>
</xsl:when>
<xsl:otherwise>
<span style="color:
yellow;"> (Expensive)</span>
</xsl:otherwise>
</xsl:choose>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
41
Output:
Result:
Thus the Programs using XSL has been completed and successfully verified.
42

SMTEC Web T Ech LAB MANUEL

Uploaded by

Copyright:

Available Formats

SMTEC Web T Ech LAB MANUEL

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SMTEC Web T Ech LAB MANUEL

Uploaded by

Copyright:

Available Formats

2021 Regulation CCS375 - WEB TECHNOLOGIES LAB Semester-05

CCS375 - WEB TECHNOLOGIES SYLLABUS

PRACTICAL EXERCISES: 30 PERIODS

2. Create a web page with all types of Cascading style sheets.

4. Installation of Apache Tomcat web server.

5. Write programs in Java using Servlets from HTML forms.

6. Write programs in Java using Servlets from Session Tracking.

9. Programs using XML – Schema

10. Programs using XSL.

1. Use the HTML <map> element to define an image map.

1. Create a simple HTML page.

<link rel="stylesheet" type="text/css" href="style.css">

#idselector /*ID selector*/

1. Insert a <form> element in the HTML document with the

<input type="text" id="name" name="name" required><br><br>

<label for="PN">Phone NO:</label>

Ex. No. 4 Installation of Apache Tomcat web server

1. Shut down Apache Tomcat. ...

STEP 1.Download Apache Tomcat

 64-bit Windows zip

STEP 2. Extract Files

STEP 3. Add Tomcat Server to NetBeans

STEP 4.Testing your Tomcat Server

Search using Java Servlet.33

Ex. No. 5 INVOKE SERVLETS FROM HTML FORMS

1. Create the html code to develop the Form field.

<form name="form1"method="post" action="NewServlet "> Select the type of

Enter the value:

<input type="text" name="currencyVal" value=""/> <br/> <br>

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

Ex. No. 6 SESSION TRACKING USING SERVLET

1. Create the Java Web application.

<form name="form1" method="get" action="Servlet">

Enter the User Name:

<input type="text" name="currencyVal" value=""/> <br/> <br>

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

Ex. No. 7 THREE-TIER APPLICATIONS USING JSP AND DATABASES FOR

1. Create a database named examdb in mysql workbench

2. Inside examdb database create a table named examtable

3. The term PC means <br/>

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

Ex. No. 8 THREE-TIER APPLICATIONS USING JSP AND DATABASES FOR

1. Create a database named studentdb2 in mysql workbench

2. Inside studentdb2 database create a table named student

4. Design the HTML page (index.html) with the following

a) Create a form to get the input from the user.

5. Create the JSP (student.jsp) file with the following

a) Read the input from the client.

b) Retrieve the student details from the database.

Exp. No. 9 PROGRAMS USING XML – SCHEMA

<author>Ruskin BOnd </author>

<?xml version="1.0" encoding="UTF-8"?>

Exp. No. 10 WRITE PROGRAMS USING XSL

<?xml version="1.0" encoding="UTF-8"?>

You might also like

#idselector /ID selector/