Scribd
Upload
24 views

BCSL-057 Web Programming Lab

Uploaded by

surajrsr9665
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

BCSL-057 Web Programming Lab

Uploaded by

surajrsr9665
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

CONTENTS

SL. PAGE
No DESCRIPTION No.

Design a simple web page of an organization with log in details. The page should
1 2
have header, left and footer sections created using <div> tag. Use CSS internally.
2 Design a registration form in html with input fields and perform validation checks 4
Create a web page containing various links that will connect to corresponding
3 6
sites on internet on click.
4 Write a JavaScript program that displays a Drop Down Menu. 7
Design a website with three pages. All three pages must have a header, menu
and content part which designed using external CSS. The first page should be the
5 main page, second page should have input entry. The third page should designed 8
by JSP has to display the contents entered in the second page when clicking the
submit button
Create five pages of a web site having similar top and left panels. The top should
6 have a logo on the left and name of the organization in the middle. The left 14
should have a drop down menu. Use JSP to include it in all the web pages.
Create a web site using JSP that it searches data from the database and display
7 23
the output.
Create a web site using JSP showing multiple pages for welcome, login,
8 27
registration, etc. Data base creation and retrieval also has to be added.
9 Create a web page to display mathematical operations using JSP. 32
10 Write a simple JSP program to print even numbers up to 10 34
11 Write a JSP embedded html program to display current date and time 35
Write a program in JSP to find factorial of number. The output should be
12 36
displayed on separate page.

1
Exercise 1:
Design a simple web page of an organization with log in details. The page should have header, left
and footer sections created using <div> tag. Use CSS internally.

Code:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:cyan;
color:black;
text-align:center;
padding:2px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:250px;
width:100px;
float:left;
padding:5px;

}
#section {
width:500px;
float:left;
padding:10px;
font-family:verdana;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>

<div id="header">
<font face="Consolas">
<h1>WELCOME TO MALL SHOP</h1>
<h2>WORLD'S LARGEST SHOPPING PORTAL</h2></font>
</div>

<div id="nav">

2
<form>
<font face="Consolas">
LOGIN ID<input type=text size=10><br>
PASSWORD<input type=password size=10><br>
<input type=Submit value="ENTER"><br><br>
<input type=Submit value="Register"><br>
</font>
</form>
</div>

<div id="section">
<h2>MALL SHOP</h2>
<p>Mallshop is the largest online shopping portal which is your final word for electronics,
clothing, gifts, accessories, laptops, mobile phones, and much much more.</p>
<p>Please log in to see a variety of goods from our online store and to make an order.</p>
<p>For new customers, please register to continue.</p>
</div>

<div id="footer">
Copyright © mallshop.com
</div>

</body>
</html>

Output:

3
Exercise 2:
Design a registration form in html with input fields and perform validation checks:

Code:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code.
//-->
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.number.value == "" )
{
alert( "Please provide your Phone Number!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.pin.value == "" ||
isNaN( document.myForm.pin.value ) ||
document.myForm.pin.value.length != 5 )
{
alert( "Please provide pincode in the format ######." );
document.myForm.pin.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
</script>
</head>

4
<body bgcolor="cyan">
<center>
<font face="Corbel">
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<h1><u> REGISTRATION FORM </u></h1>
Please fill in the details:<br><br>
NAME OF CANDIDATE <input type="text" name="Name"><br><br>
E-MAIL ADDRESS<input type="text" name="EMail"><br><br>
CONTACT NO<input type="text" name="number"><br><br>
PIN CODE: <input type="text" name="pin" ><br><br>
STATE:
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">KERALA</option>
<option value="2">TAMIL NADU</option>
<option value="3">KARNATAKA</option>
</select><br><br><br><br><br>
<input type="submit" value="SUBMIT">
</form>
</center>
</font>
</body>
</html>

Output:

5
Exercise 3:
Create a web page containing various links that will connect to corresponding sites on internet on
click.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page of links</title>
</head>
<body bgcolor=pink>
<font face="Corbel">
<h1>....SEARCH PAGE.....</h1>
<p>IF YOU NEED TO SEARCH SOMETHING, THEN GO TO
<a href="http://google.com">Google</a>.</p>
<p>HERE YOU HAVE SOME NEWS TO READ <a href="http://nytimes.com">New York
Times</a>.</p>
<p>THE <a href="http://ignou.ac.in">best university</a> I AM STUDYING IS IGNOU</p>
</font>
</body>
</html>

Output:

6
Exercise 4:
Write a JavaScript program that displays a Drop Down Menu.

Code:
<!DOCTYPE html>
<html>
<head> <title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function drop(x)
{
if (document.form1.menu.value !== "null")
document.location.href = x;
}
</script>
</head>
<body>
<form name="form1">
<select name="menu" onChange="drop(document.form1.menu.options
[document.form1.menu.options.selectedIndex].value);">
<option>Select</option>
<option value=Hyper.html>HTML</option>
<option value=css.html>CSS</option>
<option value=sql.html>SQL</option>
<option value=db.html>Database</option>
</select>
</form>
</body>
</html>

Output

7
Exercise 5:
Design a website with three pages. All three pages must have a header, menu and content part
which designed using external CSS. The first page should be the main page, second page should
have input entry. The third page should designed by JSP has to display the contents entered in the
second page when clicking the submit button.

There are two html pages, one JSP page and one CSS page:
Codes:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css"/>
<!-- // to include externally..
<link rel="stylesheet" href="/path/to/style.css"/> -->
</head>
<!-- body starts -->
<body>
<table border="1" cellpadding="1" cellspacing="1" width="100%" class="table1">
<tr class="header">
<td colspan="2"> <!-- two mens joing left and right pannels(1+1=2) -->
<center><h1>XYZ Company</h1></center>
</td>
</tr>
<tr class="body1">
<td width="15%" class="left">
<ul class="linklist">
<li><a href="index.html">Home</a></li>
<li><a href="form.html">Form</a></li>
</ul>
</td>
<td width="85%" class="right">
<h1>Home</h1>
<br>
Computer is a machine that can handle different types of data items. We feed data such as
numbers, characters, images, videos and sounds to a computer for processing. We know
that computer is an electronic device functioning on the basis of two electric states - ON and
OFF. All electronic circuits have two states – open and closed. The two-state operation is
called binary operation. Hence, the data given to computer should also be in binary form. In
this chapter we will discuss various methods for representing data such as numbers,
characters,
</td>
</tr>
<!-- footer -->
<!-- copy and paste header and set small height -->
<tr class="footer">
<td colspan="2" height="12" align="center">

8
<small>powerd by XYZ Company</small>
</td>
</tr>
</table>
</body>
<!-- body end -->
</html>

form.html:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css"/>
<!-- // to include externally..
<link rel="stylesheet" href="/path/to/style.css"/> -->
</head>
<!-- body starts -->
<body>
<table border="1" cellpadding="1" cellspacing="1" width="100%" class="table1">
<tr class="header">
<td colspan="2"> <!-- two mens joing left and right pannels(1+1=2) -->
<center><h1>XYZ Company</h1></center>
</td>
</tr>
<tr class="body1">
<td width="15%" class="left">
<ul class="linklist">
<li><a href="index.html">Home</a></li>
<li><a href="form.html">Form</a></li>
</ul>
</td>
<td width="85%" class="right">
<form name="f1" action="action.jsp" method="get">
<table>
<th>
From
</th>
<tr>
<td>
Name:
</td>
<td>
<input type="text" name="t1" vale="" />
</td>
</tr>

9
<tr>
<td>
Phone:
</td>
<td>
<input type="text" name="t2" vale="" />
</td>
</tr>
</td>
<tr>
<td colspan="2" align="justify">
<input type="submit" name="b1" vale="SUBMIT" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!-- footer -->
<!-- copy and paste header and set small height -->
<tr class="footer">
<td colspan="2" height="12" align="center">
<small>powerd by XYZ Company</small>
</td>
</tr>
</table>
</body>
<!-- body end -->
</html>

action.jsp:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css"/>
<!-- // to include externally..
<link rel="stylesheet" href="/path/to/style.css"/> -->
<%
String name=request.getParameter("t1");
String phone=request.getParameter("t2");
%>
</head>
<!-- body starts -->
<body>
<table border="1" cellpadding="1" cellspacing="1" width="100%" class="table1">
<tr class="header">
<td colspan="2">

10
<!-- two mens joing left and right pannels(1+1=2) -->
<center><h1>XYZ Company</h1></center>
</td>
</tr>
<tr class="body1">
<td width="15%" class="left">
<ul class="linklist">
<li><a href="index.html">Home</a></li>
<li><a href="form.html">Form</a></li>
</ul>
</td>
<td width="85%" class="right">
<form name="f1" action="action.jsp" method="get">
<table>
<th>
Details
</th>
<tr>
<td>
Name:
</td>
<td>
<%out.println(name);%>
</td>
</tr>
<tr>
<td>
Phone:
</td>
<td>
<%out.println(phone);%>
</td>
</tr>
</td>
</table>
</form>
</td>
</tr>
<!-- footer -->
<!-- copy and paste header and set small height -->
<tr class="footer">
<td colspan="2" height="12" align="center">
<small>powerd by XYZ Company</small>
</td>
</tr>
</table>
</body>
<!-- body end -->

11
</html>

style.css
*{ /* start means ella element um */
vertical-align: top; /* allenki table ile center il nilkkum. ittillelum examil no problm */
}
.table1{
height: 600px;
}
.body1{
height: 500px;
}
.header{
background-color: lightgrey; color: blue;
}
.footer{
color: green; background-color: grey;
}
.linklist{
list-style-type: none !important;
}
.left{
background-color: #B4CFE6;
color: blue;
}
.right{
background-color: #F1D1D1; color: #A2160E; font-family: serif;
}

Output:

12
13
Exercise 6:
Create five pages of a web site having similar top and left panels. The top should have a logo on the
left and name of the organization in the middle. The left should have a drop down menu. Use JSP to
include it in all the web pages.
Code:

Top.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IGNOU</title>
<style type="text/css">
@import url("IGNOUCSS.css")
</style>
</head>
<body>
<div class="top">
<table><tr><td class="pic"></td>
<td><h1>Indira Gandhi National Open University</h1>
<h3>REGIONAL CENTRE DELHI-2<br>Gandhi Smriti & Darshan Samiti Rajghat,
New Delhi-110002, INDIA</h3></td></tr>
</table>
</div>
</body>
</html>

Left.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IGNOU</title>
<script >
function drop(x)
{
if (document.form1.menu.value != "null")
{
document.location.href = x
}
}
</script>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
14
<body>
<div class="left"><br/><br/>
<form name="form1">
<selectname="menu" onChange ="drop(document.form1.menu.options[document.form1.
menu.options.selectedIndex].value)">
<option value=Home.jsp>Home</option>
<option value=Events.jsp>Events</option>
<option value=Stu_Support.jsp>Student Support</option>
<option value=Dev_Profile.jsp>Developer Profile</option>
<option value=Feedback.jsp>Feedback</option>
</select>
</form>
</div>
</body>
</html>

Home.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IGNOU</title>
<script >
function drop(x)
{
if (document.form1.menu.value != "null")
{
document.location.href = x
}
}
</script>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="left"><br/><br/>
<form name="form1">
<select name="menu" onChange="drop(document.form1.menu.options[document.form1.
menu.options.selectedIndex].value)">
<option value=Home.jsp>Home</option>
<option value=Events.jsp>Events</option>
<option value=Stu_Support.jsp>Student Support</option>
<option value=Dev_Profile.jsp>Developer Profile</option>
<option value=Feedback.jsp>Feedback</option>
</select>
</form>

15
</div>
</body>
</html>

Events.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Study Centre Website</title>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<div class="container">
<%@include file= "Left.jsp"%>
<div class="content">
<div class="content"><br/><br/><br/><br/>
<table class="eve"><tr class="sc"><th class="eve" colspan="4">Events Details</th></tr>
<tr><th class="eve">S. No.</th>
<th class="eve">Events</th>
<th class="eve">Date</th>
<th class="eve">Time</th></tr>
<tr><td>1.</td>
<td>Classical Music Recital </td>
<td>29 September 2013</td>
<td>10:00 AM</td>
</tr>
<tr class="alt"><td>2.</td>
<td>Foundation Day Celebration</td>
<td>20 October 2013</td>
<td>09:00 AM</td>
</tr>
<tr><td>3.</td>
<td>Children's Day Celebration</td>
<td>14 November 2013</td>
<td>11:00 AM</td>
</tr>
<tr class="alt"><td>4.</td>
<td>Debate Competition</td>
<td>10 December 2014</td>
<td>12:30 PM</td>
</tr>
</table>
</div>

16
</div>
</div></div></body></html>

Stu_Support.jsp

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Study Centre Website</title>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<div class="container">
<%@include file= "Left.jsp"%>
<div class="content">
<a href="#">Attendance</a><br/>
<a href="#">Date Sheet</a><br/>
<a href="#">Result</a><br/>
<a href="#">Grade Card</a><br/>
<a href="#">Previous Year Question Papers</a><br/>
<a href="#">Assignments</a><br/>
</div>
</div>
</div>
</body>
</html>

Dev_Profile.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Study Centre Website</title>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<div class="container">
<%@include file= "Left.jsp"%>
<div class="content">

17
<h3 class="cen">Developer Profile</h3>
<div class="cen"><img src="pic.jpg" width="300" height="200"/><br/>Soni Dubey</div><br/>
<table class="eve"><tr class="sc"><th class="eve" colspan="5">
Academic Qualification</th></tr>
<tr><th class="eve">S. No.</th>
<th>Qualification</th>
<th>Board</th>
<th>Marks %</th>
<th>Year</th></tr>
<tr><td>1.</td>
<td >10th</td>
<td>CBSE</td>
<td>72.62</td>
<td>2008</td></tr>
<tr class="alt"><td>2.</td>
<td>12th</td>
<td>CBSE</td>
<td>71.55</td>
<td>2010</td></tr>
</table><br/><br/>
<table class="eve"><tr class="sc"><th colspan="2">Projects Detail</th></tr>
<tr><th class="eve">S. No.</th>
<th class="eve">Project Name</th></tr>
<tr><td>1.</td>
<td>MakeMyDeal.com</td></tr>
<tr class="alt"><td>2.</td>
<td>BookMyTrip.com</td></tr>
<tr><td>3.</td>
<td>MyIndia.com</td></tr>
</table>
<ul>
<li>Hobbies: &nbsp;&nbsp;&nbsp;&nbsp;Reading books & surfing net</li>
<li>Interests: &nbsp;&nbsp;Listening to music & learning new things</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Feedback.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Study Centre Website</title>
<script>
function verify()

18
{
if (document.form1.name.value === "")
{
alert("Please Enter your Name");
document.form1.name.focus();
return false;
}
if (document.form1.enrol.value === "")
{
alert("Please enter your Enrollment No.");
document.form1.enrol.focus();
return false;
}
if (document.form1.email.value === "")
{
alert("Please give the Email ID");
return false;
}
if (document.form1.comment.value === "")
{
alert("Please write your comments.");
document.form1.comment.focus();
return false;
}
return true;
}
</script>
<style type="text/css">
@import url("IGNOUCSS.css");
</style>
</head>
<body>
<div class="container">
<%@include file= "Top.jsp"%>
<div class="container">
<%@include file= "Left.jsp"%>
<div class="content">
<br/><br/><br/><br/>
<form action="" name="form1">
<fieldset class="eve"><legend class="eve1">Feedback Form</legend>
<br/><br/>Name: <input class="right" type="text" name="name"/>
<br/><br/>Enrollment No. (Filled in by the students of IGNOU only):
<input class="right" type="text" name="enrol"/>
<br/><br/>Email ID:<input class="right" type="text" name="email"/>
<br/><br/>Write your comments here: <br/>
<textarea class="right" rows="5" cols="30" name="comment"></textarea>
<br/><br/><br/><br/><br/>
<input type="submit" value="Submit" onClick="return (verify());">

19
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>

IGNOUCSS.css
body {
color:#000; font-size:18pt; margin:0; padding:0;font-family: cambria;
}
.top{
color: white; background:green; text-align:center; font-size:10pt;height:150px;
padding-left: 20px;
}
.container{
width:100%
}
.pic{
background-image: url('ignou-logo3.jpg'); width:298px; height:100px;
}
table{
width:100%; padding:3px;
}
.left{
float:left;background:darkorange;width:250px;height:750px;padding-left: 5px;margin:0;
}
.footer{
clear:both;color:white;text-align:center;background-color:lightseagreen;font-size:15pt;
}
.content{
color: green; background-color: pink; float:left; width:748px; height:750px;
text-align:center; font-size:15pt;
}
select{
width:170px;background-color:green;color:white;height:30px;
font-family: cambria;font-size:15pt;
}
form{
text-align:center;
}
a{
color:white; text-decoration: none;
}
li{
list-style-type: none;
}

20
.sc{
color:white; text-align:center;
}
.eve{
border: 2px solid green;
}
ul li{
list-style-type: square; font-weight:bold;
}
.alt{
background-color: white;
}
.cen{
text-align: center; font-weight:bold; color:purple;
}
th{
background-color: green; color: white;
}
.right{
float:right;
}
hr{
background-color: red; height:2px;
}
.eve1{
border: 2px solid green; font-weight:bold; color:purple; font-size:20pt;
}
.h{color:red;
}

Output:

21
22
Exercise 7:
Create a web site using JSP that it searches data from the database and display the output.

There are two view pages here, one(index.jsp) for typing the user name and other(searchview.jsp)
for displaying the search results. There is also a servlet controller(Search.java) to control against
search parameter.
Codes:

Index.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<br/><br/>
<form method="post" name="frm" action="Search">
<table border="0" width="300" align="center" bgcolor="#e9f">
<tr><td colspan=2 style="font-size:12pt;" align="center">
<h3>Search User</h3></td></tr>
<tr><td ><b>User Name</b></td>
<td>: <input type="text" name="pid" id="pid">
</td></tr>
<tr><td colspan=2 align="center">
<input type="submit" name="submit" value="Search"></td></tr>
</table>
</form>
</body>
</html>

searchview.jsp:
<%@ page import="java.util.*" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table width="700px" align="center"
style="border:1px solid #000000;">
<tr>
<td colspan=4 align="center"
style="background-color:teal">
<b>User Record</b></td>
</tr>
<tr style="background-color:lightgrey;">
<td><b>User Name</b></td>

23
<td><b>Password</b></td>
<td><b>Email</b></td>
<td><b>Registration Date</b></td>
</tr>

<%
int count = 0;
String color = "#F9EBB3";
if (request.getAttribute("piList") != null)
{
ArrayList al = (ArrayList) request.getAttribute("piList");
System.out.println(al);
Iterator itr = al.iterator();
while (itr.hasNext())
{
if ((count % 2) == 0)
{
color = "#eeffee";
}
count++;
ArrayList pList = (ArrayList) itr.next();
%>
<tr style="background-color:<%=color%>;">
<td><%=pList.get(0)%></td>
<td><%=pList.get(1)%></td>
<td><%=pList.get(2)%></td>
<td><%=pList.get(3)%></td>
</tr>
<%
}
}
if (count == 0)
{
%>
<tr>
<td colspan=4 align="center"
style="background-color:#eeffee"><b>No Record Found..</b></td>
</tr>
<%
}
%>
</table>
</body>
</html>

search.java:
import java.io.IOException;
import java.io.PrintWriter;

24
import java.sql.*;
import java.util.ArrayList;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Search extends HttpServlet


{
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "dbname";
String driver = "com.mysql.jdbc.Driver";
String userName = "root";
String password = "dbpass";
Statement st;
try
{
Class.forName(driver).newInstance();
conn = DriverManager.getConnection(url + dbName, userName, password);
System.out.println("Connected!");
String pid = request.getParameter("pid");
ArrayList al = null;
ArrayList pid_list = new ArrayList();
String query = "select * from users where uname='" + pid + "' ";

System.out.println("query " + query);


st = conn.createStatement();
ResultSet rs = st.executeQuery(query);

while (rs.next())
{
al = new ArrayList();
// out.println(rs.getString(1));
// out.println(rs.getString(2));
// out.println(rs.getString(3));
// out.println(rs.getString(4));
al.add(rs.getString(1));
al.add(rs.getString(2));
al.add(rs.getString(3));
al.add(rs.getString(4));
System.out.println("al :: " + al);

25
pid_list.add(al);
}
request.setAttribute("piList", pid_list);
RequestDispatcher view = request.getRequestDispatcher("/searchview.jsp");
view.forward(request, response);
conn.close();
System.out.println("Disconnected!");
}
catch (Exception e)
{
e.printStackTrace();
}
}

/**
* Returns a short description of the servlet.
* @return a String containing servlet description
*/
@Override
public String getServletInfo()
{
return "Short description";
}
// </editor-fold>
}

Output:

26
Exercise 8:
Create a web site using JSP showing multiple pages for welcome, login, registration, etc. Data base
creation and retrieval also has to be added.

Codes:

Index.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Example</title>
</head>
<body>
<form method="post" action="login.jsp">
<center>
<table border="1" width="30%" cellpadding="3">
<thead>
<tr>
<th colspan="2">Login Here</th>
</tr>
</thead>
<tbody>
<tr>
<td>User Name</td>
<td><input type="text" name="uname" value="" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pass" value="" /></td>
</tr>
<tr>
<td><input type="submit" value="Login" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
<tr>
<td colspan="2">Yet Not Registered!! <a href="reg.jsp">Register Here</a></td>
</tr>
</tbody>
</table>
</center>
</form>
</body>
</html>

reg.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
27
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Registration</title>
</head>
<body>
<form method="post" action="registration.jsp">
<center>
<table border="1" width="30%" cellpadding="5">
<thead>
<tr>
<th colspan="2">Enter Information Here</th>
</tr>
</thead>
<tbody>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" value="" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" value="" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" value="" /></td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="uname" value="" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pass" value="" /></td>
</tr>
<tr>
<td><input type="submit" value="Submit" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
<tr>
<td colspan="2">Already registered!! <a href="index.jsp">Login Here</a></td>
</tr>
</tbody>
</table>
</center>
</form>
</body>

28
</html>

registration.jsp:
<%@ page import ="java.sql.*" %>
<%
String user = request.getParameter("uname");
String pwd = request.getParameter("pass");
String fname = request.getParameter("fname");
String lname = request.getParameter("lname");
String email = request.getParameter("email");
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/dbname",
"root", "dbpass");
Statement st = con.createStatement();

//ResultSet rs;
int i = st.executeUpdate("insert into members(first_name, last_name, email, uname, pass,
regdate) values ('" + fname + "','" + lname + "','" + email + "','" + user + "','" + pwd + "',
CURDATE())");
if (i > 0)
{
//session.setAttribute("userid", user);
response.sendRedirect("welcome.jsp");
// out.print("Registration Successfull!"+"<a href='index.jsp'>Go to Login</a>");
}
else
{
response.sendRedirect("index.jsp");
}
%>

login.jsp:
<%@ page import ="java.sql.*" %>
<%
String userid = request.getParameter("uname");
String pwd = request.getParameter("pass");
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/dbname",
"root", "dbpass");
Statement st = con.createStatement();
ResultSet rs;
rs = st.executeQuery("select * from members where uname='" + userid + "' and pass='" +
pwd + "'");
if (rs.next())
{
session.setAttribute("userid", userid);
//out.println("welcome " + userid);
//out.println("<a href='logout.jsp'>Log out</a>");

29
response.sendRedirect("success.jsp");
}
else
{
out.println("Invalid password <a href='index.jsp'>try again</a>");
}
%>

welcome.jsp:
Registration is Successful.
Please Login Here <a href='index.jsp'>Go to Login</a>

success.jsp:
<%
if ((session.getAttribute("userid") == null) || (session.getAttribute("userid") == "")) {
%>
You are not logged in<br/>
<a href="index.jsp">Please Login</a>
<%} else {
%>
Welcome <%=session.getAttribute("userid")%>
<a href='logout.jsp'>Log out</a>
<%
}
%>

logout.jsp:
<%
session.setAttribute("userid", null);
session.invalidate();
response.sendRedirect("index.jsp");
%>

Database creation:
CREATE TABLE `members` (
`id` int(10) unsigned NOT NULL auto_increment,
`first_name` varchar(45) NOT NULL,
`last_name` varchar(45) NOT NULL,
`email` varchar(45) NOT NULL,
`uname` varchar(45) NOT NULL,
`pass` varchar(45) NOT NULL,
`regdate` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

30
Outputs:

31
Exercise 9:
Create a web page to display mathematical operations using JSP.

Codes:

test1.html:
<html>
<title>Sample Example </title>
<body>
<h1> <center> Example of JSP </center> </h1>
<center><b> Mathematics</b>
<hr>
<form method="post" action="x.jsp">
<font size=5 face="Times New Roman">
<input type="radio" name="a1" value="add" checked>Addition</input><br>
<input type="radio" name="a1" value="mul" >Multiplication</input><br>
<input type="radio" name="a1" value="div" >Division</input><br>
</font>
<br><br>
Enter first Value &nbsp &nbsp &nbsp<input type="text" name="t1" value=""><br>
Enter second Value &nbsp<input type="text" name="t2" value=""><br>
<input type="submit" name="result"></center>
</form>
</body>
</html>

x.jsp:
<%@ page language="java"%>
<%@ page import="java.lang.*"%>
<html>
<body>
<H1><center>Result for <%=request.getParameter("a1")%></center></H1>
<%
int i=Integer.parseInt(request.getParameter("t1"));
int j=Integer.parseInt(request.getParameter("t2"));
int k=0;
String str=request.getParameter("a1");

if(str.equals("add"))
k=i+j;
if(str.equals("mul"))
k=i*j;
if(str.equals("div"))
k=i/j;
%>
Result is <%=k%>
</body>
</html>

32
Outputs:

33
Exercise 10:
Write a simple JSP program to print even numbers up to 10

Code:
<%@ page language="java"%>
<html>
<head>
<title>Even number program in JSP</title>
</head>

<body>
<%
for(int i=0;i<=10;i++)
{
if((i%2)==0)
{
out.print("Even number :"+i);
out.print("<br>");
}
}
%>
</body>
</html>

Output:

34
Exercise 11:
Write a JSP embedded html program to display current date and time:

Code:
<html>
<head>
<title> Simple JSP page </title>
</head>
<body>
<h3>Using Expression tag to display the result of the expression </h3>
<p>
The Current date and time = <%=new java.util.Date()%>
</p>
</body>
</html>

Output:

35
Exercise 12:
Write a program in JSP to find factorial of number. The output should be displayed on separate
page.

Code:
factfirst.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC ">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body><br><br><center>
<form action="fact.jsp">
<h3>ENTER THE NUMBER TO FIND FACTORIAL :: <br><input type=text name=n ><br><br>
<input type=submit value="Submit"></h3>
</form></center>
</body>
</html>

fact.jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC ">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<center><h1>The required Factorial value is:: </h1>
<%
int n=0,i;
int fact=1;
String ns= request.getParameter("n");
n=Integer.parseInt(ns);
if(n>1)
{
fact=1;
for(i=1;i<=n;i++)
{
fact=fact*i;
}
}
out.println("fact= "+fact);
%>

36
</h2></center>
</body>
</html>

Output:

**********END OF RECORD BOOK***********

37

You might also like