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

Table of Contents


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

Study the sample

Here we will highlight and discuss some of the features of the sample application, so that we can understand it better.

TOC

Exercises

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:

  1. Open the file page2.css and change the color in the highlighted lines to red.
  2. Open the file page2.html and change the text in the highlighted lines to "This box is red!".

Modify page3.html:

  1. Open the file tpl_2_1.css and change the color in the highlighted lines to red.
  2. 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

  1. Rename folder img to images: $ mv img images
    Test the application; the images will be broken.
  2. 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

  1. Open the file page1_content.html and copy the selected lines to the file tpl_vars.html.
  2. Replace the selected lines with this line:
    <Include SRC="{{#./}}tpl_vars.html"/>
  3. Copy the selected lines of page1_content.html to file include_tag.html, and replace them with:
    <Include SRC="{{#./}}include_tag.html"/>
  4. Copy the selected lines of page1_content.html to file comments.html, and replace them with:
    <Include SRC="{{#./}}comments.html"/>
  5. Copy the selected lines of page1_content.html to file js_code.html, and replace them with:
    <Include SRC="{{#./}}js_code.html"/>
  6. 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.

  1. Create new folder page1:
    $ mkdir page1
  2. 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/
  3. 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".
  4. 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.
  5. There is still one more thing to fix: open footer.js, modify goto_page1() and set the GoTo() parameter to "page1/page1.html".
  6. 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

  1. In the folder /templates/page1/ create the file page1_content.css which has these lines:
      h4 { color: red  }
      p  { color: blue }
    
  2. At the top of the file page1_content.html add this line:
      <link rel="stylesheet" type="text/css" href="{{#./}}page1_content.css">
    
  3. Test the application and notice the changes in page1.

6 - Move template tpl_2.html to folder page3/tpl_2/

  1. Create new folder tpl_2:
    $ cd templates/page3/ ; mkdir tpl_2
  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
  3. Open the file tmpl.html and change the SRC attribute of the include tag to {{#./}}tpl_2/tpl_2.html.
  4. Test the application and go to page3. It should be displayed correctly.

Do yourself these changes as well:

7 - Debug templates

  1. Open the file config/const.Debug.php and set the constant DEBUG_TEMPLATES to true.
  2. Refresh the application.

8 - Think about it

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