week 1 - amazon s3 · 2015-01-02 · the static home page must contain three frames. top frame :...

1

WEEK 1:

AIM:

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 “IT” the catalogue for IT 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.

home.html:

<html>

<frameset rows="15%,9%,76%" bordercolor="pink">

<frameset cols="20%,80%" bordercolor="red">

<frame src="logo.html" scrolling="no">

<frame src="title.html" >

</frameset>

<frame src="menu.html" name="f2" scrolling="no">

<frameset cols="15%,85%" bordercolor="red">

<frame src=" branches.html" name="f31">

<frame src="homedes.html" name="f32">

</frameset> </frameset> </html>

2

Output: home page

3

logo.html

<html>

<body>

<img src=" C:\Documents and Settings\satish\Desktop\monday2\monday\Sunset.jpg" >

</body>

</html>

title.html

<html>

<body>

<center<i> ONLINE BOOK SHOP </i> </font></center>

</body>

</html>

branches.html

<html>

<table cellspacing=15>

<tr><td> <a href="csechecktest.html" target="f32">CSE </a></td></tr>

<tr><td><a href="ecechecktest.html" target="f32"> ECE </a> </td></tr>

<tr><td><a href="eeechecktest.html" target="f32">EEE </a></td></tr>

<tr><td><a href="civilchecktest.html" target="f32"> Civil </a> </td></tr>

</table>

</body>

</html>

4

Output: left frame

5

menu.html

<html>

<body>

<table width="100%">

<tr>

<td> <a href="homedes.html" target="f32">Home </a></td>

<td> <a href="login.html" target="f32">Login </a></td>

<td> <a href="registration.html" target="f32">Registration</a></td>

<td> <a href="catalogue.html" target="f32">Catalogue </a></td>

<td> <a href="cart.html" target="f32">Cart </a></td>

</tr>

</table>

</body>

</html>

homedes.html

<html>

<body>

<center> <u> ONLINE BOOK SHOP </u></center>

<p>This website contains various books. </body></html>

6

Output: top frame

7

login.html

<html>

<head> <title> Login Page </title>

</head>

<body>

<form name="login">

<h3> <u> Login Page </u> </h3>

username: <input type="text" name="uname" ><br>

password: <input type="password" name="pwd" ><br>

<input type="submit" value="Submit" >

<input type="reset" value="reset">

</center> </form>

</body></html>

8

Output: login page(we will get this output when you click on login in home page)

9

catalogue.html

<HTML>

<HEAD>

<TITLE> lOADING xml dOCUMENT </TITLE>

<SCRIPT LANGUAGE="JavaScript">

function fun()

{

window.alert("You have selected the book");

}

</SCRIPT>

</HEAD>

<BODY>


var xmldoc;

xmldoc = new ActiveXObject("Microsoft.XMLDOM");

xmldoc.load("book.xml");

arr=xmldoc.getElementsByTagName("ITEM");

for(i=0;i<arr.length;i++)

{

document.write("<div align='left'><img src='Sunset.jpg' width='50' height='50'>

</div>");

document.write("<div

align='center'><b>NAME:</b>"+xmldoc.getElementsByTagName("NAME")[i].childNodes[0].nodeValu

e+"<BR></div>");


align='center'><b>AUTHOR:</b>"+xmldoc.getElementsByTagName("AUTHOR")[i].childNodes[0].nod

eValue+"<BR></div>");

10


align='center'><b>PRICE:</b>"+xmldoc.getElementsByTagName("PRICE")[i].childNodes[0].nodeValu

e+"<BR></div>");


align='center'><b>PUBLISHER:</b>"+xmldoc.getElementsByTagName("PUBLISHER")[i].childNodes[

0].nodeValue+"<BR></div>");


align='center'><b>ISBN:</b>"+xmldoc.getElementsByTagName("ISBN")[i].childNodes[0].nodeValue+"

<BR></div>");

document.write("<div align='right'><input type='button' value='Add To Cart'

onclick='fun()'</div>");

document.write("<BR>");

}

</SCRIPT>

</BODY></HTML>

book.xml

<?xml version="1.0"?>

<BOOK>

<ITEM>

<NAME> JAVA </NAME>

<AUTHOR> SCHIELD </AUTHOR>

<PRICE> 500 </PRICE>

<PUBLISHER> TATA </PUBLISHER>

<ISBN> 12345 </ISBN>

</ITEM>

<ITEM>

<NAME> C++ </NAME>

<AUTHOR> HERBERT </AUTHOR>

11

<PRICE> 499.99 </PRICE>



</ITEM>

<ITEM>

<NAME> DigitalElectronics </NAME>





</ITEM>

<ITEM>

<NAME> opticalCommunication </NAME>





</ITEM>

<ITEM>

<NAME> Electric Theory1 </NAME>





</ITEM>

<ITEM>

12

<NAME> Electric Theory2 </NAME>





</ITEM>

<ITEM>

<NAME> CIVIL THEORY1 </NAME>





</ITEM>

<ITEM>

<NAME> CIVIL THEORY2 </NAME>





</ITEM>

</BOOK>

13

Output: Catalogue page

14

csechecktest.html

<HTML>

<HEAD>



function fun()

{


}

</SCRIPT>

</HEAD>

<BODY>


var xmldoc;


xmldoc.load("csebook.xml");



{


</div>");



e+"<BR></div>");




15



e+"<BR></div>");






<BR></div>");

document.write("<div align='right'><input type='button' value='Add To Cart' onclick='fun()'</div>");

document.write("<BR>");

}

</SCRIPT></BODY></HTML>

casebook.xml


<CSEBOOK>

<ITEM>

<NAME> JAVA </NAME>





</ITEM>

<ITEM>

<NAME> C++ </NAME>



<PUBLISHER> TATA </PUBLISHER><ISBN> 12346 </ISBN></ITEM></CSEBOOK>

16

Output: right frame(we will get this output when we click on cse which was in left frame)

17

ecechecktest.html

<HTML>

<HEAD>



function fun()

{


}

</SCRIPT>

</HEAD>

<BODY>


var xmldoc;


xmldoc.load("ecebook.xml");



{


</div>");



e+"<BR></div>");




18



e+"<BR></div>");






<BR></div>");

document.write("<div align='right'><input type='button' value='Add To Cart'

onclick='fun()'</div>"); document.write("<BR>");

}

</SCRIPT> </BODY> </HTML>

ecebook.xml


<ECEBOOK>

<ITEM>

<NAME> DigitalElectronics </NAME>





</ITEM>

<ITEM>

<NAME> opticalCommunication </NAME>



<PUBLISHER> TATA </PUBLISHER> <ISBN> 12346 </ISBN></ITEM>

19

</ECEBOOK>

WEEK2:

AIM: Creating the cart page and registration pages.

<!—Program for creating a CART page contains the details about the books which are added to

the cart.The cart page contains the fields: Book, name, Price, Quantity and Amount

cart.html

<html>

<body >

<table cellspacing="50" cellpadding="20">

<tr>

<td>Book name</td>

<td>price</td>

<td>quantity</td>

<td>amount</td>

</tr>

<tr>

<td>java2</td>

<td>$35.5</td>

<td>2</td>

<td>$70</td>

</tr>

<tr>

<td>XML bible</td>

<td>$40.5</td>

<td>1</td>

20

<td>$40.5</td>

</tr> <tr>

<td></td>

<td></td>

<td>Total amount </td>

<td>130.5 </td>

</tr>

</body>

</html>

21

Output:

22

WEEK 3:

AIM: 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

[email protected])

4. Phone number (Phone number should contain 10 digits only).

Note: You can also validate the login page with these parameters.

<!—Program for validating the username (Name should contains alphabets and the length

should not be less than 6 characters).

1)NAME VALIDATION

<html>

<head>

<title>validating a textbox</title>

<script language="javascript">

function button_click()

{

var fname=f.fname.value;

var spchar = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?~";

var number="0123456789";

if(fname.length<6)

{

mailto:[email protected]

23

alert("first name atleast 6 characters");

}

if(fname!="")

{

for (var i=0;i<fname.length;i++)

{

if(spchar.indexOf(fname.charAt(i)) != -1)

{

alert ("Userid should not have special characters");

f.fname.value=" ";

return false;

}

}

}

if(fname!="")

{

for (var i=0;i<fname.length;i++)

{

if(number.indexOf(fname.charAt(i)) != -1)

{

alert ("Userid should not have numbers");

f.fname.value="";

return false;

}

}

if(fname.length>=6)

24

alert("valid username");

}

}

</script>

<body>

<center>

<form name="f">

<table>

<h2 align="center">USER NAME VALIDATION</h2>

<tr>

<td align="right">USERNAME:</td>

<td><input type="text" name="fname" maxlength=20 size=30></td>

</tr>

<br>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="button_click()"></td></tr>

</form>

</table>

</center>

</body>

</html>

25

OUTPUT:

27

2) 

<html>

<head>

<title>PASSWORD VALIDATION</title>


function pass()

{

var pw=f.pw.value;

var cpw=f.cpw.value;

if(pw.length<6)

{

alert("PASSWORD MUST BE 6 CHARACTERS");

}

if(pw!=cpw)

{

alert("PASSWORD DON'T MATCH");

}

else if(pw.length>=6)

alert("PASSWORD VALIDATION SUCCESS");

}

</script>

</head>

28

<body>

<form name="f">

<table align="center">

<h2 align="center">PASSWORD VALIDATION</h2>

<br>

<tr>

<td align="right">PassWord:</td>

<td align="left"><input type="PassWord" maxlength="10" size="30"name="pw"></td>

</tr>

<tr>

<td align="right">Confirm PassWord:</td>

<td align="left"><input type="PassWord" maxlength="10" size="30"name="cpw"></td>

</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="pass()"/></td>

</tr>

</table> </form> </body> </html>

29

Output:

30

3) <!—Program for E-mail id validation(should not contain any invalid and must follow the

standard pattern-)(emailvalid.html)-->

<html>

<head>

<title>EMAIL ID VALIDATION</title>


function check()

{

if(f.txtname.value.indexOf('@')==-1)

{

alert("invalid");

}

else

if((f.txtname.value.indexOf('@')==0)||(f.txtname.value.indexOf('.')==0)||(f.txtname.value.indexOf('@'))>

(f.txtname.value.indexOf('.')))

{

alert("invalid email id");

f.txtname.value="";

}

else

alert("valid email id");

}

</script>

</head>

<body>

<form name="f">

31


<h2 align="center">EMAIL VALIDATION</h2>

<br>

<tr>

<td align="right">Email-ID:</td>

<td align="left"><input type="text" name="txtname" size=40>

</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="check()"/></td>

</tr>

</table>

</form>

</body>

</html>

32

Output:

33

4) <!—Program for Phone number validation(Phone number should contain 10 digits

only)(phnvalid.html)-->

<html>

<head>

<title>PHONE NUMBER VALIDATION</title>


function phno()

{

var ph=f.ph.value;

if(ph.length==10)

{

if(isNaN(ph))

alert("It is not a valid Phone number");

else

alert("It is a valid Phone number");

}

else

alert("Please enter a valid phone number");

}

</script>

</head>

<body>

<form name="f">


<br><br><br><br>

<h2 align="center">PHONE NUMBER VALIDATION</h2>

34

<br>

<tr>

<td align="right">PHONE NO:</td>

<td align="left"><input type="text" maxlength="15" size="30"name="ph"></td>

</tr>

<tr>

<td></td>

<td><input type="button" value="SUBMIT" onClick="phno()"/></td>

</tr>

</table> </form> </body> </html>

35

Output:

36

WEEK-4:

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 (font, color etc.).

Then, in the body of your pages, you refer to these selectors to activate the styles.

<!—Program for creating inline style sheets

1) Inline.html

<head>

<title>inline style sheet</title>

</head>

<body>

normal bold:<b>web technologies</b><br>

after applying inline style

<b style="color:red;font-size:22px;font-family:arial;text-decoration:underline">Web technologies</b>

</body>

</html>

37

Output:

38

2. Set a background image for both the page and single elements on the page.

<!—Program for creating the background image(image.html)-->

<html>

<head>

<style type="text/css">

body

