Building A Quick-And-Dirty Guestbook With patGuestbook (part 2) - If Looks Could Kill... (
Page 3 of 8 )
Next up, interface customization. As you may already
know, patGuestbook is tightly integrated with a sister project, patTemplate, a
powerful PHP-based template engine (if you don't know how patTemplate works, you
should read the introductory material at
Template-Based Web Development With patTemplate and only then proceed forward with this tutorial). This template engine makes
it fairly easy to create your own skins for the patGuestbook interface (and even
share them with others, if you so desire).
First things first - where are the templates located? If you recollect, this
location was specified as part of the configuration parameters located in the
"patGuestbook.php" file in your installation's "config" directory:
<?PHP
// snip
// Directory where the templates for subscription pages are
stored
$skins_dir = "skins";
// snip
?>
Look inside this directory, and you'll see a structure like this:
skins
|
--------- pat
| |
| ------- img
| |
| |
|
------- styles
--------- textonly
|
------- img
|
|
------- styles
Do those directory names ring a bell? They should - they're the template names
that appear every time you create a new guestbook. So, if you want to create your
own set of templates, this is obviously a good way to start.
Now, the patGuestbook application uses three different templates for rendering
the user interface:
1. patGuestbookList.tmpl - this is the template that displays the entries in
the guestbook
2. patGuestbookAdd.tmpl - this is the template which handles adding new entries
to the guestbook
3. patGuestbookDisabled.tmpl - this template simply displays an error message
when a particular guestbook is disabled
Let's start with the "patGuestbookList.tmpl" file. To make things easier, I'll
give you a quick peek at the desired output before I explain the template's innards
to you.
Now, if you take a close look at it, you'll see that this is very similar to
the "textonly" template - all I've really done is add a navigation menu to the
left side of the page.
I'm going to call my new template "melonfire" (feel free to name your appropriately),
and so my first task is to create a directory parallel to the "pat' and "textonly"
folders in the "skins" directory. Under this directory, I'll add an "img" directory
to store images, and a "styles" directory to store stylesheets.
Next up, the page layout. After much thought and coffee-napkin scrawls, I decided
on a simple two-column layout for my guestbook, with the navigation bar in the
left column and the main guestbook content in the right one. Here's the basic
skeleton:
<pattemplate:tmpl name="page">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"> <html>
<head>
<title>{GB_NAME}</title>
<link
rel="stylesheet" href="skins/melonfire/styles/main.css">
</head>
<body bgcolor="#FFFFFF"
text="#000000" link="#990000" vlink="#990000"
alink="#990000" marginheight="10"
marginwidth="10" topmargin="10"
rightmargin="10" bottommargin="10" leftmargin="10">
<img
src="skins/melonfire/img/px.gif" width="1" height="10" alt=""
border="0"><br>
<div align="center"> <table border="0" cellpadding="0"
cellspacing="0" width="100%"
height="100%"> <tr>
<td width="25%" align="center">
<!-- menu comes
here -->
// snip
</td>
<td width="75%" align="center">
<!--
guestbook pages come here -->
// snip
</td>
</tr>
</table>
</div>
</body>
</html>
</pattemplate:tmpl>
Since the menu on the left is going to be constant across all pages, it can be
hardcoded into the template - here it is:
<!-- menu -->
<table cellSpacing="0" cellPadding="0" border="0">
<tr>
<td><a href="http://www.melonfire.com/services/">
<img alt="Services" src="skins/melonfire/img/mm_svc_n.jpg"
align="absMiddle"
border="0" width="113" height="26"></a>
</td>
</tr>
<tr>
<td><a href="http://www.melonfire.com/company/">
<img alt="The Company" src="skins/melonfire/img/mm_cmp_n.jpg"
align="absMiddle"
border="0" width="113" height="26"></a></td>
</tr>
<tr>
<td><a href="http://www.melonfire.com/community/">
<img
alt="Community" src="skins/melonfire/img/mm_cmt_n.jpg"
align="absMiddle" border="0"
width="115" height="28"></a></td>
</tr>
<tr>
<td><a
href="http://www.melonfire.com/account/">
<img alt="Your Account" src="skins/melonfire/img/mm_act_n.jpg"
align="absMiddle"
border="0" width="113" height="26"></a></td>
</tr>
<tr>
<td>
<img alt="Contact Us" src="skins/melonfire/img/mm_cnt_n.jpg"
align="absMiddle"
border="0" width="115" height="28"></td>
</tr>
</table>
Of course, since the menu is going to be constant across the pages, you can even
abstract it into another template - I leave that to you as an exercise.
