Tech Tip: Give Me That ZIP Code, Please

Web Languages
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times

This tip will show you how to simulate the F4 prompt key, which is built into every command in i5/OS (formerly OS/400). I have created an RPG CGI program to accomplish this task. But instead of just making a "normal" read-some-records-and-present-them-in-a-table program, I spiced it up with AJAX, a popular technique to make a part of a Web page interact with a Web server in a way you normally see only in PC programs.

I will once again use the HTML form from "TechTip: Validating HTML Forms with Message Subfiles." If you have not installed this, fear not because the prompting program can run as a standalone application as well.

The application I have created will ask you to begin entering the name of a U.S. city. As you type, the application builds a table that displays the results of what you might enter. You can then select a city and click on the ZIP code button, and the ZIP code will be parsed back to the HTML form. Figure 1 shows what it looks like.

http://www.mcpressonline.com/articles/images/2002/zipcodeV4--09010600.jpg

Figure 1: Start entering the letters of the name of a city, and the application will build a table for you. (Click images to enlarge.)

Note the optional ZIP code field. This is used if, for example, you enter Los Angeles and have selected to display only five rows. Then, you can move your cursor to the ZIP code field and enter the ZIP code.

The drop-down list makes it possible to control how many rows should be displayed in the table.

Have a look at the movie example in which I do a search for "Farmerville."

Because I have limited space here, I will not go into details about all the code in this tip, but I will point out some important parts.

You need to change two things in the FORM002H form in order to make it all work:

  • Create a JavaScript function that will create a pop-up window.
  • Create a new "Prompt" button on the HTML form.

Figures 2a and 2b show the lines to be added. (The code is at the end of this tip.)


http://www.mcpressonline.com/articles/images/2002/zipcodeV4--09010601.jpg

Figure 2a: Create a JavaScript function that will create a pop-up window.


http://www.mcpressonline.com/articles/images/2002/zipcodeV4--09010602.jpg

Figure 2b: Create a new "Prompt" button on the HTML form.

That was the simplest part. We will now move on to zipus.htm, which is the HTML document taking care of the cool AJAX stuff.

Figure 3 shows a subset of zipus.htm:

http://www.mcpressonline.com/articles/images/2002/zipcodeV4--09010603.jpg

Figure 3: This code is part of zipus.htm.

Notice the onKeyUp event at 1. This means that every time you press a key and release it, the getZip JavaScript function will be called, which will call the RPG CGI program. The

code at 2 is used within the getZip function, so I'll get back to that later.

Figure 4 shows a subset of the getZip function:

http://www.mcpressonline.com/articles/images/2002/zipcodeV4--09010604.jpg

Figure 4: This code is part of the getZip function.

The getZip function is found in the member getzipcodeus.js. It contains some housekeeping, which I will not get into, so just be happy that it works.

At A, the URL to the RPG CGI program must be entered (very important).

At B, the URL that was built at A and the next few lines are called.

At C, the result from the RPG CGI program will use the Data Object Model to parse back the data returned from the RPG CGI program, and the

tag in Figure 3 controls where the data will be placed on the Web page. Simple, isn't it?

If you're confused, read on: I will explain how to implement all this step by step. But first, a little about the RPG program.

Because zipus.htm passes a query string, we have to make a small change to CGIPARSEZ so that API QzhbCgiParse will accept this kind of parsing. Figure 5 shows the change. Look for ZIP1 and insert the same in your source. (Alternatively, you can download the member from the code at the end of this tip.)

http://www.mcpressonline.com/articles/images/2002/zipcodeV4--09010605.jpg

Figure 5: Make a small change to CGIPARSEZ.

The RPG CGI program FORM005 is a straightforward program, so I will not comment on that. Just download it and compile it according to the description in the header section.

OK, enough mumbo jumbo. Let's install.

  1. Create a directory in your Web server's document root called /ajax. If you do not know what the document root is, look in the Apache config file for a directive called DocumentRoot or for the directive.
  2. Download ajax.zip, unzip it, and upload everything to /documentroot/ajax on your Web server.
  3. Download FORM002H, CGIPARSEZ, and FORM005; unzip them, and upload them to QRPGSRC in your CGILIB. Compile CGIPARSEZ and FORM005 following the descriptions in the header sections. (Click to download.)
  4. I have also included the database files USZIPCODES and USSTATES used in FORM005. USZIPCODES comes in two versions: a full version that contains 42,741 records and a shorter version that contains 1,000 records. They are stored in a save file named ZIP, so select the one you prefer, unzip it, FTP it to your Web server, and then restore it to a library that is in the library list of your Web server job (very important if you want the program to work).

    Click to download the full version.
    Click to download the shorter version.
    Click to download the DDS descriptions of the files.


That's it! You're done! You're now ready to take it all for a spin.

If you have installed FORM002, enter the following URL:

http://your-server/cgi-bin/form002

If you have installed FORM05 from this tip, enter the following:

http://your-server/ajax/zipus.htm

You should now see a really neat way to look up ZIP codes.

One last thing to consider: When you use AJAX this way, you will get a lot of database access, which means that the RPG CGI program will be called many times, resulting in a lot of opening and closing of the databases. To speed this up, consider moving all the DB access out of the CGI program and into some kind of never-ending program. Then use for example a data queue to communicate between the CGI program and the DB access program.

In my next tip, I'll add a cool HTML/JavaScript feature, so stay tuned.

Jan Jorgensen is a programmer at Electrolux Laundry Systems Denmark. He works with stuff like RPG, HTML, JavaScript, and Perl. You can reach him at This email address is being protected from spambots. You need JavaScript enabled to view it..

BLOG COMMENTS POWERED BY DISQUS