New

WEB PROGRAMMING LAB(10CSL78)
File extension
For XHTML programs .html Ex:1a.html
For CSS programs .css Ex :4a.css
For xml programs .xml Ex::abc.xml
For CGI or PERL programs .pl or .cgi Ex: ab.cgi or ab.pl
For PHP programs .php Ex: ab.php
For RUBY programs .erb and .rb eg:index.html.erb
Where to store these file

HTML Files in /var/www/html
XML Files in /var/www/html
CGI or perl Files in /var/www/cgi-bin
PHP Files in /var/www/html
How to start MYSQL

step 1 :mysql -u root -p then press enter button
Step 2:show databases;
Step 3 :use databases;
How to start server

Service httpd start
How to change directories
For HTML Directory
Cd /
Cd /var
Cd /var/www
Cd /var/www/html
For cgi-bin Directory

Cd /
Cd /var
Cd /var/www
Cd /var/cgi-bin
For PHP
Cd /
Cd /var
Cd /var/www
Cd /var/www/html
DEPT OF CSE/ISE
How to check Errors

XHTML/XML programs
Step1:open mozila browser and click on tools tab and then click on erroe console and see line
numbers.
CGI programs
Type ./filename.cgi or /.filename.pl in command prompt
For PHP programs

Type ./filename.php in command prompt.
CREATE TABLE
Create table table_name(col1_name datatype,col2_name datatype);
INSERT VALUES
insert into tale_name values(data);
CREATE NEW DIRECTORY

mkdir directory_name;
DROP TABLE
drop table table_name;
DROP DATABASE;
drop database database_name;
DEPT OF CSE/ISE
1)(a) 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
<html>
<head>
<title>1st lab program</title>
</head>
<body>
<h1>program about finding fib no</h1>
<script type="text/javascript">
var n,fib1=0,fib2=1,fib3,i;
n=prompt("enter the value for n:\n");
if(n<=0)
alert("invalid number");
else
{
if(n==1)
document.write(fib1);
else
document.write(fib1+"<br/>"+fib2);
for(i=3;i<=n;i++)
{
fib3=fib2+fib1;
fib1=fib2;
fib2=fib3;
document.write("<br/>"+fib3);
}}
</script>
</body></html>
DEPT OF CSE/ISE
1)(b) Input: A number n obtained using prompt

Output: A table of numbers from 1 to n and their squares using alert
<html>
<head>
<title>1st lab program</title>
</head>
<body>
<h1>program about finding squre no</h1>
var n,c,i;
n=prompt("enter the value for n:\n");
if(n>0)
{
c="number->squares";
for(i=1;i<=n;i++)
c=(c+"\n"+i+"->"+i*i);
alert(c);
}
else
alert("enter the values greater than 0");
</script>
</body>
</html>
DEPT OF CSE/ISE
DEPT OF CSE/ISE
2)(a) 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.
<html>
<head>
<title>2nd lab program</title>
</head>
<body>
<h1>usn validation</h1>
function f(usn)
{
var pattern=/^[1-4][a-z]{2}[1-4]{2}[a-z]{2}[0-9]{3}$/;
if(!usn.value.match(pattern)||usn.value.length==0)
{
alert("invalid usn\nenter the valid usn");
}
else
{
alert("valid usn");
}
}
</script>
<form action=" ">
<label>enter the usn<input type="text" name="usn" size="25"/></label>
<input type="button" value="validate" onclick="f(usn)"/>
</form>
</body>
</html>
DEPT OF CSE/ISE
DEPT OF CSE/ISE
2)(b) Modify the above program to get the current semester also (restricted
to be a number from 1 to 8)
<html>
<head>
<title>2nd lab program</title>
</head>
<body>
<h1>usn validation</h1>
function f(usn,sem)
{
var patern=/^[1-4][a-z]{2}[1-4]{2}[a-z]{2}[0-9]{3}$/
if(!usn.value.match(patern)||usn.value.length==0)
{
alert("invalid usn\nenter the valid usn");
}
else
{
alert("valid usn");
}
var pattern1=/^[1-8]$/
if(!sem.value.match(pattern1)||sem.value.length==0)
{
alert("invalid sem\nenter the valid sem");
}
else
{
alert("valid sem");
}
}
</script>
<form action=" ">
<label>enter the usn<input type="text" name="usn" size="25"/></label>
<label>enter the sem<input type="text" name="sem" size="25"/></label>
<input type="button" value="validate" Onclick="f(usn,sem)"/>
</form>
</body>
</html>
DEPT OF CSE/ISE
DEPT OF CSE/ISE
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.
<html>
<head>
<title>3rd lab program</title>
<style type="text/css">
.pa1{position:absolute;top:10px;left:0px;border:solid;padding:80px;width:300px;background-
color:blue;}
color:green;}
color:pink;}
</style>
</head>
<body>
var top="p3",dtop,dnewtop,newtop;
function f(newtop)
{
dtop=document.getElementById(top).style
dnewtop=document.getElementById(newtop).style
dtop.zIndex="0";
dnewtop.zIndex="10";
top=newtop;
}
</script>
<p class="pa1" id="p1" OnmouseOver="f('p1')">computer science</p>
<p class="pa2" id="p2" OnmouseOver="f('p2')">information science</p>
<p class="pa3" id="p3" OnmouseOver="f('p3')">chemical engineering</p>
</body>
</html>
DEPT OF CSE/ISE
DEPT OF CSE/ISE
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.
<html>
<head>
<title>3b lab program</title>
<style type="text/css">
.para1{position:absolute;top:10;left:0;border:solid;padding:80;width:300;background-
color:blue;}
color:green;}
color:pink;}
</style>
</head>
<body>
var top="p3",dtop,dnewtop,newtop;
function f(newtop)
{
dtop=document.getElementById(top).style
dnewtop=document.getElementById(newtop).style
dtop.zIndex="0";
dnewtop.zIndex="10";
top=newtop;
}
</script>
<p class="para1" id="p1" OnmouseOver="f('p1')" OnmouseOut="f('p3')">computer science</p>
<p class="para2" id="p2" OnmouseOver="f('p2')" OnmouseOut="f('p3')">information science</p>
<p class="para3" id="p3" OnmouseOver="f('p3')" OnmouseOut="f('p3')">chemical
engineering</p>
</body>
</html>
DEPT OF CSE/ISE
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.
<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="text/css" href="4a.css"?>
<student>
<student1>
<usn>4ci13cs066</usn>
<name>sunisha cs</name>
<noc>cit</noc>
<branch>cse</branch>
<yoj>2013</yoj>
<email>sunisha@gmail.com</email>
</student1>
<student2>
<name>supritha mn</name>
<noc>cit</noc>
<yoj>2013</yoj>
<email>suprithamn@gmail.com</email>
</student2>
<student3>
DEPT OF CSE/ISE
<name>supritha vu</name>
<noc>cit</noc>
<yoj>2013</yoj>
<email>supritha vu@gmail.com</email>
</student3>
</student>
4a.css
student1 {color:green;font-size:24px;}
student2 {color:red;font-size:24px;}
student3 {color:pink;font-size:24px;}
student {font-size:30px;text-align:center;background-color:black;}
usn,name,noc,branch,yoj,email {display:block;}
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

<?xml-stylesheet type="text/xsl" href="4b.xsl"?>
<student>
<student1>
<name>sunisha cs</name>
DEPT OF CSE/ISE
<noc>cit</noc>
<yoj>2013</yoj>
<email>sunisha@gmail.com</email>
</student1>
</student>
4b.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<table border="1">
<tr bgcolor="red">
<th>usn</th>
<th>name</th>
<th>noc</th>
<th>branch</th>
<th>yoj</th>
<th>email</th>
</tr>
<xsl:for-each select="student/student1">
<tr bgcolor="green">
<td><xsl:value-of select="usn" /></td>
<td><xsl:value-of select="name" /></td>
<td><xsl:value-of select="noc" /></td>
<td><xsl:value-of select="branch" /></td>
<td><xsl:value-of select="yoj" /></td>
<td><xsl:value-of select="email" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
DEPT OF CSE/ISE
5. a) Write a Perl program to display various Server Information like Server Name, Server Software,
Server protocol, CGI Revision etc.*/
#!/usr/bin/perl
# CGI program to display server information
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 Software :",$ENV{'SERVER_SOFTWARE'},"<br />";
print "Server Protocol :",$ENV{'SERVER_PROTOCOL'},"<br />";
print "CGI-Revision :",$ENV{'GATEWAY_INTERFACE'},"<br />";
print "<hr />\n";
print "</body></html>\n";
DEPT OF CSE/ISE
5. b) Write a Perl program to accept UNIX command from a HTML form and to display the output
of the command executed..*/
<html>
<head>
<title>Welcome Page</title>
</head>
<center>
<body bgcolor="pink">
<h2> Enter unix command </h2>
<form action="/cgi-bin/5b.cgi" method = "get">
<input type="text" name="cmd">
<input type="submit" value="Submit">
</form>
</body>
</center>
</html>
5b.cgi
#!/usr/bin/perl -w
use CGI':standard';
$cmd = param("cmd");
DEPT OF CSE/ISE
print "content-type:text/html","\n\n";
print "<html><center>\n";
print "<head> <title> Displaying Command </title> </head>\n";
print "<body><h1> Command Description </h1>","\n";
print "<hr />";
if ($cmd)
{
print `$cmd`;
}
else
{
print "Please Enter Command";
}
print "<hr />\n";
print "</body></center></html>\n";
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.
<html>
<head>
<title>Welcome Page</title>
</head>
<center>
<body bgcolor = "orange">
DEPT OF CSE/ISE
<form action="/cgi-bin/6a.cgi" method = "get">

