Web Manual

WEB PROGRAMMING
1. Develop and demonstrate a XHTML document that illustrates the use external
style sheet, ordered list, table, borders, padding, color, and the <span> tag.
// mystyle.css
p,table,li, { font-family: "lucida calligraphy", arial, 'sans serif'; margin-left:10pt; } p { word-spacing: 5px; } body { background-color:rgb(200,255,205); } p,li,td { font-size:75%; } td { padding:0.5cm; } th { text-align:center; font-size: 85%; } h1, h2, h3, hr {color:#483d8b;} table { border-style:outset; background-color: rgb(100,255,105); } li {list-style-type:lower-roman;} span { color:blue; background-color:pink; font-size: 29pt; font-style: italic; font-weight: bold; }
http://sites.google.com/site/ncetians
Page 1
<?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> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <title> lab program1 </title> </head> <body> <h1> this header is 36 pt</h1> <h2> this header is blue</h2> <p>this paragraph has a left margin of 50 pixels</p> <table border="4" width ="5%"> <tr> <th width="204">name </th> <th>email</th> <th>ph num</th> </tr> <tr> <td width="204">Vishu</td> <td>vishu@gmail.com</td> <td>98448</td> </tr> <tr> <td width="204">Aditya</td> <td>adi@rediffmail.com</td> <td>99868</td> </tr>
Page 2
<tr> <td width="204">Samu</td> <td>sam@hotmail.com</td> <td>96321</td> </tr> <tr> <td width="204">Prad</td> <td>bsp@yahoo.com</td> <td>97420</td> </tr></table> <hr> <ol> <li> ISE </li> <li> CSE </li> <li> ECE </li> </ol> <p> <span>this is a text.</span> this is a text.this is a text.this is a text.this is a text.this is a text.this is a text.this is a text.this is a text. <span>this is a text.</span> </p> </body> </html>
2. Develop and demonstrate a XHTML file that includes Javascript script for the following problems:
http://sites.google.com/site/ncetians Page 3
a) Input: A number n obtained using prompt Output: The first n Fibonacci numbers
<?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> <body> <head> <title> lab program 2 </title> </head> <h1>Calculating the fibonacci numbers</h1> <hr> <script type ="text/javascript"> var n,a=0,b=1,i,c; n=prompt("enter a number "," "); if(n==0) alert("invalid no."); else { if(n==1) document.write(a); else document.write(a+"\n"+b); for(i=2;i<n;i++) { c=a+b;
Page 4
a=b; b=c; document.write(c+" "); } } </script> </body> </html>
b) Input: A number n obtained using prompt Output: A table of numbers from 1 to n and their squares using alert
<?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> <body> <head> <title> lab prog 2b</title> </head> <h1> printing numbers & calculating their squares</h1> <hr> <script type = "text/javascript"> var n,i; n=prompt("enter a no"," "); c="NUM square" for(i=1;i<=n;i++)
Page 5
{ c=c+"\n"+i+"--->"+" "+i*i+"\n"; } alert(c) </script> </body> </html>
3. Develop and demonstrate a XHTML file that includes Javascript script that uses functions for the following problems: a. Parameter: A string Output: The position in the string of the left-most vowel
<?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> <body bgcolor=orange> <head> <title>vowel program </title> </head> <script type="text/javascript"> function disp(str) { var reg=/^[a-zA-Z]+$/; if(!str.value.match(reg)) { alert("enter only alphabet"); return false;
Page 6
} var i,b; b=str.value;
for(i=0;i<20;i++) {
if(b[i]=="a" ||b[i]=="e"||b[i]=="i"||b[i]=="o"||b[i]=="u") { alert(b[i]+" is the first vowel found in postion "+(i+1)); exit(0); } } if(i>=20) alert("vowel not found"); } </script> <form> <h1>vowel</h1> <hr> <input type="text" name="str" size="30" maxsize="20"> <input type="button" value="click" onclick="disp(str)"> </form> </body> </html>
Page 7
b) Parameter: A number Output: The number with its digits in the reverse order.
<?xml version="1.0" encoding="utf-8"?> <DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.1//EN"\ "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>lab program3b</title> </head> <body bgcolor=green> <h1>Print numbers in reverse order</h1> <hr> <script type="text/javascript"> var n, r, res=0; function disp(str) {
n=str.value; while(n!=0) { r=n%10; n=Math.floor(n/10); res=res*10+r; }
Page 8
alert("reverse of string is:"+res); } </script> <form> <input type="text" name="str" size="30"> <input type="button" value="click" onclick="disp(str)"> </form> </body> </html>
4. 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 uppercase 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.
<?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtm111/DTD/xhtm111.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>lab prog 4a</title> </head> <body> <script type="text/javascript"> function func(usn) { var reg=/[1-4][A-Z][A-Z][0][5-9][A-Z][A-Z][0-9][0-9][0-9]/; if(!usn.value.match(reg)||usn.value.length==0) {
Page 9
alert(" Invalid! enter a valid usn"); return false; } else alert("Its valid"); } </script> <form> ENTER THE USN: <input type="text" name="usn" size="30"> <input type="button" value="click" onclick="func(usn)"> </form> </body> </html>
4 b) Modify the above program to get the current semester also (restricted to be a number from 1 to 8)
<?xml version = "1.0" encoding = "utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtm111/DTD/xhtm111.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>lab prog 4b</title> </head> <body> <script type="text/javascript"> function disp(str) {
Page 10
var r; var reg=/[1-4][A-Z][A-Z][0][6-9][A-Z][A-Z][0-9][0-9][0-9]/; if(!str.value.match(reg)||str.value.length==0) { alert(" Invalid! enter a valid usn"); return false; } else alert("Its valid"); var d = new Date(); var y= d.getFullYear(); var m= d.getMonth();
var sm=200+str.value[4];
res=y-sm; if(m<7) { r=res*2;
alert("semister:"+r); } else {r= res*2+1; alert("semester:"+r); }
Page 11
} </script> <form> ENTER THE USN: <input type="text" name="str" size="30"> <input type="button" value="click" onclick="disp(str)"> </form> </body> </html>
5. 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.
<?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> <script type="text/javascript"> var top='125'; function toTop(newTop) { domTop=document.getElementById(top).style; domNew=document.getElementById(newTop).style; domTop.zIndex="0"; domNew.zIndex="10"; top=newTop;
Page 12
} </script> <style type="text/css"> .para1{position:absolute;top:10;left:120;z-index:0;border:solid;padding:80; width:300;backgroundcolor:aqua;} .para2{position:absolute;top:50;left:150;z-index:0;border:solid;padding:80; width:300;backgroundcolor:yellow; } .para3{position:absolute;top:100;left:180;z-index:0;border:solid;padding:80; width:300;backgroundcolor:red; } </style> <body> <p> <pre><p class="para1" id="123" onmouseover="toTop('123')"> !!! VISHU !!!
<p class="para3" id="125" onmouseover="toTop('125')"> *** ISE ***
<p class="para2" id="124" onmouseover="toTop('124')"> ### NCET ###
</p> </body> </html>
5 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 bottom.
<?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> <script type="text/javascript">
Page 13
var top='125'; 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;backgroundcolor:yellow;} .para2{position:absolute;top:50;left:150;z-index:0;border:solid;padding:80; width:300;backgroundcolor:red; } .para3{position:absolute;top:150;left:180;z-index:0;border:solid;padding:80; width:300;backgroundcolor:pink; } </style> <body> <p> <pre><p class="para1" id="123" onmouseover="toTop('123')" onmouseout="toTop(124)"> !!!!! VISHU !!!!! <p class="para3" id="125" onmouseover="toTop('125')"onmouseout="toTop(124)"> ***** <p class="para2" id="124" onmouseover="toTop('124')"onmouseout="toTop(124)"> ##### </p> </body> </html> ISE *****
NCET #####
6 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.
//6a.css
stud-info { display:block; color:blue; font-style:italic; font-size:200%;} student { display : block; background-color:aqua;font-size:100%; } stud1 {display : block; color:blue; } stud2 {display : block; color:red;} stud3 {display : block; color:black;} usn,name,noc,branch,yoj,eid { display : block;}
//6a.xml
<?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/css" href="6a.css" ?>
<student>PROGRAM 6a <stud-info>Student Information</stud-info>
<stud1> <usn>USN:1NC06IS058</usn> <name>Name:Vishu</name> <noc>COLLEGE:Ncet</noc> <branch>Branch:ISE</branch> <yoj>YOJ:2006</yoj> <eid>EID:vishu@gmail.com</eid>
Page 15
</stud1> -------------------------------------------<stud2> <usn>USN:1NC06IS059</usn> <name>Name:Aditya</name> <noc>COLLEGE:Ncet</noc> <branch>Branch:ISE</branch> <yoj>YOJ:2006</yoj> <eid>EID:aditya@gmail.com</eid> </stud2> ---------------------------------------------<stud3> <usn>USN:1NC06IS062</usn> <name>Name:Samarth</name> <noc>COLLEGE:Ncet</noc> <branch>Branch:ISE</branch> <yoj>YOJ:2006</yoj> <eid>EID:sam@gmail.com</eid> </stud3> </student>
6. b) Create an XSLT style sheet for one student element of the above document and use it to create a display of that element.
//6b.xml
<?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet type="text/xsl" href="6b.xsl" ?>
Page 16
<stud> <title>prog 6b</title> <usn>1NC06IS058</usn> <name>Vishwesh M</name> <coll>Ncet</coll> <branch>ISE</branch> <yoj>2006</yoj> <eid>vishu363@gmail.com</eid> </stud>
//6b.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="/"> <span style="font-size:20pt;color:blue"> ===> </span> <span><xsl:value-of select="stud/title" /><br /></span>
<span style="font-size:20pt;color:blue">Usn
:</span>
<span><xsl:value-of select="stud/usn" /><br /></span>
<span style="font-size:20pt;color:blue">Name :</span> <span><xsl:value-of select="stud/name" /><br /></span>
Page 17
<span style="font-size:20pt;color:blue">Branch :</span> <span><xsl:value-of select="stud/branch" /><br /></span>
<span style="font-size:20pt;color:blue">Yoj
:</span>
<span><xsl:value-of select="stud/yoj" /><br /></span>
<span style="font-size:20pt;color:blue">college:</span> <span><xsl:value-of select="stud/coll" /><br /></span>
</xsl:template> </xsl:stylesheet>
7. a) Write a Perl program to display various Server Information like Server Name, Server Software, Server protocol, CGI Revision etc.
#!/usr/bin/perl print "content-type:text/html \n\n"; print"<html> <body><h3>About the server</h3><hr> Server Name: $ENV{'SERVER_NAME'}<br/> Server Port: $ENV{'SERVER_PORT'}<br/> Server Software: $ENV{'SERVER_SOFTWARE'}<br/> Server Protocol: $ENV{'SERVER_PROTOCOL'}<br/> CGI VERSION : $ENV{'GATEWAY_INTERFACE'} <hr></body> </html>";
Page 18
7. b) Write a Perl program to accept UNIX command from a HTML form and to display the output of the command executed.
 <html> <body> <form action="./cgi-bin/7b.cgi" method="get"> <input type="text" name="cmd"> </br> <input type="submit" value="submit"> </form> </body> </html>
