VARDHAMAN COLLEGE OF ENGINEERING

(AUTONOMOUS)
Affiliated to JNTUH, approved by AICTE, Accredited by NAAC with A++ Grade
ISO 9001:2015 Certified
Kacharam, Shamshabad, Hyderabad – 501218, Telangana, India

Laboratory Manual
WEB TECHNOLOGIES
LABORATORY
(II B. Tech- II SEMESTER)
(VCE-R22)
Course Code-A8605
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

VARDHAMAN COLLEGE OF ENGINEERING

(AUTONOMOUS)
Kacharam, Shamshabad, Hyderabad – 501218, Telangana, India
PROGRAM OUTCOMES (POS)
PO1: Engineering Knowledge: Apply knowledge of mathematics, science, engineering
fundamentals and an engineering specialization to the solution complex engineering problems.
PO2: Problem Analysis: Identify, formulate, 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 specified needs with appropriate
consideration for public health and 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
information to provide valid conclusions.
PO5: Modern Tool Usage: Create, select and apply appropriate techniques, resources and
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 contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to
professional engineering practice.
PO7: Environment and Sustainability: Understand the impact of professional engineering
solutions in societal and environmental contexts and demonstrate knowledge of and need for
sustainable development.
PO8: Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of engineering practice.
PO9: Individual and Team Work: Function effectively as an individual, and as a member or
leader in diverse teams and in multi-disciplinary settings.
PO10: Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as being able to comprehend and write
effective reports and design documentation, make effective presentations and give and receive
clear instructions.
PO11: Project Management and Finance: Demonstrate knowledge and understanding of
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 for and have the preparation and ability to Engage
in independent and life- long learning in the broadest context of technological Change.

PROGRAM SPECIFIC OUTCOMES (PSOs)

PSO1: To collect requirements, analyze, design, implement and test software Systems.
PSO2: To analyze the errors and debug them within minimal time.
COURSE OVERVIEW:
This course introduces web technologies such as HTML, CSS, XML, PHP and Server-side scripting. The
course covers how to use these technologies to develop static and dynamic web pages with an emphasis
on client-side scripting. The course also explains the differences between client-side and server-side Web
development and how to build applications using Servlets, JSP and JDBC.

COURSE OBJECTIVE
The course enables the learner to apply various web technologies for developing static and dynamic web
pages; as well it gives immense knowledge to work in Full Stack Development.

COURSE OUTCOMES (COs)

After the completion of the course, the student will be able to:
CO# Course Outcomes
A8605.1 Design static and interactive web pages for a given application.
A8605.2 Organize real time data to share in heterogeneous environment.
A8605.3 Develop java applications using JDBC to interact with database.
A8605.4 Construct server-side components to provide services to client.
A8605.5 Design dynamic and data driven web pages in client-server environment.

BLOOM’S LEVEL OF THE COURSE OUTCOMES

Bloom’s Level
CO# Remember Understand Apply Analyze Evaluate Create
(L1) (L2) (L3) (L4) (L5) (L6)
A8605.1 ✔
A8605.2 ✔
A8605.3 ✔
A8605.4 ✔
A8605.5 ✔

COURSE ARTICULATION MATRIX

CO#/
PO10

PO11

PO12

PSO1

PSO2
PO1

PO2

PO3

PO4

PO5

PO6

PO7

PO8

PO9

POs

A8605.1 3 3 2 2
A8605.2 3 3 2 2
A8605.3 2 3 2 2
A8605.4 3 3 3 3
A8605.5 3 3 3 3
Note: 1-Low, 2-Medium, 3-High
LIST OF PROGRAMS FOR PRACTICE:
N Tools and Expected
Title of the Experiment
o Techniques Skills/Ability
Design a static web page, the page Open-
consists of a table with set of links to source: Java
Identify basic HTML
products available in an online Toolkit:
tags such as list,
mobile store. Each product link has a JDK8 and
1 table, images, video,
separate web page to describe above
link and text format
product information like image, versions.
to create a web page.
features as a list, and a short video to OS: Windows
demonstrate product. / Linux
Design a home page with nested Web
frames consisting of 3 parts. A title Browser:
frame describing organization name Internet
Identify the need of
(Frame-1), index frame with links to Explorer/Goo
designing a web page
2 access data (Frame-2) and linked web gle
to display multiple
pages display in content frame Chrome/Moz
web pages.
(Frame-3). Use inline, embedded and illa Firefox
external styles for web pages in IDE: VS Code
appropriate way. Server:
Design a Job registration form for an XAMPP, Identify the basic
organization using HTML form Tomcat input fields required
controls to accept personal to create a form and
information like name, gender, process it, as well
languages known, email, contact validate the fields
number and address for using JavaScript.
3
communication. The form provides a
list to choose job location, an area to
describe about the applicant, an
option to upload CV and a button to
clear the controls and submit end
user form.
Design a HTML form of a bank to
accept a form from a customer to
enter name, occupation, loan
4 amount, rate of interest and tenure
in years. After submission of the form
calculate and display the EMI
information.
5 Use the Job Registration form and
validate the fields name, email and
contact number using appropriate
regular expressions. If the form is
N Tools and Expected
Title of the Experiment
o Techniques Skills/Ability
valid user gets “Registered
Successfully “, otherwise provide
appropriate error message to user.

Create an XML document to describe

