web programming laboratory (10csl78) semester vii web ...€¦ · web programming laboratory...

22
WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 1 SEMESTER VII WEB PROGRAMMING LABORATORY Subject Code: 10CSL78 I.A. Marks: 25 Hours/Week : 03 Exam Hours: 03 Total Hours : 42 Exam Marks: 50 1. 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 b) Input: A number n obtained using prompt Output: A table of numbers from 1 to n and their squares using alert. 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). 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. 4. a) Design an XML document to store information about a student in an engineering college affiliated to VTU. The information must include 100 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. 5. a) Write a Perl program to display various Server Information like Server Name, Server Software, Server protocol, CGI Revision etc. b) Write a Perl program to accept UNIX command from a HTML for and to display the output of the command executed.

Upload: others

Post on 16-May-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 1

SEMESTER VII

WEB PROGRAMMING LABORATORY

Subject Code: 10CSL78 I.A. Marks: 25

Hours/Week : 03 Exam Hours: 03

Total Hours : 42 Exam Marks: 50

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

b) Input: A number n obtained using prompt

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

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

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.

4. a) Design an XML document to store information about a student in an engineering college affiliated to VTU. The information must include 100 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.

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

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

b) Write a Perl program to accept UNIX command from a HTML for and to

display the output of the command executed.

Page 2: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 2

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.

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

of the server.

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.

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.

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.

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.

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.

Page 3: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 3

Lab Instructions

Steps to Execute XHTML Program.

1. Create a folder by your name in any directory

2. Open notepad and type the program and save the file with .html extension in your

folder.

3. Then open the Internet Explorer /Mozilla web browser and type

the URL as directoryname:\foldername\filename.html

Ex: E:\cse\data.html

4. Finally output will display.

Steps to Execute XML using XSLT & CSS Program

1. Create a folder by your name in any directory

2. Open notepad and type the XML program and save the file with .xml extension in your

folder.

3. Open notepad and type the XSL/CSS program and save the file with .xsl extension for

XSLT

program & save the file with .css extension for CSS program in your folder.

4. Then open the Internet Explorer /Mozilla web browser and type

the URL as directoryname:\foldername\filename.xml

Ex: E:\cse\pgmname.xml

5. Finally output will display.

Steps to run perl and Php programs #su #password: server

# cd /var/www/cgi-bin

# vi program_name.pl

All perl programs should be saved under .pl extension vi 6a.pl

save and Quit

#chmod 777 6a.pl //change the file permission before execution

To see the output go to browser and in the address bar type http://localhost/cgi-bin/6a.pl

Page 4: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 4

Steps to run MYSQL programs [root@localhost ~]# service httpd start

Starting httpd:

[root@localhost ~]# service mysqld start

Starting MySQL: [ OK ]

[root@localhost ~]# mysql

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 5 to server version: 3.23.58

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> create database program11;

Query OK, 1 row affected (0.00 sec)

mysql> use program11;

Database changed

mysql> create table person(name varchar(25),address1

varchar(100),address2 varchar(100),email varchar(25));

Query OK, 0 rows affected (0.00 sec)

mysql> describe person;

+----------+--------------+------+-----+---------+-------+

| Field | Type | Null | Key | Default | Extra |

+----------+--------------+------+-----+---------+-------+

| name | varchar(25) | YES | | NULL | |

| address1 | varchar(100) | YES | | NULL | |

| address2 | varchar(100) | YES | | NULL | |

| email | varchar(25) | YES | | NULL | |

+----------+--------------+------+-----+---------+-------+

4 rows in set (0.00 sec)

#chmod 777 8a.pl //change the file permission before execution

Page 5: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 5

1. 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> program 1a:the first n fibonacci number </title> </head>

<body>

<script type="text/javascript">

var a=0;

var b=1;

var c,i;

var n=prompt("enter n:"," ");

while(n<=0)

