WT Lab Record ALL EXPERIMENTS 1 To 13

MALLA REDDY ENGINEERING COLLEGE (Autonomous)
(Approved by AICTE and Affiliated to JNTUH)
Maisammaguda,(Post Via Kompally), Secunderabad 500 100.
Department of Computer Science & Engineering

WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
HTML Introduction:
Web server: A system with Applications programs/resources on the internet.
website: A collection of one or more web pages
webpages: A storage disk contains a file ( HTML code)
Design Instructions for devoloping web pages(websites)
1) Collect the relevent information and sort the information
contents ex.Home page etc
2) Set the goals of the website
3) Organize your content in the main topic
4) Come up with general structure for pages and topics
HTML: HTML program( code) contains series of tags that are integrated into a document. It
contains formattedstructured blocks.
HTML used to create the websites/web pages.
Tag: Formated text document is composed of a set of elements such as paragraphs,headings,
yperlink,images,
tables, lists etc.Tag elements surrounded by Angular brackets. Tag tells that control information of
the structure of thedocument.
ex.
<h1> Heading 1 </h1>
<h1> formatted information is displayed on
</h1> heading tag displayed off/closed.
Tags are not case sensitive.
<Head> <head> <hEAd>
Note: white space, tabs, new lines ignored by the browser.
The structure of HTML document.
<html>
<head>
<title> INFORMATION </title>
</head>
<body>
<h1> Heading 1</h1>
<p> paragraph </p>
</body>
</html>
Processing the document HTML code begin with <html> and end with </html>
1


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Two elements of direct children to HTML tag
is 1) head 2) body
Head: contains Control information used for browsers and servers
Body : contains visible page of the content
Title : Tag is mandatory used to present name of the bookmark and search engine.
Paragraph tag: All the text images,text, paragraphs in our documents represented by paragraph tag.
Syntax:
<p> TEXT INFORMATION </p>
Heading Tag: To display the Textual information in heading
tag.
syntax
<h1> Heading 1</ h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>
Note: h1 display maximum font and h6 display the minimum font.
1)Write a HTML program to display WELCOME MESSAGE
First.html
<html>
<head>
<title> MY FIRST HTML PROGRAM
</title>
</head>
<body>
<center>
<p> WELCOME TO HTML programming
</p>
</center>
</body>
</html>
OUTPUT


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
2) write a html program using header tags

Header.html
<html>
<head>
<title> PROGRAM EXAMPLE
OF HEADER TAGS
</title>
</head>
<body>
<center>
<h1> HEADER1 FONT SIZE </h1>
</center>
</body>
</html>
OUTPUT


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
IMAGE TAG :
Images are used aspect of pleasant web experience. Image get important information of
website.Browsers
display a limited range of image types.Image type GIF or JPG will be displayed
Syntax:
<body background= URL> INFORMATION </body>
Set background use given image.
Note:background images used for good appearance
Image tag syntax
<img src=URL|name height=n width =n
[alt=string] [align=top|center|bottom]
[usemap=URL]>
URL: Source path
Height : width of the image in pixels
Alt: attribute is used for to understand the structure of thepage
Align: top, center,bottom
Default: bottom of the edge.
Usemap: attribute used for image maping
Example:
<img src= "D:\Winter.jpg" height="100" width="100" />
3)Write a HTML program to embed an image into web content.

<html>
<head>
OF IMAGE TAG
</title>
</head>
<body>
<center>
<h3> INSERTING IMAGE </h3>
<img src ="C:\Documents and Settings\All Users\Documents\MyPictures\
Sample Pictures\sunset.jpg" alt="Smiley face" width="200" height="200" alt="sunset"/>
</center>
</body>
</html>
OUTPUT:


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
HYPER LINK Tag:

The powerful and flexibility of HTML comes from simple method it used hyperlink.A single tag is
used all types of links.Hyper link used to link the documents where they add or understand the work
or reduce the download times.Screenful information forcing reader to download the relevant
documents.
Syntax:
<a href = address> INFORMATION </a>
Example:
<a href=pagetwo.html> NEXT PAGE </a>
<a href=http://www.jntu.ac.in> JNTUH website </a>
<a href = 'D:/WT_CSE_A/first.html'>
4) write a HTML program to create Hyper links to other documents.
<html>
<head>
OF HYPER LINK
</title>
</head>
<body>
<center>
<a href="E:\JWTLab\first.html">
FIRST HTML </a><br/>
<a href="E:\JWTLab\header.html">
HEADER TAG </a><br/>
<a href="E:\JWTLab\image.html">
IMAGE </a><br/>
5


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<a href="http://www.jntu.ac.in">
JNTU WEBSITE </a><br/>
<h3> BLUE HILLS IMAGE </h3>
<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Blue
hills.jpg" width="200"height="200"
alt="blueHills "/>
</center>
</body>
</html>
OUTPUT:


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
LISTS :
One of the most effective way of structuring website and its contents using lists.Provide piece of
information index to site,but could become highly complex.Lists can be easily embedded with other
lists to provide complex yet readable structures.HTML provides three types of lists
The basic bulleted list(unordered list) : bulleted items
A numbered list(ordered list) :Number items
Definition list: list of item with description
Each has a different use but generally the definition list is the most flexible of the three as it easily
incorporates images paragraphs of the text while keeping an obvious structure
Ordered list:type of attribute to select numbers letters Roman Numberals
syntax:
<ol type="atr_value" start=n>
<li> First</li>
<ol>
Or
<ul [ type=disc| square| circle] [compact]>
Each list of item by <li> </li>
Ordered list( numbered list):
</ul>
Syntax:
<ol [ type=1 | a| A| i|I] start=n] [compact]>
List of items enclosed by <li> </li> tag.
Attribute table
Value for
type
attribute
1
A
a
I
i
</ol>
Description
Example
Arabic numerals(the
default)
Capital letters
Small letters
Large roman letters
Small Roman letters
1,2,3..
A,B,C,D
a,b,c,d
I,II,III,IV
i,ii,iii,iv
5.Write a HTML program to print the COURSES of MREC by using

unordered list
<!1.Write a HTML program to print the COURSES
of MREC by using unordered list>
<html>
<head>
7


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<title> Malla Reddy Engineering College
</title>
</head>
<body>
<h3> B.Tech Courses </h3>
<ul >
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>ME</li>
<li>CE</li>
<li> Mining</li>
</ul>
<h3> M.Tech Courses </h3>
<ul>
<li>CSE</li>
<li>IT</li>
<li>CS</li>
</ul>
</body>
</html>
OUTPUT.
6.Write a HTML program to print the INDEX of Project by using ordered list
<!2.Write a HTML program to print the Index of project by using ordered list>
<html>
<head>
</title>
8


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</head>
<body>
<h3> INDEX </h3>
<ol>
<li>Analysis</li>
<li>Design</li>
<li>Implementation</li>
<li>Coding</li>
<li>Docuementation</li>
<li>OUTPUT</li>
<li>Biblography</li>
</ol>
</body>
</html>
OUTPUT:
7.Write a HTML program to print the courses of MREC by using Definition list
<!3.Write a HTML program to print the COURSES of MREC by using Definition list>
<html>
<head>
</title>
</head>
9


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<body>
<h3> B.Tech Courses </h3>
<dl>
<dt>CSE</dt>
<dt>IT</dt>
<dt>ECE</dt>
<dt>EEE</dt>
<dt>ME</dt>
<dt>CE</dt>
</dl>
<h3> M.Tech Courses </h3>
<dl>
<dt>CSE</dt>
<dt>IT</dt>
<dt>CS</dt>
</dl>
</body>
</html>
10


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
TABLES
table: One of the Most useful HTML construct is the table.table is a grid of information like spread
sheet contains data items.Table uses stuctureing the peice informaiton and structuring the whole
webpage
syntax: <table> </table>
<tr> </tr> table rows
<td> </td> table data.
<th> </th> table header
<caption> </caption> One caption for table
column span(colspan) is added to <th> or <td> tag
row span(rowspan) is used with <tr> tag
cellpading: defines the space inside each cell(ie the space between the edges of the cell and its
contents)
Cellspacing: Defines the space between the cells
8)Example1 of tables
<html>
<head> <title> Table Example1</title>
</head>
<body>
<table border="2">
<tr>
<td> row1,cell1</td>
<td> row1, Cell2</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
OUTPUT:
9) Example 2 of forms border and attributes

<! HTML table and border attribute>
11


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<html>
</head>
<body>
<table border="`">
<tr>
</tr>
</table>
</body>
</html>
OUTPUT:
10) Example of forms using tr,th, and td tags

<! HTML table headers>
<html>
</head>
<body>
<table border="1">
<tr>
<th> HEADER1</th>
<th> HEADER1</th>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
OUTPUT:
12


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
11) Example of forms using cellspacing and cellpading
<! HTML table cellspacing , cellpading>
<html>
</head>
<body>
<table width =300 cellspacing=20 cellpading=10 border="5">
<tr>
<th> HEADER1</th>
<th> HEADER1</th>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
OUTPUT:
12) Example of forms using cellspacing and cellpading

<html>
</head>
<body>
<table width =300 cellspacing=0 cellpading=5 border="0">
<tr>
<th> HEADER1</th>
<th> HEADER2</th>
<tr>
</tr>
13


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<tr>
</tr>
</table>
</body>
</html>
OUTPUT:
13) Example of forms using thred data alignment.

<html>
</head>
<body>
<table cellspacing=0 cellpading=0 border="1">
<tr>
<td align=left valign=top width=100 height=100> align=left valigh=top</td>
<td align=right valign=middle width=100 height=100> align=right valign=top</td>
</tr>
<tr>
<td align=center valign=bottom width=100 height=100> align=center valigh=bottom</td>
<td width=100 height=100> no preference</td>
</tr>
</table>
</body>
</html>
OUTPUT:
14)Example of forms using colspan

<! HTML table colspan and rowspan>
14


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<html>
<head> <title> Table Example</title>
</head>
<body>
<tr>
<td colspan=2> M.Tech</td>
</tr>
<tr>
<td> CSE </td>
<td> IT</td>
</tr>
</table>
</body>
</html>
OUTPUT:
15) Example of forms using rowspan

