You are on page 1of 33

MASTER OF COMPUTER APPLICATIONS

IV SEMESTER

WEB PROGRAMMING LABORATORY


07MCA43

Name:
Reg. No.

Batch
CONTENTS

SL. Page Max.


Experiment
No. No. Marks
MARKS DETAILS

1. Internal Assessment Marks : 50


2. Minimum Internal Assessment Marks : 25
3. Maximum Marks in the University Examination : 100
4. VTU Lab Exam marks split up
Procedure : 15 % of Total
Viva : 15 % of Total
Execution : 70 % of Total

Do’s and Don’t in the Laboratory

DO …..
• Come prepared to the Lab.
• Submit your Records to the Lecturer and sign in the Log Book on entering
the Lab.
• Follow the Lab exercise cycles as instructed by the Department. Violating
the same will result in deduction of marks.
• Use the same login(if any) assigned to you.
• Put the chairs back to its position before you leave.
• Backlog exercises to be executed after completing regular exercises.

DON’T …..
• Move around in the lab during the lab session.
• Tamper System Files or Try to access the Server.
• Write Data Sheets or Records in the Lab.
• Change the system assigned to you without the notice of the Lab Staff.
• Teaching your friends.

XHTML (EXtensible HyperText Markup Language):

Introduction:
XHTML is almost identical to HTML 4.01. XHTML is a stricter and cleaner version of HTML.
XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML
consists of all the elements in HTML 4.01 combined with the syntax of XML. XML is a markup
language where everything has to be marked up correctly, which results in "well-formed"
documents. XML was designed to describe data and HTML was designed to display data. All
new browsers have support for XHTML.

The Most Important Differences:


* XHTML elements must be properly nested
* XHTML elements must always be closed
* XHTML elements must be in lowercase
* XHTML documents must have one root element

The basic document structure is:


<html>
<head> ... </head>
<body> ... </body>
</html>

Some More XHTML Syntax Rules:


* Attribute names must be in lowercase
* Attribute values must be quoted
* Attribute minimization is forbidden
* The id attribute replaces the name attribute

Tags:
<!--...--> - Defines a comment
<html> - Defines an html document
<head> - Defines information about the document
<title> - Defines the document title
<body> - Defines the body element
<p> - Defines a paragraph
<h1>..<h6> - Defines header 1 to header 6
<font> - Defines text font, size, and color
<a> - Defines an anchor
<b> - Defines bold text
<big> - Defines big text
<br> - Inserts a single line break
<div> - Defines a section in a document
<hr> - Defines a horizontal rule
<i> - Defines italic text
<img> - Defines an image
<ol> - Defines an ordered list
<ul> - Defines an unordered list
<li> - Defines a list item
<span> - Defines a section in a document
<table> - Defines a table
<th> - Defines a table header
<td> - Defines a table cell
<u> - Defines underlined text
<input> - Defines an input field

CSS (Cascading Style Sheets):

• Styles define how to display HTML elements


• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files as ".css"
• Multiple style definitions will cascade into one

XHTML with Javascript:

JavaScript is used in millions of Web pages to improve the design, validate forms, detect
browsers, create cookies, and much more. JavaScript is the most popular scripting language on
the internet, and works in all major browsers, such as Internet Explorer, Firefox, and Opera. A
scripting language is a lightweight programming language. JavaScript is usually embedded
directly into HTML pages. JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
JavaScript gives HTML designers a programming tool - HTML authors are normally not
programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone
can put small "snippets" of code into their HTML pages
JavaScript can put dynamic text into an HTML page - A JavaScript statement like this :
document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
JavaScript can react to events - A JavaScript can be set to execute when something happens,
like when a page has finished loading or when a user clicks on an HTML element
JavaScript can read and write HTML elements - A JavaScript can read and change the
content of an HTML element
JavaScript can be used to validate data - A JavaScript can be used to validate form data before
it is submitted to a server. This saves the server from extra processing
JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the
visitor's browser, and - depending on the browser - load another page specifically designed for
that browser
JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve
information on the visitor's computer

Perl (Practical Report and Extraction Language):


