Programmation Avancée pour le Web

Transcription

1 L3 Informatique Option : ISIL Programmation Avancée pour le Web RAMDANI Med U Bouira 1

2 Contenu du module Introduction aux applications Web Rappels sur les sites Web Conception d une application Web Notion d architecture Web Introduction AJAX JavaScript Développement Web : mise en pratique 2

3 Rappels sur les sites internet Historique HTTP HTML Formulaires HTML 3

4 Historique 1990 Tim Berners-Lee (MIT) et Robert Calliau (CERN) inventent le World Wide Web En trois mois ils Définissent les Hypertextes, basés sur Dynatext SGML (précurseur de HTML) ; Inventent le protocole HTTP ; Écrivent le premier serveur web, et le premier browser et éditeur (appelé WorldWideWeb, puis Nexus). 4

5 Historique 1993 ViolaWWW et Mosaic sont les premiers browsers graphiques populaires Fondation du World Wide Web Consortium (W3C) par Berners-Lee Première release du serveur web Apache. Rasmus Ledorf crée PHP. Le développement de Netscape (précurseur de Mozilla) commence. JavaScript est né Macromedia distribue Flash Standardisation de JavaScript en ECMAScript. Les documents deviennent dynamiques. 5

6 Historique 1998 Publication du standard XML Java popularise le terme Application Web Des membres de Apple, Mozilla et Opera quittent le W3C pour fonder le WHATWG. Le travail sur HTML5 est amorcé Jesse James Garret crée le mot AJAX, acronyme de Asynchronous Javascript and XML HTML 5.0 devient une recommandation en octobre. 6

7 HTTP HTTP (Hypertext Transfer Protocol) est un protocole textuel, sans état, à requête-réponse destiné à servir des documents web. Requête : Le client (browser) demande à lire ou modifier un document (hypertexte, image, ) Réponse : Le server envoie une réponse (pas nécessairement le document). Textuel : Toutes les communications sont codées en ASCII. Sans état : Le server ne se souvient pas du client entre deux requêtes. 7

8 HTTP La requête HTTP : Action, Entêtes (seulement Host est obligatoire), Une ligne vide (attention: <CR><LF>), Corps du message (Optionnel). 8

9 HTTP La ligne d action : POST /document.html HTTP/1.1 Méthode HEAD Demande seulement les entêtes. GET Demande une page. Ne modifie pas l état du server. POST Envoie des données. Peut entraîner une modification de l état du server. D autres méthodes occasionnellement utilisées: PUT, DELETE, TRACE, OPTIONS, CONNECT, PATCH. Ressource Adresse du document web. Protocole Deux possibilités: HTTP/1.0 ou HTTP/1.1. (HTTP/2.0 en cours?) 9

10 HTTP Entêtes des requêtes Obligatoires Host Le nom de domaine du server à qui on envoie la requête. Content-Length Obligatoire seulement pour POST et PUT. Donne la longueur en octets du contenu. Fréquentes Accept-* Type de contenu que le client accepte (type, encodage, langue) Cookie Utilisé pour la persistance côté client. Referer Adresse qui a donné origine à la requête. User-Agent Nom du browser du client. Content-Type MIME type du contenu (texte, HTML, etc.). 10

11 Réponse HTTP HTTP Status line, Entêtes, Une ligne vide (attention: <CR><LF>), Contenu (Optionnel). 11

12 HTTP La status line HTTP/ OK Protocole + code d état + message Les codes d état décrivent le résultat de la requête. Les plus fréquents : 200 OK Le document a été trouvé et envoyé au client. 301 MOVED PERMANENTLY Rédirection permanente (nécessite Location). 302 FOUND 303 SEE OTHER 307 TEMPORARY REDIRECT Différents types de rédirection (nécessitent Location). 400 BAD REQUEST Le client a envoyé une requête mal formatée. 403 FORBIDDEN Le document n est pas accessible. 404 NOT FOUND Le document est inconnu au server. 410 GONE Le document n existe plus. 418 I M A TEAPOT Poison d avril IETF INTERNAL SERVER ERROR Erreur sur le server. 503 SERVICE UNAVAILABLE Le server est momentanément indisponible. 12

13 Entête des réponses HTTP Plus fréquentes : Date, Expires, Last-Modified Gestion des caches. Content-Type MIME type du contenu de la réponse. Content-Length Longueur en octets du contenu. Non obligatoire (peut être spécifié autrement). Location Utilisé par les redirections. Sever Nom du logiciel du server. Set-Cookie Utilisé pour la persistance côté client. 13

14 HTML HTML est un langage de balisage (markup language), inspiré par SGML, pour l écriture de documents Hypertexte lisibles par un human. Les Balises (tags) délimitent du contenu textuel : À chaque balise ouvrante <tag1> correspond une balise fermante </tag1>. Une balise peut en contenir d autres, proprement imbriquées. Toute balise ne peut pas aller dans toute autre. Certaines balises n ont pas de contenu. Dans ce cas <tag></tag> peut être raccourci en <tag/>. 14

15 HTML Les balises peuvent avoir des attributs, dans la balise ouvrante. Les valeurs des attributs sont contenues entre guillemets simples, doubles ou aucun guillemet ; dans ce dernier cas (à éviter) elles ne doivent pas contenir d espace. Certains attributs sont obligatoires pour certains tags. 15

16 HTML La structure du document Il y a un nombre limité de balises, l utilisateur ne peut pas en inventer. Tout document HTML doit avoir cette forme : 16

17 HTML Le <head> contient tout ce qui concerne le document, mais qui n en fait pas partie. Voici quelques unes de ses balises plus importantes : <title>: Le titre du document. Obligatoire. <script>: Code pour le scripting côté client (JavaScript, VBScript, etc.). <style>: Directives d affichage (CSS, etc.). <meta>: Meta-informations sur le document (langue, encodage, etc.). 17

18 HTML Le <body> contient le vrai contenu. Voici une petite sélection de balises. <p>, <h1>,, <h6>: Un paragraphe de texte, un titre de premier niveau,, un titre de sixième niveau. <a>: Une ancre, c.-à-d. un lien vers d autres contenus. <img>, <audio>, <video>, <object>, <svg>: Inclusion de medias. <form>, <input>, : Interaction avec l utilisateur. <table>, <tr>, <td>, : Tableaux. <strong>, <em>: Texte présente différemment (par ex., gras ou italique) <div>, <span>: Balises avec aucune signification (imporantes pour faire le lien avec style et scripts). 18

19 Formulaires 19

20 Formulaires 20

21 Formulaires 21

22 Formulaires 22

23 Formulaires 23