Scribd
Upload
10K views

Web Programming Lab Manual

The document is a lab manual for a web programming course. It contains 10 experiments related to HTML, CSS, and JavaScript. The experiments cover topics like changing font properties on mouseover, stacking paragraphs that move to the top on mouseover, displaying an image on mouse click, and moving text across the screen. The last experiment provides an example of an XML document to store patient information in a hospital, including name, ID numbers, insurance details, medical problems, and allergies.

Uploaded by

sayyan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10K views

Web Programming Lab Manual

The document is a lab manual for a web programming course. It contains 10 experiments related to HTML, CSS, and JavaScript. The experiments cover topics like changing font properties on mouseover, stacking paragraphs that move to the top on mouseover, displaying an image on mouse click, and moving text across the screen. The last experiment provides an example of an XML document to store patient information in a hospital, including name, ID numbers, insurance details, medical problems, and allergies.

Uploaded by

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

WEB PROGRAMMING

LAB MANUAL
Mr. SAYYAN SHAIKH
For VI Semester (CS &E) Diploma Engineering

GOVERNMENT POLYTECHNIC,
KARWAR
2014-2015

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 1

Date:

___

Date :

Experiment 1:The document must have a paragraph of text that describes your home. Choose at least 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.
<?xml version ="1.0" encoading="utf-8"?>
<html>
<head>
<title> Program 1 </title>
<style type="text/css">
.regText {font:Times; font-size:14pt;}
</style>
</head>
<body>
<p class ="regText">
My home name is
<b style="color:blue;"
onmouseover="this.style.color='red';
this.style.font='italic 16pt Thoma';"
onmouseout="this.style.color='blue';
this.style.font='normal 16pt Times';">
SWEET Home</b>.
It is located nearby Civil Hospital, M.G.Road,
<b style="color:blue;"
onmouseover="this.style.color='green';
this.style.font='bold 16pt arial';"
onmouseout="this.style.color='blue';
this.style.font='normal 16pt Times';">
Karwar</b>.
My house is facing towards
<b style="color:blue;"
onmouseover="this.style.color='purple';
this.style.font='italic 15pt Lucida';"
onmouseout="this.style.color='blue';
this.style.font='normal 16pt Times';">
East</b>.

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 2

Date:

___
Date :
It is a 2BHK home.There is a 60ft wide road in front of the home.
There is a sufficiant place for
<b style="color:blue;"
onmouseover="this.style.color='yellow';
this.style.font='bold 14pt courier';"
onmouseout="this.style.color='blue';
this.style.font='normal 16pt Times';">
gardening</b>
and car parking.It is built in the
<u style="color:blue;"
onmouseover="this.style.color='pink';
this.style.font='italic 20pt Verdana';"
onmouseout="this.style.color='blue';
this.style.font='normal 16pt Times';">
area of 30X65 sq ft.</u>
</p>
</body>
</html>

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 3

Date:

___

Date :

Experiment 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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiy="content_type"
content="text/html;charset=UTF_8">
<title> Program 2 </title>
<style type="text/css">
.layer1style
{
border:solid thick black;
padding:4em;
width:400px;
background-color:yellow;
position:absolute;
top:100px;
left:200px;
z-index:0;
}
.layer2style
{
border:solid thick red;
padding:4em;
width:400px;
background-color:blue;
position:absolute;
top:120px;
left:220px;
z-index:0;
}
.layer3style
{
border:solid thick green;
padding:4em;
width:400px;
background-color:purple;
position:absolute;
top:140px;
left:240px;
z-index:0;
}
.layer4style
{
border:solid thick orange;
padding:4em;

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 4

Date:

___

Date :
width:400px;
background-color:#00ffff;
position:absolute;
top:160px;
left:260px;
z-index:0;
}
</style>
<script type="text/javascript">
var topLayer="layer4"
function mover(toTop)
{
var oldTop=document.getElementById(topLayer).style;
var newTop=document.getElementById(topLayer).style;
oldTop.zIndex="0";
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
}
</script>
</head>
<body>
<h2>Stacking of Paragraph</h2>

<div style="z-index:10;"class="layer1style" id="layer1"


onMouseover="mover('layer1')">
"SUCCESS, is proof to all that others can achieve it as
well."
</div>
<div style="z-index:8;"class="layer2style" id="layer2"
onMouseover="mover('layer2')">
The first and most important STEP towards
success is the feeling that we can succeed.
</div>
<div style="z-index:6;"class="layer3style" id="layer3"
onMouseover="mover('layer3')">
"To accomplish great things, we must not only act, but
also dream, not only plan but also believe."
</div>
<div style="z-index:0;"class="layer4style" id="layer4"
onMouseover="mover('layer4')">
"Most of the important things in the world have been
accomplished by people who have kept on trying
when there seemed to be no help at all"
</div>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 5

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 6

Date:

___

Date :

Experiment 3:The document should have a small image of yourself, which must appear when the mouse
button is clicked at the position of the mouse cursor, regardless of the position of the cursor at the
time.
<html>
<head>
<title> Program 3 </title>
<script type="text/javascript">
function displayimg(e)
{
var dom=document.getElementById("id");
dom.style.left=(e.clientX)-10;
dom.style.top=(e.clientY)-10;
dom.style.visibility="visible";
}
function hideIt()
{
var dom=document.getElementById("id");
dom.style.visibility="hidden";
}
</script>
</head>
<body onmousedown="displayimg(event);" onmouseup="hideIt();">
<p>
<h3><center>CLICK ANYWHERE TO VIEW THE IMAGE</center></h3>
<img
id="id"style="visibility:hidden;position:absolute;top:99px;left:99px;"
src="Water lilies.jpg" height=300 width=500/>
</p>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 7

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 8

Date:

___

Date :

Experiment 4:The document must contain the statement Save time with TIMESAVER 2.2, which
continuously moves back and forth across the top of the display.
<html>
<head>
<title>Moving Text</title>
<script language="JavaScript">

function moveText(milliseconds)
{
window.setInterval("changePosition()", milliseconds)
}

function changePosition()
{
var x = Math.random()*400;
var y = Math.random()*400;
heading = document.getElementById("moveme");
if(heading != null)
{
heading.style.left = x;
heading.style.top = y;
}
}
</script>
</head>
<body onload="moveText(1000)">
<br><br><br><br><br><br><br><br><br><br><br><br>
<p align="center">What is HTML?</p>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 9
___

Date:

Date :
<p align="center">HTML is a language for describing web pages.</p>

<p align="center">HTML stands for <b>Hyper Text Markup


Language</b><br>
HTML is not a programming language, it is a markup language.<br>
A markup language is a set of markup tags.<br>
HTML uses markup tags to describe web pages.<br></p>
<div id="moveme"
style="position:absolute;font-size:xx-large; backgroundcolor:pink; color:#FF0000; z-index:-1"> Save The Time Saver 2.2 !</div>
</body>
</html>

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 10

Date:

___

Date :

INTRODUCTION TO XML
Xml (extensible Markup Language) is a markup language. XML is designed to store and
transport data. Xml was released in 1998. It was created to provide an easy to use and store
self-describing data. XML is not a replacement for HTML.XML is designed to be self-descriptive.
XML is designed to carry data, not to display data.XML tags are not predefined. You must
define your own tags.XML is platform independent and language independent.
The main benefit of xml is that you can use it to take data from a program like Microsoft
SQL, convert it into XML then share that XML with other programs and platforms. You can
communicate between two platforms which are generally very difficult.
The main thing which makes XML truly powerful is its international acceptance. Many
corporation use XML interfaces for databases, programming, office application mobile phones and
more. It is due to its platform independent feature.

Features and Advantages of XML:1) XML separates data from HTML


2) XML simplifies data sharing
3) XML simplifies data transport
4) XML simplifies Platform change
5) XML increases data availability
6) XML can be used to create new internet languages
The Difference between XML and HTML
XML and HTML were designed with different goals:
XML was designed to carry data - with focus on what data is
HTML was designed to display data - with focus on how data looks
XML tags are not predefined like HTML tags are
XSL is a language for expressing style sheets. An XSL style sheet is, like with CSS, a file that
describes how to display an XML document of a given type. XSL shares the functionality and is
compatible with CSS2 (although it uses a different syntax). It also adds: A transformation language for
XML documents: XSLT.

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 11

Date:

___

Date :

Experiment 5:Design an XML document to store information about patience 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 at least 4 patients.

Program5.xml
<?xml version="1.0" encoding="UTF-8"?>
<patients>
<patient>
<name>
<fname> Ram </fname>
<mname> M </mname>
<lname> Poojari </lname>
</name>
<ssn> SSN10001</ssn>
<age> 25 </age>
<room-no> 99 </room-no>
<insurance type="primary">
<id> 45422 </id>
<gn> 454 </gn>
<address> #90, Near big boat,
Devabhag,
Karwar-581301
</address>
</insurance>
<insurance type="secondary">
<id> 45523 </id>
<gn> 455 </gn>
<address> #90, Near big boat,
Devabhag,
Karwar-581301
</address>
</insurance>
<med-problem> High B.P. </med-problem>
<drugallergie> Nill </drugallergie>
</patient>
<patient>
<name>
<fname> Arun </fname>
<mname> M </mname>
<lname> Bhat </lname>
</name>
<ssn> SSN10002</ssn>
<age> 20 </age>
<room-no> 105 </room-no>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 12

Date:

___

Date :

<insurance type="primary">
<id> 45423 </id>
<gn> 454 </gn>
<address> #32, s/o Ramesh Bhat,
Kajubhag,
Karwar-581301
</address>
</insurance>
<insurance type="secondary">
<id> 45524 </id>
<gn> 455 </gn>
<address> #32, s/o Ramesh Bhat,
Kajubhag,
Karwar-581301
</address>
</insurance>
<med-problem> Diabetis </med-problem>
<drugallergie> Nill </drugallergie>
</patient>
</patients>

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 13

Date:

___

Date :

Experiment 6:Create a CSS style sheet for the above XML document and use it to create a display of that
document.
Program6.css
patients
{

display:block;
margin-left:5%;
margin-right:5%;
border:solid red 5px;
padding:8px;
font-family:arial;
font-size:13.5 pt;
font-weight:bold;

}
patient
{

}
name
{

}
age
{

}
ssn
{

}
room-no
{

display:block;
margin-left:5%;
border:solid green;
padding:4px;

display:block;
color:purple;
margin-left:5%;

display:block;
color:purple;
margin-left:5%

display:block;
color:purple;
margin-left:5%

display:block;
color:purple;
margin-left:5%

insurance
{
display:block;
color:purple;
margin-left:5%
}
med-problem
{
display:block;
color:purple;
margin-left:5%
}

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 14

Date:

___
drugallergies
{
display:block;
color:purple;
margin-left:5%
}

Date :

Program6.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml:stylesheet type="text/css" href=" program6.css"?>
<patients>
<hname>Apollo Victor Hospital</hname>
<patient>
Name:<name>
<fname>Ram</fname>
<mname>M</mname>
<lname>Poojari</lname>
</name>
SSN:<ssn>ssn1001</ssn>
Age:<age>25</age>
Room-no:<room-no>105</room-no>
Insurance Primary:<insurance type="primary">
<id>23345</id>
<gn>233</gn>
<address>Karwar</address>
</insurance>
Insurance Secondary:<insurance type="Secondary">
<id>23346</id>
<gn>244</gn>
</insurance>
Medical Problem:<med-problem>High BP</med-problem>
Drug Allergie:<drugallergies>Nill</drugallergies>
</patient>
<patient>
Name:<name>
<fname>Raj</fname>
<mname>M</mname>
<lname>Naik</lname>
</name>
SSN:<ssn>ssn2001</ssn>
Age:<age>23</age>
Room-no:<room-no>108</room-no>
Insurance Primary:<insurance type="primary">
<id>23378</id>
<gn>236</gn>
<address>Karwar</address>
</insurance>
Insurance Secondary:<insurance type="Secondary">
<id>23346</id>
<gn>285</gn>
</insurance>
Medical Problem:<med-problem>High BP</med-problem>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 15

Date:

___
Drug Allergie:<drugallergies>Nill</drugallergies>
</patient>

Date :

<patient>
Name:<name>
<fname>Gopal</fname>
<mname>K</mname>
<lname>Rao</lname>
</name>
SSN:<ssn>ssn3001</ssn>
Age:<age>28</age>
Room-no:<room-no>106</room-no>
Insurance Primary:<insurance type="primary">
<id>2656</id>
<gn>256</gn>
<address>Karwar</address>
</insurance>
Insurance Secondary:<insurance type="Secondary">
<id>2656</id>
<gn>289</gn>
</insurance>
Medical Problem:<med-problem>Astama</med-problem>
Drug Allergie:<drugallergies>Nill</drugallergies>
</patient>
<patient>
Name:<name>
<fname>Ramu</fname>
<mname>K</mname>
<lname>Rao</lname>
</name>
SSN:<ssn>ssn4001</ssn>
Age:<age>28</age>
Room-no:<room-no>106</room-no>
Insurance Primary:<insurance type="primary">
<id>256572</id>
<gn>692</gn>
<address>Karwar</address>
</insurance>
Insurance Secondary:<insurance type="Secondary">
<id>23546</id>
<gn>255</gn>
</insurance>
Medical Problem:<med-problem>High BP</med-problem>
Drug Allergie:<drugallergies>Nill</drugallergies>
</patient>
</patients>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 16

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 17

Date:

___

Date :

Experiment 7:Create XSLT style sheet for one patient element of the XML, document of exercise 5 and use it
to create a display of that element.
Program7.xsl
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:template match="patients">
<html>
<head>
<title> Program 7 </title>
</head>
<body>
<h1>Patients Information</h1>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="name">
<span style="font-style:italic;color:red;">NAME:</span>
<xsl:value-of select="."/>
<br/>
</xsl:template>
<xsl:template match="ssn">
<span style="font-style:italic;color:red;">SSN:</span>
<xsl:value-of select="."/>
<br/>
</xsl:template>
<xsl:template match="age">
<span style="font-style:italic;color:red;">AGE:</span>
<xsl:value-of select="."/>
<br/>
</xsl:template>
<xsl:template match="roomno">
<span style="font-style:italic;color:red;">ROOM NO:</span>
<xsl:value-of select="."/>
<br/>
</xsl:template>
<xsl:template match="primaryinsurancecompany">
<span style="font-style:italic;color:red;">PRIMARY INSURANCE
COMPANY:</span>
<xsl:value-of select="."/>
<br/>
</xsl:template>
<xsl:template match="secondaryinsurancecompany">
<span style="font-style:italic;color:red;">SECONDARY INSURANCE
COMPANY:</span>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 18

Date:

___
Date :
<xsl:value-of select="."/>
<br/>
</xsl:template>
<xsl:template match="medicalproblems">
<span style="font-style:italic;color:red;">MEDICAL PROBLEMS:</span>
<xsl:value-of select="."/>
<br/>
</xsl:template>
<xsl:template match="drugallergies">
<span style="font-style:italic;color:red;">DRUG ALLERGIES:</span>
<xsl:value-of select="."/>
<br/>
</xsl:template>
</xsl:stylesheet>

Program7.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="Program7.xsl"?>
<patients>
<patient>
<name id="11">
<fname>Jai</fname>
<mname>C</mname>
<lname>Rao</lname>
</name>
<ssn>111</ssn>
<age>25</age>
<roomno>100</roomno>
<primaryinsurancecompany>
<mino>ka11</mino>
<grno>ka</grno>
<address>
<street>green</street>
<city>kwr</city>
<pin>581301</pin>
</address>
</primaryinsurancecompany>
<secondaryinsurancecompany>
<mino>ka11</mino>
<grno>ka</grno>
<address>
<street>green</street>
<city>kwr</city>
<pin>581301</pin>
</address>
</secondaryinsurancecompany>
<medicalproblems>cold</medicalproblems>
<drugallergies>nill</drugallergies>
</patient>
</patients>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 19

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 20

Date:

___

Date :

Experiment 8:Modify the XSLT style sheet to format all the patient elements of the XML, document of
exercise 5 and use it to create a display of whole element.
Program8.xsl
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:template match="patients">
<html>
<head>
<title> Program 8 </title>
</head>
<body>
<h1>Patient Information</h1>
</body>
</html>
<xsl:for-each select="patient">
<span style="font-style:italic;color:red;">NAME:</span>
<xsl:value-of select="name"/>
<br/>
<span style="font-style:italic;color:red;">SSN:</span>
<xsl:value-of select="ssn"/>
<br/>
<span style="font-style:italic;color:red;">AGE:</span>
<xsl:value-of select="age"/>
<br/>
<span style="font-style:italic;color:red;">ROOM NO:</span>
<xsl:value-of select="roomno"/>
<br/>
<span style="font-style:italic;color:red;">PRIMARY INSURANCE
COMPANY:</span>
<xsl:value-of select="primaryinsurancecompany"/>
<br/>
<span style="font-style:italic;color:red;">SECONDARY INSURANCE
COMPANY:</span>
<xsl:value-of select="secondaryinsurancecompany"/>
<br/>
<span style="font-style:italic;color:red;">MEDICAL PROBLEMS:</span>
<xsl:value-of select="medicalproblems"/>
<br/>
<span style="font-style:italic;color:red;">DRUG ALLERGIES:</span>
<xsl:value-of select="drugallergies"/>
<br/>
<br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 21

Date:

___

Date :

Program8.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="Program8.xsl"?>
<patients>
<patient>
<name id="11">
<fname>Jai</fname>
<mname>C</mname>
<lname>Rao</lname>
</name>
<ssn>111</ssn>
<age>22</age>
<roomno>100</roomno>
<primaryinsurancecompany>
<mino>ka11</mino>
<grno>ka</grno>
<address>
<street>Green street</street>
<city>Ankola</city>
<pin>581314</pin>
</address>
</primaryinsurancecompany>
<secondaryinsurancecompany>
<mino>ka11</mino>
<grno>ka</grno>
<address>
<street>Green street</street>
<city>Ankola</city>
<pin>581314</pin>
</address>
</secondaryinsurancecompany>
<medicalproblems>cold</medicalproblems>
<drugallergies>nill</drugallergies>
</patient>
<patient>
<name id="12">
<fname>Sita</fname>
<mname>G</mname>
<lname>Prasad</lname>
</name>
<ssn>111</ssn>
<age>21</age>
<roomno>101</roomno>
<primaryinsurancecompany>
<mino>ka30</mino>
<grno>ka</grno>
<address>
<street>Beach Road</street>
<city>Karwar</city>
<pin>581301</pin>
</address>
</primaryinsurancecompany>
<secondaryinsurancecompany>
<mino>ka30</mino>
<grno>ka</grno>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 22

Date:

___
<address>
<street>Beach Road</street>
<city>Karwar</city>
<pin>581301</pin>
</address>
</secondaryinsurancecompany>
<medicalproblems> feaver</medicalproblems>
<drugallergies>nill</drugallergies>
</patient>

Date :

</patients>

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 23

Date:

___

Date :

INTRODUCTION TO PHP
PHP (Hypertext Preprocessor) is a widely-used open source general-purpose scripting
language that is especially suited for web development and can be embedded into HTML. PHP
scripting code is frequently used to connect web pages to MySQL databases to create dynamic web
sites. Some popular examples of PHP driven web sites would be blogs, message boards, and Wikis.
PHP files are actually plain text files; they can be created in Text Pad or any other Plain Text Editor.
In a text editor set the Save As type to text and save the file with a .php extension.
PHP is very powerful server side scripting language like ASP for developing dynamic web
applications. Using PHP, we can build interactive and dynamic websites with ease.
It is free; it is suitable for web development, it is efficient, it is widely used and it is considered
to be the most powerful alternative to Microsofts ASP.
PHP script can be embedded straight into heart of html code just like ASP. Its syntax is very
much similar to that of C and Perl.
PHP is compatible with various web servers like Apache and Microsofts IIS. It supports
various databases like MYSQL, Oracle, Solid, Generic ODBC etc.

Common USE of PHP:PHP performs system functions.


PHP can handle forms.
We can add, delete, and modify elements within our database thru PHP.
Access cookies variables and set cookies.
Using PHP, we can restrict users to access some pages of our website.
Using PHP, we can encrypt data.

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 24

Date:

___

Date :

Experiment 9:Parameter - A string of numbers separated by spaces


Return Value The first 4 digits number in the string; false if none.
<html>
<head>
<title> Program 9 </title>
</head>
<body>
<?php
function display($str)
{
$words=explode(" ",$str);
$n=$words[0];
$n=substr($n,0,5);
$n=(double) $n;
return $n;
}
$str="1234563 134599 156733 234688";
$n=display($str);
echo $n;
?>
</body>
</html>

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 25

Date:

___

Date :

Experiment 10:Parameter A file variable of a file of text where the words are separated by spaces or colons
Return value The word that appears most common in the file.
<html>
<head>
<title> Program 10 </title>
<body>
<?php
$str=file_get_contents("vb.txt");
$words=explode(" ",$str);
$res=array_count_values($words);
asort($res);
end($res);
$ans=key($res);
echo "<b> Most common word in the given file is:&nbsp $ans<b>";
?>
</body>
</html>

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 26

Date:

___

Date :

Experiment 11:Write an XHTML document to include an anchor tag, that calls a PHP document also write the
called PHP document which returns a randomly choosen 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 lines.
#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
Program11.html
<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<title> Program 11 </title>
</head>
<body>
<a href="http://localhost/Program11.php">Click here to display Random
Greeting Messages</a>
</body>
</html>

Program11.php
<html>
<head>
<title> Program11 </title>
</head>
<body>
<?php
$no=rand(0,3);
$greetings=array("Welcome to Web Programming Lab","Welcome to
PHP","Welcome to XML","Welcome to GPTK....");
$msg=$greetings[$no];
echo "<b>$msg</b>";
?>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 27

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 28

Date:

___

Date :

Experiment 12:Write the XHTML code 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
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title> Program 12 </title>
</head>
<body>
<h2>Welcome to Smart Bulb Sales</h2>
<table>
<tr><td><b>Buyers Name:<b></td>
<td><input type="text" name="name" size="30"/></td>
</tr>
</table>
<p1>
<table border="border">
<tr>
<th>Product</th>
<th>Select</th>
</tr>
<tr>
<td>Four 100 watt light bulbs for Rs.20</td>
<td align="center">
<input type="checkbox" name="items[]" value="one"/></td>
</tr>
<tr>
<td>Eight 100 watt light bulbs for Rs.40</td>
<td align="center">
<input type="checkbox" name="items[]" value="two"/></td>
</tr>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 29

Date:

___
<tr>

Date :

<td>Four 100 watt long life light bulbs for Rs.30</td>


<td align="center">
<input type="checkbox" name="items[]" value="three"/></td>
</tr>
<tr>
<td>Eight 100 watt long life light bulbs for Rs.70</td>
<td align="center">
<input type="checkbox" name="items[]" value="four"/></td>
</tr>
</table>
<p1>
<h3>Payment Method</h3>
<p>
<input type="radio" name="payment" value="visa" checked="checked"/>
Visa<br/>
<input type="radio" name="payment" value="master card"/>
Master card<br/>
<input type="radio" name="payment" value="discover"/>
Discover<br/>
<br/>
<input type="submit" value="Submit order"/>
<input type="reset" value="Clear order form"/>
</p>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 30

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 31

Date:

___

Date :

Experiment 13:Write a PHP script that computes the total cost of the ordered light bulbs from the exercise 12
after adding 13.5% VAT. The program must inform the buyer of exactly what was ordered in table.
Program13.html
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title> Program 13 </title>
</head>
<body>
<form action="http://localhost/Program13.php" method="POST">
<h2>Welcome to Smart Bulb Sales</h2>
<table>
<tr><td><b>Buyers Name:<b></td>
<td><input type="text" name="name" size="30"/></td>
</tr>
</table>
<p1>
<table border="border">
<tr>
<th>Product</th>
<th>Select</th>
</tr>
<tr>
<td>Four 100 watt light bulbs for Rs.20</td>
<td align="center">
<input type="checkbox" name="items[]" value="one"/></td>
</tr>
<tr>
<td>Eight 100 watt light bulbs for Rs.40</td>
<td align="center">
<input type="checkbox" name="items[]" value="two"/></td>
</tr>
<tr>
<td>Four 100 watt long life light bulbs for Rs.30</td>
<td align="center">
<input type="checkbox" name="items[]" value="three"/></td>
</tr>
<tr>
<td>Eight 100 watt long life light bulbs for Rs.70</td>
<td align="center">
<input type="checkbox" name="items[]" value="four"/></td>
</tr>
</table>
<p1>
<h3>Payment Method</h3>
<p>
<input type="radio" name="payment" value="Visa" checked="checked"/>
Visa<br/>
<input type="radio" name="payment" value="Master card"/>
Master card<br/>
<input type="radio" name="payment" value="Discover"/>
Discover<br/>
<br/>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 32

Date:

___
<input type="submit" value="Submit order"/>
<input type="reset" value="Clear order form"/>
</p>
</form>
</body>
</html>

Date :

Program13.php
<html>
<body>
<?php
$cname=$_POST["name"];
$items=$_POST["items"];
$payment=$_POST["payment"];
$itemnames[0]="Four 100 watt light bulbs for Rs.20";
$itemnames[1]="Eight 100 watt light bulbs for Rs.40";
$itemnames[2]="Four 100 watt long life light bulbs for Rs.30";
$itemnames[3]="Eight 100 watt long life light bulbs for Rs.70";
$i=0;
$item1=" ";
$item2=" ";
$item3=" ";
$item4=" ";
$totalSum=0;
foreach($items as $item)
{
if($item=="one")
{
$item1=$itemnames[0];
$totalSum+=20;
}
if($item=="two")
{
$item2=$itemnames[1];
$totalSum+=40;
}
if($item=="three")
{
$item3=$itemnames[2];
$totalSum+=30;
}
if($item=="four")
{

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 33

Date:

___

Date :
$item4=$itemnames[3];
$totalSum+=70;
}

}
print"<br/><h1>The items are ordered by $cname and the bill details
including vat 13.5 is shown below:</h1><br/>";
if($item1!=" ")
{
print"$item1 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp =20Rs<br/>";
}
if($item2!=" ")
{
print"$item2 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp =40Rs<br/>";
}
if($item3!=" ")
{
print"$item3 &nbsp =30Rs<br/>";
}
if($item4!=" ")
{
print"$item4 &nbsp =70Rs<br/>";
}
print"<br/><b>Total amount=$totalSum</b>";
$vatTotal=($totalSum*0.135)+$totalSum;
print"<br/><b>After adding vat=$vatTotal</b>";
print"<br/><b> Payment made in $payment<b>";
?>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 34

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 35

Date:

___

Date :

Experiment 14:Write a XHTML code 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 one PHP script
when the form is submitted and another to request a current list of survey results.
Program14.html
<!DOCTYPE HTML PUBLIC"_//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html";
charset=iso-8859-1">
<title> Program 14 </title>
</head>
<body>
<b>Please enter the song details below.</b><br>
<form action="http://localhost/Program14.php" method="get">
<table>
<tr>
<td><b>Name of the song:</b>
</td>
<td>
<input type="text" name="sname"/>
</td>
</tr>
<tr>
<td><b>Composer:</b>
</td>
<td>
<input type="text" name="composer"/>
</td>
</tr>
<tr>
<td><b>Artist:</b>
</td>
<td>
<input type="text" name="artist"/>
</td>
</tr>
<tr>
<td>&nbsp;
</td>
<td>
<input type="Submit"/>
<input type="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 36

Date:

___

Date :

Program14.php
<html>
<body>
<?php
$sname=$_GET['sname'];
$composer=$_GET['composer'];
$artist=$_GET['artist'];
$valid=0;
if($sname==" "|| $composer==" "|| $artist==" ")
{
$valid=0;
echo"All the fields are not entered please re-enter<br>
<a href=\"Program14.html\"> Back</a>";
}
else
$valid=1;
if($valid==1)
{
if(file_exists("Songs.txt"))
{
$oldData=file_get_Contents("Songs.txt");
$str=$oldData.$sname."&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp".$composer."&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp".$artist."<br>";
}
else
{
$str=$sname." &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp".$composer."&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp".$artist."<br>";
}
file_put_Contents("Songs.txt",$str);
echo"<h2>The list of song details collected is shown below<br></h2>";
$data=file_get_Contents("Songs.txt");
echo"<b>Song name &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
&nbsp Composer &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
Artist</b><br>";
echo"$data";
}
?>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 37

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 38

Date:

___

Date :

Experiment 15: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.
Program15.html
<html>
<head>
<title> Program 15</title>
</head>
<body>
<b>Enter the User Name and Phone No</b>
<form action="http://localhost/Program15.php" method="post">
<p><b>Name:</b>
<input type="text" name="uname"/>
</p>
<p><b>Phone No:</b>
<input type="text" name="phno"/>
<br/><br/>
<input type="Submit" name=" "/>
<input type="Reset" name=" "/>
</p>
<p>
</p>
</form>
</body>
</html>

Program15.php
<html>
<body>
<?php
$uname=$_POST['uname'];
$phno=$_POST['phno'];
$no=$phno;
echo"Welcome user <b>$uname</b><br/>";
if(preg_match("/\d{3}-\d{3}-\d{4}/",$phno))
{
echo"<b>$no</b> is in valid format";
echo"<a href=\"http://localhost/Program15.html\"> Click to enter
again</a>";
}
else
{
echo"<b>$no</b> is in invalid format(nnn-nnn-nnnn)<br>";
echo"<a href=\"http://localhost/Program15.html\"> Click to enter
again</a>";
}
?>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 39

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 40

Date:

___

Date :

Experiment 16:Modify the PHP script of exercise 11 to count the number of visitors and display that number
for each visitor.
Hint: Use a file to store current count.
Program16.html
<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<title> Program 16 </title>
</head>
<body>
<a href="http://localhost/Program16.php">Click here to display random
greeting messages from PHP script</a>
</body>
</html>

Program16.php
<html>
<body>
<?php
$visitorCount=file_get_contents("vc.txt");
++$visitorCount;
file_put_contents("vc.txt",$visitorCount);
echo"Welcome you are visitor no <b>\"$visitorCount\"</b> who have visited
this page.<br>";
$no=rand(0,3);
$greetings=array("Hi Good Morning","Welcome to Web Programming Lab","Hi
Good Afternoon","PHP is easy to understand");
$msg=$greetings[$no];
echo"<br><br><br>";
echo"<b>$msg</b>";
echo"<br><br><br>";
echo"<a href=\"http://localhost/Program16.html\">Click here to go
back</a>";
?>
</body>
</html>

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 41

Date:

___

Date :

OUTPUT:-

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 42

Date:

___

Date :

Wamp Server Installation:WampServer is a Windows web development environment. It allows you to create web applications
with Apache2, PHP and a MySQL database. Alongside, PhpMyAdmin allows you to manage easily
our database
1. Download Wamp
You can download wamp from any website by clicking on download tab or link.

2. Save File

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 43

Date:

___

Date :

3. Double Click on Installer WampServer 2.0i

4. Click Run to Install

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 44

Date:

___

Date :

5. Click Next

6. Select Option I accept and then click on next.

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 45

Date:

___

Date :

7. Choose the directory and click next.

8. Select Additional Icon


You can select either one or both the icon and then click on next button.

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 46

Date:

___

Date :

9. Click Install

10. Installing Process


The installing processes going on wait for a while to install the wamp.

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 47

Date:

___

Date :

11. Click Next

12. Click Finish


The moment you click on finish button, your Wamp Server installed on your computer.

GOVERNMENT POLYTECHNIC, KARWAR


Page No.: 48

Date:

___

Date :

13. Take a look on Wamp Setting.

Look at your right hand side of your task bar, there was a small wamp icon in the shape of semi-circle.
Just left click on the icon and look at all the setting are available here. First click on Put Online.
Second, go to Start All Services and Click on the Localhost link in the WampSever menu or open
your internet browser and go to the URL : http://localhost.
All Programs must be stores in www (usually c:\wamp\www)
14. Take a look on WampServer.

The WampServer shows all the configuration of all the software and also two tools on the left hand
side. The first one is phpinfo() from there you can get information about the php and the second one
isphpmyadmin, this is your database and you can create database by clicking on the phpmyadmin.

You might also like