Creating Web Applications With REBOL CGI
One of the great things about REBOL is that you can accomplish a huge
variety of computing work with it. It's a great tool for building custom
GUI applications to manage data on Windows, Mac, Linux, and other
operating systems. And if you already know some basics about programming
with REBOL, you can easily learn how to use it to create WEB based data
management apps, without having to learn any other language, database
system, IDE, or any other development tools.
To create and run web applications using REBOL CGI, you need a web server.
Linux shared web hosting plans are available from Lunarpages.com,
Hostgator.com, and others for less than $10 per month, and are capable of
handling significant amounts of web traffic (many tens of thousands of
visits a day). If you learn a little about web servers, you can also use
free "AMP" software such as http://www.uniformserver.com to run a light
web server from your home computer, using your existing broadband Internet
connection. This author has used Lunarpages for many years to run mission
critical REBOL CGI programs, and they are a reliable choice. The process
of setting up REBOL CGI applications is basically the same for all other
hosts, but before paying for any commercial hosting service make sure they
allow REBOL CGI programs to run on their servers (DO NOT assume this is
the case).
To do any work with your web server, you'll need to know your account's
FTP username, password, URL, and publicly viewable root folder. Be sure
to have that info on hand before continuing with this tutorial.
To begin building a web application with REBOL, you'll need to upload the
REBOL interpreter to your web server. You only need to do this once for
each web server (not for each program). Open your local REBOL interpreter
to the console and type the following code - REPLACE the username,
password, URL, and publicly viewable folder with your own account info.
This will download a REBOL interpreter from the web, and upload it to your
own server:
file: ftp://user:pass@site.com/public_html/rebol ; EDIT with your info
write/binary file (read/binary http://re-bol.com/rebol276)
The file transfer process above should take just a few seconds if you're
on a broadband connection. Once it's done, you need to set execute
"permissions" for the REBOL interpreter in your hosting account. You can
use the following REBOL script to do that. Just paste this code into your
local REBOL interpreter and enter your web server URL, username, password,
folder, etc., when prompted:
REBOL [title: "FTP CHMOD"]
website: request-text/title/default "Web Site:" "site.com"
username: request-text/title/default "User Name:" "user"
password: request-text/title/default "Password:" "pass"
folder: request-text/title/default "Folder:" "public_html"
file: request-text/title/default "File:" "rebol"
permission: request-text/title/default "Permission:" "755"
write %ftpargs.txt trim rejoin [{
open } website {
user } username { } password {
cd } folder {
literal chmod } permission { } file {
quit
}]
call/show "ftp -n -s:ftpargs.txt"
If you have any problems using the above program on your operating system,
you can simply run your OS's command line FTP program using the code
below, and manually enter your web host account information as described:
call/show {ftp} ; run this line in the REBOL interpreter console
; Type the following command at the FTP prompt (replace your web url):
open yourdomain.com ; enter your username and password when prompted
; Type the following commands (replace your folder and file names):
cd public_html/
literal chmod 755 rebol
quit
All the steps above only need to be completed the very first time you set
up your web hosting account. Once you've got REBOL uploaded to your
server, you can begin to create your first CGI program. To start editing
a new web site script, type the following into your local REBOL
interpreter console (again, be sure to edit the user name, password, URL,
and public folder information to match your web server account settings):
editor ftp://user:pass@site.com/public_html/example.cgi ; EDIT account
Type the following code into the REBOL text editor and save it (clicking
"Save" in the REBOL text editor ACTUALLY SAVES/UPLOADS THE CHANGES TO YOUR
WEB SERVER):
#!./rebol -cs
REBOL []
print {content-type: text/html^/}
Run the "FTP CHMOD" program above one more time to set the permissions for
this new "example.cgi" to 755 (you'll need to set permissions to 755 for
every .cgi script you create and upload to your server, so keep the above
script handy). To be clear, in the ftp script above, change "rebol" to
"example.cgi". Now browse to http://yourdomain.com/example.cgi , and you
will see a blank page (replace "yourdomain.com" in the URL to the domain
of your actual web server). If you get any errors, see the highlighted
instructions below about error logs in cPanel.
To make some text appear on your web page, use the "print" function. Edit
your example.cgi file as follows, save it to your server, then refresh
http://yourdomain.com/example.cgi to see the changes in your program
appear live on your web site:
#!./rebol -cs
REBOL []
print {content-type: text/html^/}
print {Hello world!}
You can put any HTML code on your web page using the "print" function.
Here is a demonstration of the most useful and necessary HTML tags
needed to lay out web pages. In the REBOL editor enter and save the
following code (editor ftp://user:pass@site.com/public_html/example.cgi)
then refresh http://yourdomain.com/example.cgi in your browser to see
the changes:
#!./rebol -cs
REBOL []
print {content-type: text/html^/}
print {
This is some header text
This header text is smaller
In HTML, all spaces, tabs, newlines and other white spaces
are compressed (i.e., this text is all printed on the same
line, and wrapped to the length of the screen, and these
spaces are all compressed to one space. If
you want to explicitly display a certain number of spaces,
use these characters: For newlines (carriage
returns), use the "br" tag:
You can also use "p" tags to create separate lines.
To adjust text size and color, use the "font" tag:
Little blue text
Big red text
To display a link to a web site, use the "a" tag:
yahoo.com
To display images, use the "img" tag:

To make an image link to a URL, use "img" and "a":
click the image:
This text is bolded.
The "pre" tag displays preformatted text.
Spaces, tabs, newlines, etc. are kept intact.
You can add a horizontal separator line with the "hr" tag:
Center anything on a page with the "center" tag:
Centered Text
Tables are used to display rows and columns of data. They
can also be used to align portions of an HTML page in certain
areas of the screen (i.e., to layout menu bar areas, headers,
main content areas, and footers):
"tr" tags |
are |
rows |
"td" tags |
are |
columns |
You can set "td"s to span as many columns as
needed, using the "colspan" setting, and you
can use the "valign" property to set where
in the cell text is placed. "bgcolor" sets
the cell's background color.
|
You can set size properties of all different
parts of the table, using either percentage
or pixel values.
|
Try resizing the page to see how centering, text wrapping and
table layouts work.
}
Here are several examples of useful basic HTML page templates which use
tables to layout sections of the page. You can adjust them as a basic
outlines for your own page layouts:
#!./rebol -cs
REBOL [title: "Generic HTML Page With Tables"]
print {content-type: text/html^/}
print {
Generic HTML Page With Tables
YOUR PAGE CONTENT GOES HERE.
|
Copyright © 2009 Yoursite.com.
All rights reserved.
|
}
Here is another useful generic HTML page layout using tables. Notice
where it says "YOUR PAGE CONTENT GOES HERE":
Table Based Page Layout, No Menu
|
|
Home
: Contact
|
|
YOUR PAGE CONTENT GOES HERE
|
|
|
Copyright © 2010 This Web Site.
All rights reserved.
|
|
Here is a variation of the generic HTML page layout above, with a menu bar
on the left side:
Table Based Layout Template, With Menu
|
|
|
|
|
Copyright © 2010 This Web Site.
All rights reserved.
|
|
The pages above are just static HTML - they can only display a single,
unchanging display. The real benefit of CGI is that you can use the
entire power of the REBOL language to process data, and print dynamically
changable output for visitors to see, respond to user input, and interact
with visitors. Here's a simple CGI program that downloads a time stamped
backup of the given URL, and displays the current backup to the user:
#!./rebol -cs
REBOL [title: "Backup Remote Page"]
print {content-type: text/html^/}
filename: to-file rejoin [now/date ".html"]
write filename read http://www.guitarz.org/AboutNick.html
print rejoin [
{The page at http://www.guitarz.org/AboutNick.html was just
downloaded to this server. The current version of this backup,
at } now/time {, looks like this:
}
read filename
}
Here's an example that displays all the images in a folder on your web
server:
#! ./rebol -cs
REBOL [title: "Photo Viewer"]
print {content-type: text/html^/}
print {Photos}
folder: read %.
count: 0
foreach file folder [
if find [%.jpg %.gif %.png %.bmp] (suffix? file) [
print rejoin [{
}]
count: count + 1
]
]
print rejoin [{
Total Images: } count {}]
The following program can be used to copy all the files in a folder from
one web server, directly to another web server. It displays transferred
file names to the user as it progresses. To use this script, just save,
upload, and set permissions for it (be sure to edit the username,
password, and URL info), then in your browser go to the URL at which it's
located:
#! ./rebol -cs
REBOL [title: "Copy All Files to New Web Server"]
print "content-type: text/html^/"
print ["File Transfer"]
foreach file (read ftp://user:pass@site.com/public_html/path/) [
print join file {
}
write/binary (to-file file)
(read/binary (to-url join http://site.com/path/ file))
]
print [] quit
User input in CGI applications can be accomplished using HTML "forms".
Form fields, textareas, check boxes, dropdown selectors, submit buttons,
etc., take the place of familiar GUI widgets in desktop applications, to
get data from users. To understand how forms work, edit example.cgi to
contain the following code:
#!./rebol -cs
REBOL []
print {content-type: text/html^/}
submitted: decode-cgi system/options/cgi/query-string
probe submitted
Now go to http://yourdomain.com/example.cgi?name=bob&id=1234567 . Notice
that this URL is just the URL of your CGI program, followed by a question
mark, followed by "name=bob" and "id=1234567", with those two pieces of
data separated by an "&" symbol. Try going to
http://yourdomain.com/example.cgi?name=john&id=7654321 , and see the CGI
program print out John's name and ID. You can use that format to input
ANY data you want to the CGI program.
Forms simply provide a way to send data input by the user, to a script at
a given URL, using the format above. Try this: create a new text file
named form_example.html (be sure to edit your username, password, site,
and folder):
editor ftp://user:pass@site.com/public_html/form_example.html
Copy the following HTML into form_example.html, and save it to your
server. Notice that the "action" link in the code below is pointing to
the URL of the example.cgi script that we've already created):
Now go to http://yourdomain.com/form_example.cgi , fill out and submit the
form, and pay attention to the link to which you are transferred, as well
as the data printed by the script. It works exactly the same as the links
that we hand coded above (i.e., the above form transfers you to
http://yourdomain.com/example.cgi?name=john&id=7654321). The form just
provides a useful interface that your web site visitors can use to enter
their name and ID (instead of having to type in an archaic URL).
Notice that there are FOUR pieces of data in each of the link examples
shown earlier: 1) the label "name" 2) the data value "john" 3) the
label "id" 4) the data value "7654321". In order to get DATA values
submitted by the user (as opposed to their label names), we need to use
the EVEN numbered pieces of data submitted by the form (in this case, the
data values 2 and 4). Try changing the example.cgi file as follows:
#!./rebol -cs
REBOL []
print {content-type: text/html^/}
submitted: decode-cgi system/options/cgi/query-string
write/append %visitors.txt mold submitted/2 ; 2nd item = Name
write/append %visitors.txt mold submitted/4 ; 4th item = ID
previous-visitors: load %visitors.txt
print {The following visitors have logged into this page:
}
foreach [name id] previous-visitors [
print rejoin [
"Name: " name
"ID: " id
"
"
]
]
The script now saves the name and ID of every visitor who submits the
form, to the file %visitors.txt on your web server, and then prints out a
neatly formatted list of every previous visitor. This should start to
give you some idea of how CGI can become useful - you can write ANY
submitted data to your web server, retrieve it, manipulate it, and display
it to your visitors.
As it stands, our example program is made up of 2 separate files on the
web server: the file containing the HTML form, and the file containing
the REBOL code. We can combine the 2 files into a single script by simply
having the program print the HTML form, with an "action" URL in the form
which points directly back to the script. The script can then check
whether or not the user has entered some data (i.e., if submitted values 2
and 4 are not empty (""), some data has been entered by the user). If so,
it will perform the actions currently in the example.cgi script above.
Edit and save your example.cgi file as follows, and then refresh
http://yourdomain/example.cgi to see it run:
#!./rebol -cs
REBOL []
print {content-type: text/html^/}
submitted: decode-cgi system/options/cgi/query-string
; Do the following if no data has been submitted:
if ((submitted/2 = "") and (submitted/4 = "") [
print {
}
quit
]
; Otherwise, do the following with the data submitted by the user:
write/append %visitors.txt submitted/2
write/append %visitors.txt submitted/4
previous-visitors: read %visitors.txt
print {The following visitors have logged into this page:
}
foreach [name id] previous-visitors [
print rejoin [
"Name: " name
"ID: " id
"
"
]
]
Notice the "quit" function after the printed HTML form. If the user is
just coming to the page (i.e., has not yet submitted any data), we want
them to see the input form, and nothing else, so we print the form and
then quit the script. When the user fills out the form and clicks the
submit button, the action points directly back to this same script, so the
script runs again, this time with some submitted data, and only the second
half of the program gets executed. Study that logic until it makes sense.
All your CGI programs with follow this simple pattern. In larger programs
you'll likely just have more input options to decipher (more forms to
print, more "if" evaluations, etc.) and perhaps some more complex data
manipulations to perform.
Here's an example that allows the user to choose between options from a
dropdown box in an HTML form, and then responds to that input
appropriately. Notice that the dropdown code is dynamically created,
instead of being typed in explicitly. This code allows you to more easily
create drop down boxes containing many items (lists of times, colors,
dates, etc.), just by putting them in a block:
#! ./rebol -cs
REBOL [title: "CGI Logic"]
print {content-type: text/html^/}
submitted: decode-cgi system/options/cgi/query-string
; Do different things, depending on the option submitted by the user:
if submitted/2 = "option1" [
print "Now Doing Code For Option 1"
quit
]
if submitted/2 = "option2" [
print "Now Doing Code For Option 2"
quit
]
if submitted/2 = "option3" [
print "Now Doing Code For Option 3"
quit
]
; If none of the above cases is true (i.e., the user is just visiting
; the page and hasn't yet selected an option), print the following
; HTML form by default:
options: ["option1" "option2" "option3"] ; 3 options given to visitor
print {