VTU Web Programming Lab
1a.html<html>
<head>
<title>Fibonacci</title>
<body bgcolor="red"
text="White">
<script type="text/javascript">
var n = prompt("Enter a num");
for(var i = 1; i <= n; i++) {
document.write(fib(i)
+ "<br/>");
}
document.close();
function fib(n) {
if(n
== 1) return 0;
if(n
== 2) return 1;
return
fib(n - 1) + fib(n - 2);
}
</script>
</head>
</body>
</html>
1b.html
1b.html
<html>
<head>
<title>Squares</title>
<body bgcolor="red" text="white"
>
<h1>SQUARES </h1>
<script type="text/javascript">
var n = prompt("Enter a num(1-20)");
var str = "";
for(var i = 1; i <= n; i++)
{
str
+= i + " -> " + (i * i) + "\n";
}
alert(str);
</script>
</head>
</body>
</html>
2a.html
<html>
<head>
<title> USN </title>
<script type="text/javascript">
function validate_usn()
{
var
str=document.getElementById("usn");
var
result=str.value.search("^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$");
if(result!=0)
{
alert("Entered usn is not in correct form");
}
else
{
alert("Entered
usn ("+str.value+") is in correct form");
}
}
</script>
</head>
<body bgcolor = "orange">
<form>
<h3> Enter Your USN </h3>
<input type = "text" id =
"usn"> <br/>
<input type = "button" onclick =
"validate_usn();" value="submit"/>
<input type = "reset"
value="reset"/>
</form>
</body>
</html>
2b.html
<html>
<head>
<title> USN </title>
<script type="text/javascript">
function validate_usn()
{
var
str=document.getElementById("usn");
var
valid_usn=str.value.search("^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$");
var
str1=document.getElementById("sem");
var
valid_sem=str1.value.search("^[1-8]$");
if(valid_usn>=0 && valid_sem>=0)
alert("valid usn and semester");
else
if(valid_usn <0 && valid_sem>=0)
alert("invalid usn");
else
if(valid_usn >=0 && valid_sem<0)
alert("invalid semester");
else
alert("invalid usn and semester");
}
</script>
</head>
<body bgcolor = "red">
<form>
Enter your usn: <input type = "text" id =
"usn"> <br/>
Enter your semester: <input type = "text"
id="sem"><br/>
<input type = "button" onclick =
"validate_usn();" value="submit"/>
<input type = "reset"
value="reset"/>
</form>
</body>
</html>
3a.html – Open in Internet Explorer.
<head>
<title>Stack</title>
<script type="text/javascript">
var top='p3'
function toTop(newTop)
{
domTop=document.getElementById(top).style
domNew=document.getElementById(newTop).style
domTop.zIndex="0"
domNew.zIndex="10"
top=newTop
}
</script>
<style type="text/css">
.para1{position:absolute;top:10;left:120;z-index:0;
border:solid;padding:80;
width:300;background-color:aqua;}
.para2{position:absolute;top:50;left:150;z-index:0;
border:solid;padding:80;
width:300;background-color:yellow; }
.para3{position:absolute;top:100;left:180;z-index:0;
border:solid;padding:80; width:300;background-color:red;
}
</style>
</head>
<body>
<p class="para1" id="p1"
onmouseover="toTop('p1')"
onmouseout="toTop('p2')"> Frame One
</p>
<p class="para3" id="p3"
onmouseover="toTop('p3')"
onmouseout="toTop('p2')"> Frame Two
</p>
<p class="para2" id="p2"
onmouseover="toTop('p2')"
onmouseout="toTop('p2')"> Frame Three
</p>
</body>
</html>
3b.html- Open in Internet Explorer.
<head>
<title>Stack</title>
<script type="text/javascript">
var top='p3'
function toTop(newTop)
{
domTop=document.getElementById(top).style
domNew=document.getElementById(newTop).style
domTop.zIndex="0"
domNew.zIndex="10"
top=newTop
}
</script>
<style type="text/css">
.para1{position:absolute;top:10;left:120;z-index:0;
border:solid;padding:80;
width:300;background-color:aqua;}
.para2{position:absolute;top:50;left:150;z-index:0;
border:solid;padding:80;
width:300;background-color:yellow; }
.para3{position:absolute;top:100;left:180;z-index:0;
border:solid;padding:80; width:300;background-color:red;
}
</style>
</head>
<body>
<p class="para1" id="p1"
onmouseover="toTop('p1')"
onmouseout="toTop('p2')"> Frame One
</p>
<p class="para3" id="p3"
onmouseover="toTop('p3')"
onmouseout="toTop('p2')"> Frame Two
</p>
<p class="para2" id="p2"
onmouseover="toTop('p2')"
onmouseout="toTop('p2')"> Frame Three
</p>
</body></html>
4a.css
stud-info { display:block; color:blue; font-style:italic;
font-size:200%; }
student{ display:block; background-color:aqua;
font-size:100%; }
stud-info { display:block; color:blue; }
stud-info { display:block; color:blue; }
stud-info { display:block; color:blue; }
usn,name,noc,branch,yoj,eid { display:block; }
4a.xml
<?xml version="1.0"
encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="4a.css"?>
<student> V.T.U University
<stud-info> Student Information</stud-info>
<stud1>
<usn>USN:1BI10IS090</usn>
<name>NAME:BATMAN</name>
<noc>COLLEGE:BIT</noc>
<branch>BRANCH:ISE</branch>
<yoj>YOJ:2013</yoj>
<eid>EID:batman@gmail.com</eid>
</stud1>
---------------------------------------------------------------------------------
<stud2>
<usn>USN:1BI10IS091</usn>
<name>NAME:SUPERMAN</name>
<noc>COLLEGE:BIT</noc>
<branch>BRANCH:CSE</branch>
<yoj>YOJ:2012</yoj>
<eid>EID:Superman@gmail.com</eid>
</stud2>
---------------------------------------------------------------------------------
<stud3>
<usn>USN:1BI10IS098</usn>
<name>NAME:LOKI</name>
<noc>COLLEGE:BIT</noc>
<branch>BRANCH:ISE</branch>
<yoj>YOJ:2011</yoj>
<eid>EID:Loki@gmail.com</eid>
</stud3>
</student>
4b.xml -Open in Internet Explorer.
<?xml version = "1.0" ?>
<?xml-stylesheet type = "text/xsl" href =
"4b.xsl" ?>
<vtu>
<usn>1BI10IS090</usn>
<name>SPIDERMAN</name>
<college>BIT</college>
<branch>ISE</branch>
<yoj>2013</yoj>
<email>Spiderman@gmail.com</email>
</vtu>
4b.xsl- Open in Internet Explorer.
<?xml version = "1.0" ?>
<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> STYLE SHEET FOR
4b.xml</title></head>
<body bgcolor="pink">
<h2> VTU STUDENT'S DESCRIPTIONS </h2>
<span style = "font-style: italic; color:
blue;">USN: </span>
<xsl:value-of
select = "usn" /> <br />
<span style = "font-style: italic; color:
red;">NAME: </span>
<xsl:value-of
select = "name" /> <br />
<span style = "font-style: italic; color:
orange;">COLLEGE: </span>
<xsl:value-of
select = "college" /> <br />
<span style = "font-style: italic; color:
aqua;">BRANCH: </span>
<xsl:value-of
select = "branch" /> <br />
<span style = "font-style: italic; color:
yellow;">YEAR OF JOINING: </span>
<xsl:value-of
select = "yoj" /> <br />
<span style = "font-style: italic; color:
green;">E-MAIL: </span>
<xsl:value-of
select = "email" /> <br /><hr />
</body></html>
</xsl:template>
</xsl:stylesheet>
5a.pl
#!C:/Perl/bin/perl -w
use CGI':standard';
print
"content-type:text/html","\n\n";
print "<html>\n";
print "<head><title> About this server
</title> </head>\n";
print "<body><h1> About this server
</h1>","\n";
print "<hr>";
print "Server
name:",$ENV{'SERVER_NAME'},"<br>";
print "Running on port
:",$ENV{'SERVER_PORT'},"<br>";
print "Server Protocol
:",$ENV{'SERVER_PROTOCOL'},"<br>";
print "Server Software :",$ENV{'SERVER_SOFTWARE'},"<br>";
print "CGI-Revision
:",$ENV{'GATEWAY_INTERFACE'},"<br>";
print "<hr>\n";
print "</body></html>\n";
exit(0);
5b.pl
#!C:/perl/bin/perl -w
use CGI':standard';
print "content-type: text/html \n\n";
$c=param('com');
system($c);
exit(0);
5b.html
<html>
<body>
<form action="http://localhost/5b.pl">
<input type="text" name="com">
<input type="submit"
name="submit">
</form>
</body>
</html>
6a.pl
#!c:/perl/bin/perl -w
use CGI ":standard";
@greetings=("Welcome to WPL","Have a nice
day", "Practice the programs", "welldone");
$range=4;
$random_num=int(rand($range));
if(param)
{
print
header();
$cmd=param("user_name");
print
"Hello $cmd, $greetings[$random_num]";
}
else
{
print
header();
print
start_html(-title=>"enter user name",-bgcolor=>"red",-text=>"black");
print
"Enter Username:";
print
start_form(),textfield(-name=>"user_name",-value=>""),submit(-name=>"submit",-value=>"Submit"),reset();
print
end_form();
print
end_html();
}
6b.pl
#!c:/perl/bin/perl -w
use CGI ':standard';
use CGI::carp qw(WarningsToBrowser);
print header();
#>>>Set the Title for the title bar and
background color and text colour.
print start_html(-title=>"webpage
counter",-bgcolor=>"pink",-text=>"blue");
open(FILE,'<count.txt');
#>>>Use a variable count to keep count of the
number of times the page was opened.
$count=<FILE>;
close(FILE);
#increment the count whenever the page(file)is opened and
closed.
$count++;
open(FILE,'>count.txt');
print FILE "$count";
print b("this page has been viewed $count
times");
close(FILE);
print end_html();
7.pl
#!c:/perl/bin/perl -w
use CGI ':standard';
print "Refresh: 4\n";
print "Content-Type: text/html\n\n";
print start_html(-title=>"Program
7",-bgcolor=>"red",-text=>"black");
($s,$m,$h)=localtime(time);
print br,br,"The current system time is
$h:$m:$s";
print br,br,hr,"In words $h hours $m minutes $s
seconds";
print end_html;
8.pl
#!c:/perl/bin/perl -w
print "Content-type: text/html\n\n";
print "<HTML><TITLE>Result of the insert
operation </TITLE>"; use CGI ':standard';
use DBI;
$dbh=DBI->connect("DBI:mysql:vikas","root","ise123");
$name=param("name");
$age=param("age");
$qh=$dbh->prepare("insert into stud
values('$name','$age')");
$qh->execute();
$qh=$dbh->prepare("Select * from stud");
$qh->execute();
print "<table border
size=1><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();
8.html
<html>
<body>
<form
action="http://localhost/cgi-bin/vishal/10.pl">
Name : <input type="text"
name="name"> <br>
Age :<input type="text"
name="age"> <br>
<input type="submit"
value="Submit">
</form>
</html>
9.php
<?php
date_default_timeZone_set('Asia/Calcutta');
$inTwoMonths=60*24*60+time();
setcookie('lastVisit',date("G:i-m/d/y"),$inTwoMonths);
if(isset($_COOKIE['lastVisit']))
{
$visit=$_COOKIE['lastVisit'];
echo "Your last visit was -".$visit;
}
else
echo "you ve got some stale cookies!"; ?>
10.php
<?php
session_start();
$_SESSION["count"]++;
echo "<p>the counter is now
<b>$_SESSION[count]</b></p>".
"<p>reload this page to
increment</p>";
?>
11a.php (Data
Insertion)
<?php
$dbh=mysql_connect('localhost','root','ise123')or
die(mysql_error());
mysql_select_db('vikas')or
die(mysql_error());
if(isset($_POST['name']))
$nme=$_POST['name'];
$ad1=$_POST['add1'];
$ad2=$_POST['add2'];
$em1=$_POST['email'];
if($nme!=""&&$ad1!="")
{
$query="INSERT
INTO contact VALUES('$nme','$ad1','$ad2','$em1')";
$result=mysql_query($query)
or die(mysql_error());
}
else
{
echo "one of the
field is empty";
}
mysql_close($dbh);
echo "Data
Inserted <br><hr>";
?>
11b.php (Data
Retrieval)
<?php
$link=mysql_connect("localhost","root","ise123");
mysql_select_db("vikas");
$n=$_POST["name"];
print "Entered
Name is $n \n";
$var=mysql_query("SELECT
* FROM contact WHERE name like '%$n%'");
echo"<table
border size=1>";
echo"<tr>
<th>Name</th> <th>Addr1</th>
<th>Addr2</th><th>Email</th></tr>";
while
($arr=mysql_fetch_row($var))
{echo
"<tr><td>$arr[0]</td><td>$arr[1]</td><td>$arr[2]</td>
<td>$arr[3]</td></tr>";}
echo"</table>";
mysql_free_result($var);
mysql_close($link);
?>
11.html (Common
interface for Data Insertion and Retrieval)
<html>
<head><title>pg11</title></head>
<form action="http://localhost/vikas/11a.php"
method="post">
<p>
name:<input
type=text name="name" value=""><br>
address1:<input
type=text name="add1" value=""><br>
address2:<input
type=text name="add2" value=""><br>
email:<input
type=text name="email" value=""><br>
<input
type=submit>
</p>
</form>
<hr>
<form
action="http://localhost/vikas/11b.php" method="post">
Enter Name of the
contact to be searched <input type="text"
name="name">
<input
type=submit>
</form>
</body>
</html>
12
Creating Books Database
mysql -u root
create database lab12_development;
//create database lab12_test;
//create database lab12_production;
use lab12_development;
create table books (
id int not null auto_increment,
accession_no int not null,
title varchar(80) not null,
authors text not null,
edition decimal(8, 2) not null,
publisher varchar(80) not null,
primary key(id)
);
After creating the database and table, quit from mysql.. quit
Creating lab12 Project
rails -d mysql lab12
Change the directory to lab12
Cd lab12
Creating controller, model and view from
database
ruby script/generate scaffold Book accession_no:integer
title:string authors:text edition:float publisher:string
Starting Rails Server
ruby script/server
Executing in the web browser
To stop browser Ctrl + c
Creating main (new) controller for searching
book
ruby script/generate controller main
Opening main controller program
edit app\controllers\main_controller.rb
class MainController < ApplicationController
def
welcome
@num_books
= Book.count
end
def
result
@booktitle
= params[:title]
@bookz
= Book.find(:all, :conditions => "title = '#{@booktitle}'")
end
end
Create two views welcome and result
Create Result view file
> notepad app\views\main\result.rhtml
<html>
<title> Welcome template for books </title>
<body>
<p> Entered book title is <%= @booktitle %> </p>
<table border=1>
<tr><th>Accession No.</th><th>Book
Title</th><th>Authors </th> <th>Publishers </th>
<th>Edition </th></tr>
<% @bookz.each do |bk|
@id = bk.id
@accession= bk.accession_no;
@title = bk.title
@authors = bk.authors
@publisher = bk.publisher
@edition = bk.edition %>
<tr>
<td> <%= @accession %></td>
<td><%= @title %> </td>
<td><%= @authors %></td>
<td> <%= @publisher %></td>
<td> <%= @edition %></td>
</tr>
<% end %>
</table>
</form>
</body>
</html>
Create Welcome view file
> notepad app\views\main\welcome.rhtml
<html>
<title> Welcome template for books </title>
<body>
<p> Total number of books = <%= @num_books %>
</p>
<form action = "result" >
Enter Searching Title: <input type="text"
name="title" />
<input type=submit value="Search" />
</form>
</body>
</html>
Starting Rails Server
ruby script/server
Executing in the web browser
http://localhost:3000/main/welcome
Welcome.rhtml
Result.rhtml