Architecture(s) et
application(s) Web

CSC4101 - Génération de pages

27/09/2024

Plan de la séance

Objectifs de cette séance :

  1. Ressources, Pages, Vues
  2. Gabarits (templates)
  3. 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 ?

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)

MVC-user.png

Modèle déjà vu avec Doctrine.

Contenu d’une page Web

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

Visualisation d’une page 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

generationpages.png

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

Pomper 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

  1. Génération de pages
  2. Gabarits (templates)
  3. Outils Symfony

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

Moteur de gabarits Twig

twig-logo.png

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="products/">Produits</a></li>
        <li><a href="company/">Société</a></li>
        <li><a href="shop/">Boutique</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 : 

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

Données à injecter

array(
          array('href' => 'products/', 'caption' => 'Produits'),
          array('href' => 'company/', 'caption' => 'Société'),
          array('href' => 'shop/', 'caption' => 'Boutique')
     );

Gabarit de page complet

<!DOCTYPE html>
<html>
  <head>
    <title>Ma page</title>
  </head>
  <body>
    <ul id="navigation">

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

    </ul>
    <h1>Ma page</h1>

    {{ a_variable }}

  </body>
</html>

Données complètes

array(
        'navigation' => array(
                array('href' => 'products/', 'caption' => 'Produits'),
                array('href' => 'company/', 'caption' => 'Société'),
                array('href' => 'shop/', 'caption' => 'Boutique')
        ),
        'a_variable' => "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="products/">Produits</a></li>
        <li><a href="company/">Société</a></li>
        <li><a href="shop/">Boutique</a></li>
      </ul>
      <h1>Ma page</h1>
      Salut le monde
    </body>
  </html>

Syntaxe Twig

Variable
{{ var }}
Instruction
{% ... %} : for i in, if, 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('navigation' => array(
      array('href' => 'products/', 'caption' => 'Produits'),
      array('href' => 'company/', 'caption' => 'Société'),
      array('href' => 'shop/', 'caption' => 'Boutique')
    ),
              'a_variable' => "Salut le monde");

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

Conception des gabarits

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

base.html.twig 

<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <link rel="stylesheet" href="style.css" />
            <title>{% block title %}{% endblock %}</title>
        {% endblock %}
    </head>
    <body>
        <div id="content">
            {% block content %}{% endblock %}
        </div>
        <div id="footer">
            {% block footer %}
                &copy; Copyright 2016 by ...</a>.
            {% endblock %}
        </div>
    </body>
</html>

Spécialisation pour une page

accueil.html.twig 

{% extends "base.html.twig" %}

{% block title %}Accueil{% endblock %}

{% block content %}
    <h1>Accueil</h1>
    <p class="important">
        Bienvenue sur ma page géniale
    </p>
{% endblock %}

Mockup exécutables

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

</gabarits>

Plan de la séance

  1. Génération de pages
  2. Gabarits (templates)
  3. 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);
dump.png

En Twig : 

{% dump var %}

Attention : 

{% dump todos %}

{% for todo in todos %}
    {# the contents of this variable are displayed on the web page #}
    {{ dump(todo) }}

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

Barre d’outils

  • Requêtes
  • Réponses
  • Gabarits
  • Doctrine
  • Performances
  • …

Gérer les erreurs

Lire les messages d’erreurs !

</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

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.