2 - Templates
Explains templates. This application uses the <Include>
tag to insert the same header file at the beginning of each
template and to break the templates into sub templates. It shows
how to include the javascript code and the stylesheet of each
template. It also explains the use of the framework comments and
the difference between them and the HTML comments. Explains how to
debug the template structure.
Test
Browse
Download
Templates
Templates are pieces of HTML code, that are used or combined by
the framework to generate the HTML pages that are sent to the
browser.
1 - Template variables
The templates may contain variables inside them (called
"template variables"), which are replaced by the framework with
their string values. The variables inside a template are denoted by
double curly braces: {{#tpl_var}}.
See this
example. The {{#TPL_URL}} variable in line 4 contains
the URL of the folder templates, which in this case is
{{APP2_URL}}templates/. The {{#TPL_PATH}} variable in
lines 7 and 11 contains the path in the server of the folder
templates, e.g. /var/www/html{{APP2_URL}}templates/. Both of them
are declared in the file
config/const.Paths.php. The variable {{#./}}
in line 9 is a special framework variable that always contains the
path of the current folder, i.e. the folder of the current
file.
2 - The <Include> tag
The templates may also contain some extra tags, which are not
HTML tags. These tags are reckognised and processed by the
framework. One of them is the <Include> tag, which is used to
include another template inside the current template:
<Include SRC="file_to_be_included" />
It is a very useful tag, because it allows to divide pages into
subtemplates, which results in a better structured application,
provides modularity (the graphical designer can work with smaller
pieces of code), and reusability (templates are easier to be reused
in other pages or other applications). See how it is used in this
example.
3 - Comments
The templates may contain some special comments as well:
<!--# Framework comments #-->
These comments are like HTML comments but they have a diesis
# at the opening and closing marks. These comments
are not processed (are skiped, ignored) by the framework and are not
displayed in the HTML page that is generated.
Example.
4 - JavaScript code and stylesheet of a template
If a certain template has some javascript code or some special
styles of its own, then it is better to include them at the
begining of the template (instead of including them globally, at
the <Head> of the page). This makes the template more
independant from the other parts of the page and thus easier to use
it again into another page. They are included like this:
<script language="javascript" src="file.js"></script>
<link rel="stylesheet" type="text/css" href="file.css">
example1,
example2.
The inclusion is much better than writting the JS and CSS code in
the template because it separates the HTML code from the JS and CSS
codes. It also is more efficient (has a better performance) because
the next time that this template is loaded in browser again, most
probably the browser will get "file.js" and "file.css" from its
cache, instead of retrieving them again from the server.
TOC
Here we will highlight and discuss some of the features of the
sample application, so that we can understand it better.
- All the templates of the application are placed in the folder
/templates/. We tell to the framework where to look for the
templates by giving an appropriate value to the constant
TPL_PATH
in the file
config/const.Paths.php.
- All the images of this application are placed in the folder
/img/. In templates they are linked using the
{{#IMG_URL}} variable.
See how it is used. The {{#IMG_URL}} template
variable gets the value from the PHP constant IMG_URL,
which is declared in the file
config/const.Paths.php.
- All the files and templates of the page3 are placed in the
folder /templates/page3/. Organizing files into folders and
subfolders reduces the complexity of the application and makes it
easier to be understood and maintained.
Notice how the transition to page3 is done.
- All the pages include the same header and footer template, e.g. see
page1.html. If you want to change something in the footer of
the page, then you don't have to change every page, but you make
the change only once in the footer.
- Browse
the files of the application and see the templates page1.html,
header.html, footer.html, page1_content.html.
See them both in preview mode and in code view mode (select the "Code View"
mode in the panel at the top and then click "Refresh").
- Browse the files and see the template page2.html and all
the templates in the folder /templates/page3/. See them both in
preview mode and in code view mode. These two pages are the same
in terms of what they display, however they are implemented
differently in the server. page2.html is implemented as a flat
big HTML file, while page3.html is structured, divided into
several small subtemplates. Try to make the same modification in
both of them and see which one is easier to be modified.
TOC
Before starting the exercises, make a copy of the application
app2 to the folder test/app2. If you have problems
with doing this (e.g. test/app2 doesn't work) then see the
first tutorial, second exercise.
1 - Modify page2.html and page3.html
Change to red the color of the tpl_2_1 box, and change the text
inside it to "This box is red!".
Modify page2.html:
- Open the file
page2.css and change the color in the highlighted lines to
red.
- Open the file
page2.html and change the text in the highlighted lines to
"This box is red!".
Modify page3.html:
- Open the file
tpl_2_1.css and change the color in the highlighted lines to
red.
- Open the file
tpl_2_1.html and change the text in the highlighted line to
"This box is red!".
Which of the pages do you think is easier to be modified?
2 - Rename folder img to images
- Rename folder img to images:
$ mv img images
Test the application; the images will be broken.
- Change the value of the IMG_URL constant in the file
const.Paths.php.
Reload the application. The images should be allright.
If all the images in the application are linked like this:
<img src="{{#IMG_URL}}image_name.png"/>
there will be no problem. However, if any image is hard linked
like this: <img src="/img/image_name.png"/>
it will not be displayed.
3 - Divide Page1 further into subtemplates
- Open the file
page1_content.html and copy the selected lines to the file
tpl_vars.html.
- Replace the selected lines with this line:
<Include SRC="{{#./}}tpl_vars.html"/>
- Copy the
selected lines of page1_content.html to file
include_tag.html, and replace them with:
<Include SRC="{{#./}}include_tag.html"/>
- Copy the
selected lines of page1_content.html to file
comments.html, and replace them with:
<Include SRC="{{#./}}comments.html"/>
- Copy the
selected lines of page1_content.html to file
js_code.html, and replace them with:
<Include SRC="{{#./}}js_code.html"/>
- Test that the application is OK.
4 - Move Page1 to a new folder
If you make a listing of the folder /templates/ you will see
that now there are a lot of files in it and it has started to
become messy. It would be better if we moved page1 files to another
folder.
- Create new folder page1:
$ mkdir page1
- Move files page1.html, page1_content.html,
tpl_vars.html, include_tags.html, comments.html,
js_code.html to folder page1
e.g. $ mv page1.html page1/
- If you test the application now, you will get an error. Open the file
config/const.Options.php and change the value of the constant
FIRSTPAGE to "page1/page1.html".
- If you test the application now, it will not be able to find
the stylesheet and the header and footer templates. Open the file
page1/page1.html and replace {{#./}}
with {{#TPL_URL}} for the stylesheet, and with
{{#TPL_PATH}} for the templates, in the selected
lines.
- There is still one more thing to fix: open
footer.js, modify goto_page1() and set the
GoTo() parameter to "page1/page1.html".
- Don't forget to refresh or reload the browser, so that it gets the
change in footer.js (otherwise it may still use the cached, old
version).
5 - Change the styles of the page1_content
- In the folder /templates/page1/ create the file
page1_content.css which has these lines:
h4 { color: red }
p { color: blue }
- At the top of the file page1_content.html add this line:
<link rel="stylesheet" type="text/css" href="{{#./}}page1_content.css">
- Test the application and notice the changes in page1.
6 - Move template tpl_2.html to folder page3/tpl_2/
- Create new folder tpl_2:
$ cd templates/page3/ ; mkdir tpl_2
- Move the files tpl_2.html, tpl_2.css,
tpl_2_1.html, tpl_2_1.css, tpl_2_2.html,
tpl_2_2.css to the new folder:
$ mv tpl_2*.* tpl_2
- Open the file
tmpl.html and change the SRC attribute of the include
tag to {{#./}}tpl_2/tpl_2.html.
- Test the application and go to page3. It should be displayed
correctly.
Do yourself these changes as well:
- Create a new folder /templates/page2/ and move the files
page2.html and page2.css to it.
- Create a new folder /templates/page3/tpl_1 and move the
files tpl_1.html and tpl_1.css to it.
- Create a new folder /templates/page3/tpl_2/tpl_2_1 and move
the files tpl_2_1.html and tpl_2_1.css to it.
- Create a new folder /templates/page3/tpl_2/tpl_2_2 and move
the files tpl_2_2.html and tpl_2_2.css to it.
- Open the file
config/const.Debug.php and set the constant
DEBUG_TEMPLATES to true.
- Refresh the application.
Suppose that you would like to add the current date at the top
of each file (whithout using JavaScript, using PHP). How would you
do it? Or, in general, how could you display something from PHP in
the page?
TOC