Guestbook Help

| | Help | |

Guestbook templates - Cut and Paste

This page contains code snippets that you can use when building your template based guestbook layout. Here you will find the basic Velocity ( i ) code that you will need to use to make your guestbook page usable. Please refer to Available variables when using Template layout ( i ) for an explanation of the used variables and to find out how to further extend the guestbook pages.

If you decide to use the Template layout don't settle for the default black and white, two column layout. Undoubtedly you can do better than just change the guestbook texts, you know that you can do that with the Form layout as well. Template layout gives you complete control over the layout of your guestbook, so you can be as creative as you want.

The example code has been colored in order to improve readability. Velocity directives are in bold and variables are green.

Guestbook page
Sign the Guestbook page

Guestbook page

All the example code we present here assume that we are using table with two columns; the question field name is on the left column, and the field itself is on the right column. In practice these codes will be executed once for each message in the guestbook page. Further down this page you can find these snippets used in a full template page. There you'll see how the codes have been wrapped inside a #foreach statement.

Name, email and city

If the visitor gave her email address, we'll add it as 'mailto:' link to the name. If she filled the city field, we'll add it after the name.

#if ($message.email != "")
  #set ($message.name = "<a href='mailto:$message.email'>$message.name</a>")
#end
#if ($message.city != "")
  #set ($message.name = "$message.name, $message.city")
#end
<tr><td align="right" nowrap>Name : </td>
<td>$message.name</td></tr>

Homepage name and address

If the visitor gave her homepage address, we'll check if she also filled the homepage name field. If she gave also the name for her homepage, we'll combine the name and address to single string where the address is used as link. If the address was the only field, we'll use it as the name of the link also. If the visitor gave only the name of her homepage without the address, then we'll display only that.

#if ($message.hpURL != "")
  #if ($message.hpName != "")
    #set ($message.hpName = "<a href='$message.hpURL' target='_top'>$message.hpName</a>")
  #else
    #set ($message.hpName = "<a href='$message.hpURL' target='_top'>$message.hpURL</a>")
  #end
#end
#if ($message.hpName != "")
<tr><td align="right" nowrap>Homepage : </td>
<td>$message.hpName</td></tr>
#end

Text fields (text1, text2, text3)

#if ($message.text1 != "")
<tr><td align="right" nowrap>Age : </td>
<td>$message.text1</td></tr>
#end

Selection fields (selection1, selection2)

#if ($message.selection1 != "")
<tr><td align="right" nowrap>Found : </td>
<td>$message.selection1</td></tr>
#end

Message field

We assume that the message filed as marked as a required field, so in this case we don't need to check if the user has filled the field or not.

<tr><td valign="top" align="right" nowrap>Message : </td>
<td align="left">$message.message</td></tr>

Answer

#if ($message.answer != "")
<tr><td align="right" valign="top" nowrap>Answer : </td>
<td>$message.answer</td></tr>
#end

Date

Also the date field will always be present, as Freebok will fill it automatically.

<tr><td>&nbsp;</td>
<td>$message.date</td></tr>

Guestbook page

[We'll start the guestbook page the same way as a regular HTML
document. If you want the guestbook page to look like the rest of your
site you can use your existing documents as a base for the guestbook
page]

<html>
<head>
<title>Guestbook</title>
</head>

<body bgcolor="white" text="black">
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="468">
<tr><td colspan="3"><hr size="1"></td></tr>
<tr><td colspan="3">
<h3>Guestbook</h3>
<p>Welcome to my guestbook</p>
</td></tr>
<tr><td colspan="3"><hr size="1"></td></tr>

[Now that the basics have been defined for the page we can start using
Velocity. As you can see we use the same boring black and white, two
column layout as the previous examples. That's really not what you
want when you use Template layout, is it? So now it's time to be
creative.

To the top of the page we'll add link to your homepage and
information on how many messages there are in your guestbook, and
which ones we are currently viewing. Here we use the variables that
Velocity has made available to us.]

<tr><td><a href="$pageURL" target="_top">Homepage</a></td>
<td>Messages $msgStart - $msgEnd</td>
<td>Total of $msgTotal messages</td></tr>

[Then we'll add navigation links; to the next page in our guestbook,
Sign the Guestbook page, and to the previous page. We'll use the #if
directive to decide whether we need to create the link or if we
should just display the link text without the link. For example, we
will not make a link to the first page of the guestbook if we are
already on it.]

#if ($nextPage)
<tr><td width="33%">
<a href="$CALL_LOCATION/view.html?page=$nextPage">
Next $msgPerPage messages</a></td>
#else
<tr><td width="33%">Next $msgPerPage messages</td>
#end

<td width="34%"><a href="$writeAdd">Sign the Guestbook</a></td>

#if ($prevPage)
<td width="33%"><a href="$CALL_LOCATION/view.html?page=$prevPage">
Previous $msgPerPage messages</a></td></tr>
#else
<td width="33%">Previous $msgPerPage messages</td></tr>
#end
<tr><td colspan="3"><hr size="1"></td></tr>
</table>

[Here we'll start going through the messages on the guestbook
page. #foreach is a Velocity directive that is used to go through the
messages one by one.

Before we display the messages we modify them a bit to better suit our
needs. For example, we use the #if directive to check if the visitor
has given her email address, and if this is the case, we'll add the
address as a 'mailto:' link to the visitor's name. These are
essentially the same code snippets as in the beginning of this page.]

#foreach ($message in $messages)

#if ($message.email != "")
  #set ($message.name = "<a href='mailto:$message.email'>$message.name</a>")
#end
#if ($message.city != "")
  #set ($message.name = "$message.name, $message.city")
#end
#if ($message.hpURL != "")
  #if ($message.hpName != "")
    #set ($message.hpName = "<a href='$message.hpURL'>$message.hpName</a>")
  #else
    #set ($message.hpName = "<a href='$message.hpURL'>$message.hpURL</a>")
  #end
#end

[Now that we have modified the message fields to the way we want them
to be, we can display them. Once again we use the #if directive to
decide whether to display a field or not. If there is an empty value
in a field we will not display it (actually the comparison is:
#if ($field != "") - so we test whether the field is different than empty,
and if it is, we'll display it.

Note that we don't bother to test the fields $message.message and
$message.date as we assume that the message field is configured to be
a required field (you can configure the message field to be optional,
in which case it would be a good idea to include the check). The date
field will always be there because Freebok will fill it automatically
when the visitor submits the message.]

<table border="0" cellpadding="0" cellspacing="0" width="468">
<tr><td width="64" align="right" nowrap>Name : </td>
<td width="388">$message.name</td></tr>

#if ($message.hpName != "")
<tr><td width="64" align="right" nowrap>Homepage : </td>
<td width="388">$message.hpName</td></tr>
#end
#if ($message.selection1 != "")
<tr><td width="64" align="right" nowrap>Found : </td>
<td width="388">$message.selection1</td></tr>
#end
<tr><td width="64" valign="top" align="right" nowrap>Message : </td>
<td width="388" align="left">$message.message</td></tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr><td width="64">&nbsp;</td>
<td width="388">$message.date</td></tr>
#if ($message.answer != "")
<tr><td colspan="2">&nbsp;</td></tr>
<tr><td width="64" align="right" valign="top" nowrap>Answer : </td>
<td width="388">$message.answer</td></tr>
#end

[That was the last field that we'll display in our guestbook. Add or
remove fields to your liking. You can find out the fields that you can
use by examining the properties of the $messages variable. Remember
to make the same modifications to the Sign the Guestbook page as
well.

Next we'll make a row that will contain the horizontal line that will
separate the messages. After that we use the #end directive to end the
loop that we previously started with the #foreach directive]

<tr><td align="center" colspan="2">
<hr size="1" width="100%"></td>
</tr></table>

#end

[From the #end directive that we see above, Velocity will jump back to
the #foreach directive that we defined earlier. This loop is executed
once for each message in this guestbook page.

The loop ends after it has gone through all the messages. Now the
messages are in the guestbook page in the way that you defined inside
the loop. Depending on your settings there may be from 1 to 25
messages in one guestbook page. If your guestbook contains more
messages than one page can hold, the user can change the page by using
the Previous and Next page links in the top of the page. For user
convenience we'll add the navigation links to the end of the page as
well.]

<table border="0" cellpadding="0" cellspacing="0" width="468">
#if ($nextPage)
<tr><td width="33%">
<a href="$CALL_LOCATION/view.html?page=$nextPage">
Next $msgPerPage messages</a></td>
#else
<tr><td width="33%">Next $msgPerPage messages</td>
#end
<td width="34%"><a href="$writeAdd">Sign the Guestbook</a></td>
#if ($prevPage)
<td width="33%"><a href="$CALL_LOCATION/view.html?page=$prevPage">
Previous $msgPerPage messages</a></td></tr>
#else
<td width="33%">Previous $msgPerPage messages</td></tr>
#end
</table>

[All there is left to do is to end the HTML page properly.]

</center></div></body>
</html>

Sign the Guestbook

The fieldnames that you can use when defining the input fields in this page can be found from the page Creating the 'Sign the Guestbook' page with Template layout. There you'll also find the field properties and some additional tips.

Private message

<tr><td>&nbsp;</td>
<td><input type="checkbox" name="private" value="1">
&nbsp;Private message to the page owner</td></tr>

Text fields (name, email, city, hpName, hpURL, text1, text2, text3)

<tr><td align="right" nowrap>Name : </td>
<td><input name="name" maxlength="64"
type="text" size="40" value="$message.name"></td></tr>

Selection boxes (selection1, selection2)

<tr><td align="right" nowrap>Found : </td>
<td><select name="selection1" size="1">
<option selected value="">- Select -
<option>Search engine
<option>Just surfed
<option>Ad banner
</select></td></tr>

Message field

<tr><td align="right" nowrap>Message : </td>
<td><textarea name="message" rows="4" cols="36" wrap="virtual">
$message.message</textarea></td></tr>

Sign the Guestbook


[The Sign the Guestbook page is substantially simpler that the Read
page. You could create the whole page without using any Velocity code,
but it's better to use it to give default values to the question
fields. Additionally we have included two Velocity tricks to further
improve the page.

Again the layout of this page is far from pleasant. Heavy modification
is needed...]

<html>
<head>
<title>Sign the Guestbook</title>
</head>

[Trick no.1: autofocus() code is added to the body -tag of the
page. This has been explained more closely in the Template tips page.]

<body bgcolor="white" text="black"
#if ($focusField != "")
onLoad="window.document.gbMessage.${focusField}.focus();"
#end
>
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="468">

<form name="gbMessage" method="POST"
action="$CALL_LOCATION/sign.html">

[We'll define two required fields; name and the message.]

<input name="nameReq" value="1" type="hidden">
<input name="messageReq" value="1" type="hidden">
<tr><td><hr size="1"></td></tr>
<tr><td>
<h3>Sign the Guestbook</h3>

[Trick no.2: error message. Also this trick has been described more
closely in the Template tips page.]

#if ($error != "")
<p><b>$error</b>
#end
<table border="0" cellpadding="0" cellspacing="0" width="468">
<tr><td colspan="2"> </td></tr>

[Here we'll define a TEXT input field for each question that we want
to ask from the visitor. Additionally we'll use one selection field
and message field that is type TEXTAREA.

Note that the field names that we use here are exactly the same as the
ones we used in the Read the Guestbook page. We are using the Velocity
variables to give default values to the fields. The first time the
visitor comes to this page these variables will contain an empty value
(except the $message.hpURL field, which will contain value
'http://'). When the visitor submits the page and there occurs an
error (e.g. a required field was not filled), the variables will
contain the values that the visitor had entered.]

<tr><td width="25%" align="right" nowrap>Name : </td>
<td width="75%"><input name="name" maxlength="64"
type="text" size="40" value="$message.name"></td></tr>

<tr><td align="right">Email : </td>
<td><input name="email" maxlength="64"
type="text" size="40" value="$message.email"></td></tr>

<tr><td align="right">City : </td>
<td><input name="city" maxlength="64"
type="text" size="40" value="$message.city"></td></tr>

<tr><td width="25%" align="right" nowrap>Homepage : </td>
<td width="75%"><input name="hpName" maxlength="128"
type="text" size="40" value="$message.hpName"></td></tr>

<tr><td align="right">Homepage URL : </td>
<td><input name="hpURL" maxlength="128"
type="text" size="40" value="$message.hpURL"></td></tr>

<tr><td width="25%" align="right" nowrap>Found : </td>
<td width="75%">
<select name="selection1" size="1">
<option selected value="">- Select -
<option>Search engine
<option>Just surfed
<option>Ad banner
</select></td></tr>

<tr><td width="25%" align="right" nowrap>Message : </td>
<td width="75%"><textarea name="message" rows="4" cols="36" wrap="virtual">
$message.message</textarea></td></tr>

<tr><td colspan="2">&nbsp;</td></tr>
<tr>
<td align="right">&nbsp;</td>
<td><input type="submit" value=" Submit ">&nbsp;
<input type="reset" value=" Reset "></td></tr>
</table></td></tr>
</form>
</table>

</center></div></body>
</html>