SRI SHANMUGHA COLLEGE OF ENGINEERING AND

TECHNOLOGY
(An Autonomous Institution)
Pullipalayam, Morur (Po.), Sankari (Tk.), Salem (Dt.) - 637 304.

DEPARTMENT OF INFORMATION TECHNOLOGY

ACADEMIC YEAR: 2024-2025

EVEN SEMESTER

LAB RECORD

(REGULATION-2021)

CCS375 - WEB TECHNOLOGIES

NAME:

REGISTER NUMBER:

YEAR / SEMESTER:

BRANCH:
 SRI SHANMUGHA COLLEGE OF ENGINEERING AND
TECHNOLOGY
(An Autonomous Institution)
Pullipalayam, Morur (Po.), Sankari (Tk.), Salem (Dt.) - 637 304.

RECORD NOTE BOOK

REGISTER NUMBER : ……………………………………………

Certified that this is a Bonafide observation of Practical work done by Mr./Ms. ………………..

of the …………….………Semester .................................................................. Branch during the

Academic year………………………… in the ............................................................. Laboratory.

Submitted for the University Practical Examination held on……………………….

STAFF-IN-CHARGE HEAD OF THE DEPARTMENT

INTERNAL EXAMINER EXTERNAL EXAMINER

Vision and Mission of the Institute

VISION
To be an institute of repute in all fields of education by implementing the best
practices akin to global standards for fostering domain knowledge and developing
research attitude among students to make them globally competent.
MISSION
• Achieving excellence in Teaching & Learning process using state-of-the-art resources.
• Extending opportunity to upgrade faculty knowledge and skills.
• Implementing the best student training practices for requirements of industrial
scenario of the state.
• Motivating faculty and students in research activity for real time application.

Vision and Mission of the Department

VISION
To create the holistic environment for the development of Computer Science and
Engineering Graduates employable at the global level and to mould them through
comprehensive educational programs and quality research for developing their
competency and innovation with moral values.
MISSION

M1: Ensuring the academic growth by way of establishing centers of excellence and
promoting collaborative learning.

M2: Promoting research based projects in the emerging areas of technology

convergence for the benefit of students and faculty.

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

PEO 1: Basic Skills: Graduates work productively as successful Computer Professionals

with problem solving skills, core computing skills and soft skills with social awareness.

PEO 2: Technical Knowledge: Graduates engage in everlasting endeavor to promote

research and development.

PEO 3: Managerial skills: Graduates communicate effectively, recognize and incorporate

the societal needs in their profession by practicing their boundless skills with high regard
to ethical responsibilities.

PROGRAM SPECIFIC OBJECTIVES (PSOs)

A graduates of Computer Science and Engineering program of Sri Shanmugha College

of Engineering and Technology will demonstrate

PSO 1: An Ability to apply programming skills for solving real time problems in the
areas related to algorithms, data structures, cloud computing and data science.

PSO 2: An ability to develop high quality software products by using cutting edge
technology.
 TABLE OF CONTENTS

PAGE
S.NO DATE NAME OF THE EXPERIMENT NO MARKS SIGN
Ex.No:1
Date:
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:

1. Create a html file with map tag.

2. Set 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:

ImageMap.html
<HTML>
<HEAD>
<TITLE>Image Map</TITLE> </HEAD>
<BODY>
<img src="india_map.jpg" usemap="#metroid" ismap="ismap" > <map name="metroid"
id="metroid">
<area href="TamilNadu.html" shape="circle" coords="208,606,50" title="TamilNadu"/>
<area href="Karnataka.html" shape="rect" coords = "130,531,164,535" title ="Karnataka" />
<area href="AndhraPradesh.html" shape="poly" coords =
"227,490,238,511,230,536,198,535,202,503" title ="Andhra Pradesh" />
<area href="Kerala.html" shape="rect" coords = "154,606,166,621" title ="Kerala" /> </map>
</BODY>
</HTML>
TamilNadu.html
<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='ImageMap.html'>India Map</a>
</BODY>
</HTML>
Karnataka.html
<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='ImageMap.html'>India Map</a>
</BODY>
</HTML>
AndhraPradesh.html
<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='ImageMap.html'>India Map</a>
</BODY>
</HTML>
Kerala.html
<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='ImageMap.html'>India Map</a>
</BODY></HTML>
Note:
Store the image (India_map.jpg) in current folder
Output

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.
Ex.No:2
Date: CREATE A WEB PAGE THAT DISPLAYS COLLEGE INFORMATION
USING VARIOUS STYLE SHEET
Aim:

To create a web page that displays college information using various style sheet

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:

XYZ.CSS:

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="xyz.css" 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>St.Anne’s College of Engineering and Technology </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">St.Anne’s College <br>It is approved by AICTE(All India Council for
Technical Education). It is affliated to Anna University.<br></p>
<h2 class="vid"> St.Anne’s college of engineering </h2> <br>
<font>It is an ISO certified Institution
</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>S.NAME</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.
Ex.No:3
Date:
VALIDATING WEB FORM 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(document.validate.name.value=="")
{
alert("enter the full name")
document.validate.name.focus();
return false
}
if(!isNaN(document.validate.name.value))
{
alert("enter the valid name");
document.validate.name.focus();
document.validate.name.value="";
return false
}
if(document.validate.day.value=="0")
{
alert("enter the day")
document.validate.day.focus();
return false
}
if(document.validate.month.value=="0")
{
alert("enter the month")
document.validate.month.focus();
return false
}
if(document.validate.year.value=="0")
{
alert("enter the year")
document.validate.year.focus();
return false
}
if(document.validate.gender.value=="0")
{
alert("enter the gender")
document.validate.gender.focus();
return false
}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();
return false
}
if(document.validate.city.value=="")
{
alert("enter the city")
document.validate.city.focus();
return false
}
if(!isNaN(document.validate.city.value))
{
alert("enter the valid City")
document.validate.city.focus();
document.validate.city.value="";
return false
}
if(document.validate.state.value=="")
{
alert("enter the state")
document.validate.state.focus();
return false
}
if(!isNaN(document.validate.state.value))
{
alert("enter the valid state")
document.validate.state.focus();
document.validate.state.value="";
return false
}
if(document.validate.pincode.value=="")
{
alert("enter the pincode ")
document.validate.pincode.focus();
return false
}
if( isNaN(document.validate.pincode.value))
{
alert("enter a valid pincode")
document.validate.pincode.focus();
return false
}
if(document.validate.pincode.value.length!=6)
{
alert("please enter the valid pincode")
document.validate.pincode.focus();
return false
}
if(document.validate.address.value=="")
{
alert("enter the address")
document.validate.address.focus();
return false
}
if(document.validate.email.value=="")
{
alert("enter the email id")
document.validate.email.focus();
return false
}
if(!(document.validate.email.value==""))
{
var x=document.validate.email.value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
document.validate.email.focus();
return false;
}
}
if(document.validate.mobile.value=="")
{
alert("enter the mobile no")
document.validate.mobile.focus();
return false
}
if( isNaN(document.validate.mobile.value))
{
alert("enter a valid mobile no")
document.validate.mobile.focus();
document.validate.mobile.value="";
return false
}
if(document.validate.mobile.value.length !=10)
{
alert("enter the valid mobile no")
document.validate.mobile.focus();
document.validate.mobile.select();
return false
}
if(document.validate.qualification.value=="0")
{
alert("enter the qualification")
document.validate.qualification.focus();
return false
}
if(document.validate.experience.value=="0")
{
alert("enter the experience")
document.validate.experience.focus();
return false
}
if(document.validate.project.value=="")
{
alert("enter the project description")
document.validate.project.focus();
return false
}
if(document.validate.salary.value=="")
{
alert("enter the salary ")
document.validate.salary.focus();
return false
}
if( isNaN(document.validate.salary.value))
{
alert("enter a valid salary")
document.validate.salary.focus();
document.validate.salary.value="";
return false
}
}

</script>
</head>

<body>
<div id="Layer1">
<form id="validate" name="validate" method="post" action="">
<p>&nbsp;</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">&nbsp;</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">&nbsp;</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.
Ex.No:4
Date: INSTALL APACHE WEB SERVER ON UBUNTU
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: http://local.server.ip.

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 127.0.0.1 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.
Ex.No:5
Date: INVOKING SERVLETS FROM HTML FORM
AIM:

To write a java program to invoke servlets from HTML form.

ALGORITHM:

client.html
(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.
server.java
(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.

server.java:
import java.io.*;
import java.util.*;
import javax.servlet.*;
public class server extends GenericServlet
{
public void service(ServletRequest req,ServletResponse res)throws ServletException,IOException
{
PrintWriter pw=res.getWriter();
pw.print("<h3>Registration Successful...</h3>");
Enumeration e=req.getParameterNames();
while(e.hasMoreElements())
{
String str1=(String)e.nextElement();
String str2=req.getParameter(str1);
pw.print(str1+"="+str2+"<br/>");
}
pw.close();
}
}

web.xml:
<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>

Client.HTML:

<html>
<head>
<title>Invoking Servlet From HTML</title>
</head>
<body bgcolor="violet">
<form name="form1" method="post" action="http://localhost:8080/servlets1/server">
<fieldset>
<legend>Registration</legend>
Enter E-mail&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
<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.
 Ex.No:6
Date:
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 (ExamClient.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.
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.

ExamServer.jsp:

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

<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="ExamClient.html">Back To Main Page</a>
</p>
<hr/>
<%
String str1=request.getParameter("ans1");
String str2=request.getParameter("ans2");
String str3=request.getParameter("ans3");
int mark=0;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:examDS");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("SELECT * FROM examTab");
int i=1;
while(rs.next())
{
if(i==1)
{
 String dbans1=rs.getString(1);
if(str1.equals(dbans1))
{
mark=mark+5;
}
}
if(i==2)
{
String dbans2=rs.getString(1);
if(str2.equals(dbans2))
{
mark=mark+5;
}
}
if(i==3)
{
String dbans3=rs.getString(1);
if(str3.equals(dbans3))
{
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>

ExamClient.HTML:

<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="ExamServer.jsp">
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>

Result:

A three tier application for conducting online examination using JSP and database has been
successfully developed.
Ex.No:6
Date: 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 (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>
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>
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.
Ex.No:7
Date:
7.a. SIMPLE XML FILE FOR ADDRESS BOOK
Aim :-
To create a simple XML document

Algorithm :

Step 1: open notepad.

Step 2: define root element as addbook
Step 3: Define Element as details.
Step 4: define sub element like name,DOB,city,state,pincode, 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 7: 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@gmail.com</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@gmail.com</email>
</details>
</addbook>
Output:

Result:

The XML Document executed successfully.

Ex.No:7
Date:
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 ADDRESSBOOK
Step 3: Define Sub Element .
Step 4: define sub attributes like name, DOB, city, state, pincode, email, 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@yahoo.com"
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@yahoo.com"
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@gmail.com"
Streetname="Haneefa Colony"
Houseno="548"
Area="Vaniyambadi"
Pincode="625689"
City="Vaniyambadi"
State="Tamilnadu"
/>
</ADDRESSBOOK>

Output:

Result:

The simple XML document for generating address book is done with the attributes.
Ex.No:7
Date:
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.
Step 3: 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="http://www.w3.org/2001/XMLNS schema"
target namespace="http://www.w3schools.com
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="http://www.w3cschools.com"
xmlns:xsi="http://www.w3.org/2001/XMLNS schema_instance"
xsi:xmlSchemaLocation="http:/w3cschoools.com note.xsd">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>don't forgot me</body>
</note
Result :-

A XML Schema has been created.

Ex.No:7
Date:
7 d. 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 :“style.xsl”.
Step-4: Then create a XML document.
Step-5: Create a Link with the XSLT document using href tag=”style.xsl” and write the following code:
Step-6: Save the document as “Book.xml”.
Step-7: Then execute the xml file and view the output:

Coding:
XML File
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<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>YashwantP.Kanetkar</Author>
<Publication>BPB Publications</Publication>
<ISBN>111-232-333</ISBN>
</Book>
<Book BookID ="1003">
<Title>Let us C</Title>
<Rate>225</Rate>
<Author>YashwantP.Kanetkar</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>YashvantP.Kanetkar</Author>
<Publication>BPB Publications</Publication>
<ISBN>111-555-333</ISBN>
</Book>
</BooksforYou>
//XSLT DOCUMENT
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheetxmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0" >
<xsl:template match="/">
<html>
<body background="tech.gif">
<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>
 `

Result:
Thus the program to convert the simple XSLT transformation from XSL to XML has been
executed successfully