WT Manual

WEB TECHNOLOGIES
LAB MANUAL
Department of Computer Science & Engineering

CMR COLLEGE OF ENGINEERING & TECHNOLOGY Medchal – 501401, Hyderabad
Week1:Write a PHP script to print prime numbers between 1-50
Program:
Prime.php:
<!DOCTYPE html>
<html>
<head>
<title>PHP Program to print Prime Numbers</title>
</head>
<body>
<h1> Prime numbers from 1-to 50</h1>
<?php
for($i=1;$i<=50;$i++)
$c=0;
for($j=1;$j<=$i;$j++)
if($i%$j==0)
$c++;
if($c==2)
echo "Prime number :$i</br>";

}
?>
</body>
</html>
Output:
Prime numbers from 1-to 50

Prime number :2
Prime number :3
Prime number :5
Prime number :7
Prime number :11
Prime number :13
Prime number :17
Prime number :19
Prime number :23
Prime number :29
Prime number :31
Prime number :37
Prime number :41
Prime number :43
Prime number :47
Week 2:PHP script to
a. Find the length of a string.
b. Count no of words in a string.
c. Reverse a string.
d. Search for a specific string.
Programs:
String.php:
<?php
$a="Welcome to WT Lab";
echo strlen($a); //finding string length
echo "</br>";
$b="Good";
echo strlen($b); //finding string length
echo "</br>";
//finding no of words
$c="This is WT Lab";
var_dump($c); //checking data type
echo "</br>";
echo str_word_count($c);
echo "</br>";
//finding reverse of string
$p="Good Morning";
echo strrev($p);
echo "</br>";
//Search for a specific string
$t="This is BKCHINNA CSE";
$u="CSE";
if(strpos($t,$u)!==false)
{
echo "the word is found $u";
}
else
{
echo "the word is not found in a given string";
}
?>
Output:
17
4
string(14) "this is wt lab"
4
gninrom doog
the word is found cse
Week 3:Write a PHP script to merge two arrays and sort them as numbers, in descending order.
Program:
Merge.php:
<?php
$a=array(20,15,40,55,35,32,90,3);
$b=array(45,85,25,22,98);
$c=array_merge($a,$b);
rsort($c);
$len=count($c);
echo "The length is: $len";
echo "<br>";
echo "<br>";
echo "The Descending Order is:";
echo "<br>";
for($i=0;$i<$len;$i++)
{
echo $c[$i];
echo "<br>";
}
?>
OutPut:
The length is: 13
The Descending Order is:

98
90
85
55
45
40
35
32
25
22
20
15
3
Week 4:Write a PHP script that reads data from one file and write into another file.
Program:
<html>
<head>
<title> Reads data from one file and write into anothe file
</title>
</head>
<body>
<?php
$myfile="samplefile.txt";
$myfilelink=fopen($myfile,'r');
$myfilecontents=fread($myfilelink,filesize($myfile));
fclose($myfilelink);
echo $myfilecontents;
$myfile2="samplefile3.txt";
$myfilelink2=fopen($myfile2,'w+') or die("can't open file");
$newcontents=$myfilecontents;
fwrite($myfilelink2,$newcontents);
fclose($myfilelink2);
?>
</body>
</html>
Output:
Hello, This is BK Chinna, Asst.Prof.of CSE dept. Hyderabad
Week 5:Develop static pages (using Only HTML) of an online book store.
The pages should resemble: www.amazon.com. The website should consist the following pages.
a. Home page
b. Registration and user Login
c. User Profile Page
d. Books catalog
e. Shopping Cart
f. Payment By credit card
g. Order Conformation
Program:
1. HomePage.html:
<html>
<head>
<title>Amazon Book Store</title>
</head>
<body bgcolor="cyan">
<center>
<strong><h1 style="border:white;border width:5px">Welcome to AMAZON Online
Services</h1></strong>
<form method="post" action="Login.html" target=_blank >
<h2>Online Book Store</h2>
<hr>
<table align="center">
<tr>
<td>
<br>
<h4>For Books</h4>
<input type="submit" value="click here">
</form>
</td>
<br>
</tr>
</table>
</center>
</body>
</html>
2. Registration and user Login:

Registration.html
<html>
<head>
<title>Registration</title>
</head>
<body bgcolor="cyan"><center>
<strong><h1>Welcome to AMAZON Online Book Store </h1></strong></center>
Edit your profile here...
<form method="post" action="Catalog.html" >
<right>
<table align="left">
<tr>
<td><h4>User name</td>
<td><input type="text" ></td>
<tr>
<tr>
<td><h4>Password</td>
<td><input type="password"></td>
</tr>
<tr>
<option>
<td><h4>male
<input type="radio" name="sex" id="male"></td>
<td><h4>female
<input type="radio" name="sex" id="female" ></td>
</option>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" rows=5 cols=19>
</textarea>
</td>
<tr>
<td>
<input type="submit" value="submit" ></td>
</tr>
</form>
</body>
</html>
Login.html
<html>
<head>
<title>
Login</title>
</head>
<strong><h1> Welcome to AMAZON Online Services</h1></strong></center>
<center>
<tr>
<td><h4>user name</td>
</tr>
<tr>
<td><h4>password</td>
</tr>
<tr>
<td>
</center>
<input type="submit" value="submit" >
</form>
</td>
<td>
<form method="post" action="Registration.html" >
<input type="submit" value="register" >

<input type="reset" value="reset"></form></td>
</tr>
</table>
</body>
</html>
Userpro.html:
<html>
<head>
<title>Registration</title>
</head>
<strong><h1>Welcome to AMAZON Online Book Store </h1></strong></center>
Edit your profile here...
<right>
<table align="left">
<tr>
<td><h4>User name</td>
<tr>
<tr>
<td><h4>Password</td>
</tr>
<tr>
<option>
<td><h4>male
<input type="radio" name="sex" id="male"></td>
<td><h4>female
<input type="radio" name="sex" id="female" ></td>
</option>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" rows=5 cols=19>
</textarea>
</td>
<tr>
<td>
<input type="submit" value="submit" ></td>
</tr>
</form>
</body>
</html>
Catalog.html:
<html>
<head>
<title>Books Catalog</title>
</head>
<center><h1>WELCOME TO AMAZON SERVICES</h1></center>
<form method="post" action="Shopping.html">
<center>
<table>
<tr>
<td><b><h3>Frontend books</td>
<td></td></tr>
<tr>
<td></td>
<td><h4>C&DS</td>
</tr>
<tr>
<td></td>
<td><h4>ADS</td>
</tr>
<tr>
<td></td>
<td><h4>JAVA
</td></tr>
<tr>
<td><b><h3>Backend Books</td>
<td></td>
</tr>
<tr>
<td></td>
<td><h4>Oracle</td>
</tr>
<tr>
<td></td>
<td><h4>Ms SQL Server</td>
</tr>
<tr>
<td></td>
<td><h4>MySql</td>
</tr>
</table>
</h4>
</center>
<center>
<b>For buy one of these books<br></b>
<input type="submit" value="click here">
</center>
</form>
</body>
</html>
Shopping.html:
<html>
<head><title>shopping cart</title>
</head>
<center><h1>
Shopping Cart</h1></center>
<br><br><br><br><br>
<tr>
<td>Text Books</td>
<td>
<select>
<optgroup label="select the book">
<option value="C&DS">C&DS
<option value="Ads">Ads
<option value="Java">Java
<option value="Oracle">Oracle
<option value="Ms SQL Server">Ms SQL Server
<option value="MySql">MySql
</optgroup>
</select>
</td></tr>
<tr>
<td>
Quantity</td>
<td>
<input type="text" id="q">
</td></tr>
<tr>
<td></td>
<td>
<form method=post action="Payment.html">
<input type="submit" value=ok />
</form>
</td></tr>
</table>
<center>
<pre>Cost of one book is"500" + shipping "100"</pre>
</center>
</body>
</html>
Payment.html:
<html>
<head><title>Payment</title>
</head>
<center><h1>Payment by Credit Card</h1></center>
<br><br><br><br><br>
<form method=post action="Orderconfirm.html">
<tr>
<td><hu>Enter card number :</hu></td>
<td><input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" required></input></td>
</tr>
<tr>
<td><hu>Enter Card Valid month and Year:</hu></td>
<td><input type="text" placeholder="xx/xx" required></input></td>
</tr>
<tr>
<td><hu>Enter Card CVV</hu></td>
<td><input type="number" placeholder="xxx" required></input></td>
</tr>
<tr>
<td><hu>Enter Name on the card:</hu></td>
<td><input type="text" placeholder="Name on the card" required></input></td>
</tr>
<tr>
<td><hu>Total Amount</hu></td>
<td><input type="text" placeholder="Amount in Rupees" required></input></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Pay" onclick='window.location.assign("Orderconfirm.html")'></input>
  <input type="button" value="Cancel"></input>
</td>
</tr>
</table>
</form>
</body>
</html>
Orderconform.html:
<html>
<head><title>Order conformation</title></head>
<center>
<h1><b>ONLINE BOOK SHOPPING</h1>
<pre><strong>
<b>Your order Is Conformed...
</strong></pre>
<h2><b>THANK YOU!!!</h2>
</center>
</body>
</html>
OutPut:
1. Home Page
b. Registration and user Login
c. User Profile Page

d. Books catalog
e. Shopping Cart
f. Payment By credit card
g. Order Conformation
Week 6:
Validate the Registration, user login, user profile and payment by credit card pages using
JavaScript.
Program:
Index.html:
<html>
<head>
<frameset rows="25%,* " border="1">
<frame src="top.html" name="top" />
<frameset cols="25%,*" border="1">
<frame src="left.html" name="left" />
<frame src="right.html" name="right" />
</frameset>
</frameset>
</head>
</html>
Top.html:
<html>
<body bgcolor="green">
<marquee><h1> Welcome to Page Validation Process </h1>
</marquee>
</body>
</html>
Left.html:
<html>
<body bgcolor="yellow">
<h1>WELCOME</h1>
<ol type="1">
<li><a href="registration.html" target="right">Registration page</a></li>
<li><a href="form.php" target="right">User Profile page</a></li>
<li><a href="login.html" target="right">Login page</a></li>
<li><a href="payment.html" target="right">Payment page</a></li>
</ol>
</body>
</html>
Right.html:
<html>
<body bgcolor="red">
<marquee><h1> Welcome to Page validation </h1>
</marquee>
</body>
</html>
Registration.html:
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
/* Full-width input fields */

input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for all buttons */

button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Extra styles for the cancel button */

.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */

.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */

.container {
padding: 16px;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
width: 100%;
}
}
</style>
<body bgcolor="Magenta" >
<form action="login.html" style="border:1px solid #ccc">

<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter Email" name="email" required><br>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>

<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">
Remember me
</label>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</body>
</html>
Login.html:
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
/* Full-width input fields */

input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */

input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */

button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Extra styles for the cancel button */

.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
float: left;
width: 50%;
}
/* Add padding to container elements */

.container {
padding: 16px;
}
/* The Modal (background) */

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: #474e5d;
padding-top: 50px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* Style the horizontal ruler */

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* The Close Button (x) */

.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
width: 100%;
}
}
</style>
<body>
<h2>Modal Sign up Form</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Sign

Up</button>
<div id="id01" class="modal">

<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close
Modal">×</span>
<form class="modal-content" action="form.php">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter Email" name="email" required><br>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">
Remember me
</label>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'"
class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Payment.html:
<html>
<center>
<body bgcolor="yellow">
<h1> Payment Process</h1>
<form method="post" action="order.html">
Enter Credit Card Number : <input type="txt" maxlength="16" size="16" required />
<br>
<br>
Card Valid Month & Year : <select><option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12</optgroup></select>
<select><option>2023
<option>2024
<option>2025
<option>2026
<option>2027</optgroup></select>
<br>
<br>
Card CVV : <input type="txt" maxlength="3" size="3" required />
<br>
<br>
Name on the Card : <input type="txt" name="name" required />
<br>
<br>
<input type="submit" value="Proceed to pay">
<input type="button" value="Cancel" onclick="window.location.href = 'right.html';">
</body>
</html>
Order.html:
<html>
<center>
<body bgcolor="blue">
<h1> Amazon Welcome </h1>
<h1> Your Order is Conformed.... </h1>
<h1> Thank you for shopping....! </h1>
</body>
</center>
</html>
Output:
1. Index Page
2. Registration Page
3. User Profile Page
4. Login Page
5. Payment Page
6. Order Conformation Page

Week 7:
Create and save an XML document on the server, which contains 10 user’s information. Write a
program, which takes User Id as an input and returns the user details by taking the user
information from the XML document.
Program:
Index.html:
<html>
<body>
<script>
functionloadXML(){
var xml = new XMLHttpRequest()
xml.onreadystatechange = function(){
studDetails(this)
};
xml.open("GET", "data.xml", true)
xml.send()
}
functionstudDetails(xml){
varxmlDoc = xml.responseXML
var data = ""
var x = xmlDoc.getElementsByTagName("student")
for(var i = 0; i <x.length; i++) {
var name = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
varrollno = x[i].getElementsByTagName("rollno")[0].childNodes[0].nodeValue
var percentage = x[i].getElementsByTagName("percentage")[0].childNodes[0].nodeValue
var gender = x[i].getElementsByTagName("gender")[0].childNodes[0].nodeValue
if(document.getElementById("rollno").value == rollno)
data += name + "<br/>" + rollno + "<br/>" + percentage + "<br/>" + gender + "<br/>"
}
if(data == "")
data = "No person found"
document.getElementById("data").innerHTML = data
}
</script>
<center>
<input type = "text" id = "rollno" placeholder = "Enter your roll number"/><br/>
<button type="button" onclick = "loadXML()" > Submit </button>
<p id = "data">Hello</p>
</center>
</body>
</html>
Data.xml:
<?xml version="1.0" encoding="UTF-8"?>
<CSE>
<student>
<name>Anoop</name>
<rollno>501</rollno>
<percentage>98</percentage>
<gender>Male</gender>
</student>
<student>
<name>Ankit</name>
</student>
<student>
<name>Ayaz</name>
</student>
<student>
<name>Alok</name>
</student>
<student>
<name>Mohan</name>
</student>
<student>
<name>Pandit</name>
</student>
<student>
<name>Karan</name>
</student>
<student>
<name>Adwik</name>
</student>
<student>
<name>Lokesh</name>
</student>
<student>
<name>Joker</name>
</student>
</CSE>
Output:
Week 8:
Install TOMCAT web server. Convert the static web pages of assignments 2 into
dynamic webPages using Servlets and cookies. Hint: Users information (user id,
password, credit card number) would be stored in web.xml. Each user should have a
separate Shopping Cart.
Program:
Step 1: Download and Install Tomcat

Go to http://tomcat.apache.org/download-70.cgidownload the "zip" package
Step 2: Check the installed directory to ensure it contains the following sub-directories:
bin folder
logs folder
webapps folder
work folder
temp folder
conf folder
lib folder
Step 3: Now, we need to create an Environment Variable JAVA_HOME.

We need to create an environment variable called "JAVA_HOME" and set it to our JDK installed directory.
Step 4: Configure Tomcat Server

The configuration files of the Apache Tomcat Server are located in the "conf" sub-directory of our Tomcat
installed directory, for example "E:\myserver\tomcat7.0.40\conf". There are 4 configuration
XML files:
1. context.xml file
2. tomcat-users.xml file
3. server.xml file
4. web.xml file
Step 4(a) "conf\web.xml"; Enabling a Directory Listing

Open the configuration file "web.xml". We shall enable the directory listing by changing "listings" from
"false" to "true" for the "default" servlet.
Step 4(b) "conf\server.xml file"; set the TCP Port Number

Open the file "server.xml" in a text editor.
The default port number of Tomcat is 8080. Now we need to change the TCP port number for Tomcat, since
the same port number can be used by other servers like SQL Server. We may choose any number between
1024 and 65535. We shall choose 9999 in this article.
Step 4(c) "conf\context.xml"; Enabling Automatic Reload

In that we set reloadable="true" to the <Context> element to enable automatic reload after code changes Add
reloadable="true" as in the following:
<Context reloadable="true">
......
</Context>
Step 5
Now, start the tomcat server
Executable programs and scripts are kept in the "bin" sub-directory of the Tomcat installed directory,
e.g., "E:\myserver\tomcat7.0.40\bin".
Step 5(a) Start Server

Launch a command shell. Set the current directory to "<TOMCAT_HOME>\bin" like
E:\myserver\tomcat7.0.40\bin, and run "startup.bat"
Step 5(b) Access the Server

Open a browser then enter the URL "http://localhost:9999" to access the Tomcat server's welcome page.
Step 5(c) How to Shutdown Server

We can stop the server using one of the following:
1. Press ctrl-c on the Tomcat console; or
2. Run "<TOMCAT_HOME>\bin\shutdown.bat" script:
// Change the current directory to Tomcat's "bin"
>e: // Change the current drive
e:\> cd E:\myserver\tomcat7.0.40\bin // Change Directory to YOUR Tomcat's "bin" directory
// Shutdown the server
E:\myserver\tomcat7.0.40\bin> shutdown
Web.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<web-app>
<display-name>Servlet 2.4 Examples</display-name>
<description> Servlet 2.4 Examples. </description>
<servlet>
<servlet-name>reg</servlet-name>
<servlet-class>reg</servlet-class>
</servlet>
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>login</servlet-class>
</servlet>
<servlet>
<servlet-name>profile</servlet-name>
<servlet-class>profile</servlet-class>
</servlet>
<servlet>
<servlet-name>catalog</servlet-name>
<servlet-class>catalog</servlet-class>
<servlet-mapping>
<servlet-name>order</servlet-name>
<url-pattern>
</servlet>
<servlet>
<servlet-name>order</servlet-name>
<servlet-class>order</servlet-class>
</servlet>
<url-pattern>order</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>catalog</servlet-name>
<url-pattern>catalog</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>profile</servlet-name>
<url-pattern>profile</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>login</url-pattern>
</servlet-mapping>
<servlet-mapping><servlet-name>reg</servlet-name><url-pattern>reg</url-pattern>
</servlet-mapping></web-app>
Main.html
<html>
<body bgcolor="pink">
<br /><br /><br /><br /><br />
<h1 align="center"><U>ONLINE BOOK STORAGE</U></h1><br /><br /><br />
<h2 align="center"><pre>
<b>Welcome to online book storage.
Press LOGIN if you are having id
otherwise press REGISTRATION
</b></pre></h2>
<br /><br /><pre>
<div align="center"><a href="/tr/login.html">LOGIN</a><a href="/tr/reg.html">
REGISTRATION</a></div></pre>
</body>
</html>
Login.html
<html>
<body bgcolor="pink"><br /><br /><br />
<form name="myform" method="post" action="/tr/login">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id" /><br />
PASSWORD :<input type="password" name="pwd" /></pre><br /><br />
</div>
<br /><br />
<div align="center">
<input type="submit" value="ok" onclick="validate()" />
      <input type="reset" value="clear" />
</div>
</form>
</body>
</html>
Reg.html
<html>
<body bgcolor="pink"><br /><br />
<form name="myform" method="post" action="/tr/reg">
NAME :<input type="text" name="name" /><br />
ADDRESS :<input type="text" name="addr" /><br />
CONTACT NUMBER :<input type="text" name="phno" /><br />
LOGINID :<input type="text" name="id" /><br />
PASSWORD :<input type="password" name="pwd" /></pre><br /><br />
</div>
<br /><br />
</div>
</form>
</body>
</html>
Profile.html
<html>
<form name="myform" method="post" action="/tr/profile">
LOGIN ID :<input type="text" name="id" /><br />
</pre><br /><br />
</div>
<br /><br />
</div>
</form>
</body>
</html>
Catalog.html
<html>
<form method="post" action="/tr/catalog">
BOOK TITLE :<input type="text" name="title" /><br />
</pre><br /><br />
</div>
<br /><br />
<input type="submit" value="ok"
name="button1"/>
<input type="reset" value="clear" name="button2"/>
</div>
</form>
</body>
</html>
Order.html
<html>
<body bgcolor="pink"><br /><br />
<form method="post" action="/tr/reg">
NAME :<input type="text" name="name" /><br />
PASSWORD :<input type="password" name="pwd" />
TITLE :<input type="text" name="title" /><br />
NO. OF BOOKS :<input type="text" name="no" /><br />
DATE :<input type="text" name="date" /><br />
CREDIT CARD NUMBER:<input type="password" name="cno" /><br
/></pre><br /><br />
</div>
<br /><br />
<input type="submit" value="ok" name="button1"/>
      <input type="reset" value="clear"
name="button2"/>
</div>
</form>
</body>
</html>
Login.java
importjava.sql.*;
import java.io.*;
importjava.util.*;
importjavax.servlet.*;
importjavax.servlet.http.*;
public class login extends HttpServlet{
public void service(HttpServletRequestreq,HttpServletResponseresp)
throwsServletException,IOException {
PrintWriter pw=resp.getWriter();
pw.println("<html><body bgcolor=\"pink\");
String id=req.getParamenter("id");
String pwd=req.getParameter("pwd");
try {
Driver d=new oracle.jdbc.driver.OracleDriver();
DriverManager.registerDriver(d);
Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","scott","tiger");
Statement stmt=con.createStatement();
String sqlstmt="select id,password from login";
ResultSetrs=stmt.executeQuery(sqlstmt);
int flag=0;
while(rs.next()) {
if(id.equal(rs.getString(1))&&pwd.equals(rs.getString(2))) {
flag=1;
}
}
if(flag==0) {
pw.println("SORRY INVALID ID TRY AGAIN ID<br><br>");
pw.println("<a href=\"/tr/login.html\">press LOGIN to RETRY</a>");
}
else {
pw.println("VALID LOGIN ID<br><br>");
pw.println("<h3><ul>");
pw.println("<li><ahref=\"profile.html\"><fontcolor=\"black\">USER
PROFILE</font></a></li><br><br>");
pw.println("<li><ahref=\"catalog.html\"><fontcolor=\"black\">BOOKS
CATALOG</font></a></li><br><br>");
pw.println("<li><ahref=\"order.html\"><fontcolor=\"black\">ORDER
CONFIRMATION</font></a></li><br><br>");
}
pw.println("</body></html>");
}
catch(Exception e) { resp.sendError(500,e.toString());
}
}
Reg.html
importjava.sql.*;
import java.io.*;
importjava.util.*;
String name=req.getParamenter("name");
String addr=req.getParameter("addr");
String phno=req.getParameter("phno");
int no=Integer.parseInt(phno);
try {
int flag=0;
while(rs.next()) {
if(id.equal(rs.getString(1))&&pwd.equals(rs.getString(2))) {
flag=1;
}}
if(flag==1) {
pw.println("SORRY INVALID ID ALREADY EXITS TRY AGAIN WITH NEW
ID<br><br>");
pw.println("<a href=\"/tr/reg.html\">press REGISTER to RETRY</a>");
}
else {
Statement stmt1=con.createStatement();
stmt1.executeUpdate("insertintologin
values("+names","+addr+","+no+","+id+","+pwd+")");
pw.println("YOUR DETAILS ARE ENTERED<br><br>");
pw.println("<a href=\"/tr/login.html\">press LOGIN to login</a>");
}
}
catch(Exception e) { resp.sendError(500,e.toString());
} }}
Catlog.java
importjava.sql.*;
import java.io.*;
importjava.util.*;
String title=req.getParameter("title");
try {
int flag=0;
while(rs.next()) {
pw.println(",div align=\"center\">");
pw.println("TITLE :"+rs.getString(1)+"<br>");
pw.println("AUTHOR :"+rs.getString(2)+"<br>");
pw.println("VERSION :"+rs.getString(3)+"<br>");
pw.println("PUBLISHER :"+rs.getString(4)+"<br>");
pw.println("COST :"+rs.getString(5)+"<br>");
pw.println("</div");
flag=1;
}
if(flag==0) {
pw.println("SORRY INVALID TITLE TRY AGAIN <br><br>");
pw.println("<a href=\"/tr/catalog.html\">press HERE to RETRY</a>");
}
}
catch(Exception e) {
resp.sendError(500,e.toString());
}
}
}
Profile.java
importjava.sql.*;
import java.io.*;
importjava.util.*;
try {
Connection con=DriverManager.getConnection("jdbc:oracle:thin:
@localhost:1521:orcl","scott","tiger");
String sqlstmt="select * from login where id="+id+"";
int flag=0;
pw.println("<br><br><br>");
while(rs.next()) {
pw.println("<div align=\"center\">");
pw.println("NAME :"+rs.getString(1)+"<br>");
pw.println("ADDRESS :"+rs.getString(2)+"<br>");
pw.println("PHONE NO :"+rs.getString(3)+"<br>");
pw.println("</div>");
flag=1;
}
if(flag==0) {
pw.println("<a href=\"/tr/profile.html\">press HERE to RETRY</a>");
}
}
}
}
}
Order.java
importjava.sql.*;
import java.io.*;
importjava.util.*;
String title=req.getParameter("title");
String count1=req.getParameter("no");
String date=req.getParameter("date");
String cno=req.getParameter("cno");
int count=Integer.parseInt(count1);
try {
Connection
con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","scott","tiger");
int flag=0,amount,x;
while(rs.next()) {
if(id.equals(rs.getString(1))&&pwd.equals(rs.getString(2))) {
flag=1;
}
}
if(flag==0) {
pw.println("<a href=\\"/tr/order.html\\">press HERE to RETRY</a>");
}
else {
String s="select cost from book where title="+title+"";
ResultSet rs1=stmt2.executeQuery(s);
int flag1=0;
while(rs1.next()) {
flag1=1;
x=Integer.parseInt(rs1.getString(1));
amount=count*x;
pw.println("AMOUNT :"+amount+"<br><br><br><br>");
stmt1.executeUpdate("insertintodetails
values('"+id+",'"+title+"'+amount+'","'+cno+'")"');
pw.println("YOUR ORDER has taken<br>");
}
if(flag1==0) {
pw.println("<a href=\\"/tr/order.html\\">press HERE to RETRY</a>");
}
}
con.close();
}
}
}
Outputs:
Week 9:
Redo the previous task using JSP by converting the static web pages of assignments
2 into
dynamic webpages. Create a database with user information and books information
and books information. The books catalogue should be dynamically loaded from the
database. Follow the MVC architecture while doing the website.
Program:
1) Create your own directory under tomcat/webapps (e.g. tr1)
2) Copy the html files in tr1
3) Copy the jsp files also into tr1
4) Start tomcat give the following command
Catalina.bat run
At install dir/bin
5) at I.E give url as http://localhost:8081/tr1/main.html
Main.html:
<html>
<br><br><br><br><br><br>
<b>Welcometoonlinebookstorage.
PressLOGINifyouarehavingid
OtherwisepressREGISTRATION
</b></PRE></h2>
<br><br><pre>
</body></html>
Login.html:
<html>
<formname="myform"method="post"action=/tr1/login.jsp">
<divalign="center"><pre>
LOGINID:<inputtype="passwors"name="pwd"></
pre><br><br>PASSWORD:<inputtype="password"name="pwd"></
pre><br><br>
</div>
<br><br>
<divalign="center">
<inputtype="submit"value="ok"onClick="validate()">     <inputtype
="reset"
value="clear">
</form>
</body>
</html>
Reg.html:
<html>
<bodybgcolor="pink"><br><br>
<formname="myform"method="post"action="/tr1/reg.jsp">
NAME :<inputtype="text"name="name"><br>A
DDRESS:<inputtype="text"name="addr"><br>
CONTACTNUMBER:<inputtype="text"name="phno"><br>LO
GINID : <inputtype="text" name="id"><br>
PASSWORD:<inputtype="password"name="pwd"></pre><br><br>
</div>
<br><br>
<divalign="center">
<inputtype="submit"value="ok"onClick="validate()">()">  &nbsp
;  <inputtype="reset"value="clear">
</form>
</body>
</html>
Profile.html:
<html>
<bodybgcolor="pink"><br><br>
<formname="myform"method="post"action="/tr1/profile.jsp">
LOGINID :<inputtype="text"name="id"><br>
</pre><br><br>
</div>
<br><br>
<divalign="center">
<inputtype="submit"value="ok"onClick="validate()">()">  &nbsp
;  <inputtype="reset"value="clear">
</form>
</body>
</html>
Catalog.html:
<html>
<bodybgcolor="pink"><br><br><br>
<formmethod="post"action="/tr1/catalog.jsp">
BOOKTITLE:<inputtype="text"name="title"><br>
</pre><br><br>
</div>
<br><br>
<divalign="center">
<inputtype="submit"value="ok"
nbsp;  <inputtype="reset"value="clear"
</form>
</body>
</html>
Login.jsp:
<%
\ \
Driverd=neworacle.jdbc.driver.OracleDriver();DriverManager.registerDri
ver(d);
Connection
Statementstmt=con.createStatement();
ResultSetrs=stmt.executeQuery(sqlstmt);int
flag=0;
while(rs.next())
{
flag=1;
}
if(flag==0)
{
\ \
}
else
{
out.pr \ \ \ \
\ \ \ \
\ \ \ \
%>
Reg.jsp:
%@pag
<%
\ \
Strin
intno=Integer.parseInt(phno);
Driver
d=neworacle.jdbc.driver.OracleDriver();DriverM
anager.registerDriver(d);
Connection
con=DriverManager.getConnect
ResultSetrs=stmt.executeQuery(sqlstmt);int
flag=0;
while(rs.next())
{
if(id.equals(rs.getString(1)))
{
flag=1;
}
}
if(flag==1)
{
\ \
}
else
{
Statementstmt1=con.createStatement();
\ \
} %>
Profile.jsp:
<%
\ \
Driver
d=neworacle.jdbc.driver.OracleDriver();DriverManager.regiserDriver(d
);
Connectioncon=
ResultSetrs=stmt.executeQuery(sqlstmt);intf
lag=0;
\ \
ONENO
flag=1;
while(rs.next())
{
}
if(flag==0)
{
\ \
}
%>
Catalog.jsp:
<%
\ \
Driverd=neworacle.jdbc.driver.OracleDriver();DriverManager.regiserD
river(d);
Connectioncon=
lag=0;
while(rs.next())
{
flag=1;
\ \
ou
}
if(flag==0)
{
\ \
}
%>
Order.jsp:
<%
\ \
Stringcount1=reque
intcount=Integer.parseInt(count1);
Driverd=neworacle.jdbc.driver.OracleDriver();DriverManager.regiserD
river(d);
Connectioncon=
lag=0,amount,x;
while(rs.next())
{
if(id.equals(rs.getString(1))&&pwd.equals(rs.getString(2)))
{
flag=1;
}
}
if(flag==0)
{
\ \
}
else
{
ResultSetrs1=stmt2.executeQuery(s);intflag1=
0;
while(rs1.next())
flag1=1;x=Integer.parseInt(rs1.getStri
ng(1));amount=count*x;
}
if(flag1==0)
{
\ \
}
}
Out Put:

WT Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT Manual

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGIES

Department of Computer Science & Engineering

Week1:Write a PHP script to print prime numbers between 1-50

<title>PHP Program to print Prime Numbers</title>

<h1> Prime numbers from 1-to 50</h1>

echo "Prime number :$i</br>";

Prime numbers from 1-to 50

The Descending Order is:

2. Registration and user Login:

c. User Profile Page

/* Full-width input fields */

/* Set a style for all buttons */

/* Extra styles for the cancel button */

/* Float cancel and signup buttons and add an equal width */

/* Add padding to container elements */

<form action="login.html" style="border:1px solid #ccc">

<label for="psw-repeat"><b>Repeat Password</b></label>

/* Full-width input fields */

/* Add a background color when the inputs get focus */

/* Set a style for all buttons */

/* Extra styles for the cancel button */

/* Add padding to container elements */

/* The Modal (background) */

/* Style the horizontal ruler */

/* The Close Button (x) */

<h2>Modal Sign up Form</h2>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Sign

<div id="id01" class="modal">

// When the user clicks anywhere outside of the modal, close it

6. Order Conformation Page

Step 1: Download and Install Tomcat

Step 3: Now, we need to create an Environment Variable JAVA_HOME.

Step 4: Configure Tomcat Server

Step 4(a) "conf\web.xml"; Enabling a Directory Listing

Step 4(b) "conf\server.xml file"; set the TCP Port Number

Step 4(c) "conf\context.xml"; Enabling Automatic Reload

Step 5(a) Start Server

Step 5(b) Access the Server

Step 5(c) How to Shutdown Server

You might also like