WT Lab Manual
WT Lab Manual
LABORATORY MANUAL
B.TECH
(II YEAR – IV SEM)
(2023-24)
DEPARTMENT OF
COMPUTER SCIENCE AND ENGINEERING
1 Design the following static web pages required for an online book 1-8
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
3 Develop and demonstrate the usage of inline, internal and external 15-17
style sheet using CSS
Develop and demonstrate PHP Script for the following problems: 25-26
7 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
52-57
10 Implement the web applications with Database using
(a) PHP, (b) Servlets and (c) JSP.
58-59
11 Modify the above PHP program to use an xml instead of database
60-67
12 Write a program to design a simple calculator using (a) JavaScript (b)
PHP (c) Servlet and (d) JSP.
EXPERIMENT NO. 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">
<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>
<body bgcolor="Plum">
<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>
<body bgcolor="Plum">
<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. [email protected]</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:
}
}
</script>
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />
<form onsubmit='return formValidator()' 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 />
Email Address<font color="red">* </font>
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font>
<font color="redblue">e.g. [email protected]</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>
OUTPUT:
EXPERIMENT- 3
Develop and demonstrate the usage of inline, internal and external style sheet using
CSS.
Aim: Design a web page using CSS which includes the following:
1) Use different font styles
2) Control the repetition of image with background-repeat and no-repeat property
3) Define style for links as a: link, a: active, a: hover, a: visited
4) Add customized cursors for links.
PROGRAM:
style.css
p.left
{
text-align:left;
color:blue;
font-family:Cambria;
font-size:large;
text-indent:20px;
}
p.center
{
text-align:center;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:-3px;
word-spacing:20px;
font-size:larger;
}
p.right
{
text-align:right;
color:red;
font-family:Tahoma;
font-size:15pt;
text-decoration:overline;
font-style:italic;
}
b#headline
{
color:orange;
font-size:22px;
font-family:arial;
text-decoration:underline;
}
sample.html
<html>
<head>
<style type="text/css">
body
{
background-image:url('images/cse.png');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
background-color:pink;
}
a:link { text-decoration:none;color:orange; }
a:visited { text-decoration:none;color:red; }
a:hover { text-decoration:underline;color:blue; }
a:active { text-decoration:underline;color:purple; }
h3 { color:green; }
.c1{cursor:crosshair}
.c2{cursor:pointer}
.c3{cursor:move}
.c4{cursor:text}
.c5{cursor:wait}
.c6{cursor:help}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="cyan">
<h1 style="color:blue;text-align:center;"> CSS (Inline, Internal and External) </h1>
<p>This Paragraph is a Not Styled</p>
<p class="left">This Paragraph is Styled by class "Left"</p>
<p class="center">This Paragraph is Styled by class "Center"</p>
<p class="right">This Paragraph is Styled by class "Right"</p>
<b>This is normal Bold</b> <br>
<b id="headline">This Bold Text is Styled </b>
<h2><b><a href=" ">This is a link</a></b></h2>
<h3 class="c1">The cursor over this element is plus sign</h3>
<h3 class="c2">The cursor over this element is a pointing hand</h3>
<h3 class="c3">The cursor over this element is a grasping hand</h3>
<h3 class="c4">The cursor over this element is a I bar</h3>
<h3 class="c5">The cursor over this element is a wait</h3>
<h3 class="c6">The cursor over this element is a question mark</h3>
</html>
OUTPUT 1:
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">
<!--
var n=prompt("Enter positive value for n: ","
"); if(!isNaN(n)) {
var table="";
var number="";
for(i=1;i<=10;i++) {
number = n * i;
table += n + " * " + i + " = " + number + "\n";
}
alert(table);
}
else {
alert("Enter positive value");
n=prompt("Enter positive value for n: ","
} ");
document.write(n+" table values displayed using alert ..<br />");
// -->
</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:
Experiment - 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:
Experiment - 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>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which :
evt.keyCode; if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode >
57)) return false;
return true;
}
//-->
</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
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:
Experiment- 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>jbkp</college>
</user>
<user>
<rollno>502</rollno>
<name>bbb</name>
<branch>cse</branch>
<college> jbkp </college>
</user>
<user>
<rollno>503</rollno>
<name>ccc</name>
<branch>cse</branch>
<college> jbkp </college>
</user>
<user>
<rollno>504</rollno>
<name>ddd</name>
<branch>cse</branch>
<college> jbkp </college>
</user>
<user>
<rollno>505</rollno>
<name>eee</name>
<branch>cse</branch>
<college> jbkp </college>
</user>
<user>
<rollno>506</rollno>
<name>fff</name>
<branch>cse</branch>
<college> jbkp </college>
</user>
<user>
<rollno>507</rollno>
<name>ggg</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>508</rollno>
<name>hhh</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>509</rollno>
<name>iii</name>
<branch>cse</branch>
<college>mrcet</college>
</user>
<user>
<rollno>510</rollno>
<name>jjj</name>
<branch>cse</branch>
<college>mrcet</college>
</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.
Experiment - 9
Implement the following web applications using
(a) PHP,
(b) Servlets and
(c) JSP.
9 (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).
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.
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 javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
public class Session2 extends HttpServlet
{
public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException,
ServletException
{
try
{
res.setContentType("text/html");
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>
<servlet-name>session1</servlet-name>
<url-pattern>/session6vib</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>session2</servlet-name>
<servlet-class>Session2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>session2</servlet-name>
<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.*;
import javax.servlet.*;
public class DateSrv extends GenericServlet
{
//implement service()
public void service(ServletRequest req, ServletResponse res) throws IOException,
ServletException
{
//set response content type
res.setContentType("text/html");
//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.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class VoterSrv extends HttpServlet
{
public void service(HttpServletRequest req, HttpServletResponse res) throws
IOException,ServletException
{
//set response content type
res.setContentType("text/html");
//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 Cookies” button. Add cookies if necessary.
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.*;
import javax.servlet.*;
import javax.servlet.http.*;
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);
response.addCookie(c2);
pwriter.print("<br><a href='welcome'>LIST COOKIES</a>");
pwriter.close();
}catch(Exception exp){
System.out.println(exp);
}
}
}
MyServlet2.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class MyServlet2 extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response){
try{
response.setContentType("text/html");
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>
<servlet-name>Servlet1</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Servlet2</servlet-name>
<servlet-class>MyServlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Servlet2</servlet-name>
<url-pattern>/welcome</url-pattern>
</servlet-mapping>
</web-app>
Output:
9 (i) (c). 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 JSP
Sessionjsp.html
<html>
<head> <title> SESSION LOGIN </title> </head>
<body>
<center>
<form action="http://localhost:8080/jsp/Session1.jsp" method="get">
Enter Name: <input type="text" name="uname"> <br>
<input type="submit" value="LOGIN" name="register">
</form>
</center>
</body>
</html>
Session1.jsp
<%@page language="java" import="java.util.*" errorPage=""%>
<form method="get" action="http://localhost:8080/jsp/Session2.jsp">
<%
Date d=new Date();
%>
<p align="right"> Time;<%=d.getTime()%></p>
<%
String un=request.getParameter("uname");
session.setAttribute("user",un);
session.setAttribute("time",d.getTime());
%>
Hello <%=un%>
<br><br>
<input type="submit" value="logout">
</form>
Session2.jsp
<%@page language="java" import="java.util.*" errorPage=""%>
<%
Date d2=new Date();
String un=(String)session.getAttribute("user");
Long t1=(Long)session.getAttribute("time");
Long t2=d2.getTime();
%>
Thank you <%=un%>
<br><br>
Session duration: <%=(t2-t1)/(60*60)%> seconds
<% session.invalidate();%>
Output:
9 (ii) (b). Write a JSP application to print the current date and
time. Aim: To print Current date and time using JSP.
USING JSP
test.jsp
<html>
<head><title>JSPApp</title></head>
<body>
<form>
<fieldset style="width:50%; background-color: #ccffeb;">
<legend><b><i>JSP Application<i><b></legend>
<h3>Current Date and Time is :</h3>
<% java.util.Date d = new java.util.Date();
out.println(d.toString()); %>
</fieldset>
</form>
</body>
</html>
Output:
9 (iii) (c). 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 JSP.
USING JSP
UserEligibility.html:
<html>
<head> <title> User Acess </title> </head>
<body> <br>
<center>
<h1> USER ELIGIBILITY </h1>
<form action="http://localhost:8080/jsp/checkage.jsp" method="get">
<input type="text" name="uname" placeholder="Enter your name"> <br>
<input type="text" name="uage" placeholder="Enter your age"> <br>
<input type="submit" value="submit" name="sub"<>
</form>
</center>
</body>
</html>
checkage.jsp:
<%@page language="java" import="java.sql.*" errorPage=""%>
<%
String name;
int age;
name=request.getParameter("uname");
age=Integer.parseInt(request.getParameter("uage"));
if(age<=18)
{
out.println("<h1> Hello\t " +name+"\t you are not eligible </h1>");
}
else
{
out.println("<h1> Welcome " +name+" to this site </h1>");
}
%>
Output:
9 (iv) (c). 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 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);
response.addCookie(c1);
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:
WEEK - 10: Implement the web applications with Database using
(a) PHP, (b) Servlets and (c) JSP.
a) A user validation web application, where the user submits the login name &
password to the server. The name and password are checked against the data already
available in Database and if the data matches, a successful login page is returned.
Otherwise failure message is shown to the user.
AIM: To design an application that verifies user details from database using PHP.
PROGRAM:
db.php
<html>
<body>
<?php
$severname="localhost";
$username="root";
$password="TIGER";
$conn=new mysqli($severname,$username,$password);
if($conn->connect_error)
{
die("connection failed".$conn->connect_error);
}
echo "Connected successfully <br>";
//Create database
$sql = "CREATE DATABASE reg";
if(mysqli_query($conn,$sql))
echo "Database created successfully<br>";
else
echo "error";
$servername="localhost";
$dbname="reg";
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn)
{
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully <br>";
// sql to create table
$sql = "CREATE TABLE Guests (
name VARCHAR(30) NOT NULL,
pwd VARCHAR(30) NOT NULL)";
if (mysqli_query($conn, $sql))
{
echo "Table MyGuests created successfully<br>";
}
else {
echo "Error creating table: " . mysqli_error($conn);
}
$sql = "INSERT INTO Guests (name, pwd) VALUES ('cse', '5')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
}
else
{
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
</body>
</html>
Output of db.php:
Login.html
<html>
<head> <title> Login Page </title> </head>
<body>
<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>
loginform.php
<html>
<head> <title> Registration page </title> </head>
<body>
<?php
$name=$_POST["uname"];
$pwd=$_POST["upwd"];
$conn=mysql_connect("localhost","root","TIGER") or die("mysql_error()");
mysql_select_db("reg") or die("mysql_error()");
$query=mysql_query("SELECT * from guests where name='$name'");
while($row=mysql_fetch_array($query))
{
$duser=$row['name'];
$dpwd=$row['pwd'];
}
if($pwd==$dpwd && $name==$duser)
echo "welcome $name branch";
else
echo "invalid user";
?>
</body>
</html>
OUTPUT:
(b) USING SERVLET
DBExample.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
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";
response.setContentType("text/html");
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.Drive
r");
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:
- 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:
EXPERIMENT-12
Write a program to design a simple calculator using
(a)JavaScript (b) PHP (c) Servlet and (d) JSP.
</table>
</form>
</body>
</html>
OUTPUT:
(b) USING PHP
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