Scribd
Upload
1K views58 pages

AJWT LAB MANUAL FOR 3-2 Students of IT & CSE

The document outlines the design of static web pages for an online bookstore website. It includes details on creating the homepage with three frames, a login page, catalog page, and cart page. Code snippets are provided to create the basic structure and navigation for each page using HTML and JavaScript for validation on the registration page. The goal is to design and validate the key pages needed for the bookstore website.

Uploaded by

Adusumalli Sairam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1K views58 pages

AJWT LAB MANUAL FOR 3-2 Students of IT & CSE

The document outlines the design of static web pages for an online bookstore website. It includes details on creating the homepage with three frames, a login page, catalog page, and cart page. Code snippets are provided to create the basic structure and navigation for each page using HTML and JavaScript for validation on the registration page. The goal is to design and validate the key pages needed for the bookstore website.

Uploaded by

Adusumalli Sairam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 58

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



SOURCE CODE:

Online.html:
<html>
<head><title>WEBSITE</title></head>
<frameset cols=15%,*>
<frameset rows=15%,15%,*>
<frame src="logo.html">
<frame src="Home.html">
<frame src="Branches.html">
</frameset>
<frameset rows=15%,15%,*>
<frame src="name.html">
<frameset cols=15%,15%,15%,*>
<frame src=login.html>
<frame src=Reg.html>
<frame src=Cata.html>
<frame src=cart.html>
</frameset>
<frame name="f1">
</frameset></frameset></html>
Top frame:
Logo.html
<html>
<head><title>LOGO</title></head>
<body>
<img src="C:\Users\Administrator\Desktop\QIS_ENG_LOGO.jpg"height="50"width="50">
</body></html>

Home.html
<html>
<head><title>HOME</title></head>
<body>
<a href=home2.html target=f1>home</a>
</body>
</html>

Login.html
<html>
<head><title>login</title></head>
<body>
<a href=login1.html target=f1>login</a>
</body>
</html>

Reg.html
<html>
<head><title>website</title>
</head>
<body>
<a href=registration.html target=f1>reg1</a>
</body>
</html>

Cata.html
<html>
<head><title></title></head>
<body>
<a href=catalogue2.html target=f1><h4>catalogue</h4></a>
</body>
</html>

Cart.html
<html>
<head><title></title></head>
<body>
<a href=cart1.html target=f1><h3>cart</h3></a>
</body>
</html>


Left frame:
Branches.html
<html>
<head><title>Branches</title></head>
<body>
<a href=cse.html target=f1>CSE</a><br>
<a href=ece.html target=f1>ECE</a><br>
<a href=eee.html target=f1>EEE</a><br>
<a href=civil.html target=f1>CIVIL</a><br>
</body>
</html>

Right frame:
Cse.html
<html>
<head><title>CSE</title></head>
<body>
<h3>CSE Departiment</h3><br>
<h4>Books in CSE are<h4>
Java<br>
Html<br>
</body>
</html>

Ece.html
<html>
<head><title>ECE</title></head>
<body>
<h3>ECE Departiment</h3><br>
<h4>Books in ECE are<h4>
Microprosessor<br>
Edc<br>
</body>
</html>

Eee.html
<html>
<head><title>EEE</title></head>
<body>
<center>
<h3>EEE Departiment</h3><br>
<h4>Books in EEE are<h4>
BEE<br>
Power system1<br></center>
</body>
</html>

Civil.html
<html>
<head><title>CIVIL</title></head>
<body>
<h3>CIVIL Departiment</h3><br>
<h4>Books in CIVIL are<h4>
Machinetools<br>
Tools and systems<br>
</body>
</html>

Name.html
<html>
<head><title>name</title></head>
<body>
<H1><marquee direction=:left" size:26pt>ONLINE BOOK STORES</marquee></H1 >
</body>
</html>



Output:

Online homepage:



Cse:







Ece


Eee








Civil






2) LOGIN PAGE:
This page looks like below:


Source code:
Login1.html
<html>
<head><title>website</title></head>
<body>
<center><form name="F1">
Login:<input type=text><br>
Password:<input type=password><br>
<input type=submit value="sumbmit">
<input type=reset value="reset">
</center>
</form>
</body>
</html>

Output:



3) CATOLOGUE PAGE:
The catalogue page should contain the details of all the books available in the web site in a
table.
The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.






Source code:
Catalogue2.html
<html>
<head><title></title></head>
<body><center>
<table cols=4 border=1>
<th>image</th><th>details</th><th>cost</th><th>add to cart</th>
<tr><td><img src="C:\Users\Administrator\Desktop\xml.jpg" height=75 width=75></td>
<td>Book:XML<br>Author:Winston<br>Publications:wiely</td>
<td>$50</td>
<td><input type=submit value=Add to Cart></td></tr>
<tr><td><img src="G:\WALLPAPERS\haqxstyrhy.jpg" height=75 width=75></td>
<td>Book:Ai<br>Author:S.russel<br>Publication:princetionhall</td>
<td>$63</td>
<td><input type=submit value=Add to Cart></td></tr>
<tr><td><img src="G:\WALLPAPERS\moscow_2.jpg"height=75 width=75></td>
<td>Book:Java2<br>Author:Watson<br>Publication:BPB</td>
<td>$35.5</td>
<td><input type=submit value=Add to Cart></td></tr>
<tr><td><img src="C:\Users\Administrator\Desktop\html.jpg" height=75 width=75></td>
<td>Book:HTML<br>Author:Sampeter<br>Publication:sampublication</td>
<td>$50</td>
<td><input type=submit value=Add to Cart></td></tr>
</center></table>
</body>
</html>





Week-2:

4) CART PAGE:
The cart page contains the details about the books which are added to the cart.
The cart page should look like this:


5) REGISTRATION PAGE:
Create a registration form with the following fields
1) Name (Text field)
2) Password (password field)
3) E-mail id (text field)
4) Phone number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (check boxes English, Telugu, Hindi, Tamil)
8) Address (text area)




Source code:
Cart1.html
<html>
<head><title></title></head>
<body><center>
<table cols=4 border=0>
<th>BOOK Name</th><th>Price</th><th>Quantity</th><th>Amount</th>
<tr><td>Java</td><td>$35.5</td><td>2</td><td>$70</td></tr>
<tr><td>html</td><td>$40.5</td><td>1</td><td>$40.5</td></tr>
</table></center>
<center>TOTAL AMOUNT-$110</center></body>
</html>

Reg.html
<html>
<head><title>website</title>
</head>
<body>
<a href=registration.html target=f1>reg1</a>
</body></html>
Registration.html
<html>
<head><title>Regform</title></head>
<body><CENTER>
<H1>REGISTRATION FORM</H1><CENTER>
<form><center>
<h3>NAME<input type=text></h3><br>
<h3>PASSWORD<input type=password></h3><br>
<h3>Email id<input type=text></h3><br>
<h3>Phone number<input type=text></h3><br>
<h3>Sex: <input type=radio>female <input type=radio>male<h3><br>
<h3>Date of Birth: Day<select>
<option value>1</option value>
<option value>2</option value>
<option value>3</option value>
</select>
Month<select><option>jan</option>
<option>feb</option>
</select>
Year<select><option>1987</option>
<option>1988</option>
<option>1989</option>
</select><br>
<h3>Languages:
<input type=checkbox>English
<input type=checkbox>Telugu
<input type=checkbox>Hindi
<input type=checkbox>Tamil</h3><br>
<h3>Address:<input type=text area></h3><br></center>
</form>
</body>
</html>




Output:
Registration








RESULT:
The registration page and cart page successfully created.

















Week:3

AIM:

VALIDATION:
Write Javascript to validate the following fields of the above Registration page
Name:
(Name should contain alphabets and the length should not be less than 6 characters)
Password:
(password should not be less than 6 characters length)
Emailid:
(should not contain any invalid and must follow the standard pattern [email protected])
Phone Number:
(phone number should contain 10 digits only)
NOTE:
You can also validate the login page with these parameters
Use PHP to connect with the database to store the above details



