Tuto Symfony / Twig – créer des pages (1)

Arborescence du projet

En cours, on est toujours dans l’initiation à Symfony. Ici, on a créé un nouveau projet nommé sym2 dont voici l’arborescence. Moi j’ai pas encore l’habitude donc j’ai fait une capture d’écran mais j’ai cru comprendre que la structure était toujours plus ou moins la même…

arborescence

La vue par défaut, c’est celle qui se trouve dans app/Resources/views/base.html.twig.

vue par defaut

Dans le controller, l’appel de Default correspond ici au dossier.

504-dossier

Remarquons le chemin. Pourquoi mettre :: ? Parce que normalement les vues sont dans le dossier Default. Donc pour lui dire qu’on revient un dossier en-dessous, on met ::
Et effectivement, regardez où est le dossier : il est dans views et pas dans views/Default.

505-chemin

On est ici dans Resources > views > index.html.twig.
Le chemin pour aller chercher le template.html.twig est écrit template > template.html.twig.
Pourquoi ?
Car il sait que c’est dans Resources/views. Donc on écrira que le nom du projet, le nom du Bundle puis le chemin à partir de views.

506-il_sait_que_cest_dans_resources_template

On va appeler le contenu du ficher base.html.twig présent dans app. Ce fichier contient déjà des directives pour l’affichage. On l’appelle en utilisant le mot-clef « extends » pour dire qu’on va étendre le contenu de base dans le fichier actuel nommé template.html.twig.

Ici, par exemple, on va faire un block title et dans ce block, on écrit juste un texte et voilà.

Si dans le base.html.twig le block title est définit pour s’afficher en h1, par exemple, bah on aura pas à ré-écrire les balises. Ça se fait automatiquement. Et c’est cool !

507-comments

Ici, on appelle un autre fichier twig. MAIS comme le fichier n’est pas dans le dossier app, il ne peut pas deviner où il est. Donc on lui dit « on veut étendre le fichier qui se trouve dans tel Bundle, puis dans tel dossier et qui s’appelle template.twig.html ».

508-comments

Rapide aperçu de notre template.html.twig

509-vue_template

Rapide aperçu de notre index.html.twig qui reprend le template avec ses modifs à lui.
On note que le titre de la page change et sera donc Mon SimpleBundle mais le <h1> et le <h2> également changeront. Seul le block contenu du template s’affichera au final. Le reste viendra d’index.

510-vue_index

On affiche dans le navigateur notre index et effectivement, on peut voir quels éléments viennent d’index et lequel vient du template.

511-affichage

A savoir : dans PhpStorm, pour générer un nouveau template (par exemple, ici, un template twig) :

  • On clique sur le + vert,
  • On donne un nom, une extension
  • On valide

C’était super compliqué, nous sommes d’accord.

512-ajouter_template

 

Affichage d’une page avec un nombre généré aléatoirement

On va d’abord dans le routing pour créer le lien.
Ici, y’a miloon_simple_nb_hasard (NOM) et MiloonSimpleBundle:Simple:nombreH (le lien)

517-nombre_routing

Dans le controller, on crée la variable pour générer le nombre aléatoire qu’on appelle $hasard. Ensuite, on génère le rendu twig de nb.html.twig ET on met en second paramètre un tableau avec le résultat de $hasard.

518-nombre_controller

Dans le fichier de la vue (nb.html.twig), on inclut le menu.html.twig et on paramètre l’affichage du resultat.

519-nombre_vue

Du coup, sur le navigateur, au lieu de voir {{ resultat }} s’afficher, on a le résultat de la variable $hasard qui s’affiche (qui n’est autre qu’un nombre généré aléatoirement entre 10 et 1000).

520-nombre-affichage

 

 

Un commentaire pour “Tuto Symfony / Twig – créer des pages (1)

Laisser un commentaire

Articles similaires

Commencez à saisir votre recherche ci-dessus et pressez Entrée pour rechercher. ESC pour annuler.

Retour en haut