Architecture(s) et application(s) Web

Architecture(s) et
application(s) Web

CSC4101 - Génération de pages

22/08/2025

Plan de la séance

Objectifs de cette séance :

Ressources, Pages, Vues
Gabarits (templates)
Outils Symfony

Pages Web ?

Récupération de représentation de ressources par HTTP

CRUD :
- Create
- Read / Retrieve
- Update
- Delete
on s’intéresse dans un premier temps à la consultation d’une (représentation de) ressource : méthode GET (+ URL)
on verra la modification ultérieurement.

Représentation de ressource

Ressource Web : objet d’une requête

Exemple : page, document vidéo, formulaire, …
Représentation
- document (statique)
- ou vue d’une application (dynamique)

Questions philosophiques

Ressource == Représentation ?
Représentation == Visualisation réalisée par le client HTTP ?

Important pour raisonement (Web sémantique). Hors sujet pour l’instant.

Discussion philosophique, qui est parfois importante à prendre en compte…

Une ressource a beau être identifiée de façon unique par son URI, elle peut avoir de multiples représentations.

En déréférençant une URI, on peut demander à un serveur Web « faisant autorité » de donner sa représentation, canonique… mais sur le Web, les choses sont parfois plus floues que celà, notamment quand on parle du Web sémantique (aussi appelé Web des données). Exemple : page Wikipedia qui parle d’une ressource, comme par exemple un personnage historique. Un personnage historique n’a pas d’URL propre, ce qui n’empêche pas de le représenter, et de considérer qu’une représentation effectuée par Wikipedia peut faire autorité.

On peut aussi se demander si un même document, par exemple une représentation sous forme de document HTML donne toujours la même représentation sur tous les écrans… en principe oui, pour les informations importantes, la structure du contenu. Si le développeur a bien fait son travail.

Cf. l’allégorie de la caverne…

Vues d’une application

La vue représente un état d’une application interactive, pour l’utilisateur

Patron de conception M V C (Modèle, Vues, Contrôleur)

Modèle déjà vu avec Doctrine. Controleur déjà vu pour programmation événementielle.

Contenu d’une page Web

Page Web = représentation d’une vue de l’application (affichable dans un navigateur)

Visualisation d’une page (ressourceà contenant différentes ressources

document HTML principal
ressources additionnelles : images, feuilles de style, scripts, …

Hypertexte : proviennent pas toutes du même serveur HTTP (requêtes supplémentaires)

Recette (classique) de fabrication d’une page

Générer une représentation d’une ressource gérée par l’application
- HTML (construit côté serveur)
- transmise dans la réponse HTTP
Avoir prévu :
- ressources statiques complémentaires : CSS, Images, JavaScript, …
- outils d’adaptation dynamique (exécution CSS et JavaScript côté client)

Construction de la page à visualiser

Fabriquer la page

soit côté serveur: générer du HTML qui transite vers le navigateur dans la réponse à une requête HTTP
soit côté client: un programme Javascript s’exécute dans le contexte d’une page chargée par le navigateur, et construit du DOM en mémoire pour enrichir cette page (et déclenche d’autres requêtes HTTP)

Dans ce cours, principalement 1ère option (application Web « classique »)

Langages standards pour pages Web

Séparation structure / mise en forme

HTML : structure de la page, texte, méta-données
CSS : mise en forme

HTML

HyperText Markup Language

Structure

Arbre sections, sous-section (plan document textuel), visible :
- <body>
  - <h1>...</h1>
    - <h2>...</h2>
      - <p>...</p>
  - <h1>...</h1>
- </body>
mise en forme « par défaut » par navigateur

Structure additionnelle : sections / zones (pas forcément visible, par défaut, mais modifiables par le CSS) :
- <div>...</div>
- <span>...</span>

Balises sémantiques

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

<header>
<nav>
<aside>	<section>
	<article>
<footer>

Quelques balises

Listes à puces :

<ul>
  <li> ... </li>
  <li> ... </li>
</ul>

Lien vers une autre ressource :

<a href="/todo/42">Coder en HTML</a>

Formulaires

Soumission de données pour les applications : génère des requêtes HTTP vers des ressources.

-> séances suivantes

Code source

Examiner le code source dans le navigateur

Ctrl U !

Produire du HTML avec PHP

« affichage » d’HTML sur la sortie standard du programme
```
echo "<html>...</html>";
```
ou
```
print("<html>...</html>");
```
Mieux : Bibliothèque de génération HTML
- Gabarits (Templates)

</generation_pages>

Plan de la séance

Génération de pages
Gabarits (templates)
Outils Symfony

Patron / gabarit

En couture :

Génération du HTML grâce aux gabarits

Page construite à partir :
- structure de la page : gabarit (statique)
- données générées par le programme (dynamiques)
Génération HTML par moteur de templates

Exemple

Figure 3 : Codage des blocs, répétitions etc. (syntaxe Twig)

Moteur de gabarits Twig

https://twig.symfony.com/

Moteur de templates pour PHP, utilisé dans Symfony
Utilisable seul
Syntaxe inspiré de Jinja (populaire en Python, avec Django)

Exemple : liens d’un menu

Résultat souhaité (liste à puces) :

<!DOCTYPE html>
  <html>
    <head>
      <title>Ma page</title>
    </head>
    <body>
      <ul id="navigation">
        <li><a href="/todo/">Tâches</a></li>
        <li><a href="/tag/">Étiquettes</a></li>
        <li><a href="/project/">Projets</a></li>
      </ul>
      <h1>Ma page</h1>
      Salut le monde
    </body>
  </html>

Gabarit de base d’un élément de menu

Motif à répéter : élément de liste à puce (<li>) contenant une balise de lien (<a href="...">...</a>)

Données : couple [href, caption]

<li>
  <a href="{{ href }}">
    {{ caption }}
  </a>
</li>

Données à injecter

Tableau de couples [href, caption]

array(
          array('href' => "/todo/", 'caption' => "Tâches"),
          array('href' => "/tag/", 'caption' => "Étiquettes"),
          array('href' => "/project/", 'caption' => "Projets")
     );

Gabarit de page complet

<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <ul id="navigation">

      {% for item in navigation %}
        <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
      {% endfor %}

    </ul>
    <h1>{{ title }}</h1>

    {{ content }}

  </body>
</html>

Données complètes

array(
    'title' => "Ma page",
    'navigation' => array(
             array('href' => "/todo/", 'caption' => "Tâches"),
             array('href' => "/tag/", 'caption' => "Étiquettes"),
             array('href' => "/project/", 'caption' => "Projets")
        ),
    'content' => "Salut le monde"
);

Résultat HTML généré

<!DOCTYPE html>
  <html>
    <head>
      <title>Ma page</title>
    </head>
    <body>
      <ul id="navigation">
        <li><a href="/todo/">Tâches</a></li>
        <li><a href="/tag/">Étiquettes</a></li>
        <li><a href="/project/">Projets</a></li>
      </ul>
      <h1>Ma page</h1>
      Salut le monde
    </body>
  </html>

HTML nettoyé et valide (ça peut aider)

Syntaxe Twig

Variable

{{ var }}

Instruction

{% ... %}

foreach : for i in,
if : if / endif,
block
…

Commentaire

{# ... #} (différent de  : commentaire HTML)

Programmer en Twig

Programmation simple
- Mélange HTML et instructions Twig
- Algorithmique basique : boucles, conditionnelles
- syntaxe à la Python
Pattern matching (filtrage par motif)
Structuration en motifs factorisables (va en général de pair avec les CSS)

Exemple code d’appel à Twig

<?php
require_once("../lib/Twig/Autoloader.php" );
Twig_Autoloader::register();

$loader = new Twig_Loader_Filesystem('../templates/');

$twig = new Twig_Environment($loader);

$data = array('title' => "Ma page"
          'navigation' => array(
               array('href' => "/todo/", 'caption' => "Tâches"),
               array('href' => "/tag/", 'caption' => "Étiquettes"),
               array('href' => "/project/", 'caption' => "Projets")
          ),
          'content' => "Salut le monde");

echo $twig->render('home.html.twig', $data);

Conception des gabarits

Repérer des blocs

Surcharge

Définir une structure de page standard contenant des blocs
Compléter le contenu dans chaque page spécifique en surchargeant des blocs

Structure de base

Template base.html.twig

<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="style.css" />
      <title>{% block title %}{% endblock %}</title>
    </head>
    <body>
      {% block body %}{% endblock %}
    </body>
</html>

Le block Twig body, vide, est là pour être surchargé.

Spécialisation pour une page

Surcharge : le contenu du bloc body de la page spécialisée index.html.twig se substitue à celui du gabarit de base.

Mockup exécutables

On peut faire valider l’expérience utilisateur avant de tout coder :

Conception des maquettes (mockups)
Codage des templates et CSS
Validation des interfaces sur un prototype
Implémentation du reste de l’application

</gabarits>

Plan de la séance

Génération de pages
Gabarits (templates)
Outils Symfony

Coder le MVC

PHP + Doctrine : Modèle des données
HTML (+ CSS) + Twig : Vues
PHP : Contrôleurs (routeur, etc.)

Twig s’interface avec le modèle Doctrine => moins de code à écrire en PHP \o/

Inconvénient : pas mal de syntaxes différentes

Mise au point

logs
dump()
Data fixtures
ligne de commande
barre d’outils Symfony

dump()

En PHP :

$var = [
    'a simple string' => "in an array of 5 elements",
    'a float' => 1.0,
    'an integer' => 1,
    'a boolean' => true,
    'an empty array' => [],
];

dump($var);

En Twig :

{% dump var %}

Exemple :

{% dump todos %}

{% for todo in todos %}

    {% dump todo %}

    <a href="/todo/{{ todo.id }}">{{ todo.title }}</a>
{% endfor %}

Un appel à la fonction dump() dans le code PHP affiche des informations sur les données.

C’est la même chose dans Twig, avec une syntaxe légèrement différente : c’est une instruction à traîter, donc dump est entouré par {% et %} : {% dump todos %}.

Les données dumpées ne sont pas affichées en plein milieu de la page, mais masquée et visibles dans une section dédiée de la barre d’outils Symfony.

Attention, toutefois à l’utilisation des doubles accolades (comme dans {{ dump(todo) }}) qui signifie, dans Twig, l’affichage d’une valeur dans la page, et va donc afficher les données dumpées directement dans la page. Ça fonctionne, mais ce n’est pas idéal, notamment en cas de redirection qui va supprimer le contenu affiché.

L’utilisation de dump dans les gabarits pollue un peu le code, mais offre l’avantage de ne fonctionner qu’en environnement de développement. dump n’est plus exécuté une fois l’application déployée en production. Le code peut contenir des instructions pour la mise au point et n’a pas forcément à être nettoyé avant la livraison en production.

Barre d’outils

Requêtes
Réponses
Gabarits
Doctrine
Performances
…

Le Rendering Call Graph nous indique quels blocs Twig sont surchargés

</outils_symfony>

Take away

HTML
Modèle, Vues, Contrôleurs
Gabarits pour mettre en œuvre les Pages (production des pages HTML avec Twig)
Surcharge des blocs

Récap

[X] HTTP (GET)
[X] PHP
[X] Doctrine
[X] Routeur Symfony
[X] HTML
[X] Twig

Tout ce qu’il faut pour un site Web dynamique en lecture seule :-)

Postface

Crédits illustrations et vidéos

illustration patron couture : source : https://textilelearner.net/read-a-sewing-pattern/
illustration gabarit page : source: https://www.imagescreations.fr/template-wordpress/

Copyright

Document propriété de ses auteurs et de Télécom SudParis (sauf exceptions explicitement mentionnées).
Réservé à l’utilisation pour la formation initiale à Télécom SudParis.