Source code:

REGISTRATIONPAGE:
<html>
<head>
<script language="javascript">
Function validate()
{
Var method=document.forms[0].method;
Var action=document.forms[0].action;
Var name=document.forms[0].elements[0].value;
Var pass=document.forms[0].elements[1].value;
Var email=document.forms[0].elements[2].value;
Var phone=document.forms[0].elements[3].value;
Var country=document.forms[0].elements[4].value;
Var gender=document.forms[0].elements[5].value;
Var letter=/^[A-Za-z]+$/;
Var letters=/^[0-9A-Za-z]+$/;
Var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
Var numbers = /^[0-9]+$/;
If(name.length!=0)
{
If((name.length>=6)&&(name.length<=12))
{
If(name.match(letter))
{
If(pass.length!=0)
{
If((pass.length>=6)&&(pass.length<=12))
{
If(pass.match(letters))
{
If(email.length!=0)
{
If(email.match(mailformat))
{ if(phone.length!=0)
{ if(phone.match(numbers))
{
If(document.forms[0].country.value!="-1")
{
If(!Document.getelementsbyname("sex")[0].checked &&
!Document.getelementsbyname("sex")[1].checked)
{
Window.alert("select gender");}
Else
{
Window.alert("regestration sucessful");
}
}
Else
{
Window.alert("enetr ur country");
}
}
Else
{window.alert("Enter phone number in digits");
}
}
Else
{window.alert("Enter phone number");
}
}
Else
{ window.alert("Enter email in correct order");
}
}
Else
{window.alert("Enter email");
}
}
Else
{window.alert("Enter Password having characters and numbers");
}
}
Else
{window.alert("Enter Password having 6 to 12 characters");
}
}
Else
{ window.alert("Enter Password");
}
}
Else
{ window.alert("Enter Name having characters only");
}
}
Else
{ window.alert("Enter Name having 6 to 12 characters");
}
}
Else
{ window.alert("Enter Name");
}
}
</script>
</head>
<center><H2><B>REGESTRATION FORM</H2></B><br><br>
<form method="post" action="">
NAME:<input type="text" name="name" size="25"/><br><br>
PASSWORD:<input type="Password" name="pass" size="25"/><br><br>
EMAIL ID:<input type="text" name="email" size="25"/><br><br>
PHONENO:<input type="text" name="phone" size="25"/><br><br>
COUNTRY:<select name="country">
<option value="-1">Select Country</option>
<option value="1">india</option>
<option value="2">usa</option>
<option value="3">uk</option>
<option value="4">england</option>
</select><br><br>
GENDER
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female<br><br>
STATE:<select>
<option>andrapradesh</option>
<option>uttarpradesh</option>
<option>Delhi</option>
<option>Karnataka</option>
<option>tamilnadu</option>
</select><br><br>
<input type="button" name="Submit" value="Submit" onclick="validate()"/>
<input type="Reset" name="reset" value="Reset" />
</form></center></font>
</body>
</html>





LOGIN PAGE:
<html>
<head>
<script language="javascript">
Function validate()
{
Var letter=/^[A-Za-z]+$/;
Var method=document.forms[0].method;
Var action=document.forms[0].action;
Var id=document.forms[0].elements[0].value;
Var pwd=document.forms[0].elements[1].value;
If(id!=0)
{
If(id.match(letter))
{
If(pwd!=0)
{
Window.alert("login succesful");
}
Else
{
Window.alert("enter password");
}
}
Else
{
Window.alert("name must be char only");
}
}
Else
{
window.alert("enter name"):
}
}
</script>
</head><body>
<center>
<h3>LOGIN PAGE</h3>
<form method="post" action="">
Name:<input type="text" name="id"/><br>
Password:<input type="text" name="pwd"/><br>
<input type="button" value="submit" name="submit" onclick="validate()"/>
<input type="reset" name="reset"/>
</form>
</body>
</html>




OUTPUT:

REGISTRATIONPAGE:















Login page:













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.

SOURCE CODE:
font.html
<html>
<head><title>css</title>
<style>
h1
{
color:green;
font-family:segoe script;
font-size:20px;
font-weight:15px;
text-decoration:line-through;
text-transform:uppercase;
text-align:center;
}
</style>
<body>
<h1>This is simple style sheet</h1>
</body>
</html>















Output:









2) Set a background image for both the page and single elements on the page.
You can define the background image for the page like this:


Source code:
Image.html
<html>
<head><title>css</title>
<style>
body
{
background-image:url("hari.jpg");
background-repeat:no-repeat;
background-position:50%;
}
</style>
</head>
<body></body></html>
Output:





Result:
Hence the background image for both the page and single element of the page is successfully
created.


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

Source code:

Repeat.html:
<html>
<head><title>css</title>
<style>
body
{
background-image:url("hari.jpg");
background-repeat:repeat;
}
</style>
</head>
<body>
</body>
</html>

Output:






4) Define styles for links as
A:link
A:visited
A:active
A:hover

SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>QIS COLLEGE</p>
<p><a class="ex1" href="default.asp">IT</a></p>
<p><a class="ex2" href="default.asp">CSE</a></p>
<p><a class="ex3" href="default.asp">MECH</a></p>
<p><a class="ex4" href="default.asp">ECE</a></p>
<p><a class="ex5" href="default.asp">CIVIL</a></p>
</body>
</html>



OUTPUT:




5) Work with layers:

SOURCE CODE:
Layers.html
<html>
<head><title>css</title>
</head>
<body>
<div style="position:relative;font-size:30px;z-index:2;backgroundcolor:
blue;">layer1</div>
<div style="position:relative;top:-50;left:10pt;font-size:60px;zindex:
1;color:green;">layer2</div>
<div style="position:relative;font-size:50px;z-index:3;backgroundcolor:
red;color:white;">layer3</div>
<div style="position:relative;top:-50;left:10pt;font-size:80px;zindex:
4;">layer4</div>
</body>
</html>





Output:





Result: The web page working with layers using cascading style sheets was designed
successfully.




6) Add a customized cursor:
Selector {cursor:value}
SOURCE CODE:
Cursur1.html:
<html>
<head><title>css</title>
<style>
.c1{cursor:default};
.c2{cursor:crosshair};
.c3{cursor:move};
.c4{cursor:havid};
.c5{cursor:text};
.c6{cursor:wait};
.c7{cursor:help};
.c8{cursor:n-resize};
.c9{cursor:s-resize};
.c10{cursor:e-resize};
.c11{cursor:w-resize};
.c12{cursor:progress};
.c13{cursor:notallowed};
.c14{cursor:no-drop};
.c15{cursor:all-scroll};
</style>
</head>
<body>
<a class="c1" href="sample.html">default</a><br>
<a class="c2" href="sample.html">crosshair</a><br>
<a class="c3" href="sample.html">move</a><br>
<a class="c4" href="sample.html">havid</a><br>
<a class="c5" href="sample.html">text</a><br>
<a class="c6" href="sample.html">wait</a><br>
<a class="c7" href="sample.html">help</a><br>
<a class="c8" href="sample.html">n-resize</a><br>
<a class="c9" href="sample.html">s-resize</a><br>
<a class="c10" href="sample.html">e-resize</a><br>
<a class="c11" href="sample.html">w-resize</a><br>
<a class="c12" href="sample.html">progress</a><br>
<a class="c13" href="sample.html">notallowed</a><br>
<a class="c14" href="sample.html">no-drop</a><br>
<a class="c15" href="sample.html">all-scroll</a><br>
</body>
</html>
OUTPUT:









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

SOURCE CODE:

<?xml version="1.0" encoding="UTF-8"?>
<catalogue>
<book>
<title>c</title>
<author>Balaguruswamy</author>
<isbn>1234</isbn>
<publisher>pearson</publisher>
<edition>4</edition>
<price>$50</price>
</book>
<book>
<title>c++</title>
<author>Balaguruswamy</author>
<isbn>123</isbn>
<publisher>pearson</publisher>
<edition>3</edition>
<price>$55</price>
</book>
<book>
<title>java</title>
<author>Brett spell</author>
<isbn>12</isbn>
<publisher>Apress</publisher>
<edition>2</edition>
<price>$45</price>
</book>
</catalogue>




Output:



Write a Document Type Definition (DTD) to validate the above XML file
Xml file:
<?xml version="1.0" encoding="UTF-8"?>
<?DOCTYPE catalogue SYSTEM "book.dtd"?>
<catalogue>
<book>
<title>c</title>
<author>Balaguruswamy</author>
<isbn>1234</isbn>
<publisher>pearson</publisher>
<edition>4</edition>
<price>$50</price>
</book>
<book>
<title>c++</title>
<author>Balaguruswamy</author>
<isbn>123</isbn>
<publisher>pearson</publisher>
<edition>3</edition>
<price>$55</price>
</book>
<book>
<title>java</title>
<author>Brett spell</author>
<isbn>12</isbn>
<publisher>Apress</publisher>
<edition>2</edition>
<price>$45</price>
</book>
</catalogue>
Dtd file:
<!ELEMENT catalogue (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)>

Output:



Xml file with schema definition
<?xml version="1.0" encoding="UTF-8"?>
<catalogue>
<book xmlns:xsi="http//www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="book.xsd">
<title>c</title>
<author>Balaguruswamy</author>
<isbn>1234</isbn>
<publisher>pearson</publisher>
<edition>4</edition>
<price>$50</price>
</book>
</catalogue>
Schema file
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="book">
<xs:complexType>
<xs:all>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="isbn" type="xs:integer"/>
<xs:element name="publisher" type="xs:string"/>
<xs:element name="edition" type="xs:decimal"/>
<xs:element name="price" type="xs:float"/>
</xs:all>
</xs:complexType>
</xs:element>
</xs:schema>

Output:



Xml file with XSL
XML file:
<?xml version="1.0" encoding="UTF-8"?>
<?DOCTYPE catalogue SYSTEM "book.dtd"?>
<?xml-stylesheet type="text/xsl" href="book.xsl"?>
<catalogue>
<book xmlns:xsi="http//www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="book.xsd">
<title>c</title>
<author>Balaguruswamy</author>
<isbn>1234</isbn>
<publisher>pearson</publisher>
<edition>4</edition>
<price>$50</price>
</book>
<book>
<title>c++</title>
<author>Balaguruswamy</author>
<isbn>123</isbn>
<publisher>pearson</publisher>
<edition>3</edition>
<price>$55</price>
</book>
<book>
<title>java</title>
<author>Brett spell</author>
<isbn>12</isbn>
<publisher>Apress</publisher>
<edition>2</edition>
<price>$45</price>
</book>
</catalogue>

XSL file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<table border="2" align="center" bgcolor="pink">
<caption colspan="6" style="color:red"><b>Book Details</b></caption>
<th style="color:gray" >Title</th>
<th style="color:gray">Author</th>
<th style="color:gray">Isbn</th>
<th style="color:gray">Publisher</th>
<th style="color:gray">Edition</th>
<th style="color:gray">Price</th>
<xsl:for-each select="catalogue/book">
<tr>
<td style="color:red"><xsl:value-of select="title"/></td>
<td style="text-transform:uppercase;font-style:strong;color:green"><b>
<xsl:value-of select="author"/></b></td>
<td style="color:red"><xsl:value-of select="isbn"/></td>
<td style="color:blue"><xsl:value-of select="publisher"/></td>
<td style="color:red"><xsl:value-of select="edition"/></td>
<td style="color:blue"><xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>



Output:




RESULT:
The xml file is successfully created.




















Week-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 .


Source code:

SimpleBean.java
import java.awt.*;
import java.io.Serializable;
/* serialization is a process of writing the state of an object to a stream or storing the state of
an object permanently, later we can retrieve it*/
/* an object that implements serializable interface is called serializable object */
public class SimpleBean extends Canvas implements Serializable
{
private Color color=Color.green;
public Color getColor()
{
return color;
}
public void setColor(Color newColor)
{
color=newColor;
repaint();
}
public void paint(Graphics g)
{
g.setColor(color);
g.fillRect(20,5,20,30);
}
// constructor sets inherited properties
public SimpleBean()
{
setSize(60,40);
setBackground(Color.red);
}}


SimpleBean.mft:

Name: SimpleBean.class
Java-Bean: True

















Result : Simple Visual Bean was successfully created.




















Week7

Aim: To install the tomcat server on windows platform.
Procedure:
WEEK-7
TOMCAT INSTALLATION
AIM:
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 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
documents root.
Access the pages by using the url:http://localhost:4040/rama/books.html (for
tomcat)
http://localhost:8080/books.html (for apache)

Procedure:

















Result: Tomcat 5.0 server is installed successfully on window platform.



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)










RESULT:
The week1 and week2 page are accessed using tomcat server is successfully completed.

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.

COLOGIN.HTML:
<html>
<head><title> login Page </title>
</head>
<body bgcolor=orange><center>
<form ACTION="clogin"><br><br><br><BR>
<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></center>
</body>
</html>


COLOGIN1.HTML:

<html>
<head><title> login Page </title>
</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>
<input type="submit" value="submit">
</form>
</body>
</html>


COK.JAVA
import javax.servlet.* ;
import javax.servlet.http.*;
import java.io.*;
public class Cok 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 p3=new Cookie("pwd3","456");
Cookie c4=new Cookie("usr4","mno");
Cookie p4=new Cookie("pwd4","789");
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 javax.servlet.http.*;
import java.io.*;
import java.lang.*;
public class Clogin extends HttpServlet{String user,pas;
public void service(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
user=req.getParameter("usr");
pas=req.getParameter("pwd");
Cookie[] c=req.getCookies();
for(int i=0;i<c.length;i++)
{
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 ");

}
}
}
}
}


Output:













































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.

Source code:
Home.html:
<html>
<head><title>Authentication</title>
</head>
<body>
<form method="post"
action="http://localhost:8080
ex1">
<label>Username </label>
<input type="text"size="20" name="user"><br><br>
password<input type="text" size="20" name="pwd"><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>

Example.java
import javax.servlet.*;
import java.io.*;
public class Example1 extends GenericServlet
{
public String user1,pwd1,user2,pwd2,user3,pwd3,user4,pwd4,user5,pwd5;
public void init(ServletConfig sc)
{
user1=sc.getInitParameter("username1");
pwd1=sc.getInitParameter("password1");
user2=sc.getInitParameter("username2");
pwd2=sc.getInitParameter("password2");
user3=sc.getInitParameter("username3");
pwd3=sc.getInitParameter("password3");
user4=sc.getInitParameter("username4");
pwd4=sc.getInitParameter("password4");
}
public void service(ServletRequest req,ServletResponse res)
throws ServletException, IOException {

res.setContentType("text/html");
PrintWriter out=res.getWriter();
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-name>username2</param-name>
<param-value>1234</param-value>
</init-param>
<init-param>
<param-name>password2</param-name>
<param-value>4567</param-value>
</init-param>
<init-param>
<param-name>username3</param-name>
<param-value>cse</param-value>
</init-param>
<init-param>
<param-name>password3</param-name>
<param-value>pvpsit</param-value>
</init-param>
<init-param>
<param-name>username4</param-name>
<param-value>wt</param-value>
</init-param>
<init-param>
<param-name>password4</param-name>
<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
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).

SOURCE CODE:
Registration.jsp:

<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
function validate()
{
if(f1.fname.value== "")
{
alert("UserName Cannot be Empty");
f1.fname.focus();
return false;
}
if(f1.password.value== "")
{
alert("Password Cannot be Empty");
f1.password.focus();
return false;
}
var p=f1.password.value;
var i=p.length;
if(i>8)
{
alert(" password is not more than 8 characters");
f1.password.focus();
return false;
}
var a=f1.email.value;
var a1=a.indexOf("@");
var dot=a.indexOf(".");
if(a1<1||dot<a1+2||dot+2>a.length)
{
alert("enter the valid mail id");
f1.email.focus();
return false;
}
var pattern2 = /^\d{10}/;
if(!pattern2.test(document.f1.mnum.value))
{
alert("It is not valid mobile number.input 10 digits number!");
f1.mnum.focus();
return false;
}
}
</script>
</head>
<body BGCOLOR=LIGHTBLUE> <center>
<form name="f1" method="post" action="registration.jsp" onSubmit= "return validate()">
<table border=2>
<tr>
<td>NAME</td>
<td> <input name="fname" type="text" id="fname"/></td>
</tr>
<tr>
<td>PASSWORD</td>
<td><input name="password" type="password" id="password" /></td>
</tr>
<tr>
<td>EMAIL</td>
<td><input name="email" type="text" id="email"/></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><input name="mnum" type="text" id="mnum" /></td>
<tr>
<td><input type="submit" name="Submit" value="Submit" ></td>
<td><input type="reset" name="reset" value="reset"></td>
</tr>
</table>
</form></center>
</body>
</html>

Registration.jsp:
<%@ page import="java.sql.*,java.lang.*"%>
<html>
<head>
<title>registration details</title>
</head>
<% try
{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con= DriverManager.getConnection("jdbc:mysql://localhost:3306/QIS","root","root");
String vname=request.getParameter("fname");
String pname=request.getParameter("password");
String veml=request.getParameter("email");
String mno=request.getParameter("mnum");
String vsql="insert into register values(?,?,?,?)";
PreparedStatement pst = con.prepareStatement(vsql);
pst.setString(1,vname);
pst.setString(2,pname);
pst.setString(3,veml);
pst.setString(4,mno);
pst.executeUpdate();
out.println("inserted successfully");
con.close();
}
catch(Exception e)
{
response.sendError(504,"Err Msg--> "+e);
}
%>
</html>

OUTPUT:














result: The student details are entered in to the database successfully.


























Week-10
AIM:
Write a JSP which does the following jobInsert the details of the 3 or 4 users who register
with the web site (week9) by usingregistration 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).

