Sometimes, you get strange requests. One day, I got a call from a user who said, "I need a way to display some data on a Web site." I replied, "Well, that should be possible." But then the user continued, "But there are a few special conditions."

• The Web site is on a customer domain.
• The data (stored on a System i) must appear automatically when the browser opens and must be tailored for the user who opens the browser.
• The data must appear inside an HTML frameset.
• The data must appear on a static HTML page that is maintained by someone on the customer domain (you, as a programmer, have no access to ASP, PHP, or likewise).

At first, I thought that was impossible, but after some thinking and some searching on Google, I came up with something that might work.

It is actually possible to pass data to a static HTML file by using JavaScript. You can grab the data and make it appear on the page. But what about making it appear inside the frameset? Well, what if you grab the data and just pass it on to another HTML page using some more JavaScript? That should be possible.

So I ended up with the following solution:

1. Call an RPG CGI program with one parameter when the user opens the browser.
2. From within the RPG CGI program, call the customer Web site with the data found, passing the desired data to the Web site.
3. On the customer Web site, make the frameset grab the data and pass it on.
4. Retrieve the data within an HTML file in the frameset and present it on the Web site.

Voila! The job was done.

For an overview of the frameset, look at Figure 1, which shows how the frames on the Web site are organized.
 

Figure 1: Here's an overview of the frameset. (Click images to enlarge.)

The HTML file that contains the frameset is stored inside a file called index.htm.

The screen shot shows an area called main.htm. This is where all the fun will occur.

So let's get our toes wet.

First, a little background. You cannot pass data to an HTML file the "normal" CGI way, e.g., http://www.somesite.com/cgi-bin/some-script?p1=Jan?&mge=Hi.Jan. Instead, you can pass only a single parameter without any parameter keyword.

So how do you pass more than one parameter? You can create a comma-delimited string using a JavaScript function and pass it on; and when it reaches the target HTML file, you'd use another JavaScript function to split the string into an array and, from there, display the information wherever you'd like to show it on the Web site.

The code below shows the JavaScript function that builds the query string and passes the data string to the static HTML file.

Notice that the URL passed in the address bar has been "escaped." That means that all blanks have been translated into %20 and special characters like the Danish "ø" into %F8. This is the way browsers handle these characters when passed around in URLs. If you want to know more about the subject, look at URL encode.

If you are using IE 6+, it will handle all the un-escaping, but if you are using Firefox for example, you see that the %20 is preserved in the passed text and it will actually be shown on the screen.
By using the un-escape JavaScript function on the string, everything looks OK.

The code below shows the JavaScript function that parses the packed string into an array called arr.

The first part of the script will split the URL string after the "?" into array arr. Then, function SetData is called on the onload event and the data is written out on the HTML page using the document.getElementById("xxx").innerHTML.

The innerHTML term makes it very easy to control where the data is to be placed on the HTML page. The

tag is the magic glue that does the trick. An extra advantage of using

is that you can use CSS to control the look of the data.

One little thing I have not covered yet is that, because the final HTML file that is presenting the data is found inside a frameset, you have to tweak the index.htm file. If you look at the code in index.htm, you'll see that all the data is written out using JavaScript. It has to be done this way; the index.htm will function as a data-catcher that must be able to pass the data on to main.htm and, of course, write out the frameset.

The RPG CGI program is just a plain CGI program that accepts one parameter called "userid." This userid retrieves the correct data for that specific user. My test program accepts two names—Oliver and Agnethe—and I just use a hard-coded message to be displayed. Of course, you should change the program to reflect the needs you might have and the data you want to display. And, of course, the RPG CGI should retrieve the data from System i files.

In my example, the RPG CGI program passes three parameters, but it's easy to change that to accept as many as you might need.

Note that form013h.htm and main.htm must accept the same number of parameters as you want to pass.

Downloading and Installing

1. Create a directory in your root dir called /root/mcpressonline by entering this command: md '/rootdir/mcpressonline/'
2. Create a directory called dynamicHTML inside mcpressonline. Enter the following: md ' /rootdir/mcpressonline/dynamicHTML'
   
3. Create a directory called frameset inside mcpressonline/dynamicHTML. Enter the following: md ' /rootdir/mcpressonline/dynamicHTML/frameset'
4. Download the dynamicHTML zip file and unzip it.
5. In form013h.htm, change "some-server" to the server where the frameset resides. (In our example, this is just your own Web server.) We will just use the same server to simulate a foreign Web page. If you have the ability, you can upload all the files to another Web server, or you can use mine by changing the server to http//www.agnethe.dk/mcpressonline/dynamicHTML/frameset/. Then upload form013h.htm to '/web/mcpressonline/dynamicHTML'.
6. Upload all files inside the frameset dir to '/rootdir/mcpressonline/dynamicHTML/frameset'.
7. Save copy book for BUFIO_H to your i5.
8. Download and save source FORM013.
9. If you do not already have it, download and compile CGIPARSEZ.
   

Before compiling, remember to change "your-root-dir" in constant IFSpath to your actual root directory.

When you have installed everything and compiled the RPG programs (compile instructions can be found in the header description), you are ready to test the program.

To call the program, enter one of the following URLs:

http://your-webserver/cgi-bin/form013?userid=oliver

or

http://your-webserver/cgi-bin/form013?userid=agnethe

If everything is installed correctly, you should be able to see the data being passed to the static HTML page as shown below in Figure 2.

Figure 2: The data is passed to the static HTML page.

One Day

Maybe this tip sounds a bit over the top, but believe me: One day, someone will come to you with the strangest request....

Jan Jorgensen is one of the founders of Flexware.dk, which specializes in i5 Web solutions. He works with RPG, HTML, JavaScript, Perl, and PHP. You can reach him at This email address is being protected from spambots. You need JavaScript enabled to view it.. (He is also working hard to get the flexware.dk Web site up and running.)
 

Jan Jorgensen is one of the owners of www.reeft.dk, which specializes in mobile and i5 solutions. He works with RPG, HTML, JavaScript, Perl, and PHP. You can reach him at This email address is being protected from spambots. You need JavaScript enabled to view it.. 

 

Also Read

Open Source Starter Guide for IBM i Developers: Language Basics

Open Source Starter Guide for IBM i Developers: Ruby and IBM i, An Introduction

Open Source Starter Guide for IBM i Developers: i Object!