Roll Your Own Web Pages

by Don Childers

Published 1998-10-01    Printer-friendly version

If you need to allow users complete access to your Clarion applications on the World Wide Web, the best answer is to get a copy of Clarion Internet Connect, the Application Broker, a Windows NT server, and just do it!

However, if you need to share only some of your data with a broad audience via the World Wide Web, the IC/Application Broker route may be overkill. Simple text-only Web pages download quickly, require no special plug-ins or downloaded classes on the client machine, almost never malfunction, and may optionally remain static when the database changes -- handy for creating audit trails. HTML pages are also a great replacement for the web version of reports created by a CIC application. A well-reasoned mix of CIC applications and Clarion-generated HTML pages can produce a very professional web site for collecting, archiving and disseminating data.

Although Clarion for Windows currently doesn’t provide any capabilities for direct output of the HyperText Markup Language (HTML) documents that make up the web, HTML documents are very easy to create. In this article we’ll show how to use the Clarion PROCESS template to generate simple HTML pages from a database. We’ll reference both legacy and ABC template embed points so the article applies to anyone developing in Windows versions of Clarion. In future articles we’ll explore HTML file creation in greater detail and learn more about the language. We’ll also create several procedures that make creating web pages easier, and we may even create a template or two to really simplify the process, if there’s enough interest shown. Along the way we’ll also learn something about both the HTML language and Clarion programming, so there should be lots of useful information for almost anybody.

HTML files are simple ASCII text files that contain tags embedded in the text of the document. The tags tell the HTML browser how to format and display the text. Tags begin with a less than symbol (<) and end with a greater than symbol (>). A keyword within the tag defines the command. The command is in effect until cancelled by using the same keyword in a tag, preceded by a slash; for example:

<H1>   This would be in the largest headline format   </H1>

<B>This would be boldface text</B>

There are a number of HTML tutorials available on the Web, so we won’t teach HTML in this article. We’ll just examine those few tags that are needed for this particular example. Note, however, that HTML doesn’t care about line breaks. Although the code shown here uses line breaks liberally for clarity, they are ignored by the HTML interpretation process; tags are used to control the formatting of the final document. The case of the keywords in the tags is also immaterial. In this article we’ll use all upper case for clarity, following the Clarion convention of uppercase keywords.

To create an HTML page, we need to create the ASCII file, write some header information to the file, process the records that we want on the page (writing some HTML code for each record), then write footer information to the file before we close it. Since we’ll want to select a group of records to be printed, the PROCESS template, with its support for processing the records selected in a view, is the ideal candidate for creating our web pages.

Begin by creating a PROCESS template using the files that contain the data you want included in your web pages. You may use either the ABC or Clarion template, depending on your application. We’ll reference the appropriate embed points for both template types in the article. In the process properties, be sure to set the Action for Process to No Record Action; this will ensure that the process itself has no impact on your data files. Set the keys, filters and ranges as appropriate for the application, so that you get just the records you want included in your HTML page as the result set of the process.

After you’ve created the appropriate process, it’s time to modify the process to perform the actions we described above. To recap, these are:

1. Create an ASCII file
2. Write some header information to the file
3. Process the records that we want on the page
4. Write footer information to the file
5. Close the ASCII file

Let’s look at each of these steps in turn.

1. Create an ASCII file
2. To create the ASCII file that will contain the final HTML page, we need two things; we need a file definition, and we need to actually create the file on the disk. The file definition can either be entered in the Data Dictionary, or entered as source in a program or procedure data embed. The definition should look something like this:

   WebPage    FILE,DRIVER('ASCII'),|
                   NAME(Glo:WebFileName),|
                   PRE(wbp),|
                   BINDABLE,|
                   CREATE
   Record       RECORD,PRE()
   OutputLine     STRING(1024)
                END
              END
   

   In this case, we’ve defined the file in a global embed, and used a variable filename, Glo:WebFileName. This allows for changing the filename of the file being created from procedure to procedure.

   After creating the file definition, we need to create the file on disk. Since we’re using a variable filename, we need to set that variable before we create the file. The following code, placed in the ABC WindowManager Method Executable Code Section, Init embed, priority 4000, will handle this chore nicely. If you’re using the Clarion template chain, use the Procedure Setup embed point.

   Glo:WebFileName = 'k:\web\docs\bdaylist.htm'
   CREATE(WebPage)
   IF ERRORCODE() THEN STOP('Create '& ERROR()).
   OPEN(WebPage,33)
   IF ERRORCODE() THEN STOP('Open ' & ERROR()).
   

   After setting the filename to the location of the file we’re creating, we use CREATE and OPEN to get the file ready for use. The IF ERRORCODE() statements will alert us if something goes wrong in the process. Notice that we open the file in a restrictive mode of Write Only + Deny Write, since we want to make sure we’re in control of the file’s contents.

   Now that the file is created, we move on to the next step.

3. Write some header information to the file.

HTML files have a standard structure. The file must begin with the <HTML> tag, then include a header section that in turn includes a page title. Because we want this information to be written only once to the file, and it should be done following the opening of the file, the best place for this code is immediately following the above code, in the same embed. The code to start the page will look about like this, depending on your title:

Wbp:OutputLine = '<<HTML>'
ADD(WebPage)
Wbp:OutputLine = '<<HEAD>'
ADD(WebPage)
Wbp:OutputLine = '<<TITLE>
ADD(WebPage)
Wbp:OutputLine = 'Page Title (Displays in Browser Title Bar)'
ADD(WebPage)
Wbp:OutputLine = '<</TITLE>'
ADD(WebPage)
Wbp:OutputLine = '<</HEAD>'
ADD(WebPage)
Wbp:OutputLine = '<<BODY>')
ADD(WebPage)
Wbp:OutputLine = '<<CENTER><<H1>
ADD(WebPage)
Wbp:OutputLine = 'Report Title (Prints at top of HTML Page)'
ADD(WebPage)
Wbp:OutputLine = '<</H1><</CENTER>'
ADD(WebPage)

Note that Clarion treats the less than symbol (<) in a special way, so when we want to make it part of a text string, we must double up on the symbol as shown in each Wbp:OutputLine above.

Each of the above 6 pairs of lines creates a single line in the HTML output file. After this code is executed, our HTML file looks like this:

<HTML>
<HEAD>
<TITLE>
Page Title (Displays in Browser Title Bar)
</TITLE>
</HEAD>
<BODY>
<CENTER><H1>
Report Title (Prints at Top of HTML Page)
</H1></CENTER>

The first line declares the file as an HTML source code file. This statement is required for the browser to begin processing the file. The second line begins the header section of the HTML file. There are a number of things that can reside in the header section, but for our purposes we only need a page title, which will be displayed on the title bar of the browser when the page is processed. The third line defines that title, then uses the standard </keyword> format to close the title definition. The fourth line closes the header section of the file using the </HEAD> end of tag marker. The fifth line begins the body of the HTML page by using the <BODY> tag. The final line turns on centering with the <CENTER> tag, turns on the largest headline font with the <H1> tag, then prints a report title at the top of the page before turning off the headline font and centering with the </H1> and </CENTER> tags, respectively. We now have a good start on an HTML document, and we’re ready to load it with our data.

Before we start generating data lines, though, let’s define an HTML table for the data to be written into. Although not strictly necessary, the final page layout will look much better if we allow the browser to organize our data for us as it’s displayed. To start a table, we’ll add the following code to the same embed point we’ve been using.

Wbp:OutputLine = '<<TABLE CELLPADDING=2>'
ADD(WebPage)
Wbp:OutputLine = '<<TH>Name<</TH>'
ADD(WebPage)
Wbp:OutputLine = '<<TH>Telephone<</TH><<TR>'
ADD(WebPage)

The TABLE tag defines the start of the table. (Of course, we’ll turn it off later with the </TABLE> tag, after we’re done adding all our records.) The CELLPADDING statement tells the browser to add two pixels of padding around each data item. We could also include the BORDER statement if we wanted the table to display a border, like this: <TABLE CELLPADDING=2 BORDER>.

The second line uses the <TH> tag to create two table headings, resulting in a two-column table, since we included a table row break <TR> after the second heading. We’ll end up with a table that lists names and telephone numbers.

Now that we have our HTML page created, complete with table headings for our data, we’re ready to move on to the next step:

3) Process the records that we want on the page

Since we’re using the PROCESS template’s filters and ranges to select the appropriate records, we want to write some code to our HTML file for every record we read. In the Clarion template chain we refer to the appropriate location for this as the Activity for Each Record embed; if you’re using the ABC templates, use the Process Method Executable Code Section, TakeRecord embed, priority 5500. The code to create a name and phone number line for each record processed looks like this:

Wbp:OutputLine = '<<TD>' &|
                 CLIP(Emp:LastName) &|
                 ', ' &|
                 CLIP(Emp:FirstName) &|
                 '<</TD>'
ADD(WebPage)
Wbp:OutputLine = '<<TD>' &|
                 FORMAT(Emp:Telephone,@p(###) ###-####p) &|
                 '<</TD>'
ADD(WebPage)
Wbp:OutputLine = '<<TR>'
ADD(WebPage)

and our HTML file gets the following lines added for each employee:

<TD>Jones, Fred</TD>
<TD>(502) 555-1212</TD>
<TR>

The first line places the employee name in the first cell of this row of the table. The second line places the employee phone number, nicely formatted, in the second cell of this row of the table. The third line ends the table row by using the <TR> tag.

After all the records have been processed, and the appropriate lines have been written to the HTML file, we’re ready for the next step in our process:

4. Write footer information to the file
5. Since we want to do this only once, at the end of the process, we use the Window Manager Executable Code Section, kill embed, priority 5600. This embed in CW2x is referred to as End of Procedure, before closing files. The code we need in this embed to write the footer information is very simple.

   Wbp:OutputLine = '<</TABLE>')
   ADD(WebPage)
   Wbp:OutputLine = '<</BODY>')
   ADD(WebPage)
   Wbp:OutputLine = '<</HTML>')
   ADD(WebPage)
   

   These three sets of lines create the closing tags for the HTML table, the body of the HTML file, and the HTML file itself. Finally, to complete the process, we have one more step.

6. Close the ASCII file

This requires only a single line of code, immediately following the code we wrote in step 4.

CLOSE(WebPage)

When the process has completed, you’ll have an HTML page that can be displayed by any browser. If you plan your pages correctly, you can write the pages directly to the appropriate locations on the web server, embed the appropriate links to other pages in pages as you generate them, and create multi-page, hyper-linked documents in moments with Clarion’s PROCESS template. We are currently generating over 2700 pages of hyperlinked information about our company’s open jobs in less than two minutes each day.

In future articles, we’ll discover how to create hyperlinks that allow your users to jump from page to page. We’ll also create procedures that handle starting and ending a web page, and a tiny procedure to eliminate most of the typing you‘ve been doing so far. We’ll also learn to create Web links to email, and both alpha and numeric indexes that can be added easily to the top of your web pages. If you have special capabilities you’d like to add to your Clarion-generated HTML pages,drop me a line,  and I’ll see what I can do.

Printer-friendly version

Copyright © 1999-2008 by CoveComm Inc. All Rights Reserved. Reproduction in any form without the express written consent of CoveComm Inc., except as described in the subscription agreement, is prohibited.

Clarion Magazine ISSN 1718-9942