<lable>Enter Text <input type="text" name="name" /></lable>
<input type="submit" value="submit">
</form>
</body>
</center>
6a.cgi
#!/usr/bin/perl -w
use CGI ':standard';
$n=param("name");
@coins = ("Welcome to Web Programming Lab","Have a nice time in lab", "Practice all the
programs","well done Good Day");
$range = 4;
$random_number = rand($range);
if($n)
{ print header();
print start_html(-title=>"User Name",-bgcolor=>"yellow",-text=>"red");
print b("Hello $n, $coins[$random_number]");
print end_html(); }
else { print header();
print start_html(-title=>"User Name",-bgcolor=>"Pink",-text=>"blue");
print "Textbox should not be empty";
print end_html(); }
DEPT OF CSE/ISE
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.
#!/usr/bin/perl -w
use CGI':standard';
print header();
print start_html(-title=>"web counter",-bgcolor=>"pink",-text=>"blue");
use DBI;
$dbh=DBI->connect("DBI:mysql:test","root","p4ssw0rd");
$qh=$dbh->prepare("select * from counter");
$qh->execute();
$count=$qh->fetchrow();
$count++;
print "welcome you!!you are $count user";
$qh=$dbh->prepare("update counter set count=$count");
$qh->execute();
$qh->finish();
$dbh->disconnect();
print end_html();
DEPT OF CSE/ISE
DEPT OF CSE/ISE
7) Write a Perl program to display a digital clock which displays the current
time of the server.
#!/usr/bin/perl -w
use CGI':standard';
print "Refresh:1\n";
print header();
print start_html(-title=>"system clock",-bgcolor=>"black", -text=>"white");
print "<center>";
($seconds,$minutes,$hour)=localtime(time);
print "SYSTEM TIME in c Hour:Minutes:Seconds = $hour:$minutes:$seconds";
print "</center>";
print end_html();
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.
<html>
<head>
<title>Person inofrmation</title>
</head>
<body bgcolor="yellow">
<center>
<p>Program to Store User Name and Age into Database and Displaying in Browser <p>
<form action = "/cgi-bin/8.cgi" method = "post">
<label>Enter your Name<input type = "text" name = "name" size = "15" /></label><br />
<label>Enter your Age<input type = "text" name = "age" size = "15" /></label><br /><br />
<label><input type = "submit" value = "submit" /></label>
<label><input type = "reset" value = "reset" /></label>
DEPT OF CSE/ISE
</form>
</center> </body></html>
8.cgi
#!/usr/bin/perl -w
use CGI':standard';
print header();
print start_html(-title=>"web page counter",-bgcolor=>"skyblue",-text=>"black");
use DBI;
print "<center>";
$name = param("name");
$age = param("age");
if($name eq "" || $age eq "")
{
print "Text Box Should not be Empty\n";
}
else
{
$dbh=DBI->connect("DBI:mysql:DB","root");
$qh=$dbh->prepare("insert into information values('$name','$age')");
$qh->execute();
$qh =$dbh->prepare("select * from information");
$qh->execute();
print "<table border = 1>
<tr>
<th>Name</th>
<th>Age</th>
</tr>";
while(($name1,$age1)=$qh->fetchrow())
{
print "<tr>
<td>$name1</td>
<td>$age1</td>
</tr>";
}
print "</table>";
print "</center>";
$qh->finish();
$dbh->disconnect();
}
print end_html();
DEPT OF CSE/ISE
DEPT OF CSE/ISE
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.
<?php
$into = 60* 60 *24+time();
setcookie('lastVisit', date("d/m/y h:i:s A"), $into);
if(isset($_COOKIE['lastVisit']))
{
$visit = $_COOKIE['lastVisit'];
echo "Your last visit was - ".$visit;
}
else
echo "You've got some stale cookies!";
?>
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.*/
<?php
session_start();
session_register("count");
if(!isset($_SESSION))
{
echo "Counter Initilised\n";
}
else
{
DEPT OF CSE/ISE
$_SESSION["count"]++;
}
echo "Counter Now $_SESSION[count]";
?>
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.*/
<html>
<head>
<title>User Info</title>
</head>
<body bgcolor="yellow">
<center>
<form action="11store.php" method="POST">
<h1>Please Enter the Details</h1>
<label>Enter Name:<input type="text" name="name"/></label> <br />
<label>Enter Add1:<input type="text" name="add1"/></label> <br />
<label>Enter Add2:<input type="text" name="add2"/></label> <br />
<label>Enter Email:<input type="text" name="email"/></label> <br />
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</form><hr/>
<form action="/php/11search.php" method="post">

<h1>Search User</h1>
<label>Enter Name:<input type="text" name="name"/></label>
DEPT OF CSE/ISE
<input type="Submit" value="Submit"/>

</form>
</center>
</body>
</html>
11store.php
<?php
mysql_connect('localhost','root', ' ') or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
$name=$_POST['name'];
$add1=$_POST['add1'];
$add2=$_POST['add2'];
$email=$_POST['email'];
if($name==''||$add1==''||$add2==''||$email=='')
echo "No field can be empty";
else
{
mysql_query("insert into person values(,'$name','$add1','$add2','$email')");
echo "Data Inserted Successfully!";
}
?>
11search.php
<?php
mysql_connect('localhost','root',' ') or die(mysql_error());
mysql_select_db("dbperson") or die(mysql_error());
$name=$_POST['name'];
$result=mysql_query("select * from person where name='$name'");
echo "<table border=1>
<tr>
<th>Name</th>
<th>Add1</th>
<th>Add2</th>
<th>Email</th>
</tr>";
while($row=mysql_fetch_array($result))
{
$name=$row['name'];
$add1=$row['add1'];
$add2=$row['add2'];
$email=$row['email'];
echo "<tr>
<td>$name</td>
<td>$add1</td>
<td>$add2</td>
<td>$email</td>
</tr>";
DEPT OF CSE/ISE
}
echo "</table>";
?>
DEPT OF CSE/ISE
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 Ruby program
Step 1: mkdir rails_app and press enter
step 2: cd rails_app and press enter.
step 3: Open new terminal and start mysql server
3.1 mysql -u root -p and press enter.
STEP 4 :come back to rails_app terminal and type following code
rails new books -d msyql and press enter
step 5: cd books and press enter
step 6:cd config and press enter
step 7 nano databse.yml and set password of mysql(p4ssword) and press enter
step 7:rake db:create and press enter
step 8:rails generate controller books index and press enter
step 9:rails generate model book access_no:integer title:string author:string edition:integer
publisher:string and press enter
step 10:rake db:migrate and press enter
step 11 :cd app/views/books and press enter
step 11.a:then nano index. Html.erb and then type code and then save the file after that exit
document.(ctrl+o-->save then press enter and ctrl+x-->for exit)
step 11.b : nano search. Html.erb and then type code and then save the file after that exit
step 12 :cd ../.. and then ls and press enter
step 13 :cd controllers and press enter
step 14: nano books_controller.rb and then type code and then save the file after that exit
step 15: cd .. and again type cd ...
step 16 :cd config and press enter
step 17:nano routes.rb and then type code and then save the file after that exit document.
(ctrl+o-->save then press enter and ctrl+x-->for exit)
step 18:rails s(server should be working inorder to add books related information)
step 18.a:go to mozila or google chrome and type localhost:3000/books/index in url address
step 19:Fill all the fields for add book and then search the book which you add as title
step 20:it will dispaly book if it present otherwise no book found message will get.
INDEX.HTML.ERB
<h1>Books#index</h1>
<h1>Books</h1>
<div id="container">
<div id="addbox" style="margin-left:8em;margin-right: 10em;background-color: grey;">
<h3 style="text-align: center;">Add a book</h3>
<%= form_tag("/books/add", :method=>"post") do %>
Access No:<%= text_field_tag(:b_access_no) %><br>
Title: <%= text_field_tag(:b_title) %>
DEPT OF CSE/ISE
<br>Author: <%= text_field_tag(:b_author) %>

<br>Edition: <%= text_field_tag(:b_edition) %>
<br>Publisher: <%= text_field_tag(:b_publisher) %>
<center><br><%= submit_tag("Add Book") %><center>
<% end %>
</div>
<div id="addbox" style="margin-left:8em;margin-right: 10em;background-color: grey;">
<h3 style="text-align: center;">Search for a book</h3>
<%= form_tag("/books/search", :method=>"post") do %>
Title: <%= text_field_tag(:bs_title) %>
<center><br><%= submit_tag("Search") %><center>
<% end %>
</div>
</div>
SEARCH.HTML.ERB
<h1>Search Result</h1>
<div id="container">
<div id="srchbox" style="width: 20em;margin-left:8em;margin-right: 10em;background-
color: white;">
<table border=1>
<% @t=Book.find_by_title(params[:bs_title]) %>
<tr>
<th>Access No.</th>
<th>Title</th>
<th>Author</th>
<th>Edition</th>
<th>Publisher</th>
</tr>
<tr>
<td> <%= @t.access_no %> </td>
<td> <%= @t.title %> </td>
<td> <%= @t.author %> </td>
<td> <%= @t.edition %> </td>
<td> <%= @t.publisher %> </td>
</tr>
</table>
</div>
</div>
<br><br>
<a href="/books/index">Back</a>
DEPT OF CSE/ISE
BOOK_CONTROLLER
class BooksController < ApplicationController
def index
end
def add
Book.create(:access_no=> params[:b_access_no],:title=> params[:b_title],:author=>
params[:b_author],:edition=> params[:b_edition],:publisher=> params[:b_publisher])
redirect_to :action => 'index'
end
def search
end
end
ROUTES.RB
Books::Application.routes.draw do
get "books/index" => "books#index", :as => :index
post "books/add" => "books#add", :via => :post
post "books/search" => "books#search", :via => :post
# The priority is based upon order of creation:
# first created -> highest priority.
# Sample of regular route:
# match 'products/:id' => 'catalog#view'
# Keep in mind you can assign values other than :controller and :action
# Sample of named route:
# match 'products/:id/purchase' => 'catalog#purchase', :as => :purchase
# This route can be invoked with purchase_url(:id => product.id)
# Sample resource route (maps HTTP verbs to controller actions automatically):
# resources :products
# Sample resource route with options:
# resources :products do
# member do
#
#get 'short'
#
#post 'toggle'
# end
#
# collection do
#
#get 'sold'
# end
# end
# Sample resource route with sub-resources:
# resources :comments, :sales
# resource :seller
# end
# Sample resource route with more complex sub-resources
DEPT OF CSE/ISE
# resources :comments
# resources :sales do
#
#get 'recent', :on => :collection
# end
# end
# Sample resource route within a namespace:
# namespace :admin do
# # Directs /admin/products/* to Admin::ProductsController
# # (app/controllers/admin/products_controller.rb)
# resources :products
# end
# You can have the root of your site routed with "root"
# just remember to delete public/index.html.
# root :to => 'welcome#index'
# See how all your routes lay out with "rake routes"
# This is a legacy wild controller route that's not recommended for RESTful applications.
# Note: This route will make all actions in every controller accessible via GET requests.
# match ':controller(/:action(/:id))(.:format)'
end
DEPT OF CSE/ISE
DEPT OF CSE/ISE
DEPT OF CSE/ISE

New

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

New

Hochgeladen von

Copyright:

Verfügbare Formate

WEB PROGRAMMING LAB(10CSL78)

Where to store these file

How to start MYSQL

How to start server

For cgi-bin Directory

How to check Errors

For PHP programs

CREATE NEW DIRECTORY

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

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

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

<form action="/cgi-bin/6a.cgi" method = "get">

<form action="/php/11search.php" method="post">

<input type="Submit" value="Submit"/>

<br>Author: <%= text_field_tag(:b_author) %>

Das könnte Ihnen auch gefallen