# 7b.pl #!/usr/bin/perl use CGI':standard'; print "content-type:text/html \n\n"; $c=param('cmd'); system($c); exit(0);
8. a) Write a Perl program to accept the User Name and display a greeting message randomly chosen from a list of 4 greeting messages.
#!/usr/bin/perl use CGI':standard'; print "content-type:text/html \n\n"; $input=param("name"); print "<html><body><h3>hi,$input</h3>";
Page 19
my @msgs=("Good","Welcome","Fine","Hello"); print "<h3>the message received is:</h3>"; print $msgs [int rand scalar @msgs]; print "</body></html>";
8. 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 use CGI':standard'; print header(); print start_html(-title=>"Webpage Counter",-bgcolor=>"yellow",-text=>"blue"); open(FILE,'< count.txt'); $count=<FILE>; close(FILE); $count++; open(FILE,'> count.txt'); print FILE "$count"; print b("This page has been viewed $count times"); close(FILE); print end_html();
9. Write a Perl program to display a digital clock which displays the current time of the server.
#!/usr/bin/perl use CGI':standard'; print "refresh:1\n"; print "content-type:text/html \n\n";
Page 20
print start_html(-title=>"program display time",-bgcolor=>"aqua",-text=>"red"); ($s,$m,$h)=localtime(time); print br,b"The system time is $h:$m:$s"; print br,br,b"In words $h hours $m minutes $s seconds"; print end_html();
10. 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. #10.cgi
#! /usr/bin/perl 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:vishu","root); $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();
Page 21
print"</HTML>";
10.html
<html> <body> <form action="/cgi-bin/10.cgi" method="get"> Name : <input type="text" name="name"> <br> Age :<input type="text" name="age"> <br> <input type="submit" value="Submit"> </form> </html>
Method To Create Database:

Mysql; Create database vishu; Use vishu; Create table stud(name varchar(10), age int); Insert into stud values(Aditya,21); exit
11. 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 $inTwoMonths=60*60*24*60+time(); setcookie('lastVisit',date("G:i - m/d/y"),$inTwoMonths); if(isset($_COOKIE['lastVisit'])) { $visit=$_COOKIE['lastVisit'];
Page 22
echo "Your last visit was - ".$visit; } else echo "You've got some stale cookies!"; ?>
12. 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(); if(isset($_SESSION['views'])) $_SESSION['views']=$_SESSION['views']+1; else $_SESSION['views']=1; echo "views=".$_SESSION['views']; echo " <br/>";
echo "reload this page to increment"; ?>
13. 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.
Compiling steps:
For HTML- chmod 777 file.html For Perl- chmod 777 file.cgi or chmod 777 file.pl For PHP- chmod 777 file.php In case of server not found error type, Service httpd start Execution: In Browser, http://localhost/file.html and http://localhost/file.php
http://localhost/cgi-bin/file.cgi
Page 24

Web Manual

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

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

Web Manual

Hochgeladen von

Copyright:

Verfügbare Formate

WEB PROGRAMMING

a=b; b=c; document.write(c+" "); } } </script> </body> </html>

{ c=c+"\n"+i+"--->"+" "+i*i+"\n"; } alert(c) </script> </body> </html>

} var i,b; b=str.value;

n=str.value; while(n!=0) { r=n%10; n=Math.floor(n/10); res=res*10+r; }

res=y-sm; if(m<7) { r=res*2;

alert("semister:"+r); } else {r= res*2+1; alert("semester:"+r); }

<p class="para3" id="125" onmouseover="toTop('125')"> * ISE *

<p class="para2" id="124" onmouseover="toTop('124')"> ### NCET ###

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

<student>PROGRAM 6a <stud-info>Student Information</stud-info>

<stud1> <usn>USN:1NC06IS058</usn> <name>Name:Vishu</name> <noc>COLLEGE:Ncet</noc> <branch>Branch:ISE</branch> <yoj>YOJ:2006</yoj> <eid>EID:vishu@gmail.com</eid>

<span><xsl:value-of select="stud/usn" /><br /></span>

<span style="font-size:20pt;color:blue">Name :</span> <span><xsl:value-of select="stud/name" /><br /></span>

<span style="font-size:20pt;color:blue">Branch :</span> <span><xsl:value-of select="stud/branch" /><br /></span>

<span><xsl:value-of select="stud/yoj" /><br /></span>

<span style="font-size:20pt;color:blue">college:</span> <span><xsl:value-of select="stud/coll" /><br /></span>

Method To Create Database:

echo "reload this page to increment"; ?>

Das könnte Ihnen auch gefallen