Ccs375 - Lab Manual
Uploaded by
almasm8220Ccs375 - Lab Manual
Uploaded by
almasm8220CCS375 WEB TECHNOLOGIES LABORATORY LTPC
0042
COURSE 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 database which has been stored in a
database server.
7. Programs using XML – Schema – XSLT/XSL.
TOTAL: 30 PERIODS
COURSE OUTCOMES:
At the end of this course, the students will be able to:
CO1: Construct a basic website using HTML and CSS
CO2: Build dynamic web page with validation using Java Script objects and by applying
different
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.
TEXTBOOKS:
1. Deitel and Deitel and Nieto, Internet and World Wide Web - How to Program, Prentice
Hall, 5th Edition, 2011.
2. Jeffrey C and Jackson, Web Technologies A Computer Science Perspective, Pearson
Education, 2011.
3. Angular 6 for Enterprise-Ready Web Applications, Doguhan Uluca, 1st edition, Packt
Publishing
REFERENCES:
1. Stephen Wynkoop and John Burke “Running a Perfect Website”, QUE, 2nd Edition,1999.
2. Chris Bates, Web Programming – Building Intranet Applications, 3rd Edition, Wiley
Publications, 2009.
3. Gopalan N.P. and Akilandeswari J., “Web Technology”, Prentice Hall of India, 2011.
4. [Link], “Web Technologies”, Oxford University Press, 2011.
5. Angular: Up and Running: Learning Angular, Step by Step, Shyam Seshadri, 1st edition,
O′Reilly
[Link] 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 database which has been stored
in a database server.
7 Programs using XML – Schema – XSLT/XSL.
Content beyond syllabus
8 Create a Webpage for showing Timetable
9 Create a Faculty Profile/Student Profile.
1. Web Page Creation with Image Map
Aim:
To create a web page which includes a map and display the related information when a hot spot is
clicked in the map.
Algorithm:
[Link] a html file with map tag.
[Link] the source attribute of the img tag to the location of the image and also set the use map
attribute. 3. Specify an area with name, shape and href set to the appropriate values.
4. Repeat step 3 as many hot spots you want to put in the map.
5. Create html files for each and every hot spot the user will select.
Program:
[Link]
<HTML>
<HEAD>
<TITLE>Image Map</TITLE> </HEAD>
<BODY>
<img src="india_map.jpg" usemap="#metroid" ismap="ismap" > <map name="metroid"
id="metroid">
<area href="[Link]" shape="circle" coords="208,606,50" title="TamilNadu"/>
<area href="[Link]" shape="rect" coords = "130,531,164,535" title ="Karnataka" />
<area href="[Link]" shape="poly" coords =
"227,490,238,511,230,536,198,535,202,503" title ="Andhra Pradesh" />
<area href="[Link]" shape="rect" coords = "154,606,166,621" title ="Kerala" /> </map>
</BODY>
</HTML>
[Link]
<HTML><HEAD>
<TITLE>About Tamil Nadu</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tamil Nadu</H1></CENTER> <HR>
<UL>
<LI>Area : 1,30,058 Sq. Kms.</LI>
<LI>Capital : Chennai</LI>
<LI>Language : Tamil</LI>
<LI>Population : 6,21,10,839</LI> </UL><hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Karnataka</TITLE> </HEAD>
<BODY>
<CENTER><H1>Karnataka</H1></CENTER>
<HR
>5
<UL>
<LI>Area : 1,91,791 Sq. Kms</LI>
<LI>Capital : Bangalore</LI>
<LI>Language : Kannada</LI>
<LI>Population : 5,27,33,958</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Andhra Pradesh</TITLE> </HEAD>
<BODY>
<CENTER><H1>Andhra Pradesh</H1></CENTER> <HR>
<UL>
<LI>Area : 2,75,068 Sq. Kms</LI>
<LI>Capital : Hyderabad</LI>
<LI>Language : Telugu</LI>
<LI>Population : 7,57,27,541</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Kerala</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Kerala</H1></CENTER>
<HR>
<UL>
<LI>Area : 38,863 Sq. Kms.</LI>
<LI>Capital : Thiruvananthapuram</LI>
<LI>Language : Malayalam</LI>
<LI>Population : 3,18,38,619</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY></HTML>
Note:
Store the image (India_map.jpg) in current folder
Result:
Thus the creation of a web page which includes a map and display the related in-formation when a
hot spot is clicked in the map was executed successfully.
2. Create a web page with all types of Cascading Style Sheets
Aim:
To create a web page that displays college information using various style sheets
Algorithm:
1. Create a web page with frame sets consisting two frames
2. In the first frame include the links
3. In the second frame set display the web page of the link
4. Create a external style sheets
5. Create a embedded style sheets
6. Create a inline and internal style sheets and make it link to the external style sheets
Program:
[Link]:
h3
{
font-family:arial;
font-size:20;
color: cyan
}
Table
{
border-color: green
}
td
{
font-size:20pt;
color:magenta
}
HTML CODE:
<html>
<head>
<h1>
<center>ALL STYLE SHEETS</center>
</h1>
<title>USE of INTERNAL and EXTERNAL STYLESHEETS </title>
<link rel="stylesheet" href="[Link]" type="text/css">
<style type="text/css"> .vid
{
font-family:verdana;
font-style:italic;
color:red;
text-align:center
}
.ani
{
font-family:tahoma;
font-style:italic;
font-size:20;
text-align:center;
}
font
{
font-family:georgia;
color:blue;
font-size:20
}
ul
{
list-style-type:circle
}
p
{
font-family: georgia, serif;
font-size: x-small;
}
hr
{
color: #ff9900; height: 1px
}
a:hover
{
color: #ff0000;
text-decoration: none
}
</style>
</head>
<body>
<h1 style="color:blue;margin-left:30px;">Welcome</h1> //In-line style Sheet
<ol style="list-style-type:lower-alpha">
<b>SRM TRP Engineering College </b>
<br>
<br>
<br>
<li> EEE</li>
<li> ECE </li>
<li> MECH</li>
<li> CSE</li>
</ol>
<p style="font-size:20pt;color:purple">Details</p>
<p class="ani"> SRM TRP Engineering College <br>It is approved by AICTE(All India
Council for Technical Education). It is affliated to Anna University.<br></p>
<h2 class="vid"> SRM TRP Engineering College </h2> <br>
<font>It is an ISO
</font>
<br>
<br>
<font>
<h2>List of Courses offered</h2>
<ul>
<li>Computer Science and Engineering</li>
<li>Ece</li>
<li>mech</li>
<li>eee</li>
</ul>
</font>
<h3>Results of cse students</h3>
<table width="100%" cellspacing="2" cellpadding="2" border="5"> <tr>
<th>[Link]</th> <th>MARKS</th> <th>RESULT</th>
</tr>
<tr>
<td align="center">Suppriya</td> <td align="center">100</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Devishree</td> <td align="center">99</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Vinayagam</td> <td align="center">98</td>
<td align="center">pass</td> </tr>
</table>
</body>
</html>
Output:
Result:
Thus the creation of a web page that displays college information using various style sheet was
successfully executed and verified.
3. Client Side Scripts for Validating Web Form Controls using DHTML
AIM:
To write the HTML codes using JAVA Script and CSS to create Client Side Scripts for
Validating Web Form Controls.
ALGORITHM:
Step 1 : Open the notepad.
Step 2 : Create the HTML header and give the title as “WebForm”.
Step 3 : Specify the style type as “text/css”.
Step 4 : Define the properties for the Layout and Layer.
Step 5 : Specify the script type as “text/javascript”.
Step 6 : Create a function as “validate()”.
Step 7 : Specify the conditions for the form to be created using javascript.
Step 8 : Open the body of the HTML.
Step 9 : Create the division as “Layer”.
Step 10: Create a form and name it. Create a table for better alignment of the contents of the
form.
Step11: Specify the requirements of the form like Name, Qualification, Date Of Birth, etc.
Step 12: Define the input type, name and id of all the required parameters.
Step 13: Create a “Submit” button and make a link to the function using onclick=“validate()”.
Step 14: Save and run the HTML file to get the output.
PROGRAM:
<html>
<head>
<title>Untitled Document</title>
<style
type="text/css">
#Layer1 {
position:absolute;
width:1047px;
height:792px;
z-index:1;
left:
103px;
top: 80px;
}
.
style1 {
color: #000099;
font-weight:
bold;
background-color:#00CCFF;
}
.style2 {
color: #000099;
font-weight:
bold;
background-color:#00CCFF;
}
#Layer2 {
position:absolute;
width:1040px;
height:49px; z-
index:2; left: 59px;
top: 9px;
}
.style3 {
color: #006666;
font-weight:
bold;
background-color:#E0D2F0;
}
body{
background-color:#DADADA;
}
</style>
<script
type="text/javascript">
function validation()
{
if([Link]=="")
{
alert("enter the full name")
[Link]();
return false
}
if(!isNaN([Link]))
{
alert("enter the valid name");
[Link]();
[Link]="";
return false
}
if([Link]=="0")
{
alert("enter the day")
[Link]();
return false
}
if([Link]=="0")
{
alert("enter the month")
[Link]();
return false
}
if([Link]=="0")
{
alert("enter the year")
[Link]();
return false
}
if([Link]=="0")
{
alert("enter the gender")
[Link]();
return false
if([Link]=="")
{
alert("enter the pincode ")
[Link]();
return false
}
if( isNaN([Link]))
{
alert("enter a valid pincode")
[Link]();
return false
}
if([Link]!=6)
{
alert("please enter the valid pincode")
[Link]();
return false
}
if([Link]=="")
{
alert("enter the address") [Link]();
}
if([Link]=="")
{
alert("enter the address")
[Link]();
return false
}
if([Link]=="")
{
alert("enter the city")
[Link]();
return false
}
if(!isNaN([Link]))
{
alert("enter the valid City")
[Link]();
[Link]="";
return false
}
if([Link]=="")
{
alert("enter the state")
[Link]();
return false
}
if(!isNaN([Link]))
{
alert("enter the valid state")
[Link]();
[Link]="";
return false
}
return false
}
if([Link]=="")
{
alert("enter the email id")
[Link]();
return false
}
if(!([Link]==""))
{
var x=[Link]
var atpos=[Link]("@");
var dotpos=[Link](".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=[Link])
{
alert("Not a valid e-mail address");
[Link]();
return false;
}
}
if([Link]=="")
{
alert("enter the mobile no")
[Link]();
return false
}
if( isNaN([Link]))
{
alert("enter a valid mobile no")
[Link]();
[Link]="";
return false
}
if([Link] !=10)
{
alert("enter the valid mobile no")
[Link]();
[Link]();
return false
}
if([Link]=="0")
{
alert("enter the qualification") [Link]();
return false
}
if([Link]=="0")
{
alert("enter the experience")
[Link]();
return false
}
if([Link]=="")
{
alert("enter the project description")
[Link]();
return false
}
if([Link]=="")
{
alert("enter the salary ")
[Link]();
return false
}
if( isNaN([Link]))
{
alert("enter a valid salary")
[Link]();
[Link]="";
return false
}
}
</script>
</head>
<body>
<div id="Layer1">
<form id="validate" name="validate" method="post" action="">
<p> </p>
<table width="886" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2"><div align="center" class="style1">Personal Details </div></td>
<td width="30" rowspan="10"> </td>
<td colspan="2"> <div align="center" class="style2">Education and Experience </div></td>
</tr>
<tr>
<td width="111">Full Name</td>
<td width="255"><label>
<input name="name" type="text" id="name" />
</label></td>
<td width="152">Qualification</td>
<td width="217"><select name="qualification">
<option value="0">Select</option>
<option value="1">UG</option>
<option value="2">PG</option>
<option value="3">PHD</option>
</select></td>
</tr>
<tr>
<td>Date of Birth </td>
<td><select name="day">
<option value="0">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="month">
<option value="0">Month</option>
<option value="1">Janauray</option>
<option value="2">Feburary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">Sepetember</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="year">
<option value="0">Year</option>
<option value="1">2009</option>
<option value="2">2008</option>
<option value="3">2007</option>
<option value="4">2006</option>
<option value="5">2005</option>
<option value="6">2004</option>
<option value="7">2003</option>
<option value="8">2002</option>
<option value="9">2001</option>
<option value="10">2000</option>
<option value="11">1999</option>
<option value="12">1998</option>
<option value="13">1997</option>
<option value="14">1996</option>
<option value="15">1997</option>
<option value="16">1996</option>
<option value="17">1995</option>
<option value="18">1994</option>
<option value="19">1993</option>
<option value="20">1992</option>
<option value="21">1991</option>
<option value="22">1990</option>
<option value="23">1989</option>
<option value="24">1988</option>
<option value="25">1987</option>
<option value="26">1986</option>
<option value="27">1985</option>
<option value="28">1984</option>
<option value="29">1983</option>
<option value="30">1982</option>
<option value="31">1981</option>
<option value="32">1980</option>
</select></td>
<td>Work Experience </td>
<td><select name="experience">
<option value="0">Select</option>
<option value="1">Fresher</option>
<option value="2">1 yr</option>
<option value="3">2 yrs</option>
<option value="4">3 yrs</option>
<option value="5">4 yrs</option>
<option value="6">5 yrs</option>
<option value="7">>5 yrs</option>
</select></td>
</tr>
<tr>
<td height="70">Sex</td>
<td><select name="gender" id="gender" >
<option value="0">Select Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select></td>
<td>Project Description </td>
<td><label>
<textarea name="project" id="project"></textarea>
</label></td>
</tr>
<tr>
<td>Address</td>
<td><label>
<textarea name="address" id="address"></textarea>
</label></td>
<td>Expected Salary P.A </td>
<td><label>
<input name="salary" type="text" id="salary" />
</label></td>
</tr>
<tr>
<td>City</td>
<td><label>
<input name="city" type="text" id="city" />
</label></td>
<td colspan="2" rowspan="5"> </td>
</tr>
<tr>
<td>State</td>
<td><label>
<input name="state" type="text" id="state" />
</label></td>
</tr>
<tr>
<td>PinCode</td>
<td><label>
<input name="pincode" type="text" id="pincode" />
</label></td>
</tr>
<tr>
<td>Email ID</td>
<td><label>
<input name="email" type="text" id="email" />
</label></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><label>
<input name="mobile" type="text" id="mobile" />
</label></td>
</tr>
<tr>
<td colspan="5"><label>
<div align="center">
<input type="submit" name="Submit" value="Submit" onclick="return validation()" />
<label>
<input type="reset" name="Submit2" value="Reset" />
</label>
</div>
</label></td>
</tr>
</table>
</form>
</div>
<div id="Layer2">
<div align="center">
<h1 class="style3">Job Registration Form </h1>
</div>
</div>
</body>
</html>
OUTPUT:
RESULT:
The HTML page has been created using JAVA Script and CSS to create Client Side
Scripts for Validating Web Form Controls.
4. Installation of Apache Tomcat web server
Aim:
To install an Apache Web Server on Ubuntu System.
Algorithm:
Step 1: Install Apache.
To install the Apache package on Ubuntu, use the command: sudo
apt-get install apache2. ...
Step 2: Verify Apache Installation.
To verify Apache was installed correctly,
open a web browser and type in the address bar: [Link]
Step 3: Configure Your Firewall.
Apache is an open source web server software created and maintained by Apache software
foundation. Since it an open source so it is free to use. It is a web server used for one or more HTTP
based websites. It is widely used by web hosting companies to provide shared and virtual hosting.
Steps to install the Apache server:
● Make Superuser: Open terminal and use following command to make yourself
superuser.
sudo su
● Update Ubuntu package: Use the following command to update the Ubuntu
package list.
sudo apt update
● Install Apache: After installing the Ubuntu package list, use the following command to
install apache server.
sudo apt install apache2
● After completion of the installation process, the Apache server automatically start.
The status of the Apache server can be checked by using the following command.
sudo systemctl status apache2
`
● Open the browser and type localhost or [Link] on the address bar. It will display
the default page of the Apache server.
Result:
An Apache Web Server has been installed on Ubuntu System.
5. Write Programs in java using Servlets:
To Invoke Servlets from HTML Form
AIM:
To write a java program to invoke servlets from HTML form.
ALGORITHM:
[Link]
(1) Create a web page using HTML form that contains the fields such as text, password and
one submit button.
(2) Set the URL of the server as the value of form’s action attribute.
(3) Run the HTML program.
(4) Submit the form data to the server.
[Link]
(1) Define the class server that extends the property of the class GenericServlet.
(2) Handle the request from the client by using the method service() of GenericServlet class.
(3) Get the parameter names from the HTML form by using the method getParameterNames().
(4) Get the parameter values from the HTML forms by using the method getParameter().
(5) Send the response to the client by using the method of PrintWriter class.
[Link]:
import [Link].*;
import [Link].*;
import
[Link].*;
public class server extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res)throws ServletException,IOException
{
PrintWriter pw=[Link]();
[Link]("<h3>Registration Successful...</h3>");
Enumeration e=[Link]();
while([Link]())
{
String
str1=(String)[Link]();
String
str2=[Link](str1);
[Link](str1+"="+str2+"<br/>");
}
[Link]();
}
}
[Link]:
<web-app>
<servlet>
<servlet-name>Register</servlet-name>
<servlet-class>server</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Register</servlet-name>
<url-pattern>/server</url-pattern>
</servlet-mapping>
</web-app>
[Link]:
<html>
<head>
<title>Invoking Servlet From HTML</title>
</head>
<body bgcolor="violet">
<form name="form1" method="post" action="[Link]
<fieldset>
<legend>Registration</legend>
Enter E-mail :
<input type="text" name="LoginID"
size="25"/><br/><br/> Enter Password:
<input type="password" name="Password" size="25">
<input type="submit" Value="SUBMIT">
</fieldset>
</form>
</body>
</html>
OUTPUT:
Result:
Java program has been developed to invoke servlets from HTML form.
[Link].5 b SESSION TRACKING
AIM:
To write a html program for invoking servlet using html.
ALGORITHM:
STEP 1: Remove a specific attribute You can delete the value associated with a specific
key by
calling the public void remove Attribute(String name) function.
STEP 2:Delete your whole session. To delete an entire session, use the public void
invalidate() function.
STEP 3:Setting Session Timeout You may set the timeout for a session separately by
calling the
public void set MaxInactiveInterval(int interval) function.
STEP 4:Log the user out On servers that support servlets 2.4, you may use the logout
method to
log the client out of the Web server and invalidate all of the users’ sessions.
STEP 4:[Link] Configuration If you’re using Tomcat, you may set the session timeout in
the [Link] file, in addition to the ways listed above.
PROGRAM:
import
[Link].*;
import
[Link].*
; import
[Link]
let.*;
import [Link].*;
// Extend HttpServlet class
public class GfgSession extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
// Create a session object if it is already not
// created.
HttpSession session = [Link](true);
// Get session creation time. Date createTime = new Date([Link]());
// Get last access time of this web
page.
Date lastAccessTime = new Date([Link]());
String title = "Welcome Back to geeksforgeeks";
Integer visitCount = new Integer(0);
String visitCountKey = new
String("visitCount"); String userIDKey = new
String("userID");
String userID = new String("GFG");
// Check if this is new comer on your web
page. if ([Link]()) {
title = "Welcome to GeeksForGeeks";
[Link](userIDKey, userID);
}
else {
visitCount = (Integer)[Link](
visitCountKey);
visitCount = visitCount + 1; userID= (String)[Link](userIDKey);
}
[Link](visitCountKey, visitCount);
// Set response content type
[Link]("text/html")
; PrintWriter out =
[Link]();
String docType
= "<!doctype html public \"-//w3c//dtd html 4.0 "
+ "transitional//en\">\n";
[Link](
docType + "<html>\n"
+ "<head><title>" + title + "</title></head>\n"
+
"<body bgcolor = \"#f0f0f0\">\n"
+ "<h1 align = \"center\">" + title + "</h1>\n"
+ "<h2 align = \"center\">Gfg Session Information</h2>\n"
+ "<table border = \"1\" align = \"center\">\n"
+
"<tr bgcolor = \"#949494\">\n"
+ " <th>Session info</th><th>value</th>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>id</td>\n"
+ " <td>" + [Link]() + "</td>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>Creation Time</td>\n"
+ " <td>" + createTime + " </td>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>Time of Last Access</td>\n"
+ " <td>" + lastAccessTime + "</td>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>User ID</td>\n"
+ " <td>" + userID + "</td>"
+ "</tr>\n"
+
"<tr>\n"
+ " <td>Number of visits</td>\n"
+ " <td>" + visitCount + "</td>"
+ "</tr>\n"
+ "</table>\n"
+ "</body>"
+ "</html>");
}
}
File: [Link]
OUTPUT:
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.
6. Write Programs in Java to Create three – tier applications Using JSP and Databases
6a. ONLINE EXAMINATION USING JSP
AIM:
To create a three tier application for conducting online examination using JSP and database.
ALGORITHM:
1. Design the HTML page ([Link]) 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 ([Link]) as the value of the action attribute.
d) 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 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.
[Link]:
<%@page contentType="text/html" language="java" import="[Link].*"%>
<html>
<head>
<title>Online Exam Server</title>
<style type="text/css">
body{background-color:black;font-family:courier;color:blue}
</style>
</head>
<body>
<h2 style="text-align:center">ONLINE EXAMINATION</h2>
<p>
<a href="[Link]">Back To Main Page</a>
</p>
<hr/>
<%
String
str1=[Link]("ans1");
String
str2=[Link]("ans2");
String
str3=[Link]("ans3");
int mark=0;
[Link]("[Link]");
Connection con=[Link]("jdbc:odbc:examDS");
Statement stmt=[Link]();
ResultSet rs=[Link]("SELECT * FROM
examTab"); int i=1;
while([Link]())
{
if(i==1)
{
String dbans1=[Link](1);
if([Link](dbans1))
{
mark=mark+5;
}
}
if(i==2)
{
String
dbans2=[Link](1);
if([Link](dbans2))
{
mark=mark+5;
}
}
if(i==3)
{
String
dbans3=[Link](1);
if([Link](dbans3))
{
mark=mark+5;
}
}
i++
;
}
if(mark>=10)
{
[Link]("<h4>Your Mark Is : "+mark+"</h4>");
[Link]("<h3>Congratulations....! You Are Eligible For The Next
Round...</h3>");
}
else
{
[Link]("<h4>Your Mark is : "+mark+"</h4>");
[Link]("<h3>Sorry....!! You Are Not Eligible For The Next Round...</h3>");
}
%>
</form>
</body>
</html>
[Link]:
<html>
<head>
<title>Online Exam Client</title>
<style type="text/css">
body{background-color:black;font-family:courier;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="[Link]">
1. All computers must have <br/>
<input type="radio" name="ans1" value="Operating System">Operating System
<input type="radio" name="ans1" value="Application Software">Application Software
<input type="radio" name="ans1" value="CD Drive">CD Drive
<input type="radio" name="ans1" value="Microsoft word">Microsoft word
<br/><br/>
2. The term PC means <br/>
<input type="radio" name="ans2" value="Private Computer">Private Computer
<input type="radio" name="ans2" value="Professional Computer">Professional Computer
<input type="radio" name="ans2" value="Personal Computer">Personal Computer
<input type="radio" name="ans2" value="Personal Calculator">Personal Calculator
<br/><br/>
3. C was developed by?<br/>
<input type="radio" name="ans3" value="Dennis Ritchie">Dennis Ritchie
<input type="radio" name="ans3" value="Stroustrup">Stroustrup
<input type="radio" name="ans3" value="David Ritchie">David Ritchie
<input type="radio" name="ans3" value="Charles Babbage">Charles Babbage
<br/><br/>
<input type="submit" value="Check Your Result"/>
</form>
</body>
</html>
OUTPUT:
Result:
A three tier application for conducting online examination using JSP and database has been
successfully developed.
6 b. DISPLAYING STUDENT MARK LIST USING JSP
AIM:
To create a three tier application for displaying student mark list using JSP and database.
ALGORITHM:
1. Design the HTML page ([Link]) with the following
a) Create a form to get the input (Register Number) from the user.
b) Set the URL of the server ([Link]) as the value of the action attribute.
c) Use submit button to invoke the server and send the form data to the server.
2. Create the JSP file with the following
a) Read the parameter value (Register Number) from the form by using the method getParameter().
b) Server retrieves the details from the database table with respect to the form input.
c) Server displays the mark list to the client as the response.
[Link]:
<%@ page contentType="text/html" language="java" import="[Link].*"%>
<html>
<head>
<title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style>
</head>
<body>
<h2>EXAMINATION RESULT</h2><hr/>
<%
String str=[Link]("regno");
[Link]("[Link]");
Connection con=[Link]("jdbc:odbc:markDS");
Statement stmt=[Link]();
ResultSet rs=[Link]("SELECT*FROM markTab WHERE rno="+str);
while([Link]())
{
%>
Register No:<%=[Link](1)%><br/>
Name:<%=[Link](2)%><br/>
<table border="1">
<th>SUBJECT</th><th>Mark</th>
<tr><td>Network Programming and Management</td><td><%=[Link](3)%></td></tr>
<tr><td>Object Oriented Analysis and Design</td><td><%=[Link](4)%></td></tr>
<tr><td>Cryptography and Network Security</td><td><%=[Link](5)%></td></tr>
<tr><td>Embedded Systems</td><td><%=[Link](6)%></td></tr>
<tr><td>Web Technology</td><td><%=[Link](7)%></td></tr>
<tr><td>Software Requirement and Engineering</td><td><%=[Link](8)%></td></tr>
</table>
<%
%>
<br/>
<a href="[Link]">Back</a>
</body>
</html>
[Link]:
<html>
<head>
<title>Three Tier Application</title>
<style type="text/css">
body{color:blue;font-family:courier;text-align:center}
</style>
</head>
<body>
<h2>EXAMINATION RESULT</h2><hr/>
<form name="f1" method"GET"
action="[Link]"> Enter Your [Link]:
<input type="text"
name="regno"/><br/><br/>
<input type="submit" value="SUBMIT"/>
</form>
</body>
<html>
OUTPUT:
Result:
A three tier application for displaying student mark list using JSP and database has been developed. Create a
three tier application for displaying student mark list using JSP and database.
7. Programs using XML – Schema – XSLT / XSL
7a . Simple Xml File for Address Book
Aim :-
To create a simple XML document
Algorithm:
Step 1: Open notepad.
Step 2: Define root element as add book
Step 3: Define Element as details.
Step 4: Define sub element like name, DOB, city, state, pin code, work.
Step 5: Define attribute for the work as title and company.
Step 6: Close all the tag of subsequent element
Step 7: Save the file with .xml extension.
Step 8: Open Browser and open the XML file.
Code: (XML file)
<?xml version="1.0"?>
<addbook>
<details>
<name>Yuvaraj</name>
<DOB>2-january-1978</DOB>
<city>Chennai</city>
<state>Tamilnadu</state>
<pincode>600089</pincode>
<work title="Project Manager" company="TCS" city="Chennai"></work>
<phoneno>984002561</phoneno>
<email>yuvarajxp@[Link]</email>
</details>
<details>
<name>Venkatesh</name>
<DOB>30-March-1982</DOB>
<city>Ville Parle</city>
<state>Mumbai</state>
<pincode>876001</pincode>
<work title="HR" company="Wipro" city="Mumbai"></work>
<phoneno>9600560190</phoneno>
<email>venkat@[Link]</email>
</details>
</addbook>
OUTPUT:
Result: The XML Document executed successfully.
7 b. XML document with attributes
Aim :-
To create a simple XML document with attributes
Algorithm :
Step 1:Open notepad.
Step 2: Define root element as Address Book.
Step 3: Define Sub Element
Step 4: Define sub attributes like name, DOB, city, state, pin code, email and phone.
Step 5: Close all the tags
Step 6: Save the file with .xml extension.
Step 7: Open Browser and open the XML file.
XML Code:
<ADDRESSBOOK>
<PERSON1
Name="N
Krishnamoorthy"
Age="45"
Dob="06-02-1976"
Mobile="944339443"
Mail="krishnamoorthy@[Link]"
Streetname="Thiruneermalai Road"
Houseno="303"
Area="Thirumudivakkam"
Pincode="600044"
City="Chennai"
State="Tamilnadu"
/>
<PERSON2
Name="Balavinayagam"
Age="27"
Dob="09-06-1990"
Mobile="9600365435"
Mail="balavinayak@[Link]"
Streetname="North Car Street"
Houseno="77/99a"
Area="Rockfort"
Pincode="600002"
City="tiruchirappalli"
State="Tamilnadu"
/>
<PERSON3
Name="Sushmitha"
Age="47"
Dob="09-02-1970"
Mobile="9789548789"
Mail="Sushmi_67@[Link]"
Streetname="Haneefa
Colony" Houseno="548"
Area="Vaniyambadi"
City="Vaniyambadi"
State="Tamilnadu"
Pincode="625689"
/>
</ADDRESSBOOK>
OUTPUT:
Result:
The simple XML document for generating address book is done with the attributes.
7 c. XML SCHEMA
Aim :-
To create a XML Schema
Algorithm :
Step 1: Open editor /notepad for creating .dtd file for xml schema definition .
Step 2: Define the data types of elements which is to be defined in xml file.
Step3: Close the root element of .dtd file and save it.
Step 4: Open another editor/ notepad for xml file
Step 5: Define respected element as defined in the .dtd file and define the value.
Step6: Close all the subsequent elements tag.
Step 7: Save the file with .xml extension
Step 8: Open Browser and open the XML file.
XML SCHEMA
<?xml version="1.0"?>
<xs:schema>
<xmlns:xs="[Link]
schema" target
namespace="[Link]
element form default="qualified">
<xs:element name="to"type="xs:string"/>
<xs:element name="heading"type=xs:string"/>
<xs:element name="body"type="xs:string"/>
</xs:sequence>
</xs:complex type>
</xs:element>
</xs:schema>
XML file
<?xml version="1.0"?>
<note xmlns="[Link]
xmlns:xsi="[Link] schema_instance"
xsi:xmlSchemaLocation="http:/[Link] [Link]">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>don't forgot me</body>
</note
Result :-
A XML Schema has been created.
7d. XSLT transformation from XSL to XML (BOOK SHOP)
Aim: To create a simple XSLT transformation from XSL to XML.
Algorithm:
Step-1: Create a XSLT document using notepad.
Step-2: Using XSLT document, we can create a style sheet like Font Style, Font Size, bgcolor,..etc.
and write the following code:
Step-3: Save the document as :“[Link]”.
Step-4: Then create a XML document.
Step-5: Create a Link with the XSLT document using href tag=”[Link]” and write the
following code: Step-6: Save the document as “[Link]”.
Step-7: Then execute the xml file and view the output:
Coding:
XML File
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="[Link]"?>
<BooksforYou>
<Book BookID = "1000">
<Title>If Tomorrow Comes</Title>
<Rate>275</Rate>
<Author>Krishna Kumar</Author>
<Publication>Pearson</Publication>
<ISBN>111-222-333</ISBN>
</Book>
<Book BookID ="1001">
<Title>.NET Expert Guide</Title>
<Rate>475</Rate>
<Author>James</Author>
<Publication>Microsoft Press</Publication>
<ISBN>121-222-333</ISBN>
</Book>
<Book BookID ="1002">
<Title>C Projects</Title>
<Rate>275</Rate>
<Author>[Link]</Author>
<Publication>BPB Publications</Publication>
<ISBN>111-232-333</ISBN>
</Book>
<Book BookID ="1003">
<Title>Let us C</Title>
<Rate>225</Rate>
<Author>[Link]</Author>
<Publication>BPB Publications</Publication>
<ISBN>111-222-353</ISBN>
</Book>
<Book BookID ="1004">
<Title>Com and Beyond in VC++</Title>
<Rate>375</Rate>
<Author>[Link]</Author>
<Publication>BPB Publications</Publication>
<ISBN>111-555-333</ISBN>
</Book>
</BooksforYou>
//XSLT DOCUMENT
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheetxmlns:xsl="[Link]
version="1.0" >
<xsl:template match="/">
<html>
<body background="[Link]">
<h1 align="center">
<font color="blue">Books at your own Cyber Shoppe</font>
</h1>
<table border="4" cellpadding="10" cellspacing="5" align="center"
bgcolor="lightgreen" bordercolor="green">
<tbody>
<tr>
<th>Book ID</th>
<th>Title</th>
<th>Rate</th>
<th>Author</th>
<th>Publication</th>
<th>ISBN</th>
</tr>
<xsl:for-each select="BooksforYou/Book">
<tr>
<td><xsl:value-of select="@BookID"/></td>
<td><xsl:value-of select="Title"/></td>
<td><xsl:value-of select="Rate"/></td>
<td><xsl:value-of select="Author"/></td>
<td><xsl:value-of select="Publication"/></td>
<td><xsl:value-of select="ISBN"/></td>
</tr>
</xsl:for-each>
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
OUTPUT:
Result:
Thus the program to convert the simple XSLT transformation from XSL to XML has
been executed successfully.
CONTENT BEYOND SYLLABUS
8. Time-Table schedule using HTML
Aim:
To create a Time-Table schedule using HTML
Algorithm:
Step 1: Create a <html> tag.
Step 2: Create a table using the tags <table></table>.
Step 3: Create rows in the table using <tr>This is the row tag</tr>.
Step 4: Insert the data into rows using <td> Table Data</td> tags.
Step 5: Close the table tag.
Step 6: Close the HTML tag </html>.
Code:
<!DOCTYPE html>
<html>
<body>
<h1> TIME TABLE </h1>
<table border=”5” cellspacing=”0” align=”center”>
<!--<caption>Time Table<caption>-->
<tr>
<td align=”center” height=”50” width=”100”><br>
<b> Day/Period</b></br>
</td>
<td align=”center” height=”50” width=”100>
<b><br>9:30-10:20</b>
</td>
<td>
<td align=”center” height=”50” width=”100”>
<b>II<br>10:20-11:10</b>
</td>
<td align=”center” height=”50” width=”100”>
<b>III<br>11:10-12:00</b>
</td>
<td align=”center” height=”50” width=”100”>
<b>12:00-12:40</b>
</td>
<td align=”center” height=”50” width=”100”>
<b>IV<br>12:40-1.30</b>
</td>
<td align=”center” height=”50” width=”100”>
<b>V<br>1:30-02:20</b>
</td>
<td align=”center” height=”50” width=”100”>
<b>VI<br>02:20-03:10</b>
</td>
<td align=”center” height=”50” width=”100”>
<b>VII<br>03:10-04:00</b>
</td>
</tr>
<tr>
<td align=”center” height=”50”>
<b>Monday</b></td>
<td align=”center” height=”50”>Eng</td>
<td align=”center” height=”50”>Mat</td>
<td align=”center” height=”50”>Chem</td>
<td rowspan=”6” align=”center” height=”50”>
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan=”3” align=”center” height=”50”>LAB<td>
</tr>
<tr>
<td align=”center” height=’50”>
<b>Tuesday</b>
</td>
<td colspan=”3” align=”center” height=”50”>LAB</td>
<td align=”center” height=”50”>Eng</td>
<td align=”center” height=”50”>Chem</td>
<td align=”center” height=”50”>Mat</td>
<td align=”center” height=”50”>Sports</td>
</tr>
<tr>
<td align=”center” height=’50”>
<b>Wednesday</b>
</td>
<td align=”center” height=”50”>Mat</td>
<td align=”center” height=”50”>Phy</td>
<td align=”center” height=”50”>Eng</td>
<td align=”center” height=”50”>Chem</td>
<td colspan=”3” align=”center” height=”50”>LIBRARY
</td>
</tr>
<tr>
<td align=”center” height=’50”>
<b>Thursday</b>
</td>
<td align=”center” height=”50”>Phy</td>
<td align=”center” height=”50”>Eng</td>
<td align=”center” height=”50”>Chem</td>
<td colspan=”3” align=”center” height=”50”>LAB</td>
<td align=”Center” height=”50”>Mat</td>
</tr>
<tr>
<td align=”center” height=’50”>
<b>Friday</b>
</td>
<td colspan=”3” align=”center” height=”50”>LAB</td>
<td align=”center” height=”50”>Mat</td>
<td align=”center” height=”50”>Chem</td>
<td align=”center” height=”50”>Eng</td>
<td align=”Center” height=”50”>Phy</td>
</tr>
<tr>
<td align=”center” height=’50”>
<b>Saturday</b>
</td>
<td align=”center” height=”50”>Eng</td>
<td align=”center” height=”50”>Chem</td>
<td align=”center” height=”50”>Mat</td>
<td colspan=”3” align=”center” height=”50”>SEMINAR</td>
<td align=”Center” height=”50”>SPORTS</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Result:
Time-Table schedule has been developed using HTML
9. Profile Page
Aim:
Create a Profile page using HTML
Algorithm:
Step 1: Create a HTML Page with basic details
Step 2: Create a CSS (internal / external) for the HTML page.
Step 3: Use the image tag to display profile picture in HTML page
Step 4: Show case the details in HTML file
Step 5: Run the HTML file in any one of the supported browsers.
Step 6: Stop
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="[Link] ">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.title
{
color: grey;
font-size: 18px;
}
button
{
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white; background-
color: #000; text-align:
center; cursor: pointer;
width: 100%;
font-size: 18px;
}
a{
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">User Profile Card</h2>
<div class="card">
<img src="/[Link]" alt="Yuvaraj" style="width:100%">
<h1>Yuvaraj Natarajan</h1>
<p class="title">CEO & Founder, Findietech Private Limited</p>
<p>Findietech University</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<p><button>Contact</button></p>
</div>
</body>
</html>
OUTPUT:
Result: