Sunteți pe pagina 1din 41

WEB PROGRAMMING LAB MANUAL (10CSL78)

2016

WEB
PR2016OGRAMMIN
G LAB MANUAL
(10CSL78)

NEW HORIZON
COLLEGE OF

ENGINEERING
DEPRTMENT OF IS & E
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016

1. Develop and demonstrate a XHTML file that includes Javascript scriptfor 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

Steps to execute:

1) Place the HTML files in /var/www/html folder.


2) open the browser and locate the XHTML file to execute the file.
3) To locate errors in check Menu->Tools->Error Console in
Firefox browser.

program name: pg1a.html

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
var fib1 = 0,fib2 = 1,temp,i = 2;
var n = prompt("Enter no. of elements: ");
if(n <= 0 || isNaN(n))
{
alert("Please enter number > 0.") ;
}
else
{
document.write("First ",n," numbers: <br><br>");
if(n == 1)
document.write("<br><br>",fib1);
else if (n == 2)
document.write("<br><br>",fib1,"<br><br>",fib2);
else {
document.write("<br><br>",fib1,"<br><br>",fib2);
do
{

3
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
temp = fib1 + fib2;
document.write("<br><br>",temp);
fib1 = fib2;
}
fib2 = temp;
}
i++;
</script>
}while(i < n);
</body>
</html>

4
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Output:

5
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program name:pg1b.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script type="text/javascript">
var n = prompt("Enter n: ");
if(n <= 0 || isNaN(n))
{
alert("Please enter number > 0.");
exit();
}
else
{
var msg="";
msg = "N = " + n + "\n\n";
msg+="Number"+"\t\tSquare\n";
msg+="-------------------------\n";
for(var i=1;i<=n;i++)
msg += i+"\t\t\t"+i*i+ "\n";
alert(msg);
}
</script>
</body>
</html>
Output:

6
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016

2. 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)

Steps to execute:

1) Place the HTML files in /var/www/html folder.


2) open the browser and locate the XHTML file to execute the file.
3) To locate errors in check Menu->Tools->Error Console in
Firefox browser.

Program Name:pg2a.html

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

7
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
<head>
<script type="text/javascript">
function validate()
{
var usn = document.getElementById("usn").value;
if(usn.match(/^[1-4][A-Z]{2}[0-9]{2}[A-Z]{2}[0-9]{3}$/))
alert("Valid USN");
else

8
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
alert("Innvalid USN");
}
</script>
</head>
<body>
<center>
<form onsubmit="validate()">
<br><br><br>
Enter USN:
<input type="text" id="usn" />
<input type="submit" value=" Validate USN " />
</form>
</center>
</body>
</html>
Output:

9
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program Name:pg2b.html

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Program 4b: Validate USN and Semester</title>
<script type="text/javascript">
function validate()
{
var usn = document.getElementById("usn").value;
var sem = document.getElementById("sem").value;
var msg = "";
if(usn.match(/^[1-4][A-Z]{2}[0-9]{2}[A-Z]{2}[0-9]{3}$/))
msg += "Valid USN";
else
msg += "Invalid USN";
msg += "\n\n";
if(sem.match(/^[1-8]$/))
msg += "Valid Semester";
else
msg += "Invalid Semester";
alert(msg);
}
</script>
</head>
<body>
<center>
<form onsubmit="validate()">
<br><br><br>
USN: <input type="text" id="usn" /> <br/><br/>
SEM: <input type="text" id="sem" /> <br/><br/>
<input type="submit" value=" Validate USN and Sem " />
</form>
</center>
</body>
</html>

10
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Output:

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

Steps to execute:

1) Place the HTML files in /var/www/html folder.


2) open the browser and locate the XHTML file to execute the file.
3) To locate errors in check Menu->Tools->Error Console in
Firefox browser.
11
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016

Program Name: pg3a.html


<?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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Program 5a: Dynamic stacking of Paragraphs </title>

