Introduction

Différence entre Web et Internet : Internet est un système de réseaux informatiques reliés
entre eux, alors que le Web est un système de publication d’informations et d’interactions
avec des serveurs qui sont connectés à Internet.

Architecture 3 tiers
● Couche de présentation
o Pages HTML transmises par le réseau
o Serveur qui les construit, client (navigateur qui les affiche)
● Couche de traitement
o Programmes
o Serveur web (dialogue http)
o Serveur d’applications (exécute des programmes PHP)
● Couche d’accès aux données
o SGBD : système de gestion de base de données

● HTTP : protocole de communication entre les clients et les serveurs

● Symfony : Framework
● Composer : gestionnaire de paquetages PHP, gestionnaire de dépendances entre
bibliothèques. Gère les fichiers, bibliothèques, et le répertoire de développement
d’une application Symfony

● ORM : Object Relational Mapper (ici Doctrine)

o Permet d’accéder à la base de données via des objets et des classes PHP, sans
faire de SQL
 o Repository : Générateur d’objets, c’est en gros le sac dans lequel on met toutes
les instances.
o Récupérer le repository de Film
$this->filmRepository = $container->get('doctrine')
->getManager()
->getRepository(Film::class);
o Récupérer toutes les instances de Film
$films = $this->filmRepository->findAll() ;
o Trouver une entité à partir de son ID
$film = $this->filmRepository->find($id);
EQUIVALENT À
SELECT * FROM ... WHERE ID=[$id]
o Trouver une entité à partir de plus de caractéristiques
$film = $this->filmRepository->findOneBy( ['title' => $title, 'year' => $year]);
o em : Entity manager de Doctrine
o DataFixtures : Permet de charger automatiquement des données de test dans
la base de données

HTTP, Serveur Web, Invocation de Programmes

Construction de la requête par le client

● Le client (navigateur) interprète l’URL
● Demande l’adresse IP correspondant au nom du site
● Établit une connexion TCP avec le serveur à cette adresse, sur le numéro de port
associé au protocole (80 pour HTML et 433 pour HTTPS)
● Formule sa requête d’action sur une ressource (ex : GET /project/doc.html)

Traitement de la requête par le serveur

● Analyse la requête reçue (GET ici)
● Vérification de la validité, autorisations d’accès…
● Envoie d’une réponse avec :
o OU un code retour, et du contenu (doc ou résultat exécution)
o OU message d’erreur / demande d’authentification / adresse redirection
● Fermeture connexion
 ● Protocole sans état (stateless) : les requêtes sont indépendantes, et le serveur ne se
souvient pas des requêtes précédentes du même client -> pas de gestion de session
dans HTTP par défaut

● Format messages HTTP

o Requête
o (en-têtes)
o Ligne vide (séparateur)
o (corps, contenu du message)

Méthodes HTTP (CRUD)

● Servent à faire des actions/opérations sur les ressources du serveur
● Create (PUT/POST = INSERT)
● Read (GET = SELECT)
● Update (PUT/PATCH = UPDATE)
● Delete

Codes HTTP
● 200 : succès de la requête
● 301 et 302 : redirection
● 403 : accès refusé
● 404 : page non trouvée
● 500 et 503 : erreur serveur
● 504 : le serveur n’a pas répondu

Modèle d’exécution d’un serveur HTTP : Attendre des requêtes, déclenchement de

programmes à l’arrivée d’une requête http, puis recommencer
Programmation événementielle : définir des chemins d’URL et d’autres éléments de contexte
qui déclencheront l’exécution du code
Contrôleur : c’est dans les contrôleurs qu’on indique les chemins d’URL ainsi que les méthodes
à exécuter qui leur sont associées.
Requête = appel à une méthode, la classe dépend du chemin. Ex la classe Todo contient les
méthodes qui s’exécutent pour …/todo/…
 Génération de pages

Design MVC : Modèle, Vues, Contrôleur. Permet d’organiser son code, permet de savoir quels
fichiers créer et de leur définir un rôle.
● Modèle (PHP + Doctrine) : gère les données du site. Récupère les données brutes, les
organise, et les assemble pour qu’elles soient traitées par le contrôleur
● Vue (HTML + Twig) : se concentre sur l’affichage. Ne fait presque aucun calcul, se
contente de récupérer des variables pour savoir ce qu’elle doit afficher
● Contrôleur (PHP) : gère la partie du code qui prend des décisions, fait l’intermédiaire
entre Modèle et Vue, décide de ce qu’il faut afficher, et détermine si l’utilisateur a
accès aux données. Codée uniquement en PHP

Fabriquer du HTML
● Soit côté serveur, qui génère du contenu qui transite vers le navigateur (utilisé ici)
● Soit côté navigateur, où un programme javascript s’exécute dans le contexte d’une
page chargée par le navigateur
● Les pages sont construites à partir des gabarits, et des données générées par le
programme
● Twig : moteur de template
● On crée une structure de page standard contenant des blocs, puis on complète le
contenu de chaque page spécifique en surchargeant ces blocs
 Expérience utilisateur Web

● Arbre de balises HTML (DOM : Document Object Model)

● Bootstrap : Framework CSS

Interactions CRUD, formulaires

HATEOS : Modèle ou un site internet c’est juste ça, des pages reliées entre elles par des
transitions gérées par le contrôleur
Principe REST : Representational State Transfer = passer de documents hypertextes (ci-
dessus) à des applications web. Le but c’est de permettre à l’utilisateur d’envoyer des données
au serveur.

On envoie les données au serveur par le protocole HTTP (méthode POST), mais cet envoi doit
tout de même être mis en forme.
 Sessions, Contrôle d'accès

Pour mettre en place des sessions et permettre des utilisations personnalisées aux
utilisateurs, on utilise des Cookies, qui permettent d’identifier un client, et qui peuvent être
communs à un ensemble d’URLs.
Une session contient les données personnelles d’un utilisateur, et est présentée sous couvert
de la présentation d’un identifiant contenu dans le cookie associé.
Les cookies sont partagés dans les en-têtes des requêtes HTTP, ils permettent de raccrocher
la mémoire de l’état précédent sauvegardé côté serveur à la fin de la réponse HTTP
précédente pour le même client.
Les cookies ont une taille limitée, et leur durée de vie est potentiellement grande, au choix du
serveur.

Mais il faut bien protéger les données privées. D’où :

 • RBAC (Contrôle d'Accès Basé sur les Rôles) : modèle dans lequel chaque décision
d'accès est basée sur le rôle auquel l'utilisateur est associé. On n’associe pas
directement des permissions à un utilisateur, mais on passe par un intermédiaire, le
rôle

Interface dynamique côté navigateur en Javascript

Programmes Javascript téléchargés depuis le serveur qui s’exécute sur le client. Permet de
construire des vues et des pages web dynamiques, qui réagit aux commandes de l’utilisateur.

Intérêt

• Temps de réponse + court

• Contrôler formulaires avant envoi au serveur
• Pages animées
• Modifier le contenu et le style de la page en fonction des actions de l’utilisateur

Les événements ont un traitement par défaut.

DOM : Document Object Model

• Modèle de la structure des documents HTML

• Il fournit une représentation structurée du document sous forme d'un arbre et définit
la façon dont la structure peut être manipulée par les programmes, en termes de style
et de contenu. Le DOM représente le document comme un ensemble de nœuds et
d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également
avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se
produit.
 • Le DOM offre un ensemble de méthodes de parcours de l’arbre pour accéder
et/ou modifier son contenu
• les événement déclenchent l’exécution d’actions sur les objets du programme
(dont le DOM)
• AJAX : intègre JavaScript et requêtes http asynchrones, qui consistent à ne pas
bloquer le client tant qu’on n’a pas reçu de réponse du serveur

Sécurité, gestion des erreurs

Exemples d’attaques

• Injection SQL
• Cross-site scripting (XSS) : donne accès aux données de l’application à un script tiers
(cookies, jeton session)
• Cross Site Request Forgery (CSRF) : Induire l’exécution de transition dans le graphe
d’états de l’application en jouant des requêtes à l’insu de l’utilisateur

Exemple de protection : Cross-Origin Resource Sharing (CORS)

Avantages du framework

• Permet de gérer automatiquement certaines précautions

• Sanitization
o Permet de ne pas transmettre au Modèle des données avec des caractères
indésirés, les supprime automatiquement
o Champ des formulaires associés à un type de données pour restreindre les
plages de valeur
• Sécurité des formulaires
o Contrôle les transitions dans le graphe HATEOS
• Sécurité des utilisateurs
o Protéger les données des utilisateurs et lutter contre la surveillance, par
exemple avec du chiffrement TLS (HTTPS) ou avec l’usage de TOR

Gestion des erreurs : Exceptions

Bugs, Qualité

• Éviter les bugs : Coder et tester

• Tester mais pas à la main
• Tests unitaires : test des méthodes des objets du modèle, en dehors du contexte web
• Tests système : tester de bout en bout, systématiquement