SYLLABUS

CCS375 WEB TECHNOLOGIES L T P C

2 0 2 3
COURSE OBJECTIVES:
 To understand different Internet Technologies
 To learn java-specific web services architecture
 To Develop web applications using frameworks
UNIT I WEBSITE BASICS, HTML 5, CSS 3, WEB 2.0 7
Web Essentials: Clients, Servers and Communication – The Internet – World wide web – HTTP Request
Message – HTTP Response Message – Web Clients – Web Servers – HTML5 – Tables – Lists – Image –
HTML5 control elements – Drag and Drop – Audio – Video controls - CSS3 – Inline, embedded and
external style sheets – Rule cascading – Inheritance – Backgrounds – Border Images – Colors – Shadows
– Text – Transformations – Transitions – Animations. Bootstrap Framework
UNIT II CLIENT SIDE PROGRAMMING 6
Java Script: An introduction to JavaScript–JavaScript DOM Model-Exception Handling-Validation-Built-
in objects-Event Handling- DHTML with JavaScript- JSON introduction – Syntax – Function Files.
UNIT III SERVER SIDE PROGRAMMING 5
Servlets: Java Servlet Architecture- Servlet Life Cycle- Form GET and POST actions- Session Handling-
Understanding Cookies- DATABASE CONNECTIVITY: JDBC
UNIT IV PHP and XML 6
An introduction to PHP: PHP- Using PHP- Variables- Program control- Built-in functions- Form
Validation. XML: Basic XML- Document Type Definition- XML Schema, XML Parsers and Validation,
XSL
UNIT V INTRODUCTION TO ANGULAR and WEB APPLICATIONS FRAMEWORKS 6
Introduction to Angular JS, MVC Architecture, Understanding ng attributes, Expressions and data
binding, Conditional Directives, Style Directives, Controllers, Filters, Forms, Routers, Modules, Services;
Web Applications Frameworks and Tools – Firebase- Docker- Node JS- React- Django - UI & UX.
COURSE OUTCOMES:
CO1: Construct a basic website using HTML and Cascading Style Sheets
CO2: Build dynamic web page with validation using Java Script objects and by applying different event
handling mechanisms.
CO3: Develop server side programs using Servlets.
CO4: Construct simple web pages in PHP and to represent data in XML format.
CO5: Develop interactive web applications.
30 PERIODS
PRACTICAL EXERCISES: 30 PERIODS
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:60 PERIODS
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
 CCS375 WEB TECHNOLOGIES LABORATORY

TABLE OF CONTENTS
Ex Marks
Pag
. Aim Outpu
Date Program Title e Prg. Viv Tota Sign
No & t&
No. Exe. a l
. Algo Result
1. Image Mapping in Html

2. College Information System Using Style Sheet

3. Credit Card Pages Validation Using JavaScript

4. Installation of Apache Tomcat Web Server

5. (i) Invoking Servlets from Html Form

(ii) Session Tracking Using Hidden Form Fields

6. On-Line Examination Using JSP

7. Creation of Xml Document

Ex. No. 1

IMAGE MAPPING IN HTML

QUESTION:

Create a web page with the following using HTML

a. To embed a map in a web page
b. To fix the hot spots in that map
c. Show all the related information when the hot spots are clicked.

AIM:

To create a web page which includes a map and display the related
information when a hot spot is clicked in the map.

PROBLEM DESCRIPTION:

Image mapping:
 An image map is an image with clickable areas.
 In image mapping an image is specified with certain set of
coordinates inside the image which act as hyperlink areas to
different destinations.
Elements required:
 The HTML <map> tag defines an image map.
 Three basic html elements required for creating a mapped image.
 Map: Used to create map of the image with clickable areas
 Img: Used to display image
 Area: Used within the map for defining clickable areas

PROCEDURE:

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.

1
CODING:

Imagemap.html

<!DOCTYPE html>
<html>
<head>
<Title> Image Mapping </Title>
<h3><center>Mapping an Image </center></h3>
<body>
<p>Click on Continents to know about them</p>
<img src = "D:\world-map-151576_960_720.png" width="960" height =
"492" alt = "World Map" usemap = "#worldmap">

<map name="worldmap">
<area shape="rect" coords="184, 36, 272, 158" alt="north america"
href="https://en.wikipedia.org/wiki/North_America">
<area shape="rect" coords="282, 215, 354, 367" alt="south america"
href="https://en.wikipedia.org/wiki/South_America">
<area shape="rect" coords="506, 151, 570, 333" alt="africa"
href="https://en.wikipedia.org/wiki/Africa">
<area shape="rect" coords="618, 42, 791, 162" alt="asia"
href="https://en.wikipedia.org/wiki/Asia">
<area shape="rect" coords="509, 44, 593, 110" alt="europe"
href="https://en.wikipedia.org/wiki/Europe">
<area shape="rect" coords="786, 288, 862, 341" alt="australia"
href="https://en.wikipedia.org/wiki/Australia_(continent)">
<area shape="rect" coords="249, 463, 760, 488" alt="antartica"
href="https://en.wikipedia.org/wiki/Antarctica">
</map>

</body>
</html>

2
OUTPUT:

3
RESULT:

4
Ex. No. 2

TYPES OF CASCADING STYLE SHEET

QUESTION:

Create a web page with the following.

a. Cascading style sheets.
b. Embedded style sheets.
c. Inline style sheets. Use our college information for the web
pages.

AIM:

To create a web page for our college which includes Cascading

style sheet, Embedded style sheet and Inline Style sheet.

PROBLEM DESCRIPTION:

Web Page:
 A webpage is a document written in Hyper Text Markup Language
and can be viewed on any web browser.
 A web page is a structured document that primarily consists of
hypertext, text with hyperlinks.
 It is contained within the web server, which can be accessed by
entering the URL for that web page, and once it is loaded, it appears
on the user's web browser.
Elements required:
 The <style> tag is used to define style information (CSS).
 Inside the <style> element specify how HTML elements should
render in a browser.
 CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements.
 Internal - by using a <style> element in the <head> section.
 External - by using a <link> to link to an external CSS file.

PROCEDURE:

1. Create a CSS file with Styles.

2. Create a html file with college information.
3. Run the HTML file

5
CODING:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2nd Program</title>

<!--External Style Sheet -->

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

<!--Internal Style Sheet -->

<style>
*{
padding: 0px;
margin: 0px;
}
nav{
display:flex;
background-color: aqua;
justify-content: space-between;
padding: 5px;
}
.nav-items {
display:inline-flex;
height:3rem;
width:80px;
align-items: center;
justify-content: center;
border-radius: 10px;
}
</style>
</head>
6
<body>
<nav>
<!--Inline Styles -->
<div class="nav-container" style="display: flex;align-items:
center;">
<img src="./logo.png" alt="College logo" style="height:3rem;
margin-right : 10px; width:4rem;margin-left: 1rem;">
<h2>Jai Shriram Engineering College</h2>
</div>
<div class="nav-container">
<ul>
<li class="nav-items" style="background-color: wheat; color:
black"> Home</li>
<li class="nav-items">Branch</li>
<li class="nav-items">Course</li>
<li class="nav-items">Profile</li>
</ul>
</div>
</nav>
<div id="body-content">
<div id="sidebar">
<button class="side-items">Students List</button><br>
<button class="side-items">Placement</button><br>
<button class="side-items">College Profile</button><br>
<button class="side-items">Companies</button><br>
<button class="side-items">About Barani Hydraulics India
Private Limited</button>
</div>
<div id="content">
<h4>To provide value added education in engineering,
technology and management by elevating the student community with
state-of-the art infrastructure facilities, interactive teaching, learning
techniques and hands-on training through our own industry support. Jai
Shriram Engineering College was endowed by Shenthil Velevan Trust in
7
the year 2009 with a motto of equipping and implanting the seed of
higher education blended with communal harmony to the rural
community in and around the Textile City. JSREC reinforces to impart
knowledge which are innards of a meaningful life.</h4>
</div>
</div>
</body>
</html>

style.css
#body-content {
display:flex;
}
#sidebar {
padding:10px;
background-color: rgb(0, 217, 255);
height:88vh;
}
.side-items:hover{
background-color: rgb(0, 255, 255);
}
.side-items {
border-radius: 10px;
height:4rem;
width:18rem;
background-color: transparent;
border: 1px solid white;
margin-top: 3px;
font-size: 17px;
}
#content{
width:100%;
background-color: rgb(231, 231, 247);
display: flex;
8
 align-items: center;
justify-content: center;
padding:50px;
text-align: center;
font-size: 25px;
}

OUTPUT:

RESULT:

9
Ex. No. 3
CLIENT-SIDE SCRIPTS FOR VALIDATING WEB FORM
CONTROLS USING DHTML.

QUESTION:

Client-Side Scripts for Validating Web Form Controls using DHTML.

AIM:

To validate Web Form Controls using DHTML.

PROBLEM DESCRIPTION:

 HTML is used to create the form.

 CSS to design the layout of the form.
 JavaScript to validate the form.

Forms

 Forms are used on webpages for the user to enter their required
details that further send to the server for processing.
 A form is also known as a web form or HTML form.

JavaScript:
 JavaScript makes HTML pages more dynamic and interactive.
 JavaScript is a scripting language that enables you to create
dynamically updating content, control multimedia, animate images,
etc.
 JavaScript is a text-based programming language that can be used
both server-side and client-side in our net applications.
 JavaScript is used for developing web pages with more interactive
and user-friendly.
Elements required:
 <form>
 <script>
 <label>
 <input>
 <div>
 <style>

PROCEDURE:

10
 1. Static web pages of an online Book store is developed with
following pages.
Home page
Registration and user Login
User profile page
Books catalogue
Payment by credit card
2. Each input box in webpage is validated using java script code
using <script> tag in html file.
3. Designed output is displayed.

CODING:
<html>
<head>
<title>A Simple Form with JavaScript Validation</title>
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.contact_form.contact_name.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
if ( document.contact_form.contact_name.value != "" )
{
alert ( "Succesfull" );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="contact_form" method="post" onSubmit="return
validate_form ( );">
Please Enter Your Name
<p>Your Name: <input type="text" name="contact_name"></p>
<p><input type="submit" name="send" value="Send Details"></p>
</form>
</body>
</html>
11
OUTPUT:

RESULT:

12
Ex. No. 4

INSTALLATION OF APACHE TOMCAT WEB SERVER

QUESTION:

Installation of Apache Tomcat web server

AIM:

To install Apache Tomcat Web Server

PROBLEM DESCRIPTION:

Apache Tomcat:
 Apache Tomcat is an open-source web server and servlet container
for Java code.
 Tomcat executes programs written in the Java programming
language, and it implements many Java EE specifications, including
Jakarta Servlet, Jakarta Server Pages, and others.
Prerequisites:
 Java JRE installed and configured
 Administrator privileges

PROCEDURE:

Step 1: Download Tomcat for Windows

To download the Tomcat installation file, follow the steps below:
1. Browse to the official Apache Tomcat website.
2. Locate the Download section and click the latest Tomcat
version available.
3. On the Download page, scroll down and locate the Binary
Distributions area.
4. In the Core list, depending on the installation type you prefer, click
the download link for the Windows Service Installer or
the 32bit/64bit Windows zip file.

13
Step 2: Install Tomcat
14
Install Tomcat via the Windows Service Installer for an automated
and wizard-guided experience.
The service installer installs the Tomcat service and runs it
automatically when the system boots.
For a portable experience, install Tomcat using the zip file and avoid
installing the service.
Easily uninstall Tomcat when it is no longer needed by deleting the
Tomcat directory, or move it around when necessary.

Method 1: Install Tomcat Using the Windows Service Installer

Follow the steps below to install Tomcat using the Windows Service
Installer.
1. Open the downloaded Windows Service Installer file to start the
installation process.
2. In the Tomcat Setup welcome screen, click Next to proceed.

3. Read the License Agreement and if you agree to the terms, click I
Agree to proceed to the next step.

15
4. In the Tomcat component selection screen, choose Full in the
dropdown menu to ensure the wizard installs the Tomcat Host Manager
and Servlet and JSP examples web applications.
Alternatively, keep the default Normal installation type and click Next.

5. The next step configures the Tomcat server. For instance, enter
the Administrator login credentials or choose a
different connection port. When finished, click Next to proceed to the
next step.

16
6. The next step requires you to enter the full path to the JRE directory
on your system. The wizard auto-completes this if you have
previously set up the Java environment variables.
Click Next to proceed to the next step.

7. Choose the Tomcat server install location or keep the default one and
click Install.

17
8. Check the Run Apache Tomcat box to start the service after the
installation finishes.
Optionally, check the Show Readme box to see the Readme file. To
complete the installation, click Finish.

18
9. A popup window appears that starts the Tomcat service. After the
process completes, the window closes automatically. The Apache
Tomcat web server is now successfully installed

RESULT:

19
Ex. No. 5
(i) INVOKING SERVLETS FROM HTML FORM

QUESTION:

Write program in Java using Servlets:

i. To invoke servlets from HTML forms.

AIM:

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

PROBLEM DESCRIPTION:

Java:
 Java is a widely used programming language for coding web
applications.
 Java is a multi-platform, object oriented and network centric
language that can be used as a platform in itself.
Servlet:
 Servlet is an application that is running on a server.
 Servlet is a Java programming language class that is used to extend
the capabilities of servers that host applications accessed by means
of a request-response programming model.
 There are two main types of servlets as Generic and HTTP servlet.
Elements required:
 <form>
 <script>
 <label>
 <input>
 <div>
 <style>
PROCEDURE:
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.

20
server.java:
1. Define the class server that extends the property of the class
HttpServlet
2. Handle the request from the client by using the method service()
of HttpServlet 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.
CODING:
MySrv.java:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MySrv extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01
Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
//Getting HTML parameters from Servlet
String username=request.getParameter("uname");
String password=request.getParameter("pwd");
if((username.equals("user")) && (password.equals("pswd")))
{
out.println(" <h1> Welcome to "+username);
}
else
{

21
out.println(" <h1> Registration success ");
out.println(" <a href='./index.html'> Click for Home page </a>");
}
out.println(" </BODY>");
out.println("</HTML>");
out.close();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost( request,response);
}
}

Registration.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY bgcolor='#e600e6'>
<form action='./MySrv' method="post"><center> <h1> <u> Login Page
</u></h1>
<h2> Username : <input type="text" name="uname"/>
Password : <input type="password" name="pwd"/>
<input type="submit" value="click me"/>
</center>
</form>
</body>
</HTML>
web.xml:
<web-app>
<servlet>
<servlet-name>MySrv</servlet-name>
<servlet-class>MySrv</servlet-class>
22
</servlet>
<servlet-mapping>
<servlet-name>MySrv</servlet-name>
<url-pattern>/MySrv</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

OUTPUT:

RESULT:

23
Ex. No. 5
(ii) SESSION TRACKING USING HIDDEN FORM FIELDS

QUESTION:

Write program in Java using Servlets:

ii. Session tracking using hidden form fields and Session tracking for a
hit count

AIM:

To write a Java Program for Session Tracking Using Hidden Form

Fields.

PROBLEM DESCRIPTION:

Java:
 Java is a widely used programming language for coding web
applications.
 Java is a multi-platform, object oriented and network centric
language that can be used as a platform in itself.
Servlet:
 Servlet is an application that is running on a server.
 Servlet is a Java programming language class that is used to extend
the capabilities of servers that host applications accessed by means
of a request-response programming model.
 There are two main types of servlets as Generic and HTTP servlet.
Session ID:
 A session ID is a unique identification string usually a long, random
and alpha-numeric string, that is transmitted between the client and
the server.
 Session IDs are usually stored in the cookies, URLs (in case url
rewriting) and hidden fields of Web pages.
 Common mechanisms used for session tracking are Cookies,
SSLsessions, URL- rewriting
Elements required:
 <form>
 <script>
 <label>

24
 <input>
 <div>
 <style>
