Journal 2014 WEB

WEB PROGRAMMING LABORATORY
10CSL78
World Wide Web: WWW

We are all very familiar with the word WWW. Yes & that stands for World wide web which
allows computer users to locate and view multimedia based documents (i.e. documents with text,
graphics, animations, audios and/or videos) on almost any subject. Even though the internet was
developed more than three decades ago the introduction of world wide web was a relatively
recent event. In 1990 Tim-Berners Lee of CERN (European Laboratory for particle physics)
developed the World Wide Web and several communication protocols that form the backbone
of WWW.
It is important to note that Internet & Web are not the same thing. Internet is a collection of
computers and other devices connected by equipment that allows them to communicate with
each other. Web is a collection of software & protocols that has been installed on most of the
computers on the internet.
Documents provided by servers on the web are requested by browsers, which are programs
running on user machines. They are called browsers because they allow the user to browse the
resources available on servers.
Web programming gives your web site an interactive edge. Programming is a given written
instructions in a logical manner that the computer can understand. Web site programming is the
same except you write applications or web pages that are used by a web browser. Instead of
static sites which simply present information, web programming allows a web site to do more
such as saving and storing information and databases, creating forms to contact someone or send
information, making games, bulletin boards, chat rooms and so forth. Web programming
languages are strictly for creating scripts to use on the web.
Basically, you will embed code within your normal HTML pages.
Something like this:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
</body>
</html>
HTML is a markup language. It tells the web browser how to display content. The text between
<html> and </html> describes the web page, the text between <body> and </body> is the visible
page content.
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to
read HTML documents and display them as web pages. The browser does not display the HTML
Dept of CSE, JCE-Belgaum
10CSL78
tags, but uses the tags to determine how the content of the HTML page is to be
presented/displayed to the user:
Introduction to JavaScript:
JavaScript is scripting language used for client side scripting. It is a programming language used
to make web pages interactive. It runs on your visitor's computer and doesn't require constant
downloads from your website. JavaScript support is built right into all the major web browsers,
including Internet Explorer, Firefox and Safari. Provided that the visitors to your site are using
web browsers that support JavaScript (most do) and have JavaScript enabled (it is by default),
then your JavaScript will run when they visit the page.
Any Javascript you want to add needs to go between the two SCRIPT tags. Careful of the
forward slash for the end SCRIPT tag - miss this out and your code won't work. Like all HTML
tags, though, the two SCRIPT tags can be lowercase, if you prefer:
<script>
alert("Hello World")
</script>
However, although the SCRIPT tags are not case sensitive Javascript very definitely is.
Syntax:
<script type="text/javascript">
<!-document.write("JavaScript is not Java");
-->
</script>
Example:
<html>
<head>
<title>First Java Script</title>
</head>
<body>
<script language="JavaScript">
Alert(Hello JCE)
</script>
</body>
</html>
10CSL78
Introduction to XML
HTML was designed for how to display data. And XML was designed for how to store data.
HTML tags are predefined (for example "<p>", "<table>", etc.).
But XML tags are not predefined. We can define our own tags
XML is a meta-markup language that provides a framework for defining specialized markup
languages
XML Syntactic Rules

The following are the XML syntactic rules:
A XML document must contain a pair, and only a pair, of root tags
All XML elements must have an opening tag and a closing Tag.
XML tags are case sensitive.
An element in XML can has its child element.
All elements in XML must be properly nested within each other.
XML attribute values must be quoted.
XML documents must contain one element that is the parent of all other elements. This
element is called the root element.
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
10CSL78
Steps for Logging into server 192.168.1.227:

Step 1: Login with ssh using Individual USN
[student@CCPFED-001 ~]$ ssh ji10cs001@192.168.1.227
ji10cs001@192.168.1.227's password:
Ssh stands for secure shell and ssh (SSH client) is a program for logging into a remote
machine and for executing commands on a remote machine.
Step 2: Make a directory with the name Public_html

[ji10cs001@cfed-0001 ~]$ mkdir public_html
[ji10cs001@cfed-0001 ~]$ cd public_html
Step 3: Make a sub directory under Public_html by the name cgi-bin
[ji10cs001@cfed-0001 public_html]$ mkdir cgi-bin
Step 4: Change the permission of cgi-bin to rwxr_xr_x i.e chmod 755
[ji10cs001@cfed-0001 public_html]$ chmod 0755 cgi-bin/
On computer filesystems, different files and directories have permissions that specify
who and what can read, write, modify and access them. Chmod 755 means read and
execute access for everyone and also write access for the owner of the file. When you
perform chmod 755 filename command you allow everyone to read and execute the file,
owner is allowed to write to the file as well
Step 5: Open vi editor with filename extension like .php, .html, .pl
[ji10cs001@cfed-0001 public_html]$ vi 1.html
CGI programs are created under cgi-bin and permissions should be change to execute the program i.e.
[ji10cs001@cfed-0001 cgi-bin]$ vi 1.pl
[ji10cs001@cfed-0001 cgi-bin]$ chmod 755 1.pl
Step 6: To run the programs, Open the browser and type the following on browser window
http://192.168.1.227/~ji10cs001/1.html
LAB PROGRAMS
10CSL78
10CSL78
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
a)
<? XML version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC".//w3c/DTD XHTML 1.1/EN"
"http!//www.w3.org/TR/XHTML11/DTD/xhtml11.dtd"

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PROGRAM TO FIND FIBONACCI NUM </title>
</head>
<body>
<h3>fibonacci numbers</h3>
<!-var f1=0,f2=1,f3,n,i;
n=prompt("Enter the num n");
if(n==0)
{
document.write("plz enter a num greater than zero");
exit(0);
}
else if(n==1)
{
document.write("fibonacci num series:<br />");
document.write(f1);
exit(0);
}
else if(n>1)
{
document.write("fibonacci num series:<br />");
document.write(f1);
document.write("<br />");
document.write(f2);

for(i=2;i<n;i++)
{
f3=f1+f2;
document.write(f3);
f1=f2;
f2=f3;
}
}
else
{
document.write("invalid input");
}
</script>
</body>
</html>
10CSL78

Output:
10CSL78

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

<head>
<title> lab prog 2b</title>
</head>
<body>
<h1> printing numbers & calculating their squares</h1>
<hr>
<script type = "text/javascript">
var n,i;
n=prompt("enter a no:");
if(n<=0)
{
alert("enter a positive no");
}
else
{
var c="Squares";
for(i=1;i<=n;i++)
{
c=c+ "\n"+i+"--->"+" "+i*i+"\n";
}
alert(c);
}
</script>
</body>
</html>
10CSL78

Output:
10CSL78
10CSL78
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
a)
<? 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"
<!USN javaScript-->
<head>
<title>JCE 2a</title>
</head>
<body>
function func(usn)
{
var reg=/[1-4][A-Z][A-Z][1][0-9][A-Z][A-Z][0-9][0-9][0-9]/;
if(usn.value.length > 10)
{
alert('please enter the valid usn number');
return false;
}
else if(!usn.value.match(reg)||usn.value.length==0)
{
alert(" Invalid! enter a valid USN in VTU format");

return false;
}
else
alert("Its valid");
}
</script>
<form>
ENTER THE USN:
<input type="text" name="usn" size="30">
<input type="button" value="click" onclick="func(usn)">
</form>
</body>
</html>
10CSL78

Output:
10CSL78

b)
// to check if USN is valid and display the semester
<html>
<head>
<title> JCE 2B </title>
</head>
<body>
<script type = "text/javascript">
function disp(str)
{
var r;
var reg = /[1-4][A-Z][A-Z][0-9][0-9][A-Z][A-Z][0-9][0-9][0-9]/;
if(!str.value.match(reg)|| str.value.length == 0)
{
alert("Invalid! enter a valid usn");
return false;
}
else
alert("Its valid");
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth();
var sm = 201+ str.value[4];
res = y - sm;
if(m<7)
{
if(str.value[7]== 4)
{
r = res*2+2;
if(r<8)
{
alert("EVEN semester :"+r);
}
else
alert("STUDENT ALREADY GRADUATED");
10CSL78
}
else
{
r = res*2;
if(r<8)
{
alert("EVEN semester:"+r);
}
else
}
}
else
{
if(str.value[7]==4)
{
r = res*2+3;
if(r<8)
{
alert("ODD semester:"+r);
}
else
}
else
{
r = res*2+1;
if(r<8)
{
alert("ODD semester:"+r);
}
else
}
}
}
</script>
<form>
10CSL78

ENTER YOUR USN:
<input type = "text" name = "str" size = "15" maxlength = "10"> <br />
<input type = "button" value = "CLICK" onclick = "disp(str)">
<input type = "reset" value= "RESET" >
</form>
</body>
10CSL78

Output 1:
10CSL78

Output 2:
10CSL78
10CSL78
PERL PROGRAMS
PERL stands for Practical Extraction & Reporting Language developed by Larry Wall in
1987. It is a server side scripting language.
#! /usr/local/bin/perl w
#! => Program whose location follows must be executed on rest of the file.
/usr/local/bin/perl => Path to perl system.
So the above line is called as shebang line
Save the .html files in public_html
Now change the directory to cgi-bin

[ji10cs003@cfed-0001 ~]$ cd cgi-bin
Type the program in the vi editor and save with a .pl extension
[ji10cs003@cfed-0001 ~]$ vi 5a.pl
Set the execution permission for the .pl file

[ji10cs003@cfed-0001 ~]$ chmod 755 5a.pl
Open the Mozilla Web browser and type

http://192.168.1.227/~ji10cs001/5a.html
This html file will call the corresponding .pl file and the output will be displayed on
browser window.
If there is no .html file associated with .pl file just type the entire path of .pl file as follows
http://192.168.1.227/~ji10cs001/cgi-bin/5a.pl
This will display the output on browser window.
10CSL78
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.
To display the server information, five environment variables, SERVER_NAME,
SERVER_PORT, SERVER_SOFTWARE, SERVER_PROTOCOL, and CGI_REVISION are
used to print the name of the machine where the server is running, the port the server is running
on, the server software, and the CGI revisions.
a) //5a.html
<?XML version = "1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhtml10/DTD/xhtml10.dtd">
<html xmlns="http://www.w3.org/1999/xthml">
<head>
<title> JCE 5a </title>
</head>
<body>
<form name="jce5a" method = "get" action ="http://192.168.1.227/~ji10cs003/cgi-bin/5a.pl">
<h2>Welcome to JCE!</h2>
<h2> Please Click on ENTER button to see the server Information </h2>
<br />
<input type="Submit" name="submit" value="Enter">
</form>
</body>
</html>

//5a.pl
#!/usr/bin/perl
use CGI ":standard";
print "Content-type:text/html","\n\n";
print "<html><head><title> Server Info </title> </head> <body>";
print "<br />","Server Name:",$ENV{'SERVER_NAME'};
print "<br />","Server Software:",$ENV{'SERVER_SOFTWARE'};
print "<br />","Server Protocol:",$ENV{'SERVER_PROTOCOL'};
print "<br />","CGI Revision:",$ENV{'GATEWAY_INTERFACE'};
print "</body> </html>";
exit(0);
10CSL78

Output:
//5a.html
//5a.pl
10CSL78
10CSL78
Description for program 5b:
The HTML Page provides a simple interface to accept the UNIX command from the user.
After the command is entered, the Perl program is invoked. The command entered by the
user is sent via the Query String.
The Perl program has a use CGI : standard. This use pragma ensures that the program
has access to all the methods that CGI.pm (Perl Module) provides.
The standard signifies that only appropriate functions are used for the wide range of
browsers. An alternate of this could be use CGI : all
The param() function is used to capture the parameters that are received from the HTML
page.
This value is stored in a variable called $command.
5b)
<?XML version = "1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"
"http://www.w3.org/TR/xhtml10/DTD/xhtml10.dtd">
<html xmlns="http://www.w3.org/1999/xthml">
<head>
<title> JCE 5b </title>
</head>
<body>
<form name="jce5b" method = "post" action="http://192.168.1.227/~ji10cs003/cgi-bin/5b.pl">
<h2> Enter the command </h2>
<br />
<input type="text" name="txtcommand" />
<input type="submit" name="submitbutton" value="Enter"/>
</form>
</body>
</html>
// 5b.pl
#!/usr/bin/perl -w
use CGI ":standard";
print "Content-type:text/html","\n\n";
$command = param('txtcommand');
system($command);
exit(0);
10CSL78

Output:
//5b.html
//5b.pl
10CSL78
10CSL78
7. Write a Perl program to display a digital clock which displays the current time of the
server.

