Language Guide

A Sample heitml Database Program

Previous sections of this Language Guide introduced a variety of heitml topics. Some, like Defining your own Tags, were simple and straightforward. Others, like Creating FORMs, showed the advantage of using a modular, "tool building" approach to designing your heitml applications. In each of these sections we tried to stimulate your thinking and show how heitml adds new dimensions to HTML Web Publishing. Now it's time to take what we've learned and "put it all together", so to speak.

In this section we'll re-visit some of the topics already covered and, in the process, create modules and procedures that show how simple it is to launch new Web applications with a minimum amount of effort, while simultaneously giving them a professional, well-ordered appearance.

We'll start by assuming that you have an SQL TABLE called LINKS which you created to store information about interesting things you've found while surfing the Web. Lots of Web Sites have a "Links" page these days, but they seldom give you much information about the Site itself, or what you can expect to find once you get there. Therefore, in creating this LINKS database, we'll further assume that you want to use it more or less as a showcase of information that can be shared with other users.

So, here's one example of the type of Fields this SQL database could contain, as well as a code fragment to CREATE it:

<dbupdate> 
    CREATE TABLE LINKS 
           (TITLE        varchar(30), 
            IMAGEPOINTER varchar(64), 
            WEBSITEURL   varchar(100), 
            DESCRIPTION  text)
</dbupdate>

The TITLE field will be used like chapter headings to create a table of contents that points to the information in the database. IMAGEPOINTER contains the location of a GIF or JPG that represents the type of artwork a User might expect to find at the Site if he clicks on the the hot-link contained in the field WEBSITEURL. And finally, DESCRIPTION, of course, is anything you want to say that helps the User decide whether or not the Site's worth visiting.

Now let's take a Top Down approach to designing a heitml-coded Web Page that allows the User to access the records in this database.

First, we'll design a Layout similar to what we saw in the Designing Web Page Templates section of this manual. We'll include all the usual elements, a Logo, a Slogan, an Email address to appear at the bottom of the page, and, just for the hell of it, a picture of the not-so-handsome guy who created the application (as well as this Language Guide). We won't show the actual code for this Layout because it's simply a variation on what you learned in the Designing Web Page Templates sub-section of Getting Started.

The main body of our Web Page will contain a narrow "Table of Contents" column on the left, with a much larger column on the right to display information about the various Web Sites contained in our LINKS database. The table of contents will therefore be a list of clickable references (or pointers) to the individual database records. Each time a User clicks on an item in the Table of Contents column, we'll simply re-initialize our Web Page, and pass a variable to an SQL SELECT statement to retrieve the information.

When our application first starts, we could just list the Table of Contents on the left and wait for the User to click on something. But it would be even better if we started our application with a default value that points to an introductory record that explains what our LINKS database is all about.

And that's just about it, really. We need just three items: a Web Page Template (or Layout), a Search Variable (containing either a default value, or a pointer to the item the User wants to see), and a MainBody (subdivided into a Table of Contents column, and a RecordInfo column).

Here's what our Top-level code would look like:

<include mylayout.hei> 
 <KeithWebPageLayout> 
      <SetSearchValue> 
      <MainBody>
 </KeithWebPageLayout> 

One of the benefits of Top Down design is that all the coding details are hidden from us until such time as we need to see them, instead of cluttering up the page and making it difficult for the programmer to zoom in on the section of code we're interested in.

Right now, of course, we want to examine the pre-defined <SetSearchValue> Tag to see how values are assigned to the SQL SELECT search-variable used later point in the program:

<def SetSearchValue>
 <if isempty(ff.gn)>
   <let gl.GetRecord=" INTRODUCTION">
 <else>
   <let gl.GetRecord=ff.gn>
 </if>
</def>

Obviously, the first time our Web Page is called, ff.gn will be empty, so we assign the default value " INTRODUCTION" to the global variable gl.GetRecord . (Notice that we have a leading "space" character before the word INTRODUCTION. This is just a little trick we've used to force INTRODUCTION to always appear at the top of our alphabetically sorted Table of Contents.) For all subsequent calls to our Web Page, ff.gn will contain the TITLE selected for viewing by the User.

Now let's look at the <MainBody> Tag:

<def MainBody>
 <TABLE>
   <TR> <TD WIDTH="17%" VALIGN="top"> 
            <ShowTableOfContents>
        </TD>

        <TD VALIGN="top">
            <ShowRecordInfo>
        </TD>
   </TR>
 <TABLE>
</def>

Here's where we discover how to divide our display area into columns. We've simply used the HTML <TABLE> Tag to define a <TableRow> with two <TableData> columns. The first column is limited to only 17% of the useable page area which, by default, gives the remaining page area to the second column. In both cases we've used the VALIGN="top" argument to make sure that the data in both columns always starts from the top. We don't know which column will be longer than the other and we don't care. We just want to make sure that the User sees data from the very top of the display area (after the WebPageLayout information) and doesn't have to go hunting for it.

Now let's take a look at the <ShowTableOfContents> Tag:

<def ShowTableOfContents>
 <TABLE>
  <FONT size="-3">
    <dbquery q> 
      SELECT TITLE FROM LINKS ORDER BY TITLE
       <dbrow>
        <TD>
         <a href=kdisrec1.hei?gn=<? q.TITLE furl>>
             <? q.TITLE></a><br>
        </TD>
    </dbquery>
  </FONT>
  <p> <img src="Bilder/V_border.gif">
 </TABLE>
 <p>
</def>

A couple of things are worth mentioning here. First, we see that <ShowTableOfContents> reveals that we are dealing with nested tables, since all of the data displayed by this Tag is itself contained within the parent TABLE defined in the <MainBody> Tag.

Next, because we know that the <MainBody> Tag has allocated only 17% of the displayable page area to the <ShowTableOfContents> Tag, we've used the HTML <FONT> Tag to select a small type size. This will help to ensure that our TITLE data stays within its pre-defined limits.

Finally, the real work of this Tag is performed by the heitml <dbquery> Tag, which we've highlighted for your attention. The SQL SELECT statement contained within <dbquery> gets all the TITLE data, sorts it alphabetically, then displays it in hot-link format.

The <img src> Tag appearing just before we close the TABLE is simply to provide a vertical border at the bottom of the Table of Contents column. If the Table of Contents were to grow very long, we'd eventually eliminate this line of code.

The last thing we need to look at is the <ShowRecordInfo> Tag:

<def ShowRecordInfo>
 <TABLE>
  <dbquery q>  SELECT * FROM LINKS
   WHERE TITLE=<? gl.GetRecord quoted>
   <dbrow>
    <IMG SRC=<? q.IMAGEPOINTER> ALIGN="left">
    <H3> <?gl.GetRecord> </H3>
    <A HREF=<? q.WEBSITEURL >> 
               <? q.WEBSITEURL> </A>
    <P> 
    <B> <? q.DESCRIPTION html> </B>
  </dbquery>
 </TABLE>
</def>

Again we see a nested table. We also see how the gl.GetRecord variable defined in the <SetSearchVariable> procedure is finally used to retrieve the particular record our User wants to see. More importantly, however, is the way the <ShowRecordInfo> Tag shows how seemlessly HTML statements can be interleaved with heitml.

So there it is. A Top Down approach to Web Page Publishing. You never have to look at more than a few lines of code at once (and if you do, you'll probably find you haven't modularized your data enough yet). We hope you've been impressed by how little code we needed to generate to get this Web Page up and running, but this simple programming example is just the beginning. The more you work with heitml, the more you'll find it has to offer.