<! HTML table colspan and rowspan>
<html>
<head> <title> Table Example</title>
</head>
<body>
<tr>
<td colspan=2> M.Tech</td>
</tr>
<tr>
<td> CSE </td>
<td> IT</td>
</tr>
</table>
</body>
</html>
OUTPUT:
-----------16 Write a HTML program to desing Time table of III B.Tech CSE-A using tables
15


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<! HTML tables to design TIME TABLE B.Tech CSE-A II sem>
<html>
<head> <title> B.Tech TIME TABLE</title>
</head>
<body>
<center>
<caption>
<img src="C:\Documents and
Settings\Administrator\My Documents\My
Pictures\logoMREC.jpg" width="50" height="50"
align="left"
alt="MRECLogo">
MALLA REDDY ENGINEERING
COLLEGE<br/>(Autonomous)
</caption>
<br/> III YEAR B.Tech (CSE-A) TIME TABLE <br/>
</center>
<table cellspacing=5 cellpading=5 border="2"
align="center">
<tr>
<th> </th>
<th> I<br> 9:30AM -10:20AM </th>
<th> II<br> 10:20AM -11:10AM </th>
<th> III<br> 11:10AM -12:00 </th>
<th> IV<br> 12:00AM -12:50 </th>
<th> <br> 12:50PM -1:30PM </th>
<th> V<br> 1:30PM -2:20PM </th>
<th> VI<br> 2:20PM -3:10 </th>
<th> VII<br> 3:10PM -4:00PM </th>
</tr>
<tr align="center">
<th> MON</th>
<td>OOAD</td>
<td>NS</td>
<td>MS</td>
<td>CD</td>
<td rowspan=7> LUNCH</td>
<td>WT</td>
<td>NS</td>
<td>STM</td>
</tr>
<tr align="center">
<th> TUE</th>
<td>WT</td>
16


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<td>NT</td>
<td>OOAD</td>
<td>NS</td>
<td colspan=3> WT CD/AEC lab</td>
</tr>
<tr align="center">
<th> WED</th>
<td>CD</td>
<td>STM</td>
<td>SS</td>
<td>WT</td>
<td>MS</td>
<td>STM</td>
<td>OOAD</td>
</tr>
<tr align="center">
<th> THU</th>
<td>MS</td>
<td colspan=3 > WT-CD/AEC lab</td>
<td>NS</td>
<td>STM</td>
<td>CD</td>
</tr>
<tr align="center">
<th> FRI</th>
<td>STM</td>
<td>WT</td>
<td>OOAD</td>
<td>LIB</td>
<td>CD</td>
<td>NT</td>
<td>SPORTS</td>
</tr>
<tr align="center">
<th> SAT</th>
<td>NS</td>
<td>WT</td>
<td>CD</td>
<td>MS</td>
<td>OOAD</td>
<td>SS</td>
<td>MS</td>
</tr>
</table>
17


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</body>
</html>
OUTPUT:
18


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
FORMS: Collect the information from visitor to your site, you need a form.You can use several
different kinds of forms on different websites ,
Forms are used to add the elements of interaction to the website.
Form is collection of information data like: text,Buttons,Checkbox, radio-button,Select box, File
select menu , and hidden controls.
Form data is submitted by the user.For every form there is an application program in the application
server
to process the results.
We can create forms by using the <form> tag.
<form action="URL" method="post"|"get"> ...
</form>
Note: Forms can contain virually all other markup tags but cannot be nested within another tag.
The action attribute specifies the name and location of CGI script that will be used to process the
data.
post: To send the information to server.
get : To retrieve the inforamtion from server, and get method returns ASCII data.
Tags generally used with form: input type, select, option, textarea etc.....
input type:
<input type="text"|"password"|"Checkbox"|"radio"| "submit"|"reset"|"button"|"image"
name ="string"[ value="string"][checked] [size="n"] [maxlength="top"|"bottom"|"middle"|
'left"|"right']>
text: Create input text accept size of maxmium characters long.
Password: works exactly like input is not displayed to the screen
replaced by (* an asterisk security).
radio: Creates a radion button.
Check box: produces a simple check box.
submit: Creates a button display the value of attribute,
it is used to send the data to server.
reset: Creats a button, used to clear the form data.
Image: used to control the postion of image.
19


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Select tag:
<select name="string"> ...</select>
used to list the items from which the user can choose.Tag encloses a set of options and when sent to
server.
<option value="string" [selected]...</option>
The select option statement will have several options from
which the user can choose. The values will be displayed as the user moves through all the list and
choosen are returned by the server.
Chosen option will appears in the form.
<textarea name="string" rows="n" cols="n">....
</textarea>
Creates a free format plain text area into which the user
can enter anything they like. The area will be sized at
rows and cols but will support automatic setting.
Create a form using <form> element

Different kinds of form controls you can use make a formINPUT BOX
BUTTONS
CHECK BOX AND RADIO BUTTONS
SELECT BOX(DROP DOWN MENU or LIST BOX)
FILE SELECT BOX
HIDDEN CONTROLS
<form action = "URL" method="get" name="frmSearch" >
</form>
FORM ELEMENT should carry two attributes
Action method: Action attribute indicates what happens
when the form is submitted.
Method: Form data sent to server in two ways by HTTP method

get: method send data part of the URL
post: which hides data in HTTP header
1. Text input control:
Text input box used in many websites
20


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
(I)Single line text input control: which is used for one line user input
syntax;
<input type= "text" name ="txtName" value="txtValue"
size ="20" maxlength="64"/>
type: input control text type
name: representing each form control have name.
value: Each control name associated with value.
size: allows width of the text input control in terms of char's
maxlength: Maximum number of characters.
(ii) password input control:
used to collect data used for secured information like credit card information. You can use
password input control. This is identically same as single line where as type="password" and
value="password"
(iii) multiline text input controls: User allows to enter more than one line of text. It uses text input
control <textarea> element.
syntax: <textarea name="txtFeedback" rows="20" cols="20">
SOME TEXT
</textarea>
name: The name of the control, and name value is sent to
server
rows: Indicates size of <textarea> number of rows
cols: Size of the <textarea> width of the box(ie columns
width)
Examples of Forms
17.Desing a web page which accepts user name and password
logon information using forms
<!..Desing a web page which accepts user name and password
logon information using forms>
<html>
<head>
</title>
</head>
<body>
User name:
<input type="text" name="txtUsername" value= "" size="20" maxlength="20"/>
<br/><br/>
Password:
21


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<input type="password" name="pwdpassword" value= " " size="20"
maxlength="20"/>
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
OUTPUT:
18. Write HTML program for display sample form of vistor

feedback for a company using forms.
<! Write HTML program for display sample form of vistor
feedback for a company using forms>
<html>
<head>
<title> ABC COMPANY
</title>
</head>
<body>
<h2> VISITOR FEEDBACK</h2>
User name:
<br/><br/>
Emailid:
<input type="text" name="txtEmail" value= " " size="20"
maxlength="30"/>
<br/>
<textarea name="txtLocation" rows="10" cols="20">
location
</textarea>
<br/><br/>
<textarea name="txtComments" rows="10" cols="20">
Comments
</textarea>
<br/>
22


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<br/>
<input type="reset" value="Clear form"/>
</form>
</body>
</html>
OUTPUT:
2. BUTTONS: buttons are most commonly used to submit a form, and some time used to clear or
reset a form and event to triggerclient side scripts.
creating buttons using the <input> element.
<input> element is used to create a button the type attribute following values
(i) submit : which creates a button that submit a form
(ii) reset: reset the form control with intial values.
(iii) button: which creates a button that is used to trigger
client side script when user clicks button.
syntax:
<input type="submit" name="btnName" value="btnValue"/>
<input type="button" value="calculate" onclick="calculate()"/>
type: specifies the type of button (submit, reset or button)
name: Provides the name of the button
value: Enable to specify what text button should read.
size: Width of the button in pixels
onclick: Used to trigger a script when user clicks button.
using image for buttons:You can use image rather than using standard button. To create an image
button type attribute value is image.
syntax:
23


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<input type="image" src="submit.jpg" alt="submit"
name="btnImageMap"/>
src: source of the image
alt: alternative text for image
creating using button element:
The <button > element appearance on button between <button> and </button> tag.
syntax
<button type="button"> Text markup or image </button>
You can you textmarkup and image between these tags.
19. write a HTML program using forms the followingsubmit, reset, calculate, image submission,
button tag.
<! write a HTML program using forms the following
submit, reset, calculate, image submission, button tag >
<html>
<head>
<title> BUTTON EXAMPLE
</title>
</head>
<body>
<h2> BUTTON EXAMPLE</h2>
<form action = "URL" method="get" name="frmName" >
<input type="submit" name="btnVoteRed" value="Vote for red"/>
<br/>
<br/>
<input type="button" value="calculate" onclick="calculate()"/>
<br/>
<input type="image" src="D:\WT_CSE\Water lilies.jpg" width="50" height="50"
alt="WaterHills" name="btnImageMap"/>
<br/>
<button type="buttton"><img src="D:\WT_CSE\Blue hills.jpg " width="50"
height="50"alt="Bluehills"/> </button>
</form>
</body>
</html>
OUTPUT:
24


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
3.CHECK BOX AND RADIO BUTTONS:

Check box can be on or off . Group of check box will share the common control name. it provides
yes/no response and Select several items from list of possible options
syntax;
<form>
<input type="checkbox" name="chkName" value="chkValue"/>
NAME
</form>
20. Write HTML program to print the Technical skills using Check box.
OUTPUT:
Technical Skills
HTML
XHTML
CSS
Java script
PHP
<! Write HTML program to print the Technical skills using
Check box. -->
<html>
<head>
<title> MALLA REDDY ENGINEERING COLLEGE </title>
</head>
<body>
<h2> Technical Skills</h2>
<form action="URL" method="get" name="fromName">
<input type="checkbox" name="chkSkills" value="html"/>
HTML <br/>
<input type="checkbox" name="chkSkills" value="xhtml"/>
XHTML <br/>
<input type="checkbox" name="chkSkills" value="css"/>
CSS <br/>
25


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<input type="checkbox" name="chkSkills" value="javascript"/>
Java Script<br/>
<input type="checkbox" name="chkSkills" value="php"/>
PHP<br/>
</form>
</body>
</html>
OUTPUT:
4.Radio Buttons:
Similar to check box either they can be on or off.Group of items will share the same name.You
should not use radio button as single form control.Provide the number of options but user can select
only one option.
Syntax:
<form>
<input type="radio" name=" radName" value="radValue"/>
NAME
</form>
21. Desing a HTML web page print Gender (male and female)
using Radio buttons.
<! Write HTML program to GenderMale, Female using
Radio button. -->
<html>
<head>
</head>
<body>
<h2> Gender</h2>
<input type="radio" name="chkGender" value="male"/>
26


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Male <br/>
<input type="radio" name="chkGender" value="female"/>
Female <br/><br/>
</form>
</body>
</html>
OUTPUT:
5.SELECT BOX(DROP DOWN MENU or LIST BOX):Drop down select box allows users to select
one item from drop
down menu.It provides text input select box several options only one option will be selected.Drop
down menu uses <select> tag with <option> element.
syntax;
<select name="nameSelect" >
< option selected="selected" value=""> select Value </option>
<option value="value> Name</option>
.........
</select>
22..Write a HTML program select one color value among three colors(Red,Blue and Green) using
<select> tag.
! Write HTML program to select color red,blue,green usingselect tag. -->
<html>
<head>
</head>
<body>
<h2> Gender</h2>
<select name="setColor" >
< option selected="selected" value=""> select color </option>
<option value="red"> Red</option>
27


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<option value="blue"> Blue</option>
<option value="green"> Green</option>
</select> <br/> <br/> <br/><br/>
</form>
</body>
</html>
OUTPUT:
6.FILE SELECT BOX