PROCEDURE:
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. Ask if the user wants to add more items or check out.
4. Include the current items as hidden fields so they'll be passed on
and submit to self.
CODING:
register.html:
<html>
<body bgcolor = "cyan">
<center>
<h1>WELCOME TO REGISTRATION PAGE</h1>
<form action="./registerone" METHOD="post">
Name: <input type="text" name = "name"><br><br>
Password: <input type="password" name="password"><br><br>
PROFESSION:
<select name="profession">
<option value="engineer">ENGINEER</option>
<option value="teacher">TEACHER</option>
<option value="businessman">BUSINESSMAN</option>
</select><br><br>
<input type="submit" value="REGISTER">
</form>
</center>
</body>
</html>

web.xml
<web-app>
<welcome-file-list>
<welcome-file>register.html</welcome-file>
25
</welcome-file-list>
<servlet>
<servlet-name>RegistrationServletOne</servlet-name>
<servlet-class>RegistrationServletOne</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegistrationServletOne</servlet-name>
<url-pattern>/registerone</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>RegistrationServletTwo</servlet-name>
<servlet-class>RegistrationServletTwo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegistrationServletTwo</servlet-name>
<url-pattern>/registertwo</url-pattern>
</servlet-mapping>
</web-app>

RegistrationServletOne.java:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegistrationServletOne extends HttpServlet
{
public void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException
{
String name = request.getParameter("name");
26
String password = request.getParameter("password");
String profession = request.getParameter("profession");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body bgcolor = wheat>");
out.println("<center>");
out.println("<h1>COMPLETE THE REGISTRATION</h1>");
out.println("<form action = ./registertwo method = post");
out.println("<input type = hidden name = name value =" + name +
">");
out.println("<input type = hidden name = password value =" +
password + ">");
out.println("<input type = hidden name = profession value =" +
profession + ">");
out.println("EMAIL ID:<input type =text name = email><br><br>");
out.println("PHONE NO:<input type =text name = cell><br><br>");
out.println("<input type =submit value=registernow>");
out.println("</center>");
out.println("</body></html>");
out.close();
}
}

RegistrationServletTwo.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegistrationServletTwo extends HttpServlet
{
public void doPost(HttpServletRequest request, HttpServletResponse
response)
27
throws ServletException, IOException
{
String name = request.getParameter("name");
String password = request.getParameter("password");
String profession = request.getParameter("profession");
String email = request.getParameter("email");
String cell = request.getParameter("cell");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body bgcolor = wheat>");
out.println("<center>");
out.println("<h1>REGISTRATION SUCCESSFUL..........</h1>");
out.println("</center>");
out.println("</body></html>");
out.close();
}
OUTPUT:

28
RESULT:

29
Ex. No. 6
ON-LINE EXAMINATION USING JSP

QUESTION:
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.

AIM:

To write program in Java to create three-tier applications using JSP

and databases for conducting online examination for displaying student
mark list.

PROBLEM DESCRIPTION:

Java:
 Java is a widely used programming language for coding web
applications.
 Java is a multi-platform, object oriented and network centric
language that can be used as a platform in itself.
JSP
 It stands for Java Server Pages.
 It is a server-side technology.
 It is used for creating web application.
 It is used to create dynamic web content.
 In this JSP tags are used to insert JAVA code into HTML pages.
 It is an advanced version of Servlet Technology.
 It is a Web based technology helps us to create dynamic and
platform-independent web pages.
 In this, Java code can be inserted in HTML/ XML pages or both.
 JSP is first converted into servlet by JSP container before
processing the client’s request.
PROCEDURE:
Steps for Creating Data Source for Microsoft Access drivers
1. Go to Control Panel and Select Administrative Tools and then select
Data Source ODBC icon. (or)

30
Go to Run (Press Window+R) and type odbcad32.exe to go Data Source
ODBC.
2.Press Add Button.
3.Choose the driver for Microsoft Access.
4.Then, Press Finish Button.
5.Type Data Source Name as ExamStudent.
6.Then Press "Select Button" and choose the database file which is
created already.
7.Then, Press "OK" Button to complete the process.

Steps for Creating Database and table for this Program:

1.Create Ms Access File in any Name
2.Then Open it.
3.Create the table in the name of StudentTable With following
columns Seat_no, Name, Marks

Schema for the Table:

Field name DataType
Seat_no Number
Name Text
Marks Number

CODING:
// OnlineExam.jsp
<%@ page language="java" import="java.sql.*" %>
<%@ page import="java.io.*" %>
<%@ page import="java.util.*" %>

<%
String SeatNum,Name;
String ans1,ans2,ans3,ans4,ans5;
int a1,a2,a3,a4,a5;
a1=a2=a3=a4=a5=0;
Connection connect=null;
31
Statement stmt=null;
ResultSet rs=null;
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String url = "jdbc:odbc:ExamStudent";
connect = DriverManager.getConnection(url," "," ");
if(request.getParameter("action")!=null)
{
SeatNum = request.getParameter("Seat_no");
Name = request.getParameter("Name");
ans1 =request.getParameter("group1");
if(ans1.equals("True"))
a1=5;
else
a1=0;
ans2 = request.getParameter("group2");
if(ans2.equals("True"))
a2=0;
else
a2=5;
ans3 = request.getParameter("group3");
if(ans3.equals("True"))
a3=0;
else
a3=5;
ans4 = request.getParameter("group4");
if(ans4.equals("True"))
a4=5;
else
a4=0;
ans5 = request.getParameter("group5");
if(ans5.equals("True"))
a5=0;
else
32
a5=5;
int Total=a1+a2+a3+a4+a5;
stmt = connect.createStatement();
String query = "INSERT INTO StudentTable (" + "Seat_no,Name,Marks"
+ ")
VALUES ('" +SeatNum + "', '" + Name + "', '"+Total+ "')";
int result = stmt.executeUpdate(query);

stmt.close();
stmt = connect.createStatement();
query = "SELECT * FROM StudentTable WHERE Name="+"'"+Name+"'";
rs = stmt.executeQuery(query);
%>
<html><head><title>Student Mark List</title></head>
<body bgcolor=khaki>
<center>
Students Marksheet
Name of the College : JAI SHRIRAM ENGINEERING COLLEGE
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><b>Seat_No</b></td>
<td><b>Name</b></td>
<td><b>Marks</b></td>
</tr>
<%
while(rs.next())
{
%>
<tr>
<td><%=rs.getInt(1)%></td>
<td> <%=rs.getString(2)%></td>
<td> <%=rs.getString(3)%></td>
</tr>

33
<%
}
rs.close();
stmt.close();
connect.close();
%>
</table>
</center>
<br/> <br/><br/>
<table>
<tr><td><b>Date:<%=new java.util.Date().toString() %></td></tr>
<tr><td><b>Signature: X.Y.Z. <b></td></tr>
</table>
<div>
Click here to go back
</body>
</html>
<%}else{%>
<html>
<head><title>Online Examination</title>
<script language="javascript">
function validation(Form_obj)
{
if(Form_obj.Seat_no.value.length==0)
{
alert("Please,fill up the Seat Number");
Form_obj.Seat_no.focus();
return false;
}
if(Form_obj.Name.value.length==0)
{
alert("Please,fill up the Name");
Form_obj.Name.focus();
34
return false;
}
return true;
}
</script>
</head>
<body bgcolor=lightgreen>
<center>
Online Examination
</center>
<form action="OnlineExam.jsp" method="post"
name="entry" onSubmit="return validation(this)">
<input type="hidden" value="list" name="action">
<hr/>
<table>
<tr>
<td>
Seat Number : </td>
<td><input type="text" name="Seat_no"></td>
</tr>
<tr>
<td>
Name : </td>
<td><input type="text" name="Name" size="50"></td>
</tr>
<tr>
<td><b>Total Marks:5*5=25 </b></td>
<td></td><td></td><td></td><td><b>Time: 15 Min.</b></td>
</tr>
</table>
<hr/>
<b>1. XML enables you to collect information once and reuse it in a
variety of ways.</b><br/>
35
<input type="radio" name="group1" value="True">True
<input type="radio" name="group1" value="False">False<br>
<br/>

<b>2. In Modern PC there is no cache memory.</b><br/>

<input type="radio" name="group2" value="True">True
<input type="radio" name="group2" value="False">False<br>
<br/>
<b>3. JavaScript functions cannot be used to create script fragments
that can be used over and over again</b><br/>
<input type="radio" name="group3" value="True">True
<input type="radio" name="group3" value="False">False<br>
<br/>
<b>4.The DriverManager class is used to open a connection to a
database via
a JDBC driver.</b><br/>
<input type="radio" name="group4" value="True">True
<input type="radio" name="group4" value="False">False<br>
<br/>
<b>5. The JDBC and ODBC does not share a common parent</b><br/>
<input type="radio" name="group5" value="True">True
<input type="radio" name="group5" value="False">False<br>
<hr/>
<center>
<input type = "submit" value="Submit">
<input type = "reset" value="Clear"><br><br>
</center>
</form>
<%}%>

36
RESULT:

37
Ex. No. 7

CREATION OF XML DOCUMENT

QUESTION:

Create and save an XML document at the server, which contains 10

users Information. Write a Program, which takes user Id as an input and
returns the User details by taking the user information from the XML
document

AIM:

To create and save an XML document at the server, which contain

some users information. To develop Java Program takes user id as an
input and returns the user details by taking the user information from
the XML document.

PROBLEM DESCRIPTION:

XML:
 XML is a meta-markup language that provides a format for
describing structured data.
 This facilitates more structured declarations of content and more
meaningful search result across multiple platforms.
 The start of XML markup elements is identified by either the less
than symbol (), the apostrophe or single quote (‘) and the double
quotation marks (“) are used by XML for markup.
 To use these special characters as content within your document,
you must use the corresponding general XML entity.
Elements required:
 <form>
 <script>
 <label>
 <input>
 <div>
 <style>
PROCEDURE:
1. Save Students information in the XML file on the specific location.
2. Create and establish the server connection between html file and
XML file in the host
3. Get the user ID as input
38
 4. Display the user’s information.

CODING:
index.html
<!DOCTYPE html>
<HTML>
<HEAD> <TITLE>Searching for XML Elements </TITLE>
<SCRIPT>
function readXMLData()
{
var xmlDocumentObject, id , name , addr, phone, email;
xmlDocumentObject=new XMLHttpRequest();
xmlDocumentObject.open("GET","userlist.xml",false);
xmlDocumentObject.send();
xmlDocumentObject=xmlDocumentObject.responseXML;
id = xmlDocumentObject.getElementsByTagName("userid");
name = xmlDocumentObject.getElementsByTagName("username");
address = xmlDocumentObject.getElementsByTagName("address");
phone = xmlDocumentObject.getElementsByTagName("phone");
email = xmlDocumentObject.getElementsByTagName("email");
for (i = 0; i < id.length; i++)
{
output=id[i].firstChild.nodeValue;
if (output == document.getElementById("myText").value)
{displayDIV.innerHTML = id[i].firstChild.nodeValue + "<br> " +
name[i].firstChild.nodeValue
+"<br> " +address[i].firstChild.nodeValue + "<br> " +
phone[i].firstChild.nodeValue+"<br>"+email[i].firstChild.nodeValue;
}}}
</SCRIPT> </HEAD>
<BODY>
<H1>Search User</H1>
<input type="text" id="myText" value="">

39
<input type="BUTTON" VALUE="Get User Details"
ONCLICK="readXMLData()">
<P>
<DIV ID="displayDIV"> </DIV>
</BODY>
</HTML>
userlist.xml:
<userlist>
<userid>usr01</userid>
<username>Abi</username>
<address>Kovai</address>
<phone>9000067078</phone>
<email>[email protected]</email>
<userid>usr02</userid>
<username>Priya</username>
<address>Tiruppur</address>
<phone>9234567890</phone>
<email>[email protected]</email>
<userid>usr03</userid>
<username>sadhana</username>
<address>Avinashi</address>
<phone>9245228888</phone>
<email>[email protected]</email>
<userid>usr04</userid>
<username>Nasrin</username>
<address>Dindugal</address>
<phone>8877665543</phone>
<email>[email protected]</email>
<userid>usr05</userid>
<username>praveena</username>
<address>Perambalur</address>
<phone>8675432109</phone>
<email>[email protected]</email>
40
</userlist>
OUTPUT:

RESULT:

41