{

alert("enter positive value");

n=prompt("enter n:"," ");

}

document.write("fibonacci series....<br />");

document.write(a,"<br />");

document.write(b,"<br />");

for(i=0;i<n-2;i++)

{

c=a+b;

document.write(c,"<br />");

a=b;

b=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 <html>

<body>

<script type="text/javascript">

var num = prompt("enter positive number:\n"," ");

msgstr="number and its squares are:\n";

for(i=1;i<=num;i++)

{

msgstr=msgstr+i+"-"+i*i+"\n";

}

alert(msgstr);

</script>

</body>

</html>

Page 6: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 6

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.

<html>

<head>

<title>2a.html</title>

<head>

<script type='text/javascript'>

function formValidator()

{

var usn=document.getElementById('req1');

if(isCorrect(usn))

{

return true;

}

return false;

}

function isCorrect(elem1)

{

alphaExp1=/[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/

if(elem1.value.length==0)

{

alert("us number is empty");

elem1.focus();

return false;

}

else if(!elem1.value.match(alphaExp1))

{

alert("usn number should be in DAADDAAADDD format");

elem1.focus();

return false;

}

alert("usn number is correct");

return true;

}

</script>

</head>

<body>

<form onsubmit='return formValidator()'>

enter ur usn in daaddaaddd format:

<input type='text' id='req1'/>

<input type='submit' value='check field'/>

</form>

</body> </html>

Page 7: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 7

b) Modify the above program to get the current semester also (restricted to be a

number from 1 to 8).

<html>

<head>

<script type="text/javascript">

function formValidator()

{

var usn=document.getElementById('req1');

var sem=document.getElementById('req2');

if(isCorrect(usn))

{

if(isPerfect(sem))

return true;

}

return false;

}

function isPerfect(elem2)

{

var alphaExp2=/^[1-8]$/

if(elem2.value.length==0)

{

alert("semester number is empty");

elem2.focus();

return false;

}

else if(!elem2.value.match(alphaExp2))

{

alert("invalid semester number");

elem2.focus();

return false;

}

alert("semester number is correct");

return true;

}

function isCorrect(elem1)

{

var alphaExp1=/^[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]$/;

if(elem1.value.length==0)

{

alert("usn num is empty");

elem1.focus();

return false;

}

else if(!elem1.value.match(alphaExp1))

{

Page 8: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 8

alert("us number should be in DAADDAADDD format");

elem1.focus();

return false;

}

alert("us number is correct");

return true;

}

</script>

</head>

<body>

<form onsubmit='return formValidator()'>

Enter your usn in DADDAADDD format;

<input type='text'id='req1'/><br/>

Enter ur sem is IN [1-8]format

<input type='text'id='req2'/><br/>

<input type='submit' value='checkfield'/>

</form>

</body>

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>the stacking order</title>

<style type="text/css">

.layer1style

{

border: solid thick black;

padding: 1cm;

width: 300px;

background-color:yellow;

position: absolute;

top:100px;

left:200px;

z-index:0;

}

.layer2style

{

border:solid thick red;

padding:1cm;

Page 9: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 9

width:300px;

background-color:BLUE;

position:absolute;

top:120px;

left:220px;

z-index:0;

}

.layer3style

{

border:solid thick green;

padding:1em;

width:300px;

background-color:purple;

position:absolute;

top:140px;

left:240px;

z-index:0;

}

</style>

<script type="text/javascript">

var topLayer="layer3";

function mover(toTop)

{

var oldTop=document.getElementById(topLayer).style;

var newTop=document.getElementById(toTop).style;

oldTop.zIndex="0";

newTop.zIndex="10";

topLayer=document.getElementById(toTop).id;

}

</script>

</head>

<body>

<h2>stacking on paragraphs</h2>

<div style="z-index: 10;" class="layer1style" id="layer1" onmouseover="mover('layer1')">

the lives of most inhabitants of industrialozed countries

,as well as some unindustrialized countries have been

changed forever by the advent of www

</div>

<div style="z-index: 2;" class="layer2style" id="layer2" onmouseover="mover('layer2')">

the www may seem like magic,untill u understand

how it works.The web is accesed through browser

</div>

<div style="z-index:0;" class="layer3style" id="layer3" onmouseover="mover('layer3')">

windows xp provides many ways for you to communicate with friends,

Page 10: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 10

co workers and with rest of the world

</div>

</body>

</html>

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>the stacking order</title>

<style type="text/css">

.layer1style

{

border:solid thick black;

padding:1em;

width:300px;

background-color:yellow;

position: absolute;

top:200px;

left:400px;

z-index:1;

}

.layer2style

{

border:solid thick blue;

padding:1em;

width:300px;

background-color:red;

position:absolute;

top:220px;

left:420px;

z-index:2;

}

.layer3style

{

border:solid thick brown;

padding:1em;

width:300px;

background-color:orange;

position:absolute;

top:240px;

left:440px;

z-index:3;

Page 11: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 11

}

</style>

<script type="text/javascript">

var toplayer="layer3";

var origpos;

function mover(totop,pos)

{

var newtop=document.getElementById(totop).style;

newtop.zIndex="10";

toplayer=document.getElementById(totop).id;

origpos=pos;

}

function moveBack()

{

document.getElementById(toplayer).style.zIndex=origpos;

}

</script>

</head>

<body>

<br />

<br />

<h3>

stacking on paragraphs and moved from top stacking position it returns

to its original position

</h3>

<div style="z-index:1;" class="layer1style" id="layer1"

onmouseover="mover('layer1','1')"

onmouseout="moveBack()">

the lives of most inhabitants of industrialozed countries

,as well as some unindustrialized countries have been

changed forever by the advent of www

</div>

<div style="z-index:2;" class="layer2style" id="layer2"

onmouseover="mover('layer2','2')"

onmouseout="moveBack()">

the www may seem like magic,untill u understand

how it works.The web is accesed through browser

</div>

<div style="z-index:3;" class="layer3style" id="layer3"

onmouseover="mover('layer3','3')"

onmouseout="moveBack()">

windows xp provides many ways for you to communicate with friends,

co workers and with rest of the world

</div>

Page 12: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 12

<script type="text/javascript">

</script>

</body>

</html>

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.

4a.xml

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="4a.css"?>

<students>

<vtu>

<usn> 4jd10cs044 </usn>

<name> amar</name>

<college>bit</college>

<branch>CS</branch>

<YOJ>2008</YOJ>

<email>[email protected]</email>

</vtu>

<vtu>

<usn> 4jd10cs046 </usn>

<name> leela</name>

<college>bit</college>

<branch>CS</branch>

<YOJ>2008</YOJ>

<email>[email protected]</email>

</vtu>

<vtu>

<usn> 4jd10cs048 </usn>

<name> manu</name>

<college>bit</college>

<branch>CS</branch>

<YOJ>2008</YOJ>

<email>[email protected]</email>

</vtu>

</students>

Page 13: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 13

4a.css

vtu{display:block;

margin-top:15px;

color:blue;

}

name{display:block;

color:green;

font-size:16pt

}

college{display:block;

color:green;

font-size:12pt

}

branch{display:block;

color:green;

font-size:12pt

}

YOJ{display:block;

color:green;

font-size:12pt

}

email{display:block;

color:green;

font-size:12pt

}

usn{display:block;

color:maroon;

font-size:16pt

}

b) Create an XSLT style sheet for one student element of the above document and

use it to create a display of that element.

4b.xml

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

<?xml-stylesheet type="text/xsl" href="4b.xsl"?>

<Student> <Student_Info> <USN>4JD10CS053</USN>

<NAME>SukruthGowda</NAME> <COLLEGE>JIT</COLLEGE> <BRANCH>CSE</BRANCH>

<YOJ>2008</YOJ> <Email>[email protected] </Email> </Student_Info>

</Student>

Page 14: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 14

4b.xsl

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

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <html> <body>

<h2> STUDENT DATABASE</h2> <table border="1"> <tr bgcolor="pink">

<th>USN</th>

<th>NAME</th> <th>NAME OF COLLEGE</th> <th>BRANCH</th>

<th>YEAR OF JOINING</th> <th>Email</th> </tr>

<xsl:for-each select="Student/Student_Info"> <tr bgcolor="pink"> <td><xsl:value-of select="USN"/></td>

<td><xsl:value-of select="NAME"/></td>

<td><xsl:value-of select="COLLEGE"/></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>

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

Server Software, Server protocol, CGI Revision etc.

#!/usr/bin/perl

#This line tells the machine to run the file through perl

#Environment variables can be accssed using $ENV.

print"content-type:text/html","\n\n";

print"<html><body bgcolor='yellow'><h1><center>SERVER

INFORMATION<center></h1><br>";

print"<hr><br>Server name=",$ENV{'SERVER_NAME'};

print"<br>Running Port=",$ENV{'SERVER_PORT'};

print"<br>SERVER PROTOCOL=",$ENV{'SERVER_PROTOCOL'};

print"<br>SERVER SOFTWARE=",$ENV{'SERVER_SOFTWARE'};

print"<br>CGI version=",$ENV{'GATEWAY_INTERFACE'};

print"<br><hr></body></html>";

Page 15: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 15

b) Write a Perl program to accept UNIX command from a HTML for and to display

the output of the command executed.

5b.html

<html>

<head><title>UNIX COMMANDS</title></head>

<body bgcolor="green">

<form action="http://localhost/cgi-bin/5b.pl" method="get">

<input type="text" name="command">

<input type="submit" value="execute">

<input type="reset" value="clear">

</form>

</body>

</html>

5b.pl

#!/usr/bin/perl

use CGI":standard";

print"content-type:text/html","\n\n";

$input=param(command);

print"";

print"<html><body><h1>command result</h1><br>command executed:",$input;

#system($input);

print`$input`;

print"</body></html>";

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.

6a.html

<html>

<head>

<title> Greeting </html>

</head>

<body bgcolor="pink">

<h3> Enter Name and Recieve Greetings</h3>

<form action="http://localhost/cgi-bin/6a.pl" method="get">

Name:<input type="text name="name"><br><br>

<input type="submit" value="click">

<input type="reset" value="reset">

</form>

</body>

</html>

Page 16: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 16

6a.pl

#!/usr/bin/perl

use CGI':standard';

print "content-type:text/html\n\n";

$input=param("username");

my @msgs=("Good morning","Welcome","How are you doing?","Hello!");

$i=int rand scalar @msgs;

print "Hi, $input.<br>Message: " , $msgs [$i];

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.

#!"C:\xampp\perl\bin\perl.exe"

use CGI ':standard';

use CGI::Carp qw(warningsToBrowser);

print header();

print start_html(-title=>"WebPage Counter",-bgcolor=>"Pink",-text=>"blue");

open(FILE,'<count.txt');

$count=<FILE>;

close(FILE);

$count++;

open(FILE,'>count.txt');

print FILE "$count";

print ("This page has been viewed $count times");

close(FILE);

print end_html();

Note: Program should be executed in Xampp server. C Xampp cgi-bin take text file

and saveas 6.pl it should be PL file.

Output: in browser type: localhost/cgi-bin/6b.pl

7. Write a Perl program to display a digital clock which displays the current time of the

server.

#!/usr/bin/perl

use CGI':standard';

$de=1;

$mm="AM";

print "Refresh:",$de,"\n";

print "content-type:text/html","\n\n";

print "<html><body bgcolor=cyan><center><h1>DIGITAL

CLOCK</CENTER></h1><br>";

