Active Web Exercise 1

This is the first half of the COT2030/COT3500 WEB Practical exercise. This week and next you will learn how to create active web pages able to perform dynamic forms based queries.

This exercise will take from 3 to 12 hours depending on your Unix and shell scripting experience.

Please use Netscape Navigator 3 or Netscape Navigator Gold version 3 or later.

In this exercise, you will

1. create a static web page,
2. ensure it meets the HTML standards,
3. learn about client side animation:
• Blinking text,
• gif89a (animated gif files),
• JavaScript,
• Java Applets,
4. create a basic HTML data entry form,
5. learn about basic dynamic HTML:
• execute a simple basic server side program,
6. extend HTML form knowledge:
• create output that depends on the data entered in a form
• create a data queries application

First section

First create a static WWW page.

You each have a student account on silas.cc.monash.edu.au.

Telnet to silas and logon.

Ensure your silas home directory is world readable and world accessible with the command

chmod a+rx ~

In your silas home directory, create a directory for your web pages. It must be called WWW use the command

mkdir WWW

Hint: must be upper-case, WWW not lower-case www.

Make the directory world readable and world accessible with the commands

ls -l
chmod a+rx WWW
ls -l

Change directory to WWW and create a personal home page, use your favourite editor on silas, the file must be called index.html

Hint

Create a file called index.html containing only one line say "This is my page"

View your home page with netscape, the URL is http://www-personal.monash.edu.au/~userid/index.html where userid is your silas user ID. Here is the Monash Personal Home page server home.

Security note

Directories in WWW will be served out over the web if you allow x access, for example, if you create a directory in WWW say dir1, use the following commands

mkdir dir1
ls -l
chmod a+rx dir1
ls -l

Files in directories served out will be served out over the web if the files allow r access, if you create a web page in directory WWW or dir1 say page1.html, use the following command

chmod a+r page1.html

Such a page would be at http://www-personal.monash.edu.au/~userid/dir1/page1.html

Create such a page and test that it is accessible in Netscape.

Second section

You have now created at least two Web pages. You used (perhaps very little) HTML to do that. Is your HTML standard? In this section we consider some quality issues. Style, standards and performance are the key concepts.

Test your pages and eliminate as many errors as possible.

Here is a page which will test your HTML.

This is not the end of the Web page quality story. Look through these other pages for advice on Web page quality.

• Netscape Creating Web Sites
• NCSA Beginners Guide
• Netscape Composing Good HTML
• Monash WWW Developers
• Test your WWW viewer
• Monash HTML Validation Service
• Use a template to get a consistent style, here is a stub WWW page in the style of this page.
• W3C is the World Wide Web Consortium, They set the HTML standards. For details try this.
• Performance, speed to display, is important. Here is what Netscape say about performance (not yet implemented).

Third section

Use View/ View Document Source to learn how to make parts of your document active (move).

In this section we study methods for client side animation:

• Blinking text,
• gif89a (animated gif files), to view an animated gif, click here.
• JavaScript, What is this thing called Javascript? Here is a Javascript writers guide.
• Java Applets,
• Special HTML extensions line Background sound, marquee (scrolling text) etc,

Fourth section

The next task is to create a basic HTML data entry form.

If you have access to the Internet, you can try all the following exercise. If you don't have Internet access, you can still prepare the form, but your won't be able to submit the data in the form to the server.

Prepare a file on your PC using your favourite WEB authoring or text editing program. The file should contain an HTML form with the following form field types:-

1. A hidden field called AAscript with value script1
2. A simple text field called AAtext with no initial value
3. A simple text field of TYPE=PASSWORD called AApw with initial value hardrun
4. A multi-line text field called AAlines
5. A selection (drop down list) field called AAselect with at least three items in the drop down list
6. A set of 3 RADIO buttons
7. A set of 3 CHECK boxes
8. A submit button
9. A reset button

Include the following form header

<FORM METHOD="GET" ACTION="http://www.ct.monash.edu.au/cgi-bin/testform.pl">

If you have access to the web, you can type data into the form and click the submit button to see the way the text boxes and buttons work.

Hint:

• See the documentation on HTML and HTML forms available from W3C the World Wide Web Consortium.
• Here is the detailed documentation on the meaning of HTML items, here you can look up <LI> or <FORM> etc.
• See the many examples of forms and form processing in Chris Avram's portfolio.

Fifth section

Through this section you will learn about basic dynamic HTML.

• You will write a Unix shell script file which when executed produces HTML text output.
• You will then install the file in the appropriate directory on your web server.
• You will use a web browser to execute the script/program file and view the output in the browser.

This is a basic server side active web page.

Create a directory in WWW called cgi-bin, see the first section for instructions.

Create a file called script1 in cgi-bin containing the following.

#!/usr/local/bin/zsh 
# The first two echo commands must be present in all script files 
echo Content-type: text/html 
echo
# from here on is up to you 
echo "<PRE>" 
echo "This could have been a C, C++ or Perl program" 
echo "All its output is sent to the client as HTML." 
echo "This is not nice HTML, it has no headers etc." 
echo " " 
echo "Where am I running, pwd will tell me"
pwd 
echo "What is in this directory" 
ls -l
echo "This will be blank now but watch out later"
echo $AAtext
echo "What is the environment, if the IFS variable causes problems, don't do the set"
set
echo  
echo "</PRE>"

Hint: If you cut and paste this file, make sure the lines don't get folded.

Make the file world readable and executable (chmod a+rx script1).

Test the program, while logged on to silas, in the WWW/cgi-bin directory, type ./script1

Now look at the following URL http://www-personal.monash.edu.au/~userid/cgi-bin/script1

Congratulations, you now know how to activate the web. You have used cgiwrap, here is the cgiwrap documentation.

WATCH OUT, any files in your cgi-bin directory can be executed by anyone. They run as if they were you, logged on as you on silas. No passwords needed.

Now to do web queries, we need to put together what we know about forms and what we know about cgi-bin.

Sixth section

The next step is to extend our HTML form knowledge:

1. create output that depends on the data entered in a form,
2. create a data query.

The first part is very simple minded. The program script1 included the line echo $AAtext, this environment variable will have been blank during your work on the fifth section.

Read about the Common Gateway Interface (CGI). There are CGI libraries for many languages. I have often used the Perl library CGI.pm. You don't need to know about perl to use my interface procedure, env.pl. View env.pl download env.pl.

The program env.pl can be used by silas users.

• Put a copy in your cgi-bin directory,
• edit it so that it uses your directory on silas (pwd shows your directory).

This program takes the data in HTML form variables, and sets up Unix shell environment variables with values as set by the form user.

• The program env.pl then calls the cgi-bin program as specified by the HTML field AAscript.
• The program specified by AAscript is run after the environment variables are set.
• So, if AAscript is set to the value script1, the statement echo $AAtext (in script1) will show the text entered in the AAtext field in the form.

How do we get env.pl to run when the HTML form submit button is clicked? Simple,

• in your form, replace the <FORM ...> statement with the following.
  <FORM METHOD="GET" ACTION="http://www-personal.monash.edu.au/~userid/cgi-bin/env.pl">

Take a copy of env.pl, edit it, change your form and test that indeed the value of AAtext is displayed.

Hint: If you use cut and paste, make sure your lines are not folded.

We are nearly there, now change the form so that it allows you to select directories in the drop down list, and change script1 so that it returns some useful data. Use the statement
ls -l $AAselect | grep $AAtext
this will enable you to choose the directory and the file, the script will display details for that file.

Hint: Here are some directories on silas: / /usr /usr/bin

Test your new query form.

Hint: A common problem occurs if you leave the fields in this form blank. Then grep $AAtext returns an execution error, the CGI program fails and the server returns "error 500". A better program would check for "blank" parameters, missing directories or files etc.

Hint: Debugging cgiwrap programs is easy. Once a program runs, the URL is eddited and looks like this "http://www-personal.monash.edu.au/cgi-bin/cgiwrap/userid/filename". If you replace cgiwrap by cgiwrapd and press enter, the program will be run in debug mode.

That is it, you can create programs that use data entered in forms to run programs on a web server and cause the programs to return data as specified in the fields in the form.

Copyright © 1996 Monash University [ All Rights Reserved | Disclaimer | Privacy warning ]