#!/usr/bin/perl
use CGI ':standard';
print "Refresh: 1\n";
print "Content-Type: text/html\n\n";
print start_html(-title=>"Program 8",-bgcolor=>"Black",-text=>"white");
($s,$m,$h)=localtime(time);
print br,br,"The current system time is $h:$m:$s";
print br,br,hr,"In words $h hours $m minutes $s seconds";
print end_html;

Output:
10CSL78
10CSL78
PHP PROGRAMS
PHP is a server side scripting language developed by Rasmos Lerdorf in 1994.

Initially the acronym was PHP: Personal Home page, because the purpose was to track the
visitors to the personal websites.
Today the acronym of PHP stands for Hypertext Preprocessor.
PHP code is embedded in XHTML file by enclosing between <?php and ?> tags.
What is a Cookie?
A cookie is often used to identify a user. A cookie is a small file that the server embeds on
the user's computer. Each time the same computer requests a page with a browser, it will
send the cookie too. With PHP, you can both create and retrieve cookie values.
The setcookie() function is used to set a cookie. While setting a cookie, we must specify
three arguments. These arguments are setcookie(name, value, expiration):
1. name: The name of the cookie. This name is used later to retrieve the cookie.
2. value: It is the value that is stored in cookie. Common values are username(string) and
last visit(date).
3. expiration: The date when the cookie will expire and be deleted. If this expiration date
isnt set, then it will be treated as a session cookie and will be removed when the browser
is restarted.
The PHP $_COOKIE variable is used to retrieve a cookie value.

isset() function is used to make sure that our cookie still exists on the user's PC, if it does,
then the user's last visit is displayed.
PHP Sessions
A normal HTML website will not pass data from one page to another. In other words, all
information is forgotten when a new page is loaded. This makes it quite a problem for
tasks like a shopping cart, which requires data(the user's selected product) to be
remembered from one page to the next.
A PHP session solves this problem by allowing us to store user information on the server
for later use (i.e. username, shopping cart items, etc). However, this session information
is temporary and is usually deleted very quickly after the user has left the website that
uses sessions.
Before you can begin storing user information in your PHP session, you must first start
the session. When you start a session, it must be at the very beginning of your code,
before any HTML or text is sent.
PHP Session is started using session_start() function
To store and retrieve session variables is done using the PHP $_SESSION variable.
10CSL78
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.
In this program we will be creating a cookie that stores the user's last visit to measure how often
they return to visit the webpage. We want to ignore people that take longer than two months to
return to the site, so we will set the cookie's expiration date to two months in the future.
<?php
$inTwoMonths=60*60*24*60+time();
setcookie('lastVisit',date("G:i - m/d/y"),$inTwoMonths);
if(isset($_COOKIE['lastVisit']))
{
$visit=$_COOKIE['lastVisit'];
echo "Your last visit was - ".$visit;
}
else
echo "You've got some EXPIRED cookies!";
?>

Output:
10CSL78
10CSL78
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();
if(isset($_SESSION['views']))
$_SESSION['views']=$_SESSION['views']+1;
else
$_SESSION['views']=1; //store data
echo "views=".$_SESSION['views']; //retrieve data
echo "<br/>";
echo "<br/>";
echo "reload this page to increment";
?>

Output:
10CSL78

Journal 2014 WEB

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Journal 2014 WEB

Uploaded by

Copyright:

Available Formats

WEB PROGRAMMING LABORATORY

World Wide Web: WWW

WEB PROGRAMMING LABORATORY

WEB PROGRAMMING LABORATORY

HTML tags are predefined (for example "<p>", "<table>", etc.).

XML Syntactic Rules

XML tags are case sensitive.

An element in XML can has its child element.

All elements in XML must be properly nested within each other.

XML attribute values must be quoted.

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Steps for Logging into server 192.168.1.227:

Step 2: Make a directory with the name Public_html

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

WEB PROGRAMMING LABORATORY

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Save the .html files in public_html

Now change the directory to cgi-bin

Set the execution permission for the .pl file

Open the Mozilla Web browser and type

This will display the output on browser window.

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Description for program 5b:

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

Dept of CSE, JCE-Belgaum

WEB PROGRAMMING LABORATORY

PHP is a server side scripting language developed by Rasmos Lerdorf in 1994.