Perl is a programming language. It was first developed by Larry Wall, a linguist working as a
systems administrator for NASA in the late 1980s, as a way to make report processing easier.
Since then, it has moved into a large number of roles: automating system administration, acting
as glue between different computer systems and, of course, being one of the most popular
languages for CGI programming on the Web.
A typical simple use of Perl would be for extracting information from a text file and printing out
a report or for converting a text file into another form. In fact, the name "Perl" was formed from
the expression "Practical Extraction and Report Language". Programs written in Perl are often
called Perl scripts, especially in the context of CGI programming, whereas the term the perl
program refers to the system program named perl for executing Perl scripts.
Comments are indicated by the # character, and extend to the end of the line. The Perl files have
a file extension ".pl". Perl is case sensitive.
Variables:
The most basic kind of variable in Perl is the scalar variable. Scalar variables hold both strings
and numbers, and are remarkable in that strings and numbers are completely interchangeable,
they are prefixed by an $ symbol.. Array variables have the same format as scalar variables
except that they are prefixed by an @ symbol.

PHP (Hypertext Preprocessor):

• PHP is a server-side scripting language, like ASP


• PHP scripts are executed on the server
• PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL,
Generic ODBC, etc.)
• PHP is an open source software
• PHP files can contain text, HTML tags and scripts
• PHP files are returned to the browser as plain HTML
• PHP files have a file extension ".php"
• PHP runs on different platforms (Windows, Linux, Unix, etc.)
• PHP is compatible with almost all servers used today (Apache, IIS, etc.)

Basic PHP Syntax:


A PHP scripting block always starts with <?php and ends with ?>. A PHP scripting block can be
placed anywhere in the document.

<?php

?>

Comment: // - used to make a single-line comment or /* and */ to make a large comment block.

MySQL:

• MySQL is a database server


• MySQL is ideal for both small and large applications
• MySQL supports standard SQL
• MySQL compiles on a number of platforms

PHP Database:

PHP MySQL Connect to a Database:


Before accessing data in a database, connection must be created to the database.
In PHP, this is done with the mysql_connect() function.

$con = mysql_connect(servername,username,password);

The connection will be closed automatically when the script ends. To close the connection
before, use the mysql_close() function:

mysql_close($con);

Create a Database:
The CREATE DATABASE statement is used to create a database in MySQL.
Syntax:
CREATE DATABASE database_name;

Create a Table:
The CREATE TABLE statement is used to create a table in MySQL.
Syntax:
CREATE TABLE table_name
(
column_name1 data_type,
column_name2 data_type,
column_name3 data_type,
....
);
A database must be selected before a table can be created. The database is selected with the
mysql_select_db() function.

Insert Data Into a Database Table:


The INSERT INTO statement is used to add new records to a database table.
Syntax:
It is possible to write the INSERT INTO statement in two forms.
The first form doesn't specify the column names where the data will be inserted, only their
values:

INSERT INTO table_name


VALUES (value1, value2, value3,...);

The second form specifies both the column names and the values to be inserted:

INSERT INTO table_name (column1, column2, column3,...)


VALUES (value1, value2, value3,...);

Select Data From a Database Table:


The SELECT statement is used to select data from a database.
Syntax:
SELECT column_name(s)
FROM table_name;

Exercises:

1. Develop and demonstrate a XHTML document that illustrates the use


external style sheet, ordered list, table, borders, padding, color, and the
<span> tag.

Solution:
An external style sheet is prepared for the ordered list and for the span tag. It is linked to
the html program using the link tag. Span tag is used to change the format of a part of
text.
External Style Sheet:
/* style.css */

ol {list-style-type: upper-roman;}
ol ol {list-style-type: upper-alpha;}
ol ol ol{list-style-type: decimal;}

span.blue {color:lightskyblue;font-weight:bold}
span.green {color:darkolivegreen;font-weight:bold}

HTML Program:
/* e1.html */

<html>
<head>
<title>Exercise-1</title>
<link rel="stylesheet" type="text/css" href="style.css">
/*rel - Defines the relationship between the current document and the target document*/
</head>
<body>
<!-- Ordered List -->
<h3>Aircraft types</h3>
<ol>
<li>General Aviation
<ol>
<li>Single-Engine Aircraft
<ol>
<li>Tail Wheel</li>
<li>Tricycle</li>
</ol>
</li>
<li>Dual-Engine Aircraft
<ol>
<li>Wing mounted engine</li>
<li>Push-pull engine</li>
</ol>
</li>
</ol>
</li>

</ol>

<p><b>Table (space=10, pad=30, tablecolor=yellow)</b><br><br><br>


<table border="5" cellspacing="10" cellpadding="30" bgcolor="yellow">
<tr>
<th>General Aviation </th>
<th>Dual-Engine Aircraft</th>
</tr>
<tr>
<td>Tail Wheel </td>
<td>Wing mounted engine</td>
</tr>
<tr>
<td>Tricycle </td>
<td>Push-pull engine</td>
</tr>
</table>
<h4> Sample Data </h4>
<p> I/We hereby <span class="blue"> authorize </span>you to complete the transfer/s at any
time without reference to me/us for effectually vesting in you the said shares and securities for
the purpose of settling or transferring the same, and I/We hereby irrevocably undertake to grant
such further <span class="green"> documents</span> as may be found necessary or required by
you effectually vesting in you the said shares/securities.</p>
</body>
</html>

2. Develop and demonstrate a XHTML file that includes JavaScript for the
following problems:
1. Input: A number n obtained using prompt.
Output: The first n Fibonacci numbers.
Why script is given inside comment?
A browser that does not recognize the <script> tag at all, will display the <script> tag's
content as text on the page. To prevent the browser from doing this, you should hide the
script in comment tags. An old browser (that does not recognize the <script> tag) will ignore
the comment and it will not write the tag's content on the page, while a new browser will
understand that the script should be executed, even if it is surrounded by comment tags. It
starts with <!—and ends with // -- > which makes it a JavaScript comment.
JavaScript code can be inserted either in the head of the document (between the <head> and
</head> tags) or in the body (between the <body> and </body> tags)
Solution (a):
/*ex2a.html */

<html >
<head><title> Exercise2a </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>

2. Input: A number n obtained using prompt.


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

Solution (b):
/*ex2b.html */

<html >
<head><title> Exercise2b </title></head>
<body>
<script type="text/javascript">
<!--
var n=prompt("Enter positive value for n: "," ");
while(n<=0) {
alert("Enter positive value");
n=prompt("Enter positive value for n: "," ");
}
document.write("Numbers and their square values displayed using alert ..<br />");
for(i=1;i<=n;i++) {
alert("The Square of " + i + " is " + (i*i) + "\n");
}
// -->
</script>
</body>
</html>

(or)
<html>
<body>
<script type="text/javascript">

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

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

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


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

3. Develop and demonstrate a XHTML file that includes JavaScript script that
uses functions for the following problems:
1. Parameter: A string.
Output: The position in the string of the left-most vowel.

Solution (a):
/*ex3a.html*/

<html >
<head><title> Exercise3b </title></head>
<body>
<script type="text/javascript">
<!--
var str=prompt("Enter a String : ", " ");
var n,i;
document.write("<br />String..<br /><br />");
document.write("The given String is ", str ,"<br />");
var l=str.length;
for(i=0;i<l;i++) {
if(str[i] == 'a' || str[i] == 'e' || str[i]== 'i' || str[i] == 'o' || str[i] == 'u') {
document.write("<br />The position of the left most vowel in the given string is :
", i+1 ,"<br />");
break;
}
}
// -->
</script>
</body>
</html>

2. Parameter: A number.
Output: The number with its digits in the reverse order.

Solution (b):
/*ex3b.html*/

<html >
<head><title> Exercise3b </title></head>
<body>
<script type="text/javascript">
<!--
var r=0,d,n=65645;
document.write("<br />Reversing the given digit..<br /><br />");
document.write("The given digit is ", n ,"<br />");
do{
d=n%10;
n=parseInt(n/10);
r=(r*10)+d;
} while (n>0);
document.write("<br />The reverse of the given digit is ", r ,"<br />");
// -->
</script>
</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 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.
Solution (a):
/*ex4b.html*/

<html>
<head><title>ex4</title>
<script type="text/javascript">
<!--
function chkusn() {
var myusn=document.getElementById("usn");
var pos=myusn.value.search(/^[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z]\d{3}$/);

if(myusn.value== "") {
alert("Enter the USN.");
myusn.focus();
return false;
}
if(pos != 0) {
alert("The format is not correct.");
myusn.focus();
myusn.select();
return false;
} else
return true;
}
//-->
</script>
</head>
<body >

<h3> Validation Example </h3>


<br /><br /><br />
<p> Example to check the format of the data entered in the text box... </p>
<br /><br /><br />
<form action=" ">
<p> USN : <input type="text" id="usn" />
<br /><br /><br />
<input type="submit" id="submit" value="Submit" />
</p>
</form>
<script type="text/javascript">
<!--
// set form element object properties to their corresponding
// event handler functions.

document.getElementById("usn").onchange=chkusn;
//-->
</script>
</body>
</html>

b) Modify the above program to get the current semester also (restricted to
be a number from 1 to 8)

