DÉVELOPPEMENT WEB CHAPITRE 1 PRINCIPE DES APPLICATIONS WEB 2 OBJECTIFS DU COURS ▪ Comprendre et connaître les principes des technologies utilisées dans le développement d’applications liées au web. INTRODUCTION ▪ Apparu avec Internet, le développement web fait référence au processus d’écriture d’un site ou d’une page web dans un langage technique. Il s’agit d’une étape incontournable pour qu’un contenu soit mis en ligne et atteigne ses lecteurs. ▪ Le développement web repose sur l’utilisation des langages (HTML/CSS, JavaScript, PHP…) pour écrire des programmes qui sont ensuite exécutés par les ordinateurs. Les instructions sont mises en place sur Internet et sont effectuées sur des serveurs. 4 LE PROTOCOLE HTTP littéralement « protocole de transfert hypertexte » est un protocole de communication client serveur développé pour le World Wide Web ▪ Le principe repose sur un couple requête/réponse ▪ L'Hypertext Transfer Protocol HTTP, 5 LA REQUÊTE ▪ Une requête est un message qui va du client au serveur. Elle est structurée de la manière suivante : verbe URI Entêtes corps HTTP/X.X LA REQUÊTE ▪ VERBE HTTP /file_path.html HTTP/X.X ▪ Verbe HTTP : Le verbe que vous utiliserez va déterminer l’interaction avec le serveur : est-ce que vous allez récupérer un fichier, envoyer des données avec, modifier un objet existant… ▪ HTTP : la version d’HTTP que vous utilisez est toujours envoyée dans la première ligne de la requête. La version que vous verrez le plus souvent est HTTP/1.1. ▪ Entêtes: Les en-têtes sont là pour donner des informations sur l’échange, souvent sur le client qui fait la requête. quelques exemples du contenu d'un en-tête : ▪ Date: Elle indique quand le client a effectué sa demande. ▪ EX: Date: Tue, 19 Jan 2016 18:15:41 GMT ▪ Referer: Définit l’URL de la page à partir de laquelle la ressource est demandée. ▪ Ex: Referer: https://www.google.fr/ ▪ User agent: Indique l'application utilisée par le client, ainsi que sa version. ▪ Ex: User-Agent: Mozilla/5.0 ▪ User language: Renseigne sur la langue utilisée par le client dans son application ▪ Ex: Accept-Language: en-us,en;q=0.8 7 LA REQUÊTE ▪ Corps: Après les en-têtes, vient le corps de la requête. Là-dedans vous aurez des détails selon la nature de la requête. Par exemple, si une requête envoie des données à une API avec GET les attributs seront envoyés dans ce corps. 8 LA REQUÊTE 9 TYPES DE REQUÊTES HTTP/1.1 propose plusieurs types de requêtes: • OPTIONS: il permet au client d’obtenir des informations sur les options disponibles pour obtenir la ressource visée par la requête. • GET: il permet au client d’obtenir la ressource visée par la requête. • HEAD: ≈ GET sauf que la réponse ne devra jamais contenir de corps. Elle est souvent utilisée pour tester la validité d’un lien. • POST: Il permet d’envoyer un corps de requête contenant des informations que le serveur doit prendre en compte et les considérer comme une nouvelle ressource. 10 TYPES DE REQUÊTES • PUT: ≈ POST La différence fondamentale est que ce type vise une requête existante. Le serveur va modifier la ressource existante avec les informations reçues. • DELETE: il permet au client de supprimer la ressource visée par la requête. • TRACE: il permet au client de recevoir de la part du serveur le contenu de la requête telle qu’il l’a reçue tests ou diagnostics • CONNECT: il permet au client de se connecter à un proxy permettant de faire du tunneling (faire passer une connexion interdite par un pare-feu dans un protocole HTTP presque toujours autorisé). LA NOTION D'URL • On a l'habitude d'accéder à un site Web en utilisant son adresse. • Celle-ci est de la forme : http://www.monsite.fr/mondossier/mapage.html. On peut décomposer cette adresse en plusieurs sous-parties. • http:// signifie qu'on utilise le protocole HTTP. • www.monsite.fr est le nom de domaine du site Web visité. • /mondossier/mapage.html est le chemin de la ressource demandée au sein du site. • La majorité des serveurs Web est configurée pour renvoyer une page par défaut (index.html, index.php, Default.aspx) lorsque le client ne précise pas explicitement quelle page il souhaite récupérer (exemples: http://www.monsite.fr ou http://www.monsite.fr/mondossier/). • • Une adresse Web telle que celle ci-dessus est ce qu'on appelle une URL ou Uniform Resource Locator. Elle permet de décrire l'emplacement d'une ressource Web et le moyen d'y accéder. LA RÉPONSE ▪ Les réponses HTTP sont au format suivant : HTTP/X.X Code HTTP Entêtes corps 13 LA RÉPONSE ▪ La version HTTP: Indique la version d'HTTP utilisée. ▪ Le code réponse HTTP: Indique l'état de la réponse. La ressource a-t-elle bien été trouvée ? Si non, pourquoi ? Ce code de 3 chiffres vous dira tout ce qu’il faut savoir. Il y a à peu près 30 codes possibles qui couvrent plein de situations. ▪ Les en-têtes: Ici vous trouverez des infos classiques (la date, etc.) comme vous l'avez vu pour les requêtes. Dans les en-têtes réponses spécifiquement, vous trouverez aussi les infos sur le serveur lui-même Ex: son type ou sa localisation. ▪ Le corps: Le corps de la réponse contient des données pour les utilisateurs, il peut prendre plusieurs types. 14 LA RÉPONSE ▪ Chaque réponse est associée à un code de statut sur trois digits. Il permet d’indiquer au client l’état de la réponse. Le client peut ainsi réagir en conséquence. ▪ Ces codes sont classés en 5 catégories. Catégorie Code Description Information 1xx La requête est reçue par le serveur, le traitement se poursuit Succès 2xx La requête a été reçue, comprise et traitée par le serveur Redirection 3xx Des actions complémentaires sont nécessaires pour terminer la requête Erreur client 4xx La requête ne peut pas être traitée par le serveur Erreur serveur 5xx Le serveur est mis en échec sur le traitement d’une requête valide 15 LA RÉPONSE Exemple de réponse HTTP/1.1 200 OK Date: Wed, 05 Oct 2016 19:44:50 GMT Server: apache/2.4.7 (Ubuntu) Last-Modified: Tue, 20 Sep 2016 06:56:13 GMT Etag: "39b8-53ceaec9cf9c5-gzip" Accept-Ranges: bytes Vary: Accept-Encoding Content-Encoding: gzip Content-Lenght: 4065 Keep-Alive: timeout=30, max=100 Connection: Keep-Alive Content-Type: text/html <!DOCTYPE html SYSTEM « about:legacy-compat"> <html lang="en"> … </html> 16 ARCHITECTURE DES APPLICATIONS WEB ▪ Une application web est un ensemble de composants ou unité logique de traitement. ▪ Objectif: modularité et réutilisation ▪ Trois couches applicatives composent ces composants ▪ Présentation: interaction avec l’utilisateur ▪ Traitement: traitement métiers ▪ Données: gestion des données ou des ressources ▪ Ces 3 niveaux peuvent être imbriques ou repartis de différentes manières entre plusieurs machines physiques ou logiques ▪ Suivants les contraintes d’utilisation ou contraintes techniques, on distingue: Architecture 2 tiers, Architecture 3 tiers, et Architectures n tiers. 17 ARCHITECTURE DES APPLICATIONS WEB Architectures 2 tiers (Client-Serveur) ▪ La couche présentation et traitement sont sur le client ▪ Les données sont sur le serveur ▪ Contexte multi-utilisateurs avec accès aux données centralisées. Données Présentations Traitements 18 ARCHITECTURE DES APPLICATIONS WEB Architectures 3-tiers ▪ La couche présentation (IHM) est sur le client ▪ La couche métier ou les traitements sont pris par un serveur intermédiaire ▪ Les données (fichiers, fichiers xml, BDD,…..) sont sur un serveur de données ▪ Contexte multi-utilisateur: internet Données Traitements Présentations Serveur BDD Serveur Web Application 19 ARCHITECTURE DES APPLICATIONS WEB ▪ la différence entre un serveur web et un serveur d’application ? ▪ Couche 1: Serveur web http ▪ Un serveur http, c’est un serveur qui gère exclusivement des requêtes HTTP. Il a pour rôle d’intercepter les requêtes http, sur un port qui est par défaut 80, pour les traiter et générer ensuite des réponses http. Tous les serveurs web embarquent un daemon http(httpd) ou équivalent qui s’occupe de cette fonctionnalité. Exemple serveur Apache. httpd est le programme du serveur HTTP d'Apache. Il a été conçu pour fonctionner sous forme de processus démon indépendant. Les daemons sont souvent démarrés lors du chargement du système d'exploitation, et servent en général à répondre à des requêtes du réseau, 20 ARCHITECTURE DES APPLICATIONS WEB ▪ Couche 2: Conteneur web ▪ Maintenant, on va étendre notre serveur web pour devenir un conteneur web. Cette extension va permettre d’avoir la possibilité d’exécuter des programmes écrits avec des langages de programmation (java, php, C#, …) dans le serveur web. ▪ Par exemple: le serveur Tomcat n’est autre qu’un serveur Apache couplé avec un moteur web java et, les serveurs tel-que easyPhp, wamp, xamp ne sont que des serveurs apaches couplés avec un moteur web php. 21 ARCHITECTURE DES APPLICATIONS WEB ▪ Couche 3: Serveur d’application ▪ Donc, il faut étendre encore plus le serveur Tomcat pour devenir un vrai serveur d’application java j2ee. L’extension nécessaire est composée de deux partie essentielles: ▪ Un conteneur EJB qui encapsule les traitements des entreprises JavaBeans. 22 ARCHITECTURE DES APPLICATIONS WEB Architecture 3-tiers: Exemple Niveau 2 Niveau 1 URL Fichier php Page web Envoie page html Serveur Appache/Tomcat Parseur PHP Interception, traitement et génération page HTML Serveur BDD Niveau 3 23 ARCHITECTURE DES APPLICATIONS WEB Architecture n-tiers ▪ C’est une architecture N-tiers dans laquelle le traitements des données contient lui-même plusieurs couches multipliant ainsi les tiers. Traitements Données Présentations Serveur web Serveur BDD Serveur Application 24 ARCHITECTURE DES APPLICATIONS WEB Architecture N-tiers: Exemple URL Envoie page JSP Page web Génération et envoie page JSP Serveur web Serveur Application Serveur BDD 25
