Building A Quick-And-Dirty Guestbook With patGuestbook (part 2) - A Well-Formed Plan (
Page 5 of 8 )
So that takes care of the main guestbook page - now how about
customizing the input form for new entries?
Here's what it should look like,
and here's the code that makes it happen:
<form action="{DISPATCHER}" method="post" name="adder">
<table border="0"
cellpadding="0" cellspacing="0" width="100%"
height="100%">
<tr>
<td
align="center">
<input type="hidden" name="action" value="addEntry">
<input type="hidden" name="save" value="yes">
<table
width="550" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" cellpadding="0"
cellspacing="0"
border="0">
<tr valign="top">
<td> </td>
<td width="100%">
<table width="100%" border="0"
cellpadding="0"
cellspacing="0">
<tr>
<td
class="textinvert" align="center">Welcome
to {GB_NAME}!<br><br>
</td>
</tr>
</table>
</td>
<td width="100%"
align="right"> </td>
</tr>
</table>
<table width="100%"
cellpadding="0"
cellspacing="0" border="0">
<tr>
<td > </td>
<td width="100%" bgcolor="#FFFFFF"
class="text">
<!-- message for moderated
guestbook -->
<pattemplate:tmpl name="moderated"
visibility="hidden">
Note that this guestbook is
moderated, and your entry will only appear
in the list of entries once it
has been approved by a moderator.<br><br>
</pattemplate:tmpl>
<!-- errors
-->
<pattemplate:tmpl name="errors"
visibility="hidden">
<table width="400" cellpadding="0"
cellspacing="0" border="0">
<tr>
<td class="text">
Ooops, I've found
some errors in your entries... please
check them again:<br>
<img
src="skins/melonfire/img/px.gif"
width="1" height="5" alt="" border="0"><br>
<table width="100%"
cellpadding="0" cellspacing="0" border="0">
<pattemplate:tmpl
name="errorEntry" type="condition"
conditionvar="err_code">
<pattemplate:sub
condition="invalid_email">
<tr valign="top">
<td
class="text">•
</td>
<td
class="text">{ERR_FIELD}: The email
you entered is of a type unknown to the
net as it exists today. Please enter something
a little more
comprehensible.</td>
</tr>
</pattemplate:sub>
<pattemplate:sub
condition="invalid_url">
<tr valign="top">
<td
class="text">•
</td>
<td
class="text">{ERR_FIELD}: The url you
entered is of a type unknown to the
net as it exists today. Please enter something
a little more
comprehensible.</td>
</tr>
</pattemplate:sub>
<pattemplate:sub
condition="field_required">
<tr valign="top">
<td
class="text">•
</td>
<td
class="text">{ERR_FIELD}: This field
is required, but you left it utterly
empty. Please feed it something to make it
happy :)</td>
</tr>
</pattemplate:sub>
<pattemplate:sub
condition="rating_required">
<tr valign="top">
<td
class="text">•
</td>
<td
class="text">{ERR_FIELD}: You've forgotten
to give a rating for this
item...</td>
</tr>
</pattemplate:sub>
</pattemplate:tmpl>
</table>
</td>
</tr>
</table>
<br>
</pattemplate:tmpl>
<table border="0" cellpadding="0"
cellspacing="2" width="100%">
<pattemplate:tmpl
name="displayName" visibility="hidden" varscope="page">
<tr>
<td
class="text"
nowrap><b>{LABEL_NAME}</b></td>
<td class="text"> : </td>
<td width="100%"><input type="text"
name="data[name]" value="{ENTRY_NAME}"
size="30" class="text"
style="width:95%"></td>
</tr>
</pattemplate:tmpl>
<pattemplate:tmpl
name="displayEmail"
visibility="hidden" varscope="page">
<tr>
<td class="text"
nowrap><b>{LABEL_EMAIL}</b></td>
<td class="text"> : </td>
<td width="100%"><input type="text"
name="data[email]"
value="{ENTRY_EMAIL}" size="30" class="text"
style="width:95%"></td>
</tr>
</pattemplate:tmpl>
<pattemplate:tmpl
name="displayHomepage" visibility="hidden"
varscope="page">
<tr>
<td class="text"
nowrap><b>{LABEL_HOMEPAGE}</b></td>
<td class="text"> : </td>
<td width="100%"><input type="text"
name="data[homepage]"
value="{ENTRY_HOMEPAGE}" size="30" class="text"
style="width:95%"></td>
</tr>
</pattemplate:tmpl>
<pattemplate:tmpl
name="displayEntry" visibility="hidden" varscope="page">
<tr>
<td
colspan="3"><img
src="skins/melonfire/img/px.gif" width="1" height="6" alt=""
border="0"></td>
</tr>
<tr>
<td class="text"
colspan="3"><b>{LABEL_ENTRY}</b></td>
</tr>
<tr>
<td colspan="3"><textarea
name="data[entry]"
rows="5" cols="50" class="text"
style="width:95%">{ENTRY_ENTRY}</textarea></td>
</tr>
</pattemplate:tmpl>
<pattemplate:tmpl
name="ratings" visibility="hidden">
<tr>
<td
colspan="3"><img
src="skins/melonfire/img/px.gif" width="1" height="6" alt=""
border="0"></td>
</tr>
<tr>
<td class="text"
colspan="3"><b>{RATINGS}</b></td>
</tr>
<pattemplate:tmpl
name="ratingEntry">
<tr>
<td
class="text"
nowrap><b>{RATING_LABEL}</b></td>
<td class="text"> : </td>
<td width="100%">
<select
name="data[ratings][]"
class="text" size="1" style="width:95%">
<option value="">Please select a
rating...</option>
<pattemplate:tmpl name="ratingEntryValue" type="condition"
conditionvar="rating_selected">
<pattemplate:sub
condition="yes">
<option value="{RATING_VALUE}"
selected>{RATING_VALUE}</option>
</pattemplate:sub>
<pattemplate:sub
condition="default">
<option value="{RATING_VALUE}">{RATING_VALUE}</option>
</pattemplate:sub>
</pattemplate:tmpl>
</select>
</td>
</tr>
</pattemplate:tmpl>
</pattemplate:tmpl>
</table>
</td>
<td > </td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table
bgcolor="#FFFFFF" width="550" cellpadding="0"
cellspacing="0" border="0">
<tr>
<td
align="center"><input type="submit"
value="Submit your entry to our guestbook..."
></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
Ugly isn't it?
1. First, the page header, displaying the name of the guestbook.
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr>
<td
class="textinvert" align="center">
Welcome to {GB_NAME}!<br><br>
</td>
</tr>
</table>
2. The template that displays a message to the user when moderation follows the
header.
<!-- message for moderated guestbook -->
<pattemplate:tmpl name="moderated"
visibility="hidden">
Note that this guestbook is moderated, and your entry will
only appear in
the list of entries once it has been approved by a moderator.<br><br>
</pattemplate:tmpl>
3. This is followed by a list of error messages, which are displayed when required
fields are left empty.
<!-- errors -->
<pattemplate:tmpl name="errors" visibility="hidden">
<table
width="400" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="text">
Ooops,
I've found some errors in your entries... please check them
again:<br> <img
src="skins/melonfire/img/px.gif" width="1" height="5" alt=""
border="0"><br>
<table width="100%" cellpadding="0" cellspacing="0"
border="0">
<pattemplate:tmpl
name="errorEntry" type="condition"
conditionvar="err_code"> <pattemplate:sub
condition="invalid_email"> <tr
valign="top"> <td class="text">• </td>
<td
class="text">{ERR_FIELD}: The email you entered is of a type unknown to
the
net as it exists today. Please enter something a little more
comprehensible.</td>
</tr> </pattemplate:sub> <pattemplate:sub
condition="invalid_url">
<tr
valign="top">
<td class="text">• </td>
<td class="text">{ERR_FIELD}:
The url you entered is of a type unknown to
the net as it exists today. Please
enter something a little more
comprehensible.</td> </tr> </pattemplate:sub>
<pattemplate:sub
condition="field_required">
<tr valign="top">
<td class="text">•
</td>
<td class="text">{ERR_FIELD}: This field is required, but you left
it
utterly empty. Please feed it something to make it happy :)</td> </tr>
</pattemplate:sub>
<pattemplate:sub
condition="rating_required">
<tr valign="top">
<td class="text">• </td>
<td
class="text">{ERR_FIELD}: You've forgotten to give a rating for this
item...</td>
</tr> </pattemplate:sub> </pattemplate:tmpl>
</table>
</td>
</tr>
</table>
<br>
</pattemplate:tmpl>
Feel free to edit the error messages above to reflect the personality and style
of your site.
4. Finally, the meat of the template - the form that is displayed to the user.
As usual, there are pre-defined patGuestbook templates that I can work with for
this section. Remember to be careful when tweaking these templates (unless, of
course, you're comfortable with patTemplate, in which case, tweak away!).
<table border="0" cellpadding="0" cellspacing="2" width="100%">
<pattemplate:tmpl
name="displayName" visibility="hidden" varscope="page">
<tr> <td class="text"
nowrap><b>{LABEL_NAME}</b></td> <td
class="text"> : </td> <td
width="100%"><input type="text"
name="data[name]" value="{ENTRY_NAME}" size="30"
class="text"
style="width:95%"></td> </tr> </pattemplate:tmpl>
<pattemplate:tmpl
name="displayEmail" visibility="hidden" varscope="page">
<tr> <td class="text"
nowrap><b>{LABEL_EMAIL}</b></td> <td
class="text"> : </td> <td
width="100%"><input type="text"
name="data[email]" value="{ENTRY_EMAIL}" size="30"
class="text"
style="width:95%"></td> </tr> </pattemplate:tmpl>
<pattemplate:tmpl
name="displayHomepage" visibility="hidden"
varscope="page"> <tr> <td class="text"
nowrap><b>{LABEL_HOMEPAGE}</b></td>
<td class="text"> : </td>
<td
width="100%"><input type="text" name="data[homepage]"
value="{ENTRY_HOMEPAGE}"
size="30" class="text" style="width:95%"></td>
</tr> </pattemplate:tmpl>
<pattemplate:tmpl
name="displayEntry" visibility="hidden" varscope="page">
<tr> <td colspan="3"><img
src="skins/melonfire/img/px.gif" width="1"
height="6" alt="" border="0"></td>
</tr> <tr> <td class="text"
colspan="3"><b>{LABEL_ENTRY}</b></td>
</tr>
<tr>
<td
colspan="3"><textarea name="data[entry]" rows="5" cols="50" class="text"
style="width:95%">{ENTRY_ENTRY}</textarea></td>
</tr>
</pattemplate:tmpl>
<pattemplate:tmpl
name="ratings" visibility="hidden">
<tr>
<td colspan="3"><img src="skins/melonfire/img/px.gif"
width="1" height="6"
alt="" border="0"></td> </tr> <tr> <td class="text"
colspan="3"><b>{RATINGS}</b></td>
</tr>
<pattemplate:tmpl name="ratingEntry">
<tr>
<td class="text"
nowrap><b>{RATING_LABEL}</b></td>
<td class="text"> : </td>
<td
width="100%">
<select name="data[ratings][]" class="text" size="1" style="width:95%">
<option
value="">Please select a rating...</option>
<pattemplate:tmpl name="ratingEntryValue"
type="condition"
conditionvar="rating_selected"> <pattemplate:sub condition="yes">
<option
value="{RATING_VALUE}" selected>{RATING_VALUE}</option> </pattemplate:sub>
<pattemplate:sub
condition="default"> <option
value="{RATING_VALUE}">{RATING_VALUE}</option>
</pattemplate:sub>
</pattemplate:tmpl>
</select>
</td>
</tr>
</pattemplate:tmpl>
</pattemplate:tmpl>
</table>
For each field in the guestbook, I have two tags - one displaying the label and
the other displaying the form field to the user. For example, for the user's name,
I've used the {LABEL_NAME} variable for the label and the {ENTRY_NAME} variable
for the text box that is displayed to the user.
