OS/2 e-Zine - The Best OS/2 Reading Anywhere!

September 16, 2004

Case Study: Redeveloping a web site with PPWizard (Part 3): Blocking out elements on a page

In the previous part of this case study, I dealt with my two standard page elements of my web site, namely the top of page element and the bottom of page element.

Once I had looked at common page elements, applicable to all my pages, I started to look at recurring elements on individual pages. In this part of the case study, I will look at the structure of our Events page.

Description of the Events page

The club have a meeting or event once a month. The Events page is where the current month's meeting information is displayed, as well as the next month's information, and a list of dates and events for the rest of this or the next year.

When I looked at the page, I blocked out the following elements on the page:

The standard top of page block.
This month's meeting or event block.
Next month's meeting or event block.
An optional this year block.
An optional next year block.
The standard bottom of page block.

I had at this stage already defined the first and last blocks, and investigated the remaining four blocks. It soon became clear that the first and second block were variations on a theme, as was the next two blocks.

Month blocks

Each of the monthly block had the same structure, with a monthly identification heading, a date, a name, a time, a venue, a cost, a description, and a contact person. Each block ends with a horizontal rule as seperator.

I needed the structure, and looked at seperating the structure and the data. This means that I have the structure in the Events template file, the data in a separate file, and when generating the HTML page, the template file and data file would be merged.

This seemed to be an ideal time to use PPWizard's #import directive to import freeform text. There was only one problem: I could not figure out how to do the actual import of the data.

I would later come back to the #import directive, but at this time I decided to create a page specific header file. A file unique to the Events page, where PPWizard definitions unique to this page can be declared.

This Month code

Here is the definitions declared for this month's event, in the file eventSpec.ih:

; --- This Month
#define ThEventName        Annual General Meeting, Bring and braai social
#define ThEventDate        Saturday 24 January 2004
#define ThEventTime        From 15h00 until late
#define ThEventVenue       <$d_ToIanGail>
#define ThEventCost        R5
#define ThEventDescription                                              \
This is our Annual General meeting, with election of office holders \
for the new year, and reporting on what we have achieved during the \
past year.                                                         %\
If the results are available, we will be announching the winners of \
our 2003 Nova Short Story Competition.                             %\
There is the usual bring and braai social, with bad movie after dark.
#define ThEventContact                                                  \
Please contact Ian or Gail Jamieson in the case of any queries.

Note: Definition ThEventVenue makes use of a definition declared in the common header file, namely directions to one of our venues.

Here is the code in the Events template:

; Elements defined for this page only
#include eventSpec.ih
<H1>This Month</H1>
<p class="ITEM_LABEL"><$ThEventDate></p>
<p class="ITEM_LABEL"><$ThEventName></p>
<p><SPAN class="ITEM_LABEL">Time: </SPAN><$ThEventTime></p>
<p><SPAN class="ITEM_LABEL">Venue: </SPAN><$ThEventVenue></p>
<p><SPAN class="ITEM_LABEL">Cost: </SPAN><$ThEventCost></p>
<p><$ThEventDescription></p>
<p><$ThEventContact></p>
<hr width="95%">

Result

<H1>This Month</H1>
<p class="ITEM_LABEL">Saturday 24 January 2004</p>
<p class="ITEM_LABEL">Annual General Meeting, Bring and braai social</p>
<p><SPAN class="ITEM_LABEL">Time: </SPAN>From 15h00 until late</p>
<p><SPAN class="ITEM_LABEL">Venue: </SPAN>
 <a href="directions%20to%20ian%20and%20gail.html">Ian and Gail Jamieson's place,</a>
 at 30 Gustav Preller street, Vorna Valley</p>
<p><SPAN class="ITEM_LABEL">Cost: </SPAN>Free</p>
<p>This is our Annual General meeting, with election of office holders for the new year,
 and reporting on what we have achieved during the past year.
If the results are available, we will be announching the winners of our
  2003 Nova Short Story Competition.
There is the usual bring and braai social, with bad movie after dark.</p>
<p>Please contact Ian or Gail Jamieson in the case of any queries.</p>
<hr width="95%">

Similar code and definitions are declared for the next month block.

The optional year lists

At the beginning of the year, only events for the rest of the year should be displayed in the list. Closer to the end of the year, I also want to show what will be happening next year.

To enable this conditional processing, I made use of PPWizard's #if directive.

So, to create my list for the current year, I declared a definition ThisYear with a value of either "Y" or "N" assigned to it, in my page specific header file.

In my Events page template file, I used the #if directive to test it the definition ThisYear had the value "Y" assigned to it. If it does, then execute the code creating the list.

Sample source code for this follows later.

Importing into a table

Ever since my unsuccessful attempt to make use of the #import directive, I had reread the PPWizard documentation to find out what I did wrong. I soon found out that the #import directive is usually used to generate a table. It is possible to use the #import directive and not generate a table, but as of yet I have been unable to understand the documentation that explains how to do that. The documentation does not give any examples that I could understand on what alternatives to the table there is.

Since the year lists are to be displayed in table format, getting the #import directive to work normally, would give me the result I wanted.

I originally created a file containing the dates and events in comma seperated format, but later found that a tab seperated list would suit me better.

Here is a portion of my this year list:

21 February 2004 Speaker
20 March 2004 (Still being planned)
17 April 2004 (Still being planned)
15 May 2004 (Still being planned)
19 June 2004 (Still being planned)

In the first column, all the dates when we will be having meetings. In the second, all the events that we have planned.

Now to import the data:
Syntax: #import "FileToImport" Seperator "TabelId" "Col1" "Col2" etc

This will create a default format table, using the Seperator to seperate column elements. You can tweak the table using the TableId and PPWizard import modification directives. Column names will be the list of names at the end of the directive.

The code to create the optional This Year block is as follows:

; Optional This Year block - pulls information from ThisYear.list into a table
#if ['<$ThisYear>' = 'Y']
<H1>This year </H1>
<p>This is the schedule of events for this year.</p>
#define TY_TABLE_ATTRIBS    class= "normal"
#define TY_HEADING_COLUMN_1 width="20%"
#import "ThisYear.list" TAB "TY" "Date" "Event"
<hr width="95%">
#endif

The #define directives modify the default table options. In this case, the table use the CSS2 definition "TABLE.normal" to display the generated table, and the first column is declared to be 20% of the total table width.

So, this set of directives will import the data specified from the file ThsYear.list into the table. It will be using TAB characters to seperate the columns, and there are two columns named Date and Event.

Result

<H1>This year </H1>
<p>This is the schedule of events for this year.</p>
<table class= "normal">
<tr><th width="20%">Date</th><th align='center'>Event</th></tr>
<tr><td align='center'>24 January 2004</td><td align='center'>AGM bring and braai social</td></tr>
<tr><td align='center'>21 February 2004</td><td align='center'>Speaker</td></tr>
<tr><td align='center'>20 March 2004</td><td align='center'>(To be announced)</td></tr>
<tr><td align='center'>17 April 2004</td><td align='center'>(To be announced)</td></tr>
<tr><td align='center'>15 May 2004</td><td align='center'>(To be announced)</td></tr>
<tr><td align='center'>19 June 2004</td><td align='center'>(To be announced)</td></tr>
</table>
<hr width="95%">

General comments

You may ask what I have gained with all of this coding: I started out with a single HTML page, and to generate it using PPWizard, I now use five files: The Events template file, the common header file, the events specific header file, the This Year list of events, and the Next Year list of events.

The answer is simple: With the original page, I had to maintain structure and data. With the new method, I have seperated structure and data. When I do a change, I do not have to worry that something I did is going to cause an error in how the information is going to be displayed.

I now have at least two files to edit, not one. (Events specific header file and one of the year list of events files). But the amount of changes I have to do is done in a smaller area, and I am much less likely to get confused with where I am and what I am doing.

In theory, the new method is more work. In practice, it is less.

Conclusion

This concludes today's article on the use of PPWizard in my web site. I looked at blocking out elements within a page, page specific definitions, conditional processing, and PPWizard's import functions.

The next article I will be looking at generating a PPWizard template file from a semi-structured text file, by using some REXX programming.

AL du Pisani is a South African, working at a large financial institution, where he looks after their Lotus Notes environment. He has been using computers off and an for the past twenty years. His first exposure to OS/2 was with 2.11. It is still the preferred environment, and is what he runs at home. He is also a fan of Science Fiction.

This article is courtesy of www.os2ezine.com. You can view it online at http://www.os2ezine.com/20040916/page_7.html.