qmp 7.1 d/d channabasaveshwara institute of technology · 10csl78 web programming laboratory vii...

10CSL78 Web Programming Laboratory VII sem CSE

Dept. of CSE, CIT, Gubbi 1

QMP 7.1 D/D

Channabasaveshwara Institute of Technology (An ISO 9001:2008 Certified Institution)

NH 206 (B.H. Road), Gubbi Tumkur–572 216.Karnataka.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SYLLABUS

WEB PROGRAMMING LAB

Sub Code: 10CSL78 IA Marks : 25

Hrs/ Week: 03 Exam Hours: 03

Total Hrs. 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 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 form and to display the

output of the command executed.

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.

Note: In the examination each student picks one question from the lot of all 12

questions.



BASIC HTML TAGS Paragraph Tags

Tag: <p> </p> (Has a closing tag) </> means closed.

What it Does: Puts 2 breaks between lines of text.

Attributes:

Align=left, right, center

Code Example:

<p align=left>This is a paragraph tag</p>

<p align=left >This is a paragraph tag</p>

What it looks like:

This is a paragraph tag.

This is a paragraph tag.

Break Tags Tag: <br> (Has no closing tag)

What it Does: Puts a one line break between text.

Code Example:

This is a break tag. <br>

This is another break tag.

What it looks like:

This is a break tag.

This is another break tag. Bold Tags

Tag: <b></b>(Has closing tag) </> means closed.

What it Does: Creates bold text

Code Example: <b>this is bold. </b>

What it looks like:

this is bold. Italic Tags

Tag: <i></i>(Has closing tag) </> means closed.

What it Does: Creates Italic text.

Code Example: <i> This text is italic. </i>

What it looks like:

This text is italic.

Unordered List Tags Tag: <ul> </ul> (Has closing tag) </> means closed.

What it Does: The UL tag lists items using bullets. Also indents your list tags.

Code Example:

<ul>This is a ul tag</ul>

What it looks like:

This is a ul tag.

List Tags

Tag: <li> </li> (Has closing tag) </> means closed. What it Does: Creates a bulleted list.

Code Example:

<li>Apple </li>

<li>Orange</li>

<li>Peach</li>

What it looks like:

Apple

Orange

Peach

Hyperlink Tag



Tag: <a href="URL"></a> Has closing tag) </> means closed.

What it does: Creates a hyperlink to another page.

Attributes:

Target=”new” This opens up a new window.

Code Example:

<a href=”doc.html”>document</a>

What it looks like:

Document

To create a “hotlink” email reference:

<a href=mailto:[email protected]>[email protected]</a>

Table Tags

Tag: <table></table> Creates a table

Tag: <tr></tr> Sets off each row in a table

Tag: <td></td> Sets off Each cell in a table>

Attributes:

align=left, right, center

border=x

cellpadding=x

cellspacing=x

width=

height=

How these work and look: All these tags must be closed. </>

<table border=1 cellpadding=2 cellspacing=2>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

</table>

How it looks:

Cell 1 Cell 2

Image Tags

Tag: <img src=”imagename.gif” alt=”description”> there is no closing tag

Attributes:

alt=”description”

Align=right or left

Border=0

What it does: Inserts an image into the page. Always have an alt tag in your images. Alt

tags are part of priority

one ADA compliance. The site will not be compliant without this tag.

Code Example: This is an image <img src=”images/arrow.gif” alt=”arrow”>.

What it looks like: This is an image .

1. Always use alt tags (alternative text) in images

2. Close your tags </> Email Tags

<a href=”mailto:[email protected]” class=”links” >[email protected] </a> Image Tags with locations

To insert an image into text area

<img src=”images/imagemanager/filename.gif(jpg)”alt=”Title of Image”>

To place this in a left, center or right position you would:

<center><img src=”images/imagemanager/filename.gif(jpg)”alt=”Title of

Image”></center>



JAVASCRIPT BASICS

1.How to put a JavaScript code into an HTML page?

• Use the <script> tag (also use the type attribute to define the scripting language)

<html>

<head>

<script type="text/javascript">

...

</script>

</head>

<body>


...

</script>

</body>

</html>

2. Where Do You Place Scripts?

• Scripts can be in the either <head> section or <body> section

• Convention is to place it in the <head> section

<html>

<head>


....

</script>

</head>

3. Referencing External JavaScript File

• Scripts can be provided locally or remotely accessible JavaScript file using src attribute.

<html>

<head>

<script language="JavaScript"

type="text/javascript"

src="http://somesite/myOwnJavaScript.js">

</script>

<script language="JavaScript"

type="text/javascript"

src="myOwnSubdirectory/myOwn2ndJavaScript.js">

</script>

4.JavaScript Variable

• You create a variable with or without the var statement

var strname = some value

strname = some value

• When you declare a variable within a function, the variable can only be accessed within

that function

• If you declare a variable outside a function, all the functions on your page can access it

• The lifetime of these variables starts when they are declared, and ends when the page is

closed.



5.JavaScript Popup Boxes

• Alert box

> User will have to click "OK" to proceed

> alert("sometext")

• Confirm box

> User will have to click either "OK" or "Cancel" to proceed

> confirm("sometext")

• Prompt box

> User will have to click either "OK" or "Cancel" to proceed after

entering an input value

> prompt("sometext","defaultvalue")

DIFFERENCE BETWEEN XHTML AND XML



SIMPLE PERL COMMANDS

#!/usr/bin/perl

This command tells the operating system where the perl executable is located. The

path may change from system to system. Use the whereis command in UNIX to

locate it. This feature only works for UNIX based operating systems.

print

Prints list of arguments that it is passed.

print "Enter your name", "->";

In this example, two strings are being passed to the print command. You could have

just as easily used print "Enter your name ->";

<STDIN>

The read function in perl is implemented using a < sign and a > sign. The variable in

uppercase in the middle is referred to as the File Handle. A file handle connects the

read function to an input stream. STDIN is the input stream associated with standard

input.

Standard input by default comes from your keyboard.

$name = <STDIN>;

This statement reads from standard input into a scalar variable named name.

chop

The chop function in perl is used to indiscriminately remove the last character from a

variale.

chop($name);

This statement removes the last character in the variable $name

Scalar Variables

Scalar variables in perl stored one piece of information that is not type specific

meaning it could be a string or a number. They are created as you see in the

example above using a simple assignment into a variable name preceded by the $.

print "My name is $name\n";

This command will print the words 'My name is' and the value of the variable $name



if

The if statement is used on a condition to change the flow of your program.

if($name eq "Patti")

{

print "It's Patti\n";

} else

{

print "It's someone else\n";

}

This command will print 'It's Patti' wherever the value stored in $name is Patti.

Otherwise, it will print 'It's someone else'. The else statement is optional, but will

only be executed when the condition in the if evaluates to false. If it evaluates to

true, the block of code immediately following the if statement will be executed. The

eq operator is the equality operator for string comparisons.

while

The while statement is used to iterate through some code time and time again.

while($num < 5)

{

print "The number is ", $num, "\n";

$num = $num + 1;

}

This command will print 'The number is' and num's value so long as the number is

less than 5.

for

The for statement is also used to iterate through some code time and time again.

Different from the while loop the number of iterations are known.

for($i = 0; $i < 5; $i++)

{

print "The number is ", $i, "\n";

}

This command will print 'The number is 0' all the way to 4. The for statement

consists of the initialization of a counter variable, a test for that variable and a



modification of the variable. As long as the condition is true, the loop will continue to

iterate.

continue

The continue statement is used to stop the current iteration and go on to the next

iteration

while($num < 5)

{

if($num % 2 == 1)

{

continue;

}

print "The number is ", $num, "\n";

$num = $num + 1;

}

This command will print 'The number is' and the even values so long as the number

is less than 5. We are using the numerical comparison operators == and < and the

modulus or remainder operator %. Other numeric operators include <=, >=, >, *,

/, +, -

Note: The semicolon is used as a separator of statements in perl and should be at the end of all

your commands except for the if, while, and for statements

JAVASCRIPT PHP PERL

Executes within browser window

Requires HTTP to execute

Source code within web page file

Can update files on server

Can use MySQL

Can obtain files from other domains on the internet.

YES

YES

YES

NO

NO

YES

NO

NO

YES

YES

YES

YES

NO

NO

NO

YES

YES

YES



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

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

<html xmlns = "http://www.w3.org/1999/xhtml">

<body>


var fib1=0,fib2=1,fib=0;

var num = prompt("Enter a number : \n", "");

if(num!=null && num>0)

{

document.write("<h1>" + num + " Fibonocci are <br></h1>");

if(num==1)

document.write("<h1> "+ fib1 + "</h1>");

else

document.write("<h1>" + fib1 + " " + fib2 + "</h1>");

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

{

fib= fib1 + fib2;

document.write("<h1> " + fib + "</h1>");

fib1=fib2;

fib2=fib;

}

}

else

alert("No Proper Input");

</script>

</body></html>



1. Develop and demonstrate a XHTML file that includes Javascript script for the following

problems:

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" ?>

<html xmlns = "http://www.w3.org/1999/xhtml">

<body>


var num = prompt("Enter a number : \n", "");

if(num >0 && num !=null)

{

msgstr="Number and its Squares are \n";

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

{

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

}

alert(msgstr)

}

