| A: All you have to do now is put your HTML
code in the template files and also follow some rules which apply to templates.
We will do this for each of the template files (parts)
for you as an example:
1. Header - tpl/client_header.tpl
We did the following:
-
Copied the whole HTML text of the Header part of our sample page to the
file "tpl/client_header.tpl".
-
Replaced the Title texts with the variable {TITLE}.
-
Replaced the Encoding specification text with the variable {PAGE_ENCODING}.
-
Added 2 JavaScript lines in the <head> tag.
Their functions will be used later to validate the supplied user input and for
the BBCode feature.
The template engine will replace the {TITLE} variable
with the corresponding title text, before the HTML is provided to the visitor's
browser. The same applies for the {PAGE_ENCODING} variable.
It will be replaced with the encoding scheme you configured in the Admin panel of your guestbook.
Note:
1. The changes we made are marked RED in
the HTML code. This rule will apply to our next examples as well.
2. New code that we added is marked GREEN.
It is present in the original template and you simply have to leave it there.
3. Special template parts, which must be always present, are marked BLUE.
They are present in the original template provided by us as well, and you would
have to leave them there.
2. Error message - tpl/client_error.tpl
We did the following:
- Copied the whole HTML line of the Error message part of our sample page to
the file "tpl/client_error.tpl".
- Replaced the error text with the variable {ERROR_MSG}.
- Left the line marked BLUE unchanged.
3. Success message - tpl/client_thanks_short.tpl
We did the following:
- Copied the whole HTML line of the Success message part of our sample page to
the file "tpl/client_thanks_short.tpl".
4. Paging - tpl/client_paging.tpl
We did the following:
- Removed any CSS style tags and other unneeded tags from the original "tpl/client_paging.tpl".
- Replaced the "Prev", "|" and "Next" texts in the template.
-
Put our "<hr>" tags (as they are part of our
HTML code).
-
Replaced the numbers 1 and 2 with the variable {PAGE_NUMBER}.
-
The tags {PAGE_FIRST_URL}, {PAGE_PREV_URL}, {PAGE_URL}, {PAGE_NEXT_URL}, {PAGE_LAST_URL} are
respectively the URL addresses of the first page, of the previous page, of the
page with number {PAGE_NUMBER}, of the next page, and of the last page.
-
For simplicity, in this example the URL links for the "First" and "Last" pages
are removed.
The paging for most websites look similar and therefore the paging template
would rarely need any changes.
5. Form - tpl/client_form.tpl
Modifying the form is the hardest part, because the design of the form changes
dynamically - upon error, the field subjects become red, the required stars disappear,
and the message explaining that some of the fields are required also disappears.
Furthermore, the form <input> fields have to display some data supplied
by the script, so that the visitor does not have to re-enter the whole input
information upon error (i.e. the script re-submits the user input to the form).
Also the <input> maximum length dynamically depends on the configuration
of the guestbook and the protection image. Additionally, the BBCode buttons are
shown/hidden depending on the configuration of the guestbook.
Form begin:
We did the following:
- Inserted a <form> HTML tag, with action property {U_POST_FORM}.
-
Added a JavaScript action in the <form> tag. The JavaScript function is
used to validate the input fields filled in by the user.
Input fields:
This is how to modify the "Subject + input field" part of the form:
We did the following:
-
First, we designed how the Subject field text layout will be coded in HTML
when there is no error.
-
Copied our <tr> and </tr> lines.
-
Copied the whole HTML line which shows the Subject field text in red (upon
error).
-
Copied the whole HTML line which shows the Subject field text normally
(without an error) and replaced the star with the variable {SUBJECT_STAR}.
-
We left the original <input> HTML tag as it already has all template variables
and names configured ({F_SUBJECT}, {F_SUBJECT_LENGTH}, name="subject").
-
We deleted the class="mainfield" definition from
the original <input> HTML
tag as our web page does not use CSS.
The fields Name, E-mail, Location, and Homepage are to be modified in exactly
the same way.
What is left is the Comment field + BBCode buttons, Image protection field,
and the submit buttons.
We will briefly show how to embed these blocks too.
Comment:
The green JavaScript code's function is to insert the appropriate BBCode
tag when a button is clicked.
We added the {COMMENT_STAR} and the {F_COMMENT} tags
at the appropriate place.
Image Protection:
We made the template code simple, because the <input> field will not
get red upon error (as it does in the original template supplied with the guestbook).
Pay attention that the <input> tag name must be "code" and do not
forget to replace the location of the image with {U_SECURITY_IMG}.
Submit Buttons:
Pay attention that the <input> tags names must be "submit" and "preview",
and do not forget to leave the original lines (marked BLUE).
6. Comment - tpl/client_comment.tpl
We did the following:
- Copied the <a name> line from the original template
-
Replaced all text with the respective template variables {P_SUBJECT}, {P_NAME}, {P_EMAIL}, {P_LOCATION} and {P_COMMENT}
-
Copied the <a href> HTML link from the original template ({P_HOME_PAGE})
Note that the template engine lets you add 3 more variables in this template:
- {P_LINE} - This shows the comment number, or the
word "New" if this is
a Preview. The word "New" can be configured in the "tpl/language.php" file.
- {P_DATE_TIME_READABLE} - This shows the date/time
when the comment was made. The format of the date/time string can be configured
in the Admin panel.
- {P_IP_ADDRESS} - This shows the IP address of the
person who posted the comment.
7. Footer - tpl/client_footer.tpl
We did not make any changes here:
|