« A Simple Template Technique for Qcodo
Team data added to Baseballdata.net »

Qcodo templates - Adding to the layout

The first installment of this series described a technique for creating a flexible page templating system for Qcodo. This article picks up where that one left off and expands our template to create a more interesting layout for our pages. If you haven’t yet read the first article, you read it here.

For those who prefer to just jump into the middle of the discussion, here is a quick overview of the technique used. An abstract subclass of QForm (ABCForm) was created to take care of the parts of the form that are the same on all pages. Application forms will be subclasses of ABCForm. The form templates were split apart so they contain the code which renders only their specific parts. They no longer contain the or tags, or the RenderBegin() or RenderEnd() calls. The page rendering has been moved to a new template called layoutTemplate.php.inc. This template handles all of the common aspects of the page and requires the form specific template.

So what have we gained?

Looking at layoutTemplate.php.inc we see that while we have accomplished all of our goals, we really aren’t exploiting any of the flexibility gained yet. The only tangible benefit at this point is that each page has it’s own unique HTML title. That’s really nice, but it seems like an awful lot of work just to fix the title.

Create a real layout

The first task is to decide on the layout. Since three column layouts are fairly common, we’ll start there. There is a very good public domain css for three column layout at Real World Style. Thanks to Mark Newhouse for putting the layout in the public domain. Since this is not an article about css layout, I will point you to Real World Style for interesting articles about css techniques.

Now that we have a css file, we need to link it in the layout file. Add this line to the element.

FormTemplate);?>

RenderEnd(); ?>


Now the layout is starting get more useful. We’ll start by adding something interesting to the header. There are a couple of options here. We can simply put the heeader information into the header div in layoutTemplate.php.inc, or we can add more flexibility by storing the header info in a seperate file and requiring it in the header div. Better still, we will add a property to ABCForm which contains the name of the header file. In this way, we can set the property in ABCForm to the default header used by most pages, while still retaining the flexibility to change the header file for each form page that needs to.

Here is what gets added to ABCForm.php

protected $headerTemplate = 'header.php.inc';

Here is what changes in layoutTemplate.php.inc

Finally, I created an extremely simple header which only contains a single image. Here is the etire source for header.php.inc

FooterTemplate);?>

Now let’s get a little more interesting by adding a form object that will be displayed on all form pages. In order to accomplish this, we need to modify the Form_Create() method of ABCForm(). We’ll add a QPanel to the right column to contain information about why we are doing this. We’ll also add a QPanel to the left column which contains contact information. Then we will render each of them in the appropriate div of the layoutTemplate like this:

pnlContact->Render(); ?>


and this

pnlAbout->Render(); ?>

At this point we have the basic layout completed. You can see the complete sample page here. The code can all be downloaded here. Finally, if you’d like to see an actual site that was built using this technique, go to www.baseballdata.net.

From here we can jazz the look up a bit with some css changes, and we can easily add more mages which will all have the same look. By now you can also see that in order to change the look of an entire web site, all we have to do is change a single file - layoutTemplate.php.inc. All of the forms will reflect the changes immediately. That is a huge win for a complex site with dozens of pages.

I hope you have found these articles useful. Feel free to use the code any way you like, with or without attribution. I would like to hear how it gets used, or any suggestions, comments you may have, but that isn’t necessary in order to use the code.

This entry was posted on Thursday, June 22nd, 2006 at 12:48 am and is filed under PHP, Qcodo. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply