Example of CGI and Passing Parameters to Applets

General Description
Software Structure
List of Questions/Answers for Dialogs in this Example
Source Codes of all programs
Instructions to build/run programs (at your CS account)
Run a Demo on-line
About CGI
About Passing Parameters to Applets

General Description:

This example is a software package which uses HTML, Perl, and Java to build a Web-based interactive Question/Answer system. The topic of the questions & answers in this case is about “Work”. The programming techniques used in this example are: CGI (click here for its description) and Passing Parameters to Applets (click here for its description).

Structure of this software:

Show how all programs ( in HTML, Perl, and Java) interact with each other.

Server Side Client Side

List of Questions/Answers in the Dialogs of this Example:

Dialog-1:

Question-1: How was your work day?

Possible Answers-1:

· "Lousy"

· "Good"

· "Just another day"

Dialog-2:

(If answer-1 is lousy)

Sorry to hear that you had a lousy day

Question-2: So why was it lousy?

Possible Answers-2:

· Got a demotion!

· Got a pay cut!

· Computer Crashed!

(If answer is good)

Happy to hear that you had a good day!

Question-2: Care to share why it was good?

Possible Answers-2:

· Got a Promotion!

· Got a Pay Raise!

· Won the Lottery!

(If answer is just another day)

Are you sure?

Question-2: Why was it just another day?

Possible Answers-2:

· Nothing interesting happened

· Can't say why

· Stop asking me so many questions!

Source Codes of All programs:

“register.htm”

<HTML>

<HEAD>

<TITLE>Register</TITLE>

</HEAD>

<FONT SIZE=5 COLOR="#ff0000"><STRONG><P ALIGN="CENTER">Registration</P></FONT></STRONG>

<DIR>

</P>

<P>Password :  </B></FONT>

</P>

<P>Email :  </B></FONT>

</P>

<P>Preference :  </B></FONT>

<input type="radio" value="blue" name="color">Blue

<input type="radio" value="cyan" name="color">Cyan

<input type="radio" value="red" name="color">Red

<P>Choose your icon :  </B></FONT>

</DIR>

</FORM>

</BODY>

</HTML>

“pl.pl”

#!/usr/bin/perl -w

#********************************

# Input User Name,Password,Email,..

# (by Hanh Pham)

#********************************

#use diagnostics;

use CGI qw( :standard );

my $q = new CGI;

# READ the LogIn Data from the ENVIRONMENT VARIABLES

# ......................................................................

my $name = $q->param("UserName") ||error($q, "No UserName entered.");

my $pass = $q->param("Password") ||error($q, "No Password entered.");

my $email =$q->param("Email") ||error($q, "No Email entered.");

my $color = $q->param("color") ||error($q, "No Color Selected.");

my $icon = $q->param("icon") ||error($q, "No Icon Selected.");

#Define the File Name to write the LogIn Data

#...............................................

my $u_filename = "u-".$name;

# write the LogIn Data into the that file in directory "d"

# ........................................................

open(F, ">>d/$u_filename"); # should create a NEW FILE based on the UserName

print F "$name", " ", "$pass", " ", "$email", " ", "$color", " ","$icon", "\n";

close(F);

# PRODUCE a Reply HTM file

#....................................

print $q->header("text/html");

print <<End_Success;

<HTML>

<HEAD>

<TITLE>LogIn Reply</TITLE>

</HEAD>

<p>Hi <font color=$color>$name</font> <img src="$icon">,

<p>How was your work day?

<input type="radio" value="lousy" name="answer">Lousy <img src="lousy.gif">

<p><input type="radio" value="just another day" name="answer">Just another day

</form>

</HTML>

End_Success

“p2.pl”

#!/usr/bin/perl -w

#********************************

# Input User Choice

# (by Hanh Pham)

#********************************

use CGI qw( :standard );

my $q = new CGI;

# READ the LogIn Data from the ENVIRONMENT VARIABLES

# ......................................................................

my $answer = $q->param("answer") ||error($q, "No value entered.");

my $name = $q->param("UserName") ||error($q, "No name entered.");

my $color = $q->param("color") ||error($q, "No color selected.");

my $icon = $q->param("icon") ||error($q, "No icon selected.");

# PRODUCE a Reply HTM file

#....................................

print $q->header("text/html");

if ($answer eq "good")

{

print <<End_Success;

<HTML>

<HEAD>

<TITLE>LogIn Reply</TITLE>

</HEAD>

Hi <font color=$color>$name</font> <img src="$icon">,

<p>Question: How was your work day?

<p>Answer: $answer

<hr>

<p>Happy to hear that you had a $answer day!

<p>Question: Care to share why it was $answer?

<input type="radio" value="promotion" name="answer2">Got a Promotion!

<p><input type="radio" value="pay raise" name="answer2">Got a Pay Raise!

<p><input type="radio" value="won the lottery" name="answer2">Won the Lottery!

</HTML>

End_Success

}

if ($answer eq "lousy")

{

print <<End_Success;

<HTML>

<HEAD>

<TITLE>LogIn Reply</TITLE>

</HEAD>

Hi <font color=$color>$name</font> <img src="$icon">,

<p>Question: How was your work day?

<p>Answer: $answer

<hr>

<p>Sorry to hear that you had a $answer day

<p>Question: So why was it $answer?

<input type="radio" value="demotion" name="answer2">Got a demotion!

<p><input type="radio" value="pay cut" name="answer2">Got a pay cut!

<p><input type="radio" value="computer crashed" name="answer2">Computer Crashed!

</HTML>

End_Success

}

if ($answer eq "just another day")

{

print <<End_Success;

<HTML>

<HEAD>

<TITLE>LogIn Reply</TITLE>

</HEAD>

Hi <font color=$color>$name</font> <img src="$icon">,

<p>Question: How was your work day?

<p>Answer: $answer

<hr>

<p> Are you sure?

<p>Question: Why was it $answer?

<input type="radio" value="nothing interesting happened" name="answer2">Nothing interesting happened

<p><input type="radio" value="can't say why" name="answer2"> Can't say why

<p><input type="radio" value="stop asking me so many questions!" name="answer2"> Stop asking me so many questions!

</HTML>

End_Success

}

“p3.pl”

#!/usr/bin/perl -w

#********************************

# Input User Choice & Pass parameters to the Applet

# (by Hanh Pham)

#********************************

use CGI qw( :standard );

my $q = new CGI;

# READ the LogIn Data from the ENVIRONMENT VARIABLES

# ......................................................................

my $answer = $q->param("answer") ||error($q, "No value entered.");

my $answer2 = $q->param("answer2") ||error($q, "No value entered.");

my $name = $q->param("UserName") ||error($q, "No name entered.");

my $color = $q->param("color") ||error($q, "No color entered.");

my $icon = $q->param("icon") ||error($q, "No icon selected.");

# PRODUCE a Reply HTM file

#....................................

print $q->header("text/html");

if ($answer eq "good")

{

print <<End_Success;

<HTML>

<HEAD>

<TITLE>LogIn Reply</TITLE>

</HEAD>

Hi <font color=$color>$name</font> <img src="$icon">,

<p>

</APPLET>

</HTML>

End_Success

}

if ($answer eq "lousy")

{

print <<End_Success;

<HTML>

<HEAD>

<TITLE>LogIn Reply</TITLE>

</HEAD>

Hi <font color=$color>$name</font> <img src="$icon">,

<p>

</APPLET>

</HTML>

End_Success

}

if ($answer eq "just another day")

{

print <<End_Success;

<HTML>

<HEAD>

<TITLE>LogIn Reply</TITLE>

</HEAD>

Hi <font color=$color>$name</font> <img src="$icon">,

<p>

</APPLET>

</HTML>

End_Success

}

“DrawStringApplet.java”

import java.applet.Applet;

import java.awt.Graphics;

public class DrawStringApplet extends Applet

{

String n1,n2,n3,n4,n5,n6,n7,n8,n9;

public void init()

{

n1 = getParameter( "Line1");

n2 = getParameter( "Line2”);

n3 = getParameter( "Line3”);

n4 = getParameter( "Line4”);

n5 = getParameter( "Line5”);

n6 = getParameter( "Line6”);

n7 = getParameter( "Line7”);

n8 = getParameter( "Line8”);

n9 = getParameter( "Line9”);

}

public void paint(Graphics g)

{

g.drawString( n1, 10, 100 );

g.drawString( n2, 10, 110 );

g.drawString( n3, 10, 120 );

g.drawString( n4, 10, 130 );

g.drawString( n5, 10, 140 );

g.drawString( n6, 10, 150 );

g.drawString( n7, 10, 160 );

g.drawString( n8, 10, 170 );

g.drawString( n9, 10, 180 );

}

Instructions to Run programs:

Put all the 5 above files ( 1 HTML, 3 Perls, 1 Java) in a sub directory called “CGIapplet” in the WWW directory of your CS account. Compile the Java program into the .class file. Change permissions for all of these files into 755.

Run/Test the package in a Web Browser with:

http://www.cs.newpaltz.edu/~YourCSuserName/CGIapplet/register.html

The CGI mechanism

The figure above shows the interactions between a Web page and a cgi script written in Perl. It is a simple example of a client-server interaction. By typing in the URL into a Web browser (Link 1), the appropriate HTML file is passed to the Web browser and the Web page is displayed (Link 2). After the appropriate information is added to the Web page, the SEND button causes the data to be sent to the Perl script xaction (Link 3). The Perl program processes the data and creates an HTML page that is displayed on the user’s Web browser. This page contains the information passed to it earlier (Link 4).

Passing Parameters to Applets

Parameters are passed to applets in NAME=VALUE pairs in <PARAM> tags between the opening and closing APPLET tags. Inside the applet, you read the values passed through the PARAM tags with the getParameter() method of the java.applet.Applet class. The program below demonstrates this with a generic string drawing applet. The applet parameter "Message" is the string to be drawn.

import java.applet.*;

import java.awt.*;

public class DrawStringApplet extends Applet {

  public void paint(Graphics g) {

    String inputFromPage = this.getParameter("Message");

    g.drawString(inputFromPage, 50, 25);

You also need an HTML file that references your applet. The following simple HTML file will do:

<HTML>

<HEAD>

<TITLE> Draw String </TITLE>

</HEAD>

<BODY>

This is the applet:<P>

<APPLET code="DrawStringApplet.class" width="300" height="50">

<PARAM name="Message" value="Hi there!">

</APPLET>

</BODY>

</HTML>

Of course you are free to change "How are you ?" to a "message" of your choice. You only need to change the HTML, not the Java source code. PARAMs let you customize applets without changing or recompiling the code. This applet is very similar to the HelloWorldApplet. However rather than hardcoding the message to be printed it's read into the variable inputFromPage from a PARAM in the HTML. You pass getParameter() a string that names the parameter you want. This string should match the name of a <PARAM> tag in the HTML page. getParameter() returns the value of the parameter. All values are passed as strings. If you want to get another type like an integer, then you'll need to pass it as a string and convert it to the type you really want.

The <PARAM> HTML tag is also straightforward. It occurs between <APPLET> and </APPLET>. It has two attributes of its own, NAME and VALUE. NAME identifies which PARAM this is. VALUE is the value of the PARAM as a String. Both should be enclosed in double quote marks if they contain white space. An applet is not limited to one PARAM. You can pass as many named PARAMs to an applet as you like. An applet does not necessarily need to use all the PARAMs that are in the HTML. Additional PARAMs can be safely ignored.