Scribd
Upload
8 views

Ay - 2019-20 Web Programming Lab

Uploaded by

cjjchchc
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Ay - 2019-20 Web Programming Lab

Uploaded by

cjjchchc
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

Web Programming Lab Manual

For VIth Semester - PC603 CS (2019-2020)

BY

Mr. A. RAJESH,
Assistant Professor.

Department of Computer Science & Engineering.

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 1 of 53


WEB PROGRAMMING LAB
Program 1

The document must have a paragraph of text that describes your home. Choose atleast three different
phrases (3 to 6 words) of this paragraph and make them change font, font style, color and font size
when the mouse cursor is placed over them. Each of the different phrases must change to different
fonts, font styles, colors and font sizes

<html>
<head>
<title> dynamic fonts </title>
<style type = "text/css">
.regtext { font : 16pt 'Times new Roman'}
.wordtext { color : blue; }
.regtext1 { font : 16pt 'arial' }
.wordtext1 { color : green; }
.regtext2 { font : 16pt 'Roman' }
.wordtext2 { color : red; }
</style>
</head>
<body>
<p class = "regtext" >
My apartment name is
<span class = "wordtext";
onmouseover = "this.style.color = 'red'; this.style.font = 'italic 18pt Times new Roman';"
onmouseout = "this.style.color = 'violet'; this.style.font = 'italic 18pt Times new Roman';">
Golden Grands
</span>
</p>

<p class = "regtext1" >


It is located at
<span class = "wordtext1";
onmouseover = "this.style.color = 'orange' ; this.style.font = 'bold 18pt Verdana';"
onmouseout = "this.style.color = 'brown' ; this.style.font = 'italic 18pt Constantia';">
Yeshwanthpur
</span>
NH4 road, Bangalore - 23.
</p>

<p class = "regtext2" >


and it has 3 bedrooms, 1 living room, 1 kitchen
<span class = "wordtext2"; onmouseover = "this.style.color = 'yellow';
this.style.font = 'italic 18pt NSimsun';" onmouseout = "this.style.color = 'blue';
this.style.font = 'italic 18pt NSimSun';"> 1 club house

</span>
with a beautiful garden
</p>
</body>
DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 2 of 53
WEB PROGRAMMING LAB
</html>

Save file as .html file. And open file in browser.

OUTPUT

My apartment name is Golden Grands

It is located at Yeshwanthpur NH4 road, Bangalore - 23.

and it has 3 bedrooms, 1 living room, 1 kitchen 1 club house with a beautiful garden

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 3 of 53


WEB PROGRAMMING LAB
Program 2
The document must contain four short paragraphs of text stacked on top of each other with only
enough of each showing so that the mouse cursor can also be placed over some part of them. When the
cursor is placed over the exposed part of any paragraph it should raise to the top to become
completely visible.

<html>
<head>
<title> Dynamic stacking of paragraphs </title>
<script type = "text/javascript">
var oldTop="p1";
function toTop(newTop)
{
var domTop=document.getElementById(oldTop).style;
var domNew=document.getElementById(newTop).style;
domTop.zIndex=0;
domNew.zIndex=10;
oldTop=newTop;
}

</script>
<style type = "text/css">
.para1{ color:brown; position:absolute; top:90px; left:150px;
zIndex=0; background-Color:lime; }
.para2{ color:black; position:absolute; top:130px; left:200px;
zIndex=0; background-Color:orange; }
.para3{ color:blue; position:absolute; top:170px;
left:250px; zIndex=0; background-Color:yellow; }
.para4{ color:white; position:absolute; top:210px; left:300px;
zIndex=0; background-Color:grey; }
</style>
</head>
<body bgcolor = "white">
<p class = "para1" id = "p1" onmouseover = "toTop('p1');" >
Iam sarala, <br> Iam a computer science student. <br> Reg no
102CS12017</br> Iam coming from Bommanahalli.</p>

<p class="para2" id="p2" onmouseover="toTop('p2');" >


Iam Kavya, <br> Iam a computer science student. <br> Reg no
102CS12019</br> Iam coming from chamrajpet.</p>

<p class="para3" id="p3" onmouseover="toTop('p3');" >


Iam Arpitha, <br> Iam a computer science student. <br> Reg no
102CS12003</br> Iam comin from Deepanjalinagar.</p>

<p class="para4" id="p4" onmouseover="toTop('p4');" >


Iam Yamuna, <br> Iam a computer science student. <br> Reg no 102CS12016 </br>Iam coming
from
Tinfactory.</p>
</body>
</html>
DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 4 of 53
WEB PROGRAMMING LAB

Save file as .html file. And open file in browser. On movement of mouse, over any paragraph, it will
come on top.

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 5 of 53


WEB PROGRAMMING LAB
Program 3
Design an XML document to store information about patients in a hospital. Information about
patients must include name (in 3 parts, first name, middle name, last name), social security number
(SSN), age, room number, primary insurance company – including member identification number,
group number and address – secondary insurance company (in the same sub parts as for the primary
insurance company), known medical problems, and known drug allergies. Both attributes and nested
tags must be included. Make up sample data of atleast 4 patients. Create a CSS style sheet for the
above XML document and use it to create a display of that document.

XML File
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="p3.css"?>

<patients><patient>
<name>
<fname> sanjay </fname>
<mname> s</mname>
<lname> Srinivas</lname>
</name>

<ssn> 100 </ssn>


<age> 80</age>
<roomnumber> 420 </roomnumber>
<insurance type="Primary">
<id> 10 </id>
<address> Yeshwanthpura</address>
</insurance>

<insurance type="Secondary">
<id>20 </id>
<address> jayanagar </address>
</insurance>
<medproblems> Bp </medproblems>
<drugallergy>None</drugallergy>

</patient>
<patient>
<name>
<fname> rakshith </fname>
<mname> gm</mname>
<lname> gowda</lname>
</name>

<ssn> 101 </ssn>

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 6 of 53


WEB PROGRAMMING LAB
<age> 41</age>
<roomnumber> 421 </roomnumber>
<insurance type="Primary">
<id> 111</id>
<address> jp nagar
</address>
</insurance>

<insurance type="Secondary">
<id>112 </id>
<address> vijayanagar </address>
</insurance>

<medproblems> vitamin deficiency </medproblems>


<drugallergy>Cold</drugallergy>
</patient>

<patient>
<name>
<fname> rudresh </fname>
<mname> g</mname>
<lname> gowda </lname>
</name>

<ssn> 102 </ssn>


<age> 42</age>
<roomnumber> 422 </roomnumber>
<insurance type="Primary">
<id> 113 </id>
<address> mathikere </address>
</insurance>

<insurance type="Secondary">
<id> 114</id>
<address> jp</address>
</insurance>
<medproblems>cancer </medproblems>
<drugallergy>Swelling</drugallergy>
</patient>
<patient>
<name>
<fname> kumar </fname>
<mname> v</mname>
<lname>gowda</lname>
</name>

<ssn> 103</ssn>
<age> 41</age>
<roomnumber> 423 </roomnumber>
<insurance type="Primary">
<id> 113 </id>

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 7 of 53


WEB PROGRAMMING LAB
<address> malleshwaram. </address>
</insurance>
<insurance type="Secondary">
<id> 115</id>
<address> j.p.v nagar</address>
</insurance>
<medproblems> coma </medproblems>
<drugallergy>None</drugallergy>
</patient>
</patients>

Save above file as .xml(eg:p3.xml)

p3.css
patient
{
display:block;
margin-left:5%;
border:solid blue 2px;
padding:4px;
}
name
{
display:block;
color:blue;
margin-left:10%;
font-family:bold times new roman;
font-size:25px;
}

ssn
{
display:block;
color:blue;
margin-left:10%;
font-family:arial;
font-size:14px;
}
age
{
display:block;
color:pink;
margin-left:10%;
font-family:Times new roman;
font-size:14px;
}
roomnumber
{
display:block;
color:green;
margin-left:10%;
DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 8 of 53
WEB PROGRAMMING LAB
font-family:chiller;
font-size:24px;
}
id
{
display:block;
color:black;
margin-left:10%;
font-family:gigi;
font-size:20px;
}
gn
{
display:block;
color:voilet;
margin-left:10%;
font-family:arial;
font-size:14px;
}
address
{
color:brown;
font-family:script;
font-weight:italic;
font-size:30px;
margin-left:5%;
}
medproblems
{
display:block;
color:orange;
font-family:script;
font-weight:italic;
font-size:30px;
margin-left:5%
}
drugallergy
{
display:block;
color:gray;
font-family:script;
font-weight:bold;
font-size:30px;
margin-left:5%
}

Save above file as p3.css.


Save both .xml and .css files in same directory. And open xml file in browser to view output

OUTPUT

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 9 of 53


WEB PROGRAMMING LAB

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 10 of 53


WEB PROGRAMMING LAB
Program 4
Create the XSLT style sheet to format all the patient elements of the XML, document of exercise 3 and
use it to create a display of whole element.

XML File
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="p4.xsl"?>

<patients><patient>
<name>
<fname> sanjay </fname>
<mname> s</mname>
<lname> Srinivas</lname>
</name>

<ssn> 100 </ssn>


<age> 80</age>
<roomnumber> 420 </roomnumber>
<insurance type="Primary">
<id> 10 </id>
<address> Yeshwanthpura</address>
</insurance>
<insurance type="Secondary">
<id>20 </id>
<address> jayanagar </address>
</insurance>
<medproblems> Bp </medproblems>
<drugallergy>None</drugallergy>

</patient>
<patient>
<name>
<fname> rakshith </fname>
<mname> gm</mname>
<lname> gowda</lname>
</name>
<ssn> 101 </ssn>
<age> 41</age>
<roomnumber> 421 </roomnumber>
<insurance type="Primary">
<id> 111</id>
<address> jp nagar
</address>
</insurance>
<insurance type="Secondary">
<id>112 </id>
<address> vijayanagar </address>
</insurance>

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 11 of 53


WEB PROGRAMMING LAB
<medproblems> vitamin deficiency </medproblems>
<drugallergy>Cold</drugallergy>
</patient>

<patient>
<name>
<fname> rudresh </fname>
<mname> g</mname>
<lname> gowda </lname>
</name>

<ssn> 102 </ssn>


<age> 42</age>
<roomnumber> 422 </roomnumber>
<insurance type="Primary">
<id> 113 </id>
<address> mathikere </address>
</insurance>

<insurance type="Secondary">
<id> 114</id>
<address> jp</address>
</insurance>
<medproblems>cancer </medproblems>
<drugallergy>Swelling</drugallergy>
</patient>
<patient>
<name>
<fname> kumar </fname>
<mname> v</mname>
<lname>gowda</lname>
</name>
<ssn> 103</ssn>
<age> 41</age>
<roomnumber> 423 </roomnumber>
<insurance type="Primary">
<id> 113 </id>
<address> malleshwaram. </address>
</insurance>
<insurance type="Secondary">
<id> 115</id>
<address> j.p.v nagar</address>
</insurance>
<medproblems> coma </medproblems>
<drugallergy>None</drugallergy>
</patient>
</patients>

Save above file as .xml (eg:p4.xml)

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 12 of 53


WEB PROGRAMMING LAB
p4.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/">
<html>
<body>
<h2> Patient Information </h2>
<table border="2">
<tr bgcolor="orange">
<th> SSN </th>
<th> Name </th>
<th> Age </th>
<th> Room </th>
<th>Primary insurance Company</th>
<th>secondary insurance Company</th>
<th>Medical problem</th>
<th>Drug Allery</th>
</tr>
<xsl:for-each select="patients/patient">
<tr>
<td> <xsl:value-of select="ssn"/> </td>
<td> <xsl:value-of select="name/fname"/> </td>
<td> <xsl:value-of select="age"/> </td>
<td> <xsl:value-of select="roomnumber"/> </td> <td><xsl:value-of
select="insurance[1]/address"/> </td> <td><xsl:value-of
select="insurance[2]/address"/> </td> <td> <xsl:value-of select="medproblems"/>
</td> <td> <xsl:value-of select="drugallergy"/> </td>

</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Save file as p4.xsl file

Open xml file in browser to view the below output

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 13 of 53


WEB PROGRAMMING LAB
Program 5
Write an XHTML document to include an anchor tag, that calls a PHP document also write the called
PHP document which returns a randomly chosen greeting from a list of five different greetings. The
greetings must be stored as constant strings in the script. A random number between 0 and 4 can be
computed with these line. #set the seed for mtrand with the number of microseconds #since the last
full second of the clock mt_strand((double) microtime() * 1000000); $number=mtrand(0,4);
#computes a random integer
0-4 Write the PHP script for above to count the number of visitors and display that number for each
visitor. Hint: Use a file to store current count

HTML File
<html>
<head>
<title>Preferred Greeting</title>
</head>
<body>
Do you prefer a formal greeting or an informal greeting? <br> >> <a
href="http://localhost/p5.php"> Display greeting </a> <br>
<br>
<br>
click <a href="http://localhost/countvisitors.php">here</a> to know Total no of vistors visited the
site
</body>
</html>

P5.php
<?php

$greeting = array();

$greeting[0] = "Hello, how are you?";

$greeting[1] = "Hi, how are you?";

$greeting[2] = "Welcome to my page";

$greeting[3] = "Good Morning";

$greeting[4] = "Good evening";

$n = mt_rand(0, 4);

echo $greeting[$n];
?>

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 14 of 53


WEB PROGRAMMING LAB
countvisitors.php
<!-- PHP script to count the visitors -->
<?php
$fname = "Count.txt";
$count[1] = 1;
if(file_exists($fname))
{
$count = file_get_contents($fname);
$count = explode("=", $count);
$count[1] = $count[1]+1; // $count[1] += 1;
}
$file = fopen($fname, "w+");
fwrite($file, "Count = ".$count[1]);
fclose($file);
print "Previous visitors are..</br>";
for ($x = 1; $x < $count[1]; $x++)
{
echo " $x <br>";
}
print "You are visitor number = ".$count[1];
?>

Running the program


1. Install the xampp
2. Save the p5.php and countvisitors.php in the c:\xampp\htdocs
3. Start the apache from xampp control panel

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 15 of 53


WEB PROGRAMMING LAB

Open html file in browser to see below links. On click of links random greeting and no of visitors
visited the site can be seen.

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 16 of 53


WEB PROGRAMMING LAB
Program 6
Write the XHTML code using JavaScript Object Notation (JSON) to create the form with the
following capabilities a) A text widget to collect the users name b) Four check boxes, one each for the
following items i) Four 100 watt light bulbs for Rs. 20=39 ii) Eight 100 watt light bulbs for Rs 40=20
iii) Four 100 watt long life light bulbs for Rs. 30=95 iv) Eight 100 watt long life light bulbs for Rs
70=49 c) A collection of 3 radio buttons that are labeled as follows
i) Visa ii) Master Card iii) Discover Write a PHP script that computes the total cost of the ordered
light bulbs for the above program after adding 13.5% VAT. The program must inform the buyer of
exactly what was ordered in table

Html file
<html>
<head>
<title>Order Form</title>
<script type="text/javascript" >
function loadjson()
{
var json = '{"h1": "<b><h2><pre>Select the items : Quantity</pre></b></h2>"}';
var obj = JSON.parse(json);
document.getElementById("heading").innerHTML=obj.h1;
document.getElementById("heading").innerText=obj.h1;
}

</script>
</head>
<body onload="loadjson();">
<form method="POST" action="http://localhost/p6.php">
User :
<input type="text" name="mname" size=30 /> <br/>
<label id="heading" ></label>

<table>
<TR>
<TD>
<input type="checkbox" name="option1" checked="checked"/>
<label id="chk1">Four 100 watt bulbs for Rs. 20.39 </label>
</TD>
<TD>
<input type="text" name="VAL1" size=2 />
</TD>
</TR>
<TR><TD>
<input type="checkbox" name="option2" />
<label id="chk2">Eight 100watt bulbs for Rs 40.20 </label></TD>

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 17 of 53


WEB PROGRAMMING LAB
<TD>
<input type="text" name="VAL2" size=2/>
</TD>
</TR>
<TR>
<TD>
<input type="checkbox" name="option3" />
<label id="chk3">Four 100watt long life bulbs for Rs. 30.95 </label>
</TD>
<TD>
<input type="text" name="VAL3" size=2/>
</TD>
</TR>

<TR>
<TD>
<input type="checkbox" name="option4" />
<label id="chk4">Eight 100watt long life bulbs for Rs 70.49 </label><br/>
</TD>
<TD>
<input type="text" name="VAL4" size=2/>
</TD>
</TR>

</table>
<input type="radio" name="paymode" value="visa" checked="checked" /> VISA <br/> <input
type="radio" name="paymode" value="mcard"/> MASTER CARD <br/> <input type="radio"
name="paymode" value="discover"/> DISCOVER <br/>

<input type="submit" id="bt" value="submit"/>


<input type="reset" value="Reset Order" />
</form>
</body>
</html>

Save above file as .html file in any folder. Also download and save json2.js file in the same
folder location.

p6.php
<html>
<head>Display Form</head>
<body>
<?php
$name=$_POST["mname"];
$mode=$_POST["paymode"];
$item1=0;
$item2=0;
$item3=0;
$item4=0;
$price1=20.39;
$price2=30.95;
$price3=40.20;
DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 18 of 53
WEB PROGRAMMING LAB
$price4=70.49;
if(isset($_POST['option1']))
$item1=$_POST['VAL1'];
if(isset($_POST['option2']))
$item2=$_POST['VAL2'];
if(isset($_POST['option3']))
$item3=$_POST['VAL3'];
if(isset($_POST['option4']))
$item4=$_POST['VAL4'];

$total1=$item1*$price1;
$total2=$item2*$price2;
$total3=$item3*$price3;
$total4=$item4*$price4;

$total=$total1+$total2+$total3+$total4;
$total+=($total*13.5)/100;

print("</br> User Name:$name");


?>
<h3> You have ordered following items</h3>

<table border=1>
<tr><th>Item</th><th>Qty</th><th>Price</th><th>Total</th></tr>
<tr><td>Four 100 watt bulbs for Rs. 20.39</td>
<td><?php print("$item1");?></td><td><?php
print("$price1");?></td> <td><?php print("$total1");?></td></tr>

<tr><td>Eight 100watt bulbs for Rs 40.20</td>


<td><?php print("$item2");?></td><td><?php
print("$price2");?></td><td><?php print("$total2");?></td></tr>

<tr><td>Four 100watt long life bulbs for Rs. 30.95</td><td><?php


print("$item3");?></td><td><?php print("$price3");?></td><td><?php
print("$total3");?></td></tr>

<tr><td>Eight 100watt long life bulbs for Rs 70.49</td><td><?php


print("$item4");?></td><td><?php print("$price4");?></td><td><?php
print("$total4");?></td></tr>

</table>
</br>
</br>
<?php print("Total bill including 13.5% tax:<b> $total
</b>");?> <?php print("payment mode:<b> $mode </b>");?>
</body>
</html>

Save above file as p6.php and store in htdocs folder of the xampp(eg: C:\xampp\htdocs). Start apache.
Open html file in browser to order the items. On submit of the form one can view ordered items and
total bill generated including 13.5% tax.

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 19 of 53


WEB PROGRAMMING LAB

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 20 of 53


WEB PROGRAMMING LAB
Program 7
Write a XHTML code to provide a form that collects names and telephone numbers. The phone
numbers must be in the format ddd-ddd-dddd. Write a PHP script that checks the submitted
telephone number to be sure that it confirms to the required format and then returns a response
that indicates whether the number was correct.

p7.html
<html>
<head>
<title> Phone Form </title>
</head>
<body>
<form method="POST" action="http://localhost/p7.php">
Name :
<input type="text" name="uname" size=33 /> <br/>
Telephone Number :
<input type="text" name="phone" size=20 />(ddd-ddd-dddd) <br/>

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


<input type="reset" value="Clear Form" />
</form>
</body>
</html>

p7.php file
<?php
$name = $_POST["uname"];
$pnum = $_POST["phone"];
if(preg_match("/^([0-9]{3})-([0-9]{3})-([0-9]{4})$/", $pnum))
{
print "Phone number is valid <br/>";
print "User name is : $name <br/>";
print "Phone number is : $pnum <br/>";
}
else
print "Phone number is not valid!";
?>
Save above file as p7.php in htdocs of xampp folder(eg: C:\xampp\htdocs\p7.php)
Start apache from xampp control panel.
Open html in browser. Enter details in html and submit. It will validate the date format as below.

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 21 of 53


WEB PROGRAMMING LAB

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 22 of 53


WEB PROGRAMMING LAB
Program 8
Write the XHTML code using JavaScript Object Notation (JSON) to accept from the user name,
phone no, mail-id, stored in database. Retrieve same information from database using a separate
PHP script.

HTML File

<!DOCTYPE html>
<html>
<body>

<head>
<script type="text/javascript">
function save()
{
uname=document.getElementById("uname").value;
phone=document.getElementById("uphone").value;
email=document.getElementById("email").value;

var myObj = { "name" : ""+ uname +"", "phone":"" + phone + "", "email" : "" + email + "" };
myJSON = JSON.stringify(myObj);
window.location = "http://localhost/p8.php?x=" + myJSON;
}

</script>
</head>
<form>
<h3> Student Information </h3>
<h3> Name : <input type="text" id="uname" /> </h3>
<h3> Phone : <input type="text" id="uphone" /> </h3>
<h3> Email : <input type="text" id="email" /> </h3>

<input type="button" id="bt" value="submit" onclick="save();"/>

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

Save above file as .html file in any folder.

p8.php file

<?php

$data = $_GET['x'];
$data_decode = json_decode($data);

$name = $data_decode->name;
$phone=$data_decode->phone;
DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 23 of 53
WEB PROGRAMMING LAB
$email= $data_decode->email;
echo "<br/> <h4> Information Entered </h4>";
echo "------------------------------<br/>";
print "Name : ".$name."<br/>";
print "Phone : ".$phone."<br/>";
print "Email : ".$email."<br/>";
echo "------------------------------<br/>";

// Create connection
$link = mysqli_connect("localhost", "root", "","test");
// Check connection
if (!$link)
{
die("Connection failed: " . mysqli_connect_error());
}
mysqli_select_db($link, "test");
$query1 = "CREATE TABLE tb_text_book(uname varchar(15), phone varchar(30), email char(30))";

$result = mysqli_query($link,$query1);
if($result)
echo "(2) Query1 executed... <br/>";
else
echo "(2) Table not created : ".mysqli_error($link)."<br/>";

$query2 = "INSERT INTO tb_text_book VALUES('$name', '$phone', '$email')";


$res2 = mysqli_query($link,$query2);
if($res2)
echo "(3) Values inserted in the table ... <br/>";
else
echo "(3) Query2 not executed: ".mysqli_error($link)."<br/>";

$query3 = "SELECT * FROM tb_text_book";


$res3 = mysqli_query($link,$query3);
echo "<br/> <h3> Table Contents Are </h3>";

print " <b> name | phone | email </b> <br/>";


$no =0;
while($row = mysqli_fetch_array($res3))
{
print "-------------------------------<br/>";
$no += 1;
print "$no ) ".$row['uname']." | ";
print $row['phone']." | ";
print $row['email']." | ";
print "<br/>";
}

mysqli_close($link);
?>

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 24 of 53


WEB PROGRAMMING LAB
Save above file as p8.php in htdocs of xampp folder(eg: C:\xampp\htdocs\p8.php).
Download and save json2.js file in the same folder location.
Start apache and mysql from XAMPP control panel.
Open html in browser. Enter details in html and submit.

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 25 of 53


WEB PROGRAMMING LAB

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 26 of 53


WEB PROGRAMMING LAB
PART B
For running Part B programs below software’s need to be installed Install jdk 6 or 7
and the NetBeans IDE 7.0.1 if OS is windows XP OR
Install jdk 7 and the NetBeans IDE 8.2 if OS is windows 7

Program 9
Write a servlet that returns a randomly chosen greeting from a list of five different greetings.
The greeting must be stored as constant strings in the program.

Follow below steps to create a servlet


FileNew Project
Select Java Web from Categories
Select Web Application from Projects

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 27 of 53


WEB PROGRAMMING LAB
Give project name and location of the application

Select Server as Glassfish or apache Tomcat

Click on next and then Finish.

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 28 of 53


WEB PROGRAMMING LAB

 
To create servlet Click on Source Packages New Servlet

Specify class name for servlet


DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 29 of 53
WEB PROGRAMMING LAB

Select the checkbox “Add information to deployment descriptor (web.xml)”

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 30 of 53


WEB PROGRAMMING LAB
Click on finish.
Write below code for servlet to generate random greeting.

p9.java file
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class p9 extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String[] myStrings = {"This is the first servlet message", "This is the first servlet message", "Good
Morning", "Have a nice day","Hello"}; out.println("<html>");

out.println("<head>");
out.println("<title>Servlet Random Message</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet RandomMessage</h1>");

Random r = new Random( );


out.println(myStrings[r.nextInt(myStrings.length)]);
out.println("</body>");
out.println("</html>");
}
}
Then right click on servlet file select Run File to run the servlet OR Run application and pass
servlet name as below

Eg: http://localhost:8080/RandomGreetings/p9

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 31 of 53


WEB PROGRAMMING LAB

Output

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 32 of 53


WEB PROGRAMMING LAB

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 33 of 53


WEB PROGRAMMING LAB
Program 10

A servlet for the XHTML code of exercise 6 that computes the total cost of ordered light bulbs
after adding 2% sales tax. The servlet must inform the buyer of exactly what was ordered in
table

Create web application (in below example Examples web application is created) Create
html file as below

Click on finish

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 34 of 53


WEB PROGRAMMING LAB
HTML File
<html>
<head>
<title>Order Form</title>
<script type="text/javascript">
function loadjson()
{
var json = '{"h1": "<b><h2><pre>Select the items : Quantity</pre></b></h2>"}';
var obj = JSON.parse(json);
document.getElementById("heading").innerHTML=obj.h1;
document.getElementById("heading").innerText=obj.h1;
}

</script>
</head>
<body onload="loadjson();">
<form method="GET" action="http://localhost:8080/Examples/p10">
User :
<input type="text" name="mname" size=30 /> <br/>
<label id="heading" ></label>

<table>
<TR>
<TD>
<input type="checkbox" name="option1" checked="checked"/>
<label id="chk1">Four 100 watt bulbs for Rs. 20.39 </label>
</TD>
<TD>
<input type="text" name="VAL1" size=2 />
</TD>
</TR>
<TR><TD>
<input type="checkbox" name="option2" />
<label id="chk2">Eight 100watt bulbs for Rs 40.20 </label></TD> <TD>
<input type="text" name="VAL2" size=2/>
</TD>
</TR>
<TR>
<TD>
<input type="checkbox" name="option3" />
<label id="chk3">Four 100watt long life bulbs for Rs. 30.95 </label>
</TD>
<TD>
<input type="text" name="VAL3" size=2/>
</TD>
</TR>

<TR>
<TD>
<input type="checkbox" name="option4" />
<label id="chk4">Eight 100watt long life bulbs for Rs 70.49 </label><br/>
DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 35 of 53
WEB PROGRAMMING LAB
</TD>
<TD>
<input type="text" name="VAL4" size=2/>
</TD>
</TR>

</table>
<input type="radio" name="paymode" value="visa" checked="checked" /> VISA <br/> <input
type="radio" name="paymode" value="mcard"/> MASTER CARD <br/> <input type="radio"
name="paymode" value="discover"/> DISCOVER <br/>

<input type="submit" id="bt" value="submit"/>


<input type="reset" value="Reset Order" />
</form>
</body>
</html>

Change port number in action attribute based on server selected


Create servlet as below

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 36 of 53


WEB PROGRAMMING LAB

p10.java file

import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class p10 extends HttpServlet
{
public void doGet(HttpServletRequest req,HttpServletResponse res)
throws ServletException,IOException
{
res.setContentType("text/html");//setting the content type PrintWriter
pw=res.getWriter();//get the stream to write the data

String UName=req.getParameter("mname");
double item1,item2,item3,item4;
double price1=20.39;
double price2=40.20;
double price3=30.95;
double price4=70.49;
item1=item2=item3=item4=0;
if(req.getParameter("option1")!=null)
{
String str1=req.getParameter("VAL1");
item1=Integer.parseInt(str1);

}
if(req.getParameter("option2")!=null)
{
String str2=req.getParameter("VAL2");
item2=Integer.parseInt(str2);
}
if(req.getParameter("option3")!=null)
{
String str3=req.getParameter("VAL3");
item3=Integer.parseInt(str3);
}
if(req.getParameter("option4")!=null)
{
String str4=req.getParameter("VAL4");
item4=Integer.parseInt(str4);
}
double total1=item1*price1;
double total2=item2*price2;
double total3=item3*price3;
double total4=item4*price4;
double total=total1+total2+total3+total4;

total+=(total*2.0)/100;
pw.println("<!DOCTYPE html>");
pw.println("<html>");

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 37 of 53


WEB PROGRAMMING LAB
pw.println("<body>");
pw.println("<h4>user name: "+ UName + "</h4>" );

String itemname1,itemname2,itemname3,itemname4;
itemname1="Four 100 watt bulbs for Rs. 20.39"; itemname2="Eight
100watt bulbs for Rs 40.20"; itemname3="Four 100watt long life bulbs
for Rs. 30.95"; itemname4="Eight 100watt long life bulbs for Rs
70.49";

//writing html in the stream


pw.println("You have ordered following items");
pw.println("<table border=1>");
pw.println("<tr><th>Item</th><th>Qty</th><th>Price</th><th>Total</th></tr>");
pw.println("<tr><td>" + itemname1 + "</td><td>" + item1 + "</td><td>"+ price1
+"</td><td>"+ total1 +"</td></tr>");
pw.println("<tr><td>" + itemname2 + "</td><td>" + item2 + "</td><td>"+ price2
+"</td><td>"+ total2 +"</td></tr>");
pw.println("<tr><td>" + itemname3 + "</td><td>" + item3 + "</td><td>"+ price3
+"</td><td>"+ total3 +"</td></tr>");
pw.println("<tr><td>" + itemname4 + "</td><td>" + item4 + "</td><td>"+ price4
+"</td><td>"+ total4 +"</td></tr>");
pw.println("</table>");
pw.println("Total bill after adding 2% tax is: " + total);
pw.println("</body></html>");

pw.close();//closing the stream


}
}

Run html file as below

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 38 of 53


WEB PROGRAMMING LAB

On submit Total bill including 2% tax will be generated

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 39 of 53


WEB PROGRAMMING LAB
Program 11

Write and test a JSP document that displays the form of exercise 6 and produces the same
response document as exercise 10.

p11.html
<html>
<head>
<title>Order Form</title>
<script type="text/javascript">
function loadjson()
{
var json = '{"h1": "<b><h2><pre>Select the items : Quantity</pre></b></h2>"}';
var obj = JSON.parse(json);
document.getElementById("heading").innerHTML=obj.h1;
document.getElementById("heading").innerText=obj.h1;
}

</script>
</head>
<body onload="loadjson();">
<form method="GET" action="http://localhost:8080/Examples/p11.jsp">
User :
<input type="text" name="mname" size=30 /> <br/>
<label id="heading" ></label>

<table>
<TR>
<TD>
<input type="checkbox" name="option1" checked="checked"/>
<label id="chk1">Four 100 watt bulbs for Rs. 20.39 </label>
</TD>
<TD>
<input type="text" name="VAL1" size=2 />
</TD>
</TR>
<TR><TD>
<input type="checkbox" name="option2" />
<label id="chk2">Eight 100watt bulbs for Rs 40.20 </label></TD> <TD>
<input type="text" name="VAL2" size=2 />
</TD>
</TR>
<TR>
<TD>
<input type="checkbox" name="option3" />
<label id="chk3">Four 100watt long life bulbs for Rs. 30.95 </label>
</TD>
<TD>
<input type="text" name="VAL3" size=2 />
</TD>
</TR>

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 40 of 53


WEB PROGRAMMING LAB

<TR>
<TD>
<input type="checkbox" name="option4" />
<label id="chk4">Eight 100watt long life bulbs for Rs 70.49 </label><br/>
</TD>
<TD>
<input type="text" name="VAL4" size=2 />
</TD>
</TR>

</table>
<input type="radio" name="paymode" value="visa" checked="checked" /> VISA <br/> <input type="radio"
name="paymode" value="mcard"/> MASTER CARD <br/> <input type="radio" name="paymode"
value="discover"/> DISCOVER <br/>

<input type="submit" id="bt" value="submit"/>


<input type="reset" value="Reset Order" />
</form>
</body>
</html>

Create jsp file and write the below code

p11.jsp

<%@ page language="java" contentType="text/html"%>


<html>
<body>
User
Name:<%=request.getParameter("mname")%><br/>
<%
int item1,item2,item3,item4;
double price1=20.39;
double price2=40.20;
double price3=30.95;
double price4=70.49;
item1=item2=item3=item4=0;
if(request.getParameter("option1")!=null)
{
String str1=request.getParameter("VAL1");
item1=Integer.parseInt(str1);
}

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 41 of 53


WEB PROGRAMMING LAB
if(request.getParameter("option2")!=null)
{
String str2=request.getParameter("VAL2");
item2=Integer.parseInt(str2);
}
if(request.getParameter("option3")!=null)
{
String str3=request.getParameter("VAL3");
item3=Integer.parseInt(str3);
}
if(request.getParameter("option4")!=null)
{
String str4=request.getParameter("VAL4");
item4=Integer.parseInt(str4);
}
double total1=item1*price1;
double total2=item2*price2;
double total3=item3*price3;
double total4=item4*price4;
double total=total1+total2+total3+total4;
total+=(total*2.0)/100;

String itemname1,itemname2,itemname3,itemname4;
itemname1="Four 100 watt bulbs for Rs. 20.39"; itemname2="Eight
100watt bulbs for Rs 40.20"; itemname3="Four 100watt long life bulbs
for Rs. 30.95"; itemname4="Eight 100watt long life bulbs for Rs
70.49";
%>

<h3>You have ordered following items<h3></br>


<table border=1>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
<tr>
<td><%=itemname1%></td>
<td><%=item1%></td>
<td><%=price1%></td>
<td><%=total1%></td>
</tr>
<tr>
<td><%=itemname2%></td>
<td><%=item2%></td>
<td><%=price2%></td>
<td><%=total2%></td>
</tr>
<tr>
<td><%=itemname3%></td>
<td><%=item3%></td>

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 42 of 53


WEB PROGRAMMING
LAB
<td><%=price3%></td>
<td><%=total3%></td>
</tr>
<tr>
<td><%=itemname4%></td>
<td><%=item4%></td>
<td><%=price4%>
</td><td><%=total4%></td>
</tr>
</table>
Total bill including 2% tax is <b> <%=total%> </b>
<br/>
</body>
</html>

Run HTML file

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 43 of 53


WEB PROGRAMMING LAB

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 44 of 53


WEB PROGRAMMING LAB
Program 12

Write a markup document to create a form that collects favorite popular songs, including the name
of the song, the composer and the performing artist or group. This document must call a servlet
when the form is submitted and another servlet to request a current list of survey results

Create html file in web pages folder


P12.html
<html>
<head>
<title>song form</title>
</head>
<body>
<form method="GET" action="http://localhost:8080/Examples/P12">
<pre>Song Name : <input type="text" Name="sname" size=20/></pre>

<pre>Composer : <input type="text" Name="cname" size=20/> </pre>

<pre>Singer : <input type="text" Name="singer" size=20/></pre>


Artists : <br/>
<input type="checkbox" name="fluteman" /> Fluteman<br/>
<input type="checkbox" name="tabalaman" /> Tabalaman<br/>
<input type="checkbox" name="violinman" /> Violinman<br/>
<input type="checkbox" name="supportingsinger" />Supporting Singer</br></br>

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


<input type="submit" value="clear"/>
</form>
</body>
</html>

Create servlet P12.java in source packages

import java.io.*;
import java.io.FileWriter;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.FileReader;

public class P12 extends HttpServlet{


public void doGet(HttpServletRequest req,HttpServletResponse res) throws ServletException,IOException
{
res.setContentType("text/html");//setting the content type
PrintWriter pw=res.getWriter();//get the stream to write the
data

String sname=req.getParameter("sname");
String cname=req.getParameter("cname");
String singer=req.getParameter("singer");
DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 45 of 53
WEB PROGRAMMING LAB

String artist="";

if(req.getParameter("fluteman")!=null)
{
artist=" Fluteman";
}
if(req.getParameter("tabalaman")!=null)
{
artist=artist + " Tabalaman";
}
if(req.getParameter("violinman")!=null)
{
artist=artist + " Violinman";

}
if(req.getParameter("supportingsinger")!=null)
{
artist=artist + " Supportingsinger";
}

String filename="d:\\song.txt";
FileWriter fw=new FileWriter(filename,true);
fw.write("\n");

try
{
fw.write("Song:" + sname + " Composer:"+ cname + " Singer:" + singer + " Artist:" + artist);

fw.close();
}
catch(Exception e)
{
System.out.println(e);
}

pw.println("<!DOCTYPE html>");
pw.println("<html>");
pw.println("<body>");
pw.println("<h2>Current Survey Result </h2>");
pw.println("</br>Song Name: " + sname + "</br> Composer :"+ cname + "</br> Singer :" + singer + "</br>
Artist: "+ artist);
pw.println("</br></br><a href='http://localhost:8080/Examples/survey'>click here </a> to view
previous survey details");

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

pw.close();//closing the stream


}}

Song details are stored in d:\\song.txt.

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 46 of 53


WEB PROGRAMMING LAB
Create servlet survey.java file in source packages

import java.io.*;
import java.io.FileWriter;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.FileReader;

public class survey extends HttpServlet{


public void doGet(HttpServletRequest req,HttpServletResponse res) throws ServletException,IOException
{
res.setContentType("text/html");//setting the content type
PrintWriter pw=res.getWriter();//get the stream to write the
data

String filename="d:\\song.txt";
pw.println("<!DOCTYPE html>");
pw.println("<html>");
pw.println("<body>");
pw.println("<h2>Previous survey result<h2>");
pw.println("<b>The most popular songs are </b> " );
pw.println("<br />");

BufferedReader br = new BufferedReader(new


FileReader(filename)); String line;
pw.println("<table border=.01>");
pw.println("<tr><th><pre><b>Song Name Composer Singer Artist
</b></pre></th></tr>");
while((line = br.readLine())!= null)
{
pw.print("<tr><td>" + line + "</td></tr>");

}
br.close();
pw.println("</table>");
pw.println("</body></html>");

pw.close();//closing the stream


}
}

Survey details are read from song.txt in D:\\song.txt

Right click on html file select Run File. It shows the below form

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 47 of 53


WEB PROGRAMMING LAB

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 48 of 53


WEB PROGRAMMING LAB

Program 13
Create a simple Java web application using Servlet and JDBC HTML File

Create html file in web pages


<html>
<head>
<title>Order Form</title>
</head>
<body>
<form action="http://localhost:8080/Examples/p13">

<h2> Insert Student details </h2>


User :<input type="text" name="user" size="30" /> <br/><br/>
Phone :<input type="text" name="phone" size="30" /> <br/><br/>
Email :<input type="text" name="email" size="30" /> <br/><br/>

<input type="submit" id="bt" value="Submit"/>


<input type="reset" value="Reset" />
</form>
</body>
</html>

Create servlet file p13.java in source packages

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.io.*;
import java.sql.DatabaseMetaData;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class p13 extends HttpServlet
{

publi String DB_URL = "jdbc:mysql://localhost:3306/test";


c String USER = "root";
publi String PASS = "";
c
publi
c
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 49 of 53


WEB PROGRAMMING LAB
{
response.setContentType("text/html");
PrintWriter pw = response.getWriter();

pw.println("<!DOCTYPE html>");
pw.println("<html>");
pw.println("<head>");
pw.println("<title>SERVLET DJBC CONNECTIVITY </title>");
pw.println("</head>");
pw.println("<body>");

Connection conn = null;


Statement stmt = null;Statement stmt1 = null;ResultSet rs1=null;

try
{
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(DB_URL, USER, PASS);
}
catch(ClassNotFoundException e)
{
pw.print("class not found");
}
catch(SQLException e)
{
pw.print("conn failed ");
}
catch(Exception e)
{
pw.print("error");
}
try
{
String usr = request.getParameter("user");
String mail = request.getParameter("email");
String ph = request.getParameter("phone");

System.out.println("Creating table in given database..."); stmt1 =


conn.createStatement();
String sql1 = "CREATE TABLE IF NOT EXISTS tb_book2(uname VARCHAR(255), email
VARCHAR(255), phone INTEGER)"; int i1 =stmt1.executeUpdate(sql1);
String sqli = "insert into tb_book2(uname,email,phone) values('" + usr + "','"+ mail +"',"
+ ph + ")";
stmt = conn.createStatement();
int i = stmt.executeUpdate(sqli);
if (i!= 0)
{
pw.print("<br />Record inserted successfully<br>");
}
else

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 50 of 53


WEB PROGRAMMING LAB
{
pw.print(" Record Insertion failure");
}

String sql = "SELECT * FROM tb_book2";


stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(sql);
pw.print("<br/><h2>Information from database</h2><br/>");
pw.print("<table border=1>");
pw.print("<tr><th>Name</th><th>Phone</th><th>Email</th></tr>");
while(rs.next())
{
//Retrieve by column name
int phone = rs.getInt("phone");
String UserName = rs.getString ("uname");
String email = rs.getString("email");

//Display values
pw.print("<tr>");
pw.print("<td> " + UserName + "</td><td> " + phone + "</td><td> " + email +
"</td>");
pw.print("</tr>");
}
pw.print("</table>");
rs.close();
}
catch(SQLException e)
{
e.printStackTrace();
}
catch (Exception e)
{
e.printStackTrace();
}
pw.println("</body>");
pw.println("</html>");
}
}

Download and add sql jar file in Libraries (mysql-connector-java-5.1.18-bin) as below for
connecting to database

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 51 of 53


WEB PROGRAMMING LAB

Right click on html file and click on Run File

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 52 of 53


WEB PROGRAMMING LAB

DEPT. OF COMPUTER SCIENCE & ENGINEERING, MCET Page 53 of 53

You might also like