To allow a user to upload a file from website.use file upload box known as file select box.
syntax:
<form action="URL" method="post" name="uploadName"
enctype="multipart/form-data">
<input type="file" name="fileupload" accept="image/**"/>
</form>
28. Desing a HTML page to upload a file with submission button
using file select box tag.
<! Desing a HTML page to upload a file with submission button
using file select box tag. -->
<html>
<head>
</head>
<body>
<h2> YOU want to upload a file</h2>
<form action="URL" method="post" name="uploadName"
enctype="multipart/form-data">
<input type="file" name="fileupload" accept="image/**"/>
<br/>
</form>
</body>
</html>
OUTPUT:
28


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
7.HIDDEN CONTROLS:
You want to pass information between pages without the user seeing it. You can use hidden form
controls.
Hidden controls should not be used for any sensitive information. Hidden control using <input>
element type attribute value is hidden.
Syntax: <form action="URL" method="get" name="formName">
<input type="hidden" name="hiddenName" value="homepage">
<input type="submit" value="clickFavourate page from site">
</form>
29.Desing a HTML web page hidden control
<! Desing a HTML web page hidden control -->
<html>
<head>
</head>
<body>
<p> The Contens Hidden from user View and choose the
following option to view the source page </p>
<form action="URL" method="get" name="formName">
<input type="hidden" name="hiddenName" value="homepage">
<input type="submit" value="clickFavourate page from site">
</form>
</body>
</html>
OUTPUT:
29


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
30


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
FRAMES
Frames: A frame is section/portion of the browser window capable of displaying the contents of an
entire page.
A frame is a part of a web page or browser window which displays content independent of its
container,
with the ability to load content independently.
The HTML or media elements that go in a frame may or may not come from the same web site as the
other elements of content on display.
Create frames for a Web site. The web devoloper can Control the appearance and placement of
frames
Control the behavior of hyperlinks on a Web page with frames.
He can Use reserved target names to specify a target for a hypertext link Create a Web page that is
viewable by browsers that support frames and by those that do not modify the appearance of your
frame borders
Advantages of frames:
Allow multiple contents on single page.(display lot of contents in single page).When you have lot of
data single page user want to reload while another part changes.Frames allows linked contents(such
as table of contents)
It allows seperate scrolloble regions on the page.flexibility in design information in different Web
pages
Frames remove redundancy information and web site easier to manage,update only a few files rather
than the whole.soWeb designers create both framed and non-framed versions for a Web site and give
users the option of which one to use.
Disadvantages:
Search engine link the contents of individual frames rather than frameset.Some old browsers donot
print the frames.Adds considerable complexity to the coding process.Errors can be extremely
difficult to identify.
The browser has to load multiple HTML files increasing wait time,Some users do not like using
frames.
Some web authors feel that frames are too constricting.and Frames can use up valuable screen space
if
the source code is hidden.
Frames: Independent navigation and content to two or more locations on a single browser screen.
<frameset> defines the frameset
Frameset: This tag gives the how browser will divide the rows and columns.frameset contains
definitions of various frames in the file.
this include the
31


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
-- Size and location of the frame.
-- web pages of the frame display.
The <frameset> tag defines a frameset.
The <frameset> element holds one or more <frame> elements. Each <frame> element can hold a
separate document.
The <frameset> element specifies HOW MANY columns or rows there will be in the frameset, and
HOW MUCH percentage/pixels of space will occupy each of them.
Frameset defined by rows or columns but not both.You can choose layout the frames in either rows
or columns.
NOTE: framesets is accurate usability and accessibility area of browser window
Ex:
A simple three-framed page:
<frameset rows="25%,*,25%">
<frame src="top.htm">
<frame src="main.htm">
<frame src="bottom.htm">
</frameset>
Note: Cols,rows attribute size value in pixels,%(percentage of the window),*(denotes remaining
size of the window)
Linking frames:
In the following example, the linked document is loaded in a new window: Write the in Frames page
in head tag and target name of the attribute ex. main_page
<head>
<frame src="D:\main.html" name="main_page"/>
<head>
Definition and Usage
The target attribute specifies a window or a frame where the linked document is loaded which is
specified intheURL of the following tag.
Note: The target name in the CONTENT MENU is same as the name which you specified in the
main frame.
Syntax:
<body>
<a href="D:\cse.html"
target="main_page"> CSE </a> <br/>
<a href="D:\it.html "
target="main_page"> IT </a>
</body>
1. Devolp the HTML application using Frames
32


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Frame1.html
<! This is HTML program desing the Page layout using Frames-->
<html>
<head>
<title> FRAMES EXAMPLE </title>
</head>
<frameset rows="90,*,80">
<frame src="C:\Users\das\Desktop\wt lab\22_1_14_EXP1\top.html"/>
<frameset cols="80,*">
<frame src="left.html"/>
<frame src="C:\Users\das\Desktop\wt lab\22_1_14_EXP1\main.html"
name="main_page"/>
</frameset>
<frame src="C:\Users\das\Desktop\wt lab\22_1_14_EXP1\bottom.html"/>
</frameset>
</html>
NOTE: Execute the Individual HTML files and copy the path of theFile in the specified SRC.
Top.html
<! This is HTML program Top -->
<html>
<head>
<title> Top the Frame </title>
</head>
<body>
<img src="C:\Users\das\Desktop\wt lab\22_1_14_EXP1\logo_mreg.JPG "
align="left" width="75" height="75" />
<center>
<h1> WELCOME TO MREC </H1>
</CENTER>
</body>
</html>
33


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Left.html
! This is HTML program Left -->
<html>
<head>
<title> Left the Frame </title>
</head>
<body>
<a href="C:\Users\das\Desktop\wt lab\22_1_14_EXP1\cse.html"
target="main_page"> CSE </a> <br/>
<a href="C:\Users\das\Desktop\wt lab\22_1_14_EXP1\main.html"
target="main_page"> IT </a>
</body>
</html>
Main.html
<! This is HTML program Main page -->
<html>
<head>
<title> Main page </title>
</head>
<body>
<center> <h1> This is main page </H1></CENTER>
</body>
</html>
Bottom.html
<! This is HTML program Bottom page -->
<html>
<head>
</head>
<body>
<center>
<h6> Maisammaguda, Post Via Kompally,
Secunderabad 500 100, AP.
</H6>
<h5> www.mrec.ac.in</h5>
</CENTER>
</body>
</html>
34


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Cse.html
<! This is HTML programCSE -->
<html>
<head>
<title> CSE </title>
</head>
<body>
<h1> You have selected CSE </h1>
</body>
</html>
Main.html
<! This is HTML program Main page -->
<html>
<head>
</head>
<body>
<center> <h1> This is main page </H1></CENTER>
</body>
</html>
OUTPUT:
35


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
36


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
JAVA SCRIPT PROGRAMS:
Introducation to JavaScriptis language have script capabilities to the Graphical HTML editors.
Java script is platform independent.it is used webpages embeded with Javascript.
Script: Scripts are small pieces of code which accomplish a single task.Programs are compiled ,
javascripts are interpreted.
Advantages of Javascript.
1) it is widely supported in web browsers
2) Easy access to the docuement.
3) Used for animations, and multimedia.
4) Web surfers donot need special plugins to use
javascript.
5) Javascripts are secured.
Problems with javascript.
1) Most scripts rely upon manipulating the elements in DOM .
2)Script does not work the page is useless.
3) Problems with broken scripts that causes
disable Javascript suppored browsers.
4)Scripts run slowly and complex scripts can take
long time to start.
Other than JavaScript.
PERL: Server side CGI scripting
VB Script:widely used platform specific with
MSwindows Operating system
Python: client side scripting
TCL: used for system programming.
Java script BASICS
JavaScript is a program containts variables,
objects, and functions.
Structure of JavaScript program
<html>
<head>
<script language="javascript">
<!-function fun1(arguments)
{
variables
37


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Instructions
conditions
}
function fun2(arg's)
{
variables
Instructions
conditions
}
.....
//-->
</script>
</head>
<body onLoad="fun1()" onUpLoad="fun2()">
</body>
</html>
1.Variables
2.String manipulations
3.Mathematical functions
4.Statements
if else, for,while,break, eval(),switch
5.Operators
6.Arrays
7.Functions
1) Variable: is a data items to manipulate the
program.
1.1 variable names:
names must begin with a letter, digit or underscore.You cannot use spaces in names.names are case
sensitive ex. fred, FRED , fRed all are different.You cannot use reserved word as a variable.
variables are declared by using var keyword.
ex. var first = 23;
var second = "some words";
var third = second;
var first_boolean = true;
1.2 Data types:
Programming language have several different types of datatypes.
commonly used characters, integers, booleans,
strings, real numbers
38


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Java script has Four Types of data
i) numeric: integer and float point
ex. var x =20;
var y = 55.55;
ii) Strings:
collection of characters that are not numbers.
ex.
var college ="MREC";
iii) Boolean:boolean variable hold the values
true or false.
ex. var flag= true;
iv) null: is used when you donot know something
it does not mean nill or zero.
1.3 Creating variable : To create variable
of defined data type we use var before the name
ex. var a =10;
var b = 20;
1.12. write a JavaScript program to enter your name and print your name.
<html>
<head> <title> Simple JavaScript</title>
</head>
<body>
<script type = "text/javascript">
<!-var name;
name = window.prompt("Enter your name", " ");
document.writeln("<h1> YOUR NAME IS </h1>");
document.writeln("<h2> " + name + "</h2>");
document.close();
</script>
</body>
</html>
OUTPUT:
39


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
1.13)write JavaScript program

<html>
<head> <title> Simple JavaScript</title>
</head>
<body>
<script type = "text/javascript">
<!-var x,y,sum;
x = window.prompt("Enter First Number"," ");
y = window.prompt("Enter Second Number"," ");
sum = parseInt(x) + parseInt(y);
document.writeln("<h1> THE SUM OF TWO NUMBERS
</h1>");
document.writeln("<h2> " + sum + "</h2>");
40


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
document.close();
</script>
</body>
</html>
1.14) write a JavaScript program to print the sum of two numbers using function
<html>
<head> <title> Simple JavaScript addition
of
two numbers</title>
<script language = "javascript">
<!-function add() {
var x,y,sum;
x = window.prompt("Enter First Number"," ");
y = window.prompt("Enter Second Number"," ");
sum = parseInt(x) + parseInt(y);
document.writeln("<h1> THE SUM OF TWO NUMBERS
</h1>");
document.writeln("<h2> " + sum + "</h2>");
document.close();
}
//-->
</script>
</head>
<body onLoad="add()">
</body>
</html>
OUTPUT:
41


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
2) String manipulations:
Java script uses text strings
Most useful text manipulation involves regular
expressions
string manipulation involvs
joining strings
42


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
spiliting them apart, searching string.
i) charAt(index): this retursn the character which
at position index in the string.
ii) concat("string"[,"string"[,..."string"]])
the simplest use "+" operator for concatnation.
iii)indexOf("search"[,offset])
string is searched for the string or quoted
character in the first parameter.
iv)lastIndexOf("search"[,offset])
This does exactly same as indexOf() but its way
backword along the string. The offset exactly same
way for indexOf(), but default value string.length
is -1
v)length: Value holds the number of characters to
the string.
vi)split(seperator[,limit]): to split string aprat
into tis constituent elements. The spit function
breaks the string aprat whenever it encounters the
character passed parameter.
vi)substr(index,length]): The function returns at
the character indicated by the index parameter.
substing(index1[, index2])
Returns a set of characters starts with index1
continues up to but doesnot include index2, but
rules applied.
vii) toLowerCase(): converts all characters in
string lower case.
viii) toUpperCase(): converts all characters in the
43


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
sting to upper case.
1.15)write a java script program to split a given sentence into set of tokens or words by using
space character as delimeter
<html>
<head> <title> string method split and substring</title>
<!-function splitButtonPressed()
{
var strings=myForm.inputVal.value.split(" ");
myForm.output.value = strings.join("\n");
myForm.outputSubstring.value=
myForm.inputVal.value.substring(0,10);
}
//-->
</script>
</head>
<body>
<form name ="myForm" action = "">
<p> Enter a sentence to split into words <br/>
<input name="inputVal" type="text" size="40"/>
<input name ="splitButton" type = "button"
value= "Split" onclick="splitButtonPressed()"/>
</p>
<p> The sentence split into words<br/>
<textarea name = "output" rows="8" cols="34">
</textarea>
<p> The first 10 characters of the input string
are
<input name = "outputSubstring" type ="text"
size ="15"/>
</p>
</form>
</body>
</html>
---1.16 alert: the function display the information in
window.
ex.
<html>
44


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<body>
<script language ="javascript">
<!-alert("When page is loaded!");
//-->
</script>
</body>
</html>
Output:
6 alert: the function display the information in

