journal 2014 web

8/10/2019 Journal 2014 WEB

1/32

WEB PROGRAMMING LABORATORY 10CSL78

Dept of CSE, JCE-Belgaum

World Wide Web: WWW

We are all very familiar with the word WWW. Yes & that stands forWorld wide webwhich

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 Weband 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 theresources 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:

My Web Page

HTML is a markup language. It tells the web browser how to display content. The text between

and describes the web page, the text between and 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

8/10/2019 Journal 2014 WEB

2/32



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:

alert("Hello World")

However, although the SCRIPT tags are not case sensitive Javascript very definitely is.

Syntax:

Example:

First Java Script

Alert(Hello JCE)

8/10/2019 Journal 2014 WEB

3/32



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 "

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

.....

8/10/2019 Journal 2014 WEB

4/32



Steps for Logging into server 192.168.1.227:

Step 1:Login with ssh using Individual USN[student@CCPFED-001 ~]$ ssh [email protected]@192.168.1.227's password:

Ssh stands for secure shell and ssh(SSH client) is a program for logging into a remotemachine 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 permissionsthat specifywho and what can read, write, modify and access them. Chmod 755 means read andexecute access for everyone and also write access for the owner of the file. When youperform chmod 755 filenamecommand 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 windowhttp://192.168.1.227/~ji10cs001/1.html

8/10/2019 Journal 2014 WEB

5/32



LAB PROGRAMS

8/10/2019 Journal 2014 WEB

6/32



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

a) Input: A number n obtained using promptOutput: The first n Fibonacci numbers

b) Input: A number n obtained using promptOutput: A table of numbers from 1 to n and their squares using alert

a)

8/10/2019 Journal 2014 WEB

7/32



document.write("
");

for(i=2;i

8/10/2019 Journal 2014 WEB

8/32



Output:

8/10/2019 Journal 2014 WEB

9/32



b)

lab prog 2b

printing numbers & calculating their squares

var n,i;

n=prompt("enter a no:");

if(n

8/10/2019 Journal 2014 WEB

10/32



Output:

8/10/2019 Journal 2014 WEB

11/32



2. a) Develop and demonstrate, using Javascript script, a XHTML document that collectsthe 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)

JCE 2a

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

8/10/2019 Journal 2014 WEB

12/32



return false;

}

else

alert("Its valid");

}

ENTER THE USN:

8/10/2019 Journal 2014 WEB

13/32



Output:

8/10/2019 Journal 2014 WEB

14/32



b)

// to check if USN is valid and display the semester

JCE 2B

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

8/10/2019 Journal 2014 WEB

15/32



}

else

{

r = res*2;

if(r

8/10/2019 Journal 2014 WEB

16/32



ENTER YOUR USN:

8/10/2019 Journal 2014 WEB

17/32



Output 1:

8/10/2019 Journal 2014 WEB

18/32



Output 2:

8/10/2019 Journal 2014 WEB

19/32



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

#! => 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 onbrowser 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.
http://192.168.1.227/~ji10cs001/5a.htmlhttp://192.168.1.227/~ji10cs001/cgi-bin/5a.plhttp://192.168.1.227/~ji10cs001/cgi-bin/5a.plhttp://192.168.1.227/~ji10cs001/5a.html

8/10/2019 Journal 2014 WEB

20/32



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

JCE 5a

Welcome to JCE!

Please Click on ENTER button to see the server Information

8/10/2019 Journal 2014 WEB

21/32



//5a.pl

#!/usr/bin/perl

use CGI ":standard";

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

print " Server Info ";

print "
","Server Name:",$ENV{'SERVER_NAME'};

print "
","Server Software:",$ENV{'SERVER_SOFTWARE'};

print "
","Server Protocol:",$ENV{'SERVER_PROTOCOL'};

print "
","CGI Revision:",$ENV{'GATEWAY_INTERFACE'};

print " ";

exit(0);

8/10/2019 Journal 2014 WEB

22/32



Output:

//5a.html

//5a.pl

8/10/2019 Journal 2014 WEB

23/32



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

JCE 5b

Enter the command

8/10/2019 Journal 2014 WEB

24/32



// 5b.pl

#!/usr/bin/perl -w

use CGI ":standard";

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

$command = param('txtcommand');

system($command);

exit(0);

8/10/2019 Journal 2014 WEB

25/32



Output:

//5b.html

//5b.pl

8/10/2019 Journal 2014 WEB

26/32



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

server.

#!/usr/bin/perluse 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;

8/10/2019 Journal 2014 WEB

27/32



Output:

8/10/2019 Journal 2014 WEB

28/32



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 thevisitors to the personal websites.

Today the acronym of PHP stands for Hypertext Preprocessor. PHP code is embedded in XHTML file by enclosing between tags.

What is a Cookie?

A cookie is often used to identify a user. A cookie is a small file that the server embeds onthe user's computer. Each time the same computer requests a page with a browser, it willsend 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 specifythree 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 browseris restarted.

The PHP $_COOKIEvariable 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 $_SESSIONvariable.

8/10/2019 Journal 2014 WEB

29/32



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.

8/10/2019 Journal 2014 WEB

30/32



Output:

8/10/2019 Journal 2014 WEB

31/32



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.

8/10/2019 Journal 2014 WEB

32/32


Output: