Leçon 0 : Introduction au développement web

Transcription

1 Module : Atelier programmation n- tiers Atelier de TP : N 0 Durée : 6h Groupes : M31- M32 Leçon 0 : Introduction au développement web NB : Ce document est un support de cours (notes de cours) : ce n'est pas un cours complet. Des approfondissements nécessitent l'aide d'un enseignant et par ailleurs un certain nombre de thèmes n'ont pas été abordés. La bonne compréhension des nouvelles notions introduites nécessite la réalisation des travaux pratiques associés et la participation aux séances des TPs. Objectifs : On se propose dans ce support de travaux pratiques d introduire des notions de base du domaine du web. Après avoir lu ce document et en avoir testé les exemples, vous devriez avoir acquis des concepts de base de la programmation web. 1) Les composants d une application web 1. Echange des données dans une application web Page 1

2 N Actions 1 Le navigateur demande une URL pour la 1 ère fois ( Aucun paramètre n'est passé. 2 Le serveur Web lui envoie la page Web de cette URL. Elle peut être statique ou bien dynamiquement générée par un script serveur (SA) qui a pu utiliser le contenu de bases de données (SB, SC). Ici, le script détectera que l'url a été demandée sans passage de paramètres et génèrera la page WEB initiale. Le navigateur reçoit la page et l'affiche (CA). Des scripts côté navigateur (CB) ont pu modifier la page initiale envoyée par le serveur. Ensuite par des interactions entre l'utilisateur (CD) et les scripts (CB) la page Web va être modifiée. Les formulaires vont notamment être remplis. 3 L'utilisateur valide les données du formulaire qui doivent alors être envoyées au serveur web. Le navigateur redemande l'url initiale ou une autre selon les cas et transmet en même temps au serveur les valeurs du formulaire. Il peut utiliser pour ce faire deux méthodes appelées GET et POST. A réception de la demande du client, le serveur déclenche le script (SA) associé à l'url demandée, script qui va détecter les paramètres et les traiter. 4 Le serveur délivre la page WEB construite par programme (SA, SB, SC). Cette étape est identique à l'étape 2 précédente. Les échanges se font désormais selon les étapes 2 et Page web statique et Page web dynamique Une page statique est représentée par un fichier HTML. Une page dynamique est générée "à la volée" par le serveur web. Nous vous proposons ci-dessous quelques pour montrer la différence entre une Page statique et une page dynmique. 1. Page statique HTML (HyperText Markup Language) Considérons le code HTML suivant : qui produit la page web suivante : 2. Un script JSP (Java Server Pages) Le script heure.jsp : Page 2

3 Une fois exécuté par le serveur web, ce script produit la page suivante : 3. Les échanges client-serveur Nous nous intéressons ici aux échanges entre la machine cliente et la machine serveur. Ceux-ci se font au travers d'un réseau et il est adéquat de rappeler la structure générale des échanges entre deux machines distantes. Le modèle TCP/IP a la structure suivante : Page 3

4 l'interface réseau (la carte réseau de l'ordinateur) assure les fonctions des couches 1 et 2 du modèle OSI. la couche IP (Internet Protocol) assure les fonctions de la couche 3 (réseau) la couche TCP (Transfer Control Protocol) ou UDP (User Datagram Protocol) assure les fonctions de la couche 4 (transport). Le protocole TCP s'assure que les paquets de données échangés par les machines arrivent bien à destination. Si ce n'est pas les cas, il renvoie les paquets qui se sont égarés. Le protocole UDP ne fait pas ce travail et c'est alors au développeur d'applications de le faire. C'est pourquoi sur l'internet qui n'est pas un réseau fiable à 100%, c'est le protocole TCP qui est le plus utilisé. On parle alors de réseau TCP-IP. la couche Application recouvre les fonctions des niveaux 5 à 7 du modèle OSI. Les applications web se trouvent dans la couche Application et s'appuient donc sur les protocoles TCP-IP. Les couches Application des machines clientes et serveur s'échangent des messages qui sont confiées aux couches 1 à 3 du modèle pour être acheminées à destination. Pour se comprendre, les couches application des deux machines doivent "parler" un même langage ou protocole. Celui des applications Web s'appelle HTTP (HyperText Transfer Protocol). C'est un protocole de type texte, c.à.d. que les machines échangent des lignes de texte sur le réseau pour se comprendre. Ces échanges sont normalisés, c.à.d. que le client dispose d'un certain nombre de messages pour indiquer exactement ce qu'il veut au serveur et ce dernier dispose également d'un certain nombre de messages pour donner au client sa réponse. 4. Le protocole http a. La réponse d'un serveur http Nous allons découvrir ici comment un serveur web répond aux demandes de ses clients. Le service Web ou service HTTP est un service TCP-IP qui travaille habituellement sur le port 80. Il pourrait travailler sur un autre port. Dans ce cas, le navigateur client serait obligé de préciser ce port dans l'url qu'il demande. Une URL a la forme générale suivante : protocole://machine[:port]/chemin/infos Avec : protocole http pour le service web. Un navigateur peut également servir de client à des services ftp, news, telnet,.. Page 4

5 machine port chemin infos nom de la machine où officie le service web port du service web. Si c'est 80, on peut omettre le n du port. C'est le cas le plus fréquent chemin désignant la ressource demandée informations complémentaires données au serveur pour préciser la demande du client Que fait un navigateur lorsqu'un utilisateur demande le chargement d'une URL? 1) il ouvre une communication TCP-IP avec la machine et le port indiqués dans la partie machine[:port] de l'url. Ouvrir une communication TCP-IP, c'est créer un "tuyau" de communication entre deux machines. Une fois ce tuyau créé, toutes les informations échangées entre les deux machines vont passer dedans. La création de ce tuyau TCP-IP n'implique pas encore le protocole HTTP du Web. 2) le tuyau TCP-IP créé, le client va faire sa demande au serveur Web et il va la faire en lui envoyant des lignes de texte (des commandes) au format HTTP. Il va envoyer au serveur la partie chemin/infos de l'url 3) le serveur lui répondra de la même façon et dans le même tuyau 4) l'un des deux partenaires prendra la décision de fermer le tuyau. Le client web disposait de deux méthodes pour envoyer à un serveur web les valeurs d'un formulaire qu'il a affiché : les méthodes GET et POST ; La méthode GET d un formulaire HTML ou d un envoi en Ajax n est pas juste une manière de passer des paramètres dans l URL. GET est une «méthode» (au sens d une «fonction» d un langage de programmation) du protocole HTTP. Par exemple l URL peut être utilisée par une requête HTTP de type GET ou POST. S il y a un paramètre, alors en GET il sera ajouté dans l URL ce qui donnera : En POST l URL est utilisée telle qu elle est et les paramètres sont envoyés à côté. Une page statique demandée par un client qui envoie de plus des paramètres par POST ou GET ne peut en aucune façon récupérer ceux-ci. Seul un programme peut le faire et c'est lui qui se chargera alors de générer une réponse au client, une réponse qui sera dynamique et généralement fonction des paramètres reçus. C'est le domaine de la programmation web, que nous abordons plus en détail avec la présentation des technologies Java de programmation web : les servlets et les pages JSP. Page 5