the book information like id, name,
6 number of pages, author and prize. Apply XML to store
Using DTD and Schema validate the and transfer the data
document. between client and
Create an XML document to describe server
7 the student information and present
the document in a table using XSLT.
Write a JDBC program to create an
employee table in a data base with
fields employee no, name, salary and
8 department. Perform operations on
the table like insert, retrieve, update
Develop a Java
and delete operations (CRUD) using
application to
Statement.
connect with data
Write a JDBC program to create
base and do CRUD
product table in a data base with
operations
fields product no, name, image and
9 price. Perform operations on the
table like insert, retrieve, update and
delete operations (CRUD) using
PreparedStatement.
Write a servlet program to read
username and password from a form
and verify the fields at webserver. If
10
the credentials are valid redirect to Develop a Java
“[Link]” page otherwise Server side
“[Link]” application and
Write a server-side program to perform CRUD
perform database CRUD operations operations
11 on employee table. Create
appropriate forms to read data to
insert delete and update.
Write a server-side program to Identify the need of
12 implement State Management using tracking a user while
Cookie and Session navigating a website
13 Write a JSP program to read two
 N Tools and Expected
Title of the Experiment
o Techniques Skills/Ability
numbers m and n from a JSP page Develop a JSP
and display the sum of prime application using
numbers in between them. MVC paradigm and
Write a JSP program to read product perform CRUD
id or name from JSP page, if the operations
product exists in database display the
14
information by redirecting to
“[Link]” otherwise redirect to
“[Link]”.

ASSESSMENT SCHEME R22

Max. Marks
[Link]# EVALUATION METHOD ASSESSMENT TOOL
Marks Total
A write-up on day-to-
day experiment in the 10
laboratory
Viva-voce (or) tutorial
(or) case study (or)
application (or) poster 10
presentation of the
Continuous Internal
course
Evaluation (CIE)
1 Internal practical 40
10
examination
Laboratory Project,
which consists of the
Design (or) Software /
Hardware Model 10
Presentation (or) App
Develop (or) Prototype
Presentation
Write-up 10
Experiment/program 15
Semester End Evaluation of results 15
2 60
Examination (SEE) Presentation on another
10
experiment/program
Viva-Voce 10
LAB SESSION PLAN

CO BLO
OM’s
No Title of the Experiment
LEVE
L
Design a static web page, the page consists of a table CO-1 L-3
with set of links to products available in an online
1 mobile store. Each product link has a separate web page
to describe product information like image, features as
a list, and a short video to demonstrate product.
Design a home page with nested frames consisting of 3 CO-1 L-3
parts. A title frame describing organization name
(Frame-1), index frame with links to access data (Frame-
2
2) and linked web pages display in content frame
(Frame-3). Use inline, embedded and external styles for
web pages in appropriate way.
Design a Job registration form for an organization using CO-1 L-3
HTML form controls to accept personal information like
name, gender, languages known, email, contact number
and address for communication. The form provides a list
3
to choose job location, an area to
describe about the applicant, an option to upload CV
and a button to clear the controls and submit end user
form.
Design a HTML form of a bank to accept a form from a CO-1 L-3
customer to enter name, occupation, loan amount, rate
4
of interest and tenure in years. After submission of the
form calculate and display the EMI information.
5 Use the Job Registration form and validate the fields CO-1 L-3
 CO BLO
OM’s
No Title of the Experiment
LEVE
L
name, email and contact number using appropriate
regular expressions. If the form is valid user gets
“Registered Successfully “, otherwise provide
appropriate error message to user.

6 Create an XML document to describe the book CO-2 L-3

information like id, name, number of pages, author and
prize. Using DTD and Schema validate the document.
Create an XML document to describe the student CO-2 L-3
7 information and present the document in a table using
XSLT.
Write a JDBC program to create an employee table in a CO-3 L-3
data base with fields employee no, name, salary and
8 department. Perform operations on the table like insert,
retrieve, update and delete operations (CRUD) using
Statement.
Write a JDBC program to create product table in a data CO-3 L-3
base with fields product no, name, image and price.
9 Perform operations on the table like insert, retrieve,
update and delete operations (CRUD) using
PreparedStatement.
Write a servlet program to read username and CO-4 L-3
password from a form and verify the fields at
10
webserver. If the credentials are valid redirect to
“[Link]” page otherwise “[Link]”
Write a server-side program to perform database CRUD CO-5 L-3
11 operations on employee table. Create appropriate
forms to read data to insert delete and update.
Write a server-side program to implement State CO-4 L-3
12
Management using Cookie and Session
Write a JSP program to read two numbers m and n from CO-4 L-3
13 a JSP page and display the sum of prime numbers in
between them.
Write a JSP program to read product id or name from CO-5 L-3
JSP page, if the product exists in database display the
14
information by redirecting to “[Link]” otherwise
redirect to “[Link]”.
 Design a static web page, the page consists of a
table with set of links to products available in an
online mobile store. Each product link has a
Week-1
separate web page to describe product
information like image, features as a list, and a
short video to demonstrate product.

1. What is HTML?
2. Write the Structure of an HTML program?
Pre-Lab
3. What are elements of an HTML program?
Questions 4. What is the difference between web page and a web site?
5. List out the various text formatted tags?

