Web Technology Lab

WEB TECHNOLOGIES LAB MRCET
WEEK 1:
Design the following static web pages required for an online book store web site.
1) HOME PAGE: The static home page must contain three frames.
2) LOGIN PAGE
3) CATOLOGUE PAGE: The catalogue page should contain the details of all the books
available in the web site in a table.
4) REGISTRATION PAGE
Aim: Design the following static web pages required for online book store.
1. Home page:- the static home page must contains three pages
2. Top frame:- logo and college name and links to homepage, login page, registration page
and catalogue page
3. Left frame:- at least four links for navigation which will display the catalogue of
Respective links
4. Right frame:- the pages to links in the left frame must be loaded here initially it Contains
the description of the website.
DESCRIPTION: In this program the entire web paged are created by using basic HTML
tags. Home page is divided into 3 frames by using <frameset> and <frame> tags. A frame is
used to display a web page within a web page.
<frameset>:
 The <frameset> tag defines a frameset.
 The <frameset> element holds one or more <frame> elements.
 Each <frame> element can hold a separate document.
 The <frameset> element specifies HOW MANY columns or rows there will be in the
frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
<frame>:
 The <frame> tag defines one particular window (frame) within a <frameset>.
 Each <frame> in a <frameset> can have different attributes, such as border, scrolling,
the ability to resize, etc.
PROGRAM:
home.html:
<frameset rows="40%,*">
<frame src="top.html" noresize scrolling="NO" name="topframe">
<frameset cols="15%,*">
<frame src="left.html" noresize scrolling="NO" name="leftframe">
<frame src="right.html" noresize name="rightframe" scrolling="auto">
</frameset>
</frameset>
top.html:
<html>
<head>
<title>Top Frame</title>
</head>
<body bgcolor="YellowGreen ">
<img src="images/logo1.png" width="125" height="115" align="left">
DEPARTMENT OF CSE Page 1

<img src="images/cse.png" width="125" height="115" align="right">
<center>
<marquee bgcolor="yellow" width="650" behavior="alternate">
<font face="Brush Script MT" size="8" color="green"><b><i>Online Book Store</i></b>
</font>
</marquee> <br>
<font face="Brush Script" size="6" color="white"><b>Created & Maintained By
MRCET</b></font>
</center>
<br>
<table width="100%" height="50%" cellspacing=10>
<tr align="center">
<td> <a href="Home.html" target="_parent"><font face="Brush Script" size="6"
color="navy">HOME </a> </td>
<td> <a href="login.html" target="rightframe"><font face="Brush Script" size="6"
color="navy">LOGIN</a> </td>
<td> <a href="registration.html" target="rightframe"> <font face="Brush Script"
size="6" color="navy">REGISTER </a> </td>
<td> <a href="catalogue.html" target="rightframe"> <font face="Brush Script"
size="6" color="navy">CATALOGUE</a> </td>
</tr>
</table>
</body>
</html>
left.html:
<html>
<body align="center" bgcolor="bisque"> <br>
<a href="cse.html" target="rightframe"><font size="6">CSE</font></a><br><br>
<a href="ece.html" target="rightframe"><font size="6">ECE</font></a><br><br>
<a href="eee.html" target="rightframe"><font size="6">EEE</font></a><br><br>
<a href="mech.html" target="rightframe"><font size="6">MECH</font></a><br>
</body>
</html>
right.html:
<html>
<body bgcolor="orange">
<center>
<img src="images/Books.jpg" height="170"><br>
<font face="Brush Script MT" size="5" color="blue">
<h1><b>Welcome to the Online Book Store!!!</b></font><br />
<font face="Brush Script MT" size="5" color="red">
<h2><b> "A Huge Collection Of Engineering E-Books"</b></h2></font>
</center>
</body>
</html>

cse.html:
<html>
<head><title>CSE</title></head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Computer Science and Engineering</h1></font></center>
<br>
<table align="center">
<tr>
<td>Text Books</td>
<td>
<select >
<option value="select the book" selected>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
</select>
</td></tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method=post action="order.html">
<input type="submit" value=ok />
</form>
</td>
</tr>
</table>
<center>
<pre> Cost of one book is"500" + shipping "100" </pre>
</center>
</body>
</html>
ece.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ul>
<li>Digital Circuits</li> <li>Signals and Systems</li> <li>Digital Communication</li>
</ul>
</h2>
</body>
</html>

eee.html:
<html>
<h1><font color="blue">Electrical and Electronics Engineering</font></h1>
<h2>
<ul type="square">
<li>Concepts in Electric Circuits</li>
<li>Introduction to Electronic Engineering</li>
<li>Electrical Power</li>
</ul>
</h2>
</body>
</html>
mech.html:
<html>
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ol type="I">
<li>Theory of Machines</li>
<li>Automation and Robotics</li>
<li>Engineering Fluid Mechanics</li>
</ol>
</h2>
</body>
</html>
catalogue.html:
<html>
<head>
<title> Catalogue </title>
</head>
<body bgcolor="pink">
<form action="order.html">
<table border="1" width="100%">
<tr>
<td>
<img src="images/wt.jpg" width=100 height=100/>
</td>
<td> Book: Web Technologies <br> Author: Uttam K. Roy <br> Publication:Oxford
University Press</td> <td>531    </td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
<tr>
<td> <img src="images/php.jpg" width=100 height=100/></td>
<td> Book: PHP & MySQL Web Development <br> Author:Luke Welling & Laura
Thompson <br> Publication:PEARSON</td> <td> 898     </td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
</table> </form>
</body> </html>

login.html:
<html>
<body bg color="pink">
<basefont face="Cambria" size="4"> <br>
<center>
<img src="images/login.jpg" width="385" height="135" /><br />
<font face="Brush Script MT" size="7" color="purple">
<b>Enter Login Details:</b>
</font>
</center>
<form name="f1" method="post" action="right.html">
<table align="center" width="100" height="150" cellspacing=”15”>
<tr><td><b>Login ID:</b></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="t2"></td>
</tr>
<tr align="center">
<td><input type="submit" name="b1" value="Submit"></td>
<td><input type="reset" name="b2" value="Reset"></td>
</tr>
</table> </form> </basefont> </body> </html>
registration.html:
<html>
<head><title>Registration Form</title></head>
<body bgcolor="#E4F0F8">
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />
<form action="right.html">
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font>
<input type='text' id='lastname' /><br /><br />
EmailAddress<font color="red">* </font>
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font>
<font color="redblue">e.g. smith@hotmail.com</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font>
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font>
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font>
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form> </body> </html>

order.html:
<html>
<head><title>order conformation</title></head>
<body bgcolor="cyan">
<center>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU...Visit Again</h2>
</center>
</body>
</html>
OUTPUT:


EXERCISE:
1. Create your class time table in a webpage.
2. Design the static web pages required for an online shopping cart.

WEEK - 4: Develop and demonstrate JavaScript with POP-UP boxes and functions for
the following problems:
a) Input: Click on Display Date button using onclick( ) function
Output: Display date in the textbox
b) Input: A number n obtained using prompt
Output: Factorial of n number using alert
c) Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using alert
d) Input: A number n obtained using prompt and add another number using confirm
Output: Sum of the entire n numbers using alert
PROGRAM:
a) date.html
<html>
<body>
<script>
function display(){
var x="You have clicked";
var d=new Date();
var date=d.getDate();
var month=d.getMonth();
month++;
var year=d.getFullYear();
document.getElementById("dis").value=date+"/"+month+"/"+year;
}
</script>
<form>
<input type="text" id="dis" /><br />
<input type="button" value="Display Date" onclick="display()" />
</form>
<body>
</html>
OUTPUT:
b) factorial.html
<html>
<head>
<title>factorial</title>
<script language='javascript'>

function factorialcalc()
{
number = parseint(prompt("enter a number, i'll calculate its factorial", "whole
numbers bigger than zero, please"))
factorial = 1
for (i=1; i <= number; i++)
{
factorial = factorial * i
}
alert("the factorial of " + number + " is " + factorial)
}
</script>
</head>
<body><form name=frm>
<input type=button value='factorial' onclick="factorialcalc();">
</form>
</body>
</html>
OUTPUT:

c) multable.html
<html>
<head><title> Multiplication Table </title></head>
<body>
<script type="text/javascript">

</script>
</body>
</html>
OUTPUT:

d) sum of n numbers.html
<html>
<head><title>sum of n numbers using popup boxes</title>
<script language='javascript'>
function addsum()
{
alert("you're going to give me a list of numbers. i'm going to add them together for you");
var keepgoing = true
var sumofnums = 0
while (keepgoing) {
sumofnums = sumofnums + parseint(prompt("what's the next number to add?",""))
keepgoing = confirm("add another number?")
}
alert("the sum of all your numbers is " + sumofnums)
}
</script>
</head>
<body>
<form name=frm>
<input type=button value='sum of n numbers' onclick="addsum();">
</form>
</body>
</html>
OUTPUT:
EXERCISE:
1. Write a JavaScript program to find out the Fibonacci Series.
2. Write a JavaScript program to check the given number is palindrome or not.

WEEK - 5:
Write an HTML page that contains a selection box with a list of 5 countries. When the
user selects a country, its capital should be printed next in the list. Add CSS to
customize the properties of the font of the capital (color,bold and font size).
<html>
<head>
<title>WT Lab manual program no. 3</title>
</head>
<style>
h1
{
color: red;
text-align: center;
}
.textbox1
{
color: blue;
font-size: 30px;
font-weight: bold;
}
</style>
<body>
<center>
<h1> Select the country name to find its capital</h1>
<form name="myform">
Select Country <select name="country" id="sbox1" onClick="myFunction()" required>
<option value=""></option>
<option value="NEW DELHI">INDIA</option>
<option value="CANBERRA">AUSTRALIA</option>
<option value="WASHINGTON D.C">AMERICA</option>
<option value="LONDON">UNITEDKINGDOM</option>
<option value="BERLIN">GERMANY</option>
</select><br><br>
Capital <input type="text" class="textbox1" id="sbox2">
</form>
</center>
<script>
function myFunction()
{ var a=document.getElementById("sbox1").value;
document.getElementById("sbox2").value=a; }
</script> </body> </html>
OUTPUT:

Week - 6:
Write an HTML page including any required JavaScript that takes a number from text
field in the range of 0 to 999 and shows it in words. It should not accept four and above
digits, alphabets and special characters.
AIM: To convert number to words using JavaScript
PROGRAM:
0-999.html
<html>
<head>
<title>HTML - Convert numbers to words using JavaScript</title>
<SCRIPT language=Javascript>

</SCRIPT>
<script>
function NumToWord(inputNumber, outputControl)
{
var str = new String(inputNumber)
var splt = str.split("");
var rev = splt.reverse();
var once = ['Zero', ' One', ' Two', ' Three', ' Four', ' Five', ' Six', ' Seven', ' Eight', ' Nine'];
var twos = ['Ten', ' Eleven', ' Twelve', ' Thirteen', ' Fourteen', ' Fifteen', ' Sixteen', '
Seventeen', ' Eighteen', ' Nineteen'];
var tens = ['', 'Ten', ' Twenty', ' Thirty', ' Forty', ' Fifty', ' Sixty', ' Seventy', ' Eighty', '
Ninety'];
numLength = rev.length;
var word = new Array();
var j = 0;
for (i = 0; i < numLength; i++) {
switch (i) {
case 0:
if ((rev[i] == 0) || (rev[i + 1] == 1)) {
word[j] = '';
}
else {
word[j] = once[rev[i]];
}
word[j] = word[j];
break;
case 1:
aboveTens();

break;
case 2:
if (rev[i] == 0) {
word[j] = '';
}
else if ((rev[i - 1] == 0) || (rev[i - 2] == 0)) {
word[j] = once[rev[i]] + " Hundred ";
}
else {
word[j] = once[rev[i]] + " Hundred and";
}
break;
default: break;
}
j++;
}
function aboveTens() {
if (rev[i] == 0) { word[j] = ''; }
else if (rev[i] == 1) { word[j] = twos[rev[i - 1]]; }
else { word[j] = tens[rev[i]]; }
}
word.reverse();
var finalOutput = '';
for (i = 0; i < numLength; i++) {
finalOutput = finalOutput + word[i];
}
document.getElementById(outputControl).innerHTML = finalOutput;
}
</script>
</head>
<body>
<h1>HTML - Convert numbers to words using JavaScript</h1>
<input id="Text1" type="text" onkeypress="return isNumberKey(event)"
onkeyup="NumToWord(this.value,'divDisplayWords');" maxlength="3" style="background-
color: #efefef; border: 2px solid #CCCCC; font-size: large" />
<br /> <br />
<div id="divDisplayWords" style="font-size: 30; color: Teal; font-family: Arial;">
</div>
</body>
</html>
OUTPUT:

WEEK - 7: Develop and demonstrate PHP Script for the following problems:
a) Write a PHP Script to find out the Sum of the Individual Digits.
b) Write a PHP Script to check whether the given number is Palindrome or not
a) Find out Sum of the individual Digits

<?php
$n=323;
$sum=0;
while($n>0)
{
$r=$n%10;
$sum+=$r;
$n=$n/10;
}
echo "sum of individual digits are: $sum";
?>
Output:

b) Check whether the given number is Palindrome or not
<?php
$n=323;
$t=$n;
$rev=0;
while($n>0)
{
$r=$n%10;
$rev=$rev*10+$r;
$n=(int)($n/10);
}
echo "Reverse digits are: $rev <br>";
if($t==$rev)
echo "$rev is a Palindrome";
else
echo "$rev is not a Palindrome";
?>
Output:
EXERCISE:
1. Write a PHP Script to find the factorial of a given number.
2. Write a PHP Script to find the fibonacci series of a given number.

Week - 8:
Create an XML document that contains 10 users information. Write a Java Program,
which takes User Id as input and returns the user details by taking the user information
from XML document using DOM parser or SAX parser.
AIM: Takes User Id as input and returns the user details using XML with DOM
PROGRAM:
users.xml
<usersinformation>
<user>
<rollno>501</rollno>
<name>aaa</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<name>bbb</name>
</user>
<user>
<name>ccc</name>
</user>
<user>
<name>ddd</name>
</user>
<user>
<name>eee</name>
</user>
<user>
<name>fff</name>
</user>
<user>
<name>ggg</name>

</user>
<user>
<name>hhh</name>
</user>
<user>
<name>iii</name>
</user>
<user>
<name>jjj</name>
</user>
</usersinformation>
UserDom.java
import java.io.File;
import javax.xml.parsers.*;
import org.w3c.dom.*;
import java.util.Scanner;
public class UserDom
{
public static void main(String args[]) throws Exception
{
DocumentBuilderFactory fac=DocumentBuilderFactory.newInstance();
DocumentBuilder b=fac.newDocumentBuilder();
Document doc=b.parse(new File("users.xml"));
doc.getDocumentElement().normalize();
Element root=doc.getDocumentElement();
Scanner in=new Scanner(System.in);
System.out.println("Enter User ID:");
int n=in.nextInt();
int flag=0;
NodeList nl=doc.getElementsByTagName("user");
for(int i=0;i<nl.getLength();i++)
{
Node node=nl.item(i);
if(node.getNodeType()==Node.ELEMENT_NODE)
{
Element e=(Element)node;
int
x=Integer.parseInt(e.getElementsByTagName("rollno").item(0).getTextContent());
if(x==n)
{

System.out.println(root.getNodeName());
System.out.println("--------------------------------");
System.out.println("rollno:\t"+e.getElementsByTagName("rollno").item(0).getTextContent());
System.out.println("name:\t"+e.getElementsByTagName("name").item(0).getTextContent());
System.out.println("branch:\t"+e.getElementsByTagName("branch").item(0).getTextContent());
System.out.println("college:"+e.getElementsByTagName("college").item(0).getTextContent());
flag=1;
break;
}
else
{
flag=0;
}
}
}
if(flag==0)
System.out.println("User not available");
}
}
OUTPUT:
EXERCISE:
1. Write a XML program to validate student details(Rno, Name, college & branch)
using DTD and Schemas.
2. Write a XML program to validate book details( Title of the book, Author Name,
ISBN no & Publication) using DTD and Schemas.

WEEK - 9:
Implement the following web applications using (a) PHP, (b) Servlets and (c) JSP.
9 (i) (a). A web application that takes a name as input and on submit it shows a hello
<name> page where name is taken from the request. It shows the start time at the right
top corner of the page and provides a logout button. On clicking this button, it should
show a logout page with Thank You <name > message with the duration of usage (hint:
Use session to store name and time).
AIM: To design an application that use session to store data.
PROGRAM:
login.html
<html>
<form action="home.php" method="post">
Username<input type="text" name="text1"><br>
<input type="submit" value="SignIn" name="submit">
</form>
</html>
Output of login.html:
Home.php:
<?php
session_start();
date_default_timezone_set("Asia/Calcutta");
$_SESSION['luser'] = $_POST['text1'];
$_SESSION['start'] = time();
$tm=$_SESSION['start'];
print "<p align='right'>Session started at " . date("h:i:sa",$tm) . "<br>";
print "<form action='logoutpage.php' method='post'>";
print "<input type='submit' value='Logout'></p>";
print "</form>";
print "Hello " . $_SESSION['luser'];
?>

Output of home.php:
Logoutpage.php:
<?php
session_start();
date_default_timezone_set("Asia/Calcutta");
print "<p align='right'>Session started at " . date("h:i:sa",time()) . "</p><br>";
print "Thank you " . $_SESSION['luser'];
$sessiontime = time() - $_SESSION['start'];
print "<br> Your session duration: " . $sessiontime . " seconds";
session_destroy();
?>
Output of Logoutpage.php:

9 (ii) (a). Write a PHP Program to display current Date, Time and Day using PHP
Script.
AIM: To display current date , Time and Day using PHP.
PROGRAM:
date.php
<?php
date_default_timezone_set ("Asia/Calcutta");
echo "Date: ";
echo date("d/m/y");
echo "<br> Time: ";
echo date(" H:i:s A", time());
echo "<br> Day: ";
$day=date("l");
echo $day;
?>
Output:

9 (iii) (a). A web application that takes name and age from an HTML page. If the age is
less than 18, it should send a page with “Hello <name>, you are not authorized to visit
the site” message, where <name> should be replaced with the entered name. Otherwise
it should send “Welcome <name> to this site” message.
AIM: To design an application to validate age are less than 18 or more than 18 using PHP.
PROGRAM:
checkage.html
<html>
<body bgcolor="bisque">
<form action='home.php' method='post'>
<center><b><font color="blue" size="10">Login</font></b></center><br><br>
User name: <input type='text' name='name'><br>
age: <input type='text' name='age'><br>
<input type='submit'value='Login'>
</form>
</body>
</html>
home.php
<?php
$name = $_POST['name'];
$age = $_POST['age'];
if ($age < 18)
print "Hello " . $name . " you are not authorized to visit this site.";
else
print "Welcome " . $name . " to this site."
?>
Output:

9 (iv) (a). A web application that lists all cookies stored in the browser on clicking “List
Cookies” button. Add cookies if necessary.
AIM: To design an application to develop cookies using PHP.
PROGRAM:
cookieset.php
<html>
<head> <title> User Acess </title> </head>
<body bgcolor="bisque"> <br>
<center>
<?php
$firstname = 'aaa';
$middlename = 'bbb';
$lastname = 'ccc';
setcookie('first_name',$firstname,time() + 86400);
setcookie('middle_name',$middlename,time() + 86400);
setcookie('last_name',$lastname,time() + 86400);
print "cookies set";
?>
</center>
</body>
</html>
Output:

Listcookie.php
<html>
<head> <title> Cookie </title> </head>
<body bgcolor="GreenYellow">
<center>
<form action="" method="post">
<input type="submit" value="LIST COOKIES" name="list">
</form>
</center>
<?php
error_reporting(0);
if($_POST['list'])
{
foreach($_COOKIE as $key=>$val)
{
echo "<center>".$key." is ".$val."<br>
</center>";
}
}
?>
</body>
</html>
Output:

9 (i) (b). A web application that takes a name as input and on submit it shows a hello
<name> page where name is taken from the request. It shows the start time at the right
top corner of the page and provides a logout button. On clicking this button, it should
show a logout page with Thank You <name > message with the duration of usage (hint:
Use session to store name and time).
USING SERVLET
Session1.html
<html>
<head> <title> SESSION LOGIN </title> </head>
<body>
<center>
<form action="http://localhost:8080/Session1/session6vib" method="get">
Enter Name: <input type="text" name="uname"> <br>
<input type="submit" value="LOGIN" name="register">
</form>
</center>
</body>
</html>
Session1.java
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
public class Session1 extends HttpServlet
{
public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException,
ServletException
{
try
{
res.setContentType("text/html");
PrintWriter out=res.getWriter();
out.println("<form method=get action=session26vib>");
Date d=new Date();
out.println("<p align=right> Time:"+d.getTime()+"</p>");
String un=req.getParameter("uname");
HttpSession session=req.getSession();
session.setAttribute("user",un);
session.setAttribute("time",d.getTime());
out.println("Hello\t"+un);
out.println("<br><br> <input type=submit value=logout>");
out.println("</form");
}
catch(Exception e)
{
e.printStackTrace();
}
} }

Session2.java
import java.io.*;
import java.util.*;
public class Session2 extends HttpServlet
{
public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException,
ServletException
{
try
{
PrintWriter out=res.getWriter();
HttpSession session=req.getSession();
Date d2=new Date();
String un=(String)session.getAttribute("user");
Long t1=(Long)session.getAttribute("time");
Long t2=d2.getTime();
session.invalidate();
out.println("Thank you\t"+un);
out.println("<br><br> Session duration: '"+(t2-t1)/(60*60)+"'seconds");
}
catch(Exception e)
{
e.printStackTrace();
}
}
}
web.xml
<?xml version="1.0"?>
<web-app>
<servlet>
<servlet-name>session1</servlet-name>
<servlet-class>Session1</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/session6vib</url-pattern>
</servlet-mapping>
<servlet>
<servlet-class>Session2</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/session26vib</url-pattern>
</servlet-mapping>
</web-app>

Output:

9 (ii) (b). Write a Servlet application to print the current date and time.
Aim: To print Current date and time using Servlet.
USING SERVLET
DateSrv.java
import java.io.*;
public class DateSrv extends GenericServlet
{
//implement service()
public void service(ServletRequest req, ServletResponse res) throws IOException,
ServletException
{
//set response content type
//get stream obj
PrintWriter pw = res.getWriter();
//write req processing logic
java.util.Date date = new java.util.Date();
pw.println("<h2>"+"Current Date & Time: " +date.toString()+"</h2>");
//close stream object
pw.close();
}
}
web.xml
<?xml version="1.0"?>
<web-app>
<servlet>
<servlet-name>Date</servlet-name>
<servlet-class>DateSrv</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Date</servlet-name>
<url-pattern>/date</url-pattern>
</servlet-mapping>
</web-app>
Output:

9 (iii) (b). A web application that takes name and age from an HTML page. If the age is
less than 18, it should send a page with “Hello <name>, you are not authorized to visit
the site” message, where <name> should be replaced with the entered name. Otherwise
it should send “Welcome <name> to this site” message.
AIM: To design an application to validate age are less than 18 or more than 18 using SERVLET.
USING SERVLET
index.html:
<html
<head>
<title>VoterApp</title>
</head>
<body>
<form action= "http://localhost:8080/CheckAge/check" method="get">
<fieldset style="width:20%; background-color:#80ffcc">
<table>
<tr><td>Name</td><td><input type="text" name="name"></td></tr>
<tr><td>Age</td><td><input type="text" name="age"></td></tr>
<tr><td></td>
<td><input type = "submit" value="Check Eligibility"></td></tr>
</table>
</fieldset>
</form>
</body>
</html>
VoterSrv.java:
import java.io.*;
import java.util.*;
public class VoterSrv extends HttpServlet
{
public void service(HttpServletRequest req, HttpServletResponse res) throws
IOException,ServletException
{
//set response content type
//get printWrite obj
PrintWriter pw = res.getWriter();
//read form data from page as request parameter
String name = req.getParameter("name");
int age = Integer.parseInt(req.getParameter("age"));
if (age>=18)
{
pw.println("<font color='green' size='4'>Welcome "+name+" to this site</font>");
}
else
pw.println("<font color='red' size='4'>Hello "+name+", you are not authorized to
visit the site</font>");

//add hyperlink to dynamic page
pw.println("<br><br><a href= 'index.html'>back</a>");
//close the stream
pw.close();
}
}
web.xml:
<web-app>
<servlet>
<servlet-name>abc</servlet-name>
<servlet-class>VoterSrv</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>abc</servlet-name>
<url-pattern>/check</url-pattern>
</servlet-mapping>
</web-app>
Output:

9 (iv) (b). A web application that lists all cookies stored in the browser on clicking “List
AIM: To design an application to develop cookies using Servlet.
USING SERVLET
index.html
<html>
<head>
<title>CookiesExample</title>
</head>
<body>
<form method='get' action='http://localhost:8080/MyServlet1/login'>
<fieldset style="width:14%; background-color:#ccffcc">
User Name:<input type="text" name="Name"/><br/>
Password:<input type="password" name="Password"/><br/>
<input type="submit" value="submit"/>
</form>
</fieldset>
</form>
</body>
</html>
MyServlet1.java
import java.io.*;
public class MyServlet1 extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response) {
try{
response.setContentType("text/html");
PrintWriter pwriter = response.getWriter();
String uname = request.getParameter("Name");
String upassword = request.getParameter("Password");
pwriter.print("Cookies Set:<br>Hello "+uname);
pwriter.print("<br>Your Password is: "+upassword);
//Creating two cookies
Cookie c1=new Cookie("Name",uname);
Cookie c2=new Cookie("Password",upassword);
//Adding the cookies to response header
response.addCookie(c1);
pwriter.print("<br><a href='welcome'>LIST COOKIES</a>");
pwriter.close();
}catch(Exception exp){
System.out.println(exp);
}
}
}

MyServlet2.java
import java.io.*;
public class MyServlet2 extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response){
try{
PrintWriter pwriter = response.getWriter();
//Reading cookies
Cookie c[]=request.getCookies();
//Displaying User name and User Password value from cookie
for(int i=0;i<c.length;i++){
pwriter.print("<br>"+c[i].getName()+": "+c[i].getValue());//printing name and value of
cookie
}
pwriter.close();
}catch(Exception exp){
System.out.println(exp);
}
}
}
web.xml
<web-app>
<display-name>Cookies Example</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Servlet1</servlet-name>
<servlet-class>MyServlet1</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<servlet>
<servlet-class>MyServlet2</servlet-class>
</servlet>
<servlet-mapping>
<url-pattern>/welcome</url-pattern>
</servlet-mapping>
</web-app>

Output:

9 (iv) (c). A web application that lists all cookies stored in the browser on clicking “List
AIM: To design an application to develop cookies using JSP.
USING JSP
cookie.html
<html>
<head> <title> Calculator </title> </head>
<body>
<form action="http://localhost:8080/jsp/cookie1.jsp" method="post">
Enter your name:<input type="text" name="name1" placeholder="Enter name">
<input type="submit" value="Add cookie">
</form>
</center>
</body>
</html>
cookie1.jsp
<%@page language="java" import="java.sql.*" errorPage=""%>
<%
String name=request.getParameter("name1");
Cookie c1=new Cookie ("firstname",name);
c1.setMaxAge(50*50);
%>
<form method="get" action="http://localhost:8080/jsp/cookie2.jsp">
<input type="submit" value="List Cookies">
</form>
cookie2.jsp
<%@page language="java" import="java.sql.*" errorPage=""%>
<title> List of Cookies </title>
<h1> List of Cookies </h1>
<%
Cookie[] cookies=request.getCookies();
%>
<table border=1>
</tr>
<%
out.println("<td> Cookie Name </td> <td> Cookie value </td>");
for(int i=0;i<cookies.length;i++)
{
out.println("<h2> <tr> <td>
"+cookies[i].getName()+"</td><td>"+cookies[i].getValue()+"</td></tr>");
}
%>
</tr>
</table>

Output:

(b) USING SERVLET
DBExample.java
import java.io.*;
import java.util.*;
import java.sql.*;
public class DBExample extends HttpServlet{
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
{
String JDBC_DRIVER="com.mysql.jdbc.Driver";
String DB_URL="jdbc:mysql://localhost/csec";
String USER = "root";
String PASS = "TIGER";
PrintWriter out = response.getWriter();
out.println("<html><body><h1>Welcome to MRCET</h1>\n") ;
try{
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection(DB_URL,
USER, PASS);
Statement stmt = conn.createStatement();
String sql;
sql = "SELECT * FROM Emp";
ResultSet rs = stmt.executeQuery(sql);
while(rs.next()){
out.println("ID: " + rs.getString(1));
out.println("Age: " + rs.getString(2));
out.println("First Name: " + rs.getString(3)+"<br>");
}
rs.close();
stmt.close();
conn.close();
}catch(SQLException se){
out.println(se.getMessage());
}catch(Exception e){
out.println(e.getMessage());
}
out.println("</body></html>");
}
}

web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<servlet>
<servlet-name>DBExample</servlet-name>
<servlet-class>DBExample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DBExample</servlet-name>
<url-pattern>/db</url-pattern>
</servlet-mapping>
</web-app>
OUTPUT:

(c) USING JSP
import java.sql.*;
class MysqlCon{
public static void main(String args[]){
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection(
"jdbc:mysql://localhost:3306/sonoo","root","root");
//here sonoo is database name, root is username and password
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from emp");
while(rs.next())
System.out.println(rs.getInt(1)+" "+rs.getString(2)+" "+rs.getString(3));
con.close();
}catch(Exception e){ System.out.println(e);}
}
}
OUTPUT:

WEEK - 11:
Modify the above PHP program to use an xml instead of database
AIM: To design an application that verifies user details from an xml using PHP.
PROGRAM:
db.php
Userlogin.xml:
<Authentication>
<user>
<username>cse</username>
<password>5</password>
</user>
<user>
<username>mrcet</username>
<password>mlrd</password>
</user>
</Authentication>
Loginform.php:
<html>
<head>
<title> Registration page </title>
</head>
<body bgcolor="pink">
<?php
$myxml=simplexml_load_file("Userlogin.xml");
$username=$_POST['uname'];
$password=$_POST['upwd'];
$xmlusername="";
$xmlpassword="";
for($i=0;$i<count($myxml);$i++)
{
$xmlusername=$myxml->user[$i]->username;
$xmlpassword=$myxml->user[$i]->password;
if($xmlusername==$username && $xmlpassword==$password)
{
echo "welcome $username";
die();
}
}
echo "Invalid username or password";
?>
</body>
</html>

Loginform.php:
<html>
<head> <title> Login Page </title> </head>
<body bgcolor="bisque">
<center>
<h1> Login Page </h1>
<form action="Loginform.php" method="post">
<table>
<tr> <td> <label> Name: </label> </td>
<td> <input type="text" name="uname" /> </td>
</tr>
<tr> <td> <label> Password: </label> </td>
<td> <input type="password" name="upwd" /> </td>
</tr>
<tr> <td> <input type="submit" value="submit" />
</td>
<td> <input type="reset" value="reset" /> </td>
</tr>
</table> </form> </center> </body> </html>
OUTPUT:

WEEK - 12:
Write a program to design a simple calculator using (a) JavaScript (b) PHP (c) Servlet
and (d) JSP.
(a) USING JavaScript
AIM: To design a simple calculator using JAVASCRIPT.
PROGRAM:
cal.html
<html>
<head>
<title>Calculator</title>
<script language="javascript">
var inputstring="";
function updatestring(value)
{
inputstring=inputstring+value;
document.calculator.input.value=inputstring;
}
</script>
</head>
<body>
<form name="calculator">
<table border="4" align="center" bgcolor="pink" bordercolor="black">
<tr>
<td colspan="4"><input type="text" name="input" maxlength="15" size="27"></td> </tr>
<tr> <td><input type="button" value="clear" onclick="input.value=' ';inputstring=' ' "></td>
<td><input type="button" value="mod" onclick="updatestring('%')"></td>
<td><input type="button" value="*" onclick="updatestring('*')"> </td> </tr>
<tr>
<td><input type="button" value="7" onclick="updatestring('7')"> </td>
<td><input type="button" value="/" onclick="updatestring('/')"> </td> </tr>
<tr>
<td><input type="button" value="-" onclick="updatestring('-')"> </td> </tr>
<tr>
<td><input type="button" value="+" onclick="updatestring('+')"> </td> </tr>
<tr>
<td><input type="button" value="." onclick="updatestring('.')"> </td>
<td><input type="button" value="=" onclick="input.value=eval(inputstring);"> </td> </tr>
</table> </form> </body> </html>

OUTPUT:

(b) USING PHP

AIM: To design an application that works as a simple calculator using PHP.
PROGRAM:
form.html
<html>
<head> <title> scientific calculator </title> </head>
<body bgcolor="bisque"> <br>
<form name='f1' action='add.php' method='post'>
1st Number<input type='text' name='t1'><br>
2nd Number<input type='text' name='t2'><br>
<input type='submit' name='add' value='add'>
<input type='submit' name='sub' value='sub'>
<input type='submit' name='mul' value='mul'>
<input type='submit' name='div' value='div'>
</form>
</body>
</html>
add.php
<?php
$a = $_POST['t1'];
$b = $_POST['t2'];
if (isset($_POST['add']))
{
$c = $a + $b;
print $a . "+" . $b . "=" . $c;
}
if (isset($_POST['sub']))
{
$c = $a - $b;
print $a . "-" . $b . "=" . $c;
}
if (isset($_POST['mul']))
{
$c = $a * $b;
print $a . "*" . $b . "=" . $c;
}
if (isset($_POST['div']))
{
$c = $a / $b;
print $a . "/" . $b . "=" . $c;
}
?>

Output:

(c) USING SERVLETS

AIM: Develop Servlet Application of Basic Calculator(+,-,*,/,%) using ServletInputStream
and ServletOutputStream.
DESCRIPTION:
In java with using 2 operant’s and 1 operator we can calculate the basic mathematically
operation such as addition, subtraction, multiplication, division Servlet is a Java class which
extends the capabilities of server that provides the application accessed by means of request
response model. It uses two interfaces i.e. HTTPRequest & HTTPResponse
HTTPRequest: This is an interface which provides methods for extracting HTTP parameters
from the query or request body depending on the type of request i.e. get or post
HTTPResponse: This interface provides an OutputStream for retrieving information such as
images or PrintWriter for retrieving text output.
PROGRAM:
index.html
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h3>Please Enter Two Numbers :::</h3>
<form method="GET" action="http://localhost:8080/Cal/calc">
Number:<input type="text" id="t1" name="t1"/><br/>
<select name="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select></br>
Number:<input type="text" id="t2" name="t2">
<input type="submit" value="calculate"/></br>
</form>
</body>
</html>
Cal.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Cal extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw= response.getWriter();
int n1 = Integer.parseInt(request.getParameter("t1"));
int n2 = Integer.parseInt(request.getParameter("t2"));
String op=request.getParameter("op");
if(op.equals("+")){pw.println("Addition :::"+(n1+n2));}
else if(op.equals("-")){pw.println("Subtraction :::"+(n1-n2));}
else if(op.equals("*")){pw.println("Multiplication :::"+(n1*n2));}
else if(op.equals("/")){pw.println("Division :::"+(n1/n2));}
else{pw.println("Remainder :::"+(n1%n2));}
pw.close();
}
}
web.xml
<web-app>
<servlet>
<servlet-name>Calculator</servlet-name>
<servlet-class>Cal</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Calculator</servlet-name>
<url-pattern>/calc</url-pattern>
</servlet-mapping>
</web-app>
Output:

Web Technology Lab

Uploaded by

Copyright:

Available Formats

Web Technology Lab

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

Web Technology Lab

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGIES LAB MRCET

DEPARTMENT OF CSE Page 1

DEPARTMENT OF CSE Page 2

DEPARTMENT OF CSE Page 3

DEPARTMENT OF CSE Page 4

DEPARTMENT OF CSE Page 5

DEPARTMENT OF CSE Page 6

DEPARTMENT OF CSE Page 7

DEPARTMENT OF CSE Page 8

DEPARTMENT OF CSE Page 18

DEPARTMENT OF CSE Page 19

DEPARTMENT OF CSE Page 20

DEPARTMENT OF CSE Page 21

DEPARTMENT OF CSE Page 22

DEPARTMENT OF CSE Page 23

DEPARTMENT OF CSE Page 24

a) Find out Sum of the individual Digits

DEPARTMENT OF CSE Page 25

DEPARTMENT OF CSE Page 26

DEPARTMENT OF CSE Page 27

DEPARTMENT OF CSE Page 28

DEPARTMENT OF CSE Page 29

AIM: To design an application that use session to store data.

DEPARTMENT OF CSE Page 30

DEPARTMENT OF CSE Page 31

DEPARTMENT OF CSE Page 32

DEPARTMENT OF CSE Page 33

DEPARTMENT OF CSE Page 34

DEPARTMENT OF CSE Page 35

DEPARTMENT OF CSE Page 36

DEPARTMENT OF CSE Page 37

DEPARTMENT OF CSE Page 38

DEPARTMENT OF CSE Page 39

DEPARTMENT OF CSE Page 40

DEPARTMENT OF CSE Page 41

DEPARTMENT OF CSE Page 42

DEPARTMENT OF CSE Page 43

DEPARTMENT OF CSE Page 44

DEPARTMENT OF CSE Page 50

DEPARTMENT OF CSE Page 51

DEPARTMENT OF CSE Page 55

DEPARTMENT OF CSE Page 56

DEPARTMENT OF CSE Page 57

DEPARTMENT OF CSE Page 58

DEPARTMENT OF CSE Page 59

DEPARTMENT OF CSE Page 60

DEPARTMENT OF CSE Page 61

(b) USING PHP

DEPARTMENT OF CSE Page 62

DEPARTMENT OF CSE Page 63

(c) USING SERVLETS

DEPARTMENT OF CSE Page 64

DEPARTMENT OF CSE Page 65

You might also like