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.
Next: Bringing In The Database >>
More PHP Articles
More By Harish Kamath, (c) Melonfire
