Using Twig with Slim Framework

In this post I will continue from my last post about Using PHPActiveRecord with Slim Framework we will move on to creating template(views) using Twig Template Engine. Twig is written by the creator of Symfony Framework Fabien Potencier and the template syntax is easy to understand and extending Twig is also relatively easy. Before continuing any further I would advice on following the previous blog post Using PHPActiveRecord with Slim Framework or if you are not interested in learning about PHPActiveRecord you can download the files from the GitHub repository. Since my last post, Slim version has changed to 1.5.1.4 and I have updated the project files to this version due to some bugs which were fixed.

1. Downloading Twig

Go to the Twig Template Engine website and click on the Install Now link, on this page you will be provided with various ways of downloading Twig. At the time of writing the latest verison is 1.4.0.

2. Downloading Slim Extras

Thankfully the Slim Framework developer has developed some extras to help when using different Template Engines, these are saved in a repository on GitHub where you can download the files and install by following the instructions provided. Download the extras from here http://github.com/codeguy/Slim-Extras.

3. Adding and Configuring Twig to your Slim project

Copy the Twig directory from the lib directory of the Twig files you downloaded in Step 1 and place them into the vendor directory, once you have completed this do the following inside your Slim index.php file.

// Configure Twig
TwigView::$twigDirectory = dirname(__FILE__) . '/vendor/Twig';

4. Creating your template

I can now change the file extension of the files in my template directory to .html or .twig, for the purpose of this article I will change it to .html. Now you should have index.html and edit.html inside your task sub directory under template directory. I will take it a bit further to show you one of Twig's nice features, I will create a base.html file inside the templates directory which will look like this:Slim Tasks Project

Slim Tasks Project

{% block content %}{% endblock %}

For educational purpose only. You will notice some unusual tags inside this file if you are new to Twig (some of you might be familiar with the tags due to other template parsers). We have defined a content block, what this does is that it allows you to include content in, that are from any other template that extends the base.html template. Now we will make some changes to our index.html template inside our task directory to look like this:

{% extends "base.html" %} 
{% block content %}
    # Tasks
    <?php foreach ($tasks as $task): ?>
        <a href="<?php echo Slim::getInstance()->urlFor('task_delete', array('id' => $task->id)); ?>">Delete</a>
    <?php endforeach; ?>

    <form action="<?php echo Slim::getInstance()->urlFor('task_new'); ?>" method="post">
        <input type="submit" value="Add Task" />
    </form>
{% endblock %}

In here you will notice some likeness to the base.html template since we are now telling the content block what content it should be filled with, at the top of this file you will notice a new tag, one called extend. This tag does exactly that, it allows you to extend another template and populate the blocks defined in that template using the block tags. If you view this in the browser you will notice, the page looks a bit broken so lets fix that now. Because we are now using Twig as the template parser and not standard PHP itself we will need to change all related tags in the code.

Lets start with the foreach loop, Twig has it's own version of this called a for tag, this allows us to loop through arrays or objects.

{% for task in tasks %}
    <a href="<?php echo Slim::getInstance()->urlFor('task_delete', array('id' => $task->id)); ?>">Delete</a>
{% endfor %}

our code will now look like the above which will output some rather horrible code since we still have instances of raw PHP in their. Lets start changing out all instances of PHP that are still present in the code.

{% for task in tasks %}
    <a href="{{ urlFor('task_edit', {'id': task.id}) }}">{{ task.name }}</a> <a href="{{ urlFor('task_delete', {'id': task.id}) }}">Delete</a>
{% endfor %}

now we have changed all PHP variables to Twig tags, the Twig syntax is a bit different when it comes on to variables, Twig uses {{ }} to encapsulates it's variables and if the variable is a Object or Array you can dive into it using the period (.) symbol, this would have been a (->) in PHP. Luckily for us I have been appointed as a maintainer of the Slim Extras repo and I have implemented the Slim Framework urlFor function as a Twig Extension which we will initialize in our index.php file. Inside our index.php file we will call the Twig Extension and add this function to our template(view).

TwigView::$twigDirectory = dirname(__FILE__) . '/vendor/Twig';
TwigView::$twigExtensions = array(
    'Twig_Extensions_Slim'
);

$app = new Slim(array(
    'view' => 'TwigView'
));

Here we tell Twig which extension to load, you can write your own extensions and call them here by adding them to the array.

Conclusion

Twig Template Engine is by far the easiest and most robust templating engine I have used to date, combining it with PHPActiveRecord and Slim Framework gives you a great rapid prototyping toolset. You can view and download the files for this tutorial here GitHub repository.