Solution (b):
/*ex4b.html*/

<html>
<head><title>ex4</title>
<script type="text/javascript">
<!--
function chkusn() {
var myusn=document.getElementById("usn");
var pos=myusn.value.search(/^[1-4][A-Z][A-Z]\d{2}[A-Z][A-Z]\d{3}$/);
if(myusn.value== "") {
alert("Enter the USN.");
myusn.focus();
return false;
}
if(pos != 0) {
alert("The format of the USN is not correct.");
myusn.focus();
myusn.select();
return false;
} else
return true;
}
function chksem() {
var mysem=document.getElementById("sem");
var pos=mysem.value.search(/^[1-8]$/);
if(mysem.value== "") {
alert("Enter the SEM value.");
mysem.focus();
return false;
}
if(pos != 0) {
alert("Enter values 1 to 8 for semester.");
mysem.focus();
mysem.select();
return false;
} else
return true;
}
//-->
</script>
</head>
<body >

<h3> Validation Example </h3><br /><br />


<p> Example to check the format of the data entered in the text box... </p><br /><br
/><br />
<form action=" ">
<p> USN : <input type="text" id="usn" /><br /><br />
SEM : <input type="text" id="sem" /><br /><br /><br />
<input type="submit" id="submit" value="Submit" />
</p>
</form>
<script type="text/javascript">
<!--
document.getElementById("usn").onchange=chkusn;
document.getElementById("sem").onchange=chksem;
//-->
</script>
</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.

Solution (a):
/*ex5a.html*/

