TP n°6 - Interfaces habillées en CSS avec Bootstrap
Table des matières
- 1. Introduction
- 2. Étape 1 : Intégration de Bootstrap dans l’application ToDo
- 3. Étape 2 : Intégration des menus pour Bootstrap
- 4. Étape 3 : Amélioration de la structure de la page d’affichage d’une tâche
- 5. Évaluation
1. Introduction
Expérimenter la mise en place d’un
habillage graphique des pages de l’application fil-rouge ToDo en
utilisant les feuilles de style CSS.
Pour ce faire, on utilisera le framework Bootstrap, qui
permettra notamment de doter l’application d’une présentation réactive
compatible avec la consultation sur mobile.
Différents outils de mise au point seront mis à contribution pour ce faire, comme les outils du développeur de FireFox, et la barre d’outils Symfony.
2. Étape 1 : Intégration de Bootstrap dans l’application ToDo
Comprendre la façon dont l’application de ToDo list va être modifiée pour intégrer Bootstrap, pour la doter d’une couche de présentation en CSS.
Nous allons modifier l’application fil-rouge todo-app
déjà étudiée dans la
séance précédente, pour la doter d’une couche de présentation avec
des feuilles de style CSS, en intégrant le framework
Bootstrap. L’application est
fonctionnellement équivalente au TP précédent,
toujours uniquement en mode consultation. Ce qui importe dans cette
nouvelle version est la façon de
mettre en forme avec du CSS nos pages HTML.
Pour mettre en œuvre Bootstrap, nous allons intégrer une distribution provenant du projet « Start Bootstrap », pour nous inspirer de leur exemple d’application « Bare ».
Consultez les liens du paragraphe ci-dessus pour accéder à la documentation et aux exemples.
2.1. Étape 1-a : Téléchargement de « Start Bootstrap - Bare »
Récupération dans le projet d’une distribution de BootStrap prête à l’emploi.
Start Bootstrap propose différentes distributions prêtes à l’emploi de Bootstrap. Nous vous suggérons de partir de cette distribution, en suivant les étapes ci-après, mais vous pourriez également partir de la distribution « standard » de bootstrap disponible sur le site du projet.
L’avantage de Start Bootstrap est de proposer des thèmes prêts à l’emploi.
Vous pourrez adapter la mise en forme ultérieurement selon vos goûts, en explorant d’autres variantes de mise en forme, de thèmes Bootstrap.
- Positionnez-vous dans le répertoire du projet Symfony de l’application ToDo.
Récupérez la distribution Start Bootstrap Bare depuis le lien suivant, et extrayez le contenu dans le répertoire
public/
. Par exemple sous Linux :cd public wget https://github.com/startbootstrap/startbootstrap-bare/archive/gh-pages.zip unzip gh-pages.zip
Archive: gh-pages.zip e1b6c59cda92bed121c6785169c401b5810ee168 creating: startbootstrap-bare-gh-pages/ creating: startbootstrap-bare-gh-pages/assets/ inflating: startbootstrap-bare-gh-pages/assets/favicon.ico creating: startbootstrap-bare-gh-pages/css/ inflating: startbootstrap-bare-gh-pages/css/styles.css inflating: startbootstrap-bare-gh-pages/index.html creating: startbootstrap-bare-gh-pages/js/ inflating: startbootstrap-bare-gh-pages/js/scripts.js
les ressources statiques ont été extraites dans
public/startbootstrap-bare-gh-pages/
2.2. Étape 1-b : Consultation de la page d’exemple
Récupération dans le projet d’une distribution de BootStrap prête à l’emploi.
Lancez le serveur Web Symfony depuis la racine du projet
cd .. symfony server:start
Consultez la page de démo en la chargeant dans votre navigateur, par exemple sur
http://localhost:8000/startbootstrap-bare-gh-pages/index.html
La page « A Bootstrap 5 Starter Template » s’affiche avec son menu en haut de l’écran.
- Utilisez l’outil « Vue adaptative » des outils du développeur de Firefox pour afficher une prévisualisation de ce que donnerait la consultation de cette page avec un ordiphone dont l’écran est plus petit. Remarquez comme les menus sont masqués derrière un bouton « big mac » (à trois trais horizontaux).
- Observez les ressources qui sont incluses dans cette page de démo :
chargez le code source de
public/startbootstrap-bare-gh-pages/index.html
dans Eclipse (ou dans le navigateur : « voir le code source de la page »), pour identifier où sont chargées les ressources de Bootstrap :la feuille de style CSS (Bootstrap core CSS), référencée depuis l’entête HTML :
<head> ... <!-- Bootstrap icons--> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" /> <!-- Core theme CSS (includes Bootstrap)--> <link href="css/styles.css" rel="stylesheet" /> </head>
Quand le navigateur Web charge la page
public/startbootstrap-bare-gh-pages/index.html
qui contient<link href="css/styles.css" rel="stylesheet">
, deux requêtes HTTP se produisent :GET startbootstrap-bare-gh-pages/index.html
GET startbootstrap-bare-gh-pages/css/styles.css
L’URL de la ressource d’accès à la feuille de style est ici relative à la page.
les scripts Javascript (Bootstrap core JavaScript) chargés à la fin du corps du HTML :
<!-- Bootstrap core JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> <script src="js/scripts.js"></script> </body> </html>
Nous étudierons le rôle du langage JavaScript dans une prochaine séance. Pour l’instant, il est juste utile de savoir que cela permet de déclencher des programmes qui s’exécutent dans le navigateur pour, par exemple, modifier l’affichage de la page. Comme on le voit ici, Bootstrap nécessite le chargement de scripts écrits en JavaScript, par exemple pour gérer le repositionnement des éléments de la page quand la largeur de l’écran change.
L’un des scripts (
scripts.js
) est fourni dans l’archive qui vient d’être extraite. L’autre fait référence à une version disponible en ligne sur un CDN (Content Delivery Network), qui héberge une copie de la version correspondante de la partie Javascript nécessaire à Bootstrap.
Bravo. Vous avez installé Bootstrap, dans la partie publique du projet
Symfony (le répertoire public/
) dont les ressources statiques sont servies par
le serveur HTTP directement, sans passer par l’exécution de
l’application en PHP. On va donc pouvoir s’inspirer du code du fichier
d’exemple, pour ajouter ce qu’il faut dans les gabarits, afin que les
mêmes ressources soient affichables, pour autant qu’on utilise le même
chemin d’accès dans l’URL (startbootstrap-bare-gh-pages/css/...
, etc.).
2.3. Étape 1-c : Compréhension du mécanisme d’intégration des ressources (assets)
Nous allons présenter dans cette section un mécanisme qui peut être utilisé par
Symfony pour permettre l’inclusion de ressources statiques dans un
site, avec la fonction asset()
de Twig.
Cette section vous explique le principe, et la section suivante vous guide dans les modifications à effectuer.
Pour ajouter BootStrap dans une page HTML, il faut que celle-ci charge les ressources (statiques) correspondant aux feuilles de style CSS, et aux scripts JavaScript associés.
Vous allez donc vous inspirer du contenu du fichier HTML d’exemple qui est
fourni dans la distribution « Bare » de StartBoostrap, présent dans
public/startbootstrap-bare-gh-pages/index.html
pour
reprendre ces éléments HTML et les ajouter dans les pages de ToDo.
Il faudra donc adapter les gabarits Twig de ToDo en conséquence. Twig
intègre une fonction, asset( )
qui permet de gérer l’inclusion de telles
ressources.
Examinons donc tout d’abord le principe de son fonctionnement. Lisez d’abord les explications de la section ci-dessous. Vous ne passerez aux modifications correspondantes, qu’une fois arrivés à la section suivante.
2.3.1. Explications du principe de mise en ligne des ressources du site
On souhaite modifier le gabarit Twig de base (base.html.twig
) pour intégrer
les en-têtes HTML nécessaires, pour faire référence aux
ressources des fichiers CSS. Pas de mystère : ceci est réalisé via la balise standard de HTML : <link
rel="stylesheet" href="...
.
Vous allez ainsi devoir indiquer, dans son attribut href
, le chemin
d’accès Web à la ressource. Ce chemin devra être exprimé du point de
vue du serveur Web de Symfony, pour que ces ressources soient
renvoyées au client HTTP qui les demandera.
Comme on a installé la distribution Start Bootstrap à l’intérieur du
sous-répertoire public/
du projet todo-app
(startbootstrap-bare-gh-pages/
), la ressource peut être servie par
notre serveur Web.
On pourrait donc spécifier les chemins avec :
<!-- Core theme CSS (includes Bootstrap)--> <link href="/startbootstrap-bare-gh-pages/css/styles.css" rel="stylesheet">
Ainsi, le chargement par le navigateur des pages de l’application,
impliquera de charger aussi la ressource présente à l’URL
http://localhost:8000/startbootstrap-base-gh-pages/css/styles.css
se traduira par la requête auprès du serveur HTTP, du chemin
/startbootstrap-base-gh-pages/css/styles.css
.
Le framework Symfony s’exécute grâce à tout un ensemble de mécanismes
lançant le noyau (kernel) du serveur HTTP intégré, pour exécuter le
code PHP, et tout ça fonctionne comme si on démarrait l’exécution d’un
script PHP
index.php
qui serait présent dans le sous-répertoire public/
du projet
(d’ailleurs, dans les versions antérieures de Symfony, ça fonctionnait exactement
comme cela).
Si tout est correct, le répertoire public/
du projet Symfony contient bien les
fichiers correspondants, dans un sous-répertoire
startbootstrap-base-gh-pages/
, là où nous avons recopié la distribution
Boostrap provenant de « Start Bootstrap ».
En l’occurrence, le fichier de feuille de style est bien chargé ici :
public/startbootstrap-base-gh-pages/css/styles.css
.
Mais si l’on souhaite changer de jeu de feuille de style, le fait de
mentionner startbootstrap-bare-gh-pages
« en dur » dans le code du
gabarit est assez peu élégant.
Pour spécifier ce chemin, on va donc préférer ajouter un degré de
flexibilité et utiliser la macro asset()
de Twig. Elle va faire le
lien avec l’emplacement dans lequel vous avez extrait la distribution
« Bare » de StartBoostrap (startbootstrap-bare-gh-pages
), pour dire
où sont les « assets », les ressources du site.
2.3.2. Principe de fonctionnement de asset()
On peut ainsi configurer l’emplacement des ressources (assets
) de Symfony pour
pointer dans ce sous-répertoire. Il faut modifier un fichier de
configuration du projet Symfony, config/packages/framework.yaml
(écrit en syntaxe YAML),
pour ajouter la déclaration suivante :
framework: ... assets: base_path: '/startbootstrap-bare-gh-pages'
Ceci permet d’utiliser la fonction asset()
de Twig dans les
gabarits, de façon à aller charger des ressources statiques présentes
à l’intérieur du sous-répertoire spécifié dans base_path
, startbootstrap-bare-gh-pages
.
On va spécifier les chemins dans nos gabarits Twig, avec la balise
<link>
HTML, presque comme ce qu’on a
trouvé dans l’exemple de StartBoostrap, dans le fichier index.html
vu
ci-dessus. On va juste intercaler un appel à asset()
:
<!-- Core theme CSS (includes Bootstrap)--> <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
Ce mécanisme nous permettra d’effectuer un changement de jeu de feuilles de style
par une simple reconfiguration de la déclaration de framework
/ assets
/ base_path
dans
le fichier de configuration du projet, sans rien à retoucher dans les
sources des gabarits Twig.
Si vous décidez d’ajouter des images dans votre projet, vous aurez à définir de la même façon leur emplacement pour qu’elles s’affichent correctement dans les pages.
2.4. Étape 1-d : Intégration de Bootstrap dans vos templates
Passons maintenant à la modification effective de l’application ToDo pour tester l’ajout des feuilles de style de Bootstrap.
2.4.1. Intégration des feuilles de style CSS
Bootstrap est prêt à être intégré dans les gabarits pour que le HTML l’utilise, pourvu qu’on inclue le bon jeu de feuilles de style. C’est ce que nous allons faire maintenant.
- Modifiez le contenu du fichier
config/packages/framework.yaml
comme indiqué plus haut (attention à respecter l’indentation faite par des espaces successifs) Modifiez
templates/base.html.twig
pour contenir la balise<link>
dans le bloc Twigstylesheets
debase.html.twig
:<!DOCTYPE html> <html> <head> ... {% block stylesheets %} <!-- Bootstrap icons--> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" /> <!-- Core theme CSS (includes Bootstrap)--> <link href="{{ asset('css/styles.css') }}" rel="stylesheet"> {% endblock %} {# stylesheets #} </head>
Vous pouvez remplacer l’ancien code présent dans le bloc stylesheet fourni initialement dans le squelette d’application. Ce code faisait référence à un autre mécanisme utilisable dans Symfony, à la place des assets, mais plus lourd à mettre en oeuvre (« Webpack Encore »). Le contenu du bloc stylesheets utilisant Webpack Encore a été inclus par défaut lors de l’intégration d’EasyAdmin dans le projet Todo… mais nous n’allons pas nous en servir, pour une application basique comme la notre.
De cette façon, pour la plupart des gabarits, le block
stylesheets
par défaut contiendra la bonne valeur, incluant la
feuille CSS de Bootstrap. Mais si une page particulière doit
redéfinir d’autres feuilles de style, elle pourra toujours changer
le bloc pour créer une spécialisation locale.
2.4.2. Ajout du chargement des scripts JavaScript
De façon similaire à ce que vous avez fait pour le bloc stylesheets
, intégrez le chargement des scripts JavaScript
nécessaires à Bootstrap, en recopiant les balises <script
du fichier
d’exemple, pour les intégrer via asset()
au bon endroit dans le
gabarit de base, au niveau du bloc javascripts
:
{% block javascripts %} <!-- Bootstrap core JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> <script src="{{ asset('js/scripts.js') }}"></script> {% endblock %} {# javascripts #}
Ici aussi, on remplace l’ancien contenu du bloc javascripts
du gabarit par défaut, pour utiliser assets
et non « Webpack Encore ».
- Lancez l’exécution de l’application Symfony (
server:start
) dans un terminal.Si jamais vous avez une erreur sur la fonction
asset()
manquante, il est nécessaire d’installer le composant ad-hoc via une commande du type :symfony composer require symfony/asset
- Testez le chargement des pages, par exemple sur
http://localhost:8000/todo/
Observez les requêtes HTTP transmises par le navigateur dans l’outil Réseau du développeur Web, d’inspection des requêtes/réponses.
Vous devez constater qu’une ressource
styles.css
est bien chargée par le navigateur (200)Observez les traces d’exécution du serveur Web dans le terminal
Vous devez observer également un code de réponse 200, pour la ressource située dans
/startbootstrap-bare-gh-pages/css/styles.css
Ce « jeu de piste » paraît un peu compliqué, mais il nous montre que la macro
asset()
a bien fait le job.- Observez également comment les fichiers JS sont bien chargés via des requêtes HTTP supplémentaires.
2.4.3. Observations du comportement de Bootstrap
Si vous rechargez les pages de l’application, elles incluent désormais la mise en forme par défaut de BootStrap.
Vous devriez voir immédiatement un impact sur la mise en forme des tableaux des pages de consultation des listes de tâches ou des attributs d’une tâche.
3. Étape 2 : Intégration des menus pour Bootstrap
Ajout d’un composant de gestion de menus de navigation dans l’application.
La plupart des applications Web intègrent des menus facilitant la navigation dans les grandes fonctions de l’application.
Nous allons ajouter un menu utilisant les fonctionnalités de Bootstrap dans l’application ToDo.
Pour commencer, on va effectuer un ajout « manuel » du code gérant les menus.
3.1. Étape 2.a : Test de menus codés « en dur »
Ajout du code HTML générant un menu avec Bootstrap, en recopiant le code HTML du fichier d’exemple.
La page d’exemple de Start BootStrap Bare contient un exemple de
menu intégré dans une section <nav>
du HTML. La documentation de
Bootstrap explique comment on peut configurer les
composants de navigation,
mais plutôt que de lire toute la documentation, on va
recopier l’exemple directement.
Copiez le contenu de la section
<nav>
depublic/startbootstrap-bare-gh-pages/index.html
(<!-- Responsive navbar-->
, …) et ajoutez-le au bon endroit, à l’intérieur du blockbody
du gabarittemplates/index.html.twig
.Le principe d’organisation des menus est l’utilisation de listes à puces qui constituent une arborescence de liens, et que les feuilles de style de Bootstrap affichent sous forme de menus.
- Observez le résultat dans la page
http://localhost:8000/todo/,
avec l’apparition d’un menu. Utilisez l’inspecteur HTML du navigateur pour repérer les balises concernées (<ul>
,<li>
, …). - Les liens des entrées de menu sont-elles actives ? Pourquoi ?
- Adaptez le code du gabarit pour faire un menu opérationnel « Tasks »,
contenant des entrées de menus actives, qui renvoient vers les routes de
votre contrôleur. Vous utilisez pour ce faire l’instruction
path()
de Twig, pour spécifier les routes à intégrer dans les chemins des attributshref
.
Le menu est maintenant opérationnel. Par contre, sa mise-à-jour au fur
et à mesure de l’ajout de nouvelles routes dans l’application est un
peu pénible : il faut se replonger dans la structure du HTML de cette
section <nav>
.
Voyons comment on peut configurer la structure de ces menus plus simplement.
3.2. Étape 2-b : Intégration du composant de gestion de menus
Intégrer un nouveau composant permettant de générer le code des menus Bootstrap plutôt que d’avoir à le coder « en dur ».
Si on simplifie, les menus ne sont, après-tout qu’une arborescence de
balises <ul>
et <li>
contenant des liens vers les routes de
l’application.
On va utiliser le bundle « Bootstrap Menu » pour Symfony de Cameron Murphy, qui va faciliter la génération de cette arborescence de balises HTML.
Cette bibliothèque permet d’ajouter assez simplement une définition de
menus dans un fichier YAML, présent dans
config/packages/bootstrap_menu.yaml
et de les utiliser ensuite via la
macro render_bootstrap_menu()
disponible dans les gabarits Twig.
Cette macro générera une liste à puce (balises <li>
) qui seront mises
en forme par Bootstrap comme il faut sous forme d’entrées de menus.
Procédez aux étapes suivantes :
Installez le bundle correspondant :
symfony composer require camurphy/bootstrap-menu-bundle
Créez le fichier de configuration
config/packages/bootstrap_menu.yaml
, en y plaçant ceci, qui définit un menu ’main
’ composé d’un seul élément (’todos
’) :bootstrap_menu: menus: main: items: todos: label: 'Tasks' route: 'todo_list'
Modifiez le gabarit
templates/base.html.twig
pour y définir la structure des menus des balises<nav>
à inclure dans toutes les pages de l’application.Au lieu du menu codé « en dur », on utilise le nouveau bundle. On va placer le contenu de la balise
<nav>
dans un nouveau bloc Twigmenu
, qu’on placera au début du contenu de la page, dans la balise<body>
, avant l’inclusion du block Twigbody
. De cette façon, ce même code apparaîtra dans toutes les pages de l’application, sauf si une page surcharge le contenu du blockmenu
.<body> {% block menu %} <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="{{ path('home') }}">ToDo</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> {{ render_bootstrap_menu('main') }} </ul> </div> </div> </nav> {% endblock %}{# menu #} {% block body %}{% endblock %} ...
On a repris ici les indications du README du bundle (installé par composer dans
vendor/camurphy/bootstrap-menu-bundle/README.md
), pour obtenir le code HTML souhaité.Exécutez un
cache:clear
:symfony console cache:clear
Vous pouvez maintenant tester et vérifier que le menu « Tasks » permet de naviguer vers la route
todo_list
.Accessoirement, vous pouvez rétablir le contenu original de la page d’accueil, dans
index.html.twig
pour ne plus afficher deux menus dans cette page.
4. Étape 3 : Amélioration de la structure de la page d’affichage d’une tâche
Tirer parti des fonctionnalités de la grille Bootstrap pour mettre en œuvre les pages de l’application « fil-rouge ».
Bootstrap fournit des fonctions permettant notamment de modifier l’emplacement des éléments sur la page, pour s’adapter à la place disponible sur les petits écrans.
Vous avez déjà expérimenté cela dans l’étape précédente au niveau du menu de l’application. Nous allons maintenant modifier la structure des pages de l’application afin d’en tirer parti.
4.1. Étape 3-a : Mise en place d’une structure de pages Bootstrap
Modifier le corps des pages HTML de l’application pour intégrer la structure de conteneurs Bootstrap.
Nous allons utiliser la structure de grille de Bootstrap pour mettre en forme le contenu des pages, à la fois pour la présentation générale, mais aussi pour certains détails des propriétés d’une entité.
4.1.1. Modification de la structure du gabarit de base
Vous allez modifier le gabarit de base templates/base.html.twig
pour
structurer le contenu du bloc Twig body
de façon à inclure deux
parties : main et footer qui seront deux lignes au sein d’un
conteneur Bootstrap.
Ces deux parties seront elles-mêmes des blocs Twig permettant une surcharge pour que chaque gabarit de page n’inclue finalement que la partie utile à insérer au sein de ces deux lignes.
Ces parties sont gérées via des
conteneurs
définis grâce aux balises HTML <div>
et à la classe container
de
Bootstrap.
Modifiez le gabarit de base pour reprendre la structure suivante :
... {% block body %} <div class="container body-container"> <main> {# Ici la partie utile que les gabarits des pages vont surcharger #} {% block main %} <div class="row"> <div class="col-md-12"> <p> <i>MAIN</i> </p> </div> </div> {% endblock %} {# main #} </main> </div> <!-- /.body-container --> {% block footer %} <footer class="text-center text-lg-start bg-light text-muted"> <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);"> FOOTER </div> </footer> {% endblock %}{# footer #} {% endblock %} {# body #}
4.1.2. Test de la nouvelle structure
Testez que cela fonctionne : vous devez voir apparaître « FOOTER » en bas des pages.
Attention : pour que cela fonctionne, il faut que les gabarits des pages du site surchargent bien le
nouveau bloc Twig main
qu’on vient d’introduire dans le gabarit de base (et pas l’ensemble du block body
).
Modifiez par exemple templates/index.html
pour utiliser cette nouvelle
organisation de la page, en remplaçant le bloc body
par un bloc main
:
{% extends 'base.html.twig' %} {% block title %}Welcome!{% endblock %} {% block main %} <h1>Welcome</h1> <p>{{ welcome }}</p> {% endblock %} {# main #}
Testez, et vérifiez dans l’outil des gabarits Twig de la barre d’outils de symfony, que l’on a bien la bonne compilation
des gabarits, avec une surcharge de main
à l’intérieur de body
.
4.2. Étape 3-b : Application aux pages d’affichage des tâches
Modification des pages de l’application pour utiliser cette nouvelle structure.
4.2.1. Modification de la page de liste des tâches
Remplacez le bloc body
par un bloc main
dans le gabarit de la page d’affichage de la liste des tâches, templates/todo/index.html
.
La différence d’affichage se voit principalement au niveau de l’occupation de toute la largeur de la page, ou de l’affichage seulement sur une portion de la largeur, et sur l’affichage du footer.
Jusque-là, rien de très difficile, mais vous constatez comment on peut relativement simplement modifier tout le contenu d’un site, à partir du moment où la structure d’imbrication des blocs et sous-blocs est bien conçue dans les gabarits de base.
En pratique, sur de « vraies » applications Web, cela nécessitera d’avoir bien réfléchi à l’avance à cette structure, sous peine de devoir retoucher de très nombreux gabarits.
4.2.2. Modification de la page d’affichage d’une tâche
Vous allez maintenant ajuster le contenu de la page d’affichage des tâches, correspondant
aux URL de type .../show/N
, pour intégrer une structure de type
formulaire Bootstrap.
Dans cette page, on utilise la mise en page des formulaires, pour afficher des données en consultation uniquement (on verra les formulaires de saisie dans des séances ultérieures).
Modifiez maintenant le gabarit de la page d’affichage des détails d’une tâche
show.html.twig
, de façon à ce que le coeur de la page (dans le blocmain
), contienne quelque chose du type de ce code Twig :<div class="form-horizontal"> <div class="form-group row"> <label class="col-sm-2 col-form-label">Id</label> <div class="col-sm-10"> <div class="form-control form-control-plaintext"> {{ todo.id }} </div> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label-lg">Libellé</label> <div class="col-sm-10"> <div class="form-control form-control-plaintext form-control-lg"> {{ todo.title }} </div> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">Terminé</label> <div class="col-sm-10"> <div class="form-control form-control-plaintext"> {{ todo.completed ? "oui" : "non" }} </div> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">Created</label> <div class="col-sm-10"> <div class="form-control form-control-plaintext"> {{ todo.created ? todo.created|date('Y-m-d H:i:s') : '' }} </div> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">Updated</label> <div class="col-sm-10"> <div class="form-control form-control-plaintext"> {{ todo.updated ? todo.updated|date('Y-m-d H:i:s') : '' }} </div> </div> </div> </div> <!-- form-horizontal -->
Examinez les informations dans l’outil des templates Twig de la barre d’outils Symfony pour observer la compilation du gabarit effectuée.
Observez la façon dont les éléments structurants du document HTML (
<div>
utilisés par Bootstrap) insérés par les différents blocs, pour obtenir le code HTML final :templates/todo/show.html.twig
, qui définit le contenu de la ligne centrale, présente dans le blocmain
- et en remontant finalement à
templates/base.html.twig
- Examinez les détails de l’affichage de la « fiche » qui liste les propriétés
d’une tâche. Notez comme on a utilisé une mise en place « tabulaire »,
avec un « formulaire » en lecture seule, au lieu d’une
table
HTML :on utilise une section
<div>
, qui reproduit une présentation de formulaire avec les libellés et leurs valeurs sur la même ligne (cf. « Horizontal form »).On peut tester la construction d’un tel « formulaire » non-interactif avec une balise
<form>
et la remplacer ensuite par un<div>
.- Les éléments de la fiche sont mis en page via des lignes
row
et des largeurs de colonne sur la grille (col-sm-...
) - Les valeurs des champs (
<div class="form-control">
) sont rendus en « lecture seule » au lieu d’être des champs de saisie de formulaires, via la classeform-control-plaintext
(cf. « Readonly plain text »).
- Testez le redimensionnement de l’écran, via l’outil de « Vue adaptative », qui permet de faire une prévisualisation en mode petit écran de smartphone, dans les outils du développeur de FireFox. Vous constatez que l’interface reste utilisable, et que la mise en forme initiale évolue, grâce à Bootstrap qui intègre des fonctions d’adaptation du rendu de l’interface.
Pour arriver jusqu’ici, vous avez utilisé ici les outils qui vous semblent utiles pour comprendre ces éléments :
- inspecteur HTML et propriétés du CSS associé
- barre d’outils Symfony, avec notamment l’onglet correspondant aux gabarits Twig
- navigation dans le code dans l’IDE Eclipse
Bien évidemment, nous n’avons fait que survoler beaucoup de détails, notamment la façon dont Bootstrap fonctionne « sous le capôt », au niveau CSS et JavaScript… nous n’avons pas le temps de rentrer beaucoup plus loin dans les détails.
L’essentiel à retenir, est que Bootstrap fonctionne sur la base d’une grille, et va prendre des décisions utiles pour gérer au mieux l’affichage du contenu, lorsqu’on devra utiliser l’application avec un navigateur sur un terminalà écran réduit.
5. Évaluation
Vous avez expérimenté avec les éléments suivants :
- comment ajouter des feuilles CSS et scripts JavaScript dans une application
- ajout de composantes de Boostrap avec les balises structurantes
<div>
(dans les templates Twig) - structure de la grille utilisée par Bootstrap
- surcharge de blocs Twig et sélecteurs CSS associés