Creating A Simple Website Using SensioLabs (Symfony) Silex and Twig

It’s been a long time since I last wrote a tutorial, all I can do is apologise for the long gap and tell you that it was mostly due to lack of time and, to be frank, lack of the motivation to write. Recently though I have found myself with a renewed vigour and I will be posting more tutorials as regularly as work allows.

What is Silex?

Silex is a PHP Micro Framework from SensioLabs, they are the same developers who gave us the fantastic Symfony PHP Framework that is well known and loved.

Silex is great for building small projects and today I’m going to show you how to build a simple website with routing and using Twig as a templating engine.

Getting Silex

To get started you will need to get Silex into your development environment. If you are using Vagrant, or you have Composer installed, you can just navigate to the folder you want to install Silex and create a composer.json file with the following inside.

After that you just need to run:

If all that doesn’t make sense to you then you probably don’t want to use Composer, although I do recommend you check it out at some point, and instead want to download the archive from the Silex website. Please choose the Fat archive or you will be missing some of the dependencies required for this tutorial.

If you do download the archive, delete the web folder included with the archive. We will not be using that for this tutorial. DO NOT do that in a production environment. We are only doing that here to keep things simple as, depending on your setup, it can be complicated to keep Silex outside of the web root. We will look at how to do that in the second part of this tutorial.

Silex Demo

We all like a demo, so here is what we are going to be creating. If you like Llama’s you’ll love this.

Demo Images

The images I have used in the demo are all from Flickr and are licensed under Creative Commons. I have included them inside the Project Files zip, but if you are following along without the files please head to the demo and save them to your computer, or replace them with Kittens.

Including Silex

The first thing we need to do is create the one and only file that will contain PHP, the rest of the tutorial will be fleshing out the website with Twig template files and CSS. So in the folder you have extracted/installed Silex into create an index.php file.

I’m going to go over the file in a few steps to help explain what sections of the code do & so that it helps break things up. First up, let’s setup Silex.

That’s all there is to it. This just includes the autoloader for Silex and creates a new application, stored into the $app variable.

Obviously you do not want to leave the debug flag in when running in production, but it provides a lot of detailed and useful information if we hit any errors during development. Just remember to comment it out or remove it when moving to a production environment.

Next up we register Twig with our app. Twig comes built into the Fat version of Silex as a service so we can just ask Silex to enable it and we are good to go. We also pass a path to our views folder. I have chosen to make a folder called views. Please feel free to change this to anything you like.

We are also adding a handy function to twig which will generate the URL to an asset, that would be any images, CSS files or JS files. This is useful because it saves space in our template files, and if we wanted to we could host assets on a CDN and we would only need to make a small change to our function. For those curious you would do this:

Simple and retroactive.

Finally we register the URL Service provided in the Silex framework so we can generate links without any complications.

This adds a global variable that will be available to all Twig templates which contains the name of the route that is being displayed. This can be useful for many things, but in this case I am going to use it to mark the current page’s navigation link as active. More on that later.

$app->before() is ran before the controller is executed and is ran regardless of the route being displayed. That’s why we are using it here, it is ran before the templating system has executed so we can add a global variable to Twig without any issues.

Here we are starting to add the page routes. We’ll just go through the home page to start with, that way we don’t overload on information. For the moment we are just adding the index route and the run command.

This is pretty simple. We are creating a route for the path /. This would refer to the root of your domain, or if you were hosting from a sub-folder (like my demo) that would become the root. That is provided your Apache/Nginx config is set-up correctly, more on that in the tips at the end of this tutorial.

We simply pass the $app variable through to our function using the new use keyword introduced in PHP 5.3.0 (I believe). This allows us to use the Twig render and return it. Returning while in the context of a route will output to the browser. bind() gives the route a name so we can generate links to it using the URL Generator service later.

Introducing Twig

If you have never used Twig before prepare for a treat. Twig is a wonderful templating engine, I much prefer it to Smarty. It reminds me of Handlebars (a JS based templating engine) which is a good thing.

First, if you didn’t already, create a folder in your project root named the same as the name you gave the twig.path option when registering the Twig service with Silex. Remember? I called mine views. In that folder create a new file called layout.twig. Yes. twig is the file extension. You can use a normal HTML extension instead if you wish, but this extension helps remind me they are twig files.

