Views and Templates of Fat Free Framework

According to fundamental of the MVC paradigm, HTML page should be independent of the underlying PHP code related to routing and business logic.

F3 support two type of templating:: (1) PHP as a Template Engine, (2) F3 Template Language.

PHP as a Template Engine

First create a new template file hellophp.htm in directory “ui”. put the one line code in this file::

<p>Hello, <?php echo $name; ?>!</p>

Save it.

Now We need to set the F3 system variable “UI” to show it the path of templates directory in index.php file.

$f3->set('UI','ui/');

you can change this path as you wish.

Under that line add a new routing::

$f3->route('GET /hellophp',
    function($f3) {
        $f3->set('name','PHP');
        $view=new View;
        echo $view->render('hellophp.htm');
    }
);

If we access “http://localhost/helloworld/hellophp“, we can see the the output::

Hello, PHP!

So embedding PHP code we can templating our views.

F3 Template Language

F3 has its own template engine. Using F3‘s template engine we can rewrite above example::

Create a new file “hellof3.htm” in “ui” and put below code in it::

<p>Hello, {{ @name }}!</p>

in “index.php” file add a new routing::

$f3->route('GET /hellof3',
    function($f3) {
        $f3->set('name','F3');
        $template=new Template;
        echo $template->render('hellof3.htm');
    }
);

If we access “http://localhost/helloworld/hellof3“, we can see the the output::

Hello, F3!

If we want to an array with F3‘s own template engine. we can do this easily.

our array is ::

$f3->set('color',array('red','green','blue'));

we can access this array in template file like::

<p>{{ @color[0] }}, {{ @color[1] }}, and {{ @color[2] }}</p>

about loop we will learn next part of this tutorial.

We can also call function from template, let our function is::

$f3->set('apple',
    function($amount,$color) {
        return $amount .' '. $color .' Apples';
    }
);

To call this function from template file::

{{ @apple(2,'red') }}

We can also include one template file to another template file. create a new template file “head.htm” in “ui” directory, and put text “Header” in this file as content. then include this “head.htm” in “hellof3.htm” file::

<include href="header.htm" />

Now we will get content of “head.htm” in “hellof3.htm”

Template Directive

F3 provides some template directive templating. In this post we will learn some of those.

1) “include” template directive :

“include” template directive is used for include any external template file in template file. If we want to put header and footer template in a page template, then we can use this “include” template directive.

Now we will create a new routing like below::

$f3->route('GET /directive',
    function($f3) {
        $template=new Template;
        echo $template->render('page.htm');
    }
);

Create new 3 template files page.htm, header.htm and footer.htm in “ui” directory ( cause i set UI global variable to ‘ui/’, $f3->set(‘UI’,’ui/’); )

Write “page contents” in page.htm file.

page contents

“header part” in header.htm file.

header part

“footer part” in footer.htm file.

footer part

If we access our “directive” router then we can see output of page.htm template file ::

page contents

Now use “include” directive to add header.htm template in page.htm template. So page.htm file’s code will look::

<include href="header.htm" />
<br />
page contents

Our “directive” router will display::

header part
page contents

If we want to add footer.htm at bottom of page.htm then just do like as for header we just did, add footer.htm using “include” directive, so the page.htm file’s code will be::

<include href="header.htm" />
<br />
page contents
<br />
<include href="footer.htm" />

We can see the output of footer.htm in page.htm by “directive” router access::

header part
page contents
footer part

2) “exclude” template directive :

F3 has a directive to make any HTML block totally invisible. Template directive “<exclude>” is used for this.

Write some new lines in out page.htm file.
page.htm file’s content::

<include href="header.htm" />
<br />
page contents
<br />
<include href="footer.htm" />

<exclude>
    <p>A block of content we don't want displayed at the moment</p>
<exclude>

We will see same output as before, we can not see the excluded block in output.

3) “check” template directive :

Condition directive, When we need to display any HTML block on any condition then we can see “<check>” directive.

Structure of “<check>” directive ::

<check if="{{ condition }}">
    <true>
        <div>Condition is true</div>
    </true>
    <false>
        <div>Condition is false</div>
    </false>
</check>

If we dont have “false” block then it dont need to use “<false>” tag for “<check>” block, we can simple write it like below::

<check if="{{ condition }}">
    <true>
        <div>Condition is true</div>
    </true>    
</check>

Now add a variable in our “directive” router “$f3->set(‘name’, ‘f3’);”.
“directive” router is::

$f3->route('GET /directive',
    function($f3) {
        $f3->set('name', 'F3');
        $template=new Template;
        echo $template->render('page.htm');
    }
);

Clear up page.htm file and put below code::

<check if="{{ @name=='F3' }}">
    <true>
        <div>Our favorite PHP Framework is F3</div>
    </true>
    <false>
        <div>No favorite PHP Framework name selected</div>
    </false>
</check>

Our output will be ::

Our favorite PHP Framework is F3

Change the value of “name” variable then it will display “false” block.

4) “repeat” template directive :

“repeat” template directive is for repeating HTML blocks. This directive is alternative of “foreach” loop.

Structure of “” directive is::

<repeat group="{{ @collection }}" key="{{ @key }}" value="{{ @value }}" counter="{{ @count }}">
    <p>HTML Blocl</p>
</repeat>

Now add a array in our “directive” router. So our “directive” router will be as::

$f3->route('GET /directive',
    function($f3) {
        $f3->set('colours',array('red','green',' blue'));
        $template=new Template;
        echo $template->render('page.htm');
    }
);

In page.htm we will display this array, so add “repeat” directive block like below::

<repeat group="{{ @colours }}" key="{{ @key }}" value="{{ @value }}" counter="{{ @count }}">
    <p>{{ @key }}-{{ @value }}-{{ @count }}</p>
</repeat>

Output will be::

0-red-1
1-green-2
2- blue-3

Do you want to render a multi-dimensional array by “repeat” directive, then declare the array (which will contain some numbers and character) in router as below ::

$f3->route('GET /directive',
    function($f3) {
        $f3->set('num_alpha',
            array(
                'num'=>array(1,2,3,4),
                'alpha'=>array('a','b','c', 'd')
            )
        );
        $template = new Template;
        echo $template->render('page.htm');
    }
);

To display this array, we will use nested “repeat” directive, so page.htm will be like ::

<repeat group="{{ @num_alpha }}" key="{{ @type }}" value="{{ @vars }}">
    {{ @type }} ::
        <repeat group="{{ @vars }}" value="{{ @var }}">
            {{ @var }},
        </repeat>
    <br />
</repeat>

At last the output::

num :: 1, 2, 3, 4, 
alpha :: a, b, c, d,
I am a student of Web Application Development courses at Google University.

Leave a Reply

Your email address will not be published. Required fields are marked *