window.
ex.
<html>
<body>
<script language ="javascript">
<!-alert("When page is loaded!");
//-->
</script>
</body>
45


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</html>
Output:
1.17)Example of Mathematical Function and if statement.

<html>
<head> <title> Math isNAN(number) Testing</title>
</head>
<body>
<!-document.writeln("<h1> The Math Object</h1> ");
var valueOne = prompt("Enter the number", " ");
var result = Math.floor(valueOne);
if(isNaN(result))
{
document.write("<p> The value you gave was");
document.writeln(" NOT A NUMBER</p>");
}
else
{
document.write("<p> The result " +result);
document.writeln("</p>");
}
46


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
document.close();
//-->
</script>
</body>
</html>
1.18)Write a java script program using FOR LOOP to print 1 to n numbers

<html>
<head> <title> FOR LOOP to print 1 to 10 numbers
</title>
<!-function count1()
{
var n;
n = window.prompt("Enter First Number"," ");
n= parseInt(n);
for(var i=1;i<=n;i++)
{
document.write("<p> The value is " +i);
}
document.close();
}
//-->
47


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</script>
</head>
<body onLoad="count1()">
</body>
</html>
OUTPUT:
-1.19 Write a JavaScript program to print 1 to n numbers using while loop;

<html>
<head> <title> FOR LOOP to print 1 to 10 numbers
48


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</title>
<!-function count1()
{
var n;
n = window.prompt("Enter N value"," ");
n= parseInt(n);
var i =1;
while(i<=n)
{
document.write("<p> The value is " +i);
i++;
}
document.close();
}
//-->
</script>
</head>
<body onLoad="count1()">
</body>
</html>
OUTPUT:
UT
49


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
--eval() this is very useful java

built in function
ex. document.write("Eval");
var r = eval("2*3+5");
document.writeln("r value"+r);
output: r value 11
-1.20)Write a Java script program print seven days using switch statement.
<html>
<head> <title> CASE statement to print DAYS
</title>
<!-function day()
{
var n;
n = window.prompt("Enter 1 to 7 "," ");
n= parseInt(n);
switch(n)
{
case 1:
50


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
document.writeln("MONDAY");
break;
case 2:
document.writeln("TUESDAY");
break;
case 3:
document.writeln("WEDNUSDAY");
break;
case 4:
document.writeln("THURS DAY");
break;
case 5:
document.writeln("FRI DAY");
break;
case 6:
document.writeln("SATUR DAY");
break;
case 7:
document.writeln("SUN DAY");
break;
default:
document.writeln("Enter the correct choice");
break;
}
document.close();
}
//-->
</script>
</head>
<body onLoad="day()">
</body>
</html>
OUTPUT:
51


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
52


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
1. Design the following static web pages required for an online book store web site.
1) HOME PAGE:
The static home page must contain three frames.
Top frame : Logo and the college name and links to Home page, Login page, Registration page,
Catalogue page and Cart page (the description of these pages will be given below).
Left frame : At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link CSE the catalogue for CSE Books should be displayed in the
Right frame.
Right frame: The pages to the links in the left frame must be loaded here. Initially this page contains
description of the web site.
Logo
Home
Web site name

Login
Registration
CSE
ECE
EEE
CIVIL
Catalogue
Cart
Description of the Web Site
Homepagemain.html
<?XML version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<title> Online Book store Web site </title>
</head>
<frameset rows="90,90,*">
<frame src="logo.html"/>
<frame src="menu.html"/>
<frameset cols="100,*">
<frame src="C:\Users\das\Desktop\wt lab\21_1_14_CSE_A_EXP1\left.html" />
<frame src="C:\Users\das\Desktop\wt lab\21_1_14_CSE_A_EXP1\main.html"
name="main_page"/>
</frameset>
53


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</frameset>
Left.html
<! This is HTML code for Left page>
<html>
<head>
<title> This is Left page</title>
</head>
<body>
<a href="C:\Users\das\Desktop\wt lab\21_1_14_CSE_A_EXP1\cse.html" target="main_page">
CSE </a> <br/><br/>
<a href="URL" target="main_page" target="main_page"> ECE </a> <br/><br/>
<a href="D:\WT_CSE\9_1_14\cse.html" target="main_page"> EEE </a> <br/><br/>
<a href="URL" target="main_page" target="main_page"> CIVIL</a> <br/><br/>
</body>
</html>
Main.html
<! This is HTML code for main page>
<html>
<head>
<title> This is main page </title>
</head>
<body>
<h1> This is Description of the web site</h1>
<p> Welcome to ONLINE BOOK STORE</p>
<p> www.amazon.com </p>
</body>
</html>
Cse.html
<! This is HTML code CSE page>
<html>
<head>
<title> This is CSE page </title>
</head>
<body>
<h1> This is CSE page the web site</h1>
<p> Welcome to CSE DEPT</p>
</body>
</html>
54


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Logo.html
<! HTML Top page>
<html>
<head> <title>ONLINE BOOK STORE WEB SITE</title>
</head>
<body>
<center>
<caption>
<img src="D:\WT_CSE\2_1_14_CSE_B\logo_mreg.JPG" width="50"
height="50"align="left" alt="MRECLogo">
WEL COME TO ONLINE BOOK STORE<br/>
</caption>
</body>
</html>
Menu.html
<! HTML Middle page>
<html>
<head> <title>MIDDLE PAGE</title>
</head>
<body>
<table border=1% bordercolor=black align="center" width="100%" height=55>
<tr>
<th><a href="C:\Users\das\Desktop\wt lab\21_1_14_CSE_A_EXP1\home.html"
target="main_page">HOME</a></th>
<th><a href="C:\Users\das\Desktop\wt lab\21_1_14_CSE_A_EXP1\login.html"
target="main_page">Login</a></th>
<th><a href="C:\Users\das\Desktop\wt lab\21_1_14_CSE_A_EXP1\registration.html"
target="main_page">Registration</a></th>
<th><a href="catalogue.html" target="main_page">Catalogue</a></th>
<th><a href="cart.html" target="main_page">Cart</a></th>
</tr>
</table>
</body>
</html>
Home.html
<! This is HTML code forHome page>
<html>
<head>
<title> This is Home page </title>
</head>
<body>
55


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<h1> This is HOME page the web site</h1>
<p> Welcome to ONLINE BOOK STORE</p>
</body>
</html>
Login.html
<! This is HTML code login page>
<html>
<head>
<title> LOGIN PAGE
</title>
</head>
<body>
Login:
<br/><br/>
Password:
<input type="password" name="pwdpassword" value= " " size="20"
maxlength="20"/>
<br/>
<input type="reset" value="RESET"/>
</form>
</body>
</html>
56


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
2.Design the Cart page of the Template