In this file you need to create the layout or the common HTML code that all our pages will use. This is going to be a big code block, but here it is.

That’s a lot of code, but the bulk of it is just a standard HTML document with Bootstrap attached via the BootstrapCDN.

First a quick note about Twig. In Twig using {{ }} tells Twig to echo the contained variable or the returned result of the enclosed function. Using {% %} tells Twig to expect logic (if…else etc) instead.

Let’s go through some of the unusual code. First up is our link tag.

You may remember we created a helper called asset in our Silex code. This is it in use. We just pass the path (relative to root) to our CSS file and the function converts it to a absolute URL. Remember this is just for local content or content on your CDN. If you are linking off-site just enter the full URL as you would normally.

Next up is the path() helper.

This produces a relative path (from root) to the route named home. Remember? We used the bind() method on our route to give it a name.

Remember when we created our index.php file? We created a global variable for Twig called active this is why. That variable contains the currently active route, so we can use that to set the currently active nav button.

All we do is a quick if using Twig to check if the current link should be marked as active. Same applies for any other nav links added in the future, but with the route name changed. You could automate this by creating a service, but I wanted to keep it fairly simple & it isn’t much effort to copypasta then change three words.

Finally is the main chunk. The block.

This creates a block that can then be overridden in any other Twig template that extends this one. More on that when we create our next page. The content inside will be shown if the template is displayed & no other template overrides that particular block. Because of that I have used it to display the home page content.

That’s all for the layout.twig file. Let’s move onto the CSS before we create any more pages.

Minimal CSS

Create a folder called css in your project root & then create a file called styles.css. Inside all you need to replicate my demo site is this:

I wanted to keep the focus on building the site so it uses as much of Bootstrap’s default styling as possible. These are just two tweaks needed to add spacing in.

Taking Stock

Now seems like a good place to pause and look at what we have.

At this point you should have a home page built using Silex & Twig. You should be able to pull it open in your browser and see it in all its glory. Awesome, huh?

Adding About & Contact Pages

Now let’s add two more pages. First up we’ll add our About page. Let’s make our template first. Create a new folder inside your views folder called pages, inside that create a file called about.twig. While this isn’t necessary it does helps us keep our pages separated from our layout.

Place this inside the new about.twig file.

This is pretty simple. The {% extends 'layout.twig' %} tells Twig that this file will be used in addition to our original layout.twig file. Now thanks to that we can re-define any blocks located in that file to insert new content. As you can see we redefine the content block here.

Now let’s create our contact template too. In the pages folder again, create contact.twig. Then fill it with this content.

There is nothing new in this file in regards to Silex or Twig. The contact form does not work in this tutorial, but I will be making a second part very soon showing you how to get it working.

Now one final change to a template. We need to add in two extra links to our Nav bar. Open up layout.twig and add these under the home link.

So you should now have:

Now let’s add in the code to our index.php file so Silex will create the pages. Under your home route, add the following.

That’s it. All done.

If you visit your project you should have an exact duplicate of the site shown in my demo. Well except for the images, if you swapped them out for kittens.

Silex Tips

Some tips I have come across. First up is server configuration. There is a pretty extensive guide over at the Silex documentaion. I’m running Nginx and my demo is using a slight modification of their configuration without any issues at all. Even with WordPress running along side it.

Contact Form

The contact form was left in-active in this tutorial. I wanted to save something so we could revisit how to improve on this project. So I’ve decided to split it out into a second part, it also stops this tutorial from becoming way too long. Look out for it very soon.

Silex Location

You may have noticed that I have placed Silex inside the web accessible root. This is not recommended, but is the way most (who are starting out) seem to approach things. That is why I wanted to go that way. In the next part we will also look at how to move Silex to a more secure location outside the web accessible root.

Conclusions

I hope you have enjoyed our look at Silex & Twig. This tutorial was just a look at how to create a simple website. The idea was to look at how to get started using both Silex & Twig. From there you can add as much or as little to it as you want.

If you have any questions or issues please get in touch via the comments & I’ll try to help out as much as I can.

FrameworkPHPSensioLabsSilexSymfonyTwig