Program Code:
<html>
<body style=background-color: lightgreen>
<h1 align="center">MOBILE STORE</h1>
<table border="5" cellspacing="2" align="center">
<tr align="center">
<td><b>[Link]</b></td>
<td><b>PRODUCT</b></td>
<td><b>IMAGE</b></td>
<td><b>PRODUCT INFO</b></td>
<td><b>FEATURES</b></td>
<td><b>VIDEO</b></td>
</tr>
<tr align="center">
<td><b>1</b></td>
<td>Samsung Galaxy S22 5G</td>
<td><img src="[Link]" alt="" width="100" height="100"/></td>
<td><ol>
<li>Phantom White</li>
<li>8GB RAM</li>
<li>128GB Storage</li>
</ol></td>
<td><a href="[Link]">About this item</a></td>
<td><a href="[Link]
</tr>
<tr align="center">
<td><b>2</b></td>
<td>Redmi 12C</td>
<td><img src="[Link]" alt="" width="100" height="100"/></td>
<td><ol>
<li>MIUI 13, Android 12.0</li>
<li>64 GB</li>
<li>128GB Storage</li>
</ol></td>
<td><a href="[Link]">About this item</a></td>
<td><a href="[Link]
</tr>
</table>
</body>
</html>

Program Output/ Expected Output

 1. What is head and body tag?
2. What is! DOCTYPE?
3. What is a paired tag? List out some of the paired tags?
4. What is a singular tag? List out some of the singular tags?
5. What is the extension for an HTML file?
6. What is the use of Meta tag?
7. Why do we use title tag?
Post-Lab 8. What is an Attribute?
Questions 9. List out different types of list tags? Give examples for it.
[Link] any four text formatted tags.
11. How to navigate from one web page to another?
12. What are heading tags? List out them.
13. How do we create an image link?
[Link] can we add caption to a table?
15. What is col span and row span? Explain with an example
16. Difference between cell spacing and cell padding.

Design a home page with nested frames

consisting of 3 parts. A title frame describing
organization name (Frame-1), index frame with
Week-2 links to access data (Frame-2) and linked web
pages display in content frame (Frame-3). Use
inline, embedded and external styles for web
pages in appropriate way.

1. What is need of frames?

2. Which tag is used to divide a web page into multiple
Pre-Lab views/windows.
Questions 3. Which tag is used to embed a frame?
4. What are the advantages of using frames?
5. What are the drawbacks of using frames?

Program Code:
[Link]
<html>
<head>
<title>Home</title>
</head>
<frameset rows="5%,*">
<frame src="[Link]">
<frameset cols="25%,*">
<frame src="[Link]" name="f2">
<frame src="[Link]" name="f3">
</frameset>
</html>

[Link]
<html>
<head><title>frame1</title>
</head>
<body bgcolor="blue">
<h1 style="[Link];font-size:15pt">
<marquee bgcolor="#cccccc" loop="-1" scrollamount="6" width="100%">
VARDHAMAN COLLEGE OF ENGINEERING </marquee>
</h1>
</body>
</html>

[Link]
<html>
<head><title>frame2</title>
<style type="text/css">
h1
{
font-size:25pt;color:pink
}
</style>
</head>
<body bgcolor="red">
<h1>click the link</h1>
<a href="[Link]" target=f3>Introduction</a><br>
<a href="[Link]" target=f3>Departments</a><br>
<a href="[Link]" target=f3>Address</a><br>
<a href="[Link]" target=f3>Feedback</a><br>
<a href="[Link]" target=f3>Gallery</a><br>
</body>
</html>

[Link]

<html>
<head><title>1st page</title>
<link rel="stylesheet" type="text/css" href="[Link]"/>
</head>
<body bgcolor="tan" align="center">
<h1><center>VARDHAMAN COLLEGE OF ENGINEERING</h1>
<h2>An Autonomous Institution, Affiliated to JNTUH & Approved by AICTE</h2>
<h3>Accredited by NAAC with A++ Grade</h3></center>
</body>
</html>

[Link]

<html>
<head><title>intro</title>
</head>
<body bgcolor="lightgreen">
<font color=black>
<p>
The college is surrounded by the green and beautiful landscape that will make your stay pleasant and
comfortable. VCE enjoys the geographical advantage as it is well connected by air, rail, and road. The
Hyderabad international airport at Shamshabad is just a 30-minute drive, and the college campus is close
to Bangalore highway (NH-7) making it accessible to several important centres in and around the city. A
ten-minute drive from the college campus reaches out to the outer ring road that connects Shamshabad
airport to the city. The residential campus, quiet and serene ambience are meant to provide you with a
perfect environment that is conducive to learn your chosen Engineering course.<br> On the academic
front, we have provided the best quality class rooms, laboratories, and library facilities. We have taken
utmost care while recruiting the faculty and staff. The campus boasts well-furnished hostel, sports
ground, gymkhana, guest-house for parents and visitors, large auditorium, bank, canteen, first-aid, and an
open theatre. <br>
The discipline and time-bound life-style is emphasized in the campus. We have provided 24-hour internet
access for enjoyable learning experience. During the course of your four-year degree programme, it will
be our sincere endeavour to ensure that your overall personality undergoes positive transformation
through special guest lectures on varied subjects by eminent personalities, visits to industries in the
vicinity, movie screening, and regular interaction with the principal and faculty of the college. </p>
</font>
</body>
</html>

[Link]
<html>
<head><title>Departments</title>
</head>
<body>
<div align="center">
<table border=2>
<tr>
<th>Dept code</th>
<th>Dept name</th>
</tr>
<tr>
<td>05</td>
<td>CSE</td>
</tr>
<tr>
<td>02</td>
<td>ECE</td>
</tr>
<tr>
<td>03</td>
<td>EEE</td>
</tr>
<tr>
<td>04</td>
<td>IT</td>
</tr>
<tr>
<td>05</td>
<td>MECH</td>
</tr>
<tr>
<td>06</td>
<td>AERO</td>
</tr>
</table>
</div>
</body> </html>
[Link]

<html>
<head><title>ADDRESS</title>
</head>
<body bgcolor="black">
<p>
<font color=red>
Shamshabad, <br>
Narkhuda, <br>
Telangana 501218<br>
Contact No: +91 8688901557<br>
Website: [Link]<br>
</font>
</p>
</body>
</html>

[Link]
<html>
<head><title>feed</title>
</head>
<body bgcolor="lightgreen">
<p>
<font color=green>
To give your feedback mail to info@[Link]
</font>
</p>
</body>
</html>

[Link]
<html>
<head><title>gall</title>
</head>
<body bgcolor="pink">
<p>
<font color=blue>
College Front View</font>
</p>
<img src="[Link]" height="200" width="200"/>
<img src="[Link]" height="200" width="200"/>
<img src="[Link]" height="200" width="200"/>
</body>
</html>

Program Output/ Expected Output

 1. List out the attributes of frameset tag?
2. List out the attributes of frame tag?
3. Does old browsers support frame tag?
4. Does frame replace the body tag?
5. If frame tag is not supported by a browser than which tag
Post-Lab
is used?
Questions 6. What is iframe tag?
7. Which attribute of frameset tag is used to divided the
webpage into multiple rows?
8. Which attribute allows us set the frame as fixed web
page?

Design a Job registration form for an organization

using HTML form controls to accept personal
information like name, gender, languages known,
email, contact number and address for
Week-3 communication. The form provides a list to
choose job location, an area to describe about
the applicant, an option to upload CV and a
button to clear the controls and submit end user
form

1. What is a form and what are form elements?

2. List out the attributes of a form tag?
Pre-Lab
3. How do we set border around the form?
Questions 4. Can we create multiple forms in a single web page?
5. What are input form controls?
Program Code:
[Link]
<html>
<body style="background-color: lightgreen" align="center">
<center>
<h1>REGISTRATION FORM</h1>
<br><br>
<form>
<table>
<tr>
<th>Name</th>
<td><input type="text" placeholder="enter your name" required></td>
</tr>
<tr>
<th>Gender</th>
<td><input type="radio" name="gender" required>male<br>
<input type="radio" name="gender" required>female<br>
<input type="radio" name="gender" required>other<br></td></tr>
<tr>
<th>Languages Known</th>
<td><input type="text" placeholder="enter the languages yo known" required></td>
</tr>
<tr>
<th>Email</th>
<td><input type="email" placeholder="enter your mail id" required></td></tr>
<th>Mobile Number</th>
<td><input type="text" placeholder="enter contact no" required></td></tr>
<th>Address</th>
<td><input type="text" required></td>
<tr>
<tr>
<th>Job Location</th>
<td>
<select required>
<option>select one</option>
<option>HYDERABAD</option>
<option>BANGLORE</option>
<option>DELHI</option>
<option>MUMBAI</option>
</SELECT>
</td></tr>
<tr>
<th>cv</th>
<td><input type="file" name="filename" required></td></tr>
</table>
</form><br><br>
<form>
<input type="reset" value="clear">
<input type="submit" form action="[Link]">
</form>
</center>
</body>
</html>

[Link]
<html>
<body style="background-color:blue">
<h2>Successfully applied</h2>
</html>

Program Output/ Expected Output

Post-Lab 1. What are Input tags in a form? List out.
2. Which tags are used to submit and reset a form?
Questions 3. How do you create a drop-down menu?
4. How to create an element which select one option among
given options?
 5. What is text area tag?
6. Which attribute is used to disable an input form element?
7. In selection statement how to make an option as default
option.

Design a HTML form of a bank to accept a form

from a customer to enter name, occupation, loan
Week-4 amount, rate of interest and tenure in years.
After submission of the form calculate and
display the EMI information.

1. In how many ways we can embed a CSS into HTML

document?
2. Which tag is used to include an external CSS?
3. What is a Selector? List out types of selectors.
4. Can we include more than one CSS into an HTML
Pre-Lab document?
Questions 5. How can we create an empty box using CSS properties?
6. How can reflect background color in multiple web pages?
7. What is the purpose of CSS?
8. Do we have any other frame works to add CSS into a web
page? If so, List it out?
9. Which tag is used to include internal CSS?

Program Code:
<!DOCTYPE html>
<html>
<head>
 <title>SBI Loan EMI Calculator</title>
