TP n°6 - Interfaces habillées en CSS avec Bootstrap

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.

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.

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.

1. Modifiez le contenu du fichier config/packages/framework.yaml comme indiqué plus haut (attention à respecter l’indentation faite par des espaces successifs)

2. Modifiez templates/base.html.twig pour contenir la balise <link> dans le bloc Twig stylesheets de base.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.

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 ».

1. 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
     

2. Testez le chargement des pages, par exemple sur http://localhost:8000/todo/

3. 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)

4. 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.

5. Observez également comment les fichiers JS sont bien chargés via des requêtes HTTP supplémentaires.

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.

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 #}

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.

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.

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).

1. 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 bloc main), 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 -->
   

2. 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 :

   1. templates/todo/show.html.twig, qui définit le contenu de la ligne centrale, présente dans le bloc main
   2. et en remontant finalement à templates/base.html.twig
3. 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 classe form-control-plaintext (cf. « Readonly plain text »).
4. 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.