<html>
<head><title>ex5a</title>
<style type="text/css">
.para1 { position: absolute; top:0; left: 0; z-index: 0;}
.para2 { position: absolute; top:50px; left: 110px; z-index: 0;}
.para3 { position: absolute; top:100px; left: 220px; z-index: 0;}
</style>
</head>
<body >
<p class="para1" id="myDiv1" onMouseOver="var div1 =
document.getElementById('myDiv1'); div1.style.color='red'; div1.style.font='16pt
Times';" onMouseOut="var div1 = document.getElementById('myDiv1');
div1.style.color='black';div1.style.font='12pt Times'" >
I hereby authorize you to complete the transfer/s at any time without reference to me/us
for effectually vesting in you the said shares and securities for the purpose of settling or
transferring the same, and I/We hereby irrevocably undertake to grant such further
documents as may be found necessary or required by you effectually vesting in you the
said shares/securities. I/We agree that the charges for completing the transfers and
registering the shares/securities in your name or in the name of any purchaser to whom
you may sell the shares/securities shall be borne by me/us. I/We also undertake not to do
anything which will in any way impede or obstruct the transfer of the shares/securities to
you or by you or impair your security in any manner.
</p>
<p class="para2" id="myDiv2" onMouseOver="var div1 =
document.getElementById('myDiv2'); div1.style.color='red'; div1.style.font='16pt
Times';" onMouseOut="var div1 = document.getElementById('myDiv2');
div1.style.color='black';div1.style.font='12pt Times'" >
The number of hours between Mountain and Eastern. Change this to whatever the
difference is between your server's time and the preferred time zone. It's a negative
number if you are behind the server time, and a positive number if you are ahead of it.*/
PHP's time() function returns a timestamp of the number of seconds since Jan 1, 1970.
The date() function uses that timestamp in conjunction with the time zone of the server to
display the timestamp into a human-readable value. If you want to use a different time
zone when converting the timestamp, simply add or subtract the number of seconds
differing between your server's time zone and your preferred time zone to the timestamp.
</p>
<p class="para3" id="myDiv3" onMouseOver="var div1 =
document.getElementById('myDiv3'); div1.style.color='red'; div1.style.font='16pt
Times';" onMouseOut="var div1 = document.getElementById('myDiv3');
div1.style.color='black';div1.style.font='12pt Times'" >
Configuration Apache 2.0/PHP5/MySQL4.1.En faite j'ai un problème pour afficher mes
pages, le code html est reconnu mais pas les script php.Pourtant le doc_root est bien le
meme dans la config du serveur apache et de php.Dans le fichier php.ini :doc_root =
CDans le fichier httpd.ini:DocumentRoot Et mes pages web sont bien stockés ici
:C:\Program Files\Apache Group\sgbdJ'ai bien rajouté ces lignes après
LoadModule:LoadModule php5_module :/Program Files/Apache Group/php5/
php5apache2.dllPHPIniDir C:/Program Files/Apache Group/php5Sinon avec easy-php,
tout marchait correctement.Merci par avance.
</p>
</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.

Solution (b):
/*ex5b.html*/
<html>
<head><title>Drag ,Drop</title>
<script type = "text/javascript">
<!--
var diffx,diffy,theelement,posx,posy;
function grabber(event)
{
theelement = event.currentTarget;
posx=parseInt(theelement.style.left);
posy=parseInt(theelement.style.top);

diffx=event.clientX - posx;
diffy=event.clientY - posy;

document.addEventListener("mousemove",mover,true);
document.addEventListener("mouseup",dropper,true);
event.stopPropagation();
//event.preventDefault();
}
function mover(event)
{
theelement.style.left = (event.clientX - diffx) + "px";
theelement.style.top = (event.clientY - diffy) + "px";
event.stopPropagation();
}
function dropper(event)
{
document.removeEventListener("mouseup",dropper,true);
document.removeEventListener("mousemove",mover,true);
event.stopPropagation();
theelement.style.left = posx +"px" ;
theelement.style.top = posy + "px" ;
}

//-->
</script>
</head>
<body >
<p id ="myDiv1" style = "position: absolute; top:0px; left: 0px;" onmousedown =
"grabber(event);" onMouseOver="var div1 = document.getElementById('myDiv1');
div1.style.color='red'; div1.style.font='16pt Times';" onMouseOut="var div1 =
document.getElementById('myDiv1'); div1.style.color='black';div1.style.font='12pt Times'">
I hereby authorize you to complete the transfer/s at any time without reference to me/us for
effectually vesting in you the said shares and securities for the purpose of settling or
transferring the same, and I/We hereby irrevocably undertake to grant such further
documents as may be found necessary or required by you effectually vesting in you the said
shares/securities. I/We agree that the charges for completing the transfers and registering the
shares/securities in your name or in the name of any purchaser to whom you may sell the
shares/securities shall be borne by me/us. I/We also undertake not to do anything which will
in any way impede or obstruct the transfer of the shares/securities to you or by you or impair
your security in any manner.
</p>

<p id="myDiv2" style="position: absolute; top:50px; left: 110px;" onmousedown =


"grabber(event);" onMouseOver="var div1 = document.getElementById('myDiv2');
div1.style.color='red'; div1.style.font='16pt Times';" onMouseOut= "var div1 =
document.getElementById('myDiv2'); div1.style.color='black';div1.style.font='12pt Times'"
>
Offset is the number of hours between Mountain and Eastern. Change this to whatever the
difference is between your server's time and the preferred time zone. It's a negative number if
you are behind the server time, and a positive number if you are ahead of it.*/PHP's time()
function returns a timestamp of the number of seconds
since Jan 1, 1970. The date() function uses that timestamp in conjunction with the time zone
of the server to display the timestamp into a human-readable value. If you want to use a
different time zone when converting the timestamp, simply add or subtract the number of
seconds differing between your server's time zone and your preferred time zone to the
timestamp.
</p>

<p id="myDiv3" style="position: absolute; top:100px; left: 220px;" onmousedown =


"grabber(event);" onMouseOver="var div1 = document.getElementById('myDiv3');
div1.style.color='red'; div1.style.font='16pt Times';" onMouseOut = "var div1 =
document.getElementById('myDiv3'); div1.style.color='black';div1.style.font='12pt Times'"
>
Configuration Apache 2.0/PHP5/MySQL4.1.En faite j'ai un problème pour afficher mes
pages, le code html est reconnu mais pas les script php.Pourtant le doc_root est bien le meme
dans la config du serveur apache et de php.Dans le fichier php.ini :doc_root = CDans le
fichier httpd.ini:DocumentRoot Et mes pages web sont bien stockés ici :C:\Program
Files\Apache Group\sgbdJ'ai bien rajouté ces lignes après LoadModule:LoadModule
php5_module :/Program Files/Apache Group/php5/php5apache2.dllPHPIniDir C:/Program
Files/Apache Group/php5Sinon avec easy-php, tout marchait correctement.Merci par avance.
</p>

</body>
</html>

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, and 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.

Solution (a):
/* e6a.xml */

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


<?xml-stylesheet type="text/css" href="e6a.css"?>
<studentlist>
<student>
<usn>2WR45JG462</usn>
<name>Shwetha</name>
<college>RVCE</college>
<branch>MCA</branch>
<joindate>15-Aug-2005</joindate>
<emailid>shwetha@yahoo.com</emailid>
</student>
<student>
<usn>4TU45BG454</usn>
<name>Shalini</name>
<college>RVCE</college>
<branch>MCA</branch>
<joindate>15-Aug-2005</joindate>
<emailid>shwetha@yahoo.com</emailid>
</student>
<student>
<usn>4ER87VH654</usn>
<name>Rupa</name>
<college>RVCE</college>
<branch>MCA</branch>
<joindate>15-Aug-2005</joindate>
<emailid>shwetha@yahoo.com</emailid>
</student>
</studentlist>
/* e6a.css */

student {display: block; margin-top:15px; color: blue; }


usn {display: block; color: maroon; font-size:16pt; }
name {display: block; color: green; font-size:12pt; }
college {display: block; color: green; font-size:12pt; }
branch {display: block; color: green; font-size:12pt;}
joindate {display: block; color: green; font-size:12pt; }
emailid {display: block; color: green; font-size:12pt; }

b) Create an XSLT style sheet for one student element of the above
document and use it to create a display of that element.

Solution (b):
/* s1.xml */

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


<?xml-stylesheet type="text/xsl" href="s2.xsl"?>
<document>
<studentlist>
<student>
<usn>2WR45JG462</usn>
<name>Shwetha</name>
<college>RVCE</college>
<branch>MCA</branch>
<joindate>15-Aug-2005</joindate>
<emailid>shwetha@yahoo.com</emailid>
</student>
<student>
<usn>4TU45BG454</usn>
<name>Shalini</name>
<college>RVCE</college>
<branch>MCA</branch>
<joindate>15-Aug-2005</joindate>
<emailid>shwetha@yahoo.com</emailid>
</student>
<student>
<usn>4ER87VH654</usn>
<name>Rupa</name>
<college>RVCE</college>
<branch>MCA</branch>
<joindate>15-Aug-2005</joindate>
<emailid>shwetha@yahoo.com</emailid>
</student>
</studentlist>
</document>

/* s2.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="document">
<html>
<head><title>Title</title></head>
<body>
<table>
<tr>
<td valign="top">
<xsl:apply-templates select="studentlist" />
</td>
</tr>
</table>
</body>
</html>
</xsl:template>

<xsl:key name="student-by-usn" match="student" use="usn" />


<xsl:template match="studentlist">
<table border="1">
<xsl:for-each select="key('student-by-usn', '2WR45JG462')">
<tr>
<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="joindate"/>
</td>
<td>
<xsl:value-of select="emailid"/>
</td>
</tr>
</xsl:for-each>
</table>
</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.

Solution (a):
/* abc.pl */

#! /usr/bin/perl
# This line tells the machine to run the file through Perl
# Environment variables can be accessed using $ENV.
print "content-type:text/html","\n\n";
print "<html><body>server info<br>";
print "<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></body></html>";

b) Write a Perl program to accept UNIX command from a HTML form and
to display the output of the command executed.
Solution (b):
/* e7b.html */

<html>
<body bgcolor="yellow">
<form action="http://localhost/cgi-bin/e7b.pl" method="get">
<input type="text" name="command" size=40>
<input type="submit" value="Execute" >
<input type="reset" value="clear">
</form>
</body></html>

/* e7b.pl */

#!/usr/bin/perl

use CGI ':standard';


print "content-type: text/html","\n\n";
$input=param(command);
print header;
print " ";
print "<html><body><h1>Command Result</h1><br>command executed :",$command ;
system($input);
print "</body></html>";

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.

Solution (a):
/* e8a.html */

<html>
<head>
<title>Accept Username</title>
</head>
<body bgcolor="aqua">
<font color="red"> ENTER THE NAME : </font>
<form action="http://localhost/cgi-bin/e8a.pl" method="get">
<br>
<input type="text" name="username" size=40>
<input type="submit" value="Submit" >
<input type="reset" value="Clear">
</form>
</body></html>

/* e8a.pl */

#! /usr/bin/perl

use CGI':standard';
print "content-type:text/html","\n\n";
$input=param(username);
print " <h1>Hi!</h1>",$input;
my @msgs = ("Goog Day", "***Welcome****", "Fine Day","Best Wishes");
print "<h1>";
print $msgs[int rand scalar @msgs];
print "</h1>--Thanks for visiting";

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.
Solution (b):
/*count.pl */

#!/usr/bin/perl
print "content-type:text/html","\n\n";
print "<html><body>server info<br>";
$file = 'colours.txt'; # Name the file
open(INFO, $file); # Open the file
$n = <INFO>; # Read it into an array
close(INFO);
print $n;

open INFO, ">colours.txt";


print INFO ++$n;
close INFO;

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

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

Solution:
/* ex9.pl */

#! /usr/bin/perl
use CGI':standard';
$de=1;
print "Refresh:",$de,"\n";
print "content-type:text/html","\n\n";
print "<html><body>Digital clock<br>";
($s,$m,$h)=localtime(time);
print "<br><br>The current system time is $h hours $m minutes $s seconds";

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

Solution:
/* exer10.html*/

<html>
<head><title>exercise14</title></head>
<body>
<form action="http://localhost/cgi-bin/exer10.pl" method="post">
ID : <input type="text" name="id"><br>
Name : <input type="text" name="name"><br>
Age : <input type="text" name="age"><br>
<input type="Submit">
</form>
</body>
</html>

/* exer10.pl*/

#! /usr/bin/perl

use CGI ':standard';


use DBI;
print "content-type:text/html","\n\n";
print "<html><title>Connection</title><body>connection<br>";
$id = param("id");
$name=param("name");
$age=param("age");
$dbh=DBI->connect("DBI:mysql:mysql","root","brpbrp");
$sqlinsert="insert into info values('$name','$age','$id')";
$qh=$dbh->prepare($sqlinsert);
$qh->execute();
$sqlselect="Select * from info";
$qh=$dbh->prepare($sqlselect)
or die "Couldn't prepare query '$sql': $DBI::errstr\n";
$qh->execute();
print "<table border size=1><tr><th>ID</th><th>Name</th><th>Age</th></tr>";
while ( ($name,$age,$id)=$qh->fetchrow())
{
print "<tr><td>$id</td><td>$name</td><td>$age</td></tr>";
}
print "</table>";
$qh->finish();
$dbh->disconnect();
print "<br></body></html>";

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.
Solution:
/* datetime.php */

<?
// get current date information as associative array

if(isset($_COOKIE['Datee']))
{
$cookiedate = $_COOKIE['Datee'];
}
$todayh = getdate();
$d = $todayh[mday];
$m = $todayh[mon];
$y = $todayh[year];
$hr = $todayh[hours];
$mi = $todayh[minutes];
$se = $todayh[seconds];
$datestring ="$d-$m-$y, $hr:$mi:$se";
setcookie("Datee",$datestring);
print "Program for creating and displaying cookie";
print"<br>";
echo "<br>Hello, ".$cookiedate."! last visited!";
print"<br>";
?>

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.

Solution:
/* ex12.php */

<?php
session_start();
if(isset($_SESSION['count'])){
print "Your session count: ".$_SESSION['count']. "<br>";
$_SESSION['count']++;
} else {
$_SESSION['count'] = 1;
print "Session does not exist";
}
?>
-------------------------------(or)---------------------------------
/* e12.php */

<?php
// initialize a session
session_start();
// increment a session counter
$_SESSION['counter']++;
// print value
echo "You have viewed this page " . $_SESSION['counter'] . " times";
?>

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.

Solution:
/* exer13.html */

<html>
<head><title>exercise13</title></head>
<body>
<form action="exer13.php" method="post">
ID : <input type="text" name="id"><br>
Name : <input type="text" name="name"><br>
Address 1 : <input type="text" name="add1"><br>
Address 2 : <input type="text" name="add2"><br>
Email : <input type="text" name="email"><br><br><br>
Enter the name to retrieve data’s : <input type="text" name="sname"><br>
<input type="Submit">
</form>
</body>
</html>

/* exer13.php */

<?
$username="root";
$password="brpbrp";
$database="mysql";

$id=$_POST['id'];
$name=$_POST['name'];
$add1=$_POST['add1'];
$add2=$_POST['add2'];
$email=$_POST['email'];
$sname=$_POST['sname'];
mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die("Unable to select database");

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


mysql_query($query);
$query1="SELECT * FROM person where name = '$sname'";
$result=mysql_query($query1);

$num=mysql_numrows($result);
echo"<b>Output</b>";

print "<table border


size=1><tr><th>ID</th><th>Name</th><th>Add1</th><th>Add2</th><th>Email</th></tr>";

$i=0;
while($i<$num) {
$id=mysql_result($result,$i,"id");
$name=mysql_result($result,$i,"name");
$add1=mysql_result($result,$i,"add1");
$add2=mysql_result($result,$i,"add2");
$email=mysql_result($result,$i,"email");
echo
“<tr><td>$id</td><td>$name</td><td>$add1</td><td>$add2</td><td>$email</td></tr>";
$i++;
}
print "</table>";
mysql_close();
?>

14. Using PHP and MySQL, develop a program 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.

Solution:
/* phpconn.html */

<html>
<head><title>exercise14</title></head>
<body>
<form action="insert.php" method="post">
ID : <input type="text" name="id"><br>
Accession number: <input type="text" name="accno"><br>
Title : <input type="text" name="title"><br>
<input type="Submit">
</form>
</body>
</html>

/* insert.php */

<?
$username="root";
$password="brpbrp";
$database="mysql";

$id=$_POST['id'];
$accno=$_POST['accno'];
$title=$_POST['title'];

mysql_connect(localhost,$username,$password);
@mysql_select_db($database) or die("Unable to select database");

$query="INSERT INTO library VALUES ('$id','$accno','$title')";


mysql_query($query);
$query1="SELECT * FROM library";
$result=mysql_query($query1);

$num=mysql_numrows($result);

echo"<b>Output</b>";

print "<table border size=1><tr><th>ID</th><th>Accno</th><th>Title</th></tr>";

$i=0;
while($i<$num) {
$id=mysql_result($result,$i,"id");
$accno=mysql_result($result,$i,"accno");
$title=mysql_result($result,$i,"title");

echo "<tr><td>$id</td><td>$accno</td><td>$title</td></tr>";
$i++;
}

print "</table>";
mysql_close();
?>