else

alert("No input supplied");

</script>

</body>

</html>



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.

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

<html xmlns="http://www.w3.org/1999/xhtml/">

<head><title>USN.html</title>


function checkusn()

{

var str=document.getElementById("usn");

var result=str.value.search(/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{2}\d{3}$/);

if(result != 0)

{

alert("Entered usn("+str.value+") is not in correct form. The correct

pattern is :ICG09CS100");

}

else

{

alert("Entered usn("+str.value+") is in the correct form.");

}

}

</script>

</head>

<body style="background-color:yellow">

<h3 style="text-align:center;color:red"> Program includes XHTML document to

collect the Student-Information</h3>

<h3 style="color:purple">Student Information </h3>

<form name="my form">

<p style="color:purple"> Enter your USN:</p>

<input type="text" id="usn" size=15/>

<br/>

<br/>

<input type="button" onclick="checkusn()" value="Submit"/>

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

<br/>

</form>

</body>

</html>



Output



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"?>

<html xmlns="http://www.w3.org/1999/xhtml/">

<head><title>USN.html</title>


function validate()

{

var str=document.getElementById("usn");

var str1 = document.getElementById("sem");

var result=str.value.search(/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{2}\d{3}$/);

var semres = str1.value.search(/^[1-8]{1}$/);

if(result>=0 && semres>=0)

{

alert("Entered usn("+str.value+") is in correct form and entered

sem("+str1.value+") is in correct form.");

}

else if(result<0 && semres>=0)

{

alert("Entered usn("+str.value+") is not in correct form The correct form

is:1CG09CS100.");

}

else if(result>=0 && semres<0)

{

alert("Entered sem("+str1.value+") is not in correct form The number is

between 1 to 8.");

}

else

{

alert("Entered usn("+str.value+") and entered sem ("+str1.value+")is not in

the correct form.");

}

}

</script>

</head>


<h3 style="text-align:center;color:red"> Program includes XHTML document to

collect the Student-Information</h3>

<h3 style="color:purple">Student Information </h3>

<form name="my form">

<p style="color:purple"> Enter your USN:</p>

<input type="text" id="usn" size=15/>

<br/>

<br/>

<p style="color:purple"> Enter your SEM:</p>

<input type="text" id="sem" size=15/>

<br/>



<br/>

<input type="button" onclick="validate()" value="Validate"/>

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

<br/>

</form>

</body>

</html>

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.

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>The Stacking order</title>

<style type="text/css">

.layer1Style

{

border: solid thick black;

padding: 1em;

width:300px;

background-color:green;

position:absolute;

top:100px;

left:200px;

z-index:0;

}

.layer2Style

{

border: solid thick red;

padding: 1em;

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>


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;

alert(topLayer);

}

</script>

</head>

<body bgcolor = "red">

<h2 style="text-align:center;color:yellow"> Program includes XHTML

document to show the Stacking of Paragraphs</h2>

<div style="z-index: 10;" class="layer1Style" id="layer1"

onmouseover="mover('layer1')">

The lives of most inhabitants of Industrialized Countries, has

well as some unindustrialized countries, have been changed forever by the

advent of WWW.

</div>



The www may seem like magic , untill you undrestand how it

works.The Web is accessed through a browser.

</div>



Windows XP provides many ways for you to communicate with friends,

co-workers, and I with the rest of the world.

</div>

</body>

</html>

Output



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.

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


<head>

<title>The Stacking order 5b</title>

<style type="text/css">

.layer1Style{

border: solid thick black;

padding: 1em;

width:300px;

background-color:green;

position:absolute;

top:100px;

left:400px;

z-index:1;

}

.layer2Style{

border: solid thick blue;

padding: 1em;

width:300px;

background-color:red;

position:absolute;

top:120px;

left:420px;

z-index:2;

}

.layer3Style{

border: solid thick brown;

padding: 1em;

width:300px;

background-color:orange;

position:absolute;

top:140px;

left:440px;

z-index:3;

}

</style>


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>


<h1 style="text-align:center;color:red"> The Stacking of paragraphs when

moved from the top stacking position, it returns to its original

position.</h1>


onmouseover="mover('layer1','1')" onmouseout="moveBack()">

The lives of most inhabitants of Industrailzed Countries, has well as some

unindustralized countries, have been changed forever by the advent of WWW.

</div>



The www may seem like magic , untill you undrestand how it works.The Web is

accessed through a browser.

</div>



Windows XP provides many ways for you to communicate with friends, coworkers,

and Iwith the rest of the world.

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

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

<!DOCTYPE student[

<!ELEMENT student_information (ad+)>

<!ELEMENT ad (usn,name,collegename,branch,year,email)>

<!ELEMENT usn (#PCDATA)>

<!ELEMENT name (#PCDATA)>

<!ELEMENT collegename (#PCDATA)>

<!ELEMENT branch (#PCDATA)>

<!ELEMENT year (#PCDATA)>

<!ELEMENT email (#PCDATA)>

<!ELEMENT label (#PCDATA|email|year|branch|college|name|usn)*>

<!ELEMENT h3 (#PCDATA)>

<!ELEMENT h2 (#PCDATA)>

]>

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

<student_information>

<h3>Student-Information</h3>

<h2> student 1</h2>

<ad><label> usn:<usn> 4bd06499 </usn></label></ad>

<ad><label> Name:<name> AAA </name></label></ad>

<ad><label> College name:<College> CIT,Gubbi

</College></label></ad>

<ad><label> Branch:<branch> CSE </branch></label></ad>

<ad><label> Year of joining:<year> 2006 </year></label></ad>

<ad><label> Email-ID:<email> [email protected] </email></label></ad>

<h2> student 2</h2>


<ad><label> Name:<name> BBB</name></label></ad>






<h2> student 3</h2>


<ad><label> Name:<name> CCC </name></label></ad>






</student_information>



Stu.css

ad{display:block; margin-top:15px; color:blue; font-size:13pt; }

usn {color;red; font-size:12pt; margin-left:15px; }

name {color;red; font-size:12pt; margin-left:15px; }

college {color;red; font-size:12pt; margin-left:15px; }

branch {color;red; font-size:12pt; margin-left:15px; }

year {color;red; font-size:12pt; margin-left:15px; }

email {color;red; font-size:12pt; margin-left:15px; }

h3{color;red; font-size:16pt; }

h2 {display:block; color;red; font-size:16pt; }

Output



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 version ="1.0" encoding="utf-8"?>

<!DOCTYPE student[

<!ELEMENT student_information (ad+)>

<!ELEMENT ad (usn,name,collegename,branch,year,email)>

<!ELEMENT usn (#PCDATA)>

<!ELEMENT name (#PCDATA)>

<!ELEMENT collegename (#PCDATA)>

<!ELEMENT branch (#PCDATA)>

<!ELEMENT year (#PCDATA)>

<!ELEMENT email (#PCDATA)>

]>

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

<student>

<usn> 4bd06cs099 </usn>

<name> Kumar </name>

<college> CIT </college>

<branch> CSE </branch>

<year> 2006 </year>

<email> [email protected]</email>

</student>

Xslstudent.xsl

<?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 = "/">

<h2> Student information </h2>

<span style = "font-style: italic;color:red;margin-

right::5pt;"> USN: </span>

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


right::5pt;">Name: </span>

<xsl:value-of select = "student/name" /> <br />


right::5pt;"> Branch: </span>

<xsl:value-of select = "student/branch" /> <br />


right::5pt;"> College Name: </span>

<xsl:value-of select = "student/college" /> <br />


right::5pt;"> Year of joining: </span>

<xsl:value-of select = "student/year" /> <br />


right::5pt;"> Email-ID: </span>

<xsl:value-of select = "student/email" /> <br />

</xsl:template>

</xsl:stylesheet>



Output



5. 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",

"<html>",

"<h1>Welcome to CIT</h1>",

"<h2>Welocome to PWEB LAB</h2>",

"<body>",

"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'}",

"</html>";

Output



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

output of the command executed.

#!/usr/bin/perl

use CGI':standard';

print

header(),

start_html(-title=>'UNIX COMMAND',-bgcolor=>'#00ffff'),

h1({-align=>'center'},'UNIX COMMAND EXECUTION'),

hr(),

startform(-method=>'get',-action=>'./lab5b.cgi'),

'ENTER UNIX COMMAND:', textfield(-name=>'cmd'),br(),

br(),

submit(-value=>'EXECUTE'),

endform(),

hr(),

'$',$cmd=param("cmd"),

br(),

pre(`$cmd`),

end_html();

Output



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.

#!/usr/bin/perl

use CGI‟:standard‟;

print

header(),

start_html(-title=>‟GREETING‟,-bgcolor=>‟brown‟),

h1({-align=>‟center‟},‟USER GREETING‟),

hr,

font({-color=>‟lightblue‟,-weight=>‟bold‟,-size=>‟5‟},‟ENTER THE USER

NAME HERE‟),

br,

start_form(-action=>‟./6a.cgi‟),

textfield(-name=>‟name‟),

submit(-value=>‟SEND‟),

end_form(),

hr,

font({-color=>‟yellow‟,-size=>‟5‟},‟DEAR USER‟),

font({-color=>‟white‟,-size=>‟8‟},$username=param(„name‟),

br);

@msgs=(“GOOD”,”BAD”,”HELLO”,”HELL”);

print

font({-color=>‟lightblue‟,-size=>‟8‟},$msgs[int rand scalar

@msgs]),

hr,

end_html;

Output



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

start_html(-bgcolor=>‟lightyellow‟),

h1({-align=>‟center‟},‟PAGE VISITOR INFO‟),

hr,

font({-color=>‟lightblue‟,-size=>‟4‟},‟This page is visited‟),

br,

font({-color=>‟orange‟,-size=>‟7‟},`grep „/cgi-bin/6b.cgi‟ accesslog |

wc –l`),

br,

font({-color=>‟lightblue‟,-size=>‟4‟},‟no of times‟),

br,

hr,

end_html;

ln /var/log/httpd/access_log accesslog

Output



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

server.

#!/usr/bin/perl

use CGI ':standard';

($sec,$min,$hr)=localtime();

print

header(),

start_html(-title=>'digital clock',-bgcolor=>'#00ffff'),

h1({-align=>'center'},'DIGITAL CLOCK'),

hr(),

h3({-align=>'center'},"The Current Time is:"),

h1({-align=>'center'},b("$hr:$min:$sec")),

"<meta http-equiv='refresh' content = '1'>",

hr(),

end_html();

Output



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.

#!/usr/bin/perl

use CGI':standard';

use DBI; $dbh = DBI->connect(“DBI:mysql:veena”,”root”) or die “can not connect”.DBI-

>errstr();

$sth = $dbh->prepare(„insert into userinfo values(?,?)‟) or die “can not

insert”.$dbh->errstr();

$sth1 = $dbh->prepare(„select * from userinfo‟) or die “cannot select”.$dbh-

>errstr();

print

header(),

start_html(-title=>'database access',-bgcolor=>'#00ffff'),

h1({-align=>'center'},'Database Access'),

hr(),

h2({-align=>'center'},'Database insert'),

„ENTER USER INFORMATION‟,

start_form(-action=>‟./8.cgi‟),

„NAME:‟,

textfield(-name=>‟name‟),

br,

„AGE:‟,

textfield(-name=>‟age‟),br,

submit(-value=>‟Insert‟),

reset(-value=>‟Reset‟),

end_form(),

hr();

$ename = param(„name‟);

$eage = param(„age‟);

if($ename eq “”)

{

print “do not enter null values”;

}

else

{

$sth->execute($ename, $eage) or die “cannot insert”.$sth-

>errstr();

print “successfully inserted”;

}

print

hr(),

h2({-align=>'center'},'Database display'),

pre(

„userinfo‟

br(),

„-‟x 50,br(),

„NAME AGE‟,br(),



„-‟x 50);

$sth1->execute();

while(($ename,$eage)=$sth1->fetchrow())

{

print “<pre>$ename $eage \n</pre>”;

}

$sth1->finish();

$sth->finish();

$dbh->disconnect;

end_html();

Output

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

setcookie("lastvisit",date("h:i-m/d/y"),time()+60*60);?>

<html>

<body bgcolor=”lightyellow”>

<font size=20pt>

<p align=”center”><b><u>COOKIE INFORMATION</u></b></p></font>

<hr>

<?

if(isset($_COOKIE["lastvisit"]))

{

echo “<font size=10pt color = ligtblue><p align=center><i>DEAR USER,YOU

LAST VISITED THE SITE ON </i></p></font>”;

echo “<font size=10pt color =white><p

align=center>”.$_COOKIE["lastvisit"];

echo “</p></font>”;

}

else

echo "You have got some stale cookies";

?>

Output



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

<html>

<body bgcolor=”lightyellow”>

<hr>

<h1 align= “center”>SESSION INFORMATION</h1>

<hr>

<?

if(isset($_SESSION['views']))

$_SESSION['views'] = $_SESSION['views']+ 1;

else

$_SESSION['views'] = 1;

?>

<h2><i><b>The page is visited</h2>

<font size=20pt,color=red>

<?

echo $_SESSION['views']

?></font><br><i><b>Times</b></i>

</body></html>

Output



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.

INSERT FORM

<?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">


<body bgcolor="lightyellow">

<form method ="post" action="13.php">

<table align="center" width="100%" border="1">

<tr>

<td colspan="2" align="center"><h1>USER INFORMATION</h1></td>

</tr>

<tr>

<td width="50%"><h3>USER INFO ENTRY</h3></td>

<tr>

<td>

<table border="1">

<tr>

<td>Name:</td>

<td><input type="text" name="name"/></td>

</tr>

<tr>

<td>ADDRESS1:</td>

<td><input type="text" name="add1"/></td>

</tr>

<tr>

<td>ADDRESS2:</td>

<td><input type="text" name="add2"/></td>

</tr>

<tr>

<td>EMAIL:</td>

<td><input type="text" name="email"/></td>

</tr>

<tr>

<td colspan="2" align="center">

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

<input type="reset" value="RESET"/></td>

</tr>

</table>

</td>

</tr>

</table>

<a href="13a.html" align = center>CLICK HERE TO SEARCH</a>

</form>

</body>

</html>



Output



SEARCH FORM

<html>

<head>

<title>Insert title here</title>

</head>

<html>

<body bgcolor = "lightyellow">

<h2 align ="center">DATABASE SEARCH</h2>

<form action = "13a.php "method="post">

<table>

<tr>

<td>

<p><b>Enter the user name here:</b></p><br/>

<input type="text" name="name1"/>

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

</td>

</tr>

</table>

<a href="13.html" align = center>HOME</a>

</body>

</html>

13.php

<?php

$mysql = mysql_connect("localhost","root","") or die("Cannot connect");

?>

<html>

<body bgcolor = "lightyellow">

<h2 align ="center">USER ENTRY</h2>

<?php

$name = $_REQUEST["name"];

$add1 = $_REQUEST["add1"];

$add2 = $_REQUEST["add2"];

$email = $_REQUEST["email"];

if($name == NULL && $add1 == NULL && $add2 == NULL && $email == NULL)

{

echo "Dont enter null values";

}

else

{

mysql_select_db("perlexample") or die("Cannot select the database");

$result = mysql_query("insert into user_info

values('$name','$add1','$add2','$email')") or die("Cannot insert");

echo "Successfully Inserted";

}

?>




</table>

</body>

</html>

13a.php

<?php

$mysql = mysql_connect("localhost","root","") or die("Cannot connect");

?>

<html>


<h2 align = "center">SEARCH RESULTS</h2>

<?php

$name1 = $_REQUEST["name1"];

if($name1==NULL)

{

echo "Dont enter null values";

}

else

{

mysql_select_db("perlexample") or die("Cannot select the database");

$result1 = mysql_query("select * from user_info where name = '$name1'")

or die("Cant select");

}

echo "<hr>";

echo "<table border= 1 align = center>

<tr>

<td>Name:</td>

<td>Address1:</td>

<td>Address2:</td>

<td>Email:</td>

</tr>";

while($array = mysql_fetch_row($result1))

{

echo "<tr>

<td>$array[0]</td>

<td>$array[1]</td>

<td>$array[2]</td>

<td>$array[3]</td>";

}

echo "</table>";

echo "<hr>";

?>




</body>

</html>

Output



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 create a ruby application

1. Create a new application, by issuing the command => rails Books

2. Create the model by using the command => ruby script/generate model book

3. Go to the directory db and make the following changes in the 001_create_books.rb

t.column :accessionnumber, :string

t.column :title, :string

t.column :author, :string

t.column :edition, :string

t.column :publisher, :string

4. Create the controller file by using the command => ruby script/generate controller main

5. Create the database by name books_development and the table by the name books or use

the db migrate command

6. Create the front end forms for insert and search and the result forms and save it in the

directory /app/views/main/

7. Write the controller code in file named /app/controllers/main_controller.rb.

8. Start the server by using the command ruby script/server

dbinsert.rhtml

<html>

<head><title>DBINSERT</title></head>


<h1 align = "center">DBINSERT</h1>

<hr />

<form action = "resultinsert" method="post">

<table>

<tr>

<td> <b>Enter the Accession Number here:</b> </td>

<td> <input type="text" name="book[accessionnumber]"

size="30"/></td>

</tr>

<tr>

<td> <b>Enter the title here:</b> </td>

<td> <input type="text" name="book[title]" size="30"/></td>

</tr>

<tr>

<td> <b>Enter the Author:</b> </td>

<td> <input type="text" name="book[author]" size="30"/></td>

</tr>



<tr>

<td> <b>Enter the Edition:</b> </td>

<td> <input type="text" name="book[edition]" size = "30"/></td>

</tr>

<tr>

<td> <b>Enter the Publisher here:</b> </td>

<td> <input type="text" name="book[publisher]" size="30"/></td>

</tr>

<tr>

<td colspan = "2">

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

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

</td>

</tr>

</table>

<hr>

</form>

</body>

</html>

resultinsert.rhtml

<html>

<head><title>DBSEARCH BASED ON TITLE</title></head>


<h1 align = "center">SUCCESSFULLY INSERTED

</h1>

<hr />

</body>

</html>

dbsearch.rhtml

<html>

<head><title>DBSEARCH BASED ON TITLE</title></head>


<h1 align = "center">DATABASE SEARCH BASED ON TITLE</h1>

<hr />

<form action = "searchresult" method="post">

<table>

<tr>

<td> <b>Enter the title here:</b> </td>

<td> <input type="text" name="title"/></td>

</tr>

<tr>



<td colspan = "2">

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

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

</td>

</tr>

</table>

<hr>

</form>

</body>

</html>

searchresult.rhtml

<html>

<head>

<title> result.rhtml </title>

</head>


<h1 align = "center"> SEARCH RESULTS </h1>

<hr>

<table border = "border" align="center">

<tr>

<th> Accession Number </th>

<th> Title </th>

<th> Author </th>

<th> Edition </th>

<th> Publication </th>

</tr>

<% @names.each do |boo|

@name = boo. accessionnumber

@title = boo.title

@author = boo.author

@edition = boo.edition

@publication = boo.publisher %>

<tr>

<td><%= @name %></td>

<td><%= @title %></td>

<td><%= @author %></td>

<td><%= @edition %></td>

<td><%= @publication%></td>

</tr>

<% end %>

</table>

</body>

</html>



main_controller.rb

class MainController < ApplicationController

def resultinsert

@book = Book.new(params[:book])

if @book.save

flash[:notice] = 'Book details was successfully created.'

else

render :action => 'dbinsert'

end

end

def searchresult

@titlename = params[:title]

@names = book.find(:all, :conditions =>["title = ?",@titlename])

end

end

Output



Viva Questions

HTML

1. What does HTML stand for?

2. Who is making the Web standards?

3. Which is the correct HTML tag for the largest heading

4. HTML tag for inserting a line break?

5. What is the preferred way for adding a background color in HTML?

6. What is the HTML tag to make a text bold

7. Choose the correct HTML tag to make a text italic

8. What is the correct HTML for creating a hyperlink?

9. How can you create an e-mail link?

10. How can you open a link in a new browser window?

11. Which of these tags are all <table> tags?

12. Choose the correct HTML to left-align the content inside a tablecell

13. How can you make a list that lists the items with numbers?

14. How can you make a list that lists the items with bullets?

15. What is the correct HTML for making a checkbox?

16. What is the correct HTML for making a text input field?

17. What is the correct HTML for making a drop- down list?

18. What is the correct HTML for making a text area?

19. What is the correct HTML for inserting an image?

20. What is the correct HTML for inserting a background image?

SQL

1. What does SQL stand for?

2. Which SQL statement is used to extract data from a database?

3. Which SQL statement is used to update data in a database?

4. Which SQL statement is used to delete data from a database?

5. Which SQL statement is used to insert new data in a database?

6. With SQL, how do you select a column named "FirstName" from a table named "Persons"?



7. With SQL, how do you select all the columns from a table named "Persons"?

8. With SQL, how do you select all the records from a table named "Persons" where the value of

the column "FirstName" is "Peter"?

9. With SQL, how do you select all the records from a table named "Persons" where the value of

the column "FirstName" starts with an "a"?

10. The OR operator displays a record if ANY conditions listed are true. The AND operator

displays a record if ALL of the conditions listed are true

11. With SQL, how do you select all the records from a table named "Persons" where the

"FirstName" is "Peter" and the "LastName" is "Jackson"?

12. With SQL, how do you select all the records from a table named "Persons" where the

"LastName" is alphabetically between (and including) "Hansen" and "Pettersen"?

13. Which SQL statement is used to return only different values?

14. Which SQL keyword is used to sort the result-set?

15. With SQL, how can you return all the records from a table named "Persons" sorted

descending by "FirstName"?

16. With SQL, how can you insert a new record into the "Persons" table?

17. With SQL, how can you insert "Olsen" as the "LastName" in the "Persons" table?

18. How can you change "Hansen" into "Nilsen" in the "LastName" column in the Persons table?

19. With SQL, how can you delete the records where the "FirstName" is "Peter" in the Persons

Table?

20. With SQL, how can you return the number of records in the "Persons" table?

CSS

1. What does CSS stand for?

2. What is the correct HTML for referring to an external style sheet?

3. Where in an HTML document is the correct place to refer to an external style sheet?

4. Which HTML tag is used to define an internal style sheet?

5. Which HTML attribute is used to define inline styles?

6. Which is the correct CSS syntax?

7. How do you insert a comment in a CSS file?

8. Which property is used to change the background color?

9. How do you add a background color for all <h1> elements?



10. How do you change the text color of an element?

11. Which CSS property controls the text size?

12. What is the correct CSS syntax for making all the <p> elements bold?

13. How do you display hyperlinks without an underline?

14. How do you make each word in a text start with a capital letter?

15. How do you change the font of an element?

16. How do you make the text bold?

17. How do you display a border like this:

18. How do you change the left margin of an element?

19. To define the space between the element's border and content, you use the padding property,

but are you allowed to use negative values?

20. How do you make a list that lists its items with squares?

PHP

1. What does PHP stand for?

2. PHP server scripts are surrounded by delimiters, which?

3. How do you write "Hello World" in PHP

4. All variables in PHP start with which symbol?

5. What is the correct way to end a PHP statement?

6. The PHP syntax is most similar to:

7. How do you get information from a form that is submitted using the "get" method?

8. When using the POST method, variables are displayed in the URL:

9. In PHP you can use both single quotes ( ' ' ) and double quotes ( " " ) for strings:

10. Include files must have the file extension ".inc"

11. What is the correct way to include the file "time.inc”?

12. What is the correct way to create a function in PHP?

13. What is the correct way to open the file "time.txt" as readable?

14. PHP allows you to send emails directly from a script

15. What is the correct way to connect to a MySQL database?

16. What is the correct way to add 1 to the $count variable?

17. What is a correct way to add a comment in PHP?



18. PHP can be run on Microsoft Windows IIS(Internet Information

Server):

19. In PHP, the die() and exit() functions do the exact same thing.

20. Which one of these variables has an illegal name?

XML

1. What does XML stand for?

2. There is a way of describing XML data, how?

3. XML's goal is to replace HTML

4. What is the correct syntax of the declaration which defines the XML

version?

5. What does DTD stand for?

6. Is this a "well formed" XML document?

<?xml version="1.0"?>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>



<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

8. Which statement is true?

9. Which statement is true?

10. XML preserves white spaces





<note>

<to age="29">Tove</to>

<from>Jani</from>

</note>



<note>

<to age=29>Tove</to>

<from>Jani</from>

</note>

13. XML elements cannot be empty

14. Which is not a correct name for an XML element?



17. XML attribute values must always be enclosed in quotes

18. What does XSL stand for?

19. What is a correct way of referring to a stylesheet called "mystyle.xsl"?

20. For the XML parser to ignore a certain section of your XML document, which syntax is

correct?

JavaScript

1. Inside which HTML element do we put the JavaScript?

2. What is the correct JavaScript syntax to write "Hello World"?

3. Where is the correct place to insert a JavaScript?

4. What is the correct syntax for referring to an external script called "xxx.js"?

5. The external JavaScript file must contain the <script> tag

6. How do you write "Hello World" in an alert box?

7. How do you create a function?

8. How do you call a function named "myFunction"?

9. How do you write a conditional statement for executing some code if "i" is equal to 5?

10. How do you write a conditional statement for executing some code if "i" is NOT equal to 5?



11. How does a "while" loop start?

12. How does a "for" loop start?

13. How can you add a comment in a JavaScript?

14. What is the correct JavaScript syntax to insert a comment that has more than one line?

15. What is the correct way to write a JavaScript array?

16. How do you round the number 7.25, to the nearest integer?

17. How do you find the number with the highest value of x and y?

18. What is the correct JavaScript syntax for opening a new window called "w2" ?

19. How do you put a message in the browser's status bar?

20. How can you find a client's browser name?

XHTML

1. What does XHTML stand for?

2. XHTML is a Web standard

3. XML and HTML will be replaced by XHTML

4. What is correct XHTML for a horizontal line?

5. What is the correct XHTML for a paragraph?

6. What is correct XHTML for a line break?

7. What is the correct XHTML for an attribute and its value?

8. All elements in XHTML must be closed

9. Is this correct XHTML?

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

<li>Milk</li>

</ul>

10. The DOCTYPE declaration has no closing tag



11. Which elements are mandatory in an XHTML document?

12. XHTML documents must be "well-formed"

13. What XHTML code is "well-formed"?

14. Which of the following is the right use of the lang attribute?

15. Which attribute replaces the name attribute for the following elements: a, applet, frame,

iframe, img, and map?

16. Is attribute minimization allowed in XHTML?

17. Do all XHTML documents require a doctype?

18. What are the different DTDs in XHTML?

19. What is the most common XHTML DTD?

20. All XHTML tags and attributes must be in lower case



References:

Sites:

www.w3schools.com

Text Books:

1. Programming the World Wide Web – Robert W. Sebesta, 4th

Edition, Pearson Education,

2008.

2. Internet & World Wide Web How to H program – M. Deitel, P.J. Deitel, A. B. Goldberg, 3rd

Edition, Pearson Education / PHI, 2004.

3. Web Programming Building Internet Applications – Chris Bates, 3rd Edition, Wiley India,

2006.

4. The Web Warrior Guide to Web Programming – Xue Bai et al, Thomson, 2003.

qmp 7.1 d/d channabasaveshwara institute of technology · 10csl78 web programming laboratory vii...

Documents