Scribd
Upload
5 views55 pages

WP Lab Manual

The document outlines a web programming laboratory assignment involving the development of XHTML files with JavaScript functionalities. It includes tasks such as generating Fibonacci numbers, creating a table of squares, validating user input for a USN format, and designing XML documents for student information. Additionally, it covers modifying scripts for interactive elements and styling XML data with CSS and XSLT.

Uploaded by

Bharani ISE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
5 views55 pages

WP Lab Manual

The document outlines a web programming laboratory assignment involving the development of XHTML files with JavaScript functionalities. It includes tasks such as generating Fibonacci numbers, creating a table of squares, validating user input for a USN format, and designing XML documents for student information. Additionally, it covers modifying scripts for interactive elements and styling XML data with CSS and XSLT.

Uploaded by

Bharani ISE
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 55

WEB PROGRAMMING LABORATORY

1. Develop and demonstrate a XHTML file that includes


JavaScript script for the following options

a. Input: A number n obtained using prompt.


Output: The first N Fibonacci numbers.

Program(1a.html):

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns:"http://www.w3c.org/1999/xhtml">
<body>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<script type="text/javascript">
var first=0,second=1,third=0,i;
var num=prompt("Enter the number:");
if(num!=null && num>0)
{
document.write("<h1>FIBONACCI NUMBERS IS..</h1><br/>");
if(num==1)
document.write("<h1>"+first+"</h1>");
else if(num==2)
document.write("<h1>"+first+"<br/>"+second+"</h1>");
else if(num>=3)
{
document.write("<h1>"+first+"<br/>"+second+"</h1>");
for(i=3;i<=num;i++)
{
third=first+second;
document.write("<h1>"+third+"<br/></h1>");
first=second;
second=third;
}
}
}
else
alert("Wrong Input");
</script>
</body>
</html>

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 1
WEB PROGRAMMING LABORATORY

Output:

b. Input: A number N obtained using prompt.


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

Program(1b.html):

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns:"http://www.w3c.org/1999/xhtml">
<body>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<script type="text/javascript">
var msg,i;
var num=prompt("Enter the number:");
if(num!=null && num>0)
{
msg="Number and its Square are...\n";
for(i=1;i<=num;i++)

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 2
WEB PROGRAMMING LABORATORY

{
msg=msg+i+"*"+i+"="+i*i+"\n";
}
alert(msg);
}
else
alert("Invalid Number");
</script>
</body>
</html>

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 3
WEB PROGRAMMING LABORATORY

2 a). Develop and demonstrate, using Javascript script, a XHTML


document that collects the USN ( the valid format is: A digit from
HIMANSHU AGRAWAL (1CD12CS038)
DEPT. OF CSE, CITECH [2015-2016]
Page 4
WEB PROGRAMMING LABORATORY

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.

Program(2a.html):

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns:"http://www.w3c.org/1999/xhtml">
<head>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<script type="text/javascript">
function usn_test(val)
{
var usn=val.value;
var reg=/^[1-4][A-Z]{2}[0-9]{2}[A-Z]{2}[0-9]{3}$/
if(usn.match(reg))
{
alert("Valid USN...");
}
else
{
alert("Invalid USN...");
}
}
</script>
</head>
<body>
<form method="post">
Enter USN:
<input type="text" name="stringval"/><br/>
<input type="button" value="Submit" onclick="usn_test(stringval);"/>
</form>
</body>
</html>

Output:
HIMANSHU AGRAWAL (1CD12CS038)
DEPT. OF CSE, CITECH [2015-2016]
Page 5
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 6
WEB PROGRAMMING LABORATORY

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

Program(2b.html):

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns:"http://www.w3c.org/1999/xhtml">
<head>
<script type="text/javascript">
function usn_test(val,s)
{
var usn=val.value;
var sem=s.value;
var reg=/^[1-4][A-Z]{2}[0-9]{2}[A-Z]{2}[0-9]{3}$/
var rex=/^[1-8]$/
if(usn.match(reg)&& sem.match(rex))
alert("Valid USN and Valid Semester...");
else if(!usn.match(reg) && !sem.match(rex))
{
alert("Invalid USN and Invalid Semester...");
}

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 7
WEB PROGRAMMING LABORATORY

else if(usn.match(reg) && !sem.match(rex))


{
alert("Valid USN and Invalid Semester...");
}
else
{
alert("Invalid USN and Valid Semester...");
}
}
</script>
</head>
<body>
<form method="post">
<table><tr><th>Enter USN:</th>
<th><input type="text" name="stringval"/><br/></th>
</tr><tr><th>Enter Semester:</th>
<th><input type="text" name="semval"/><br/></th>
</tr></table>
<input type="button" value="Submit" onclick="usn_test(stringval,semval);"/>
</form>
</body>
</html>

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 8
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 9
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 10
WEB PROGRAMMING LABORATORY

3 a). Develop and demonstrate, using Javascript 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.

Program(3a.html):

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns:"http://www.w3c.org/1999/xhtml">
<head>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<script type="text/javascript">
var top="125";
function totop(newtop)
{
domold=document.getElementById(top).style;
domnew=document.getElementById(newtop).style;
domold.zIndex="0";
domnew.zIndex="10";
HIMANSHU AGRAWAL (1CD12CS038)
DEPT. OF CSE, CITECH [2015-2016]
Page 11
WEB PROGRAMMING LABORATORY

top=newtop;
}
</script>
<style type="text/css">
.p1{position:absolute;top:10;left:120;z-index:0;border:solid;padding:80;
width:300;background-color:green;}
.p2{position:absolute;top:20;left:150;z-index:0;
border:solid; padding:80;width:300;background-color:red;}
.p3{position:absolute;top:30;left:180;z-index:0;
border:solid;padding:80;width:300;background-color:yellow;}
</style>
</head>
<body>
<p class="p1" id="123" onmouseover="totop('123')">!!!ISE!!!</p>

<p class="p2" id="125" onmouseover="totop('125')">!!!CSE!!!</p>

<p class="p3" id="124" onmouseover="totop('124')">!!!ECE!!!</p>


</body>
</html>

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 12
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 13
WEB PROGRAMMING LABORATORY

Description: As we place the mouse cursor on the text block the respective block will pop
out and remain in the same state until we place the cursor to other block.

3 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.

Program(3b.html):

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns:"http://www.w3c.org/1999/xhtml">
<head>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<script type="text/javascript">
var top="125";
function totop(newtop)
{
domold=document.getElementById(top).style;
domnew=document.getElementById(newtop).style;
domold.zIndex="0";
domnew.zIndex="10";

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 14
WEB PROGRAMMING LABORATORY

top=newtop;
}
</script>
<style type="text/css">
.p1{position:absolute;top:10;left:120;z-index:;border:solid;padding:80;
width:300;background-color:green;}
.p2{position:absolute;top:20;left:150;z-index:0;
border:solid; padding:80;width:300;background-color:red;}
.p3{position:absolute;top:30;left:180;z-index:0;
border:solid;padding:80;width:300;background-color:yellow;}
</style>
</head>
<body>
<p class="p1" id="123" onmouseover="totop('123')"
onmouseout="totop('124')">!!!ISE!!!</p>

<p class="p2" id="125" onmouseover="totop('125')" onmouseout="totop('124')">!!!CSE!!!


</p>

<p class="p3" id="124" onmouseover="totop('124')" onmouseout="totop('124')">!!!ECE!!!


</p>
</body>
</html>

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 15
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 16
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 17
WEB PROGRAMMING LABORATORY

Description: As we place the mouse cursor on the text block the respective block will pop
out and will go to the previous state when we remove the cursor from that block.
4 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.

Program(4a.xml):

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


<?xml-stylesheet type="text/css" href="4a.css"?>
<vtu>
<student>
<usn>1CD12CS038</usn>
<name>HIMANSHU AGRAWAL</name>
<collname>CITECH</collname>
<branch>CSE</branch>
<year>2012</year>
<email>[email protected]</email>
</student>
<student>
<usn>1CD10IS042</usn>
<name>VITTAL</name>
<collname>CITECH</collname>
<branch>ISE</branch>
<year>2010</year>
<email>[email protected]</email>
</student>
<student>
<usn>1CD11EC081</usn>
<name>VISHAL</name>
<collname>CITECH</collname>
<branch>ECE</branch>
<year>2011</year>
<email>[email protected]</email>
</student>
</vtu>

Program(4a.css):

name {font:15pt "Arial" Future;color:blue; display:block;}


collname{font:15pt "Arial" Future;color:red; display:block;}
year {font:15pt "Arial" Future;color:orange; display:block;}
branch {font:15pt "Arial" Future;color:green; display:block;}
email {font:15pt "Arial" Future;color:pink; display:block;}

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 18
WEB PROGRAMMING LABORATORY

usn {font:bold 20pt "Times New Roman" Arial; display:block;}

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 19
WEB PROGRAMMING LABORATORY

4 b) Create an XSLT style sheet for one student element of the


above document and use it to create a display of that element.
HIMANSHU AGRAWAL (1CD12CS038)
DEPT. OF CSE, CITECH [2015-2016]
Page 20
WEB PROGRAMMING LABORATORY

Program(4b.xml):

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


<?xml-stylesheet type="text/xsl" href="4b.xsl"?>
<vtu>
<usn>1CD12CS038</usn>
<name>HIMANSHU AGRAWAL</name>
<collname>CITECH</collname>
<branch>CSE</branch>
<year>2012</year>
<email>[email protected]</email>
</vtu>

Program(4b.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="/">
<html>
<head>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
</head>
<body>
<h2>VTU Student Description</h2>
<span style="font-style:italic;color:red;">USN:</span>
<xsl:value-of select="vtu/usn"/><br/>
<span style="font-style:italic;color:blue;">NAME:</span>
<xsl:value-of select="vtu/name"/><br/>
<span style="font-style:italic;color:green;">COLLEGE:</span>
<xsl:value-of select="vtu/collname"/><br/>
<span style="font-style:italic;color:cyan;">BRANCH:</span>
<xsl:value-of select="vtu/branch"/><br/>
<span style="font-style:italic;color:pink;">YEAR:</span>
<xsl:value-of select="vtu/year"/><br/>
<span style="font-style:italic;color:magenta;">E-MAIL:</span>
<xsl:value-of select="vtu/email"/><br/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Output:
HIMANSHU AGRAWAL (1CD12CS038)
DEPT. OF CSE, CITECH [2015-2016]
Page 21
WEB PROGRAMMING LABORATORY

5 a). Write a Perl program to display various Server Information


like Server Name, Server Software, Server protocol, CGI Revision
etc.

Program(5a.pl):

#!/usr/bin/perl
print"content-type:text/html \n\n";
print" <html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body bgcolor=green>
<h3>ABOUT SERVER</h3>
<hr></hr>
Server Name:$ENV{'SERVER_NAME'}</br>
Server Protocol:$ENV{'SERVER_PROTOCOL'}</br>
Server Port:$ENV{'SERVER_PORT'}</br>
Server Software:$ENV{'SERVER_SOFTWARE'}</br>
CGI Revision:$ENV{'GATEWAY_INTERFACE'}</br>
<hr></hr>
</body>
</html>";

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 22
WEB PROGRAMMING LABORATORY

Output:

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

Program(5b.html):

<html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body>
<form action="/cgi-bin/5b.pl"method="past">
Enter the UNIX Command:
<input type="text" name="cmd"/>
</br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

Program(5b.pl):

#!/usr/bin/perl

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 23
WEB PROGRAMMING LABORATORY

print"content-type:text/html \n\n";
use CGI":standard";
$x=param("cmd");
system($x);
exit(0);

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 24
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 25
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 26
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 27
WEB PROGRAMMING LABORATORY

6 a) Write a Perl program to accept the User Name and display a


greeting message randomly chosen from a list of 4 greeting
messages.

Program(6a.html):

<html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body>
<form action="/cgi-bin/6a.pl"method="post">
Enter the User Name:
<input type="text" name="uname"/>
</br>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>

Program(6a.pl):

#!/usr/bin/perl
use CGI ":standard";
print"content-type:text/html \n\n";
$name=param(uname);
print"<html>
<body bgcolor:red>
<h3>HI,$name</h3>";
my @msg=("Good","Welcome","Fine","Hello");
print"<h3>The message is:</h3>";
print"<b>$msg[int rand scalar @msg]</b>";
print"</body>
</html>";

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 28
WEB PROGRAMMING LABORATORY

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 29
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 30
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 31
WEB PROGRAMMING LABORATORY

6 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.

Program(6b.html):

<html>
<head>
<h2>Counting Number Of Visits To This Page</h2>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
</head>
<body>
<form action="/cgi-bin/6b.pl" method="post">
<p><h4>No.of visits to this page:
<input type="submit" value="Click Here"/>
</p></h4>
</form>
</body>
</html>

Program(6b.pl):

#!/usr/bin/perl
print"content-type:text/html \n\n";
print"<html><body>";
open(FILE,'<count.txt');
$count=<FILE>;
close(FILE);
open(FILE,'>count.txt');
$count++;
print FILE"$count";
print"<strong>This page has been visited for $count times</strong>";
close(FILE);
print"</body></html>";

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 32
WEB PROGRAMMING LABORATORY

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 33
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 34
WEB PROGRAMMING LABORATORY

7. Write a Perl program to display a digital clock which displays


the current time of the server.

Program(7.pl):

#!/usr/bin/perl
use CGI":standard";
print"refresh:1\n";
print "content-type:text/html \n\n";
print"<html><body bgcolor=cyan>";
print "<title>HIMANSHU AGRAWAL(1CD12CS038)</title>";
print time;
($s,$m,$h)=localtime(time);
print"<br></br><b>The System Time is: $h:$m:$s</br>";
print"<br></br><b>In words $h Hours $m Minutes $s Seconds</br>";
print"</body></html>";

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 35
WEB PROGRAMMING LABORATORY

8. 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.

Program(8.html):

<html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body>
<form action="/cgi-bin/8.pl" method="post">
Name:&nbsp;
<input type="text" name="uname"/>
</br>
Age: &nbsp;&nbsp;&nbsp;
<input type="text" name="aa"/>
</br>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Program(8.pl):

#!/usr/bin/perl
print "content-type:text/html \n\n";
print "<html><title>HIMANSHU AGRAWAL(1CD12CS038)</title>";
print "Result of INSERT Operation";
use CGI":standard";
use DBI;
$dbh=DBI->connect("DBI:mysql:program1","root");
$name=param("uname");
$age=param("aa");
$qh=$dbh->prepare("insert into Student values('$name','$age')");
$qh->execute();
$qh=$dbh->prepare("select * from Student");
$qh->execute();
print "<table border=2><tr><th>NAME</th><th>AGE</th></tr>";
while(($name,$age)=$qh->fetchrow())
{ print "<tr><td>$name</td><td>$age</td></tr>";}
print "</table>";
$qh->finish();
$dbh->disconnect();
print "</html>";

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 36
WEB PROGRAMMING LABORATORY

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 37
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 38
WEB PROGRAMMING LABORATORY

9. 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.

Program(9.php):

<html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body>
<?php
$intwomonths=60*60*24*60+time();
setcookie('abc',date("g:i-m/d/y"),$intwomonths);
if(isset($_COOKIE['abc']))
{
$visit=$_COOKIE['abc'];
echo"Your last visit was".$visit;
}
else
echo"You have no Cookies...";
?>
</body>
</html>

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 39
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 40
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 41
WEB PROGRAMMING LABORATORY

10. 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.

Program(10.php):

<html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body>
<?php
session_start();
if(isset($_SESSION['views']))
{
$_SESSION['views']=$_SESSION['views']+1;
}
else
$_SESSION['views']=1;
echo "Views=".$_SESSION['views'];
?>
</body>
</html>

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 42
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 43
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 44
WEB PROGRAMMING LABORATORY

11. Create a XHTML form with Name, Address Line 1, Address


Line 2, and E-mail text fields. On submitting, store the values in
MySQL table. Retrieve and display the data based on Name.

Program(11.html):

<html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body>
<form action="/cgi-bin/11.php" method="post">
<table><tr>
<th>Name:</th>
<th><input type="text" name="aa"/></br></th></tr>
<tr>
<th>Address 1:</th>
<th><input type="text" name="bb"/></br></th></tr>
<tr>
<th>Address 2:</th>
<th><input type="text" name="cc"/></br></th></tr>
<tr>
<th>E-Mail:</th>
<th><input type="text" name="dd"/></br></th></tr>
</table>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Program(11.php):

<html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body>
<?php
$con=mysql_connect("localhost","root");
if(!con)
{
die("Error".mysql_error());
}
mysql_select_db("11a");
$name=$_POST["aa"];
$add1=$_POST["bb"];
$add2=$_POST["cc"];
$email=$_POST["dd"];
$res=mysql_query("insert into info values('$name','$add1','$add2','$email')");
if(!$res)
{
die("Not able to insert".mysql_error());

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 45
WEB PROGRAMMING LABORATORY

}
echo"Record is successfully added";
mysql_close($con);
?>
<form action="11res.php" method="post">
Name:
<input type="text" name="xx"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Program(11res.php):

<html>
<title>HIMANSHU AGRAWAL(1CD12CS038)</title>
<body>
<?php
$con=mysql_connect("localhost","root");
if(!con)
{
die("Error".mysql_error());
}
mysql_select_db("11a");
$res1=mysql_query("select * from info where name='$_POST[xx]'");
echo "<table border=3>
<tr>
<th>Name</th>
<th>Address 1</th>
<th>Address 2</th>
<th>E-mail</th>
</tr>";
while($row=mysql_fetch_row($res1))
{
echo"<tr>";
echo"<td>$row[0]</td>";
echo"<td>$row[1]</td>";
echo"<td>$row[2]</td>";
echo"<td>$row[3]</td>";
echo"</tr>";
}
echo "</table>";
mysql_close($con);
?>
</body>
</html>

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 46
WEB PROGRAMMING LABORATORY

Output:

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 47
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 48
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 49
WEB PROGRAMMING LABORATORY

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 50
WEB PROGRAMMING LABORATORY

12. Build a Rails application 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.

Steps to execute
1. Download the InstantRails 1.7 software from http://rubyforge.org/frs/?
group_id=904
Unzip the instantRail1.7 in any drive
2. Click on I in the folder and open ruby console window

3. In the Ruby console window type


>mysql -u root
>mysql >create database books_development;
HIMANSHU AGRAWAL (1CD12CS038)
DEPT. OF CSE, CITECH [2015-2016]
Page 51
WEB PROGRAMMING LABORATORY

> Use books_development;


>create table books (id int not null auto_increment, author varchar(20), title
varchar(20), publication varchar(20), edition varchar(15), primary key(id));
> quit
4. Type > rails books
( Can see files creating, wait for it to complete)
5. Type > cd books
( Can see files creating, wait for it to complete)
6. type > ruby script/generate scaffold book (Here it is book not books)
7. If the server is not started then can start the server through command prompt
ie, type ....\books> ruby script/server

Note: Another way of starting the server - click Instant rails (I), click I on the Apache ->
Rails application -> Manage rails application, then select books & start with mongrel
server.

8. Note down the port no. 0.0.0.0:3000 (3000 is port number, this may vary depending
on system)
9. Open browser -> type http://localhost:3000
type-> http://localhost:3000/books

10. Click on New book to enter the book details

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 52
WEB PROGRAMMING LABORATORY

11. Can see the entries as below

12.Return back to terminal. Press Ctrl C, will return to books folder ( ...\books>)

type ....\books> ruby script/generate controller search


(some files are created)
Minimize the terminal
12. Go to ..../instantrails/rails_app/books/app/controllers
edit search_controller.rb in notepad

13. Delete the junk values before class and after Application Controller and type the
code
class SearchController < ApplicationController
def welcome
end

def result
@tit = params[:tit]

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 53
WEB PROGRAMMING LABORATORY

@bookz = Book.find(:all, :conditions => [“title=?”,@tit])


end
end

save and close

14. open notepad and type program "result.rhtml" and save in


.../app/views/search/result.rhtml

<html>
<title> Welcome template for books </title>
<body>
<p> The Details of the Book With Title <%= @tit %> </p>
<table border=1>
<tr>
<th>Title</th>
<th>Author Name</th>
<th>Publication</th>
<th>Edition</th>
</tr>
<% @bookz.each do |book|
@title = book.title
@author = book.author
@publication = book.publication
@edition = book.edition %>
<tr>
<td> <%= @title %></td>
<td> <%= @author %> </td>
<td> <%= @publication %></td>
<td> <%= @edition %></td>
</tr>
<% end %>
</table>
<a href=”http://localhost:3000/search/welcome”>Back</a>
</form>
</body>
</html>

15. open notepad and type program "welcome.rhtml" and save in


../app/views/search/welcome.rhtml

<html>
<title> Welcome template for books </title>
<body>
<p> Enter the Title to Search </p>
<form action = "result" >

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 54
WEB PROGRAMMING LABORATORY

Enter Searching Element: <input type = "text" name="tit" />


<input type = submit value="Search" />
<a href=”http://localhost:3000/books/new”>Back</a>
</form>
</body>
</html>

16. start the mongrel server and open browser and type
http://localhost:3000/search/welcome

HIMANSHU AGRAWAL (1CD12CS038)


DEPT. OF CSE, CITECH [2015-2016]
Page 55

You might also like