Scribd
Upload
222 views

Web Programming Lab

The document outlines an assignment for a Web Engineering Lab course where students are asked to complete a series of experiments involving designing HTML pages with basic tags and tables, creating dynamic web pages using HTML and JavaScript, and developing web applications using technologies like servlets and database connectivity. The assignments are designed to help students learn skills in frontend web development, scripting, and backend programming.

Uploaded by

Nitish
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
222 views

Web Programming Lab

The document outlines an assignment for a Web Engineering Lab course where students are asked to complete a series of experiments involving designing HTML pages with basic tags and tables, creating dynamic web pages using HTML and JavaScript, and developing web applications using technologies like servlets and database connectivity. The assignments are designed to help students learn skills in frontend web development, scripting, and backend programming.

Uploaded by

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

Department of Computer Science and Technology

MANAV RACHNA UNIVERSITY, FARIDABAD

Subject: Web Engineering Lab (IT-411-F)

Faculty Name: Submitted by:


Mrs. Urmila Pilania Student Name: Nitish Chaudhary
Roll No. : 2k14-MRCE-IT-073
INDEX
EX.NO DATE TITLE OF THE EXPERIMENT PAGE SIGN
. NO.

1 8th Aug, 2017 To design HTML pages with basic tags. 3-4
To design HTML pages with hyperlinks and
th
2 22 Aug, 2017 tables. 5-8
Design a web site using HTML and DHTML.
3 29th Aug,2017 Use Basic text Formatting, Images, 9-11
Create a script that asks the user for a
name, then greets the user with "Hello"
4 5th Sept, 2017 and the user name on the page. 12-14
Create a script that collects numbers from
a page and then adds them up and prints
th
5 12 Sept, 2017 them to a blank field on the page. 15-17
Create a script that prompts the user for a
number and then counts from 1 to that
th
6 19 Sept, 2017 number displaying only the odd numbers. 17-18
Create a script that will check the field in
Assignment 1 for data and alert the user if
it is blank. This script should run from a
rd
7 3 Oct, 2017 button. 19-20
8 24th Oct, 2017 Use CSS for creating web sites. 21-22
To create an application using servlet and
9 31th Oct, 2017 database connectivity 26-27
Write a program to implement web service
th
10 7 Nov, 2017 for calculator application. 28-32
Write a program to implement web service
th
11 14 Nov, 2017 for calculator application. 33-38
Lab-1

AIM: To design HTML pages with basic tags.

Q 1. To create a welcome page in HTML displaying a suitable heading and a welcome


message. Write a short paragraph on “My Idea about Life” making use of the different tags.

Q 2. Creating an unordered list in HTML displaying the ingredients for a particular recipe
including other details like method of preparation, time for preparation, no of people who
could be served etc and links to other related pages like definition of a particular ingredient
and its synonyms etc and also use the nested unordered lists for the same problem.
Q 3.Creating an ordered list in HTML which represents the index of a book displaying the main
topic and list of all the sub topics and sub topics comprising the main one, thereby making
use of the nested ordered lists.

Q 4. Design a web page using the image ‘House.gif’, ‘Javacup.gif’ and ‘Computer.gif’ according
to the following specifications:
a) Use a border for ‘House.gif’.
b) Resize the width and height of ‘Javacup.gif’ and ‘Computer.gif’ to 100 pixels each.
c) Align the text with respect to the images.
Lab 2

AIM: To design HTML pages with hyperlinks and tables.

Q 1 .Make 4 different web pages and create hyperlinks between them in such a way that the
first page (main page) displays the table of contents ( with each content reflecting a hyperlink
to one of the remaining three pages) and each of the page containing links to the main page.
Also specify a link that will lead to a particular section within it.

Q 2. Create an HTML file as follows:


Cable Connection: DSL Connection:
Service: 3000/300 kbps Service: 1536/160 kbps

Before: After: Before: After:


Download: Download: Download: Download:
1049 kbps 3280 kbps 1172 kbps 2463 kbps
Upload: 147 Upload: 500 Upload: 315 Upload: 417
kbps kbps kbps kbps

Net Increase: 3.1 times Net Increase: 2.1 times

The webpage should have title “Connection Types”, background color light pink”. Give Proper
caption to table.
Q 3. Using nested Table concept draw the table below:-
Lab 3
AIM: To Design a web site using HTML and DHTML.

THEORY:
Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together
to create interactive and animated web sites. by using a combination of a static markup
language (such as HTML), a client-side scripting language (such as JavaScript), a presentation
definition language (such as CSS), and the Document Object Model.

PROGRAM:

<html>
<head>
<title>Student RegistrationForm</title>
<script type="text/javascript">
function validate() {
if(document.signup.fname.value=="") {
alert("Please Enter First Name!"); return false;
}
if(document.signup.lname.value=="") {
alert("Please Enter Last Name!"); return false;
}
if(document.signup.uname.value=="") {
alert("Please Enter User Name!");return false;
}
if(document.signup.pword1.value=="") {
alert("Please Enter Password!"); return false;
}
if(document.signup.pword1.value<6) {
alert("Please Enter min 6 characters!");return false;
}
if(document.signup.pword2.value=="") {
alert("Please Enter Password Again!"); return false;
}
if(document.signup.pword2.value!=document.signup.pword1.value) {
alert("Password Mismatch Reenter Password!"); return false;
}
alert("Details Entered Successfully");
display();
}
function display()
{
document.writeln('<h2>'+"Details Entered:"+'</h2>');
document.writeln('<br/><font
color="#0066ff">'+"First
Name:"+'</font>'+document.signup.fname.value);
document.writeln('<br/><font color="#0066ff">'+"Last
Name:"+'</font>'+document.signup.lname.value);
document.writeln('<br/><font color="#0066ff">'+"Use
Name:"+'</font>'+document.signup.uname.value);
document.writeln('<br/><font
color="#0066ff">'+"Country:"+'</font>'+document.signup.country.value);
document.writeln('<br/><font color="#0066ff">'+"Alternate
Email"+'</font>'+document.signup.aemail.value);
}
</script></head>
<body align="center" bgcolor="green"> <table width="100%" height="100%"> <td
colspan="2" width="15%">
</td>
<td colspan="1" bgcolor="#ffffff" width="70%" height="100%"> <h1 align="center"><font
color="#0066ff">smail</font></h1>
<h2 align="center"><font color="#0066ff">New User Signup Form</font></h2> <form
name="signup" onsubmit="return validate()">
<font face="verdana,arial,helvetica,sanserif" color="#660000" size="2">
<p>&nbsp;&nbsp;*First
Name:<input type="text" name="fname" size="20"> &nbsp;&nbsp;*Last Name:<input
type="text" name="lname" size="20"></p>
<p style="border">&nbsp;&nbsp;*User Name:<input type="text" name="uname"
size="20">@smail.com</p>
<p style="border">&nbsp;&nbsp;*Password:<input type="password" name="pword1"
size="20"></p>
<p style="border">&nbsp;&nbsp;*Confirm Password:<input type="password"
name="pword2" size="20"></p>
<p>&nbsp;&nbsp;Gender:<input type="radio" name="gen"value="male">Male<input
type="radio" name="gen" value="female">Female</p>
<p>&nbsp;&nbsp;Country:<select name="country"> <option selected>Select
Country</option>
<option name="country" value="India">India</option>
<option name="country" value="Russia">Russia</option> <option name="country"
value="France">France</option> <option name="country" value="Italy">Italy</option>
</select></p>
<p>&nbsp;&nbsp;Language Known:<br>
&nbsp;&nbsp;<input type="checkbox" name="lang" value="English">English<br>
&nbsp;&nbsp;<input
type="checkbox" name="lang" value="Tamil">Tamil<br> &nbsp;&nbsp;<input
type="checkbox" name="lang" value="Hindi">Hindi<br> &nbsp;&nbsp;
<input type="checkbox" name="lang" value="Malayalam">Malayalam<br>
</p>
<p style="border">&nbsp;&nbsp;Alternate Email:<input type="text" name="aemail"
size="20"></p>
<p align="center"><input type="checkbox" name="agree">I Agree The Terms &
Conditions</p>
<p align="center"><input type="submit" value="submit"> <input type="reset"
value="reset"></p>
</form>
</td>
<td colspan="2" width="15%"> </td>
</table>
</body></html>
EXPECTED OUTPUT
Lab 4
AIM: To create a script that asks the user for a name, then greets the user with "hello" and
the user name on the page

THEORY:
Client Side Programming : JavaScript
JavaScript was designed to add interactivity to HTML pages
JavaScript is a scripting language
A scripting language is a lightweight programming language
JavaScript is usually embedded directly into HTML pages

JavaScript is an interpreted language (means that scripts execute without preliminary


compilation)
JavaScript Variables
JavaScript variables are used to hold values or expressions. A variable can have a short name,
like x, or a more descriptive name, like carname. Rules for JavaScript variable names:
Variable names are case sensitive (y and Y are two different variables)
Variable names must begin with a letter or the underscore character Because JavaScript is
case-sensitive, variable names are case-sensitive.
Declaring (Creating) JavaScript Variables
Creating variables in JavaScript is most often referred to as "declaring" variables. You can
declare JavaScript variables with the var keyword: var x; var carname;
After the declaration shown above, the variables are empty (they have no values yet).
However, you can also assign values to the variables when you declare them:
var x=5;
var carname="Volvo";
After the execution of the statements above, the variable x will hold the value 5, and carname
will hold the value Volvo.
JavaScript Popup Boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
alert("sometext");

Confirm Box
A confirm box is often used if you want the user to verify or accept something. When a
confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user
clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax
confirm("sometext");
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed
after entering an input value. If the user clicks "OK" the box returns the input value. If the
user clicks "Cancel" the box returns null.
Syntax
prompt("sometext","defaultvalue");

JavaScript Loops
Often when you write code, you want the same block of code to run over and over again in a
row. Instead of adding several almost equal lines in a script we can use loops to perform a
task like this.
In JavaScript, there are two different kind of loops:
for - loops through a block of code a specified number of times
while - loops through a block of code while a specified condition is true
The for Loop
The for loop is used when you know in advance how many times the script should run.
Syntax
for (variable=startvalue;variable<=endvalue;variable=variable+increment)
{
code to be executed
}

JavaScript Events
Events are actions that can be detected by JavaScript.

Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions
that can be detected by JavaScript. Every element on a web page has certain events which
can trigger a JavaScript. For example, we can use the onClick event of a button element to
indicate that a function will run when a user clicks on the button. We define the events in
the HTML tags.
Examples of events:
A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input field in an HTML form
Submitting an HTML form
A keystroke
PROGRAM:

<html>
<head>
<title>Hello name</title>
</head>
<body>
<h1>Hello name</h1>
<script>
Var greeting;
greeting=”Hello name”;
alert(greeting);

</script>
</body>
</html>

EXPECTED OUTPUT
Lab 5
AIM: To create a script that collects numbers from a page and then adds them up and
prints them to a blank field on the page.

PROGRAM:

<html>
<head>
<title>Demo of adding element in an array</title>
</head>
<body>
<script type="text/javascript">
var data = new Array();
function add_element()
{

data.push(document.getElementById('t1').value); document.getElementById('t1').value=''; }
function add()

{
var sum=0;
for (i=0;i<data.length;i++)
{
sum=parseInt(sum)+ parseInt(data[i]) ;
}
document.write('Addition of elements in data array : '+sum);
}
</script>

<input type=number id='t1'><input type=button value='Add' onClick='add_element()';>


<input type=button value='Sum' onClick='add()';> </body>
</html>
EXPECTED OUTPUT
Lab 6
AIM: To create a script that prompts the user for a number and then counts from 1 to that
number displaying only the odd numbers

PROGRAM:

<html>
<body>
<script type="text/javascript">

var num = prompt("Enter a number : \n", ""); document.writeln("<h1>Odd numbers are


\n</h1>"); if(num >0 && num !=null) {
for(i=1;i <= num; i+=2)
{
document.writeln("<h1>\n</h1>");
document.writeln(i);
}
}
else
alert("No input supplied");

</script>
</body>
</html>
EXPECTED OUTPUT:
`Lab 7
AIM: To create a script that will check the field in Assignment 1 for data and alert the user if it
is blank. This script should run from a button.

PROGRAM:

<html>
<head>
<title>Check</title>
<script type="text/javascript">
function disp()
{
var str=document.getElementById("strn");
if(str.value=="")
{
alert("No input supplied");
}
else
document.writeln("Field contains data");

}
</script>
</head>
<body>
<form name="f1" ID="check">
<input type=text name="st" ID="strn">
<input type=button ID="click" value="Click Me" onclick='disp();'>
</form>
</body>
</html>
EXPECTED OUTPUT:
Lab 8

AIM: To create website using CSS.

THEORY:
The original aim of HTML is to let the content providers concentrate on the contents of the
document and leave the appearance to be handled by the browsers. Authors markup the
document contents using markup tags (such as <p>, <h1>, <ul>, <table>, <img>) to indicate its
semantic meaning ("This is a paragraph", "This is heading Level 1", "This is an unordered list",
"This is a table", "This is an image"). The browsers then decide on how to display or present
the contents in the browser's window for the web surfers.

However, HTML has gone out-of-control in the early years. Many markup tags and attributes
were created for marking the appearance and the display styles (e.g., <font>, <center>, align,
color, bgcolor,link, alink, vlink are concerned about the appearance in font, color and
alignment) rather than the meaning of the contents. These tags flood the document and
make creation and maintenance of the contents extremely difficult. Furthermore, over the
years, we have engaged graphic designers to work on the appearance and leave the content
providers to focus on the contents. Hence, there is a need toseparate the contents and
presentation of the HTML document.

PROGRAM:

MAIN.HTML:
<html>

<head>
<title>SEISCON-2015</title>

<frameset rows="25%,85%,*" bordercolor="green" border="1"> <frame src="style.html"


name="KCG"> <frameset cols="25%,*">

<frame src="list.html" name="list">


<frame src="detailshtml" name="details">
</frameset>
</head>
</html>
STYLE.HTML:
<html>
<head>
<title>KCG COLLEGE OF TECHNOLOGY</title> </head>

<body bgcolor="brown">
<marquee behaviour="alternate">
<h1><font color=blue> SEISCON-2015</font></h1>
</marquee>
</body>
</html>

LIST.HTML:
<html>
<head>
<title> LIST OF CSS </title>
<style type="text/css">
a:link{color:blue}
a:visited{color:green}
a:active{color:red}
</style>
</head>
<body>
<ul>
<li type="disc"><a href="it.html" target="details">ABOUT IT DEPARTMENT</a> <li
type="disc"><a href="seiscon.html" target="details">ABOUT SEISCON </a> <li type="disc"><a
href="call.html" target="details">CALL FOR PAPERS</a>
<li type="disc"><a href="guide.html" target="details">INSTURCTION AND IMPORTANT
DATES</a>
<li type="disc"><a href="contact.html" target="details">CONTACT US</a>
</ul>
</body>
</html>

IT.HTML:
<html>
<head>
<title> IT DEPARTMENT </title>
</head>
<body>
<h1 style="color:red ; text-align:center;">About IT Department</h1>
<p><b>The Department of Information Technology has latest cutting edge technology
Laboratories for Uder Graduate studies and efficient Research activities. Research areas
include wireless sensor networks, image processing, pervasive computing, data mining, cloud
computing etc.,. The Department has a team of dedicated faculty
members.</b></p><br/><br/><br/>
<h1 style="color:maroon"><marquee><div id="footer"><p>Thankyou for Visiting Us
</marquee></h1></p></div></div></div>
</body>
</html>
SEISCON.HTML:
<html>
<head><title> SEISCON-2015</title>
<link rel="stylesheet" href="style.css" type="text/css"></head> <body>
<h1> SEISCON-2015</h1>
<DIV><p align="justify"> <h1>Objective of the Conference</h1>
<p> <br> SEISCON-2015 aims to offer an innovative environment by bringing together
technologists, academicians, research scholars, working professionals, and students to and
exhibit their works on emerging trends in Computing, Communicaton and
Technology.</p><br><br>
</body>
</html>

CALL.HTML:
<html>
<head>
<title>CALL FOR PAPERS</title>
<style type="text/css">
body
h1 { color:red; text-align:center; }
h3 { text-decoration:underline; color:"red"
}
DIV { margin: 1em 2em 3em 4em; color:"dark blue"; font-size:10pt }
A:link { border: red }
A:visited { border: green }
A:active { border: black }
</style></head>
<body>
<h1>Authors are invited to submit papers on any recent innovation and are not restricted to
the following:</h1>
<ul>
<li><b>IMAGE PROCESSING / SIGNAL PROCESSING</b></li> <li><b>WIRELESS SENSOR
NETWORKS</b></li> <li><b>INTELLIGENT SYSTEMS</b></li> <li><b>UBIQUITOUS
COMPUTING</b></li> <li><b>CLOUD COMPUTING</b></li>
<li><b>GRID COMPUTING</b></li>
<li><b>SOFT COMPUTING</b></li>
<li><b>WEARABLE COMPUTING</b></li>
<li><b>DATA MINING</b></li>
<li><b>BIO-INFORMATICS</b></li>
<li><b>SATELLITE COMMUNICATIONS</b></li>
<li><b>OPTICAL NETWORKS</b></li></ul>
<br><br>
</body>
</html>
DETAIL.HTML:
<html>
<body bgcolor="pink">
<marquee behaviour="alternate" direction="left" width="80%">
<h1><b><i>DEPARTMENT OF INFORMATION TECHNOLOGY </b></i> </h1>
</marquee>
</body>
</body>
</html>

GUIDE.HTML:
<html>
<head>
<style type="text/css" media="all">
h1 {color: indianred; font-weight: bold}
p {color: black}
DIV { margin: 1em 2em 3em 4em; color:"dark blue"; font-size:20px }
A:link { border: thin dotted red }
A:visited { border: thin dotted green }
A:active { border: black }
</style>
</head>
<h1><marquee>INSTRUCTIONS</marquee></h1><hr><br>
<body>
<p>Papers to be submitted should not be previously published in other forum. The authors
willing to present papers in the conference are requested to submit the full length paper in
.doc format, not exceeding 10 printed/typed pages (IEEE single column format) by e-mail as
an attachment on or before the deadline. All papers will be reviewed by the field experts. The
corresponding author of selected paper will be intimated through e-mail. Presentation in the
conference will be in the form of oral or posters.
The abstract of the accepted papers will be published in the proceedings of the conference
and the softcopy of all the accepted papers will be presented in e-proceedings as full length
paper. Papers received after the deadline may not be included in the conference proceedings.
The paper registered for the conference must be presented by one of the authors in the
conference. Certificate of participation/presentation will be issued to the registered
delegates/authors attending the conference. </p> <h1>IMPORTANT DATES</h1><br>
<body>
<p> <table border="1">
<tr>
<td>Last date for submitting full length paper</td>
<td>02/12/2015</td>
</tr>
<tr>
<td>Notification of acceptance of full length paper</td>
<td>15/12/2015</td>
</tr>
<tr>
<td>Registration & Camera ready paper</td>
<td>20/12/2015</td>
</tr>
<tr>
<td>Conference</td>
<td>27/12/2015 & 28/12/2015</td>
</tr>
</table>
</p><br>
<a href="home.html">BACK</a><br>
</body>
</html>

EXPECTED OUTPUT
Lab 9

AIM: To create an application using servlet and database connectivity.

PROGRAM:

STUDETAIL.JAVA:

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;
public class studetail extends HttpServlet
{
public void doGet (HttpServletRequest req,HttpServletResponse res) throws
ServletException, IOException
{
Connection con=null;
Statement stmt=null;
ResultSet rs=null;
res.setContentType("text/html");
PrintWriter out= res.getWriter();
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
con=DriverManager.getConnection("jdbc:odbc:db2");
stmt=con.createStatement();
rs=stmt.executeQuery("select name,id,dept from student"); out.println("<html><body>");
out.println("<table border=1>");
out.println("<tr><th>Name</th><th>ID</th><th>Dept</th>");
out.println("</tr>");
while(rs.next())
out.println("<tr><td>"+rs.getString("name")+"</td><td>"+rs.getString("id")+"</t
d><td>"+rs.getString("dept")+"</td></tr>");
out.println("</body></html>");
}
catch (ClassNotFoundException e)
{
out.println("Error" +e.getMessage());
}
catch(SQLException e)
{
out.println("SQL Exception" +e.getMessage());
}
finally
{
try
{
if(con!=null)
{
con.close();
}
}
catch(SQLException e) { }

EXPECTED OUTPUT:
Lab 10
AIM:To write a web application that functions as a simple hand calculator, but also keeps a
"paper trail" of all your previous work.

PROGRAM:

<html>
<head>
<style>
body
{
background-color:tan;
}
h2
{
text-align:center;
text-decoration:underline;
}

.box
{
background-color:#3d4543;
height:300px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
}
.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;

}
.keys
{
position:relative;
top:15px;
}
.button
{
width:40px;
height:30px;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray
{
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;

}
.button.pink
{
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black
{
color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange
{
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active
{
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;

border-bottom:#ff4561 2px solid;


}
.black:active
{
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active
{
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
p
{
line-height:10px;
}
</style>
<script>
function c(val)
{
document.getElementById("d").value=val;
}

function v(val)
{
document.getElementById("d").value+=val;
}
function e()
{
try
{
c(eval(document.getElementById("d").value))
}
catch(e)
{
c('Error')
}
}
</script>
</head>
<body>
<h2>Calculator </h2>
<div class="box">

<div class="display"><input type="text" readonly size="18" id="d"></div> <div class="keys">

<p><input type="button" class="button gray" value="mrc"


onclick='c("Created....................")'><input type="button" class="button gray" value="m-"
onclick='c("...............by............")'><input type="button" class="button gray" value="m+"
onclick='c(".....................KCG")'><input type="button" class="button pink" value="/"
onclick='v("/")'></p>

<p><input type="button" class="button black" value="7" onclick='v("7")'><input


type="button" class="button black" value="8" onclick='v("8")'><input type="button"
class="button black" value="9" onclick='v("9")'><input type="button" class="button pink"
value="*" onclick='v("*")'></p>

<p><input type="button" class="button black" value="4" onclick='v("4")'><input


type="button" class="button black" value="5" onclick='v("5")'><input type="button"
class="button black" value="6" onclick='v("6")'><input type="button" class="button pink"
value="-" onclick='v("-")'></p>

<p><input type="button" class="button black" value="1" onclick='v("1")'><input


type="button" class="button black" value="2" onclick='v("2")'><input type="button"
class="button black" value="3" onclick='v("3")'><input type="button" class="button pink"
value="+" onclick='v("+")'></p>

<p><input type="button" class="button black" value="0" onclick='v("0")'><input


type="button" class="button black" value="." onclick='v(".")'><input type="button"
class="button black" value="C" onclick='c("")'><input type="button" class="button orange"
value="=" onclick='e()'></p> </div>

</div>
</body>
</html>
EXPECTED OUTPUT:
Lab 11
AIM: To install tomcat and use jsp and link it with any program.

THEORY:
Installing Tomcat
Installing Java
Setting the Java Environment Variable

Tomcat will need to know where you have installed java. To do this, you will need to set the
environment variable JAVA_HOME to C:\j2sdk1.6.0_18 (where you installed java).

Here are the steps for setting the environment variable on my computer (Windows XP
Professional). The steps will probably be similar for other Windows computers.

Open the control panel under the start menu.


Double-click on System.
Click on the Advanced tab.
Click on the Environment Variables button.
Under System Variables, click on the New button.
For variable name, type: JAVA_HOME
For variable value, type: C:\ j2sdk1.6.0_18
Continue to click OK to exit the dialog windows.

Installing Tomcat
After setting the JAVA_HOME environment variable, you can install tomcat.

Go to the Tomcat Web page.


Click on Binaries under the Download label on the left side of the page.
Scroll down until you see Tomcat 4.1.x. (x will be some number greater than 10).
Click on the link ending with exe (e.g. 4.1.27 exe).
Download and run the exe file.
I suggest you install Tomcat at c:\tomcat4
Use the default settings and provide a password that you will remember.
now assume that your tomcat are installed at c:\tomcat4

Running Tomcat

Start Tomcat by finding its start program in the Programs Menu (located in the Start menu).
Look under Apache Tomcat 4.1 and select "Start Tomcat".

Open a Web browser and type in the following URL:


http://localhost:8080/

At this point, you should see the Tomcat home page, which is provided by the Tomcat Web
server running on your computer. Note: if your computer has an internet name or an IP
number, you may access your Tomcat server anywhere on the internet by substituting
localhost with the full name or IP number.
To shut down your server and remove the Console window, select "Stop Tomcat" in the same
menu of where you selected "Stop Tomcat".

PROGRAM:

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>

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", "");
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);
response.sendRedirect("success.jsp");
}
else
{
out.println("Invalid password <a href='index.jsp'>try again</a>");
}
%>

Logout.JSP:

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

Reg.JSP

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


<!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>
</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>
</html>
Registration.jsp
<%@page import="java.sql.*" %>

<%@page import="java.io.*" %>


<%@page import="javax.sql.*" %>
<%@page import="java.sql.Connection" %>
<%
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", "");
Statement st = con.createStatement();

int i = st.executeUpdate("insert into members(first_name, last_name, email, uname, pass)


values ('" + fname + "','" + lname + "','" + email + "','" + user + "','" + pwd + "')"); if (i > 0)

{
response.sendRedirect("welcome.jsp");
}
else
{

response.sendRedirect("index.jsp");
}
%>
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> <%

}
%>
Welcome.JSP
Registration is Successful.

Please Login Here <a href='index.jsp'>Go to Login</a>\ EXPECTED OUTPUT:

You might also like