($s,$m,$h)=localtime(time);

if($h>=12)

{

$h=$h-12;

$mm="PM";

Page 17: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 17

}

print"<table align=center border=2 bgcolor=white><tr><td><font color=magenta

size=8>$h</td><td><font size=10>:</td><td><font color=red

size=8>$m</td><td><font

size=8>:</td><td><font size=7>$s</td><td><font color=magenta

size=8>$mm</font></td></tr></table>";

print"<br><br><center><h2>the current system time is $h hours $m minutes $s

seconds</center></h2>";

print"<br></body></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.

8.html

<html>

<body>

<form action="http://localhost/cgi-bin/8.pl">

Name:<input type="text" name="name"<br>

Age:<input type="text" name="age"><br>

<input type="submit" value="submit">

</form>

</body>

</html>

8.pl

#!/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:program8","root","");

$name=param("name");

$age=param("age");

$qh=$dbh->prepare("insert into student values('$name','$age')");

$qh->execute();

$qh=$dbh->prepare("Select *from student");

$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();

print"</HTML>";

Page 18: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 18

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

$month=259200+time();

setcookie(AboutVisit,date("F jS - g:i a"),$month);

?>

<html>

<body>

<?php

if(isset($_COOKIE['AboutVisit']))

{

$last=$_COOKIE['AboutVisit'];

echo"welcome back!!<br>u last visit on".$last;

}

else

{

echo "welcome to our site!";

}

?>

</body>

</html>

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

{

$_SESSION["count"]=0;

echo "<p>Counter initialized</p>/n";

}

else

{

$_SESSION["count"]++;

}

echo"<p>the counter is now <b>$_SESSION[count]</b></p>".

"<p>reload this page to increment</p>";

?>

Page 19: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 19

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.

11a.html

<html>

<head><title>pg11</title></head>

<form action="http://localhost/cgi-bin/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/cgi-bin/11b.php" method="post">

Enter Name of the contact to be searched <input type="text" name="name">

<input type=submit>

</form>

</body>

</html>

11a.php

<?php

$dbh=mysql_connect('localhost','root','')or

die(mysql_error());

mysql_select_db('cust_info')or die(mysql_error());

if(isset($_POST['name']))

$name=$_POST['name'];

$add1=$_POST['add1'];

$add2=$_POST['add2'];

$email=$_POST['email'];

if($name!=""&&$add1!="")

{

$query="INSERT INTO address VALUES('$name','$add1','$add2','$email')";

$result=mysql_query($query) or die(mysql_error());

}

else

{

echo "one of the field is empty";

}

mysql_close($dbh);

echo "Data Inserted <br><hr>";

?>

Page 20: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 20

11b.php

<?php

$link=mysql_connect("localhost","root","");

mysql_select_db("cust_info");

$n=$_POST["name"];

print "Entered Name is $n \n";

$var=mysql_query("SELECT * FROM address 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);

?>

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.

Creating Books Database

mysql -u root

create database program12_development;

use program12_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 program12

Change the directory to program12

cd program12

Creating controller, model and view from database

Page 21: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 21

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

http://localhost:3000/books

Creating main (new) controller for searching book

ruby script/generate controller main

Opening main controller program

Notepad app\controllers\main_controller.rb

class MainController < ApplicationController

def welcome

@num_books = Book.count

end

def result

@bookid = params[:title]

@bookz = Book.find(:all, :conditions => "title = '#{@bookid}' ")

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 <%= @title%> </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>

Page 22: WEB Programming laboratory (10CSL78) SEMESTER VII WEB ...€¦ · WEB Programming laboratory (10CSL78) Dept. of CS&E, Jain Institute of Technology, Davanagere 3 Lab Instructions Steps

WEB Programming laboratory (10CSL78)

Dept. of CS&E, Jain Institute of Technology, Davanagere 22

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

save as “Welcome.rhtml”

“Result.rhtml”