Web Programming Lab Manual

WEB PROGRAMMING LAB April 2023
S.NO DATE PROGRAM NAME PAGE NO SIGN
web programming
1. Fibonacci Series using HTML 03
2. Update sequence number (USN) using 09

HTML
Changes of Stack Position using CSS &

3. 12
JavaScript
Display the Information using CSS

4. 17
Display a greeting Message using Perl

5. 20
To display various server information

6. 23
like Server Perl
Generating A Digital Clock using PHP

7. 26
8. Create An Age Calculator using PHP 29
Display Date & Time using PHP

9. 34
Store Page View Count Variable using

10. 37
PHP
1 SACWC
WEB programming
2 SACWC
EX.NO: 01
Fibonacci Series using HTML
Aim:
Develop and demonstrate a XHTML file that includes Java 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
Algorithm:
1. Start the Program
2. Open Node pad and type the html coding.
3. Get input valuefor n.
4. Check the condition (n!=null && n>0)to get the Fibonacci series for the given number.
5. Save the program with extension.html.
6. Run the program using web browser.
7. Stop the program.
3 SACWC
Source code:
a)
<html>
<head>
<title> Fibonacci Series </title>
</head>
<body>
<script>
var n1 = 0, n2 = 1, next_num, i;
var num = parseInt (prompt (" Enter the Fibonacci Series "));
document.write( "Fibonacci Series: ");
for ( i = 1; i <= num; i++)
{ document.write (" <br> " + n1);
next_num = n1 + n2;
n1 = n2;
n2 = next_num;
}
</script>
</body>
</html>
4 SACWC
Output:
5 SACWC
b)
<html>
<body>
<script type="text/javascript">
//input
var n=prompt("enter a number");
if(n!=null && n>0)
{
vari=0;
document.write("<h2>The first " + n + " numbers and their squares are: </h2>");
//display in a table
document.write("<table
border=1><tr><th><b>Number</b></th><th><b>Square</b></th></tr><br>");
for(i=1;i<=n;i++)
document.write("<tr><td>" + i + "</td><td>" + i*i + "</td></tr><br>");
document.write("</table>");
}
else
alert("No input");
</script>
</body>
</html>
6 SACWC
Output:
7 SACWC
Result:
Thus the program has been executed successfully and the output is verified.
8 SACWC
EX.NO: 02
Update sequence
number(USN)using HTML
Aim:
Develop and demonstrate, using Java 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.
Algorithm:
2. Open Node pad and type the html codings.
3. Get input value for n and check the condition (length==0 &&str==0)
4. Check if USN is of the format "DAADDAADDD" where D=digit & A=alphabet
5. Save the program with extension .html.
9 SACWC
Source code :
a.html
<html>
<body>
//define a function finder to perform the search and display appropriate message
finder=function()
{
//get input
var a=document.getElementById('usn').value;
//find the length of the input 'a'
if(a.length==0)
{
alert("USN is empty");
return;
}
//convert the upper case input to lower case
var b=a.toLowerCase();
//check if the entered input is of the format "DAADDAADDD" where D=digit & A=alphabet
var str=b.search(/^[1-4][a-z][a-z][0-9][0-9][a-z][a-z][0-9][0-9][0-9]/);
if(str==0)
alert("usn is valid");
else
alert("usn is invalid");
}
</script>

<form onsubmit=finder()>
Enter USN in Upper Case(DAADDAADDD):<input id=usn type=text><br>
<input type=submit value=submit>
</form>
</body>
</html>
10 SACWC
Output:
Result:
11 SACWC
Ex no:03
Changes of Stack Position
using CSS & JavaScript
Aim:
Develop and demonstrate, using Java script, a XHTML document that contains 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.
Algorithm:
3. Use the function functionmover(top) to set the stacking position.
4. Save the program with extension .html.
5. Run the program usingweb browser.
12 SACWC
Source code:
3a.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR?xhtml11/DTD/xhtml11.dtd">
<html>
var stack1="stack1";
function toTop(curStack)
{
var oldStack=document.getElementById(stack1).style;
oldStack.zIndex="0";
var newStack=document.getElementById(curStack).style;
newStack.zIndex="10";
stack1=curStack;
}
</script>
<style type="text/css">
.para1
{
position:absolute;top:30%;left:30%;z-index:0; width:200;
border:solid;padding:100;background-color:green;
}
.para2
{
position:absolute;top:35%;left:35%;z-index:0; width:200;
13 SACWC
border:solid; padding:100; background-color:yellow;

}
.para3
{
position:absolute;top:40%;left:40%;z-index:0;width:200;
border:solid; padding:100; background-color:red;
}
</style>
<body>
<p class="para1" id="stack1" onmouseover="toTop('stack1')">
!!! Layer Program !!! </p>
* I PG-Computer Science * </p>
### Web Programming ### </p>
</body>
</html>
14 SACWC
Output:
15 SACWC
RESULT:
16 SACWC
Ex no:04
Display the Information using
CSS
Aim:
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.
Algorithm:
3. Connect CSS file with XML stylesheet using <?xml-stylesheet type="text/css"
href="filename.css" ?>
4. Save the XML file with extension .xml.
5. Save the CSS file with extension .css.
17 SACWC
Source code:
a)
4a.xml
<?xml version="1.0" ?>
<!-- Obtain stylesheet. Note that the xml file &css file should be in the same directory/location --
>
<?xml-stylesheet type="text/css" href="4a.css" ?>
<student>
Student 1 details:
<info>
USN:<usn>1AB10EC002</usn>
Name:<name>abc</name>
College:<coll>AB</coll>
Branch:<branch>ECE</branch>
Year Of Joining:<yoj>2010</yoj>
Email-ID:<email>abc@samp.com</email>
</info>
Student 2 details:
<info>
USN:<usn>1PQ10CS025</usn>
Name:<name>pqr</name>
College:<coll>PQ</coll>
Branch:<branch>CSE</branch>
Email-ID:<email>pqr@samp.com</email>
</info>
Student 3 details:
<info>
USN:<usn>1XY10IS005</usn>
Name:<name>xyz</name>
College:<coll>XY</coll>
Branch:<branch>ISE</branch>
Email-ID:<email>xyz@samp.com</email>
</info>
</student>
18 SACWC
4a.css
/* Define styling properties for each tag of the xml file */
student{margin-top:15px;font-weight:bold;color:black;}
info{display:block;margin-left:15px;color:gray;}
usn, name{color:red;font-size:15pt;}
coll, branch{color:blue;font-size:15pt;}
yoj, email{color:green;font-size:15pt;}
Output:
Result:
19 SACWC
EX.NO: 05
Display a greeting message
using Perl
Aim:
To Write a Perl program to accept the User Name and display a greeting message
randomly chosen from a list of 4 greeting messages.
Algorithm:
1. Start the Program.
2. Open Node pad and type the html & Perl codings.
3. Save the file in the location localdisk c:/xampp/htdocs/new folder(web lap)/pl file.
4. Save the file with extension .pl.
5. Open Xampp software and start Apache and allow access to admin.
6. In the browser, type localhost/folder name(web lap)/filename.pl in address bar.
7. The number of visitors and visiting the web page and to display this count of
visitors.
20 SACWC
Source code:
5.cgi
#!"C:\xampp\perl\bin\perl.exe"
use CGI':standard';
@msgs=("Welcome " ,"have a nice day","hi","how are you");
$len=@msgs.length;
$n = int(rand($len));
if (param)
{
print header( );
print start_html(-bgcolor=>"pink");
$name=param("name");
print b("Hello $name $msgs[$n]"),br();
print start_form();
print submit(-value=>"Back");
print end_form();
print end_html();
}
else
{
print header();
print start_html(-bgcolor=>"pink", -text =>"blue");
print start_form();
print b("Enter user name ");
print textfield(-name=>"name"),br();
print submit(-value =>"submit");
print end_form();
21 SACWC
print end_html();
}
Output:
RESULT:
22 SACWC
EX.NO: 06
to display various server
information like Server Perl
Aim:
To write a Perl program to display various server information like Server like Name,
Server Software, Server protocol, CGI Revision.
Algorithm:
2. Open Node pad and type the html & Perl codings.
3. Save the file in the location localdisk c:/xampp/htdocs/new folder(web lap)/pl file.
4. Save the file with extension .pl.
5. Open Xampp software and start Apache and allow access to admin.
6. In the browser, type localhost/folder name(web lap)/filename.pl in address bar.
7. To display various server information like Server Name, Server Software, Server
23 SACWC
Source code:
5a.cgi
#!"C:\xampp\perl\bin\perl.exe"
use strict;
use CGI':standard';
print
header(),
start_html(-bgcolor=>"orange"),
hr(),
h2("Server Information"),
hr(),
"Server Name : $ENV{SERVER_NAME}",
hr(),
"Server Protocol : $ENV{SERVER_SOFTWARE}",
hr(),
"Server Port : $ENV{SERVER_PORT}",
hr(),
"CGI Revision : $ENV{GATEWAY_INTERFACE}",
hr(),
"Script Name : $ENV{SCRIPT_NAME}",
hr(),
"Root Document : $ENV{DOCUMENT_ROOT}",
end_html();
24 SACWC
Output:
RESULT:
25 SACWC
EX.NO: 07
Generating A Digital Clock using
PHP
Aim:
To write a Php program to display a digital clock which displays the current time of the server.
Algorithm:
2. Open Node pad and type the html & Php codings.
3. Save the file in the location localdisk c:/xampp/htdocs/new folder(web lap)/php
file.
4. Save the file with extension .php.
5. Open Xampp software and start Apache and Mysql and allow access to admin.
6. In the browser, type localhost/folder name(web lap)/filename.php in address bar.
7. To display a digital clock and displays the current time of the server.
26 SACWC
Source code:
6. php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="1" />
<style>
p{
color: white;
font-size: 90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-color: black;
}
</style>
<p><?php echo date(" h: i : s A");?></p>
</head>
</html>
27 SACWC
OUTPUT:
Result:
28 SACWC
Ex no:08
create an age calculator using
php
Aim:
To write a Php program to display an age calculator.
Algorithm:
2. Open Node pad and type the Php codings.
file.
7. To display a digital clock and displays the current time of the server.
29 SACWC
Source code:
<?php
error_reporting(1);
$day=0;
$yr=0;
$mon=0;
if(isset($_POST['b1']))
{
$d1=$_POST['t1'];
$d2=$_POST['t2'];
$arr=explode("/",$d1);
$brr=explode("/",$d2);
if($arr[0]<$brr[0])
{
$arr[0]+=30;
$arr[1]-=1;
}
$day=$arr[0]-$brr[0];
if($arr[1]<$brr[1])
{
$m1+=12;
$arr[2]-=1;
}
$mon=$arr[1]-$brr[1];
$yr=$arr[2]-$brr[2];
}
?>
30 SACWC
<html>
<body><form method="POST">
<table border="2" align="center" bordercolor="darkviolet"><tr><br><br><br>
<td align="center" colspan="2" bgcolor="darkviolet"><font color="white">
<br><h2><b>AGE CALCULATOR</b></h2></font></td></tr>
<tr><td align="center"><b>Enter current date</b></td>
<td align="center"><input type="text" name="t1" autofocus></td></tr>
<tr><td align="center"><b>Enter Your DOB</b></td>
<td align="center"><input type="text" name="t2"></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="b1" value="calculate"
</td></tr><tr><td align="center"><b>Your Age </b></td>
<td align="center">
<?php
error_reporting(1);
echo $yr.'years'.$mon.'months'.$day.'days';
echo'</font>';
?>
</td>
</tr>
</table>
</form>
</body>
</html>
31 SACWC
OUTPUT:
32 SACWC
Result:
33 SACWC
Ex no:09
Display Date & Time using PHP
Aim:
To 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.
Algorithm:
file.
7. Todisplay the ‘Last visited on’ date-time on the web page.
34 SACWC
Source code:
8. php
<html>
<body bgcolor="aqua" text="red">
<?php
$duration=time()+60*60*24*60;
$found=0;
$visit=0;
if(isset($_COOKIE[$visit]))
{
$found=1;
$lastvisit=$_COOKIE[$visit];
}
setcookie($visit,date("m/d/y-G:i:s"),$duration);
print "<center>";
if($found==1)
{
print "<h2>Welcome back, You have visited on $lastvisit</h2>";
}
else
{
print "<h3>Welcome to this website</h3>";
}
print "</center>";
?>
</body>
</html>
35 SACWC
OUTPUT:
Result:
36 SACWC
Ex no:10
Store Page View Count Variable
using PHP
Aim:
To 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.
Algorithm:
file.
7. Click the button Click_to_display_time to view the current time of the server.
37 SACWC
Source code:
counter.php
<?php
session_start();
print "<center>";
if(!isset($_SESSION))
{
$_SESSION["count"]=0;
echo "counter initialized \n";
}
else
{
$_SESSION["count"]++;
}
echo "The counter is now <b> $_SESSION[count]</b>" . " <p>
Reload this page to increment </p>";
print "</center>";
?>
38 SACWC
OUTPUT:
39 SACWC
Result:
40 SACWC

Web Programming Lab Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming Lab Manual

Uploaded by

Copyright:

Available Formats

WEB PROGRAMMING LAB April 2023

S.NO DATE PROGRAM NAME PAGE NO SIGN

1. Fibonacci Series using HTML 03

2. Update sequence number (USN) using 09

Changes of Stack Position using CSS &

Display the Information using CSS

Display a greeting Message using Perl

To display various server information

Generating A Digital Clock using PHP

8. Create An Age Calculator using PHP 29

Display Date & Time using PHP

Store Page View Count Variable using

border:solid; padding:100; background-color:yellow;

You might also like