Using Flexy in a simple web page - a tutorial
The Php page
In this tutorial I will show how easy it is to use Flexy to create a HTML template. I decided on a simple two column page design with a top title section. On the left side is a brief description which is passed to the template as a variable. Below that is another text variable which is only displayed once the form (which appears on the right hand side) has been submitted. On submission, a variable ($showName) is set to be true, this variable is then passed through an if-else statement in the template. If true, then some text is displayed (as well as a picture on the right) else if false, then the form is displayed. There is also a date/time display on the left. This is passed as the value returned by a method. There are two arrays which are handled within the template using a foreach loop. The one is the list of items in the table on the left and the other, the links displayed below the picture after the form has been submitted.
In order to follow, you will need a basic knowledge of HTML and Php. Make sure that you have a working installation of Php and PEAR and that you have the following two packages installed: PEAR and HTML_Template_Flexy. To make sense of the following explantion you will have to refer to the test_static.php file. The comments in that file as indicated by // will be repeated here with perhaps a little more of an explanation so as to make the logic easier to follow. Let’s start at the begining.
Firstly we need to load the class definitions so make sure that you have the PEAR and HTML_Template_Flexy packages installed. Next, you need a reference to the static properties of the $options variable. This is done using &PEAR::getStaticProperty and is part of the process of setting up the template object. Then you need to set up the configuration options. You can set the configurations in an .ini file or use the $options array - in which case you don’t need the .ini file.You can also use the $options array to override the .ini configuration. This is done when we instantiate the class with this line of code $template = new HTML_Template_Flexy($options); Next, we set up the page controller classs, class controller_test wherein we declare the class member variables and the constructor method, function controller_test() as well as the other class methods: function start(), function output() and function get_date (). The constructor method controller_test() is automatically executed when the class is instantiated.
The start () method checks whether the $_POST['your_name'] variable, sent when the form was submitted, is set. If it is set (in other words the name field in the form was filled in and the send button was clicked) then the variable $your_name is set to the value of the POST variable and $this->showName is set to be true. The $title member variable $this->title is set and a new object, anObject is created with $this->anObject = new StdClass. We can now add the members (as well as their values): web_address, picture, form_blurb, your_name and idig_blurb to this object. We then assign values to the arrays, an_array and links.
Next we load the class definitions for the form elements with this line of code require_once ‘HTML/Template/Flexy/Element.php’; Then we create the HTML element for the form element your_name and then assign a value to it with this line $this->elements['your_name']->setValue($your_name); Here the value of the variable $your_name is assigned to the your_name element.
Then we have the get_date() method which uses the Php’s date() function to return the current date and time. Finally we get the output section consisting of the output() method. This constructs the output object and if neccessary converts the Template markup into PHP code, and writes it to the compileDir (./templates/test_templates/) directory as set when we configured the options. Next, $output->outputObject($this,$this->elements); merges the controller object ($this) and the associative array of form elements ($this->elements) with the template (test_template.html) and outputs the result. Essentially this makes the values of the supplied object, $this (and loads the HTML_Template_Flexy_Elements elements, $this->elements) available to the template, test_template.html when it runs.
The template
When the above page is run, it uses the template described below. Basically this template consists of HTML code with Flexy placeholders which are then converted into php code.
I won’t be commenting on the HTML code itself but only on the Flexy parts within the HTML document.
The first Flexy placeholder that we come across is the {title} placeholder in the heading just below the first tag, . This defines the title of the page and appears in the title bar of the browser window. The {title} placeholder again appears in the body of the page, just below the tag, {title}. In both cases, the title gets it’s value from the member variable, $title in the php page. The next Flexy placeholder that we come across is {if:!showName}, this creates a php if statement using the variable $showName on compiling the template. What it does here, is to check whether the variable is false in which case it will execute the following code until it reaches the {else:} statement. If the $showName variable is true then the code following the {else:} statement is executed. So if $showName is false then the form and the form blurb will be displayed, else a picture and a number of links will be displayed. $showName will remain false until the user enters a name and submits the form. This will set $showName to be true and the relevant code within the template will be executed. The form’s input variable, your_name, will be passed to the variable $your_name using the POST form method and then to the object member, anObject.your_name within the start() method of the php page. The object member form_blurb is displayed with this piece of code, {anObject.form_blurb} and will display this piece of text:
Enter your name in the input field and press SEND. The form will be sent (back to test_static.php) and the variable showName will be set to TRUE. This variable will then be used in the template if statement to determine whether or not to show certain sections of the page.
Next we see {anObject.picture:h} which will display the picture as contained in the HTML code ![](\"frog.jpg\")
in test_static.php. The placeholder {anObject.picture:h}, with the h modifier will interpret the HTML code accordingly. The placeholder {anObject.picture} without the h modifier will merely echo the HTML code .
Below the picture placeholder is the following code:
{foreach:links,key,value}
<a href=”{value}”>{key}</a>
{end:}
This loops through the links array and displays a set of links below the picture. Each link has value as the URL of the destination page and key as the label. Note that the foreach loop is closed with an end. A little way below this end is another end which closes off the {if:!showName} {else:} loop.
Then we have {anObject.idig_blurb} which displays the object member variable, $idig_blurb. Followed by the object member, {anObject.web_address} which displays the web address. Then there is another if loop, {if:showName} containing the your_name object member variable which displays the name entered in the input field of the form and which was submitted on clicking the send button. The name is only displayed if the condition within the if statement, namely showName, is true. After this is the {get_date():h} placeholder which displays the return value of the get_date() method which is the current date and time in the specific format as determined by the parameters set in the php date() function.
Finally there is another foreach loop, this time looping through the an_array array, listing the value of the key on the left and the value as the URL of the destination web page.
Hopefully this should all make sense. You can download the relevant files here.