{

background-image: url(“C:\Documents and Settings\All Users\Documents\My Pictures\Sample

Pictures\Sunset.jpg");

background-repeat:no-repeat

}

</style>

</head>

<body>

<center>

<font color=fuchsia>

<h1>WebTechnologies</h1>

</center>

</body>

</html>

39

Output:

40

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 for image repetition

<html>

<head>


body{

background-image:url("C:\Documents and Settings\All Users\Documents\My Pictures\Sample

Pictures\Winter.jpg");

background-repeat:repeat

}

</style>

</head>

<body>

<center>

<font color=fuchsia>

<h1>satish</h1>

</font>

</center>

</body>

</html>

41

Output:

42

4. Define styles for links as A:link

A:visited

A:active

A:hover

<!—Defining styles using CSS(external.html)-->

<html>

<head>

<title>external style sheet</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body bgcolor="black">

<font color=white >normal bold : <b>Web technologies</b><br>after applied embedded style :

<b class="headline">Web Technologies</b><br>

<b>

<a href="login.html" class="xlink">CROSS LINK</a>

<br>

<a href="login.html" class="hlink">HELP LINK</a><br><br>

<a href="login.html">another LINK</a>

</b>

</font>

</body>

</html>

43

style.css

b.headline {color:green; font-size:22px; font-family:arial; text-decoration:underline}

.xlink {cursor:crosshair;color:cyan}

.hlink{cursor:help;color:purple}

A:link {text-decoration:none;color:green} /* unvisited link */

A:visited {text-decoration: none;color:yellow} /* visited link */

A:active {text-decoration: none;color:blue} /* selected link */

A:hover {text-decoration: underline; color: red} /* mouse over link */

44

Output:

45

5. Work with layers:

<!—Creating layers using CSS(layer.html)>

<html>

<head>

<title>Layers Demo</title>

</head>

<body>

LAYER 1 ON TOP

<div style="position:relative;font-size:50px;z-index:2;">LAYER1</div>

<div style="position:relative;top:-50;left:5;color:red;font-size:80px;z-index:1;">LAYER2</div>

LAYER 2 ON TOP

<div style="position:relative;font-size:50px;z-index:3;">LAYER1</div>

46

<div style="position:relative;top:-50;left:5;color:red;font-size:80px;z-index:4;">LAYER2</div>

</body>

</html>

Output:

47

6. Add a customized cursor:

48

<!—Program for representing the various cursors

<html>

<head><title>Cursor demo</title>


.link1{cursor:default}

.link2{cursor:crosshair}

.link3{cursor:hand}

.link4{cursor:move}

.link5{cursor:text}

.link6{cursor:wait}

.link7{cursor:help}

.link8{cursor:n-resize}

.link9{cursor:s-resize}

.link10{cursor:e-resize}

.link11{cursor:w-resize}

.link12{cursor:progress}

.link13{cursor:not-allowed}

.link14{cursor:no-drop}

.link15{cursor:all-scroll}

</style></head>

<body>

<b>

<a href="login.html" class="link1">default cursor</a>

<br>

<a href="login.html" class="link2">crosshair cursor</a>

<br>

49

<a href="login.html" class="link3">hand cursor</a> <br>

<a href="login.html" class="link4">move cursor</a> <br>

<a href="login.html" class="link5">text cursor</a>

<br>

<a href="login.html" class="link6">wait cursor</a>

<br>

<a href="login.html" class="link7">help cursor</a>

<br>

<a href="login.html" class="link8">n-resize cursor</a>

<br>

<a href="login.html" class="link9">s-resize cursor</a>

<br>

<a href="login.html" class="link10">e-resize cursor</a>

<br>

<a href="login.html" class="link11">w-resize cursor</a>

<br>

<a href="login.html" class="link12">progress cursor</a>

<br>

<a href="login.html" class="link13">not allowed cursor</a>

<br>

<a href="login.html" class="link14">no-drop cursor</a>

<br>

<a href="login.html" class="link15">all-scroll cursor</a><br></b></body> </html>

50

Output:

WEEK-5:

51

AIM: 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.

<!—Program for creating DTD for the XML file(dtd.xml)-->

<?xml version="1.0" ?>

<?xml:stylesheet type="text/xsl" href="Style.xsl"?>

<!DOCTYPE BOOKS[

<!ELEMENT BOOKS (INFORMATION)>

<!ELEMENT INFORMATION (Book)>

<!ELEMENT Book (book_name,Author_name,ISBN_number,publisher,Edition,Price)>

<!ELEMENT book_name (#PCDATA)>

<!ELEMENT Author_name (#PCDATA)>

<!ELEMENT ISBN_number (#PCDATA)>

<!ELEMENT publisher (#PCDATA)>

52

<!ELEMENT Edition (#PCDATA)>

<!ELEMENT price (#PCDATA)>

]>

<BOOKS>

<INFORMATION>

<Book>

<book_name>XML BIBLE</book_name>

<Author_name>RAJA</Author_name>

<ISBN_number>11530-115</ISBN_number>

<publisher>Pearson</publisher>

<Edition>I-Edition</Edition>

<Price>750</Price>

</Book>

<Book>

<book_name>HTML</book_name>

<Author_name>DIETL</Author_name>


<publisher>wiley</publisher>

<Edition>III-Edition</Edition>

<Price>470</Price>

</Book>

<Book>

<book_name>JAVASCRIPT</book_name>

<Author_name>RANI</Author_name>


<publisher>Techical</publisher>

53

<Edition>IV-Edition</Edition>

<Price>270</Price>

</Book>

<Book>

<book_name>WEB TECHNOLOGIES</book_name>

<Author_name>PUNTAMBEKAR</Author_name>


<publisher>Technical</publisher>

<Edition>I-Edition</Edition>

<Price>340</Price>

</Book>

</INFORMATION>

</BOOKS>

Style.xsl

<?xml version="1.0" ?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h2 align="center">My BOOK Collection</h2>

<table border="1" align="center">

<tr bgcolor="GRAY">

<th><font color="white"> BOOK_NAME</font></th>

<th><font color="white"> Author</font></th>

<th><font color="white"> ISBN</font></th>

54

<th><font color="white"> Publisher</font></th>

<th><font color="white"> Edition</font></th>

<th><font color="white"> Price</font></th>

</tr>

<xsl:for-each select="BOOKS/INFORMATION/Book">

<tr>

<td><xsl:value-of select="book_name"/></td>

<td bgcolor="black"><b><font color="white">

<xsl:value-of select="Author_name"/></font></b></td>

<td><xsl:value-of select="ISBN_number"/></td>

<td><xsl:value-of select="publisher"/></td>

<td><xsl:value-of select="Edition"/></td>

<td><xsl:value-of select="Price"/></td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

55

Output:

WEEK-6:

56

VISUAL BEANS:

AIM: 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 “.

Procedure:

Developing a Simple Bean Using the BDK:

This section presents an example that shows how to develop a simple Bean and connect it to

other components via the BDK.Our new component is called the Colors Bean. It appears as

either a Circle or Square that is filled with a color. A color is chosen at random when the Bean

begins execution. A public method can be invoked to change it. Each time the mouse is clicked

on the Bean, another random color is chosen. There is one boolean read/write property

that determines the shape.The BDK is used to lay out an application with one instance of the

Colors

Create a New Bean

Here are the steps that you must follow to create a new Bean:

1. Create a directory for the new Bean.

2. Create the Java source file(s).

3. Compile the source file(s).

4. Create a manifest file.

5. Generate a JAR file.

6. Start the BDK.

7. Test.

57

The following sections discuss each of these steps in detail.

Create a Directory for the New Bean:

You need to make a directory for the Bean. To follow along with this example, create c:\week6

Then change to that directory.

58

OUTPUT:

Create the Source File for the Colors Bean:

59

The source code for the Colors component is shown in the following listing. It is

located in the file Colors.java.

The import statement at the beginning of the program is used to import the packages of io, awt,

beans. These are packages used to run the io applications, event handlers and beans .The color of

the component is determined by the private Color variable color, and its shape is determined by

the private boolean variable square.

The constructor defines an anonymous inner class that extends MouseAdapter and overrides its

mousePressed( ) method. The change( ) method is invoked in response to mouse presses. The

component is initialized to a square shape of 200 by 100 pixels.The change( ) method is invoked

to select a random color and repaint the component.The getsquare( ) and setSquare( ) methods

provide access to the one property of this Bean. The change( ) method calls randomColor( ) to

choose a color and then calls repaint( ) to make the change visible. Notice that the paint( )

method uses the square and color variables to determine how to present the Bean.

// A simple Color Bean (Colors.java)

Program:

import java.io.*;

import java.awt.*;

import java.awt.event.*;

import java.beans.*;

public class Colors extends Canvas

{

transient private Color color;

private boolean square;

public Colors()

{

addMouseListener(new MouseAdapter() {

public void mousePressed(MouseEvent me) {

change();

}

});

60

square = false;

setSize(200, 100);

change();

}

public boolean getsquare() {

return square;

}

public void setSquare(boolean flag) {

this.square = flag;

repaint();

}

public void change()

{

color = randomColor();

repaint();

}

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) ;

/*g.setColor(getForeground());*/

61

if(square) {

g.fillRect(40, 40, 80, 80);

}

else

{

g.fillOval(30, 30, 80, 80);

}

}

}

Compile the source code to create a class file. Type the following:

C:\week6>javac Colors.java on the command prompt

Create a Manifest File:

You must now create a manifest file. First, switch to the c:\week6 directory. This

is the directory in which the manifest files for the BDK demos are located. Put the

source code for your manifest file in the file colors.mft. It is shown here:

Name: Colors.class

Java-Bean: True

(Here one space must be required after Name: and Java-Bean: & after writing True

carriage return(press enter))

This file indicates that there is one .class file in the JAR file and that it is a Java Bean.

Notice that the Colors.class file is in the package c:/week6

Generate a JAR File:

Beans are included in the ToolBox window of the BDK only if they are in JAR files in the

directory c:\beans\jars. These files are generated with the jar utility. Enter the following:

C:\week6>jar cfm Colors.jar colors.mft *.class

This command creates the file Colors.jar and places it in the directory c:\beans\jars.

(You may wish to put this in a batch file for future use.)

Start the BDK:

Change to the directory c:\beans\beanbox and type run. This causes the BDK to start.

62

You should see four windows, titled ToolBox, BeanBox, Properties and Method Tracer. The

ToolBox window should include an entry labeled “Colors” for your new Bean.

Create an Instance of the Colors Bean

After you complete the preceding steps, create an instance of the Colors Bean in the BeanBox

window by dropping the Color bean into BeanBox. Test your new component by pressing the

mouse anywhere within circle or square shape. Its color immediately changes. Use the Properties

window to change the square property from false to true. Its shape immediately changes.

63

OUTPUT:

64

WEEK7:

Aim:

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.

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.

69

Week:8

***** Handling HTTP GET request:

ColorGetServlet.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class ColorGetServlet extends HttpServlet

{

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String color = request.getParameter("color");

response.setContentType("text/html");

PrintWriter pw = response.getWriter();

pw.println("<B>The selected color is: ");

pw.println(color);

pw.close();

}

}

ColorGet.htm

<html>

<body>

<center>

<form name="Form1" method=GET

action="http://localhost:8080/satish/shiva"> ( satish is folder name and shiva is url name)

70

<B>Color:</B>

<select name="color" size="1">

<option value="Red">Red</option>

<option value="Green">Green</option>

<option value="Blue">Blue</option>

</select>

<br><br>

<input type=submit value="Submit">

</form>

</body>

</html>

web.xml

<web-app>

<servlet>

<servlet-name>xyz</servlet-name>

<servlet-class>ColorGetServlet</servlet-class>

</servlet>

<servlet-mapping>


<url-pattern>/shiva</url-pattern>

</servlet-mapping>

</web-app>

71

Output:

72

***** Handling HTTP POST request

ColorPostServlet.java

import java.io.*;



public class ColorPostServlet extends HttpServlet

{

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String color = request.getParameter("color");


PrintWriter pw = response.getWriter();

pw.println("<B>The selected color is: ");

pw.println(color);

pw.close();

}

}

colorservlet.html

<html>

<body>

<center>

<form name="Form1"

73

method="post"

action="http://localhost:8080/satish2/myservlet">

<B>Color:</B>

<select name="color" size="1">

<option value="Red">Red</option>

<option value="Green">Green</option>

<option value="Blue">Blue</option>

</select>

<br><br>

<input type=submit value="Submit">

</form>

</body>

</html>

web.xml

<web-app>

<servlet>


<servlet-class>ColorPostServlet</servlet-class>

</servlet>

<servlet-mapping>


<url-pattern>/myservlet</url-pattern>

</servlet-mapping>

</web-app>

74

Output:

75

WEEK-9

Reading servlet parameters

LoginServlet.java

import java.io.*;



public class LoginServlet extends HttpServlet

{

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

{


PrintWriter out = response.getWriter();

String name = request.getParameter("username");

String pass = request.getParameter("password");

out.println("<html>");

out.println("<body>");

out.println("Thanks Mr." + " " + name + " "

+ "for visiting roseindia<br>" );

out.println("Now you can see your password : "

+ " " + pass + "<br>");

out.println("</body></html>");

}

}

76

htmlform.html

<html>

<head>

<title>New Page 1</title>

</head>

<body>

<h2>Login</h2>

<p>Please enter your username and password</p>

<form name="Form1"

method="get" action="http://localhost:8080/rp/Login">

<p> Username <input type="text" name="username" size="20"></p>

<p> Password <input type="text" name="password" size="20"></p>

<p><input type="submit" value="Submit" name="B1"></p>

</form>

<p> </p>

</body>

</html>

77

web.xml

<web-app>

<servlet>

<servlet-name>Hello</servlet-name>

<servlet-class>LoginServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>Hello</servlet-name>

<url-pattern>/Login</url-pattern>

</servlet-mapping>

</web-app>

78

Output: