Using RPG to create HTML documents is a great way to replace or enhance your existing displays, reports, and menus. After you have created an HTML document, you can view it, print it, or, in some cases, even fax it. The service program provided here makes this job even easier because you can code most of the basic HTML tags by using calls to RPG subprocedures.

By now, programming in RPG is probably second nature to you. For those of us who provide displays and reports, RPG is as often as not the tool of choice. But as usual, the minute you become comfortable with one part of your life, a new challenge presents itself. E-commerce has taken the world by storm, and if it hasn’t affected you yet, chances are it will soon.

The systems and information contained on AS/400s are valuable to the businesses we work for. Our job as IT specialists is to provide this information to the user in the most convenient way possible. These days, providing information doesn’t mean just the tried- and-true displays and reports, but also entails using the World Wide Web, particularly Web browsers. Browsers provide information in a more accessible and standard format. The format I am referring to is HTML.

RPG and HTML as a Solution

Recently, I ran into a situation at work in which the sales and marketing department wanted easy access to product prices. My first thought was to install a 5250 emulator on their machine, give them a sign-on to the AS/400, and create a screen to meet their needs. What I didn’t know, but soon found out, was that almost everyone in the sales and marketing department used a Macintosh. Also, they were unfamiliar with navigating around on the AS/400. That’s when something I had been experimenting with seemed like an obvious solution. I decided to use the AS/400 as a Web server to allow them to access this information via their browser. This solution made sense for two reasons: They all had a Web browser installed on their machines, and they were already comfortable navigating with a Web browser. Everyone joyously embraced the idea, and soon requests for similar forms were rolling in.

My last article on writing CGI programs with RPG (see “RPG and CGI: Code Word—Dynamic!” MC, April 1999) explained the basics of producing dynamic output to a

browser and included service programs that allow you to write information to a browser and read information that the user would input from an HTML form. The techniques I describe in this article make that job even easier. Using a browser is second nature to most of us, but creating the pages we view in a browser may be a foreign concept. Just think of HTML as yet another language we must learn well enough to satisfy our users and customers.

Learning by Example

If learning HTML seems daunting, simply think back to the first time you created an externally described display or printer file using DDS. At first, this process was unfamiliar, but soon it became second nature. These days, most of us use IBM’s Screen Design Aid (SDA) to produce displays, or use Gumbo’s Report Design Aid (RDA) or IBM’s Report Layout Utility (RLU) to create reports. Even with tools like these, we still know how to go in and tweak the DDS if what the tool produced does not come out exactly as we planned. Learning HTML is the same way.

If you were to say you couldn’t learn HTML because of the lack of examples, I would say you probably have never seen a Web page in your life. The way I became familiar with HTML was to use one of the infinite examples that exists right under our noses. Every page on the Web contains HTML source code, and that’s how I learned HTML. When I would come across a page that included something I wanted to use or that intrigued me, I used my browser’s View Source option. If I couldn’t find an example on the Web, I would use a WYSIWYG Web development tool. I would “draw” out what I wanted and then look at the source that was created behind the scenes. This approach was easier because I didn’t have to search through the entire source of a Web page to find the small portion of HTML that interested me—only the source for the technique I needed was there at my fingertips.

After you achieve a basic understanding of HTML, you can start creating Web pages. RPG IV provides some much-needed string operations and built-in functions (BIFs) that come in handy when building HTML code. After writing HTML forms with RPG, you may find you use a lot of the code over and over. The code becomes cluttered and hard to follow. After I discovered this fact, I put together a set of service programs to make the code reusable, more readable, and also to reduce the amount of “literal text” in my programs.

Figure 1 shows the HTML code needed to display the text “Click Here!!!” and also make this text a hyperlink to my homepage with the URL www.mypage.com. Although this code by itself doesn’t seem messy, imagine coding five or more links on your page. You will soon see that in most cases the only code that changes is the link text and the hyperlink text.

Because of this fact, I created a subprocedure that allows me to code this hyperlink while providing only the link and the hyperlink text. Figure 2 shows the RPG statements you need to write the hyperlink using the method from Figure 1. Figure 3 shows the RPG statements you need to write the hyperlink by using the #Link subprocedure. Both statements provide the intended output, but only the second one ensures no HTML tag coding errors will exist. (I discussed the #WrStout subprocedure used in these examples in “RPG and CGI: Code Word—Dynamic!” The source can be found at Midrange Computing’s Web site at www.midrangecomputing.com/mc/99/04.)

The #Link Subprocedure Explained

If you are familiar with HTML, you may have already figured how the #Link subprocedure works. The #Link subprocedure is a function that concatenates the required HTML tags around the data passed to it and returns the formatted HTML code. The first parameter needed is the Web address that we want the text to link to. The second parameter is the text you want displayed as the actual hyperlink on the Web page. When users click on the text, they are directed to the specified Web address.

Figure 4 shows the RPG code for the #Link subprocedure. As you can see, it is very simple. The #Link subprocedure takes the Web address and the link text and concatenates them together with the necessary HTML tags. The subprocedure then returns the string as a complete line of HTML code that, when returned, is ready to be written to a HTML document.

Simple yet Effective

The #Link subprocedure was the first of many subprocedures I created and eventually placed in a service program. Although these may seem almost too simple to even consider worthwhile, you will soon find that creating a subprocedure to perform these small tasks will ensure that the HTML code is syntactically correct. In addition to speeding up the development time of your programs, the actual HTML code resides in only one subprocedure. There is no chance that you will mistype the HTML code. Also, if you ever need to make changes, it requires change in only one source member. Taking this a step further, creating service programs also means, in most cases, you only need to recompile the module and re-create the service program. If you haven’t yet started taking advantage of subprocedures and service programs, here is a simple and effective application that allows you to start using these features to your advantage.

The #Link subprocedure and many others are included in the F.HTTPTAG service program. (The source and compile instructions are available at Midrange Computing’s Web site at www.midrangecomputing. com/mc/99/05.) The other subprocedures included in
F.HTTPTAG range from making text bold or italic to outputting an input capable field or submit-type button. Figure 5 shows a detailed description of the subprocedures included in
F.HTTPTAG. I encourage you to install the code and try them out for yourself.

Report Output with HTML: The First Step Toward a “Paperless” Office

The subprocedures I explain in this article do not require the service program from last month’s issue on CGI programming. You can use these subprocedures as a standalone service program to create HTML output documents that can be stored on the AS/400 Integrated File System (IFS), displayed with a browser, printed, or, in some cases, even faxed.

Just imagine being able to create reports that don’t have to be printed and, when viewed, are actually pleasing to the eye. On some reports, a user may want to check just one or two values. After that, the report ends up in the recycle bin or the paper shredder. If you create HTML output for your reports, the user can view them before printing them. If users then feel they need to print the report, they simply use their browser’s Print option.

You have two options when creating HTML output. You can dynamically create the HTML directly to the user’s browser (see “RPG and CGI: Code Word—Dynamic!”), or you can output the HTML code to a file and transfer this file to the IFS.

Another benefit of creating your reports with HTML is that formatting is a snap. Inserting data into tables aligns data almost automatically. Inserting graphics, special characters, or using special fonts no longer requires you to spend hours formatting printer files with the Box, Line, and Font Character Set (FNTCHRSET) DDS commands. As an example, in Figure 6 I have created a simple invoice by using HTML. The HTML code for this page is in Figure 7. Creating eye-pleasing reports using HTML is much easier than you think. You’ll soon recognize that using tables in HTML documents can help you present the output in a structured format.

Most reports have the same basic structure. They include a heading line, multiple detail lines, and in some cases, total lines. Creating output in an HTML format is no different than creating output by using a subfile or output specs. As soon as the code exists for a detail line, the code exists for all detail lines. It’s a simple matter of reading through the file and replacing the data in each line with the data read in from the file.

Teaching an Old Dog New Tricks

Here is a chance to really impress your users, peers, and management. I am certain that as soon as you show people what you can do and how it will save time and money, they will be knocking down the door for you to provide more of this great stuff! The world has become infatuated with the Web. Ordinary people who would never have used a computer for anything more than bookkeeping or games are now surfing the Web. Just think how they will react when you show them that they can employ the same tools they use for their leisure time for work. Instead of training users on using the latest 5250 emulator, you can spend more time developing displays, reports, and even menu systems by using a Web browser and your faithful old pal RPG.

Who says you can’t teach an old dog new tricks?

http://www.mypage.com
>Click Here!!!

Figure 1: This is the HTML code required to create a hyperlink to my homepage.

C eval Out = 'http://www.mypage.com">' +

C '"Click Here!!!"'

*

C CALLP #WrStout(Out)

Figure 2: RPG code can create a hyperlink by using straight HTML text.

C eval Out = #Link('http://www.mypage.com' :

C 'Click Here!!!')

*

C CALLP #WrStout(Out)

Figure 3: RPG code can create a hyperlink with the #Link subprocedure.

*//////////////////////////////////////////////////////////////*

* (#Link) Create hyperlink *

*//////////////////////////////////////////////////////////////*

P #Link B EXPORT

*--------------------------------------------------------------*

D #Link PI

D Link 256 VALUE

D Text 256 VALUE

*

*--------------------------------------------------------------*

C return '' +

C %trim(Text) +

C ''

*--------------------------------------------------------------*

P #Link E

Figure 4: Here’s the source for the #Link subprocedure.

Subprocedure Description Input Parameters Output

(parameters in italics are optional)

#Link() Create hyperlink URL, Display Text Display Text #MailTo() Create Mail-to hyperlink Email Address, User Name User Name #Bold() Bold text Text Text
#Italics() Italics text Text Text
#Center() Center text Text

#H1(), #H2() Heading 1 or Heading 2 text Text

Text

or

Text

#Title() Title text Text
#Input() Input field/button Type, Name, Size, Value, OnClick

Value=Value OnClick=OnClick>

Figure 5: Check out the explanation of subprocedures included in the F.HTTPTAG service program.

Figure 6: I generated this invoice with HTML.

a



Invoice: 100698



5
TSHRT01
Company Logo T-Shirt
10.00
50.00



15
HAT01
Company Logo BB Hat
8.00
120.00

Invoice Total: $170.00



Figure 7: This is the HTML source code for Figure 6.