i) CART PAGE ii) REGISTRATION PAGE
registration.html
<html>
<head><title>STUDENT REGISTRATION</title></head>
<body>
<form>
<center><h4>STUDENT REGISTRATION FORM</h4>
<pre>
Name
:<input type="text" name="name"/><br>
Password
:<input type="password" name="pwd"/><br>
E-mail id
:<input type="text" name="eid"/><br>
Phone no
:<input type="text" name="pno"/><br>
Gender:<input type="radio" name="gender" value="male"/>Male <input type="radio"
name="gender" value="female"/>Female<br>
D.O.B
:<select name="month"><option>Month</option><option
value="january">January</option><option value="february">February</option><option
value="March">March</option><option value="April">April</option><option
value="May">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="November">November</option>
<option value="December">December</option></select>
<select name="day"><option value="1">1</option>
<option value="2">2</option><option value="3">3</option>
<option value="30">30</option><option value="31">31</option></select> <select
name="year"><option value="1991">1991</option>
57


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<option value="1992">1992</option>
<option value="1995">1995</option></select><br>
Languages Known: English<input type="checkbox" value="en"/> Telugu<input type="checkbox"
value="telugu"/> Hindi<input type="checkbox" value="hindi"/> Tamil<input type="checkbox"
value="tamil"/><br>
Address
:<textarea rows=10 cols=30></textarea><br>
<input type="submit" name="sub" value="Submit"> <input type="button" name="cancel"
value="Cancel">
</pre>
</center>
</form>
</body>
</html>
catalogue.html
<html>
<body>
<table border="1" width="500" height="100">
<tr>
<td><img src="xml.jpg" alt="XML"/></td>
<td><pre>
Book: XML Bible
Author: Winston
Publication: Weily</pre></td>
<td> $40.5 <input type="button" name="cart" value="Add2Cart"></td></tr>
<tr>
<td><img src="ai.jpg" alt="Artificial Intelligence"/></td>
<td><pre>
Book: AI
Author: S.Russel
Publication: Princeton hall</pre></td>
<td> $63 <input type="button" name="cart" value="Add2Cart"></td></tr>
<tr>
<td><img src="java.jpg" alt="Java"/></td>
<td><pre>
Book: Java2
Author: Watson
Publication: BPB Publication</pre></td>
<tr>
<td><img src="html.jpg" alt="HTML"/></td>
<td><pre>
Book: HTML in 24 hours
Author: Sampeter
58


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Publication: Sam Publication</pre></td>
</table>
</body>
</html>
csc.html
<html>
<body>
<table border="1" width="450" height="100">
<tr>
<td><img src="xml.jpg" alt="XML"/></td>
<td><pre>
Book: XML Bible
Author: Winston
Publication: Weily</pre></td>
</table></body></html>
ece.html
<html>
<body>
<table border="1" width=450 height=100>
<tr>
<td><img src="ai.jpg" alt="Artificial Intelligence"/></td>
<td><pre>
Book: AI
Author: S.Russel
Publication: Princeton hall</pre></td>
</table>
</body>
</html>
eee.html
<html> <body>
<tr>
<td><img src="java.jpg" alt="Java"/></td>
<td><pre>
Book: Java2
Author: Watson
Publication: BPB Publication</pre></td>
59


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</table>
</body> </html>
civil.html
<html>
<body>
<tr>
<td><img src="html.jpg" alt="HTML"/></td>
<td><pre>
Book: HTML in 24 hours
Author: Sampeter
Publication: Sam Publication</pre></td>
<td> $50 <input type="button" name="cart" value="Add2Cart"></td></tr></table></body></html>
Loginpage
60


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
61


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
3: VALIDATION: Write JavaScript to validate the following fields of the above registration page.
1. Name (Name should contains alphabets and the length should not be less than 6 characters).
2. Password (Password should not be less than 6 characters length).
3. E-mail id (should not contain any invalid and must follow the standard pattern
name@domain.com)
4. Phone number (Phone number should contain 10 digits only).
Note : You can also validate the login page with these parameters.
JavaScript to validate WEEK2 fields of registration page.
AIM: Write JavaScript to validate the following fields of the above registration page.
Name (Name should contains alphabets and the length should not be less than 6 characters).
Password (Password should not be less than 6 characters length).
E-mail id (should not contain any invalid and must follow the standard pattern
name@domain.com)
4. Phone number (Phone number should contain 10 digits only).
DESCRIPTION:
JavaScript is a simple scripting language invented specifically for use in web browsers to
make websites more dynamic. On its own, HTML is capable of outputting more-or-less static pages.
Once you load them up your view doesn't change much until you click a link to go to a new page.
Adding JavaScript to your code allows you to change how the document looks completely, from
changing text, to changing colors, to changing the options available in a drop-down list. JavaScript is
a client-side language.
JavaScripts are integrated into the browsing environment, which means they can get
information about the browser and HTML page, and modify this information, thus changing how
things are presented on your screen. This access to information gives JavaScript great power to
modify the browsing experience. They can also react to events, such as when the user clicks their
mouse, or points to a certain page element. This is also a very powerful ability.
Regular Expressions:
One of the most common situations that come up is having an HTML form for users to enter
data. Normally, we might be interested in the visitors name, phone number and email address, and
so forth. However, even if we are very careful about putting some hints next to each required field,
some visitors are going to get it wrong, either accidentally or for malicious purposes. Heres where
regular expressions come in handy. A regular expression is a way of describing a pattern in a piece of
text. In fact, its an easy way of matching a string to a pattern. We could write a simple regular
expression and use it to check, quickly, whether or not any given string is a properly formatted user
input. This saves us from difficulties and allows us to write clean and tight code.
A regular expression is a JavaScript object. There are multiple ways of creating them. They
can be created statically when the script is first parsed or dynamically at run time. A static regular
expression is created as follows:
regx=/fish|fow1/;
Dynamic patterns are created using the keyword to create an instance of the RegExp class:
regx=new RegExp(fish|fow1);
1.
2.
3.
62


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Functions:
test(string)- Tests a string for pattern matches. This method returns a Boolean that indicates whether
or not the specified pattern exists within the searched string. This is the most commonly used method
for validation. It updates some of the properties of the parent RegExp object following a successful
search.
exec(string)- Executes a search for a pattern within a string. If the pattern is not found, exec() returns
a null value. If it finds one or more matches it returns an array of the match results. It also updates
some of the properties of the parent RegExp object
PROGRAM:
Valid.js
function fun()
{
var userv=document.forms[0].user.value;
var pwdv=document.forms[0].pwd.value;
var emailv=document.forms[0].email.value;
var phv=document.forms[0].ph.value;
var userreg=new RegExp("^[a-zA-Z][a-zA-Z0-9]*$");
var emailreg=new RegExp("^[a-zA-Z][a-zA-Z0-9_.]*@[a-zA-Z][a-zA-Z0-9_.]*.[a-zA-Z][azA-Z0-9_.]{2}.[a-zA-Z][a-zA-Z0-9_.]{2}$|^[a-zA-Z][a-zA-Z0-9_.]*@[a-zA-Z][a-zA-Z0-9_.]*.[azA-Z][a-zA-Z0-9_.]{3}$");
var phreg=new RegExp("^[0-9]{10}$");
var ruser=userreg.exec(userv);
var remail=emailreg.exec(emailv);
var rph=phreg.exec(phv);
if(ruser && remail && rph && (pwdv.length > 6))
{
alert("All values are valid");
return true;
}
else
{
if(!ruser) { alert("username invalid");document.forms[0].user.focus();}
if(!remail) { alert("password invalid");document.forms[0].user.focus();}
if(!rph) { alert("phone number invalid");document.forms[0].ph.focus();}
if(pwdv.length < 6) { alert("password invalid");document.forms[0].pwd.focus();}
return false;
}
}
Register.html
<html>
<body>
<center>
<fieldset>
<legend>Registration</legend>
63


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<form action="Database" method="get" onSubmit="return fun()">
<pre>
Name
:<input type="text" name="user" size="10"><br>
Password
:<input type="password" name="pwd" size="10"><br>
E-mail
:<input type="text" name="email" size="10"><br>
Phone Number
:<input type="text" name="ph" size="10"><br>
<input type="submit" value="Register">
</pre>
</form>
</body>
<script src="valid.js"></script>
</html>
OUTPUT:
64


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
WEEK -4
Design a web page using CSS (Cascading Style Sheets) which includes the following:
1) Use different font, styles:
In the style definition you define how each selector should work (font, color etc.). Then, in the body
of your pages, you refer to these selectors to activate the styles
-----AIM:
Design a web page using CSS (Cascading Style Sheets) which includes the following:
1) Use different font, styles: In the style definition you define how each selector should work
.Then, in the body of your pages, you refer to these selectors to activate the styles.
2) Set a background image for both the page and single elements on the page.
3) Control the repetition of the image with the background-repeat property
DESCRIPTION:
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in a markup language. Its most common application is to style web pages written
in HTML and XHTML, but the language can be applied to any kind of XML document. In CSS,
selectors are used to declare which elements a style applies to, a kind of match expression. Selectors
may apply to all elements of a specific type, or only those elements which match a certain attribute;
elements may be matched depending on how they are placed relative to each other in the markup
code, or on how they are nested within the document object model A style sheet consists of a list of
rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declarationblock consists of a list of semicolon-separated declarations in braces. Each declaration itself consists
of a property, a colon (:), a value, then a semi-colon (;)
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by
the
following rules:
1. External style sheet
2. Internal style sheet (inside the <head> tag)
3. Inline style (inside an HTML element)
An inline style (inside an HTML element) has the highest priority, which means that it will override a
style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute
you wish to change, and each property can take a value. The property and value are separated by
65


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
a colon, and surrounded by curly braces:
body {color: black}
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page must link to the style
sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the document
according to it.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section by using the <style> tag,
<head>
<style>
selector {property:value; property:value;..}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly, such as when a style is to be applied to a single occurrence of an lement.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain
any CSS property.
<p style="color: sienna; margin-left: 20px">
This is a paragraph </p>
1) Use different font, styles:In the style definition you define how each selector should work (font,
color etc.).
Then, in the body of your pages, you refer to these selectors to activate the styles.
<html>
<head>
<title>
week no-4.1 exp web technologies
</title>
<STYLE TYPE="TEXT/CSS">
H1
{
COLOR:rgb(50,100,150);
TEXT-ALIGN:right;
66


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
FONT-FAMILY:Times new roman;
}
H6
{
COLOR:green;
TEXT-ALIGN:CENTER;
FONT-FAMILY:Verdana;
}
</STYLE>
</HEAD>
<body>
<H1>WELCOME TO CSE</H1>
<H6>WELCOME TO INTERNAL CSS</H2>
</BODY>
</HTML>
2) Set a background image for both the page and single elements on the page.You can define the
background
image for the page
Program:
<html>
<head>
<title>Image</title>
<style>
body
{
background-image:url("Sunset.jpg" );
background-repeat:no-repeat;
67


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
}
h1
{
background-image:url("Winter.jpg ");
}
</style>
</head>
<body>
<H1>WEB DESIGNING</H1>
</body>
</html>
Output:
3) Control the repetition of the image with the background-repeat property.As background-repeat:
repeat Tiles the image until the entire page is filled, just like an ordinary background image in plain
HTML.
Program:
<html>
<head>
<title>Image</title>
<style>
body
{
background-image:url("a.jpg");
background-repeat:repeat-Y;
}
</style>
</head>
<body>HAPPY BIRTHDAY
</body>
68


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</html>
Output:
4) Define styles for links as

A:link
A:visited
A:active
A:hover
Program:
<html>
<head>
<style type="text/css">
a:link {color:"orange";} /* unvisited link */
a:visited {color:"red";} /* visited link */
a:hover {color:green;} /* mouse over link */
a:active {color:yellow;} /* selected link */
</style>
</head>
<body>
<p><b><a href="css4.html">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
Output:
69


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
5) Work with layers:

Program:
<html>
<head>
<title>Div tag</title>
</head>
<body>
<div style="position:static;Border-style:solid;color:red;top:100px;
right:150px;">CSE
</div><br>
<div style="position:static;Border-style:dashed;color:blue;">IT
</div>
<div align="right">
sdasdadadadasdasd
</div>
</body>
</html>
Output:
6) All cursor properties

Program:
70


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<!DOCTYPE html>
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br />
<span style="cursor:crosshair">crosshair</span><br />
<span style="cursor:default">default</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:help">help</span><br />
<span style="cursor:move">move</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:pointer">pointer</span><br />
<span style="cursor:progress">progress</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:wait">wait</span><br />
</body>
</html>
otuput:
71


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Week-5: Write an XML file which will display the Book information which includes the following:
1) Title of the book
2) Author Name
3) ISBN number
4) Publisher name
5) Edition
6) Price Write a Document Type Definition (DTD) to validate the above XML file.
Display the XML file as follows. The contents should be displayed in a table. The header of the table
should be in color GREY. And the Author names column should be displayed in one color and should
be capitalized and in bold. Use your own colors for remaining columns. Use XML schemas XSL and
CSS for the above purpose. Note: Give at least for 4 books. It should be valid syntactically. Hint: You
can use some xml editors like XML-spy
XML file which will display the Book information
AIM: Write an XML file which will display the Book information.
It includes the following:
1) Title of the book
2) Author Name
3) ISBN number
4) Publisher name
5) Edition
6) Price
72


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Write a Document Type Definition (DTD) to validate the above XML file.
Display the XML file as follows.
The contents should be displayed in a table. The header of the table should be in color GREY. And
the Author names column should be displayed in one color and should be capitalized and in bold.
Use your own colors for remaining columns.
Use XML schemas XSL and CSS for the above purpose.
DESCRIPTION:
DTD vs XML Schema
The DTD provides a basic grammar for defining an XML Document in terms of the metadata
that comprise the shape of the document. An XML Schema provides this, plus a detailed way to
define what the data can and cannot contain. It provides far more control for the developer over what
is legal, and it provides an Object Oriented approach, with all the benefits this entails.
Many systems interfaces are already defined as a DTD. They are mature definitions, rich and
complex. The effort in re-writing the definition may not be worthwhile.DTD is also established, and
examples of common objects defined in a DTD abound on the Internet -- freely available for re-use.
A developer may be able to use these to define a DTD more quickly than they would be able to
accomplish a complete re-development of the core elements as a new schema.
Finally, you must also consider the fact that the XML Schema is an XML document. It has an
XML Namespace to refer to, and an XML DTD to define it. This is all overhead. When a parser
examines the document, it may have to link this all in, interpret the DTD for the Schema, load the
namespace, and validate the schema, etc., all before it can parse the actual XML document in
question. If you're using XML as a protocol between two systems that are in heavy use, and need a
quick response, then this overhead may seriously degrade performance.
Write a Document Type Definition (DTD) to validate the XML file.

PROGRAM:
XML document (bookstore.xml)
<bookstore>
<book>
<title>web programming</title>
<author>chrisbates</author>
<ISBN>123-456-789</ISBN>
<publisher>wiley</publisher>
<edition>3</edition>
<price>350</price>
</book>
<book>
<title>internet worldwideweb</title>
<author>ditel&ditel</author>
<ISBN>123-456-781</ISBN>
<publisher>person</publisher>
73


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<price>450</price>
</book>
</bookstore>
XML document Validation using DTD
DTD document (bookstore.dtd)
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title,author,ISBN,publisher,edition,price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>
Bookstore.xml
<!DOCTYPE bookstore SYSTEM "C:\Documents and Settings\Administrator\My
Documents\bookstore.dtd">
<bookstore>
<book>
<ISBN>123-456-789</ISBN>
<price>350</price>
</book>
<book>
<ISBN>123-456-781</ISBN>
<price>450</price>
</book>
</bookstore>
74


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
XML document Validation using DTD
XML Schema (bookstore.xsd)
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema elementFormDefault="qualified" attributeFormDefault="unqualified"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="bookstore">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="title"
type="xs:string"></xs:element>
<xs:element name="author" type="xs:string"></xs:element>
<xs:element name="ISBN" type="xs:string"></xs:element>
<xs:element name="publisher"
type="xs:string"></xs:element>
<xs:element name="edition" type="xs:int"></xs:element>
<xs:element name="price" type="xs:decimal"></xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
Bookstore.xml
<bookstore xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="C:\Documents and Settings\Administrator\My
Documents\bookstore.xsd">
<book>
<ISBN>123-456-789</ISBN>
<price>350</price>
</book>
<book>
<ISBN>123-456-781</ISBN>
75


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<price>450</price>
</book>
</bookstore>
Display the XML file as follows.

PROGRAM:
XML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="bookstore.xsl"?>
<bookstore>
<book>
<title>Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book>
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
</book>
<book>
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
</book>
</bookstore>
XSL:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2> My Books collection</h2>
<table border="1">
<tr bgcolor="red">
<th align="left">title</th>
<th align="left">author</th>
</tr>
<xsl:for-each select="bookstore/book">
<tr>
76


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<td><xsl:value-of select="title"/></td>
<xsl:choose>
<xsl:when test="price > 30">
<td bgcolor="yellow"><xsl:value-of select="author"/></td>
</xsl:when>
<xsl:when test="price > 10">
<td bgcolor="magneta"><xsl:value-of select="author"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="author"/></td>
</xsl:otherwise>
</xsl:choose>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
OUTPUT:
77


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
6. VISUAL BEANS: Create a simple visual bean with a area filled with a color.
The shape of the area depends on the property shape. If it is set to true then the shape of the area is Square and it is Circle, if it is false.
The color of the area should be changed dynamically for every mouse click. The color should also be changed if we change the color
in the property window
VISUAL BEANS: Create a simple visual bean with a area filled with a color.
The shape of the area depends on the property shape. If it is set to true then the shape of the area is
Square and it is Circle, if it is false.
The color of the area should be changed dynamically for every mouse click. The color should also be
changed if we change the color in the property window
Program 1: Colorbean.java
import java.io.*;
import java.awt.*;
import java.awt.event.*;
import java.io.Serializable;
public class Colorbean extends Canvas implements Serializable
{
transient private Color color;
private boolean rectangular;
public void colorbean()
{
addMouseListener(new MouseAdapter()
{
public void mousePressed(MouseEvent me)
{
change();
}
});
rectangular=false;
setSize(200,100);
change();
}
public boolean getRectangular()
{
return rectangular;
}
public void setRectangular(boolean flag)
{
this.rectangular=flag;
repaint();
}
public void change()
{
color=randomColor();
repaint();
}
78


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
private Color randomColor()
{
int r=(int)(255*Math.random());
int g=(int)(255*Math.random());
int b=(int)(255*Math.random());
return new Color(r,g,b);
}
public void paint(Graphics g)
{
Dimension d=getSize();
int h=d.height;
int w=d.width;
g.setColor(color);
if(rectangular)
{
g.fillRect(0,0,w-1,h-1);
}
else
{
g.fillOval(0,0,w-1,h-1);
}
}
}
OUTPUT:
79


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
---80


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Week-7:
1) Install TOMCAT web server and APACHE.
While installation assign port number 4040 to TOMCAT and 8080 to APACHE. Make sure that these
ports are available i.e., no other process is using this port.
2) Access the above developed static web pages for books web site, using these servers by putting the
web pages developed in week-1 and week-2 in the document root.
Access the pages by using the urls : http://localhost:4040/rama/books.html (for tomcat),
http://localhost:8080/books.html (for Apache
Week-7 Install TOMCAT web server and APACHE.
AIM: Install TOMCAT web server and APACHE.

While installation assign port number 8080 to APACHE. Make sure that these ports are available i.e.,
no other process is using this port.
DESCRIPTION:
Set the JAVA_HOME Variable

You must set the JAVA_HOME environment variable to tell Tomcat where to find Java. Failing
to properly set this variable prevents Tomcat from handling JSP pages. This variable should list the
base JDK installation directory, not the bin subdirectory.
On Windows XP, you could also go to the Start menu, select Control Panel, choose System, click on
the Advanced tab, press the Environment Variables button at the bottom, and enter
theJAVA_HOME variable and value directly as:
Name: JAVA_HOME
Value: C:\jdk
Set the CLASSPATH

Since servlets and JSP are not part of the Java 2 platform, standard edition, you have to
identify the servlet classes to the compiler. The server already knows about the servlet classes, but
the compiler (i.e., javac) you use for development probably doesn't. So, if you don't set
yourCLASSPATH, attempts to compile servlets, tag libraries, or other classes that use the servlet and
JSP APIs will fail with error messages about unknown classes.
Name: JAVA_HOME
Value: install_dir/common/lib/servlet-api.jar
Turn on Servlet Reloading

81


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
The next step is to tell Tomcat to check the modification dates of the class files of requested servlets
and reload ones that have changed since they were loaded into the server's memory. This slightly
degrades performance in deployment situations, so is turned off by default. However, if you fail to
turn it on for your development server, you'll have to restart the server every time you recompile a
servlet that has already been loaded into the server's memory.
To turn on servlet reloading, edit install_dir/conf/server.xml and add a DefaultContextsubelement
to the main Host element and supply true for the reloadable attribute. For example, in Tomcat
5.0.27, search for this entry:
<Host name="localhost" debug="0" appBase="webapps" ...>
and then insert the following immediately below it:
<DefaultContext reloadable="true"/>
Be sure to make a backup copy of server.xml before making the above change.
Enable the Invoker Servlet

The invoker servlet lets you run servlets without first making changes to your Web
application's deployment descriptor. Instead, you just drop your servlet into WEB-INF/classesand use
the URL http://host/servlet/ServletName. The invoker servlet is extremely convenient when you are
learning and even when you are doing your initial development.
To enable the invoker servlet, uncomment the following servlet and servletmappingelements in install_dir/conf/web.xml. Finally, remember to make a backup copy of the
original version of this file before you make the changes.
<servlet>
<servlet-name>invoker</servlet-name>
<servlet-class>
org.apache.catalina.servlets.InvokerServlet
</servlet-class>
...
</servlet>
...
<servlet-mapping>
<servlet-name>invoker</servlet-name>
<url-pattern>/servlet/*</url-pattern>
</servlet-mapping>
OUTPUT:
---
82


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
83


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
RESULT: Thus TOMCAT web server was installed successfully.
Week-8: User Authentication: Assume four users user1, user2, user3 and user4 having the
passwords pwd1, pwd2, pwd3 and pwd4 respectively.
Write a servelet for doing the following.
1. Create a Cookie and add these four user ids and passwords to this Cookie.
2. Read the user id and passwords entered in the Login form (week1) and authenticate with the
values (user id and passwords) available in the cookies. If he is a valid user (i.e., user-name and
password match) you should welcome him by name (user-name) else you should display You are
not an authenticated user . Use init-parameters to do this. Store the user-names and passwords in
the webinf.xml and access them in the servlet by using the getInitParameters () method
AIM:
User Authentication:
Assume four users user1, user2, user3 and user4 having the passwords pwd1, pwd2, pwd3 and pwd4
respectively. Write a servelet for doing the following.
1. Create a Cookie and add these four user ids and passwords to this Cookie.
values (user id and passwords) available in the cookies.
If he is a valid user (i.e., user-name and password match) you should welcome him by name (username) else you should display You are not an authenticated user . Use init-parameters to do this.
Store the user-names and passwords in the web.xml and access them in the servlet by using the
getInitParameters() method.
1.
2.
3.
4.
5.
DESCRIPTION:
Servlet Life cycle:
Servlet class loading
Servlet Instantiation
call the init method
call the service method
call destroy method
Class loading and instantiation
If you consider a servlet to be just like any other Java program, except that it runs within a
servlet container, there has to be a process of loading the class and making it ready for requests.
Servlets do not have the exact equivalent of a main method that causes them to start execution.
When a web container starts it searches for the deployment descriptor (WEB.XML) for each
of its web applications. When it finds a servlet in the descriptor it will create an instance of the
servlet class. At this point the class is considered to be loaded (but not initialized).
The init method
The HttpServlet class inherits the init method from GenericServlet. The init method performs
a role slightly similar to a constructor in an ordinary Java program in that it allows initialization of
an instance at start up. It is called automatically by the servlet container and as it causes the
84


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
application context (WEB.XML) to be parsed and any initialization will be performed. It comes in
two versions, one with a zero parameter constructor and one that takes a ServletConfig parameter.
The servlet engine creates a request object and a response object. The servlet engine invokes the
servlet service() method, passing the request and response objects. Once the init method returns the
servlet is said to be placed into service. The process of using init to initialize servlets means that it is
possible to change configuration details by modifying the deployment descriptor without having
them hard coded in with your Java source and needing a re-compilation.
void init(ServletConfig sc)
Calling the service method
The service() method gets information about the request from the request object, processes
the request, and uses methods of the response object to create the client response. The service
method can invoke other methods to process the request, such as doGet(), doPost(), or methods you
write. The service method is called for each request processed and is not normally overridden by the
programmer.
The code that makes a servlet go is the. servlet
void service(ServletRequest req,ServletResponse res)
The destroy Method
Two typical reasons for the destroy method being called are if the container is shutting down
or if the container is low on resources. This can happen when the container keeps a pool of instances
of servlets to ensure adequate performance. If no requests have come in for a particular servlet for a
while it may destroy it to ensure resources are available for the servlets that are being requested. The
destroy method is called only once, before a servlet is unloaded and thus you cannot be certain when
and if it is called.
void destroy()
ServletConfig
Class
ServletConfig object is used by the Servlet Container to pass information to the Servlet during
it's initialization. Servlet can obtain information regarding initialization parameters and their values
using different methods of ServletConfig class initialization parameters are name/value pairs used to
provide basic information to the Servlet during it's initialization like JDBC driver name, path to
database, username, password etc.
Methods of ServletConfig class
Following are the four methods of this class :
getInitParameter(String paramName) Returns value of the given parameter. If value of

parameter could not be found in web.xml file then a null value is returned.
getInitParameterNames() Returns an Enumeration object containing all the names of

initialization parameters provided for this Servlet.
getServletContext() Returns reference to the ServletContext object for this Servlet. It is

similar to getServletContext() method provided by HttpServlet class.
85


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
getServletName() Returns name of the Servlet as provided in the web.xml file or if none is
provided then returns complete class path to the Servlet.
PROGRAM:
cologin.html:
<html>
<head>
<title> login Page </title>
<p style= "background:yellow; top:100px; left:250px; position:absolute; ">
</head>
<body>
<form ACTION="clogin">
<label> Login </label>
<input type="text" name="usr" size="20"> <br> <br>
<label> Password </label>
<input type="password" name="pwd" size="20"> <br> <br>
<input type="submit" value="submit">
</form>
</body>
</html>
cologin1.html
<html>
<head>
<title> login Page </title>
<p style= "background:yellow; top:100px; left:250px; position:absolute; ">
</head>
<body>
<form ACTION="clogin1">
<label> Login </label>
<input type="text" name="usr" size="20"> <br> <br>
<label> Password </label>
<input type="password" name="pwd" size="20"> <br> <br>
</form>
</body>
</html>
Addcook.java:
import javax.servlet.* ;
import javax.servlet.http.*;
import java.io.*;
86


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
public class Addcook extends HttpServlet
{
String user,pas;
public void service(HttpServletRequest req,HttpServletResponse res) throws
ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
Cookie c1=new Cookie("usr1","suni");
Cookie p1=new Cookie("pwd1","ani");
Cookie c2=new Cookie("usr2","abc");
Cookie p2=new Cookie("pwd2","123");
Cookie c3=new Cookie("usr3","def");
Cookie c4=new Cookie("usr4","mno");
res.addCookie(c1);
res.addCookie(p1);
res.addCookie(c2);
res.addCookie(p2);
res.addCookie(c3);
res.addCookie(p3);
res.addCookie(c4);
res.addCookie(p4);
out.println("COOKIE ADDED");
}
}
Clogin.java:
import javax.servlet.* ;
import java.io.*;
public class Clogin extends HttpServlet
{
String user,pas;
{
user=req.getParameter("usr");
pas=req.getParameter("pwd");
Cookie[] c=req.getCookies();
for(int i=0;i<c.length;i++)
{
87


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
if((c[i].getName().equals("usr1")&&c[i+1].getName().equals("pwd1"))||
c[i].getName().equals("usr2") &&c[i+1].getName().equals("pwd2"))||
(c[i].getName().equals("usr3")&& c[i+1].getName().equals("pwd3"))||
(c[i].getName().equals("usr4")&& c[i+1].getName().equals("pwd4") ))
{
if((user.equals(c[i].getValue()) && pas.equals(c[i+1].getValue())) )
{
//RequestDispatcher rd=req.getRequestDispatcher("/cart.html");
rd.forward(req,res);
}
else
{
out.println("YOU ARE NOT AUTHORISED USER ");
//res.sendRedirect("/cookdemo/cologin.html");
}
}
}
}
}
Web.xml:
<web-app>
<servlet>
<servlet-name>him</servlet-name>
<servlet-class>Clogin</servlet-class>
</servlet>
<servlet>
<servlet-name>him1</servlet-name>
<servlet-class>Addcook</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>him</servlet-name>
<url-pattern>/clogin</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>him1</servlet-name>
<url-pattern>/clogin1</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:
88


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
89


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
values (user id and passwords) available in the cookies.
If he is a valid user (i.e., user-name and password match) you should welcome him by name (username) else you should display You are not an authenticated user .
Use init-parameters to do this. Store the user-names and passwords in the webinf.xml and access
them in the servlet by using the getInitParameters() method.
home.html:
<html>
<head>
<title>Authentication</title>
</head>
<body>
<form action="ex1">
<label>Username </label>
<input type="text"size="20" name="user"><br><br>
password<input type="text" size="20" name="pwd"><br><br>
</form>
</body>
</html>
Example1.java
import javax.servlet.*;
import java.io.*;
public class Example1 extends GenericServlet
{
private String user1,pwd1,user2,pwd2,user3,pwd3,user4,pwd4,user5,pwd5;
public void init(ServletConfig sc)
90


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
{
user1=sc.getInitParameter("username1");
pwd1=sc.getInitParameter("password1");
}
Public void service(ServletRequest req,ServletResponse res)throws ServletException,IOException
{
user5=req.getParameter("user");
pwd5=req.getParameter("pwd");
if((user5.equals(user1)&&pwd5.equals(pwd1))||(user5.equals(user2)&&pwd5.equals(pwd2))||
(user5.equals(user3)&&pwd5.equals(pwd3))||(user5.equals(user4)&&pwd5.equals(pwd4)))
out.println("<p> welcome to"+user5.toUpperCase());
else
out.println("You are not authorized user");
}
}
web.xml:
<web-app>
<servlet>
<servlet-name>Example</servlet-name>
<servlet-class>Example1</servlet-class>
<init-param>
<param-name>username1</param-name>
<param-value>pvpsit</param-value>
</init-param>
<init-param>
<param-name>password1</param-name>
<param-value>cse</param-value>
</init-param>
<init-param>
<param-value>1234</param-value>
</init-param>
<init-param>
91


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<param-value>4567</param-value>
</init-param>
<init-param>
<param-value>cse</param-value>
</init-param>
<init-param>
<param-value>pvpsit</param-value>
</init-param>
<init-param>
<param-value>wt</param-value>
</init-param>
<init-param>
<param-value>lab</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Example</servlet-name>
<url-pattern>/ex1</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:
RESULT:
Thus the user authentication is carried out for four users by using both cookies and
getInitParameters successfully.
92


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Week-9: Install a database (Mysql or Oracle). Create a table which should contain at least the
following fields: name, password, email-id, phone number (these should hold the data from the
registration form). Practice 'JDBC' connectivity. Write a java program/servlet/JSP to connect to that
database and extract data from the tables and display them. Experiment with various SQL queries.
Insert the details of the users who register with the web site, whenever a new user clicks the submit
button in the registration page (week2).
java program/servlet/JSP to connect to that database and extract data
AIM: Install a database (Mysql or Oracle).
Create a table which should contain at least the following fields: name, password, email-id,
phone number (these should hold the data from the registration form).
Practice 'JDBC' connectivity.
Write a java program/servlet/JSP to connect to that database and extract data from the tables and
display them. Experiment with various SQL queries.
Insert the details of the users who register with the web site, whenever a new user clicks the submit
button in the registration page (week2).
DESCRIPTION:
JDBC Driver Types
There are four types of JDBC drivers in use:
Type 1: JDBC-ODBC Bridge
A Type 1 JDBC-ODBC Bridge provides application developers with a way to access JDBC
drivers via the JDBC API. Type 1 JDBC drivers translate the JDBC calls into ODBC calls and then
send the calls to the ODBC driver. Type 1 JDBC drivers are generally used when the database client
libraries need to be loaded on every client machine.
Type 2: Native API/Partly Java Driver
A Type 2 Native API/Partly Java Driver is a partial Java driver because it converts JDBC
calls into database specific calls. Type 2 Native API/Partly Java Driver communicates directly with
the database server.
Type 3: Pure Java Driver
A Type 3 Pure Java Driver works in a three tiered architecture. The JDBC calls are passed via
the network to the middle tier server. This server translates the calls to the database specific native
interface to further request the server. JDBC drivers available from Simba are Type 3 drivers.
Type 4: Native Protocol Java Driver
The type 4 driver is written completely in Java and is hence platform independent. It is
installed inside the Java Virtual Machine of the client. It provides better performance over the type 1
and 2 drivers as it does not have the overhead of conversion of calls into ODBC or database API
calls. Unlike the type 3 drivers, it does not need associated software to work.A Type 4 Native
Protocol Java Driver converts JDBC calls into the database specific calls so that the client
applications can communicate directly with the server.
93


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
PROGRAM:
Registration.html:
<html>
<head>
<title>Registration page</title>
</head>
<body bgcolor="#00FFFf">
<form METHOD="POST" ACTION="register">
<CENTER>
<table>
<center>
<tr> <td> Username </td>
<td><input type="text" name="usr"> </td> </tr>
<tr><td> Password </td>
<td><input type="password" name="pwd"> </td> </tr>
<tr><td>Age</td>
<td><input type="text" name="age"> </td> </tr>
<tr> <td>Address</td>
<td> <input type="text" name="add"> </td> </tr>
<tr> <td>email</td>
<td> <input type="text" name="mail"> </td> </tr>
<tr> <td>Phone</td>
<td> <input type="text" name="phone"> </td> </tr>
<tr> <td colspan=2 align=center> <input type="submit" value="submit"> </td> </tr>
</center>
</table>
</form>
</body>
Login.html
<html>
<head>
<title>Registration page</title>
</head>
<body bgcolor=pink> <center> <table>
<form METHOD="POST" ACTION="authent">
<tr> <td> Username </td>
<td><input type="text" name="usr"></td> </tr>
<tr> <td> Password </td>
<td> <input type="password" name="pwd"> </td> </tr>
<tr> <td align=center colspan="2"><input type="submit" value="submit"></td> </tr>
</table> </center>
</form>
</body>
94


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</html>
Ini.java:
import java.sql.*;
import java.io.*;
public class Ini extends GenericServlet
{
private String user1,pwd1,email1;
public void service(ServletRequest req,ServletResponse res) throws ServletException,IOException
{
user1=req.getParameter("user");
pwd1=req.getParameter("pwd");
email1=req.getParameter("email");
try
{
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@195.100.101.158:1521:cclab","scott","tiger")
;
PreparedStatement st=con.prepareStatement("insert into personal values(?,?,?,?,?,?)");
st.setString(1,user1);
st.setString(2,pwd1);
st.setString(3,"25");
st.setString(4,"hyd");
st.setString(5,email1);
st.setString(6,"21234");
st.executeUpdate();
con.close();
}
catch(SQLException s)
{ out.println("not found "+s);
}
catch(ClassNotFoundException c)
{
out.println("not found "+c);
}
}}
web.xml:
<web-app>
<servlet>
95


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<servlet-name>init1</servlet-name>
<servlet-class>Ini</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>init1</servlet-name>
<url-pattern>/regis</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:
96


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
97


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
98


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
RESULT:
Thus a table is created and the details are entered into the table using jdbc from the
registration form successfully.
-----------------
99


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Week-10: Write a JSP which does the following job: Insert the details of the 3 or 4 users who
register with the web site (week9) by using registration form. Authenticate the user when he submits
the login form using the user name and password from the database (similar to week8 instead of
cookies).
AIM: Write a JSP which does the following job
Insert the details of the 3 or 4 users who register with the web site (week9) by using registration
form. Authenticate the user when he submits the login form using the user name and password
from the database (similar to week8 instead of cookies).
DESCRIPTION:
JSP Scripting Elements
JSP scripting elements let you insert Java code into the servlet that will be generated from the
current JSP page. There are three forms:
1. Expressions of the form <%= expression %> that are evaluated and inserted into the output,
2. Scriptlets of the form <% code %> that are inserted into the servlet's service method, and
3. Declarations of the form <%! code %> that are inserted into the body of the servlet class,
outside of any existing methods.
Each of these is described in more detail below.
JSP Expressions
A JSP expression is used to insert Java values directly into the output. It has the following
form:
<%= Java Expression %>
The Java expression is evaluated, converted to a string, and inserted in the page. This evaluation is
performed at run-time (when the page is requested), and thus has full access to information about the
request. For example, the following shows the date/time that the page was requested:
Current time: <%= new java.util.Date() %>
To simplify these expressions, there are a number of predefined variables that you can use. These
implicit objects are discussed in more detail later, but for the purpose of expressions, the most
important ones are:
request,
the HttpServletRequest;
response,
the HttpServletResponse;
100


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
session, the HttpSession associated with the request (if any); and
out,
the PrintWriter (a buffered version of type JspWriter) used to send output to the
client.
JSP Scriptlets
If you want to do something more complex than insert a simple expression, JSP scriptletslet
you insert arbitrary code into the servlet method that will be built to generate the page. Scriptlets
have the following form:
<% Java Code %>
Scriptlets have access to the same automatically defined variables as expressions. So, for
example, if you want output to appear in the resultant page, you would use the out variable.
<%
String queryData = request.getQueryString();
out.println("Attached GET data: " + queryData);
%>
Note that code inside a scriptlet gets inserted exactly as written, and any static HTML
(template text) before or after a scriptlet gets converted to print statements. This means that scriptlets
need not contain complete Java statements, and blocks left open can affect the static HTML outside
of the scriptlets.
JSP Declarations
A JSP declaration lets you define methods or fields that get inserted into the main body of the
servlet class (outside of the service method processing the request). It has the following form:
<%! Java Code %>
Since declarations do not generate any output, they are normally used in conjunction with
JSP expressions or scriptlets. For example, here is a JSP fragment that prints out the number of times
the current page has been requested since the server booted (or the servlet class was changed and
reloaded):
<%! private int accessCount = 0; %>
PROGRAM:
Login.html:

<html> <body>
<center><h1>XYZ Company Ltd.</h1></center>
<table border="1" width="100%" height="100%">
<tr>
101


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<td valign="top" align="center"><br/>
<form action="auth.jsp"><table>
<tr>
<td colspan="2" align="center"><b>Login Page</b></td>
</tr>
<tr>
<td colspan="2" align="center"><b> </td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="LogIN"/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
Auth.jsp:
<%@page import="java.sql.*;"%>
<html>
<head>
<title>
This is simple data base example in JSP</title>
</title>
</head>
<body bgcolor="yellow">
102


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
<%!String uname,pwd;%>
<%
uname=request.getParameter("user");
pwd=request.getParameter("pwd");
try
{
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@195.100.101.158:1521:CCLAB","scott","tige
r");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select name,password from personal where name='"+uname+"' and
password='"+pwd+"'");
if(rs.next())
{
out.println("Authorized person");
}
else
{
out.println("UnAuthorized person");
}
con.close();
}
catch(Exception e){out.println(""+e);}
%>
</body>
</html>
OUTPUT:
103


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
104


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
RESULT:
The user is authenticated when he submits the login form using the user name and password
from the database.
---
Week-11: Create tables in the database which contain the details of items (books in our case like
Book name, Price, Quantity, Amount)) of each category. Modify your catalogue page (week 2) in
such a way that you should connect to the database and extract data from the tables and display them
in the catalogue page using JDBC.
Extract data from the tables,display them in the catalogue page using JDBC
AIM: Extract data from the tables and display them in the catalogue page using JDBC.
DESCRIPTION:
Create tables in the database which contain the details of items (books in our case like Book
name, Price, Quantity, Amount)) of each category. Modify your catalogue page (week 2) in such a
way that you should connect to the database and extract data from the tables and display them in the
catalogue page using JDBC.
105


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
PROGRAM:
Retrieve.java:
import java.sql.*;
import java.io.*;
import java.util.*;
public class Retrieve extends HttpServlet
{
{
try{
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@195.100.101.158:1521:cclab","scott","tiger")
;
Statement s=con.createStatement();
ResultSet r=s.executeQuery("select * from cart");
out.println("<center> <table border=1>");
out.println("<thead> <th> Book name </th> <th> Price </th> <th> Quantity </th> <th> Amount
</th> </thead>");
while(r.next())
{
out.println("<tr> <td> "+r.getString(1)+"</td> ");
out.println("<td> "+r.getString(2)+"</td> ");
out.println("<td> "+r.getInt(3)+"</td> ");
out.println("<td> "+r.getString(4)+"</td> </tr>");
}
out.println("</table></center>");
con.close();
}
catch(SQLException sq)
{
out.println("sql exception"+sq);
}
catch(ClassNotFoundException cl)
{
out.println("class not found"+cl);
}
}
}
106


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
web.xml:
<web-app>
<servlet>
<servlet-name>set</servlet-name>
<servlet-class>Cartenter</servlet-class>
</servlet>
<servlet>
<servlet-name>display</servlet-name>
<servlet-class>Retrieve</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>set</servlet-name>
<url-pattern>/enterdata</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>display</servlet-name>
<url-pattern>/display1</url-pattern>
</servlet-mapping>
</web-app>
CREATE THE TABLE AND INSERT VALUES INTO THE TABLE:
107


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
OUTPUT:
RESULT:
The data is extracted from the tables and displayed in the catalogue page using JDBC
Week-12: HTTP is a stateless protocol. Session is required to maintain the state. The user may add
some items to cart from the catalog page. He can check the cart page for the selected items. He may
visit the catalogue again and select some more items. Here our interest is the selected items should be
added to the old cart rather than a new cart. Multiple users can do the same thing at a time(i.e., from
different systems in the LAN using the ip-address instead of localhost). This can be achieved through
the use of sessions. Every user will have his own session which will be created after his successful
login to the website. When the user logs out his session should get invalidated (by using the method
session. Invalidate ( ). Modify your catalogue and cart JSP pages to achieve the above mentioned
functionality using sessions
108


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
Week-12: HTTP is a stateless protocol. Session is required to maintain the state. The user may add
some items to cart from the catalog page. He can check the cart pagfor the selected items. He may
visit the catalogue again and select some more items. Here our interest is the selected items should be
added to the old cart rather than a new cart. Multiple users can do the same thing at a time(i.e., from
different systems in the LAN using the ip-address instead of localhost). This can be achieved through
the use of sessions. Every user will have his own session which will be created after his successful
login to the website. When the user logs out his session should get invalidated (by using the method
session. Invalidate ( ). Modify your catalogue and cart JSP pages to achieve the above mentioned
functionality using sessions.
:HTTP protocol and session management
AIM: Modify cart JSPpage to achieve the dynamism with the HTTP protocol and
session management
DESCRIPTION:
HTTP is a stateless protocol. Session is required to maintain the state.
Methods of session Object:
There are numerous methods available for session Object. Some are:
getAttribute(String name)
getAttributeNames
isNew()
getCreationTime
getId
invalidate()
getLastAccessedTime
getMaxInactiveInterval
109


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
removeAttribute(String name)
setAttribute(String, object)
The <jsp:include> element allows you to include either static and dynamic files in a JSP file.
Program :
Cart .java
import java.util.*;
import java.io.*;
public class Cart extends HttpServlet
{
public void init(ServletConfig config) throws ServletException
{
super.init(config);
}
IOException,ServletException
{
PrintWriter pw=res.getWriter();
HttpSession hs=req.getSession();
ArrayList cart=(ArrayList)hs.getAttribute("cart");
if(cart==null)
{
pw.println("No items in your cart");
cart=new ArrayList();
hs.setAttribute("cart",cart);
}
String itemselected[];
String item;
itemselected=req.getParameterValues("book");
if(itemselected!=null)
{
for(int i=0;i<itemselected.length;i++)
{
item=itemselected[i];
cart.add(item);
}}
110


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
pw.println("Items in the cart<br>");
Iterator it=cart.iterator();
while(it.hasNext())
{
pw.println("<br><b>"+it.next()+"</b>");
}
}
}
Catalogue.java
import java.util.*;
import java.io.*;
public class Catalogue extends HttpServlet
{
int itemcount=0;
public void init(ServletConfig config) throws ServletException
{
super.init(config);
}
IOException,ServletException
{
PrintWriter pw=res.getWriter();
HttpSession hs=req.getSession();
ArrayList cart=(ArrayList)hs.getAttribute("cart");
if(cart!=null)
{
itemcount=cart.size();
}
pw.println("You have"+itemcount+"items in cart");
pw.println("<body><center><fieldset><legend>Catalogue</legend><form action='cart'
method='get'><input type='checkbox' value='Java2' name='book'>java2</input><br>");
pw.println("<input type='checkbox' name='book' value='web programming'>Web
programming</input><br>");
111


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
pw.println("<input type='checkbox' name='book' value='Java2 Complete Reference'>Java2
Complete Reference</input><br>");
pw.println("<input type='checkbox' name='book' value='Internet & World wide web'>Internet
& World wide web</input><br>");
pw.println("<input type='checkbox' name='book' value='Core servlets &JSP'>Core servlets
&JSP</input><br>");
pw.println("<input type='checkbox' name='book' value='J2EE 3rd edition'>J2EE 3rd
edition</input><br>");
pw.println("<input type='checkbox' name='book' value='Electronic Devices and
circuits'>Electronic Devices and circuits</input><br>");
pw.println("<input type='checkbox' name='book' value='Software Engineering'>Software
Engineering</input><br>");
pw.println("<input type='checkbox' name='book' value='software project
management'>software project management</input><br>");
pw.println("<input type='checkbox' name='book' value='Computer networks'>Computer
networks</input><br>");
pw.println("</fieldset></center>");
pw.println("<input type='submit' value='submit'>");
}
}
<web-app>
<servlet>
<servlet-name>Login</servlet-name>
<servlet-class>Login</servlet-class>
<init-param>
<param-name>username</param-name>
<param-value>syam</param-value>
</init-param>
<init-param>
<param-name>password</param-name>
<param-value>syam</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/login.do</url-pattern>
112


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
</servlet-mapping>
<servlet>
<servlet-name>cat</servlet-name>
<servlet-class>Catalogue</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>cat</servlet-name>
<url-pattern>/Cat</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>cart</servlet-name>
<servlet-class>Cart</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>cart</servlet-name>
<url-pattern>/cart</url-pattern>
</servlet-mapping>
</web-app>
113


WEB TECHNOLOGES LAB
Roll no:..
Program/Exp.no:..
Sheet no.
Date
Name of the Program
114

WT Lab Record ALL EXPERIMENTS 1 To 13

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

WT Lab Record ALL EXPERIMENTS 1 To 13

Загружено:

Авторское право:

Доступные форматы

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

(Approved by AICTE and Affiliated to JNTUH)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

2) write a html program using header tags

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

3)Write a HTML program to embed an image into web content.

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

HYPER LINK Tag:

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

5.Write a HTML program to print the COURSES of MREC by using

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

9) Example 2 of forms border and attributes

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

10) Example of forms using tr,th, and td tags

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

12) Example of forms using cellspacing and cellpading

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

13) Example of forms using thred data alignment.

14)Example of forms using colspan

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

15) Example of forms using rowspan

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering

MALLA REDDY ENGINEERING COLLEGE (Autonomous)

Maisammaguda,(Post Via Kompally), Secunderabad 500 100.

Department of Computer Science & Engineering