<style>
input[type=number]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
}
input[type=submit]
{
background-color: #4CAF50;
color: white; padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
h2
{
text-align: center;
font-size: 28px;
margin-bottom: 20px;
}
</style>
<script>
function calculateEMI()
{
var loanAmount = [Link]("loan-amount").value;
var interestRate = [Link]("interest-rate").value;
var loanTenure = [Link]("loan-tenure").value;
var monthlyInterestRate = interestRate / (12 * 100);
var numberOfPayments = loanTenure * 12;
var emi = (loanAmount * monthlyInterestRate * [Link](1 + monthlyInterestRate,
numberOfPayments)) / ([Link](1 + monthlyInterestRate, numberOfPayments) – 1);
var emiText = "Your monthly EMI is Rs. " + [Link](2);
[Link]("emi-result").innerHTML = emiText;
[Link](emiText);
</script>
</head>
<body>
<h2>SBI Loan EMI Calculator</h2> <div>
<label for="loan-amount">Loan Amount</label>
<input type="number" id="loan-amount" name="loan-amount"
placeholder="Enter loan amount in Rs.">
<label for="interest-rate">Interest Rate</label>
<input type="number" id="interest-rate" name="interest-rate" placeholder="Enter interest rate in %">
<label for="loan-tenure">Loan Tenure</label>
<input type="number" id="loan-tenure" name="loan-tenure" placeholder="Enter loan tenure in
years">
<input type="submit" value="Calculate EMI" onclick="calculateEMI ()">
<p id="emi-result"></p>
</div>
</body></html>

Program Output/ Expected Output

 1. What is JavaScript?
2. How do we declare variables in JavaScript?
3. What are operators? List out the types of operators?
4. What are conditional statements in JavaScript?
5. What is iterative statement in JavaScript?
Post-Lab
6. How to declare a function in JavaScript?
Questions 7. What are regular expressions?
8. Types of Validations in JavaScript?
9. What is event handling?
[Link] is exception handling in JavaScript?
[Link] is error handling in JavaScript?

Use the Job Registration form and validate the

fields name, email and contact number using
appropriate regular expressions. If the form is
Week-5
valid user gets “Registered Successfully “,
otherwise provide appropriate error message to
user.

1. In how many ways we can include JavaScript into an

HTML document?
2. Is JavaScript Loosely typed language.
3. Which methods are used to access HTML elements using
Pre-Lab
JavaScript?
Questions 4. What is DOM? Explain?
5. How to declare an array and access array elements.
6. Explain about search() and replace() methods?

Program Code:
<html>
<head>
<title>User Validation</title>

<style>
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
<script type="text/javascript">
function validate() {
var fn=[Link]("fn");
var fname=[Link];
var ln=[Link]("ln");
var lname=[Link];
var un=[Link]("un");
var uname=[Link];
var pwd=[Link]("pwd");
var pass=[Link];
var cpwd=[Link]("cpwd");
var cpass=[Link];
var em = [Link]("e");
var email = [Link];
var m=[Link]("ph");
var mobile=[Link];
var fre=/^[A-Za-z]+$/
var lre=/^[A-Za-z]+$/
var unre=/^[a-zA-Z]+[0-9a-zA-Z._]*$/
var ere=/^[a-zA-Z]+([\._]?\w+)*@\w+([\._]?\w+)*(\.\w{2,3})+$/
var mre=/^[6-9][0-9]{9}$/;
var pwdre=/^(?=.{8,})(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).*$/
if ([Link](fname)) {
if([Link](lname))
{
if([Link](uname)){
if([Link](email))
{
if([Link](pass))
{
if (cpass==pass)
{
if([Link](mobile))
{
alert("done");
return true;
}
else
{
alert("Invalid");
[Link] = "red solid 3px";
[Link]='';
[Link]="Invalid";
return false;
}
}
else {
alert("Invalid");
[Link] = "red solid 3px";
[Link]='';
[Link]="Invalid";
return false;
}
}
else
{alert("Invalid");
[Link] = "red solid 3px";
[Link]='';
[Link]="Invalid";
return false;
}
}
else {
alert("Invalid");
[Link] = "red solid 3px";
[Link]='';
[Link]="Invalid";
return false;
}
}
else {
alert("Invalid");
[Link] = "red solid 3px";
[Link]='';
[Link]="Invalid";
return false;
}
}
else {
alert("Invalid");
[Link] = "red solid 3px";
[Link]='';
[Link]="Invalid";
return false;
}
}
else {
/*alert("Invalid");
[Link] = "red solid 3px";
[Link]='';
[Link]="Invalid";
return false;*/
return err(fn)
}
}
function err(ele)
{
[Link] = "red solid 3px";
[Link]='';
[Link]="Invalid";
return false;
}
</script>
</head>
<body bgcolor="cyan">
<center>
<h1>Email Registration</h1>
<form>
<fieldset style="width:300px">
<legend>Registation Form</legend>
<table>
<tr>
<input type="text" id="fn" placeholder="Firstname" maxlength="10">
</tr>
<br><br>
<tr>
<input type="text" id="ln" placeholder="Lastname” maxlength="10">
</tr>
<br><br>
<tr>
<input type="text" id="un" placeholder="UserName" maxlength="10">
</tr>
<br><br>
<tr>
<input type="email" id="e" placeholder="Email" >
</tr>
<br><br>
<tr>
<input type="password" id="pwd" placeholder="Password">
</tr>
<br><br>
<tr>
<input type="password" id="cpwd" placeholder="Confirm">
</tr>
<br><br>
<tr>
<input type="text" id="ph" placeholder="Mobile">
</tr>
<br><br>
<tr>
<label>Gender:</label>
<select id="gender">
<option value="male">male</option>
<option value="female">female</option>
<option value="others">others</option>
</select>
</tr>
<br><br>
<tr><input type="submit" onclick="return validate()" value="create">
</tr>
</table>
</fieldset>
</form></div>
</center>
</body>
</html>

Program Output/ Expected Output

 1. What are selectors in JavaScript? Explain?
2. What is window object? List out different types of
window object methods?
Post-Lab 3. How to declare and object in JavaScript?
Questions 4. Write a regular expression to validate name, cell number,
email?
5. What is the difference between validation and
verification?
Create a XML document to describe the book
information like id, name, number of pages,
Week-6
author and prize. Using DTD and Schema validate
the document.

1. What is XML?
2. What is DTD? List types of DTD?
3. Write the rules to create an element in XML?
Pre-Lab
4. What is an XML-Schema? List out types of data types in XML-
Questions Schema?
5. What is XSLT?
Differentiate between DOM and SAX parsers?

Program Code:
[Link]
<?xml version="1.0" encoding="UTF-8" standalone=” yes”?>
<!DOCTYPE book SYSTEM “[Link]">
<bookstore>
<book>
<title>web programming</title>
<author>chrisbates</author>
<ISBN>123-456-789</ISBN>
<publisher>wiley</publisher>
<edition>3</edition>
<price>350</price>
</book>
<book>
<title>internet worldwideweb</title>
<author>ditel&amp;ditel</author>
<ISBN>123-456-781</ISBN>
<publisher>person</publisher>
<edition>3</edition>
<price>450</price>
</book>
</bookstore>

[Link]

<!ELEMENT bookstore (book+)>

<!ELEMENT book (title,author,ISBN,publisher,edition,price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>

XML Schema
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema elementFormDefault="qualified" attributeFormDefault="unqualified"
xmlns:xs="[Link]
<xs:element name="bookstore">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"></xs:element>
<xs:element name="author" type="xs:string"></xs:element>
<xs:element name="ISBN" type="xs:string"></xs:element>
<xs:element name="publisher" type="xs:string"></xs:element>
<xs:element name="edition" type="xs:int"></xs:element>
<xs:element name="price" type="xs:decimal"></xs:element>
 </xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Program Output/ Expected Output

Create an XML document to describe the student

Week-7 information and present the document in a table
using XSLT.

Program Code:
[Link]
<?xml version="1.0"?>
<xs:schema xmlns:xs="[Link]
<xs:element name="catalog">
<xs:complexType>
<xs:sequence>
<xs:element ref="book" minOccurs="1" maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="book">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string" minOccurs="1" maxOccurs="1"/>
<xs:element name="author" type="xs:string" minOccurs="1" maxOccurs="1"/>
<xs:element name="publisher" type="xs:string" minOccurs="1"maxOccurs="1"/>
<xs:element name="pages" type="xs:integer" minOccurs="1"maxOccurs="1"/><xs:element
name="price" type="xs:decimal" minOccurs="1"maxOccurs="1"/></xs:sequence>
<xs:attribute name="course" type="xs:string" use="required"/>
</xs:complexType>
</xs:element>
</xs:schema>

[Link]

<?xml version="1.0" ?>

<?xml-stylesheet type="text/css" href="[Link]" ?>
<catalog xmlns:xsi=[Link]
instancexsi:noNamespaceSchemaLocation="[Link]">
<book course="cse" >
<title> Web Technologies </title>
<author>Kogent Learning Solutions</author>
<publisher>DreamTech</publisher>
<pages>1200</pages>
<price>2552.75</price>
</book>
<book course="cse">
<title> Operating Systems </title>
<author>Galvin</author>
<publisher>TMcH</publisher>
<pages>900</pages>
<price>850.50</price>
</book>
<book course="ece">
<title> Control Systems </title>
<author>DavindHerny</author>
<publisher>BPB</publisher>
<pages>600</pages>
<price>1250.70</price></book>
</catalog>

[Link]

title {font-family:serif;color:green;font-size:18pt}
author{font-family:arial;color:red;font-size:12pt}
publisher{font-family:arial;color:green;font-size:12pt}
pages{font-family:arial;color:#AABB12;font-size:12pt}
price{font-family:arial;color:blue;font-size:12pt}
Program Output/ Expected Output

1. What is extension to an XML file?

2. Is XML having any predefined tags?
3. How to embed an DTD into an XML file?
4. Is DTD and XML-Schema being same? Justify
5. How to embed an XML-Schema into an XML file?
Post-Lab
6. What is the extension for an XML-Schema file?
Questions 7. How do we convert an XML file into HTML?
8. Differentiate between XML Element and Attribute?
9. How do we assign a range of values to an XML element using XML-
Schema?

Write a JDBC program to create an employee table in a data

base with fields employee no, name, salary and department.
Week-8
Perform operations on the table like insert, retrieve,
update and delete operations (CRUD) using Statement.

1. What is JDBC?
2. Write down the steps to connect a Java application with sql database?
3. What is a driver? List out the different types of JDBC drivers?
Pre-Lab
4. What packages need to be imported for working on JDBC?
Questions 5. How do we configure the system to work with JDBC?
6. Write an SQL query to create a table, insert rows into the table,
retrieve the result, update a row in a table and delete a row in a table?
8(i) //Program to Create EmployeeTable in MySQL
mport [Link].*; // first step
import [Link].*;
public class Employee {
public static void main(String args[]) {
try {
//[Link]
[Link]("[Link]"); //second step
Connection
con=[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
//third step
Statement st=[Link](); //fourth step
[Link]("create table IF NOT EXISTS emp1( no integer(10),name varchar(30),
salary integer(10),department varchar(40))"); // execute a query
[Link]("Table Created");
[Link]();
}
catch(Exception e)
{
[Link](e);
}
}
}
Settings 1. download mysql-connector-java-5.1.48 zip file - extract
2. [Link] and copy in
C:\Program Files(x86)\Java\jre7\lib\ext folder of java.
3. Set classpath for the jar file in environment variables
Variable name:Classpath
Variable Valu[Link]\Program Files (x86)\Java\jre7\lib\ext\mysql-connector-java-5.1.48-
[Link];.;

Output
 Cross Verify in XAMPP Server phpMyAdmin under vce_cse database

8(ii) //Program to Insert Employee Data

import [Link].*;
Program import [Link].*;
public class InsertTable{
public static void main(String args[]) {
try {
[Link]("[Link]");
Connection con =
[Link]("jdbc:mysql://localhost:3306/studentinfo","root","");
Statement st=[Link]();
Scanner sc = new Scanner([Link]);
[Link]("Eneter the student details");
 int sid = [Link]();
String sname= [Link]();
String scontact= [Link]();
String saddr = [Link]();
int savg=[Link]();
String qry = "INSERT INTO student(id,name,contact,address,avg) VALUES
("+sid+",'"+sname+"','"+scontact+"','"+saddr+"',"+savg+")";
[Link](qry);
[Link]();
}
catch(Exception e) {
[Link](e);
}
[Link]("Row Inserted"); }
}

Output

Check back in XAMPP server whether values got inserted

8(iii) //Program to Retrieve Data from Database

Program import [Link].*; // first step
import [Link].*;
public class Retrieve
{
public static void main(String args[])
{
try
{
//[Link]
[Link]("[Link]"); //second step
Connection
con=[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
//third step
Statement st=[Link](); //fourth step
String qry="select * from emp1";
ResultSet rs = [Link](qry);
[Link]("The Employee Details are\n");
while([Link]()){
[Link]([Link](1)+":"+[Link](2)+":"+[Link](3)+":"+[Link](4));
}
[Link]("Data Retrieved Successfully");
[Link]();
}
catch(Exception e)
{
[Link](e);
}
}
} Output:

8(iv) //Program to Update a field in Database

Program import [Link].*; // first step
import [Link].*;
public class Update
{
public static void main(String args[])
{
try
{
//[Link]
[Link]("[Link]"); //second step
Connection
con=[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
//third step
Statement st=[Link](); //fourth step
Scanner sc = new Scanner([Link]);
[Link]("Enter the Employee Id to Update Salary");
int empno = [Link]();
[Link]("Enter the Salary to be update");
int esal = [Link]();
String qry = "UPDATE emp1 SET salary='"+esal+"' WHERE no="+empno+"";
[Link](qry);
[Link]("Data Updated Successfully");

[Link]();
}
catch(Exception e)
{
[Link](e);
}
}
}
Before Update the Table the data in employee table is:
Output

Execute the program through Command Prompt:

 Check Back in the XAMPP Server the employee table content:

8(v) //Program to delete a Record in Table

import [Link].*; // first step
Program import [Link].*;
public class Delete {
public static void main(String args[]) {
try
{
//[Link]
[Link]("[Link]"); //second step
Connection
con=[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
//third step
Statement st=[Link](); //fourth step
Scanner sc = new Scanner([Link]);
 [Link]("Enter the record to be deleted");
int eno1 = [Link]();
String qry = "DELETE FROM emp1 WHERE no="+eno1+"";
[Link](qry);
[Link]("Record deleted Successfully");
[Link]();
}
catch(Exception e)
{
[Link](e);
}
}
}
Before deleting the row, data in student table is:
Output

Execute the program through Command Prompt:

Check Back in the XAMPP Server the employee table content:

 1. Which driver is best suitable to work on with JDBC?
2. List out the methods to execute a query in java program?
Post-Lab 3. Write down the driver URL for MySQL and SQL.
Questions 4. What is the use of ResultSet Class?
5. What is the usage of DriverManager class?
6. Which function is to take input from the console in java?

Week-9 Write a JDBC program to create product table in a data

 base with fields product no, name, image and price.
Perform operations on the table like insert, retrieve,
update and delete operations (CRUD) using
PreparedStatement.

1. What is the purpose of Prepared and Callable Statement?

2. Write down the steps to create a Prepared Statement?
Pre-Lab 3. Write down the steps to create a Callable Statement?
Questions 4. What is a Stored procedure?
5. What is a Stored function?
6. Differentiate between Stored Procedure and Stored Function?

9(i) Program to Create Table in Mysql - using Prepared Statement

import [Link].*;
public class CreateTablePrepared
{
public static void main(String args[])
{
try
{
[Link]("[Link]");
Connection
con=[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
String qry="create table products( product_no int(5), name varchar(20), image blob,
price int(10) )";
PreparedStatement ps = [Link](qry);
[Link]();
[Link]("Table Created");
[Link]();
}
catch(Exception e)
{
[Link](e);
}
}
}
Output Execute Program through Command Prompt:

Check Back the Table creation in XAMPP Server:

9(ii) Program to insert Student Data - using Prepared Statement

import [Link].*;
Program import [Link].*;
import [Link].*;
public class InsertTablePrepared {
public static void main(String args[ ]) {
try {
[Link]("[Link]");
Connection con =
[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
String qry = "INSERT INTO products(product_no,name,image,price) VALUES (?,?,?,?)";
PreparedStatement ps = [Link](qry);
 [Link](1,1102);
[Link](2,"Mobile");
InputStream in=new FileInputStream("C:/Users/hp/OneDrive/Desktop/WT
PROGRAMS/JNTUH [Link]");
[Link](3,in);
[Link](4,10000);
[Link]();
[Link]();
}
catch(Exception e){ [Link](e);
}
[Link]("Row Inserted");
} }

Execute Program through Command Prompt:

Output

Check Back the Table in XAMPP Server:

9(iii) Program to retrieve Data from Database-using prepared statement
import [Link].*;
Program import [Link].*;
public class GetTablePrepared
{
public static void main(String args[ ])
{
try
{
[Link]("[Link]");
Connection
con=[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
String qry = "select * from products";
PreparedStatement ps = [Link](qry);
ResultSet rs = [Link]();
[Link]("The Product Details are \n");
while([Link]())
{
[Link]([Link](1)+":"+[Link](2)+":"+ [Link](3)+":"+[Link](4) );
}
[Link]();
}
catch(Exception e){
[Link](e);
}
}
}
Execute Program through Command Prompt:

Output

9(iv) Program to update a field in Database-using Prepared Statement

Program import [Link].*;
import [Link].*;
public class UpdateTablePrepared{
public static void main(String args[])
{
try{
[Link]("[Link]");
Connection
con=[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
Scanner sc = new Scanner([Link]);
[Link]("Enter the Product Id to Update price");
int pid = [Link]();
[Link]("Enter the Price to be updated");
int sprice = [Link]();
String qry = "UPDATE products SET price=? WHERE product_no=?";
PreparedStatement ps = [Link](qry);
[Link](1,sprice);
[Link](2,pid);
[Link]();
[Link]();
}
catch(Exception e){
[Link](e);
}
[Link]("Row Updated");
}
}
Check the data before update in XAMPP Server:

Output

Execute Program through Command Prompt:

 After Execution the data gets updated in the XAMPP Server:

9(v) Program to Delete a Record in Table-using PreparedStatement

import [Link].*;
Program import [Link].*;
 public class DeleteTablePrepared{
public static void main(String args[])
{
try{
[Link]("[Link]");
Connection
con=[Link]("jdbc:mysql://localhost:3306/vce_cse","root","");
Scanner sc = new Scanner([Link]);
[Link]("Enter the record to be deleted");
int pid = [Link]();
String qry = "DELETE FROM products WHERE product_no=?";
PreparedStatement ps = [Link](qry);
[Link](1,pid);
[Link]();
[Link]();
}
catch(Exception e)
{
[Link](e);
}
[Link]("Row Effected / Deleted");
}
}Execute the program through Command Prompt:

Output

Week-10 Write a servlet program to read username and password from a

form and verify the fields at webserver. If the credentials are
 valid redirect to “[Link]” page otherwise “[Link]”

1. What is a Web server?

2. What is Client-Server Architecture?
3. List out the difference between Web Server and Application Server?
4. What is a Servlet?
5. Write down the Servlet Life Cycle?
6. How to read input parameters from a web application into a servlet?
Pre-Lab 7. List out the differences between Servlet Context and Servlet Config?
Questions 8. Write down the steps to connect a Web application to the database
using servlet?
9. Does Servlet follow MVC paradigm? Justify
10. What is Tomcat?
[Link] the steps to install tomcat into your system.
[Link] is Session Tracking?
[Link] is the use of Session and Cookies?

Program [Link]
<html>
<head>
<title>login form</title>
</head>
<body>
<form method="post" action="login">
Email ID:<input type="text" name="email" /><br/>
Password:<input type="text" name="pass" /><br/>
<input type="submit" value="login" />
</form>
</body>
</html>

[Link]

import [Link].*;
import [Link].*;
import [Link].*;
import [Link].*;

public class Login extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
[Link]("text/html;charset=UTF-8");
PrintWriter out = [Link]();

String email = [Link]("email");

String pass = [Link]("pass");

if([Link](email, pass))
 {
RequestDispatcher rs = [Link]("[Link]");
[Link](request, response);
}
else
{
[Link]("Username or Password incorrect");
RequestDispatcher rs = [Link]("[Link]");
[Link](request, response);
}
}
}

[Link]

import [Link].*;

public class Validate {

public static boolean checkUser(String email1,String pass1)
{
boolean st =false;
try {

//loading drivers for mysql

[Link]("[Link]");

//creating connection with the database

Connection con = [Link]("jdbc:mysql:/
/localhost:3306/mydb","root","");
PreparedStatement ps = [Link]("select * from register where email=? and
pass=?");
[Link](1, email1);
[Link](2, pass1);
ResultSet rs =[Link]();
st = [Link]();

}
catch(Exception e) {
[Link]();
}
return st;
}
}

[Link]

import [Link].*;
import [Link].*;
import [Link].*;
import [Link].*;

public class Welcome extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
 [Link]("text/html;charset=UTF-8");
PrintWriter out = [Link]();
[Link]("Welcome user");
}
}
[Link](Deployment Descriptor)
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="[Link]
xmlns:xsi="[Link]
xsi:schemaLocation="[Link]
[Link] >

<servlet>
<servlet-name>login</servlet-name>
<servlet-class>Login</servlet-class>
</servlet>
<servlet>
<servlet-name>Welcome</servlet-name>
<servlet-class>Welcome</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Welcome</servlet-name>
<url-pattern>/Welcome</url-pattern>
</servlet-mapping>

</web-app>

NOTE: Follow the below steps to deploy your application in tomcat server:

Step1: Create an application folder named ServletRequest

Step2: ServletRequest folder should contains [Link] program, WEB-INF folder and src folder
optional to store Servlet code
Step3: WEB-INF folder should contain classes folder and [Link] file
Step4: Compile your Servlet code and place the compiled .class file in classes folder under WEB-
INF folder
Step5: Place the total application folder into the C:\xampp\tomcat\webapps folder
Step6: On Xampp control panel and start tomcat service, open the browser and type
localhost:8080 in url bar
Step7: Under tomcat server click on manager apps where you can view your application
Output