How to Create a Web Demo
by Vasin Punyakanok
NOTE: The sample scripts described below can be downloaded
here.
Here is an example on how to make a simple web demo assuming that you
have a program that can read from standard input and write to standard
output.
###################
# Simple Web Demo #
###################
I have a program called foo.pl in ~/foo-demo/ on flake.cs.uiuc.edu . For
each line it reads, it outputs back the input and a reverse of the line.
I have created a web demo on http://l2r.cs.uiuc.edu/~cogcomp/foo-demo.php
This demo contains 3 files.
1. foo.pl the main program
2. foo-demo.php in ~/public_html on l2r.cs.uiuc.edu
3. foo-demo.pl a cgi script that generates the output located in
/var/www/cgi-bin on flake.cs.uiuc.edu
You can follow the following steps to create your own demo.
1. In your program, make sure that you always autoflush your standard
output. In foo.pl, you will see the following line:
select(STDOUT);
$| = 1;
This is how to set autoflush in perl. Without autoflush, you are
running a risk of having the demo getting stuck somewhere because of
buffering issue, especially if you want to make it a server which I will
talk about later.
2. Copy foo-demo.php and rename it for your own demo. Then change the
"Foo Demo" strings in the file, to whatever name you like. Then,
change "foo-demo.pl" to the name of your cgi script that you are
going to create.
3. To make a cgi script, you need root permission to access
/var/www/cgi-bin on flake. Copy foo-demo.pl and rename it to the file
you like. Then inside, just change the following variables:
$Program and $ProgramDir to point to your main program
$Demoname, the name of your demo
$Header, the text you want to put in the title of the output page.
$Url, the url of your php file.
This should do it.
##########################
# Client-Server Web Demo #
##########################
This should make a very simple web demo. However, if your program needs
a long time to initialize, start your main program every time someone
runs the web demo may not be desirable. In this case, it is better to
have your program running as a server and the web demo connects to it as
a client.
An example can be found in ~/foo-demo . Again assume that you have a
program that can read and write to standard input and output. We are
going to wrap this program with a wrapper and make it a server. The
foo-server.pl is a wrapper that make foo.pl a server which can be
communicate with foo-client.pl . The web-demo for the client-server
mode can be found at: http://l2r.cs.uiuc.edu/~cogcomp/foo-server-demo.php
You can follow the following steps to create your own demo in the
client-server mode.
1. Again make sure that your program always autoflush the standard output.
2. Copy foo-server.pl and rename it as you want. Then change the
following variables:
$FOOHOME and $FOOPROG to point to your main program.
$PORT to port number that is not in use.
Then between the following two comments
###############################
#process input and output here#
###############################
.......
################
#end processing#
################
You need to write a code that read from client, send it to the main
program and read the output back and send it back to client. This will
depends on how complicated the interface of your program is. The one in
foo-server.pl is very simple because foo.pl reads one line at a time and
always produces two lines.
3. Copy foo-client.pl and rename it as you want. Then change the port
number to the one you use in foo-server.pl Now foo-client.pl is going
to be the main program that web demo will use instead of the actual main
program foo.pl.
4. Copy foo-server-demo.php and rename it for your own demo. Then
change the "Foo Demo" strings in the file, to whatever name you like.
Then, change "foo-demo.pl" to the name of your cgi script that you are
going to create.
5. To make a cgi script, you need root permission to access
/var/www/cgi-bin on flake. Copy foo-server-demo.pl and rename it to the
file you like. Then inside, just change the following variables:
$Program and $ProgramDir to point to your client program
$Demoname, the name of your demo
$Header, the text you want to put in the title of the output page.
$Url, the url of your php file.
6. Start your server by:
> nohup ./foo-server.pl >& foo-server.log &
And you are done!
----------
OTHER ISSUES
If you use libraries that are not part of your OS's standard installation,
or any other resources that require a path to be set in your .cshrc file
(or .bashrc, .tcshrc or whatever), you may need to set these for your
scripts too. You can do this in the script itself, or in a shell
script that calls the foo.pl script that does the main task.
For example:
###############################################################
#!/bin/bash
export XPRESS=/opt/xpressmp/bin
export XPRESSDIR=/opt/xpressmp
export LD_LIBRARY_PATH=${XPRESSDIR}/lib
export CLASSPATH=${XPRESSDIR}/lib/xprs.jar:${CLASSPATH}
export CLASSPATH=${XPRESSDIR}/lib/xprb.jar:${CLASSPATH}
export CLASSPATH=${XPRESSDIR}/lib/xprm.jar:${CLASSPATH}
export PATH=${XPRESSDIR}/bin:${PATH}
export SRLDEMO2=/home/roth/cogcomp/srl-demo2
export CHARNIAK=/home/roth/cogcomp/CharniakServer/parser05May26fixed
export WNHOME=/home/roth/cogcomp/WordNet/WordNet-2.1
/home/roth/mssammon/web_demos/source_shortener/align_shorten_main 2>&1
##################################################################
TROUBLESHOOTING
There are two common causes of hard-to-resolve problems with the
kind of server/client structure described/implemented here.
Typical effects are error messages or unresponsiveness of the server
invoked by the web page. These causes are:
1. Necessary environment variables have not been set. (see the
section immediately above.)
2. The permissions on scripts called by the main server script are
not correctly set.
These are a good place to start if you are having trouble getting
your server/client setup to work.