<style type="text/css">
.para1
{
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: red;
padding:3cm;
}
.para2
{
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
background-color: blue;
padding:3cm;
}
.para3
{
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
background-color: green;
padding:3cm;
}
</style>
<script type="text/javascript">
var oldtop = "p3";
function toTop(newtop)
{
var domTop =
document.getElementById(oldtop).style;
var domNew =
12
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
document.getElementById(newtop).style;

domTop.zIndex = 0;
domNew.zIndex = 5;
oldtop = newtop;
}
</script>
</head>

13
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
<body>
<div class="para1" id="p1" onmouseover="toTop('p1')">
This is Paragraph 1
</div>
<div class="para2" id="p2" onmouseover="toTop('p2')">
This is Paragraph 2
</div>
<div class="para3" id="p3" onmouseover="toTop('p3')">
This is Paragraph 3
</div>
</body>
</html>
Output:

Program Name:pg3b.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Program 5b: Dynamic stacking of paragraphs</title>
<style type="text/css">
.para1
{
position:absolute;
top:0;
left:0;
z-index:1;
background-color:red;
padding:3cm;
}

14
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
.para2
{
position:absolute;
top:50px;
left:50px;
z-index:2;
background-color:green;
padding:3cm;
}
.para3
{
position:absolute;
top:100px;
left:100px;
z-index:3;
background-color:blue;
padding:3cm;
}
</style>
<script type="text/javascript">
function totop(newtop,pos)
{
var domtop =
document.getElementById(newtop).style;
domtop.zIndex = "10";
}
function backtopos(newtop,pos)
{
var domtop =
document.getElementById(newtop).style;
domtop.zIndex = pos;
}
</script>
</head>

<body>
<div class="para1" id="p1" onmouseover="totop('p1','1')"
onmouseout="backtopos('p1','1')">
Computer Science and Engg.
</div>

<div class="para2" id="p2" onmouseover="totop('p2','2')"


onmouseout="backtopos('p2','2')">
Information Science and Engg.
</div>

15
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
<div class="para3" id="p3" onmouseover="totop('p3','3')"
onmouseout="backtopos('p3','3')">
Electronics and Communications Engg.
</div>
</body>
</html>
Output:

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.
b) Create an XSLT style sheet for one student element of the above document and use
it to create a display of that element.

Steps to execute:

1) Place the XML,CSS AND XSL files in /var/www/html folder.


2) open the browser and locate the XML file to execute the file.
3) To locate errors in check Menu->Tools->Error Console in
Firefox browser.

14
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program Name:pg4a.css

student {display:block;}
usn,name {display:block; font-size:14pt; color:red; margin-
left:1cm;}
college,branch {display:block; font-size:12pt; color:green; margin-
left:1cm;}
yoj,email {display:block; font-size:11pt; color:blue; margin-
left:1cm;}

15
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program Name:pg4a.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="pg4a.css"?>
<vtu>
<student>
<usn>1NH11IS001</usn> <br/>
<name>Abhi</name><br/>
<college>NHCE</college><br/>
<branch>Informtion Science</branch><br/>
<yoj>2011</yoj><br/>
<email>abhi@nhce.edu</email>
</student>
<student>
<usn>1NH11IS002</usn>
<name>Ajay</name>
<college>NHCE</college>
<branch>Information Science</branch>
<yoj>2011</yoj>
<email>ajay@nhce.edu</email>
</student>
<student>
<usn>1NH11IS003</usn>
<name>Ajit</name>
<college>NHCE</college>
<branch>Information Science</branch>
<yoj>2011</yoj>
<email>ajit@nhce.edu</email>
</student>
</vtu>
Output:

16
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016

Program Name:pg4b.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="pg4b.xsl"?>
<vtu>
<student>
<usn>1NH11IS001</usn> <br/>
<name>Abhi</name><br/>
<college>NHCE</college><br/>
<branch>Informtion Science</branch><br/>
<yoj>2011</yoj><br/>
<email>abhi@nhce.edu</email>
</student>
<student>
<usn>1NH11IS002</usn>
<name>Ajay</name>
<college>NHCE</college>
<branch>Information Science</branch>
<yoj>2011</yoj>
<email>ajay@nhce.edu</email>
</student>
<student>
<usn>1NH11IS003</usn>
<name>Ajit</name>
<college>NHCE</college>
<branch>Information Science</branch>
<yoj>2011</yoj>
<email>ajit@nhce.edu</email>
</student>
</vtu>

