11-page-menu.md

<< previous | next >>

Page Menu

Now we have made a few nice dynamic pages. But nobody can find them.

Let's fix that now. In this chapter we will create a menu with links to all of our pages.

When we have a menu, we will want to be able to reuse the same code on multiple pages. We could create a separate file and include it every time, but there is a better solution.

It is more practical to have templates that are able to extend other templates, like a layout for example. Then we can have all the layout related code in a single file and we don't have to include header and footer files in every template.

Our implementation of mustache does not support this. We could write code to work around this, which will take time and could introduce some bugs. Or we could switch to a library that already supports this and is well tested. Twig for example.

Now you might wonder why we didn't start with Twig right away. Because this is a good example to show why using interfaces and writing loosely-coupled code is a good idea. Like in the real world, the requirements suddenly changed and now our code needs to adapt.

Remember how you created a MustacheRenderer in chapter 9? This time, we create a TwigRenderer that implements the same interface.

But before we start, install the latest version of Twig with composer (composer require "twig/twig:~1.0").

Then create the a TwigRenderer.php in your src/Template folder that looks like this:

<?php declare(strict_types = 1);

namespace Example\Template;

use Twig_Environment;

class TwigRenderer implements Renderer
{
    private $renderer;

    public function __construct(Twig_Environment $renderer)
    {
        $this->renderer = $renderer;
    }

    public function render($template, $data = []) : string
    {
        return $this->renderer->render("$template.html", $data);
    }
}

As you can see, on the render function call a .html is added. This is because Twig does not add a file ending by default and you would have to specifiy it on every call otherwise. By doing it like this, you can use it in the same way as you used Mustache.

Add the following code to your Dependencies.php file:

$injector->delegate('Twig_Environment', function () use ($injector) {
    $loader = new Twig_Loader_Filesystem(dirname(__DIR__) . '/templates');
    $twig = new Twig_Environment($loader);
    return $twig;
});

Instead of just defining the dependencies, we are using a delegate to give the responsibility to create the class to a function. This will be useful in the future.

Now you can switch the Renderer alias from MustacheRenderer to TwigRenderer. Now by default Twig will be used instead of Mustache.

If you have a look at the site in your browser, everything should work now as before. Now let's get started with the actual menu.

To start we will just send a hardcoded array to the template. Go to you Homepage controller and change your $data array to this:

$data = [
    'name' => $this->request->getParameter('name', 'stranger'),
    'menuItems' => [['href' => '/', 'text' => 'Homepage']],
];

At the top of your Homepage.html file add this code:

{% for item in menuItems %}
    <a href="{{ item.href }}">{{ item.text }}</a><br>
{% endfor %}

Now if you refresh the homepage in the browser, you should see a link.

The menu works on the homepage, but we want it on all our pages. We could copy it over to all the template files, but that would be a bad idea. Then if something changes, you would have to go change all the files.

So instead we are going to use a layout that can be used by all the templates.

Create a Layout.html in your templates folder with the following content:

{% for item in menuItems %}
    <a href="{{ item['href'] }}">{{ item['text'] }}</a><br>
{% endfor %}
<hr>
{% block content %}
{% endblock %}

Then change your Homepage.html to this:

{% extends "Layout.html" %}
{% block content %}
    <h1>Hello World</h1>
    Hello {{ name }}
{% endblock %}

And your Page.html to this:

{% extends "Layout.html" %}
{% block content %}
    {{ content }}
{% endblock %}

If you refresh your homepage now, you should see the menu. But if you go to a subpage, the menu is not there but the <hr> line is.

The problem is that we are only passing the menuItems to the homepage. Doing that over and over again for all pages would be a bit tedious and a lot of work if something changes. So let's fix that in the next step.

We could create a global variable that is usable by all templates, but that is not a good idea here. We will add different parts of the site in the future like an admin area and we will have a different menu there.

So instead we will use a custom renderer for the frontend. First we create an empty interface that extends the existing Renderer interface.

<?php declare(strict_types = 1);

namespace Example\Template;

interface FrontendRenderer extends Renderer {}

By extending it we are saying that any class implementing the FrontendRenderer interface can be used where a Renderer is required. But not the other way around, because the FrontendRenderer can have more functionality as long as it still fulfills the Renderer interface.

Now of course we also need a class that implements the new interface.

<?php declare(strict_types = 1);

namespace Example\Template;

class FrontendTwigRenderer implements FrontendRenderer
{
    private $renderer;

    public function __construct(Renderer $renderer)
    {
        $this->renderer = $renderer;
    }

    public function render($template, $data = []) : string
    {
        $data = array_merge($data, [
            'menuItems' => [['href' => '/', 'text' => 'Homepage']],
        ]);
        return $this->renderer->render($template, $data);
    }
}

As you can see we have a dependency on a Renderer in this class. This class is a wrapper for our Renderer and adds the menuItems to all $data arrays.

Of course we also need to add another alias to the dependencies file.

$injector->alias('Example\Template\FrontendRenderer', 'Example\Template\FrontendTwigRenderer');

Now go to your controllers and exchange all references of Renderer with FrontendRenderer. Make sure you change it in both the use statement at the top and in the constructor.

Also delete the following line from the Homepage controller:

'menuItems' => [['href' => '/', 'text' => 'Homepage']],

Once that is done, you should see the menu on both the homepage and your subpages.

Everything should work now, but it doesn't really make sense that the menu is defined in the FrontendTwigRenderer. So let's refactor that and move it into it's own class.

Right now the menu is defined in the array, but it is very likely that this will change in the future. Maybe you want to define it in the database or maybe you even want to generate it dynamically based on the pages available. We don't have this information and things might change in the future.

So let's do the right thing here and start with an interface again. But first, create a new folder in the src directory for the menu related things. Menu sounds like a reasonable name, doesn't it?

<?php declare(strict_types = 1);

namespace Example\Menu;

interface MenuReader
{
    public function readMenu() : array;
}

And our very simple implementation will look like this:

<?php declare(strict_types = 1);

namespace Example\Menu;

class ArrayMenuReader implements MenuReader
{
    public function readMenu() : array
    {
        return [
            ['href' => '/', 'text' => 'Homepage'],
        ];
    }
}

This is only a temporary solution to keep things moving forward. We are going to revisit this later.

Before we continue, let's edit the dependencies file to make sure that our application knows which implementation to use when the interface is requested.

Add these lines above the return statement:

$injector->alias('Example\Menu\MenuReader', 'Example\Menu\ArrayMenuReader');
$injector->share('Example\Menu\ArrayMenuReader');

Now you need to change out the hardcoded array in the FrontendTwigRenderer class to make it use our new MenuReader instead. Give it a try without looking at the solution below.

Did you finish it or did you get stuck? Or are you just lazy? Doesn't matter, here is a working solution:

<?php declare(strict_types = 1);

namespace Example\Template;

use Example\Menu\MenuReader;

class FrontendTwigRenderer implements FrontendRenderer
{
    private $renderer;
    private $menuReader;

    public function __construct(Renderer $renderer, MenuReader $menuReader)
    {
        $this->renderer = $renderer;
        $this->menuReader = $menuReader;
    }

    public function render($template, $data = []) : string
    {
        $data = array_merge($data, [
            'menuItems' => $this->menuReader->readMenu(),
        ]);
        return $this->renderer->render($template, $data);
    }
}

Everything still working? Awesome. Commit everything and move on to the next chapter.

<< previous | next >>