Scribd
Upload
311 views

Final Web Lab Manual-1

The document describes developing XHTML documents that demonstrate various CSS features and JavaScript functionality. It provides examples of: 1. Developing an XHTML document with an external CSS stylesheet applying styles like fonts, colors, borders and padding. 2. Developing XHTML files with JavaScript scripts to: a) Get user input of a number n and output the first n Fibonacci numbers. b) Get user input of a number n and output a table of numbers from 1 to n and their squares using alert. 3. Developing XHTML files with JavaScript functions to: a) Get a string as a parameter and output the position of the leftmost vowel. b) Get a number as a parameter and

Uploaded by

Pankaj Choudhary
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
311 views

Final Web Lab Manual-1

The document describes developing XHTML documents that demonstrate various CSS features and JavaScript functionality. It provides examples of: 1. Developing an XHTML document with an external CSS stylesheet applying styles like fonts, colors, borders and padding. 2. Developing XHTML files with JavaScript scripts to: a) Get user input of a number n and output the first n Fibonacci numbers. b) Get user input of a number n and output a table of numbers from 1 to n and their squares using alert. 3. Developing XHTML files with JavaScript functions to: a) Get a string as a parameter and output the position of the leftmost vowel. b) Get a number as a parameter and

Uploaded by

Pankaj Choudhary
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 47

1.

Develop and demonstrate a XHTML document that illustrates the use external style
sheet, ordered list, table, borders, padding, color, and the <span> tag.

xhtml.css

p.major {
font-size: 14pt;
font-style: italic;
font-family: 'Times New Roman';
}
p.minor {
font: 10pt bold 'Courier New';
}
h2 {
font-familY: 'Times New Roman';
font-size: 20pt; font-weight: bold
}
h3 {
font-family: 'Courier New';
font-size: 16pt;
color:red;
}
table {
border-top-width: medium;
border-bottom-width: thick;
border-top-color: red;
border-bottom-color: blue;
border-top-style: dotted;
border-bottom-style: dashed;
}
p {
border-style: dashed; border-width: thin; border-color: green
}
p.one {
padding: 0.2in;
background-color: #C0C0C0;
border-style: solid;
}
th.red {color: red}
th.orange {color: orange}
th.blue {color: blue}.spanred {font-size: 24pt; font-family: Ariel; color:
red;}
xhtml.html
<?xml version = "1.0" encoding = "utf-8"?>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head><title>basic html tags</title>
<link rel = "stylesheet" type = "text/css" href="xhtml.css" />
</head>
<body>
<h3>Program that illustrates the use of the external style sheet</h3>
<p class = "major">
Welcome you all for the workshop on "Web Programming".
</p>
<p class = "minor">
Hope you enjoy the sessions and make it a grand success.
</p>
<h2> Introduction </h2>
<h3> 1.1 The Basics of WEB </h3>
<ol>
<li> Introduction to XHTML </li>
<li> Introduction XML </li>
<li> Introduction to javascript </li>
<li> Introduction to CSS </li>
<li> Introduction to Dynamic Documents </li>
</ol>
<table border = "5px">
<caption> Sessions dates </caption>
<tr>
<th></th>
<th class = "red"> xhtml </th>
<th class = "orange"> CSS</th>
<th class = "blue"> XML </th>
</tr>
<tr>
<th> Thur </th>
<td> 8-9 </td>
<td> 10-11 </td>
<td> 12-1 </td>
</tr>
<tr>
<th> Fri</th>
<td> 8-9 </td>
<td> 10-11 </td>
<td> 12-1 </td>
</tr>
<tr>
<th> Sat </th>
<td> 8-9 </td>
<td> 10-11 </td>
<td> 12-1 </td>
</tr>
</table>
<p>Now it is the time for all good Web programmers to learn to use style
sheets. </p>
<p class ="one">Now is the time for all good web programmers to learn to use
style sheets. <br ></p>
<p>Lab sessions are held in the <span class = "spanred"> afternoon.
</span></p></body></html>

Dept. of CSE RGIT.


Output: Displays the format of all the CSS tags used.

Dept. of CSE RGIT.


2) Develop and demonstrate a XHTML file that includes Javascript script for the following
problems:

a) Input: A number n obtained using prompt.


Output: The first n Fibonacci numbers.

b) Input: A number n obtained using prompt.


Output: A table of numbers from 1 to n and their squares using alert.

2(a) Input: A number n obtained using prompt

<?xml version="1.0" encoding="UTF-8"?>


<!--
Document : fib
Created on : Mar 28, 2009, 10:50:21 PM
Author : User
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> fib.html </title>
</head>
<body style="background-color:yellow">
<h3 style="text-align:center;color:red"> Program to generate the
Fibonacci Series</h3>
<script type="text/javascript" >
var limit= prompt("Enter the limit 'n' to generate the fibonacci
series:","");
var f1=0;
var f2=1;
document.write("The limit entered to generate the fibonacci series
is:" , limit , "<br/>");
document.write("The fibonacci series: <br/>");
document.write("",f1,"<br/>");
document.write("",f2,"<br/>");
var i,f3;
for(i=2; i<limit; i++)
{
f3=f1+f2;
document.write("",f3,"<br/>");
f1=f2;
f2=f3;
}
</script>
</body>
</html>

Dept. of CSE RGIT.


2(a)Output: Generates first n Fibonacci numbers

Screen 1: Run the program in the Netbeans. This opens a browser window along with the user prompt to
enter the limit to generate the Fibonacci series.

Screen 2: The limit entered to generate the Fibonacci series is: 10

Screen 3: The program generates the Fibonacci series for limit entered.

Dept. of CSE RGIT.


2(b) Input: A number n obtained using prompt

<? xml version ="1.0" encoding = "utf-8?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> square.html </title>
</head>
<body style="background-color:yellow">
<h3 style="text-align:center;color:red"> Program to generate a table
of numbers from 1 to n and their squares using alert</h3>
<script type="text/javascript" >
var n= prompt("Enter the limit 'n' to generate the table of
numbers from 1 to n:","");
var msg = "";
var res = "0";
for(var x = 1; x <= n; x++)
{
res = x * x;
msg = msg + " "+ x + " * "+ x + " = " + res + "\n";
}
alert(msg);
</script>
</body>
</html>

Dept. of CSE RGIT.


2(b)Output: A table of numbers from 1 to n and their squares
using alert.

Screen 1: Run the program in the Netbeans. This opens a browser window along with the user prompt to
enter the limit to generate square table.

Screen 2: The limit entered to generate the square table is: 12

Screen 3: The program generates the square table for limit entered using alert.

Dept. of CSE RGIT.


3. Develop and demonstrate a XHTML file that includes Javascript script that uses
functions for the following problems:

a) Parameter: A string
Output: The position in the string of the left-most vowel
b) Parameter: A number
Output: The number with its digits in the reverse order

3(a) Parameter: A string

<? xml version ="1.0" encoding = "utf-8?>

<html xmlns = "http://www.w3.org/1999/xhtml">


<head>
<title> string.html </title>
<script type="text/javascript">
function str_vowel()
{
var str= prompt("Enter the string\n", " ");
for( var i=0; i<str.length; i++)
{
if(str.charAt(i) =='a' ||str.charAt(i)=='e'||str.charAt(i)=='i'
||str.charAt(i)=='o'||str.charAt(i)=='u'||str.charAt(i)=='A'||
str.charAt(i)=='E'||str.charAt(i)=='I'||str.charAt(i)=='O'
|| str.charAt(i)=='U')
{
document.write(" The entered string is:" +str+ "<br/>");
document.write(" The leftmost vowel is:" +str.charAt(i)+
"<br/>");
var pos=i+1;
document.write(" The position of the leftmost vowel "
+str.charAt(i)+ " is: " +pos+ "\n");
exit;
}

}
document.write(" The entered string is:" +str+ "<br/>");
document.write(" The entered string has no vowels ");
}
</script>
</head>
<body style="background-color:yellow" onload="str_vowel();" >
<h3 style="text-align:center;color:red"> Program includes Javascript
script functions to find the position of the left-most vowel in the
entered string.</h3>
</body>
</html>

Dept. of CSE RGIT.


3(a)Output: The position in the string of the left-most vowel

Screen 1: Run the program in the Netbeans. This opens a browser window along with the user prompt to
enter the string.

Screen 2: (Run 1): The string entered is BIET. The position of the left most vowel is 2

Screen 3: (Run 2): The string entered is rvwxyz. The entered string has no vowels.

Dept. of CSE RGIT.


3(b) Parameter: A number

<? xml version ="1.0" encoding = "utf-8?>


<!--
Document : To reverse a given number
Created on : JUNE 2009
Author : User
-->

<html xmlns = "http://www.w3.org/1999/xhtml">


<head>
<title> reverse.html </title>
<script type="text/javascript">
function rev_num()
{
var num = prompt("Enter the number to be reversed:"," ");
var n = num;
var rev = 0,rem;
while(n > 0)
{
rem = n % 10;
rev = rev * 10 + rem;
n = Math.floor( n / 10);
}
document.write("The given number is : " +num+ " <br /> The
reverse of the given number is :" +rev+ "\n");
}
</script>
</head>
<body style="background-color:yellow" onload="rev_num();">
<h3 style="text-align:center;color:red"> Program includes Javascript
script functions to reverse the entered number.</h3>
</body>
</html>

Dept. of CSE RGIT.


3(b)Output: The number with its digits in the reverse order

Screen 1: Run the program in the Netbeans. This opens a browser window along with the user prompt to
enter the number.

Screen 2: The entered number to be reversed is: 1234

Screen 3: The reverse of the enter4ed number is: 4321

Dept. of CSE RGIT.


4. a) Develop and demonstrate, using Javascript script, a XHTML document that collects
the USN ( the valid format is: A digit from 1 to 4 followed by two upper-case characters
followed by two digits followed by two upper-case characters followed by three digits;
no embedded spaces allowed) of the user. Event handler must be included for the form
element that collects this information to validate the input. Messages in the alert
windows must be produced when errors are detected.

b) Modify the above program to get the current semester also (restricted to be a number
from 1 to 8)

4(a)XHTML document that collects the USN

<?xml version="1.0" encoding="utf-8"?>


<html xmlns="http://www.w3.org/1999/xhtml/">
<head><title>USN.html</title>
<script type="text/javascript">
function checkusn()
{
var str=document.getElementById("usn");
var result=str.value.search(/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{2}\d{3}$/);
if(result!=0)
{
alert("Entered usn("+str.value+") is not in the correct form.\n"+
"The correct pattern is : 1RG07CS080\n"+"Please go back and
retype your USN");
}
else
{
alert("Entered usn("+str.value+") is in the correct form.\n");
}
}
</script>
</head>
<body style="background-color:yellow">
<h3 style="text-align:center;color:red"> Program includes XHTML document to
collect the Student-Information</h3>
<h3 style="color:purple">Student Information </h3>
<form name="my form">
<p style="color:purple"> Enter your USN:</p>
<input type="text" id="usn" size=15/>
<br/>
<br/>
<input type="button" onclick="checkusn()" value="Submit"/>
<input type = "reset" value= "Reset" />
<br/>
</form>
</body>
</html>

Dept. of CSE RGIT.


4(a)Output: Collects the student information in the correct
format specified

Screen 1: Browser window is displayed to collect the student information

Screen 2: Run 1: Entered USN is (4bd06cs044), which is not in the correct format. The correct
format is 4BD06CS099, which is displayed on the alert box.

Screen 3: Run 2: Entered USN is 4BD06CS099, which is in the correct format. The alert box
displays the message saying it is in the correct format.

Dept. of CSE RGIT.


4(b) Modify the above program to get the current semester also
(restricted to be a number from 1 to 8)

<?xml version="1.0" encoding="utf-8"?>


<!DOCTYPE html PUBLIC "-//w3c//DTD.xhtml 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--this is the way we should comment-->
<html xmlns="http://www.w3.org/1999/xhtml/">
<head>
<title>USN.html</title>
<script type="text/javascript">
function checkusn()
{
var str=document.getElementById("usn");
var result=str.value.search(/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{2}\d{3}$/);
var stsem = document.getElementById("sem");
var pos = stsem.value.search(/[1-8]/);
if(result=>0&&pos=>0)
{
alert("Entered usn("+str.value+") is in the correct form.\n"+"Entered
sem("+stsem.value+") is in the correct form.\n");
}
else if(result<0&&pos>0)
alert("Entered usn("+str.value+") is not in the correct form.\n"+
"The correct pattern is : 1RG07CS080\n");
else if(result>0&&pos<0)
alert("Entered sem("+stsem.value+") is not in the correct range.\n"+
"The number is between 1 to 8\n");

else
{
alert("Entered usn("+str.value+") is not in the correct form.\n"+
"The correct pattern is : 1RG07CS080\n"+
"Entered sem("+stsem.value+") is not in the correct range.\n"+
"The number is between 1 to 8\n"+
"Please go back and retype your USN & sem");
}
}
</script>
</head>
<body>
<h3>Student Information </h3>
<form name="my form">
<p> Enter your USN:</p>
<input type="text" id="usn" size=15/>
<br/>
<p> Enter your SEM:</p>
<input type="text" id="sem" size=15/>
<br/>
<br/>
<input type="button" onclick="checkusn()" value="validate"/>
<input type = "reset” value= "reset" />
<br/>
</form>
</body></html>

Dept. of CSE RGIT.


4(a)Output: Collects the student information in the correct
format specified

Screen 1: Run 1: Entered USN is (1RG06cs099) and Sem is (9), which is not in the correct
format. The correct format is 1RG06CS099, & the Sem range is with in (1-8), which is displayed
on the alert box.

Screen 2: Run 2: Entered USN is (1RG06CS099) and Sem is (5). Which is in the correct format.

5. a) Develop and demonstrate, using Javascript script, a XHTML document that contains

Dept. of CSE RGIT.


three short paragraphs of text, stacked on top of each other, with only enough of each
showing so that the mouse cursor can be placed over some part of them. When the
cursor is placed over the exposed part of any paragraph, it should rise to the top to
become completely visible.
b) Modify the above document so that when a paragraph is moved from the top stacking
position, it returns to its original position rather than to the bottom.

5(a)XHTML document that contains three short paragraphs of text,


stacked on top of each other.

<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>The Stacking order</title>
<style type="text/css">
.layer1Style
{
border: solid thick black;
padding: 1em;
width:300px;
background-color:green;
position:absolute;
top:100px;
left:200px;
z-index:0;
}
.layer2Style
{
border: solid thick red;
padding: 1em;
width:300px;
background-color:BLUE;
position:absolute;
top:120px;
left:220px;
z-index:0;
}
.layer3Style
{
border: solid thick green;
padding: 1em;
width:300px;
background-color:purple;
position:absolute;
top:140px;
left:240px;
z-index:0;
}
</style>

Dept. of CSE RGIT.


<script type="text/javascript">
var topLayer="layer3";
function mover(toTop)
{
var oldTop=document.getElementById(topLayer).style;
var newTop=document.getElementById(toTop).style;
oldTop.zIndex="0";
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
}
</script>
</head>
<body><body style="background-color:yellow">
<h2 style="text-align:center;color:red"> Program includes XHTML
document to show the Stacking of Paragraphs</h2>
<div style="z-index: 10;" class="layer1Style" id="layer1"
onmouseover="mover('layer1')">
The lives of most inhabitants of Industrialized Countries, has
well as some unindustrialized countries, have been changed forever by the
advent of WWW.
</div>
<div style="z-index: 2;" class="layer2Style" id="layer2"
onmouseover="mover('layer2')">
The www may seem like magic , untill you undrestand how it
works.The Web is accessed through a browser.
</div>
<div style="z-index: 0;" class="layer3Style" id="layer3"
onmouseover="mover('layer3')">
Windows XP provides many ways for you to communicate with friends,
co-workers, and I with the rest of the world.
</div>
</body>
</html>

Dept. of CSE RGIT.


5(a)Output: That shows the stacking of the paragraphs

Screen 1: The window shows the default stacking of the paragraphs.

Screen 2: The window shows the paragraph when the mouse cursor is placed on it.

Dept. of CSE RGIT.


5(b) The Stacking of paragraphs and moved from the top stacking
position, it returns to its original position.

<!DOCTYPE HTML PUBLIC "-//w3c//DTD XHTML 1.1//EN">


<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>The Stacking order</title>
<style type="text/css">
.layer1Style{
border: solid thick black;
padding: 1em;
width:300px;
background-color:green;
position:absolute;
top:100px;
left:400px;
z-index:1;
}
.layer2Style{
border: solid thick blue;
padding: 1em;
width:300px;
background-color:red;
position:absolute;
top:120px;
left:420px;
z-index:2;
}
.layer3Style{
border: solid thick brown;
padding: 1em;
width:300px;
background-color:orange;
position:absolute;
top:140px;
left:440px;
z-index:3;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
var origPos;
function mover(toTop,pos)
{
var newTop=document.getElementById(toTop).style;
newTop.zIndex="10";
topLayer=document.getElementById(toTop).id;
origPos=pos;
}
function moveBack()
{
document.getElementById(topLayer).style.zIndex=origPos;
}
</script></head>

Dept. of CSE RGIT.


<body style="background-color:yellow">
<h1 style="text-align:center;color:red"> The Stacking of paragraphs when
moved from the top stacking position, it returns to its original
position.</h1>
<div style="z-index: 1;" class="layer1Style" id="layer1"
onmouseover="mover('layer1','1')" onmouseout="moveBack()">
The lives of most inhabitants of Industrailzed Countries, has well as some
unindustralized countries, have been changed forever by the advent of WWW.
</div>
<div style="z-index: 2;" class="layer2Style" id="layer2"
onmouseover="mover('layer2','2')" onmouseout="moveBack()">
The www may seem like magic , untill you undrestand how it works.The Web is
accessed through a browser.
</div>
<div style="z-index: 3;" class="layer3Style" id="layer3"
onmouseover="mover('layer3','3')" onmouseout="moveBack()">
Windows XP provides many ways for you to communicate with friends, co-workers,
and Iwith the rest of the world.
</div>
</body>
</html>

Dept. of CSE RGIT.


5(b)Output: The Stacking of paragraphs when moved from the top
stacking position, it returns to its original position

Screen 1: The window shows the default stacking of the paragraphs.

Screen 2: The window shows the paragraph when the mouse cursor is placed on it.

Screen 3: The window displays the paragraphs to its original (default) position

Dept. of CSE RGIT.


6. a) Design an XML document to store information about a student in an engineering
College affiliated to VTU. The information must include USN, Name, Name of the
College, Brach, Year of Joining, and e-mail id. Make up sample data for 3 students.
Create a CSS style sheet and use it to display the document.

b) Create an XSLT style sheet for one student element of the above document and use it
to create a display of that element.

6(a)XML document to store information about a student in an


engineering college (using internal DTD to show the XML
structure)

student.xml (with internal DTD)

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE student[
<!ELEMENT student_information (ad+)>

<!ELEMENT ad (usn,name,collegename,branch,year,email)>
<!ELEMENT usn (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT collegename (#PCDATA)>
<!ELEMENT branch (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT label (#PCDATA|email|year|branch|college|name|usn)*>
<!ELEMENT h3 (#PCDATA)>
<!ELEMENT h2 (#PCDATA)>

]>

<?xml-stylesheet type="text/css" href="stu.css"?>


<student_information>
<h3>Student-Information</h3>
<h2>student 1</h2>
<ad><label> usn:<usn> 4bd06499 </usn></label></ad>
<ad><label>Name:<name> AAA </name></label></ad>
<ad><label>College Name:<college> BIET,DVg </college></label></ad>
<ad><label>Branch:<branch> CSE </branch></label></ad>
<ad><label>Year of Joining:<year> 2007 </year></label></ad>
<ad><label>Email -id:<email> [email protected] </email></label></ad>

<h2>Student 2</h2>
<ad><label> usn:<usn> 4bd06499 </usn></label></ad>
<ad><label>Name:<name> BBB </name></label></ad>
<ad><label>College Name:<college> BIET,DVg </college></label></ad>
<ad><label>Branch:<branch> CSE </branch></label></ad>
<ad><label>Year of Joining:<year> 2007 </year></label></ad>
<ad><label>Email -id:<email> [email protected] </email></label></ad>

<h2>Student 3</h2>
<ad><label> usn:<usn> 4bd06499 </usn></label></ad>
<ad><label>Name:<name> CCC </name></label></ad>

Dept. of CSE RGIT.


<ad><label>College Name:<college> BIET,DVg </college></label></ad>
<ad><label>Branch:<branch> CSE </branch></label></ad>
<ad><label>Year of Joining:<year> 2007 </year></label></ad>
<ad><label>Email -id:<email> [email protected] </email></label></ad>

</student_information>

stu.css (External style sheet for student.xml file)


ad {display:block; margin-top:15px; color:blue; font-size:13pt; }
usn {color:red; font-size:12pt; margin-left:15px; }
name { color:red; font-size:12pt;margin-left:15px; }
college { color:red; font-size:12pt; margin-left:15px; }
branch { color:red; font-size:12pt; margin-left:15px; }
year { color:red; font-size:12pt; margin-left:15px; }
email { color:red; font-size:12pt; margin-left:15px; }
h3 { color:red; font-size:18pt; }
h2 { display:block; color:black; font-size:18pt; }

Dept. of CSE RGIT.


6(a)Output: An XMl file to display the details of three Students

Dept. of CSE RGIT.


6(b) An XSLT style sheet for one student element of the above
document and use it to create a display of that element.

xsl.xml
<?xml version = "1.0"?>
<!-- xslplane.xml -->
<?xml-stylesheet type = "text/xsl" href = "xslstudent.xsl" ?>
<student>
<USN> 4bd06cs099 </USN>
<name> Cessna </name>
<college> BIET </college>
<branch>CSE</branch>
<year> 2009 </year>
<email>[email protected]</email>
</student>

xslstudent.xsl
<?xml version = "1.0"?>
<!-- xslplane.xsl -->
<xsl:stylesheet version = "1.0"
xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"
xmlns = "http://www.w3.org/TR/xhtml1/strict">
<xsl:template match = "/">
<h2> Student information </h2>
<span style = "font-style: italic"> USN: </span>
<xsl:value-of select = "student/USN" /> <br />
<span style = "font-style: italic"> Name: </span>
<xsl:value-of select = "student/name" /> <br />
<span style = "font-style: italic"> Branch: </span>
<xsl:value-of select = "student/branch" /> <br />
<span style = "font-style: italic"> college Name: </span>
<xsl:value-of select = "student/college" /> <br />
<span style = "font-style: italic"> Year of Joining: </span>
<xsl:value-of select = "student/year" /> <br />
<span style = "font-style: italic"> Email-id: </span>
<xsl:value-of select = "student/email" /> <br />
</xsl:template>
</xsl:stylesheet>

Dept. of CSE RGIT.


6(b)Output: An XSTL style sheet to collect details of single
student

Dept. of CSE RGIT.


7(a) Write a Perl program to display various Server Information like Server Name, Server
Software, Server Protocol, CGI Revision etc.

7a.cgi

#!/usr/bin/perl
print "content-type:text/html \n\n";
print <<END;
<html>
<body bgcolor="aabbcc">
<h3> Perl Program to get the Server-Information</h3>
Server Name: $ENV{'SERVER_NAME'}<br>
Server Port: $ENV{'SERVER_PORT'}<br>
Server Software: $ENV{'SERVER_SOFTWARE'}<br>
Server Protocol: $ENV{'SERVER_PROTOCOL'}<br>
CGI VERSION: $ENV{'GATEWAY_INTERFACE'}
</body>
</html>
END

(7a):Ouput that the displays the Server Information

Dept. of CSE RGIT.


7(b) Write a Perl program to accept UNIX command from a HTML form and to display
the output of command executed.

7b.html
<html>
<head><title>UNIX COMMANDS</title></head>
<body bgcolor="aabbcc">
<h3>ENTER UNIX COMMANDS</h3>
<form action="/cgi-bin/7b.cgi" method="post">
Comand:<input type="text" name="cmd" size=40>
</br>
</br>
<input type="submit" value="Submit">
</form>
</body>
</html>

7b.cgi
#!/usr/bin/perl
use CGI':standard';
print"Content-type:text/html\n\n";
print "<html><body bgcolor=aabbcc>
<h3>Output for the Entered Command</h3>
</body>
</html>";
$cmd=param("cmd");
if($cmd)
{
@result = `$cmd`;
print "<br>";
foreach(@result)
{
print "$_ <br>\t";
}
}
else
{
print "Please give command!!";
}

Dept. of CSE RGIT.


(7b):Ouput that the displays details of the entered Command.

Screen 1: The browser window is displayed with the text box to enter the Commands.

Screen 2: The window shows the results of the entered command.

Dept. of CSE RGIT.


8(a) Write a Perl program to accept the User Name and display a greeting message
randomly chosen from a list of 4 greeting messages.

8a.html

<html>
<head><title>NAME</title></head>
<body bgcolor="aabbcc">
<h3>ENTER NAME & RECEIVE THE GREETINGS</h3>
<form action="/cgi-bin/8a.cgi" method="get">
NAME:<input type="text" name="name"><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

8a.cgi
#!/usr/bin/perl
use CGI':standard';
print "content-type:text/html","\n\n";
$input=param(name);
print "<html><body bgcolor=aabbcc><h3>Hi,$input</h3>";
my @msgs=("Good","Welcome","Fine","Hello");
print "<h3>The message received is: ";
print $msgs[int rand scalar @msgs];
print "</h3></body></html>";

Dept. of CSE RGIT.


(8a):Ouput that the displays Name & message.

Screen 1: The browser window is displayed with the text box to enter the name .

Screen 2: The browser window displays the name entered and the message which is picked
randomly.

Dept. of CSE RGIT.


8(b) Write a Perl program to keep track of the number of visitors visiting the web page
and to display this count of visitors, with proper headings.

8b.pl
#!/usr/bin/perl
use CGI;
$cgi=new CGI;
print $cgi->header;
print $cgi->start_html('Program 8b');
#print $cgi->start_body('<color=aabbcc>');
print $cgi->h3('<center><font color=green>Server Page Visited
Information</font>
</center>');
#print $cgi->hr;
$count_file="count.txt";
if(open(FILE,"<".$count_file))
{
$no_accesses = <FILE>;
close(FILE);
if(open (FILE,">".$count_file))
{
$no_accesses++;
print FILE $no_accesses;
close(FILE);
}
else
{
print "Cannot write the file. No Visitors information
in the server";
}
}

else {
print "cannot read the counter database for visitors";
}
print "<h3>Welcome User,</h3>";
print "<h3>This page has been visited<font color=red size=8> $no_accesses
</font> times from the creation</h3>";
#print $cgi->end_body;
print $cgi->end_html;

8b.html
<html>
<head><title>VISITORS</title></head>
<body bgcolor="aabbcc">
<br/>
<h3>TO KNOW THE NO. OF VISITORS FOR THIS WEB PAGE</h3>
<form action="/cgi-bin/8b.pl" method="get">
<input type="submit" value="submit">
</form>
</body>
</html>
count.txt

Dept. of CSE RGIT.


(8b):Output that the displays the number of visitors to this page

Screen 1: The window gives the option to see the number of visitors to this web page on clicking
the submit button.

Screen 2: The user can see the number of visitors to this web page.

Dept. of CSE RGIT.


9. Write a Perl program to display digital clock which displays the Current time of the
server.

9.cgi

#!/usr/bin/perl
$GS="/usr/bin/gs";
$|=1;
$ds=1;
print "Refresh:",$ds,"\n";
print "content-type:image/png","\n\n";
my ($s,$m,$h)=localtime(time);
$t=sprintf("%02d:%02d:%02d",$h,$m,$s);
open(GS,"|gs -sDEVICE=png256 -sOutputFile=- -q -g200x50 - 2>/dev/null");
print GS <<end;
%!PS -Adobe-3.0 ESPF-3.0
%%BoundingBox:$x $y
%%EndComments
/Arial findfont 20 scalefont setfont
/fontColor {1.0 0.2 0.4 setrgbcolor}def
/bgColor {1.5 0.2 1.0 setrgbcolor}def
/bgColor clippath fill
40 20 moveto
($t)fontColor show
showpage
end
close(GS);
exit(0);

Dept. of CSE RGIT.


9:Output that the displays digital clock which shows the Current time of the server.

Please check the output

Dept. of CSE RGIT.


10. Write a Perl program to insert name and age information entered by the user into a
table created using MYSQL and to display the current contents of this table.

10.html
<html>
<head><title>Age Information</title></head>
<body bgcolor="aabbcc">
<h2>Age Infornmation</h2>
<form action="/cgi-bin/10.cgi" method="get">
<table border="0">
<tr><td>First Name:</td>
<td><input type="text" name="fname"></td>
</tr>
<tr><td>Last Name:</td>
<td><input type="text" name="lname"></td>
</tr>
<tr><td>Age:</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td><input type="submit" value="Submit Form"></td>
<td><input type="reset" value="Reset"></td
</tr>
</table>
</form>
</body>
</html>
10.cgi
#!/usr/bin/perl
use DBI;
use CGI':standard';
print "content-type:text/html","\n\n";
$lname = param("lname") or die "enter lanme";
$fname=param("fname")or die "enter name" ;
$age = param("age")or die "enter age";
$dbh = DBI->connect('DBI:mysql:people','root')
or die("Cannot Connect");
$sth = $dbh->prepare('insert into age_info values(?,?,?)')
or die("Cannot prepare:");
$sth->execute($lname,$fname,$age);
$sth = $dbh->prepare('select * from age_info')
or die("Cannot People");
$sth->execute();
print "<html>";
print "<head><title>Age Info</title></head>";
print "<body bgcolor='aabbcc'>";
print "<h3> contents of age_info table</h3>";
print "<table border='1'>";
print "<tr><th>LNAME</th><th>FNAME</th><th>AGE</th></tr>";
while(($ln,$fn,$age)=$sth->fetchrow())
{
print "<tr><td>$ln</td><td>$fn</td><td>$age</td></tr>";
}
print "</table></body></html>";

Dept. of CSE RGIT.


10:Output that the displays the user name and age entered.

Screen 1: The window is displayed with the text box to enter the Name and Age of the user.

Screen 2: The window shows the table details with the updated values.

Dept. of CSE RGIT.


11. Write a PHP program to store current date-time in a COOKIE and Display the ‘Last
visited on’ date-time on the web page upon reopening of the same page.

11.php
<?php

//Calculate 60 days in the future


//seconds * minutes * hours * days + current time
$inTwoMonths = 60 * 60 * 24 * 60 + time();
setcookie('lastVisit', date("G:i - m/d/y"), $inTwoMonths);

?>

11:Output that the displays the ‘Last visited on’ the web page created.

Please check the output

Dept. of CSE RGIT.


12. Write a PHP program to store page views count in SESSION, to increment the count on
each refresh, and to show the count on web page.

12.php
<?php
session_start();
if(isset($_SESSION['views']))
$_SESSION['views'] = $_SESSION['views']+ 1;
else
$_SESSION['views'] = 1;
echo "views = ". $_SESSION['views'];
?>

12:Output that stores page views & increments the count on each refresh.

Please check the output

13. Create a XHTML form with Name, Address Line1, Address Line2, and E-mail text
fields. On submitting, store the values in MYSQL table. Retrieve and display the data
based on Name.

13.XHTML (page to enter the user details)

<?xml version="1.0" encoding="ISO-8859-1"?>


<html xmlns="http://www.w3.org/1999/xhtml">

Dept. of CSE RGIT.


<body bgcolor="aabbcc">
<h3>Program to collect the Customer-Information</h3>
<form action = "/php/13.php" method = "post">
<table border="0">
<tr>
<td>Enter Name:</td>
<td><input type = "text" name = "name"></td>
</tr>
<tr>
<td>Enter Address Line1:</td>
<td><input type = "text" name = "add1"></td>
</tr>
<tr>
<td>Enter Address Line2:</td>
<td><input type = "text" name = "add2"></td>
</tr>
<tr>
<td>Enter Email-id: </td>
<td><input type = "text" name = "email"></td>
</tr>
<tr><td> </td></tr>
<tr></tr>
<tr>
<td><input type = "submit" value = "Submit"></td>
<td><input type = "Reset" value = "Reset"></td>
</tr>
</br>
<a href="13b.html">To Search click here.</a></td>
</table>
</form>
</body>
</html>

13b.html(html page to make the search)


<html>
<body bgcolor="aabbcc">
<h3>Search Page</h3>
<form action = "/php/13b.php" method = "post">
Enter the name to be searched: <input type = "text" name =
"search">
<br/>
<br/>
<input type = "submit" value = "submit">
<input type = "reset" value = "Reset">
</form>
</body>
</html>
13.php(To update the details entered by the user in MYSQL table created)

<? Php
$name=$HTTP_POST_VARS["name"];
$add1=$HTTP_POST_VARS["add1"];
$add2=$HTTP_POST_VARS["add2"];
$email=$HTTP_POST_VARS["email"];

Dept. of CSE RGIT.


$mysql=mysql_connect("localhost","root")
or die("can't connect");
mysql_select_db("cus_info")
or die("can't select");
mysql_query("insert into address values('$name','$add1','$add2','$email')")
or die("query failed to insert");
$result=mysql_query("select * from address");
?>

<html>
<head><title>PHP and MYSQL</title></head>
<body bgcolor="aabbcc">
<h3>Page to display the Stored data</h3>
<table border="1">
<tr>
<th>NAME</th>
<th>ADDRESS Line1</th>
<th>ADDRESS Line2</th>
<th>EMAIL-id</th></tr>
<?while($array=mysql_fetch_row($result)):?>
<tr>
<td><?echo $array[0];?></td>
<td><?echo $array[1];?></td>
<td><?echo $array[2];?></td>
<td><?echo $array[3];?></td>
</tr>
<? endwhile;?>
<?mysql_free_result($result);?>
<?mysql_close($mysql);?>
</table>
</body>
</html>
<?
$search = $HTTP_POST_VARS["search"];
$mysql = mysql_connect("localhost","root")
or die("Cannot Connect");
mysql_select_db("cus_info")
or die("Cannot select the database");
$result =mysql_query("select * from address where name like '%$search%'")
or die ("cannot execute");
?>

13b.php(To make the search based on the name entered in the table)

<?
$search = $HTTP_POST_VARS["search"];
$mysql = mysql_connect("localhost","root")or die("Cannot Connect");
mysql_select_db("cus_info") or die("Cannot select the database");
$result =mysql_query("select * from address where name like
'%$search%'")or die ("cannot execute");
?>
<html>
<body bgcolor="aabbcc">

Dept. of CSE RGIT.


<? if(mysql_num_rows($result)>0): ?>
<table border = "1">
<tr>
<th>NAME</th>
<th>ADDRESS LINE1</th>
<th>ADDRESS LINE2</th>
<th>EMAIL</th>
</tr>
<br/>
<h3> Search Results</h3>
<? while($array = mysql_fetch_row($result)):?>
<tr>
<td><?echo $array[0];?></td>
<td><?echo $array[1];?></td>
<td><?echo $array[2];?></td>
<td><?echo $array[3];?></td>
<td><?echo $array[4];?></td>
</tr>
<? endwhile;?>
<? else: ?>
<?echo "no rows selected";?>
<? endif;?>
</table>
</body>
</html>

13:Output to collect the user information & displays the stored results.

Screen 1: The window gives the option to enter the user information.

Dept. of CSE RGIT.


Screen 2: The user can retrieve the results based on the name entered.

14. Using PHP and MYSQL, develop a program to accept book Information viz. Accession
number, title, authors, edition and publisher from a web page and store the information
in a database and to search for a book with the title specified by the user and to display the
search results with proper headings

Dept. of CSE RGIT.


14.php (To update the details of the book entered by the user into the mysql table)
<?
$isbn=$HTTP_POST_VARS["isbn"];
$title=$HTTP_POST_VARS["title"];
$author=$HTTP_POST_VARS["author"];
$edition=$HTTP_POST_VARS["edition"];
$publication=$HTTP_POST_VARS["publication"];

$mysql=mysql_connect("localhost","root")
or die("can't connect");
mysql_select_db("books")
or die("can't select");
mysql_query("insert into book_info
values('$isbn','$title','$author','$edition','$publication')")
or die("query failed to insert");
$result=mysql_query("select * from book_info");
?>

<html>
<head><title>PHP and MYSQL</title></head>
<body bgcolor="aabbcc">
<table border="1">
<tr>
<th>ISBN</th>
<th>TITLE</th>
<th>AUTHOR</th>
<th>EDITION</th>
<th>PUBLICATION</th>
</tr>
<?while($array=mysql_fetch_row($result)):?>
<tr>
<td><?echo $array[0];?></td>
<td><?echo $array[1];?></td>
<td><?echo $array[2];?></td>
<td><?echo $array[3];?></td>
<td><?echo $array[4];?></td>
</tr>
<? endwhile;?>
<?mysql_free_result($result);?>
<?mysql_close($mysql);?>
</table>
</body>
</html>

14b.php(To search for the book with the title specified by the user)
<?
$search = $HTTP_POST_VARS["search"];
$mysql = mysql_connect("localhost","root")or die("Cannot Connect");
mysql_select_db("books") or die("Cannot select the database");
$result =mysql_query("select * from book_info where title like
'%$search%'") or die ("cannot execute");

Dept. of CSE RGIT.


?>
<html>
<body bgcolor="aabbcc">
<? if(mysql_num_rows($result)>0): ?>
<table border = "1">
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Author</th>
<th>Edition</th>
<th>Publication</th>
</tr>
<b>Query Executed for Search</b>
<? while($array = mysql_fetch_row($result)):?>
<tr>
<td><?echo $array[0];?></td>
<td><?echo $array[1];?></td>
<td><?echo $array[2];?></td>
<td><?echo $array[3];?></td>
<td><?echo $array[4];?></td>
</tr>
<? endwhile;?>
<? else: ?>
<?echo "no rows selected";?>
<? endif;?>
</table>
</body>
</html>

14.html(To enter the details of the books by the user).


<html>
<body bgcolor="aabbcc">
<h3> Program to accept the Book-Information</h3>
<form action = "/php/14.php" method = "post">
<table border="0">
<tr>
<td>Enter ISBN:</td>

Dept. of CSE RGIT.


<td><input type = "text" name = "isbn"></td>
</tr>
<tr>
<td>Enter TITLE:</td>
<td><input type = "text" name = "title"></td>
</tr>
<tr>
<td>Enter AUTHOR:</td>
<td><input type = "text" name = "author"></td>
</tr>
<tr>
<td>Enter EDITION: </td>
<td><input type = "text" name = "edition"></td>
</tr>
<tr>
<td>Enter PUBLICATION:</td>
<td><input type = "text" name = "publication"></td>
</tr>
<tr>
<td><input type = "submit" value = "submit">
<input type = "reset" value = "Reset">
</td>
</tr>
</table>
</form>
</body>
</html>

14b.html(to make the search based on the title of given by user).


<html>
<body bgcolor="aabbcc">
<h3>Search Page</h3>
<form action = "/php/14b.php" method = "post">
Enter the title of the book to be searched:
<input type = "text" name = "search">
<br/>
<input type = "submit" value = "submit">
<input type = "reset" value = "Reset">
<br/>
</form>
</body>
</html>

14:Output to collect the user information & displays the stored results.
Screen 1:

Dept. of CSE RGIT.


Dept. of CSE RGIT.

You might also like