DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
WEB TECHNOLOGIES LAB MANUAL
LAB CODE: 16CS302 A
COURSE DESCRIPTION AND OBJECTIVES
This course offers the basic concepts used to develop static web pages and it also provides
knowledge of Internet programming concepts, Web Servers and Web Application Servers,
Design Methodologies with concentration on Object-Oriented concepts. The objective of
this course is to build web applications using JSP and client side script technologies
COURSE OUTCOMES
The student will be able to:
• Understand the concepts of html, css and java script
• Apply JavaScript features for form validation and jdbc concepts to perform
database operations from web pages
• Analyze the suitability of servlet and jsp technologies to build solutions for real
world problems
• Evaluate the performance of web application development using jsp and servlets.
• Design and develop three tier web applications using jsp and servlets.
SKILLS
• Perform client side validation using Java script.
• Store and retrieve data using JDBC.
• Generate dynamic contents using Servlets.
• Generate dynamic contents using JSPs.
• Overcome problems in Servlets and JSP using Struts Programs.
• Develop a working system of web application or web site.
LIST OF EXPERIMENTS
1.
Create a HTML document to display your profile and Class timetable to demonstrate
lists, links, images, pre, font, heading tags.
2.
Create a HTML page having four frames named
a. top
b. center
c. bottom
d. left
The top frame should contain company logo and title. The bottom frame should contain
Copy right information. The left frame should contain various links like Home, Products,
Services, Branches, about us, etc. When clicked on those links, the contents should appear
in the display on to center frame.
3.
Create a HTML document to demonstrate Form Elements that includes Form, input-
text, password, radio, checkbox, hidden, button, submit, reset, label, text area, select, option,
file upload
4.
Write a HTML program with at least two <h1>, two images, two buttons and
appropriate
CSS to display
a)
All <h1> with font-size 12pt, and bold in Verdana font using Inline CSS.
b)
All <img> with border color yellow, thickness 10px using Document Level CSS
c)
All <input type=’button’> should change background color to red on mouse over
them using External CSS.
5.
Design a HTML page having a text box and four buttons via Factorial, Fibonacci,
Prime and Palindrome. When a button is pressed an appropriate java script function should
be called to display the following:
a. factorial of that number
b. Fibonacci series up to that number
c. prime numbers up to that number
d. is it palindrome or not
6.
Write Java script program to demonstrate the following objects with at least
five methods:
a. MATH
b. STRING
c. ARRAY
d. DATE
7.
Write a JavaScript program to perform arithmetic operations when the corresponding
button is pressed.
8.
Write a Javascript program to validate user registration form.
9.
Write a Java program to connect to a database server and insert employees data into
employee table using JDBC.
10.
Write a JDBC Program to retrieve and display data from a table employee.
11.
Write a simple java servlet program to display Simple text content on screen.
12.
Write a servlet program to demonstrate Life cycle of Servlet.
13.
Develop a Servlet to validate user name and password with the data stored in Servlet
configuration file. Display authorized user if she/he is authorized else display unauthorized
user.
14.
Write JSP Program to store student information sent from registration page into
Database.
15.
Write a JSP program to validate username and password through database.
16.
Write an appropriate JSP page to insert, update and delete data in student table in a
single application with proper linking of JSP pages.
EXPERIMENT 1
Create a HTML document to display your profile and Class timetable to demonstrate lists,
links, images, pre, font, heading tags.
AIM: Create a profile and Class Timetable using the basic concepts of HTML.
ALGORITHM:
STEP 1. Open a document and save it with program name.html
STEP 2. By using li and ul tag create a ordered list and unordered list should be
created.
STEP 3. To each list create a link by using href attribute.
STEP 4. In one of the page, create a separate html page which has one heading
with some text followed by paragraph using p tag. Which will be followed for
remaining headings also? Each para will be separated by hr tag.
STEP 5. An image should be displayed at the top right side. Different pages
should be created and displayed by clicking the links which are displayed by using
lists
STEP 6. By using table tag create a table.
STEP 7. For heading use the th tag and for data use the td tag
STEP 8. Background color should be applied for each table row.
STEP 9. For merging rows or columns, use colspan and rowspan
STEP 10.
A time table format table should be displayed at last as per the
conditions given in the question.
SOURCE CODE:
Table creation
<html>
<body>
<table border="5" bordercolor="684D7E" cellpadding="30">
<tr bgcolor="099709">
<th>Day</th> <th>8:00-8:55</th> <th>8:55-9:50</th> <th>9:50-10:10</th>
<th>10:10-11:05</th> <th>11:05-12:00</th> <th>12:00-12:55</th>
<th>12:55-1:55</th> <th>1:55-2:50</th> <th>2:50-3:45</th>
</tr>
<tr>
<th bgcolor="099709">MON</th> <td colspan="2" bgcolor="f14fe9">WEEKLY
TEST</td> <td rowspan="6" bgcolor="ff0064">BREAK</td> <td
bgcolor="F6F90B">WT</td>
<td bgcolor="pink">OSWT</td> <td bgcolor="F9B942">CN</td> <td rowspan="6"
bgcolor="ff0064">LUNCH</td> <td bgcolor=A2B5D1>CD</td>
<td bgcolor="F9B942">CN</td>
</tr>
<tr>
<th bgcolor="099709">TUE</th> <td bgcolor="pink">OSWT</td> <td
bgcolor="F6F90B">WT</td> <td rowspan="4" bgcolor="3FDFD0">MINOR</td>
<td bgcolor=E2B68F>OS</td> <td bgcolor=A2B5D1>CD</td> <td
bgcolor="F9B942">CN</td> <td bgcolor="F6F90B">WT</td>
</tr>
<tr>
<th bgcolor="099709">WED</th> <td bgcolor="pink">OSWT</td> <td
bgcolor=E2B68F>OS</td> <td bgcolor=A2B5D1>CD</td> <td bgcolor=298581>CN
LAB</td>
<td colspan="2" bgcolor=298581>CN LAB</td>
</tr>
<tr>
<td colspan="2" bgcolor=A23FDF>OS LAB</td>
</tr>
<tr>
<th bgcolor="099709">SAT</th> <td colspan="2" bgcolor=87FF01>ACTIVITIES</td>
<td colspan="3" bgcolor=87FF01>ACTIVITIES</td> <td bgcolor=E779A5>SEMINAR</td>
<td bgcolor=C68BC4>COUNSELLING</td>
</tr>
</table>
</body>
</html>
SAMPLE OUTPUT:
TEST CASES:
1. Html page should be displayed with different kinds of lists in which one
should be ordered list and unordered lists.
2. Each list name should be made as link. By clicking each link of list, another
page should be displayed
3. Different pages to be displayed successfully by clicking each link.
4. A html page should be displayed which shows some clear description of time
table.
5. Each row should be showed with different kinds of colors.
6. There should be few merging of rows and columns should be there.
RESULT: User profile page and class time table is designed and developed successfully.
EXPERIMENT 2
Create a HTML page having four frames named
a. top
b. center
c. bottom
d. left
The top frame should contain company logo and title. The bottom frame should contain
copy right information. The left frame should contain various links like Home, Products,
Services, Branches, About us, etc. When clicked on those links, the contents should appear
in the display on to center frame.
AIM: To Create a HTML page having four frames named
a. top
b. center
c. bottom
d. left
The top frame should contain company logo and title. The bottom frame should contain
copy right information. The left frame should contain various links like Home, Products,
Services, Branches, About us, etc. When clicked on those links, the contents should appear
in the display on to center frame.
ALGORITHM:
STEP 1. create a html document by saving it with program name.html
STEP 2. by using frame tag, frames should be created
STEP 3. partition of columns, rows will be made by frameset tag
STEP 4. Top of the frame should contain of different images
STEP 5. In the middle left frame, 3 links should be created by anchor tag and target
should be set on which frame, that particular page should be displayed.
STEP 6. Each separate html pages should be created with different images by using
img tag, lists by using li tag, paragraph by using p tag. When we click the
links, pages should be properly displayed in centre of the page.
SOURCE CODE:
Creating frames:
Main.html
<html>
<head>
<title>frames</title>
</head>
<frameset rows="20%,70%,10%">
<frame name="A" src="A.html" >
<frameset cols="25%,75%">
<frame name="B" src="B.html">
<frame name="C" src="https://vignan.ac.in/">
</frameset>
<frame name="D" src="D.html">
</frameset>
</html>
A.html
<html>
<body>
<img src="WhatsApp Image 2020-10-07 at 15.38.05.jpeg" style="marginleft:40%"/>
</body>
</html>
B.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button shake effect</title>
<link rel="stylesheet" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Farro&display=swap"
rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigation">
<ul>
<li class="nav_item"><a href="https://vignan.ac.in/"
target="C">home</a></li>
<li class="nav_item"><a
href="https://vignan.ac.in/csehome.php" target="C" >Branch</a></li>
<li class="nav_item"><a
href="https://vignan.ac.in/vision.php" target="C">Vision</a></li>
<li class="nav_item"><a href="about.html"
target="C">about</a></li>
</ul>
</div>
</div>
</body>
</html>
D.html
<!DOCTYPE html>
<html>
<head>
<title>Profile Card</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src="DSC_0142.jpg" />
</div>
</div>
<div class="lower-container">
<div>
<h3>Nikihl Teja</h3>
<h4>Front-end Developer</h4>
</div>
<div>
<p> Student in Vignan University
</p>
</div>
</div>
</div>
</body>
</html>
Style.css
body{
margin: 0px;
padding: 0px;
background: #f1f1f1;
font-family: arial;
box-sizing: border-box;
}
.card-container{
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container{
height: 150px;
background: #7F00FF;
}
.image-container{
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px,100px);
}
.image-container img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container{
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3, h4{
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4{
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p{
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn{
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover{
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}
SAMPLE OUTPUT:
TEST CASES:
1. A html page should be displayed which shows the division of page by 3
columns.
2. On the 1st top frames. Different images to be displayed.
3. In the second frame, on the left corner 3 links should be displayed.
4. By clicking that links different pages should be displayed in the middle of the
frame or right side of the frame.
5. At the last bottom footer frame, some copyright should be displayed.
RESULT: Frames are designed using HTML successfully.
EXPERIMENT 3
Create a html document to demonstrate form elements that includes form, input-text,
password, radio, checkbox, hidden, button, submit, reset, label, textarea, select, option, fileupload.
AIM: To create application using html tags.
ALGORITHM:
STEP 1. Open a document and save it with .html extension.
STEP 2. Open html tag and write code for textboxes for username, password, phone
number etc.
STEP 3. Create a radio button for gender.
STEP 4. Create a checkbox for hobbies, qualification etc.
STEP 5. Create a dropdown box for select statement.
STEP 6. Create a file button for uploading a files
STEP 7. Create a button for submit, reset and cancel.
STEP 8. Save the program and open the document in browser.
SOURCE CODE:
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<form method="" action="">
<table border="1" align="center" width="400" bgcolor="lightblue" >
<caption>Registration Form</caption>
<tr>
<th>First name</th>
<td><input type="text" name="fn" id="fn1" maxlength="10" title="enter your first
name" placeholder="enter your first name" required/></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text"/></td>
</tr>
<tr>
<th>Enter your password</th>
<td><input type="password"/></td>
</tr>
<input type="hidden" id="hari">
<tr>
<th>Enter your email</th>
<td><input type="email"/></td>
</tr>
<tr>
<th>Enter your mobile</th>
<td><input type="number"/></td>
</tr>
<tr>
<th>Enter your address</th>
<td><textarea rows="8" cols="20"></textarea></td>
</tr>
<tr>
<th>Select your gender</th>
<td>
<input type="radio" name="g" value="m"/>Male
<input type="radio" name="g" value="f"/>Female
</td>
</tr>
<tr>
<th>Select your hobbies</th>
<td>
<input type="checkbox" name="x" value="h"/>Watching Movies<br>
<input type="checkbox" name="x" value="h2"/>Playing Games<br>
<input type="checkbox" name="x" value="h3"/>Reading Books<br>
</td>
</tr>
<tr>
<th>Select your DOB</th>
<td><input type="date"/></td>
</tr>
<tr>
<th>Select your Country</th>
<td>
<select name="country">
<option value="" selected="selected" disabled="disabled">Select your
country</option>
<option value="1">India</option>
<option value="2">America</option>
</select>
</td>
</tr>
<tr>
<th>Upload your File</th>
<td><input type="file"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
SAMPLE OUTPUT:
TEST CASES:
1. Text boxes should be displayed for entering the information
2. Radio button should be displayed to select gender
3. For multiple selection of input checkbox should be created for selection course
4. Files should be successfully submitted by choose file button
5. After giving input data, submit button should be clicked to submit database
6. Reset button is displayed to reset the database
7. Cancel button should be displayed to cancel the data
RESULT: Application form is designed successfully using html tags.
EXPERIMENT 4
Write a HTML program with at least two <h1>, two images, two buttons and appropriate
CSS to display
• All <h1> with font-size 12pt, and bold in Verdana font using Inline CSS.
• All <img> with border color yellow, thickness 10px using Document Level CSS
• All <input type=’button’> should change background color to red on mouse over
them using External CSS.
AIM: To Create and design a webpage using the concept of CSS in HTML.
ALGORITHM:
STEP 1.
Create a html document and save it with program name .html
STEP 2.
Open html tag and write code
STEP 3.
Use bgcolor in body tag to add background color
STEP 4.
Write a frameset tags code inside the html tag and close the tags.
STEP 5.
Create one more document for one frame in which we have given some
html name
STEP 6.
Write the html code and css code inside the document which we have
given in the frame tag
STEP 7.
Apply background color for the menu bar by using css or by using style
tag
STEP 8.
Save the file
SOURCE CODE:
Exp4_1.html:
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
img {
border: 10px solid yellow;
width:150px;
}
</style>
</head>
<body bgcolor="cyan">
<h1 style="font-family:verdana;font-size:12px;font-weight:bold">Web Technology
1</h1>
<img src=img1.jpg><br><br>
<input type="button" value="BUTTON 1"/>
<h1 style="font-family:verdana;font-size:12px;font-weight:bold">Web Technology
2</h1>
<img src=img2.jpg><br><br>
<input type="button" value="BUTTON 2"/>
</body>
</html>
style.css:
input:hover {
background-color: red;
}
SAMPLE OUTPUT:
TESTCASES:
1. Html page should be displayed with background menu bar as yellow which
shows the division of page by 3 partition.
2. Html file should be displayed in frames.
3. If we click on the button, the corresponding page changed to red color
4. It should be displayed on same frame or next frame based on the code.
RESULT: A webpage is designed and developed by using CSS in HTML
EXPERIMENT 5
AIM: Design a HTML page having a text box and four buttons via Factorial, Fibonacci,
Prime and Palindrome. When a button is pressed an appropriate java script function should
be called to display the following:
factorial of that number
Fibonacci series up to that number
prime numbers up to that number
is it palindrome or not.
ALGORITHM:
STEP 1.
HTML page should be created in a document by saving it with program
name. html
STEP 2.
Two textboxes should be created .one text box is for enter the data and
another text box is for display the result
STEP 3.
Four buttons should be created for four operations i.e., Factorial,
Fibonacci, prime numbers and palindrome.
STEP 4.
After clicking the Factorial button, an appropriate java script factorial
function should be displayed.
STEP 5.
After clicking the Fibonacci button, an appropriate java script
Fibonacci function should be displayed.
STEP 6.
After clicking the Prime number button ,an appropriate java script
prime number function should be displayed.
STEP 7.
After clicking the palindrome button, an appropriate java script
palindrome function should be displayed.
STEP 8.
In the head tag, script tag should be opened
STEP 9.
Inside the script tag,each function should be created for all four
operations
to write the code for factorial,Fibonacci,prime number and
palindrome operations
STEP 10. Create variables in functions to store the number which user enters in
the textbox by getElemntById function.
SOURCE CODE:
Source Code
<html>
<head>
<title>Java Script</title>
<style>
.one:hover{
background-color:green;
}
.two:hover{
background-color:orange;
}
.three:hover{
background-color:indigo;
}
.four:hover{
background-color:yellow;
}
</style>
<script>
function factorial(){
var i,no,fact;
fact=1;
no=Number(document.getElementById("n").value);
for(i=1;i<=no;i++)
fact=fact*i;
document.getElementById("output").value=fact;
}
function fibonacci()
{
var var1=0;
var var2=1;
var var3,i;
var st="0"+" "+"1";
var no=Number(document.getElementById("n").value);
for(i=3;i<=no;i++)
{
var3=var1+var2;
var1=var2;
var2=var3;
st=st+" "+String(var3);
}
document.getElementById("output").value=st;
}
function prime(){
var i=0;
var j=0;
var no;
var st="";
no=Number(document.getElementById("n").value);
for(i=1;i<=no;i++)
{
c=0;
for(j=1;j<=i;j++)
{
if(i%j==0)
c++;
}
if(c==2)
st=st+" "+String(i);
}
document.getElementById("output").value=st;
}
function palindrome()
{
var rem,temp,final=0;
var number=Number(document.getElementById("n").value);
temp=number;
while(number>0)
{
rem=number%10;
number=parseInt(number/10);
final=final*10+rem;
}
if(final==temp)
{
document.getElementById("output").value="The Input Number is Palindrome";
}
else
{
document.getElementById("output").value="The Input Number is Not Palindrome";
}
}
</script>
</head>
<body>
<table border="1" align="center" width="400" bgcolor="lightblue" >
<caption>Output</caption>
<tr>
<th>Enter the Input</th>
<td><input type="text" id="n"></td>
</tr>
<tr>
<th>Output</th>
<td><textarea name="output" rows="5" cols="25" id="output"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<button onclick="factorial()" class="one">Factorial</button>
<button onclick="fibonacci()" class="two">Fibonacci</button>
<button onclick="prime()" class="three">Prime Numbers</button>
<button onclick="palindrome()" class="four">Palindrome</button>
</td>
</tr>
</table>
</body>
</html>
Output Screen Shots
Before entering the values and the buttons having hovering effect:
Factorial of a Number:
Fibonacci series upto a given number:
Prime number upto a given number:
Palindrome or not:
SAMPLE OUTPUT:
TEST CASES:
1. Html page should be displayed with two text boxes, one is for taking input from the user
and other is for displaying result.
2. The user clicks on particular button , the appropriate java script function should be
displayed.
EXPERIMENT 6
AIM: Write Java script program to demonstrate the following objects with at least
five methods
MATH
STRING
ARRAY
DATE
ALGORITHM:
STEP 1.
HTML page should be created in a document by saving it with program
name. html
STEP 2.
Four
buttons
should
be
created
for
four
operations
i.e.,Math,String,Array,Date.
STEP 3.
After clicking the Math button ,the methods of math object should be
displayed
STEP 4.
After clicking the String button , the methods of string object should
be displayed
STEP 5.
Next clicking on the Array button , the methods of Array object should
be displayed
STEP 6.
After clicking the Date button, the methods of Date object should be
displayed
STEP 7.
In the head tag, script tag should be opened
STEP 8.
Inside the script tag,each function should be created for all four
operations to write the code for Math,String,Array and Date operations.
SAMPLE OUTPUT:
Source Code
<html>
<head>
<style>
.one:hover{
background-color:green;
}
.two:hover{
background-color:blue;
}
.three:hover{
background-color:indigo;
}
.four:hover{
background-color:yellow;
}
.hari{
color:green;
}
</style>
</head>
<body>
<table border="1" align="center" width="400" bgcolor="orange" >
<tr>
<th>Output</th>
</tr>
<tr>
<td align="center">
<button type="button" onclick="math()" class="one">Math</button>
<button onclick="string()" class="two">String</button>
<button onclick="array()" class="three">Array</button>
<button onclick="date()" class="four">Date</button>
</td>
</tr>
</table>
<script type="text/javascript">
function string(){
document.write("<u><h3> String Objects</h3></u>");
var str1=new String("Vignan University");
var str2=new String("Vadlamudi Guntur");
document.write("1.)First String:"+str1+"<br>");
document.write("2.)Second String:"+str2+"<br>");
document.write("3.)Concatenation:"+str1.concat(str2)+"<br>");
document.write("4.)Replacing:"+str2.replace(str1)+"<br>");
document.write("5.)Slice:"+str1.slice(3,6)+"<br");
document.write("6.)Character:"+str1.charAt(10)+"<br>");
}
</script>
<script type="text/javascript">
function date(){
document.write("<u><h3> Date Objects</h3></u>");
var d=new Date();
document.write("->Date
is:"+d.getDate()+"/"+d.getMonth()+"/"+d.getFullYear()+"<br>");
document.write("-> Time
is:"+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()+"<br>");
}
</script>
<script type="text/javascript">
function array(){
document.write("<u><h3> Array Objects</h3></u>");
var city=["Hyderabad","Chennai","Vizag","Mumbai","Bangalore"];
document.write("*Concatenation:"+city.concat("Pune",Lucknow")+"<br>");
document.write("*Pop:"+city.pop()+"<br>");
document.write("*Unshift:"+city.unshift()+"<br>");
document.write("*Reverse:"+city.reverse()+"<br>");
}
</script>
<script type="text/javascript">
function math(){
document.write("<u><h3> Math Objects</h3></u>");
document.write("1.) Square Root of 4 is
:"+Math.sqrt(4)+"<br>");
document.write("2.) Absolute value of -4 is:"+Math.abs(-4)+"<br>");
document.write("3.) Ceil value of 4.6 is :"+Math.ceil(4.6)+"<br>");
document.write("4.) Round value of 4.3 is :"+Math.round(4.3)+"<br>");
}
</script>
</body>
</html>
Output Screen Shots
Initially i.e. Before Clicking a Button which are having Hovering effect.
After Clicking the buttons its individual functioning will be implemented…
String Objects:-
Array Objects:-
TEST CASES:
1. Html page should be displayed with four buttons.
2. The user clicks on particular button,the appropriate methods of the function should be
displayed.
RESULT: Successfully web page designed with given requirements.
EXPERIMENT 7
AIM : Write a JavaScript program to perform arithmetic operations when the corresponding
button is pressed.
ALGORITHM:
STEP 1.
HTML page should be created in a document by saving it with program name.
html
STEP 2.
Two textboxes should be created in order to enter the data
STEP 3.
One more text box to be created in order to display the result inside it
STEP 4.
Four buttons should be created for four operations i.e., addition, subtraction,
division and multiplication.
STEP 5.
After clicking the add button ,addition of two numbers operation should be
done.
STEP 6.
After clicking the sub button ,subtraction of two numbers operation should
be done.
STEP 7.
After clicking the mul button ,multiplication of two numbers operation should
be done.
STEP 8.
After clicking the division button ,division of two numbers operation should
be done.
STEP 9.
In the head tag, script tag should be opened
STEP 10.
Inside the script tag,each function should be created for all four operations to
write the code for adding,subtracting,multiplication and division of two numbers.
STEP 11.
Create two variables. To each variable, store the number which user enters in
the textbox by getElemntById function.
SOURCE CODE:
<!doctype html>
<head>
<script>
function dis(val)
{
document.getElementById("result").value+=val
}
function solve()
{
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}
function clr()
{
document.getElementById("result").value = ""
}
</script>
<style>
.title{
margin-bottom: 10px;
text-align:center;
width: 210px;
color:green;
border: solid black 2px;
}
input[type="button"]
{
background-color:orange;
color: black;
border: solid black 2px;
width:100%
}
input[type="text"]
{
background-color:white;
border: solid black 2px;
width:100%
}
</style>
</head>
<body>
<span class="title">Harischandra Prasad Calculator</span>
<table style="border:1px solid black" border="2">
<tr>
<td colspan="3"><input type="text" id="result"></td>
<td><input type="button" onclick="clr()" value="C"></td>
</tr>
<tr>
<td><input type="button" onclick="dis('1')" value="1" style="width:100%"></td>
<td><input type="button" onclick="dis('2')" value="2" style="width:100%"></td>
<td><input type="button" onclick="dis('3')" value="3" style="width:100%"></td>
<td><input type="button" onclick="dis('/')" value="/" style="width:100%"></td>
</tr>
<tr>
<td><input type="button" onclick="dis('4')" value="4" style="width:100%"></td>
<td><input type="button" onclick="dis('5')" value="5" style="width:100%"></td>
<td><input type="button" onclick="dis('6')" value="6" style="width:100%"></td>
<td><input type="button" onclick="dis('-')" value="-" style="width:100%"></td>
</tr>
<tr>
<td><input type="button" onclick="dis('7')" value="7" style="width:100%"></td>
<td><input type="button" onclick="dis('8')" value="8" style="width:100%"></td>
<td><input type="button" onclick="dis('9')" value="9" style="width:100%"></td>
<td><input type="button" onclick="dis('+')" value="+" style="width:100%"></td>
</tr>
<tr>
<td><input type="button" onclick="dis('.')" value="." style="width:100%"></td>
<td><input type="button" onclick="dis('0')" value="0" style="width:100%"></td>
<td><input type="button" onclick="solve()" value="=" style="width:100%"></td>
<td><input type="button" onclick="dis('*')" value="*" style="width:100%"></td>
</tr>
</table>
</body>
</html>
OUTPUT SCREEN SHOTS
Before performing the calculations.…
SAMPLE OUTPUT:
TEST CASES:
1. Three text boxes should be displayed, the first two text boxes for taking input and
other is for displaying the output inside it.
2. Add button is displayed, after clicking it adding of two numbers should be done and
successfully displayed the result inside the textbox.
3. Subtract button is displayed, after clicking it subtraction of two numbers should be
done and successfully displayed the result inside the textbox.
4. Multiply button is displayed, after clicking it Multiplication of two numbers should
be done and successfully displayed the result inside the textbox.
5. Division button is displayed, after clicking it division of two numbers should be done
and successfully displayed the result inside the textbox.
RESULT: Successfully web page designed with given requirements.
EXPERIMENT 8
AIM : Write a Javascript program to validate user registration from.
ALGORITHM:
STEP 1. HTML page should be created in a document by saving it with program name.
html.
STEP 2. Eight textboxes should be created in order to enter the data.
STEP 3. For each field you have to make validation.
STEP 4. For Name Field, the name should be a valid username ie., it contains only
characters and it should not be null
STEP 5. Next for Password Field,the password should be a valid password i.e,. it
contains combination of atleast one upper case letter,one lowercase letter,one digit
and special characters. The field also contains length of characters i.e.,6-20 character
size.
STEP 6. For email field,the email should be a valid email ie.,it contains @ and .
symbol.
STEP 7. For branch field,the branch name should be valid.
STEP 8. For year Field, the year should be valid year.
STEP 9. Last the mobile number,valid mobile number should be entered i.e.,the mobile
number should be 10 digit number.
STEP 10. Create one submit button to validate all the fields.
SAMPLE OUTPUT:
<html>
<head>
<title>HTML Table</title>
<script>
function validate(){
var name=document.myform.fn.value;
var password=document.myform.pass.value;
if(name==null||name==" ")
{
alert("Name Cannot be Blank");
return false;
}
else if(!isNaN(name))
{
alert("Please Enter only Characters");
return false;
}
else if((name.length<5)||(name.length>15))
{
alert("Your character must be 5 to 15 characters");
return false;
}
else if(password.length<6)
{
alert("Password must be atleast 6 characters long");
return false;
}
else if(!(/^\d{10}$/).test(document.myform.phno.value))
{
alert("You have Entered Invalid Phone Number");
return false;
}
else if(!(/^\w+([\-]?\w+)*@\w+([\-]?\w+)*(\.\w{2,3}+$/).test(document.myform.email.value))
{
alert("You have Entered Invalid Email address!");
return false;
}
}
</script>
</head>
<body>
<form method="get" action="#" name="myform" onSubmit="validate()">
<table border="1" align="center" width="400" bgcolor="lightblue" >
<caption>Registration Form</caption>
<tr>
<th>First name</th>
<td><input type="text" name="fn" id="fn1" maxlength="10" title="enter your first name"
placeholder="enter your first name" required/></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text"/></td>
</tr>
<tr>
<th>Enter your password</th>
<td><input type="password" name="pass"/></td>
</tr>
<input type="hidden" id="hari">
<tr>
<th>Enter your email</th>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<th>Enter your mobile</th>
<td><input type="number" name="phno"/></td>
</tr>
<tr>
<th>Enter your address</th>
<td><textarea rows="8" cols="20"></textarea></td>
</tr>
<tr>
<th>Select your gender</th>
<td>
<input type="radio" name="g" value="m"/>Male
<input type="radio" name="g" value="f"/>Female
</td>
</tr>
<tr>
<th>Select your hobbies</th>
<td>
<input type="checkbox" name="x" value="h"/>Watching Movies<br>
<input type="checkbox" name="x" value="h2"/>Playing Games<br>
<input type="checkbox" name="x" value="h3"/>Reading Books<br>
</td>
</tr>
<tr>
<th>Select your DOB</th>
<td><input type="date"/></td>
</tr>
<tr>
<th>Select your Country</th>
<td>
<select name="country">
<option value="" selected="selected" disabled="disabled">Select your country</option>
<option value="1">India</option>
<option value="2">America</option>
</select>
</td>
</tr>
<tr>
<th>Upload your File</th>
<td><input type="file"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT SCREENSHOTS
TEST CASES:
1. Html page should be displayed with eight text boxes, which is for taking input from the
user.
2. The user click on particular textbox and enter the data; the data should be validated based
upon the given conditions.
RESULT: Successfully web page designed with given requirements.
EXPERIMENT 9
Write a Java program to connect to a database server and insert employee’s data into
employee table using JDBC.
AIM: To create a JDBC program to connect with database and insert employee’s
information in database table.
ALGORITHM:
STEP 1.
Import JDBC packages.
STEP 2.
Load and register the JDBC driver.
STEP 3.
Open a connection to the database.
STEP 4.
Create a statement object to perform a query.
STEP 5.
Execute the statement object and return a query resultset.
STEP 6.
Process the resultset.
STEP 7.
Close the resultset and statement objects.
STEP 8.
Close the connection.
DESCRIPTION:
Fundamental Steps in JDBC
The fundamental steps involved in the process of connecting to a database and executing a
query consist of the following:
•
Import JDBC packages.
•
Load and register the JDBC driver.
•
Open a connection to the database.
•
Create a statement object to perform a query.
•
Execute the statement object and return a query resultset.
•
Process the resultset.
•
Close the resultset and statement objects.
•
Close the connection.
These steps are described in detail in the sections that follow.
Import JDBC Packages
This is for making the JDBC API classes immediately available to the application
program. The following import statement should be included in the program irrespective
of the JDBC driver being used:
import java.sql.*;
Additionally, depending on the features being used, Oracle-supplied JDBC packages
might need to be imported. For example, the following packages might need to be
imported while using the Oracle extensions to JDBC such as using advanced data types
such as BLOB, and so on.
import oracle.jdbc.driver.*;
import oracle.sql.*;
Load and Register the JDBC Driver
This is for establishing a communication between the JDBC program and the Oracle
database. This is done by using the static registerDriver() method of
the DriverManager class of the JDBC API. The following line of code does this job:
DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
JDBC Driver Registration
For the entire Java application, the JDBC driver is registered only once per each database
that needs to be accessed. This is true even when there are multiple database connections
to the same data server.
Alternatively, the forName() method of the java.lang.Class class can be used to load and
register the JDBC driver:
Class.forName("oracle.jdbc.driver.OracleDriver");
However, the forName() method is valid for only JDK-compliant Java Virtual Machines
and implicitly creates an instance of the Oracle driver, whereas
the registerDriver() method does this explicitly.
Connecting to a Database
Once the required packages have been imported and the Oracle JDBC driver has been
loaded and registered, a database connection must be established. This is done by using
the getConnection() method of the DriverManager class. A call to this method creates an
object instance of the java.sql.Connection class. The getConnection() requires three input
parameters, namely, a connect string, a username, and a password. The connect string
should specify the JDBC driver to be yes and the database instance to connect to.
The getConnection() method is an overloaded method that takes
• Three parameters, one each for the URL, username, and password.
•
Only one parameter for the database URL. In this case, the URL contains the
username and password.
The following lines of code illustrate using the getConnection() method:
Connection conn = DriverManager.getConnection(URL, username, passwd);
Connection conn = DriverManager.getConnection(URL);
where URL, username, and passwd are of String data types.
We will discuss the methods of opening a connection using the Oracle JDBC OCI and thin
_drivers.
When using the OCI driver, the database can be specified using the TNSNAMES entry in
the tnsnames.ora file. For example, to connect to a database on a particular host as user
oratest and password oratest that has a TNSNAMES entry of oracle.world, use the
following code:
Connection conn = DriverManager.getConnection("jdbc:oracle:oci8:
@oracle.world", "oratest", "oratest");
Both the ":" and "@" are mandatory.
When using the JDBC thin driver, the TNSNAMES entry cannot be used to identify the
database. There are two ways of specifying the connect string in this case, namely,
•
Explicitly specifying the hostname, the TCP/IP port number, and the Oracle
SID of the database to connect to. This is for thin driver only.
•
Specify a Net8 keyword-value pair list.
For example, for the explicit method, use the following code to connect to a database on
host training where the TCP/IP listener is on port 1521, the SID for the database instance
is Oracle, the username and password are both oratest:
Connection conn = DriverManager.getConnection
("jdbc:oracle:thin:@training:1521:Oracle",
"oratest", "oratest");
For the Net8 keyword-value pair list, use the following:
Connection conn = DriverManager.getConnection
("jdbc:oracle:thin@(description=(address=
(host=training)(protocol=tcp)(port=1521))(connect_data=(sid=Oracle))) ", _"oratest",
"oratest");
This method can also be used for the JDBC OCI driver. Just specify oci8 instead of thin in
the above keyword-value pair list.
Querying the Database
Querying the database involves two steps: first, creating a statement object to perform a
query, and second, executing the query and returning a resultset.
Creating a Statement Object
This is to instantiate objects that run the query against the database connected to. This is
done by the createStatement() method of the conn Connection object created above. A call
to this method creates an object instance of the Statement class. The following line of code
illustrates this:
Statement sql_stmt = conn.createStatement();
Executing the Query and Returning a ResultSet
Once a Statement object has been constructed, the next step is to execute the query. This is
done by using the executeQuery() method of the Statement object. A call to this method
takes as parameter a SQL SELECT statement and returns a JDBC ResultSet object. The
following line of code illustrates this using the sql_stmt object created above:
ResultSet rset = sql_stmt.executeQuery
("SELECT empno, ename, sal, deptno FROM emp ORDER BY ename");
Alternatively, the SQL statement can be placed in a string and then this string passed to
the executeQuery() function. This is shown below.
String sql = "SELECT empno, ename, sal, deptno FROM emp ORDER BY ename";
ResultSet rset = sql_stmt.executeQuery(sql);
Statement and ResultSet Objects
Statement and ResultSet objects open a corresponding cursor in the database for SELECT
and other DML statements.
The above statement executes the SELECT statement specified in between the double
quotes and stores the resulting rows in an instance of the ResultSet object named rset.
Processing the Results of a Database Query That Returns Multiple Rows
Once the query has been executed, there are two steps to be carried out:
•
Processing the output resultset to fetch the rows
•
Retrieving the column values of the current row
The first step is done using the next() method of the ResultSet object. A call to next() is
executed in a loop to fetch the rows one row at a time, with each call to next() advancing
the control to the next available row. The next() method returns the Boolean value true
while rows are still available for fetching and returns false when all the rows have been
fetched.
The second step is done by using the getXXX() methods of the JDBC rset object.
Here getXXX() corresponds to the getInt(), getString() etc with XXX being replaced by a
Java datatype.
The following code demonstrates the above steps:
String str;
while (rset.next())
{
str = rset.getInt(1)+ " "+ rset.getString(2)+ " "+rset.getFloat(3)+ " "rset.getInt(4)+ "\n";
}
byte buf[] = str.getBytes();
OutputStream fp = new FileOutputStream("query1.lst");
fp.write(buf);
fp.close();
Here the 1, 2, 3, and 4 in rset.getInt(), rset.getString(), getFloat(), and getInt() respectively
denote the position of the columns in the SELECT statement, that is, the first
column empno, second column ename, third column sal, and fourth column deptno of the
SELECT statement respectively.
Specifying get() Parameters
The parameters for the getXXX() methods can be specified by position of the
corresponding columns as numbers 1, 2, and so on, or by directly specifying the column
names enclosed in double quotes, as getString("ename") and so on, or a combination of
both.
Closing the ResultSet and Statement
Once the ResultSet and Statement objects have been used, they must be closed explicitly.
This is done by calls to the close() method of the ResultSet and Statement classes. The
following code illustrates this:
rset.close();
sql_stmt.close();
If not closed explicitly, there are two disadvantages:
•
Memory leaks can occur
•
Maximum Open cursors can be exceeded
Closing the ResultSet and Statement objects frees the corresponding cursor in the
database.
Closing the Connection
The last step is to close the database connection opened in the beginning after importing
the packages and loading the JDBC drivers. This is done by a call to the close() method of
the Connection class.
The following line of code does this:
conn.close();
Explicitly Close your Connection
Closing the ResultSet and Statement objects does not close the connection. The connection
should be closed by explicitly invoking the close() method of the Connection class.
SOURCE CODE:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package jbdc_programs;
import java.sql.*;
/**
*
* @author Amar
*/
public class TableInsert {
public static void main(String[] args)throws Exception
{
try{
Class.forName("com.mysql.jdbc.Driver");
Connection
con=DriverManager.getConnection("jdbc:mysql://localhost/test","root","");
/* Statement st=con.createStatement();
String qry="insert into branch values('ECE','HBlock')";
st.executeUpdate(qry);
System.out.println("Data Inserted Successfullty");*/
PreparedStatement stmt=con.prepareStatement("insert into branch values(?,?)");
stmt.setString(1,"NEWBLOCK");//1 specifies the first parameter in the query
stmt.setString(2,"OLDBlock");
int i=stmt.executeUpdate();
System.out.println(i+" records inserted");
con.close();
}catch(Exception e)
{
System.out.println("Error:"+e.getMessage());
}
}
}
SAMPLE OUTPUT:
RESULT: Successfully JDBC program is implemented and employee’s information
inserted into database table.
EXPERIMENT 10
Write a JDBC Program to retrieve and display data from a table employee.
AIM: To develop JDBC java program to retrieve and display user information from
employee table.
ALGORITHM:
STEP 1.
Import JDBC packages.
STEP 2.
Load and register the JDBC driver.
STEP 3.
Open a connection to the database.
STEP 4.
Create a statement object to perform a query.
STEP 5.
Execute the statement object and return a query resultset.
STEP 6.
Process the resultset.
STEP 7.
Close the resultset and statement objects.
STEP 8.
Close the connection
SOURCE CODE:
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package jbdc_programs;
import java.sql.*;
/**
*
* @author Amar
*/
public class JDBCProgram {
/**
* @param args the command line arguments
*/
public static void main(String[] args)throws Exception {
// TODO code application logic here
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection
con=DriverManager.getConnection("jdbc:mysql://localhost/test","root","");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select * from branch");
System.out.println("USERID\t\tUSER NAME\t");
while(rs.next())
{
System.out.print(""+rs.getString(1));
System.out.print("\t\t"+rs.getString(2));
System.out.println();
}
}catch(Exception e)
{
System.out.println("Error:"+e.getMessage());
}
}
}
SAMPLE OUTPUT:
RESULT: Successfully JDBC program is implemented and employee’s information
retrieved and displayed on screen.
EXPERIMENT 11
Write a simple java servlet program to display Simple text content on screen.
AIM: To develop java servlet program to display user simple text on screen.
ALGORITHM:
To create a servlet application in Netbeans IDE, you will need to follow the following
(simple) steps :
STEP 1.
Open Netbeans IDE, Select File -> New Project
STEP 2. Select Java Web -> Web Application, then click on Next,
STEP 3. Give a name to your project and click on Next,
STEP 4. and then, Click Finish
STEP 5. The complete directory structure required for the Servlet Application will be
created automatically by the IDE.
STEP 6. To create a Servlet, open Source Package, right click on default packages > New -> Servlet.
STEP 7.
Give a Name to your Servlet class file,
STEP 8. Now, your Servlet class is ready, and you just need to change the method
definitions and you will good to go.
STEP 9. Write some code inside your Servlet class.
STEP 10. Create an HTML file, right click on Web Pages -> New -> HTML
STEP 11. Give it a name. We recommend you to name it index, because browser will always
pick up the index.html file automatically from a directory. Index file is read as the first
page of the web application.
STEP 12. Write some code inside your HTML file. We have created a hyperlink to our
Servlet in our HTML file.
STEP 13. Edit web.xml file. In the web.xml file you can see, we have specified the urlpattern and the servlet-name, this means when hello url is accessed our Servlet file will
be executed.
STEP 14. Run your application, right click on your Project and select Run
STEP 15. Click on the link created, to open your Servlet.
STEP 16. Hurray! Our First Servlet class is running.
SAMPLE OUTPUT:
RESULT: Successfully java servlet program is implemented and simple text information is
displayed on screen.
EXPERIMENT 12
Write a servlet program to demonstrate Life cycle of Servlet.
AIM: To develop java servlet program to demonstrate Life Cycle of Servlet.
ALGORITHM:
STEP 1. Loading Servlet Class : A Servlet class is loaded when first request for the
servlet is received by the Web Container.
STEP 2. Servlet instance creation :After the Servlet class is loaded, Web Container
creates the instance of it. Servlet instance is created only once in the life cycle.
STEP 3. Call to the init() method : init() method is called by the Web Container on
servlet instance to initialize the servlet.
Signature of init() method :
public void init(ServletConfig config) throws ServletException
STEP 4. Call to the service() method : The containers call the service() method each
time the request for servlet is received. The service() method will then call
the doGet() or doPost() methos based ont eh type of the HTTP request, as explained
in previous lessons.
Signature of service() method :
public void service(ServletRequest request, ServletResponse response) throws
ServletException, IOException
STEP 5. Call to destroy() method: The Web Container call the destroy() method
before removing servlet instance, giving it a chance for cleanup activity.
SOURCE CODE:
Source code
import java.io.*;
import javax.servlet.*;
public class ExampleGeneric extends GenericServlet{
private String message;
public void init() throws ServletException {
message = "Hello, This is Sec B ";
}
public void service(ServletRequest req,ServletResponse res)
throws IOException,ServletException{
res.setContentType("text/html");
PrintWriter out = res.getWriter();
out.println("<body bgcolor=cyan>");
out.println("<h1>" + message + "</h1>");
}
public void destroy() {
}
}
SAMPLE OUTPUT:
RESULT: Successfully java servlet life cycle is demonstrated.
EXPERIMENT 13
Develop a Servlet to validate user name and password with the data stored in Servlet
configuration file. Display authorized user if she/he is authorized else display unauthorized
user.
AIM: To design and develop a servlet program to validate username and password and
display corresponding messages on screen.
ALGORITHM:
STEP 1: Create a simple login page using HTML.
STEP 2: Use POST/GET method to navigate to validation servlet.
STEP 3: In validation servlet file retrieve data i.e., username and password from web.xml
using getParameter() method.
STEP 4: Verify entered username and password is valid or not. If it is valid display
authorized user or else display unauthorized user on screen using write buffer.
SOURCE CODE:
Index.html
<html>
<head>
<title>login form</title>
</head>
<body>
<form method="post" action="loginservlet">
<table border="1" width="400" align="center">
<tr><th>
Email ID:</th>
<td><input type="email" name="email"
style="width:100%"/></td>
</tr>
<tr>
<th>Password:</th>
<td><input type="password" name="pass"
style="width:100%" /></td>
</tr>
<tr><td colspan="2" align="center">
<input type="submit" value="login" /></td></tr>
</table>
</form>
</body>
</html>
Loginservlet.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class loginservlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out=response.getWriter();
String name=request.getParameter("email");
String password=request.getParameter("pass");
ServletConfig config=getServletConfig();
String webname=config.getInitParameter("email");
String webpass=config.getInitParameter("password");
if(webname.equals(name) && webpass.equals(password))
{
out.println("<center><h1>Valid user</h1></center>");
}
else
{
out.println("<center><h1>Invalid user</h1></center>");
}
}
}
Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<servlet>
<servlet-name>loginservlet</servlet-name>
<servlet-class>loginservlet</servlet-class>
<init-param>
<param-name>email</param-name>
<param-value>haritiger200@gmail.com</param-value>
</init-param>
<init-param>
<param-name>password</param-name>
<param-value>123</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>HelloWorld</servlet-name>
<url-pattern>/HelloWorld</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>loginservlet</servlet-name>
<url-pattern>/loginservlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>
OUTPUT SCREENSHOTS
RESULT: Servlet is designed and developed for validating username and password through
servlet config file.
EXPERIMENT 14
Write JSP Program to store student information sent from registration page into Database.
AIM: To design and develop a student registration page to store and display data from
Database using JSP.
ALGORITHM:
STEP 1: Create a registration page using JSP.
STEP 2: Use POST/GET method to transfer student registration details from one page to
another page.
STEP 3: Use JDBC connection for connecting to Database.
STEP 4: Retrieve student information from the registration page and store in database.
STEP 5: Once data is inserted into database successfully display entered data on screen.
SOURCE CODE:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<form method="post" action="validate1.jsp">
<table border="1" align="center" width="400" bgcolor="lightblue" >
<caption>Registration Form</caption>
<tr>
<th>First name</th>
<td><input type="text" name="fn" id="fn1" maxlength="10" title="enter
your first name" placeholder="enter your first name" required/></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text" name="ln" id="ln" maxlength="10" title="enter your
last name" placeholder="enter your first name" required/></td>
</tr>
<tr>
<th>Enter your password</th>
<td><input type="password" name="pass" id="pass"/></td>
</tr>
<tr>
<th>Enter your email</th>
<td><input type="email" name="email" id="email"/></td>
</tr>
<tr>
<th>Enter your mobile</th>
<td><input type="number" name="phone" id="phone"/></td>
</tr>
<tr>
<th>Enter your address</th>
<td><textarea
rows="8"
cols="20"
name="address"
id="address"></textarea></td>
</tr>
<tr>
<th>Select your gender</th>
<td>
<input type="radio" name="g" value="m"/>Male
<input type="radio" name="g" value="f"/>Female
</td>
</tr>
<tr>
<th>Select your hobbies</th>
<td>
<input type="checkbox" name="x" value="Watching Movies"/>Watching
Movies<br>
<input type="checkbox" name="x" value="Playing Games"/>Playing
Games<br>
<input type="checkbox" name="x" value="Reading Books"/>Reading
Books<br>
</td>
</tr>
<tr>
<th>Select your DOB</th>
<td><input type="date"/></td>
</tr>
<tr>
<th>Select your Country</th>
<td>
<select name="country">
<option value="" selected="selected" disabled="disabled">Select your
country</option>
<option value="India">India</option>
<option value="USA">America</option>
</select>
</td>
</tr>
<tr>
<th>Upload your File</th>
<td><input type="file"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Validate1.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Validate</title>
</head>
<body>
<%
String fn=request.getParameter("fn");
String ln=request.getParameter("ln");
String pass=request.getParameter("pass");
String email=request.getParameter("email");
String phone=request.getParameter("phone");
String address=request.getParameter("address");
String gender=request.getParameter("g");
String hobi=request.getParameter("x");
String country=request.getParameter("country");
%>
<%@page import="java.io.*" %>
<%@page import="java.sql.*" %>
<%
response.setContentType("text/html");
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection
con=DriverManager.getConnection("jdbc:mysql://localhost/test","root","");
Statement st=con.createStatement();
ResultSet
re=st.executeQuery("select
*
from
student
where
email='"+email+"'");
while(re.next())
{
out.print("<h1 style='color:red'>Already Available</h1>");
}
String
qry="insert
into
student
values('"+fn+"','"+ln+"','"+pass+"','"+email+"','"+phone+"','"+address+"','"+gender+
"','"+hobi+"','"+country+"')";
st.executeUpdate(qry);
out.print("<h1>Data Inserted Successfully</h1><br>And Registration Done!!!");
ResultSet rs=st.executeQuery("select * from student where email='"+email+"'");
out.println("<TABLE BORDER='1'><TR><TH>FIRST NAME</TH><TH>LAST
NAME</TH><TH>EMAIL</TH><TH>PHONE</TH><TH>ADDRESS</TH><TH>GEN
DER</TH><TH>HOBBIES</TH><TH>COUNTRY</TH></TR>");
while(rs.next())
{
out.print("<TR><TD>"+rs.getString(1)+"</TD>");
out.print("<TD>"+rs.getString(2)+"</TD>");
out.print("<TD>"+rs.getString(4)+"</TD>");
out.print("<TD>"+rs.getString(5)+"</TD>");
out.print("<TD>"+rs.getString(6)+"</TD>");
out.print("<TD>"+rs.getString(7)+"</TD>");
out.print("<TD>"+rs.getString(8)+"</TD>");
out.print("<TD>"+rs.getString(9)+"</TD></TR>");
}
out.print("</TABLE>");
}catch(Exception e)
{
out.println("Error:"+e.getMessage());
}
%>
</body>
</html>
SAMPLE OUTPUT:
RESULT: Successfully JSP page created for storing and displaying information on screen.
EXPERIMENT 15
Write a JSP program to validate username and password through database.
AIM: To design and develop a JSP program to validate username and password and display
corresponding messages on screen.
ALGORITHM:
STEP 1: Create a simple login page using JSP.
STEP 2: Use POST/GET method to navigate to validation servlet.
STEP 3: In validation JSP file retrieve data i.e., username and password from user login
page.
STEP 4: Verify entered username and password is available in database or not. If it is valid
display authorized user or else display unauthorized user on screen using write buffer.
SOURCE CODE:
Login.jsp
<%-Document : validate
Created on : 18 Sep, 2020, 11:07:39 PM
Author
: Amar
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<title>LOGIN</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<link rel="stylesheet" type="text/css"
ref="vendor/bootstrap/css/bootstrap.min.css">
<link
rel="stylesheet"
4.7.0/css/font-awesome.min.css">
type="text/css"
href="fonts/font-awesome-
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-pic js-tilt" data-tilt>
<img src="images/img-01.png" alt="IMG">
</div>
<form class="login100-form validate-form" method="POST"
action="validate.jsp">
<span class="login100-form-title">
Member Login
</span>
<div class="wrap-input100 validate-input" data-validate = "Valid
email is required: ex@abc.xyz">
<input
class="input100"
type="email"
name="email"
placeholder="Email" required>
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Password is required">
<input class="input100" type="password" name="pass" placeholder="Password" required>
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">Login</button>
</div>
<div class="text-center p-t-12">
<span class="txt1">Forgot</span>
<a class="txt2" href="#">Username / Password?</a>
</div>
<div class="text-center p-t-136">
<a class="txt2" href="#">Create your Account
<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Validate.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Validate</title>
</head>
<body>
<%
String user=request.getParameter("email");
String pass=request.getParameter("pass");
session.setAttribute("SESSION_NAME", user);
session.setAttribute("SESSION_PASS", pass);
%>
<%@page import="java.io.*" %>
<%@page import="java.sql.*" %>
<%
response.setContentType("text/html");
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection
con=DriverManager.getConnection("jdbc:mysql://localhost/test","root","");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select * from Logins where email='"+user+"'
AND password='"+pass+"'");
if(rs.next())
{
out.println("<center><h1 style='color: green'>Login Successful</h1></center>");
}else{
out.println("<center><h1
style='color:
Password</h1></center>");
}
}catch(Exception e)
{
out.println("Error:"+e.getMessage());
}
%>
</body>
</html>
red'>Invalid
Username
and
SAMPLE OUTPUT:
RESULT: JSP is designed and developed for validating username and password through
database.
EXPERIMENT 16
Write an appropriate JSP page to insert, update and delete data in student table in a single
application with proper linking of JSP pages.
AIM: To design and develop a JSP program to data manipulation operation on student table.
ALGORITHM:
STEP 1: Create a simple JSP page that should contain three buttons.
STEP 2: Use POST/GET method to navigate to validation JSP.
STEP 3: Based on your interaction with JSP page perform insert, delete and update
operations in student table.
STEP 4: On user interaction use proper JSP page to perform corresponding operation.
SOURCE CODE:
<%-Document : validate
Created on : 18 Sep, 2020, 11:07:39 PM
Author
: Amar
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Validate</title>
</head>
<body>
<%@page import="java.io.*" %>
<%@page import="java.sql.*" %>
<%
response.setContentType("text/html");
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection
con=DriverManager.getConnection("jdbc:mysql://localhost/test","root","");
Statement st=con.createStatement();
Statement st1=con.createStatement();
String qry="UPDATE `student` SET `email`='amar.jukuntla@gmail.com'
WHERE `email`='amar.jukuntlaaa@gmail.com'";
st.executeUpdate(qry);
out.print("<h1>Data
Updated
Successfully</h1><br>And
Registration
Done!!!");
ResultSet rs=st1.executeQuery("select * from student where fn='ABHIN'");
out.println("<TABLE
BORDER='1'><TR><TH>FIRST
NAME</TH><TH>LAST
NAME</TH><TH>EMAIL</TH><TH>PHONE</TH><TH>ADDRESS</TH><T
H>GENDER</TH><TH>HOBBIES</TH><TH>COUNTRY</TH></TR>");
while(rs.next())
{
out.print("<TR><TD>"+rs.getString(1)+"</TD>");
out.print("<TD>"+rs.getString(2)+"</TD>");
out.print("<TD>"+rs.getString(4)+"</TD>");
out.print("<TD>"+rs.getString(5)+"</TD>");
out.print("<TD>"+rs.getString(6)+"</TD>");
out.print("<TD>"+rs.getString(7)+"</TD>");
out.print("<TD>"+rs.getString(8)+"</TD>");
out.print("<TD>"+rs.getString(9)+"</TD></TR>");
}
out.print("</TABLE>");
}catch(Exception e)
{
out.println("Error:"+e.getMessage());
}
%>
</body>
</html>
SAMPLE OUTPUT:
RESULT: JSP is designed and developed for performing data manipulation operations on
student table.