Architecture(s) et application(s) Web - CSC4101 - Génération de pages - Télécom SudParis
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Architecture(s) et application(s)
Web
Télécom SudParis
(02/10/2018)
CSC4101 - Génération de pages
CSC4101 2018-2019 CM 3
Table des matières
1 Objectifs de cette séquence 1
2 Génération de pages 1
3 Inspecteur du navigateur 6
4 Gabarits (templates) 6
5 Symfony 11
6 Take away 11
7 Récap 11
8 Ensuite.. . 11
9 Postface 12
1 Objectifs de cette séquence
L'objectif de cette troisième séquence du cours sera de présenter le standard HyperText Markup
Language (HTML) et la façon dont il peut être produit pour réaliser des interfaces pour les applications
Web.
On explicitera la façon dont les interactions entre un client HTTP et le serveur Web ont permis
de passer d'une consultation de documents Hypertextes sur la Toile à la mise en ÷uvre d'applications
interactives.
On présentera le composant Twig utilisé dans l'environnement Symfony pour générer les pages
HTML côté serveur à partir d'un système de gabarits (templates ).
2 Génération de pages
Cette section présente les principes architecturaux adoptés pour mettre en ÷uvre des applica-
tions sur le Web via le protocole HTTP.
2.1 Ressources Web accédées par le client HTTP
Ressource Web objet d'une requête (méthode + URL)
Représentation (document) format transmis dans la réponse (content-type)
On va se concentrer sur le format le plus courant pour la représentation des ressources, HTML.
2.1.1 Questions philosophiques
Ressource == Représentation ?
Représentation == Visualisation réalisée par le client HTTP ?
Poly étudiant 1CSC4101 2018-2019 CM 3
Discussion philosophique, qui est parfois importante à prendre en compte. . .
Une ressource a beau être identi é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 oues 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 eectué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.
2.2 Représentation de ressources
R
C UD
on s'intéresse dans un premier temps à la représentation d'une consultation de ressources.
on verra la modi cation ultérieurement.
2.3 Notion de Vues
MVC
Modèle
Vues
Contrôleur
On parle souvent du patron de conception MVC, de frameworks MVC. Ici, on représente une
version simpli ée d'une boucle de rétroaction sur l'utilisation de l'application.
2.4 Contenu d'une page Web
Visualisation d'une page contenant diérentes ressources
document HTML principal
images
feuilles de style
scripts
...
Hypertexte : proviennent pas toutes du même serveur HTTP (requêtes supplémentaires)
À noter qu'une partie de ces éléments peuvent être mis en cache dans le navigateur.
On met de côté ash et autres contenus dans le canevas de pages, en plein écran
Poly étudiant 2CSC4101 2018-2019 CM 3
2.5 Recette de fabrication d'une page
Génération d'une représentationd'une ressource gérée par l'application, transmise dans la ré-
ponse HTTP
HTML (construit côté serveur) : pages d'applications
ou JSON, XML, etc.
+ ressources statiques complémentaires : CSS, Images, JavaScript, etc. ?
+ adaptation dynamique (exécution du CSS et du JavaScript côté client)
On se concentre maintenant sur la génération du contenu HTML qui va servir d'interface à nos
programmes.
Les CSS et images sont en général statiques et dé nis une fois pour toute par les développeurs,
et mis en ligne tels-quels.
La visualisation nale dépend de l'interprétation du HTML, du CSS et de l'exécution du
Javascript qui modi e le contenu de la page.
2.5.1 Fourniture des pages aux utilisateurs
2.5.2 Fabriquer du HTML
côté serveur générer un contenu qui transite vers le navigateur dans la réponse à une requête HTTP
(du HTML)
côté client un programme Javascript s'exécute dans le contexte d'une page chargée par le navi-
gateur, et construit du HTML en mémoire pour enrichir cette page (et déclenche d'autres
requêtes HTTP)
Dans ce cours, principalement 1ère option
La construction dynamique du contenu des pages sera vu en séance 10.
2.5.3 Fabriquer du JSON, etc.
Plus simple : le client ne le modi e pas.
2.6 Génération des pages
Examinons maintenant les techniques dont nous disposons pour mettre en ÷uvre les pages de
l'application.
2.6.1 Séparation structure / mise en forme
HTML : structure de la page, texte, méta-données
CSS : mise en forme
Poly étudiant 3CSC4101 2018-2019 CM 3
Encore une fois, on ne va pas rentrer dans les détails des langages HTML et CSS. CSS sera vu
plus spéci quement dans la prochaine séance.
2.6.2 Programme TP / Hors-présentiel
Apprentissage de HTML et de Twig
TP : pratique HTML + Gabarits Twig par l'exemple
HP : Apprentissage langages, préciser les notions
HP : Application sur le projet
2.7 HTML (5)
HyperText Markup Language
Rappel : vous avez vu HTML au début de ce cours en autonomie
Ressources :
https://www.codecademy.com/fr/learn/web : CodeCademy HTML & CSS (français)
http://www.w3schools.com/html/ HTML(5) Tutorial W3schools
https://developer.mozilla.org/fr/docs/Web/Guide/HTML/HTML5
2.7.1 Structure
Structure arborescente (sections de texte) visible :
...
...
...
...
Structure additionnelle (pas forcément visible, mais utilisable par le CSS) :
...
...
La structure pas forcément visible prend tout son sens lorsqu'on ajoute du CSS.
Tester la fonction d'a chage sans styles du navigateur.
2.7.2 Balises sémantiques
Poly étudiant 4CSC4101 2018-2019 CM 3
Le navigateur ne sait pas forcément quoi faire de ces sections, donc il faut obligatoirement un
CSS associé.
Par contre, pour l'accessibilité, par exemple, on peut sauter directement à la lecture des sections
en ignorant les en-têtes et autres.
2.7.3 Formulaires
Soumission de données pour les applications : génère des requêtes HTTP vers des ressources.
-> séance n+2
Sera vu principalement dans 2 séance.
2.7.4 Produire du HTML avec PHP
HTML + PHP inline
a chage d'HTML sur la sortie standard du programme
echo "...";
ou
print("...");
Mieux : Bibliothèque de génération HTML
Gabarits (Templates )
Cf. la section précédente pour les mécanismes d'appel des programmes en PHP par le serveur
Web.
La sortie standard est transmise dans la réponse à la requête HTTP, d'où la possibilité d'utiliser
echo ou print().
Dans d'autres langages de programmation, le principe est équivalent.
2.7.5 Exemple a chage PHP en ligne
Ne pas faire comme ça en 2018 !
Poly étudiant 5CSC4101 2018-2019 CM 3
Variante du Hello world PHP déjà vu à la séance précédente.
Mélange de HTML et de code exécutable dans le même chier : rend très di cile la mainte-
nance : mélange forme et fond.
Obsolète, même si ça fonctionne encore.
2.7.6 Génération de HTML
Ne pas faire comme ça en 2016 !
HTML est généré à partir de la concaténation de chaînes de caractère qui sont nalement
a chées sur la sortie du programme avec print.
Déjà mieux que la version précédente : modularisation du comportement possible dans des
fonctions, etc.
Mais mélange toujours la présentation et la logique métier : balises dans le corps de la fonction :
quid si on change la mise en page : retoucher toutes les fonctions.
Et surtout, pas de véri cation que le HTML est propre, bien formé : plein de bugs ne sont pas
détectables !
Fortement déconseillé : aujourd'hui on recommende les templates.
3 Inspecteur du navigateur
L'outil pour aider à la mise au point du HTML, dans le navigateur.
Cette partie est faiteen démo, principalement.
4 Gabarits (templates)
4.1 Génération du HTML grâce aux gabarits
Page construite à partir :
structure de la page : gabarit
(statique)
donnéesgénérées par le programme (dynamiques)
Génération HTML par moteur de templates
Poly étudiant 6CSC4101 2018-2019 CM 3
Vieux principe de conception (architecture / couture / . . . )
Le principe d'un gabarit, modèle ou patron est de prévoir la structure générale, les proportions
des diérents éléments.
On décompose en vues plus simples spéci ques à certains éléments pour rendre la compréhen-
sion plus simple et permettre de faire évoluer des sous-éléments indépendamment.
4.2 Twig
"logo Twig"
http://twig.sensiolabs.org/
Moteur de templates utilisé dans Symfony
Utilisable seul
Syntaxe inspirée de celle d'autres moteurs de templates populaires (Django)
4.3 Exemple : liens d'un menu
Résultat souhaité :
Ma page
Produits
Société
Boutique
Ma page
Salut le monde
On veut un menu sous forme de balises ... identiques. La
seule diérence est le lien cible (contenu attribut href) et son libellé (texte dans la balise ,
appelé caption ).
4.3.1 Gabarit de base d'un élément de menu
Motif à répéter :
Poly étudiant 7CSC4101 2018-2019 CM 3
{{ caption }}
4.3.2 Données à injecter
array(
array('href' => 'products/', 'caption' => 'Produits'),
array('href' => 'company/', 'caption' => 'Société'),
array('href' => 'shop/', 'caption' => 'Boutique')
);
On alimente le moteur de template avec le template précédent, en lui fournissant la bonne
structure de données, par exemple, ici, un tableau associatif en PHP.
Twig fonctionne aussi avec d'autres types de données : JSON, etc.
4.4 Gabarit de page complet
Ma page
{% for item in navigation %}
{{ item.caption }}
{% endfor %}
Ma page
{{ a_variable }}
Figure 1 Template home.html.twig
Boucle for qui itère pour construire une barre de navigation contenant des liens hypertextes,
à partir d'une liste de couples (URL, titre du lien), et ajoute la valeur d'une variable dans le
corps de la page.
4.4.1 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"
);
4.4.2 Résultat généré
Poly étudiant 8CSC4101 2018-2019 CM 3
Ma page
Produits
Société
Boutique
Ma page
Salut le monde
Une fois la boucle et les substitutions eectuées, le moteur de template a généré cette page
HTML.
Avantage : si on décide de renommer les URLs des rubriques du site, pas besoin de retoucher
le HTML. A priori, un seul endroit impacté dans le code.
4.5 Programmer en Twig
Programmation simple
Mélange HTML et instructions Twig
Algorithmique basique : boucles, conditionnelles
syntaxe à la Python
Pattern matching
Structuration en motifs factorisables (va en général de pair avec les CSS)
Tests sur http://twigfiddle.com/
4.5.1 Exemple code TwigCSC4101 2018-2019 CM 3
Compléter le contenu dans chaque page spéci que en surchargeant des blocs
4.6.2 Structure de base
base.html.twig
{% block head %}
{% block title %}{% endblock %}
{% endblock %}
{% block content %}{% endblock %}
{% block footer %}
© Copyright 2016 by ....
{% endblock %}
Cette structure principale permet de se dé nir et faire évoluer le design général des pages de
l'application : inclusion de CSS, modi cation de la présentation, etc.
Chaque page sera générée à partir de ce template de base, en spécialisant le bloc content
(initialement vide).
Avantage : un seul chier impacté en cas de changement du look du site.
Possibilité de spécialiser les CSS de chaque sous-rubrique du site, par exemple, en surchargeant
le contenu par défaut du bloc head.
4.6.3 Spécialisation pour une page
accueil.html.twig
{% extends "base.html.twig" %}
{% block title %}Accueil{% endblock %}
{% block content %}
Accueil
Bienvenue sur ma page géniale
{% endblock %}
Exemple de template pour une page du site, qui surcharge (extends) le bloc content.
Similaire à la surcharge dans les classes lles en programmation orientée objet : spécialisation.
4.6.4 Mockup exécutables
1. Conception des mockups
2. Codage des templates et CSS
3. Validation des interfaces sur un prototype
4. Implémentation du reste de l'application
Poly étudiant 10CSC4101 2018-2019 CM 3
Travail en parallèle de diérentes équipes
Si on connaît HTML, on peut faire du Twig facilement.
5 Symfony
5.1 Mise au point
logs
dump()
Data xtures
ligne de commande
barre d'outils Symfony
5.2 Barre d'outils
Requêtes
Réponses
Gabarits
Doctrine
Performances
...
5.3 Gestion des erreurs
Code source
Lire les messages d'erreurs !
5.4 Coder
PHP : Contrôleurs (routeur, etc.)
PHP + Doctrine : Modèles des données
HTML + Twig : Vues
Twig s'interface avec le modèle Doctrine => moins de code à écrire en PHP ø/
Inconvénient : pas mal de syntaxes diérentes
6 Take away
HTML
Gabarits pour mettre en ÷uvre les Pages (production des pages HTML avec Twig)
Surcharge des blocs
7 Récap
HTTP (GET)
PHP
Doctrine
Routeur Symfony
HTML
Twig
Tout ce qu'il faut pour un site Web dynamique en lecture seule :-)
8 Ensuite. . .
8.1 Tout de suite, séance TP n°3
Découverte de Twig sur application sur l rouge ToDo
Démarrage du projet (binômes)
à poursuivre en hors-présentiel
Poly étudiant 11CSC4101 2018-2019 CM 3
8.2 Projet noté
Cahier des charges
Checklist d'avancement
À votre rythme !
8.3 Hors-présentiel d'ici au prochain cours
3 h à caser dans la semaine
HTML en autonomie
Twig en autonomie
Fin séance TP
Suite projet
9 Postface
9.1 Crédits illustrations et vidéos
logo Twig © 2010-2017 SensioLabs
Copyright
Ce cours est la propriété de ses auteurs et de Télécom SudParis.
Cependant, une partie des illustrations incluses est protégée par les droits de ses auteurs, et
pas nécessairement librement diusable.
En conséquence, le contenu du présent polycopié est réservé à l'utilisation pour la formation
initiale à Télécom SudParis.
Merci de contacter les auteurs pour tout besoin de réutilisation dans un autre contexte.
Poly étudiant 12Vous pouvez aussi lire
