TD6-2: Utilisation de Twig

Nous allons maintenant créer une structure de site web. Afin de ne pas perdre de temps à réaliser des graphismes ou des feuilles de styles, une page d'exemple est fournie dans td6, dans le dossier design/.

Création du layout

Pour commencer, créez un layout principal layout.html.twig contenant la structure générale du site. Placez la feuille de style et les images dans le dossier public/ de Symfony et utilisez la fonction asset() de Twig pour inclure style.css.

Toutes vos templates hériteront plus tard ce ce layout.html.twig et surchargeront certain de ses blocs.

Vous pourrez par exemple placer un bloc contents à l'intérieur de votre page. Pour une documentation exhaustive, vous pouvez vous référer à la documentation "Templating" de Symfony.

Faites hériter la page default/index.html.twig de layout.html.twig.

Une première page

Maintenant que votre structure est en place, créez une nouvelle action pour lister les pizzas dans votre contrôleur. Bien entendu, nous n'allons pour le moment pas créer de base de données. Pour cela, vous pourrez ajouter une fonction de ce style avec ses annotations:

<?php

    /**
     * @Route("/pizzas", name="pizzas_list")
     */
    public function pizzas()
    {
        return $this->render('default/pizzas.html.twig', [
            'pizzas' => [
                '4 fromages', 'Reine', 'Paysanne'
            ]
        ]);
    }

Testez votre action en vous rendant à la page /pizzas de votre application, vous devriez voir un message d'erreur vous indicant que la template correspondante n'existe pas. Créez cette template en héritant du layout et surchargez le bloc du contenu pour afficher la liste des pizzas passées à la template.

Création du premier lien

Modifiez le lien du bouton "Les pizzas" de manière à ce qu'il pointe vers la page que vous venez de créer. Attention: ne mettez pas l'adresse de votre cible "en dur", mais utilisez la fonction twig path:

<a href="{{ path('pizzas_list') }}">Les pizzas</a>

Page d'accueil

Faites également pointer la page "Présentation" vers une second page que vous créerez, qui aura comme URL "/", ce sera la page d'accueil de votre site.