Professional Documents
Culture Documents
IV SEMESTER
Name:
Reg. No.
Batch
CONTENTS
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.
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.
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
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
<?php
?>
Comment: // - used to make a single-line comment or /* and */ to make a large comment block.
MySQL:
PHP Database:
$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.
The second form specifies both the column names and the values to be inserted:
Exercises:
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>
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>
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">
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>
<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 >
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 >
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>
</body>
</html>
Solution (a):
/* e6a.xml */
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 */
/* s2.xsl */
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
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;
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
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");
$num=mysql_numrows($result);
echo"<b>Output</b>";
$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");
$num=mysql_numrows($result);
echo"<b>Output</b>";
$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();
?>