SOURCECODE:
Login.html:
<html>
<body>
<center>
<h1>QIS INSTUTE OF TECHNOLOGY.</h1>
</center>
<table border="1" width="100%" height="100%">
<tr>
<td valign="top" align="center"><br/>
<form action="auth.jsp">
<table>
<tr>
<td colspan="2" align="center">
<b>LoginPage</b></td>
</tr>
<tr>
<td colspan="2"align="center">
<b>&nbsp;</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>&nbsp;</td>
<td>&nbsp;</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>
</head>
<body bgcolor="yellow">
<%!String uname,pwd;%>
<%uname=request.getParameter("user");
pwd=request.getParameter("pwd");
try
{
class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
connection conn=DriverManager.getConnection("jdbc:odbc:oradsn","system","manager");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select name,password from personalwhere 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:







RESULT:
The user i s aut hent i cat ed when he submi t s t he l ogi n form usi ng t he 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.

Cart.jsp:
<%@page language="java" import="java.sql.*" %>
<%
Connection con=null;
int count=0;
Statement stmt=null;
ResultSet rs=null;
String[] bname=new String[20];
int[] price=new int[15];
int [] quantity=new int[15];
int[] amount=new int[15];
try{
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/sandy","root","root");
stmt =con.createStatement();
rs=stmt.executeQuery("select * from cart");
for(int i=0;rs.next();i++)
{
count++;
bname[i]=rs.getString(1);
price[i]=rs.getInt(2);
quantity[i]=rs.getInt(3);
amount[i]=rs.getInt(4);
}
if(count!=0)
{
%>
<html>
<body>
<table border="1">
<tr>
<th>BookName</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<%
for(int j=0;j<count;j++)
{
%>
<tr>
<th><%=bname[j]%></th>
<th><%=price[j]%></th>
<th><%=quantity[j]%></th>
<th><%=amount[j]%></th>
</tr>
</body>
</html>
<%
}
}
}
catch(Exception e)
{
e.getMessage();
}
%>
































Output:










RESULT: Using jsp the data will be successfully added to database and the data will be
successfully displayed.

You might also like