16
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program Name:pg4b.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="vtu">
<html>
<head>
<title>Program 6b: XML and XSLT</title>
</head>
<body>
<h3>Student details</h3>
<xsl:for-each select="student">
<h4>Student: <xsl:number format="1" /></h4>
<span style="color:red;">USN : </span>
<span style="color:blue;">
<xsl:value-of select="usn" />
</span> <br/>
<span style="color:red;">Name : </span>
<span style="color:blue;">
<xsl:value-of select="name" />
</span> <br/>
<span style="color:red;">College : </span>
<span style="color:blue;">
<xsl:value-of select="college" />
</span> <br/>
<span style="color:red;">Branch : </span>
<span style="color:blue;">
<xsl:value-of select="branch" />
</span> <br/>
<span style="color:red;">Yoj : </span>
<span style="color:blue;">
<xsl:value-of select="yoj" />
</span> <br/>
<span style="color:red;">Email : </span>
<span style="color:blue;">
<xsl:value-of select="email" />
</span>
</xsl:for-each>
</body>

17
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
</html>
</xsl:template>
</xsl:stylesheet>

Output:

18
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
5. a) Write a Perl program to display various Server Information like ServerName, Server
Software, Server protocol, CGI Revision etc.
b) Write a Perl program to accept UNIX command from a HTML formand to display
the output of the command executed.

Steps to Execute:
1)Place all perl files in /var/www/cgi-bin folder.
2) Give permission 777 to all perl files and text files(if used),
using cd /var/www/cgi-bin and chmod 777 filename.pl or
chmod 777 filename.txt
3) To start httpd server(Apache Tomcat) use the following commands.
service httpd start
4) To stop httpd server use the following commands.
service httpd stop
5) To locate errors in perl programs, check the following file at
/etc/httpd/logs/error.log

Program Name:pg5a.pl
#!/usr/bin/perl
print "Content-type: text/html\n\n";
print "<html><body><center>";
print "<table border=1 align=center>";
print "<tr><th>sl.no</th><th>Environment
variable</th><th>Value</th>";
$i=1;
foreach $key( keys(%ENV) )
{
print "<tr><td>$i</td><td>$key</td><td>$ENV{$key}</td></tr>";
$i++;
}
print "</table></center></body></html>";

Output:

19
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program Name:pg5b.html
<html>
<body>
<form method="get" action="/cgi-bin/pg5b.pl">
Enter the command:
<input type="text" name="ucommand">
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form>
</body>
</html>

Program Name:pg5b.pl
#!/usr/bin/perl
use CGI ':standard';
print "Content-type: text/html \n\n";
$command = param("ucommand");
print "<html><body>";
print "Entered Command:$command<br/>";
if(system($command) == -1)
{
print "Please enter valid command.";
}
print "</body></html>";

Output:

20
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
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.
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.
Steps to Execute:
1)Place all perl files in /var/www/cgi-bin folder.
2) Give permission 777 to all perl files and text files(if used),
using cd /var/www/cgi-bin and chmod 777 filename.pl or
chmod 777 filename.txt
3) To start httpd server(Apache Tomcat) use the following commands.
service httpd start
4) To stop httpd server use the following commands.
service httpd stop
5) To locate errors in perl programs, check the following file at
/etc/httpd/logs/error.log

Program Name:pg6a.html
<html>
<body>
<form method="get" action="/cgi-bin/pg6a.pl">
Enter Your Name:
<input type=text name="username">
<input type=submit value=" Send ">
<input type=reset value=" Clear ">
</form>
</body>
</html>

Program Name:pg6a.pl

#!/usr/bin/perl
use CGI ':standard';
print "Content-type: text/html \n\n";
@msg = ("Hi","Welcome","Good morning","Hello");
$name = param("username");
if($name eq "")
{
print "Please enter name.";
exit(0);
}

print "<html><body><center><h2>";
print "$msg[int rand(4)] $name";

21
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
print "</h2></center></body></html>";

Output:

22
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program Name:pg6b.pl
create count.txt text file in /var/www/cgi-bin folder and give
777 permissions.(Read,Write, and Execute permission for owner,group
owner and others.
Enter program url in the address bar and press enter.

#!/usr/bin/perl
use CGI ':standard';
print "Content-type:text/html \n\n";
print "<html><body><center>";
$file="count.txt";
open(FH,$file) or die("Can't open the file to read");
$count=<FH>;
close FH;
$count++;
print "<h1> You are Visitor Number.<b>$count</b></h1>";
open(FH,">$file") or die("Can't open the file to write");
print FH $count;
close FH;
print "</center></body></html>";

Output:

23
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
7. Write a Perl program to display a digital clock which displays the current time of the server.
Steps to Execute:
1)Place all perl files in /var/www/cgi-bin folder.
3) Give permission 777 to all perl files and text files(if used),
using cd /var/www/cgi-bin and chmod 777 filename.pl or
chmod 777 filename.txt
4) To start httpd server(Apache Tomcat) use the following commands.
service httpd start
5) To stop httpd server use the following commands.
service httpd stop
6) To locate errors in perl programs, check the following file at
/etc/httpd/logs/error.log

Program Name:pg7.pl
#!/usr/bin/perl
print "Content-type: text/html \n";
print "refresh:1\n\n";
print "<html><body><center>";
($sec,$min,$hr) = localtime(time);
if($hr > 12)
{
$hr = $hr - 12;
$ampm = " pm";
}
else
{
$ampm = " am";
}
print "<h1>Digital Clock : $hr:$min:$sec $ampm</h1>";
print "</center></body></html>";

Output:

24
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
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.
(Before typing program)
start MySql server use the following commands.
service httpd start
mysql
mysql> create database ise;
Query OK, 1 row affected (0.03 sec)
mysql> use ise;
Database changed
mysql> create table person(name varchar(20),age int);
Query OK, 0 rows affected (0.01 sec)
Steps to Execute:
1)Place all perl files in /var/www/cgi-bin folder.
2) Give permission 777 to all perl files and text files(if used),
using cd /var/www/cgi-bin and chmod 777 filename.pl or
chmod 777 filename.txt
3) To start httpd server(Apache Tomcat) use the following commands.
service httpd start
4) To start MySql server use the following commands.
service httpd start

5) To stop httpd server use the following commands.


service httpd stop
6)To start MySql server use the following commands.
service httpd start

7) To locate errors in perl programs, check the following file at


/etc/httpd/logs/error.log

Program Name:pg8.html

<html>
<body>
<center>
<h2>Enter your details</h2><br><br>
<form action="/cgi-bin/pg8.pl">
Name : <input type="text" name="name"><br><br>
Age : <input type="text" name="age"> <br><br>
<input type="submit" value="Insert Record">
<input type="reset" value=" Clear ">
</form>
</center>
</body>
</html>
25
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program Name:pg8.pl
#!/usr/bin/perl
use CGI ':standard';
use DBI;
print "Content-type: text/html \n\n";
$name = param("name");
$age = param("age");
$dbh = DBI->connect("DBI:mysql:ise", "root");
$sth = $dbh->prepare("insert into person values(?,?)");
$res = $sth->execute($name,$age);
print "Record inserted to database SUCESSFULLY.";
$sth->finish();
$sth = $dbh->prepare("select * from person");
$res = $sth->execute();
print "<h3>Table <b>PERSON</b></h3>";
print "<table border=1 align=center bgcolor=yellow>";
print "<tr><th>Sl. No</th><th>Name</th><th>Age</th></tr>";
$i=1;
while(($name,$age) = $sth->fetchrow())
{
print "<tr><td align=center>$i</td>";
print "<td align=left width=80>$name</td>";
print "<td align=center width=50>$age</td></tr>";
$i++;
}
print "</table>";
$sth->finish();
$dbh->disconnect();

26
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Output:

27
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
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.
This program is modified to keep cookie alive for a given
time.

a. Cookies are automatically destroyed/deleted once browser


is closed.
b. To keep cookies alive even after browser is closed, set
third parameter of
setcookie function to current time + no. of seconds to
be alive, as shown below.
time() + 60 * 60. i.e 3600 seconds i.e. one hour.
To show output:
a. Enter program url in the address bar.
b. Show output by refreshing this page.( showing last
accessed time)
c. Close the browser.
d. Reopen browser and enter program url, last accessed time
should be displayed.
(not You are visiting the page for the first time)
Program Name:pg9.php
<?php
date_default_timezone_set("Asia/Calcutta");
$current_time = date("H:i:s d/m/Y");
$time_to_expire = time() + 60*60;
setcookie("Last_Accessed",$current_time,$time_to_expire);
if(isset($_COOKIE["Last_Accessed"]))
{
$last_visit = $_COOKIE["Last_Accessed"];
print "<br><br>Last Accessed : $last_visit";
}
else
{
print "<br><br>This page has been visited for the first
time.";
}

print "<br><br>Current Time: <b>$current_time</b>";


print "<br><br>Thank you";
?>
Output:

26
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016

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 Name:pg10.php

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

27
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
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. (Before typing program)
This program is to

a) Read person details from client and store it in table


b) Search the records based on name and display the details.
Execute following commands:

mysql> create database ise;


Query OK, 1 row affected (0.03 sec)
mysql> use ise;
Database changed
mysql> create table personphp(name varchar(25),addr1
varchar(25),addr2 varchar(25),email varchar(25));
Query OK, 0 rows affected (0.01 sec)
Steps to execute:
Save html,php files in /var/www/html folder

Program Name:pg11.html

<html>
<body align="center">
<center> <h2>Insert Person details</h2>
<form action="pg11a.php" method="get">
Name:<input type="text" name="name" /> <br><br>
Addr1:<input type="text" name="addr1" /> <br><br>
Addr2:<input type="text" name="addr2" /> <br><br>
Email:<input type="text" name="email" /> <br><br>
Choose:<input type="submit" value=" Insert " />
<input type="reset" value=" Reset " /> <br><br>
</form></center>
<hr/>
<center> <h2>Get Person details using name</h2>
<form action="pg11b.php" method="get">
Name:<input type="text" name="name" />
<input type="submit" value=" Search" />
<input type="reset" value=" Reset " />
</form></center>
</body>
</html>

Program Name:pg11a.php

<?php
$name = $_GET['name'];
$addr1 = $_GET['addr1'];

28
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
$addr2 = $_GET['addr2'];
$email = $_GET['email'];
$link = mysql_connect("localhost","root");
$selected = mysql_select_db("ise");
$res = mysql_query("insert into personphp
values('$name','$addr1','$addr2','$email')");
print "<center><h4>Record inserted SUCESSFULLY.</h4></center>";
mysql_free_result($res);
mysql_close($link);
?>

29
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
Program Name:pg11b.php
<?php
$name = $_GET['name'];
$link = mysql_connect("localhost","root");
$selected = mysql_select_db("ise");
$res = mysql_query("select * from personphp where name =
'$name'");
$nrows = mysql_num_rows($res);
if($nrows == 0)
{
print "NO Persons with this name FOUND.";
exit(0);
}
print "<center><h3>No. of persons matched:
$nrows</h3></center><br/><br/>";
print "<center><table cellspacing=2 cellpadding=3 border=1>";
print "<tr><th>Sl. No.</th><th>Name</th><th>Address1</th>";
print "<th>Address2</th><th>Email</th></tr>";
$i=1;
while($row = mysql_fetch_array($res))
{
print "<tr><td>$i</td><td>$row[0]</td><td>$row[1]</td>";
print "<td>$row[2]</td><td>$row[3]</td></tr>";
$i++;
}
print "</table></center>";
mysql_free_result($res);
mysql_close($link);
?>
Output:

29
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016

30
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
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 the program:
STEP-1:Extract InstantRails-1.7-win.zip in any drive and open extracted folder C:\InstantRails
STEP-2:Double Click on Icon I and ensure that apche and mysql servers started successfully of
not.If not, close the window and open it once again.(If Instant Rail window minimized or invisible,
you can find at hidden icons at right botton of desktop,again double click on I and make the window
visible)

STEP-3:Click on Irails applications ruby console window, to open the ruby console window

STEP-4:In the ruby console window type the commands and observe the status of the commands.
C:\InstantRails\rails_apps>mysql -u root
mysql> create database books_development;
Query OK, 1 row affected (0.12 sec)
mysql> use books_development;
Database changed
mysql>create table books(id int not null auto_increment,title varchar(25),author
varchar(25),publication varchar(25),edition varchar(25),primary key(id));
Query OK, 0 rows affected (0.10 sec)

31
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
mysql> quit
Bye
C:\InstantRails\rails_apps>rails books (can see files creating,wait for it complete )
C:\InstantRails\rails_apps>cd books
C:\InstantRails\rails_apps\books>ruby script/generate scaffold book (It is book not books)
(wait for files to create)
STEP 5:.Start the mongrel server using the following command,
C:\InstantRails\rails_apps\books>ruby script/server
Note down the port no. 0.0.0.0:3000 (3000 is port number, this may vary depending on system)
STEP-6: Open browser and type URL http://localhost:3000/books

STEP-7:Clock on new books and Enter details and click create

32
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
STEP-8:Repeatedly enter atlest 4 tuples into the table from the above form and check the
database status as follws,

STEP-9:Come back to ruby console window and pres ctrl+c to stop mong-rel server and to return to
the ..../books
STEP-10:RuN the command as follows,
C:\InstantRails\rails_apps\books>ruby script/generate controller search
(wait for files to create)
STEP-11:Minimize the terminal and go to, C:\InstantRails\rails_apps\books\app\controllers and
edit search_controller.rb
(a ) Delete all the contents of the file search_controller.rb
(b) Type the following instruction in search_controller.rb and save --> close (code is case sensitive)

class SearchController < ApplicationController


def welcome
@num_books = Book.count
end
def result
@bid = params[:bid]
@bookz = Book.find(:all,:conditions=> ["title=?",@bid])
end
end

STEP-12:open notepad and type the follwing code,and save as welcome.rhtml

33
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
<html>
<title> Welcome template for books </title>
<body>
<p> Total number of books = <%= @num_books %> </p>
<form action = "result" method="get" >
Enter Title for Searching Book: <input type="text" name="bid" />
<input type=submit value="Search" />
</form>
</body>
</html>
Click on save-> change save type as all files (default is txt) and save in following directory,
C:\InstantRails\rails_apps\books\app\views\search
STEP-13:Repeat the step 11 for creating file result.rhtml, code is as follows
<html>
<title> Welcome template for books </title>
<body>
<p> Entered Title is: <%= @bid %> </p>
<table border=1>
<tr><th>Book Id</th><th>Book Title</th><th>Author</th><th>publication </th>
<th>edition </th> </tr>
<% @bookz.each do |book|
@id = book.id
@title = book.title
@author=book.author
@publication = book.publication
@edition = book.edition %>
<tr>
<td><%= @id %></td>
<td><%= @title %> </td>
<td><%= @author %></td>
<td> <%= @publication %></td>
<td> <%= @edition %></td>
</tr>
<% end %>
</table>
</body>
</html>
STEP-14: start the mong-rel server,using the command in ruby console window
C:\InstantRails\rails_apps\books>ruby script/server
STEP-15:.open browser enter url

34
WEB PROGRAMMING LAB MANUAL (10CSL78) 2016
http://localhost:3000/search/welcome
and serach for any book based on title as follows,

35

S-ar putea să vă placă și