Technologie du Web. Structuration de documents (20h) HTML XML Création d application Web (20h) JavaScript PHP. A. Belaïd

Transcription

1 Technologie du Web Structuration de documents (20h) HTML XML Création d application Web (20h) JavaScript PHP

2 Objectif Créer une application Web Ce sera votre projet Agenda électronique avec carnet d adresses Avec une interface Web interactive (dynamique) Rentrer des données : noms, adresses, RDV, par catégorie, secteur, etc. Faire des affichages de contacts par nom, groupe, secteur d activité, Faire des affichages de planning, par créneau horaire, jour, semaine, etc.

3 Objectif

4 Objectif Les points importants 1. Réfléchir sur l organisation des données Cours sur XML : Représentation, lien, sélection, interrogation, affichage, transformation 2. Réfléchir sur l interface et sur l interaction avec elles Cours sur PHP 3. Réfléchir sur l architecture Client (navigateur) serveur (calcul, données) PHP - MySQL

5 XML Introduction et concepts

6 Introduction Aujourd hui Production importante de documents (sur le Web) Plusieurs applications, se partagent des documents, recherchent des documents sur le Web Les formats de ces documents sont disparates PDF, images, HTML, etc. On cherche un protocole commun pour Les manipuler, les compléter, les communiquer à d autres personnes entre différents outils les échanger sur le Web Les interroger 6

7 Introduction Les documents à balises offrent ces possibilités Historiquement, on trouve : SGML Standard Generalized Markup Language Créé par IBM, pour la circulation de ses documents Permet de baliser plusieurs types de documents C est un langage de balisage général HTML Hypertext Markup Language Application de SGML au Web, ayant peu de tag XML extensible Markup Language Version plus légère que SGML 7

8 Introduction Tous ces langages essaient de représenter le document par ses structures Un exemple de document balisé : <book> <title>xml langage et applications</title> <author> <firstname>alain</firstname> <surname>michard</surname> </author>... <p>ces dernières années ont vu l'ouverture des systèmes d'information à l'internet. </p>... </book> 8

9 Pour les documents, ces langages proposent un découpage hiérarchique Structure d arbre pour la structure logique book title author firstname surname chapter title para para chapter para <book> <title>xml langage et applications</title> <author> <firstname>alain</firstname> <surname>michard</surname> </author> <chapter> <title>introduction</title> <para> bla bla bla </para> </chapter>... </book> 9

10 XML Exemple : créer un portail multimédia pour décrire l Art nouveau à Nancy 10

11 La galaxie XML : les standards de base qui s'appuient sur XML Xpath XSL pour la recherche d éléments pour la transformation et l affichage XQuery pour l interrogation DOM pour la programmation ebxml XSchema RDF XSL XML DOM SAX SOAP XQuery 11

12 Structure d'un document XML Un document XML a la structure suivante Prologue Élément racine Arbre d'éléments ou structure Le prologue peut contenir : une déclaration XML des instructions de traitement une DTD Prologue Arbre d éléments (structure du document) 12

13 Structure d'un document XML Exemple <!-- Prologue --> <?xml version="1.0" encoding="iso " standalone="yes"?> <!-- Élément racine --> <biblio> <!-- Premier enfant --> <livre> <!-- Élément enfant titre --> <titre>les Misérables</titre> <auteur>victor Hugo</auteur> <nb_tomes>3</nb_tomes> </livre> <livre> <titre>l'assomoir</titre> <auteur>emile Zola</auteur> </livre> <livre lang="en"> <titre>david Copperfield</titre> <auteur>charles Dickens</auteur> </livre> </biblio> 13

14 Document XML Le prologue La déclaration XML <?xml version="1.0" encoding= iso standalone= yes?> Indique au processeur qui va traiter le document : Version du langage : 1.0 (la plus récente) Encoding : jeu de codage de caractères utilisé dans le document. Le jeu de caractères standard pour la France est le ISO Par défaut, l'attribut encoding a la valeur UTF-8 (Unicode) Standalone Si Standalone = 'yes', le processeur considère que toutes les déclarations nécessaires au traitement du document sont incluses dans le document courant (le document est autonome et ne requiert aucune autre donnée externe) 14

15 Document XML Les attributs Tous les éléments peuvent contenir un ou plusieurs attributs Un attribut est composé d'un nom et d'une valeur Syntaxe : <Nom-elem attribut 1, attribut 2, > Syntaxe d un attribut attribut i : nom="valeur" Exemple : <instrument type="vent">trompette</instrument> 15

16 Validité des documents Pour être utilisable par les différentes applications, un document XML doit être bien formé Balises correctement imbriquées Parsable et manipulable Pas nécessairement valide par rapport à la DTD valide Bien formé + Conforme à une DTD (ou à un schéma) Logiciels de validation Cooktop, XmlSpy, logiciels en ligne 16

17 DTD DTD interne Déclaration <!DOCTYPE elt-racine déclarations> Exemple <?xml version="1.0" standalone="yes"?> <!DOCTYPE parent [ <!ELEMENT parent (garcon,fille)> <!ELEMENT garcon (#PCDATA)> <!ELEMENT fille (#PCDATA)> ]> <parent> <garcon>loic</garcon> <fille>marine</fille> </parent> 17

18 DTD Validation Appeler Cooktop ou chercher un validateur en ligne 18

19 DTD DTD externe : Le fichier parent.xml <?xml version="1.0" standalone="yes"?> <!DOCTYPE parent SYSTEM "parent.dtd"> <parent> <garcon>loic</garcon> <fille>marine</fille> </parent> Le fichier parent.dtd contient : <!ELEMENT parent (garcon,fille)> <!ELEMENT garcon (#PCDATA)> <!ELEMENT fille (#PCDATA)> 19

20 DTD Validation sous Cooktop 20

21 DTD Déclaration d'élément Définition Chaque élément du document doit être défini par une commande du type <!ELEMENT nom (contenu) > où nom est le nom de l'élément (balise) et où contenu décrit : soit la structure de l élément s il est composé soit #PCDATA si c est une feuille Exemple <!ELEMENT livre (auteur, éditeur)> définit un élément livre composé d'une séquence d'éléments auteur et éditeur 21

22 DTD Forme du contenu Notations Exemples (a, b) séquence (nom, prenom, rue, ville) (a b) liste de choix (oui non) a? élément optionnel [0,1] (nom, prenom?, rue, ville) a* élément répétitif [0,N] (produit*, client) a+ élément répétitif [1,N] (produit*, vendeur+) 22

23 DTD Exemple annuaire.xml <?xml version="1.0" encoding="iso "?> <!DOCTYPE annuaire SYSTEM "annuaire.dtd"> <annuaire> <personne type="étudiant"> <nom>heute</nom> <prenom>thomas</prenom> </ > </personne> <personne type="chanteur"> <nom>cantat</nom> <prenom>bertrand</prenom> </personne> </annuaire> annuaire.dtd <!ELEMENT annuaire (personne*)> <!ELEMENT personne (nom,prenom, +)> <!ATTLIST personne type (étudiant professeur chanteur musicien) "étudiant"> <!ELEMENT nom (#PCDATA)> <!ELEMENT prenom (#PCDATA)> <!ELEMENT (#PCDATA)> 23

24 DTD Éléments fils dans le désordre Pour que les éléments fils puissent être entrés dans n'importe quel ordre il faut utiliser le format suivant dans la déclaration : <!ELEMENT exemple (premier second troisième)*> au lieu de <!ELEMENT exemple (premier*, second*, troisième*)> Si on ne met pas d'étoile après la parenthèse, c'est l'un des trois éléments si on met un + c'est au moins un des trois éléments, et si on emploie la virgule au lieu de alors est attendue une (plusieurs) séquence(s) obligatoirement dans l'ordre de la déclaration 24

25 DTD Élément NMTOKEN, NMTOKENS NMTOKEN permet d'affecter un nom symbolique à l'attribut tel qu'un format de date, un format de fichier ou encore une abréviation NMTOKENS offre la possibilité à la valeur de l'attribut de comporter plusieurs noms symboliques séparés par des espaces blancs Les tokens sont utilisés dans l'énumération des signes des langages ou des jeux de mots clés Chaque nom symbolique ne peut être constitué que de caractères autorisés par XML, c'est-à-dire, des lettres, des chiffres, des soulignés (_), des tirets (-), des points (.) et des deux points (:) 25

26 DTD Exemple <?xml version="1.0" standalone="yes"?> <!DOCTYPE gestionnaire [ <!ELEMENT gestionnaire (répertoire)> <!ELEMENT répertoire (#PCDATA)> <!ATTLIST répertoire fichier NMTOKEN #REQUIRED> ]> <gestionnaire> <répertoire fichier="index.htm"> Ce fichier représente la page d'accueil de ce répertoire </répertoire> </gestionnaire> 26

27 DTD Exemple NMTOKENS <?xml version="1.0" standalone="yes"?> <!DOCTYPE France [ <!ELEMENT France (région)> <!ELEMENT région (#PCDATA)> <!ATTLIST région département NMTOKENS #REQUIRED> ]> <France> <région département=" "> Basse-Normandie </région> <région département=" "> Provence-Alpes-Côte d'azur </région> <région département=" "> Région Ile-de-France </région>... </France> 27

28 DTD Élément vide Un élément vide est un élément qui n'a aucun contenu Déclaration : <!ELEMENT elem-vide EMPTY> Exemples : img, hr, br dans HTML Un élément vide peut avoir des attributs Déclaration dans le Body : <img width="100" height="30" src="paysage.jpg" alt="paysage de neige"/> 28

29 DTD Élément vide : Exemple <!ELEMENT contacts (personne+)> <!ELEMENT personne (nom, prénom, datedenaissance?, adresse, +, téléphone*)> <!ELEMENT nom (#PCDATA)> <!ELEMENT prénom (#PCDATA)> <!ELEMENT datedenaissance (#PCDATA)> <!ELEMENT adresse EMPTY> <!ELEMENT (#PCDATA)> <!ELEMENT téléphone (#PCDATA)> <!ATTLIST adresse pays CDATA #REQUIRED> <contacts> <personne> <nom>chazalon</nom> <prénom>grégory</prénom> <datedenaissance> </datedenaissance> <adresse pays="france"/> < >gchazalon@voila.fr</ > < >gchazalon@hotmail.com</ > <téléphone> </téléphone> </personne> <personne> <nom>lemoine</nom> <prénom>joséphine</prénom> <datedenaissance> </datedenaissance> <adresse pays="france"/> < >joe6@voila.fr</ > </personne> </contacts> 29

30 DTD Élément à contenu mixte Contient du texte et des éléments Exemple de déclaration : <!ELEMENT bonjour (#PCDATA cible*)> Exemple d'utilisation : <bonjour> Hello <cible>world</cible> </bonjour> 30

31 Exemples d éléments mixtes L intérêt est de rendre accessible certaines parties du texte 31

32 DTD : attribut Définition <!ATTLIST tag [attribut type #mode [valeur]]* > Définit la liste d attributs pour une balise, comme par exemple les attributs genre et ville pour la balise auteur, et l'attribut ville pour la balise éditeur : <!ATTLIST auteur genre CDATA #REQUIRED ville CDATA #IMPLIED> <!ATTLIST editeur ville CDATA #FIXED "Paris"> 32

33 DTD Déclaration d'attributs Obligatoire : <!ATTLIST elt attr CDATA #REQUIRED> Lors du traitement par le processeur, si un attribut obligatoire n'est pas présent dans un élément, cela provoquera une erreur Optionnel : <!ATTLIST elt attr CDATA #IMPLIED> Avec une valeur fixe : <!ATTLIST elt attr CDATA "valeur"> Lors du traitement par le processeur, si la valeur d'un attribut à valeur fixe est différente de la valeur qui lui a été fixée dans la DTD, cela provoquera une erreur 33

34 DTD Déclaration d'attributs identificateurs Type ID Permet d'associer à un élément un identificateur unique Exemple : chaque produit dans un magasin doit avoir un code unique Déclaration : <!ATTLIST elt attr ID> Soit pour le magasin : <!ATTLIST produit code ID> Cette valeur doit être évidemment unique. Dans le cas contraire, le processeur XML renverra une erreur d'analyse lorsqu'il rencontrera un second identificateur identique Ceci permet d éviter de dupliquer des éléments 34

35 DTD Déclaration d'attributs identificateurs Exemple : magasin.xml <!DOCTYPE magasin [ <!ELEMENT magasin (service+)> <!ELEMENT service (produit*)> <!ATTLIST service code ID #REQUIRED> <!ELEMENT produit (#PCDATA)> <!ATTLIST produit code ID #REQUIRED> ]> <magasin> <service code="a001"> <produit code="de205"> Soupe </produit> <produit code="tm206"> Condiment </produit> <produit code="kj227"> Conserve </produit> </service> <service code="a003"> <produit code="ou152"> Lessive </produit> <produit code="ah070"> Essuie-tout </produit> </service> </magasin> On vérifie que service et produit sont accompagnés chacun d un attribut code dont la valeur est à chaque fois différente 35

36 DTD Déclaration d'attributs identificateurs Question : comment indiquer qu un produit est associé à différents services? Est-ce que cette solution est valide? <!DOCTYPE magasin [ <!ELEMENT magasin (service+)> <!ELEMENT service (produit*)> <!ATTLIST service code ID #REQUIRED> <!ELEMENT produit (#PCDATA)> <!ATTLIST produit code ID #REQUIRED> ]> <magasin> <service code="a001"> <produit code="de205"> Soupe </produit> <produit code="tm206"> Condiment </produit> <produit code="kj227"> Conserve </produit> </service> <service code="a003"> <produit code="ou152"> Lessive </produit> <produit code="ah070"> Essuie-tout </produit> <produit code="kj227"> Conserve </produit> </service> </magasin> 36

37 DTD Déclaration d'attributs identificateurs Réponse : Type IDREF : Permet à une valeur d'attribut de faire référence à l'identificateur (ID) d'un autre élément De cette manière, il est possible de relier des éléments entre eux IDREFS permet d'associer plusieurs identificateurs (ID) en les séparant par des espaces blancs dans la valeur d'un attribut Les avantages Évite les répétitions Factorise l information référencée par plusieurs éléments Permet de lier les éléments 37

38 Exemple : magasin-ref.xml mais on ne doit pas répéter un produit à cause du fait qu on lui a associé un ID <?xml version="1.0" encoding="iso "?> <!DOCTYPE magasin[ <!ATTLIST magasin codes_services IDREFS #IMPLIED> <!ELEMENT magasin (service+)> <!ELEMENT service (produit+)> <!ATTLIST service code ID #REQUIRED> <!ELEMENT produit (#PCDATA)> <!ATTLIST produit code ID #REQUIRED code_service IDREF #REQUIRED>]> <magasin codes_services="a001 A003"> <service code="a001"> <produit code="e205" code_service="a001"> Savon </produit > <produit code="e206" code_service="a001"> Essuie-tout </produit > <produit code="e207" code_service="a001"> Serviettes </produit > <produit code="h107" code_service="a003"> Balai</produit > </service> <service code="a003"> <produit code="a115" code_service="a003"> Chiffon </produit> </service> </magasin> 38

39 DTD Déclaration d'attributs identificateurs Autre exemple <?xml version= 1.0?> <!DOCTYPE DOCUMENT [ <!ELEMENT DOCUMENT (P*)> <!ELEMENT P (#PCDATA)> <!ATTLIST P PNUMBER ID #REQUIRED> ]> <DOCUMENT> <P PNUMBER= p1 >The quick brown fox</p> <P PNUMBER= p2 >The quick brown fox</p> </DOCUMENT> 39

40 Exercice Énoncé Proposez un document XML et sa DTD représentant une famille où les enfants "Chelsea" et "David" sont liés à leurs parents "Susan" et "Jack" Représentation à bannir, car il y a répétition de fils et fille <pere>jack <fils>david</fils> <fille> Chelsea </fille> </pere> <mere>jack <fils>david</fils> <fille> Chelsea </fille> </pere> 40

41 DTD : Entité paramètre encore sur la voie de la simplification et la factorisation But : créer des raccourcis Une entité simple permet de remplacer par un nom une portion de texte dans un document <!ENTITY nom "texte de remplacement"> L'entité (i.e. le texte de remplacement) est alors rappelée dans le document par utilisation de &nom Exemple : <!ENTITY magasin "Primevère"> définit une entité magasin correspondant à la chaîne de caractères "Primevère" le document XML <message>bienvenu au &magasin</message> sera compris par l'analyseur comme : <message>bienvenu au Primevère</message> 41

42 DTD : Entité paramètre Exemple <?xml version="1.0" standalone="yes"?> <!DOCTYPE collection [ <!ENTITY image SYSTEM " <!ENTITY image2 SYSTEM " <!ENTITY image3 SYSTEM " <!ENTITY image4 SYSTEM " <!ENTITY imagen SYSTEM " <!ELEMENT album EMPTY> <!ATTLIST album source ENTITIES #REQUIRED> <!ELEMENT collection (album)> ]> <collection> <album source="image image2 image3 image4 imagen"/> </collection> 42

43 DTD : Entité paramètre Exemple <?xml version="1.0" standalone="yes"?> <!DOCTYPE site [ <!ENTITY fichier SYSTEM "fichier.zip"> <!ELEMENT téléchargement (#PCDATA)> <!ATTLIST téléchargement source ENTITY #REQUIRED> <!ELEMENT site (téléchargement)> ]> <site> <téléchargement source="fichier"> Cliquez ici pour télécharger le fichier </téléchargement> </site> 43

44 TD1 TD1-Enonce-XML Exercice 1 Exercice 2