D´ eveloppement Web - XML, DOM, XHTML D´ eveloppement Web - XML, DOM, XHTML Jean-Michel Richer [email protected] http://www.info.univ-angers.fr/pub/richer 2009 1 / 87
Developpement Web - XML, DOM, XHTML
Developpement Web - XML, DOM, XHTML
Jean-Michel [email protected]
http://www.info.univ-angers.fr/pub/richer
2009
1 / 87
Developpement Web - XML, DOM, XHTML
Plan
Plan
1 Rappels SGML, XML, XSL
2 Grammaire et DTD
3 Manipuler des documents XML
4 XHTML
5 DOM et Javascript
2 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que SGML ?
Definition (SGML - Standard Generalized Markup Language)
• langage de description de langages a balises
• norme ISO 8879 :1986
• utilise par les professionels de l’industrie de ladocumentation et de l’edition
• assez complexe
• separation fond / forme
3 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que SGML ?
Definition (SGML - Standard Generalized Markup Language)
• langage de description de langages a balises
• norme ISO 8879 :1986
• utilise par les professionels de l’industrie de ladocumentation et de l’edition
• assez complexe
• separation fond / forme
4 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que SGML ?
Definition (SGML - Standard Generalized Markup Language)
• langage de description de langages a balises
• norme ISO 8879 :1986
• utilise par les professionels de l’industrie de ladocumentation et de l’edition
• assez complexe
• separation fond / forme
5 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que SGML ?
Definition (SGML - Standard Generalized Markup Language)
• langage de description de langages a balises
• norme ISO 8879 :1986
• utilise par les professionels de l’industrie de ladocumentation et de l’edition
• assez complexe
• separation fond / forme
6 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que SGML ?
Definition (SGML - Standard Generalized Markup Language)
• langage de description de langages a balises
• norme ISO 8879 :1986
• utilise par les professionels de l’industrie de ladocumentation et de l’edition
• assez complexe
• separation fond / forme
7 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que XML ?
Definition (XML - eXtensible Markup Language )
• issu de SGML
• standard qui permet de representer l’information demaniere structuree de facon a introduire une certainesemantique.
• repose sur un langage de balises non predefinies
• facilite l’echange d’information entre systemesheterogenes
8 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que XML ?
Definition (XML - eXtensible Markup Language )
• issu de SGML
• standard qui permet de representer l’information demaniere structuree de facon a introduire une certainesemantique.
• repose sur un langage de balises non predefinies
• facilite l’echange d’information entre systemesheterogenes
9 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que XML ?
Definition (XML - eXtensible Markup Language )
• issu de SGML
• standard qui permet de representer l’information demaniere structuree de facon a introduire une certainesemantique.
• repose sur un langage de balises non predefinies
• facilite l’echange d’information entre systemesheterogenes
10 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que XML ?
Definition (XML - eXtensible Markup Language )
• issu de SGML
• standard qui permet de representer l’information demaniere structuree de facon a introduire une certainesemantique.
• repose sur un langage de balises non predefinies
• facilite l’echange d’information entre systemesheterogenes
11 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Avantages de XML
Avantages de XML
• separation du contenu et de la forme
• extensible
• donnees et meta-donnees
• supporte par les applications Web
• fonctions de recherche et transformation
• lie a SOAP (Simple Object Access Protocol) pourl’invocation de methodes d’objets distants
12 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Avantages de XML
Avantages de XML
• separation du contenu et de la forme
• extensible
• donnees et meta-donnees
• supporte par les applications Web
• fonctions de recherche et transformation
• lie a SOAP (Simple Object Access Protocol) pourl’invocation de methodes d’objets distants
13 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Avantages de XML
Avantages de XML
• separation du contenu et de la forme
• extensible
• donnees et meta-donnees
• supporte par les applications Web
• fonctions de recherche et transformation
• lie a SOAP (Simple Object Access Protocol) pourl’invocation de methodes d’objets distants
14 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Avantages de XML
Avantages de XML
• separation du contenu et de la forme
• extensible
• donnees et meta-donnees
• supporte par les applications Web
• fonctions de recherche et transformation
• lie a SOAP (Simple Object Access Protocol) pourl’invocation de methodes d’objets distants
15 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Avantages de XML
Avantages de XML
• separation du contenu et de la forme
• extensible
• donnees et meta-donnees
• supporte par les applications Web
• fonctions de recherche et transformation
• lie a SOAP (Simple Object Access Protocol) pourl’invocation de methodes d’objets distants
16 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Avantages de XML
Avantages de XML
• separation du contenu et de la forme
• extensible
• donnees et meta-donnees
• supporte par les applications Web
• fonctions de recherche et transformation
• lie a SOAP (Simple Object Access Protocol) pourl’invocation de methodes d’objets distants
17 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Inconvenients de XML
Inconvenients de XML• verbeux (augmentation de la taille des fichiers)
• consommateur de ressources (representation en memoire,processeur)
18 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Inconvenients de XML
Inconvenients de XML• verbeux (augmentation de la taille des fichiers)
• consommateur de ressources (representation en memoire,processeur)
19 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Qu’est ce que XSL ?
Definition (XSL - eXtensible Stylesheet Language)
• langage de feuilles de styles
• descendant de DSSL langage de mise en forme de SGML
• concu pour definir la mise en forme des documents XML• XSL est divise en :
• XSLT un langage de transformation de structure dedocument
• XSL-FO pour la mise en forme (Formatting Objects)
20 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Exemple de fichier XML
bibliotheque.xml
1 < ?xml version="1.0" encoding="utf-8" ?>
2 < !DOCTYPE bibliotheque SYSTEM "bibliotheque.dtd" >
3 < ?xml-stylesheet type="text/xsl" href="bibliotheque.xsl" ?>
4 <bibliotheque>
5 <livre>
6 <titre>Apprendre XML en 10 mois </titre>
7 <liste auteurs>
8 <auteur nom="Escargot" prenom="Jean" />9 <auteur nom="Snail" prenom="Brad" />
10 </liste auteurs>
11 <prix>20</prix>
12 </livre>
1314 <livre>
15 <titre>Learn Java in 10 seconds </titre>
16 <liste auteurs>
17 <auteur nom="Fast" prenom="John" />18 </liste auteurs>
19 <prix monnaie="dollars" >25</prix>
20 </livre>
2122 </bibliotheque>
21 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Description du fichier XML
Explication
Sur l’exemple precedent on decrit des livre qui composentune bibliotheque . Chaque livre se compose :
• d’un titre
• d’une liste d’auteur
• d’un prix pour lequel on peut specifier l’attribut monnaie
il est possible de decrire plusieurs livres en les placant entre lesbalises <livre> et </livre>
22 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Exemple de fichier XSL - Liste
bibliotheque.xsl
1 < ?xml version="1.0" encoding="utf-8" ?>
2 <xsl :stylesheet xmlns :xsl="http ://www.w3.org/1999/XSL/Transform" version="1.0" >
3 <xsl :output method="html" />4 <xsl :template match="/" >
5 <html>6 <body bgcolor="#FFFFFF" >
7 <ul type="square" >
8 <xsl :for-each select="bibliotheque/livre" >
9 <li>10 <xsl :value-of select="titre" />, <br />11 <xsl :for-each select="liste auteurs/auteur" >
12 <i>13 <xsl :value-of select="./@prenom" /><xsl :text></xsl :text>14 <xsl :value-of select="./@nom" />15 </i>,16 </xsl :for-each><br />17 <xsl :text>prix </xsl :text><xsl :value-of select="prix" />18 <xsl :text></xsl :text>19 <xsl :value-of select="prix/@monnaie" />20 </li>21 </xsl :for-each>
22 </ul>23 </body>
24 </html>25 </xsl :template>
26 </xsl :stylesheet>
23 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Rendu sous forme de liste
24 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Exemple de fichier XSL - Table
bibliotheque table.xsl
1 < ?xml version="1.0" encoding="utf-8" ?>
2 <xsl :stylesheet xmlns :xsl="http ://www.w3.org/1999/XSL/Transform" version="1.0" >
3 <xsl :output method="html" />4 <xsl :template match="/" >
5 <html>6 <body>
7 <table border="1" cellpadding="4" >
8 <xsl :for-each select="bibliotheque/livre" >
9 <tr valign="top" >
10 <td><xsl :value-of select="titre" /></td>
11 <td>
12 <xsl :for-each select="liste auteurs/auteur" >
13 <i>14 <xsl :value-of select="./@prenom" /><xsl :text></xsl :text>15 <xsl :value-of select="./@nom" />16 </i><br />17 </xsl :for-each>
18 </td>
19 <td><xsl :text>prix </xsl :text><xsl :value-of select="prix" />20 <xsl :text></xsl :text><xsl :value-of select="prix/@monnaie" />21 </td>
22 </tr>23 </xsl :for-each>
24 </table>
25 </body>
26 </html>27 </xsl :template>
28 </xsl :stylesheet> 25 / 87
Developpement Web - XML, DOM, XHTML
Rappels SGML, XML, XSL
Rendu sous forme de table
26 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Grammaire DTD
Grammaire DTD
27 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Prologue du document
bibliotheque.xml
<?xml version="1.0" encoding="utf-8" ?>
Apercu
La premiere ligne indique :
• la version du langage utilise
• l’encodage des caractere (utf-8 ou ISO-8859-1 )
28 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Declaration du type de document
bibliotheque.xml
<!DOCTYPE bibliotheque SYSTEM "bibliotheque.dtd">
La declaration du type de document (Document TypeDeclaration) indique :
• la grammaire (DTD) a laquelle doit se conformer ledocument
• le nom de la premiere balise : bibliotheque
29 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
DTD
Un fichier XML doit se conformer a une grammaire :
Definition (Document Type Definition)
Une DTD (Document Type Definition) est une grammaire codeeau format XML qui permet de decrire la structure generale alaquelle doit se conformer un document XML.
Attention !
Ne pas confondre Document Type Definition (DTD) de laDocument Type Declaration (DOCTYPE)
30 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
DTD
Un fichier XML doit se conformer a une grammaire :
Definition (Document Type Definition)
Une DTD (Document Type Definition) est une grammaire codeeau format XML qui permet de decrire la structure generale alaquelle doit se conformer un document XML.
Attention !
Ne pas confondre Document Type Definition (DTD) de laDocument Type Declaration (DOCTYPE)
31 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Exemple de DTD
bibliotheque.dtd
1 < ?xml version="1.0" encoding="utf-8" ?>
23 < !ELEMENT bibliotheque (livre+) >
4 < !ELEMENT livre (titre, liste auteurs, prix ?) >
5 < !ELEMENT titre (#PCDATA) >
6 < !ELEMENT liste auteurs (auteur+) >
7 < !ELEMENT auteur EMPTY>
8 < !ATTLIST auteur nom CDATA #REQUIRED >
9 < !ATTLIST auteur prenom CDATA #REQUIRED >
10 < !ELEMENT prix (#PCDATA) >
11 < !ATTLIST prix monnaie CDATA #IMPLIED>
1213
32 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Structure de la DTD
bibliotheque.dtd
<!ELEMENT bibliotheque (livre+) >
La premiere ligne declare que la balise bibliothequecontiendra un ensemble de balises livre .On peut specifier :
• + : de 1 a plusieurs
• * : de 0 a plusieurs
• ? : de 0 a 1 (element optionnel)
• sans indication, il s’agit d’une seule occurrence
33 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Structure de la DTD
bibliotheque.dtd
<!ELEMENT livre (titre, liste_auteurs, prix?) >
de la meme maniere, une balise livre contiendra :
• une balise titre
• suivie d’une balise liste auteurs
• suivie eventuellement d’une balise prix
Remarque : a | b signifie a ou (exclusif) b
34 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Structure de la DTD
bibliotheque.dtd
<!ELEMENT titre (#PCDATA) >
un titre sera compose d’une chaıne de caracteres (ParsedCharacter DATA) sans symboles <,> . On peut egalementutiliser les symboles :
• CDATA: donnees brutes entre guillemets non anamysees
• MIXED : texte et elements < et >
• ANY: n’importe quoi
35 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Structure de la DTD
bibliotheque.dtd<!ELEMENT auteur EMPTY><!ATTLIST auteur nom CDATA #REQUIRED ><!ATTLIST auteur prenom CDATA #REQUIRED >
un auteur ne contient pas d’information( EMPTY) mais utilisedeux attributs nomet prenom composes de caracteresalphanumeriques. On peut indiquer :
• #REQUIRED: que l’attribut doit etre defini explicitement
• #IMPLIED : optionnel
• #DEFAULT: possede une valeur par defaut definie par unevaleur entre guillemets
36 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Entite simple
Definition (Entite)
nom de substitution pour un morceau texte (equivalent du#define en C)
utilisation d’une entite simple
<!ENTITY progc "programmation en langage C"><keyword> &proc </keyword>
37 / 87
Developpement Web - XML, DOM, XHTML
Grammaire et DTD
Entite parametre
Definition (Entite parametre)
entite qui peut etre reutilisee dans la DTD
entite parametre
<!ENTITY % string "(#PCDATA)"><!ELEMENT titre %string; >
38 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Manipulation des documents XML
Manipuler lesDocuments XML
39 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Manipuler XML : DOM et SAX
DOM et SAX
il existe 2 principales interfaces de manipulation pour la lecturedes documents XML :
• DOM (Document Object Model) basee sur unerepresentation hierarchique
• SAX (Simple API for XML) basee sur des declencheursd’action
40 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Le DOM
Definition (Document Object Model)
Le DOM est l’interface de programmatiion (API) qui permet audeveloppeur web d’acceder et de manipuler le contenu d’undocument XML. Applique aux pages web, il permetnotamment :
• une representation structuree et orientee objet deselements et du contenu
• la modification des proprietes de ces objets parl’intermediaire de methodes
• l’ajout et la suppression d’objets
• la gestion des evenements du navigateur
41 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Proprietes de l’API DOM
Caracteristiques de DOM
1 recommandation du W3C
2 specification generale qui donne lieu a de multiplesimplantations
3 pas vraiment oriente objet (ou mal concu)
4 construit une representation en memoire du documentsous forme d’arbre
5 adaptee aux petits fichiers et traitement du documententier
42 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Les normes du DOM
Versions du DOM
Il existe plusieurs evolutions du DOM standardisees par leW3C :
1 DOM Level 1 (Core + HTML) depuis 1998
2 DOM Level 2 (Core + Event + Style + Views + Traversaleand range) depuis 2000
3 DOM Level 3 (En cours de finalisation)
43 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
L’arbre d’elements
Arbre des elements• de part sa structure, un document XML est represente
sous forme arborescente
• cette arborescence possede : une racine, des noeuds, desfeuilles
Note• visualiation structure du document sous Firefox (+DOM
Inspector)
• ou xmltreenav (+xmldiff)
44 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
L’arbre d’elements
Arbre des elements• de part sa structure, un document XML est represente
sous forme arborescente
• cette arborescence possede : une racine, des noeuds, desfeuilles
Note• visualiation structure du document sous Firefox (+DOM
Inspector)
• ou xmltreenav (+xmldiff)
45 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Diagramme UML de l’API DOM
DOMEntity
DomCharacterData
DomComment
DOMDocument� encoding : string� xmlVersion : string+ createElement(name : string, value : string)+ createTextNode(content : string)+ getElementById(elementId : string)+ getElementsByTagName(name : string) : DOMNodeList
DOMElement
DOMText
DOMNamedNodeMap
+ getNamedItem(item : string) : DOMNode+ item(index : int) : DOMNode
DOMNodeList� length : int+ item(index : int) : DOMNode
DomNode+ nodeName : string+ NodeValue : string+ parentNode : DOMNode+ text_content : string+ childNodes : DOMNodeList+ appendChild(newnode : DOMNode) : DOMNode+ hasChildNodes() : bool+ hasAttributes() : bool
46 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Noeud DOM
DOMNode
Les attributs sont :
• nodeName (string) nom du noeud
• nodeType (int) type du noeud
• nodeValue (string) valeur
• childNodes (DOMNodeList) liste des enfants
• parentNode (DOMNode) noeud parent
• firstChild, lastChild (DOMNode)
• previousSibling, nextSibling (DOMNode)
47 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
L’API SAX
Caracteristiques de SAX
1 basee sur des triggers qui se declenchent lors de la lecturede balises
2 adaptee au traitement local de gros fichiers
3 adaptee a des langages compiles comme C++, Java
48 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Manipuler des docucments XML sous PHP
DOM sous PHP• a partir de PHP 5 on peut utiliser l’API DOM
• ou SimpleXML (tres simple)
• l’analyseur syntaxique XML (sorte de SAX)
• dans les versions anterieures (PHP 4) on utilisait DOMXML
49 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Creer un document XML avec DOM sous PHP
On precise :
• la version
• l’encodage des caracteres
DOMDocument
1 $dom = new DOMDocument(’1.0’ , ’iso-8859-1’ ) ;2 echo $dom- >saveXML() ;
50 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Charger un document XML/HTML
Chargement d’un document XML
• load(file) pour un fichier XML
• loadHTMLFile(file) pour un fichier HTML
• loadXML(string) a partir d’une chaıne
• loadHTML(string) a partir d’une chaıne
• ces fonctions retournent true en cas de succes et false encas d’erreur
51 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple de chargement
exemple de chargement
1 $dom=new DOMDocument() ;2 if ( $dom- >load( ’bibliotheque.xml’ )==false) {3 die( "error load" ) ;4 }5 if ( $dom- >loadXML( ’ <personnes ></personnes >’ )==false) {6 die( "error loadXML" ) ;7 }
52 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Valider un document XML par rapport a une DTD
Utilisation de PHP 5 : les erreurs eventuelles seront affichees.La fonction validate retourne true en cas de succes.
xml validator.php
1 error reporting(E WARNING) ;2 $dom=new DomDocument() ;3 $dom- >load( "bibliotheque.xml" ) ;4 if ( $dom- >validate() == true) {5 echo "Document valide \n" ;6 }
53 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Sauvegarder un document XML/HTML
Sauvegarde d’un document XML/HTML
• save(file) pour un fichier XML
• saveHTMLFile(file) pour un fichier HTML
• ces fonctions retournent le nombre d’octets ecrits en casde succes et false en cas d’erreur
• string saveXML(void)
• string saveHTML(void)
• ces fonctions retournent une chaıne XML/HTML en cas desucces et false en cas d’erreur
54 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple de sauvegarde
exemple de sauvegarde
1 $dom=new DOMDocument() ;2 $root =$dom- >createElement( ’bibliotheque’ , ’’ );3 $dom- >appendChild( $root ) ;4 if ( $dom- >save( ’dummy.xml’ )==false) {5 die( "error save" ) ;6 }7 echo $dom- >saveXML() ;
resultat
< ?xml version= "1.0" ?>
<bibliotheque ></bibliotheque >
55 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple de sauvegarde
exemple de sauvegarde
1 $dom=new DOMDocument() ;2 $root =$dom- >createElement( ’bibliotheque’ , ’’ );3 $dom- >appendChild( $root ) ;4 if ( $dom- >save( ’dummy.xml’ )==false) {5 die( "error save" ) ;6 }7 echo $dom- >saveXML() ;
resultat
< ?xml version= "1.0" ?>
<bibliotheque ></bibliotheque >
56 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Creer d’un document XML/HTML
Creation d’un document XML/HTML
les fonctions principales sont :
• DOMElement createElement(string name,string value)
• DOMText createTextNode(string name)
• DOMAttr createAttribute(string name)
• appendChild(DOMNode node)
57 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple de creation
exemple de creation
1 $dom=new DOMDocument(’1.0’ , ’iso-8859-1’ ) ;2 $root element =$dom- >createElement( ’bibliotheque’ , ’’ );3 $dom- >appendChild( $root element ) ;4 $livre =$dom- >createElement( ’livre’ , ’’ );5 $root element - >appendChild( $livre ) ;6 $titre =$dom- >createElement( ’titre’ , ’Apprendre XML’ ) ;7 $livre - >appendChild( $titre ) ;8 $prix =$dom- >createElement( ’prix’ , ’20’ );9 $livre - >appendChild( $prix ) ;
10 $monnaie =$dom- >createAttribute( ’monnaie’ );11 $montant =$dom- >createTextNode( ’euro’ );12 $monnaie - >appendChild( $montant );13 $prix - >appendChild( $monnaie ) ;14 echo $dom- >saveXML() ;
58 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Parcourir un document XML/HTML
Parcours d’un document XML/HTML
les fonctions principales sont :
• DOMElement getElementById(string elementId)
• DOMNodeList getElementsByTagName(stringname)
59 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple de parcours
exemple de parcours
1 function parcours attributes( $node ) {2 if ( ! $node - >hasAttributes()) return ;3 foreach( $node - >attributes as $key => $subnode ) {4 echo " $key=" . $subnode - >nodeValue ;5 }6 }7 function parcours( $node , $nbr ) {8 if ( $node - >hasChildNodes()) {9 foreach( range( 0, $node - >childNodes- >length- 1) as $index ) {
10 $subnode =$node - >childNodes- >item( $index );11 if ( $subnode - >nodeType== 1) {12 foreach( range( 0, 4* $nbr ) as $i ) echo " " ;13 echo "+" . $subnode - >nodeName. " = " . trim( $subnode - >nodeValue) ;14 parcours attributes( $subnode ) ; echo " \n" ;15 parcours( $subnode , $nbr +1);16 }17 }18 }19 }20 $dom=new DOMDocument() ;21 $dom- >load( ’bibliotheque.xml’ ) ;22 $liste =$dom- >getElementsByTagName( ’livre’ );23 foreach( range( 0, $liste - >length- 1) as $ndx livre ) {24 $livre =$liste - >item( $ndx livre ) ;25 echo "livre $ndx livre \n" ;26 parcours( $livre , 1) ;27 }
60 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple de parcours
resultat du parcours
livre 0+titre = Apprendre XML en 10 secondes+liste auteurs =
+auteur = nom=sanpeur prenom=jean+auteur = nom=pitre prenom=brad
+prix = 20 monnaie=eurolivre 1
+titre = Apprendre Java en 10 secondes+liste auteurs =
+auteur = nom=nofear prenom=john+prix = 25 monnaie=euro
61 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Interrogation d’un document avec XPath
Definition (XPath)
il s’agit d’un langage d’interrogation de fichiers XML :/ racine//titre tous les noeuds titre//liste auteurs/auteur tous les noeuds auteur a
l’interieur de liste auteurs//prix[@monnaie] tous les noeuds prix qui
ont un attribut monnaie//prix[@monnaie=’dollars’] tous les noeuds prix qui
ont un attribut monnaieegal a dollars
62 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Parcours avec XPath
exemple de parcours avec DOMXPath
1 $doc = new DOMDocument() ;2 $doc - >load( "bibliotheque.xml" ) ;3 $xpath = new DOMXpath($doc ) ;4 echo "traiter les titres \n" ;5 $elements =$xpath - >query( "//titre" );6 if ( ! is null( $elements )) {7 foreach ( $elements as $element ) {8 echo "= > " . $element - >nodeName. " : " ;9 $nodes = $element - >childNodes ;
10 foreach ( $nodes as $node ) echo $node - >nodeValue. " \n" ;11 }12 }13 echo " \ntraiter les noms des auteurs \n" ;14 $elements = $xpath - >query( "//auteur[@nom]" ) ;15 if ( ! is null( $elements )) {16 foreach ( $elements as $element ) {17 echo "= >" . $element - >nodeName. " " . $element - >getAttribute( "nom" ). " \n" ;18 }19 }20 echo " \ntraiter les noms et prenoms des auteurs \n" ;21 $elements = $xpath - >query( "//auteur" ) ;22 if ( ! is null( $elements )) {23 foreach ( $elements as $element ) {24 echo "= >" . $element - >nodeName. " " . $element - >getAttribute( "nom" ).25 " " . $element - >getAttribute( "prenom" ). " \n" ;26 }27 }
63 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Resultat du parcours avec DOMXPath
Resultat parcours avec DOMXPath
traiter les titres=> titre : Apprendre XML en 10 mois=> titre : Learn Java in 10 secondstraiter les noms des auteurs=>auteur Escargot=>auteur Snail=>auteur Fasttraiter les noms et prenoms des auteurs=>auteur Escargot Jean=>auteur Snail Brad=>auteur Fast John
64 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Utilitaire xpath
Definition (xpath -e query file)
xpath est un utilitaire PERL qui permet de selectionner lesbalises d’un fichier XML. Les options en ligne de commandesont :
• -e query requete a executer
• -q mode silencieux
• -s suffix placer le suffixe (par defaut retour chariot) a lafin de chaque ligne
• -p prefix placer le prefixe (par defaut rien) au debut dechaque ligne
xpath
Sous Ubuntu installer le package libxml-xpath-perl
65 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Utilitaire xpath
Definition (xpath -e query file)
xpath est un utilitaire PERL qui permet de selectionner lesbalises d’un fichier XML. Les options en ligne de commandesont :
• -e query requete a executer
• -q mode silencieux
• -s suffix placer le suffixe (par defaut retour chariot) a lafin de chaque ligne
• -p prefix placer le prefixe (par defaut rien) au debut dechaque ligne
xpath
Sous Ubuntu installer le package libxml-xpath-perl
66 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple d’utilisation de xpath
Exercice
trouver le montant total de tous les livres de la bibliotheque :
• montant des livres en euros
• montant des livres en dollars
67 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple d’utilisation de xpath
Solution
1 # !/bin/sh23 cat bibliotheque.xml |grep -v "ˆ < ?" |grep -v "ˆ <\ ! " >bibliotheque2.xml45 total= ‘xpath -e "//prix" -q bibliotheque2.xml |cut -d’ >’ -f2 |\6 cut -d’ <’ -f1 |awk ’ { sum += $1 } ; END { print sum }’‘7 dollars= ‘xpath -e "//prix[@monnaie=’dollars’]" -q bibliotheque2 .xml |\8 cut -d’ >’ -f2 |cut -d’ <’ -f1 |awk ’ { sum += $1 } ; END { print sum }’‘9
10 echo "total = $total"11 echo "dollars = $dollars"1213 euros= ‘expr $total - $dollars‘1415 echo "euros = $euros"
68 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Utilisation de SimpleXML
Definition (SimpleXML)
L’extension SimpleXML fournit des outils tres simples et facilesa utiliser pour convertir du XML en un objet qui peut etremanipule avec ses proprietes et les iterateurs de tableaux.
69 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Exemple de parcours SimpleXML
exemple de parcours avec SimpleXML
1 $xml =simplexml load file( "bibliotheque.xml" ) ;2 print r( $xml ) ;3 foreach( $xml - >livre as $livre ) {4 echo "------------ \n" ;5 echo "titre : " . $livre - >titre. " \n" ;6 $liste auteurs =$livre - >liste auteurs- >auteur ;7 foreach( $liste auteurs as $auteur ) {8 echo "auteur : " . $auteur [ "prenom" ]. " " . $auteur [ "nom" ]. " \n" ;9 }
10 echo "prix : " . $livre - >prix. " " . $livre - >prix[ "monnaie" ]. " \n" ;11 }
70 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Resultat du parcours avec SimpleXML
resultat (premiere partie)
SimpleXMLElement Object ([livre] = > Array (
[ 0] = > SimpleXMLElement Object ([titre] = > Apprendre XML en 10 mois[liste auteurs] = > SimpleXMLElement Object (
[auteur] = > Array ([ 0] = > SimpleXMLElement Object (
[@attributes] = > Array ([nom] = > Escargot[prenom] = > Jean
))[ 1] = > SimpleXMLElement Object (
[@attributes] = > Array ([nom] = > Snail[prenom] = > Brad
))
))[prix] = > 20
)...
))
71 / 87
Developpement Web - XML, DOM, XHTML
Manipuler des documents XML
Resultat du parcours avec SimpleXML
resultat (deuxieme partie)
------------titre : Apprendre XML en 10 moisauteur : Jean Escargotauteur : Brad Snailprix : 20------------titre : Learn Java in 10 secondsauteur : John Fastprix : 25 dollars
72 / 87
Developpement Web - XML, DOM, XHTML
XHTML
XHTML
XHTML
73 / 87
Developpement Web - XML, DOM, XHTML
XHTML
Interet de HTML
Definition (HTML - HyperText Markup Language)
1 application de SGML
2 cree par Tim Berners-Lee pour le World Wide Web
3 tres facile a apprendre
4 creation de pages HTML possible pour tout le monde
74 / 87
Developpement Web - XML, DOM, XHTML
XHTML
XHTML
Definition (XHTML)
1 mise au format XML de HTML
2 bannir les balises de presentation (comme <b>, <i> ,<u>,<font> )
3 rendu (forme) grace au CSS
4 notion de validite d’un document (XHTML / CSS Validator)
5 controle par javascript (navigateur)
75 / 87
Developpement Web - XML, DOM, XHTML
XHTML
Conventions XHTML
Conventions• les tags XHTML doivent etre ecrits en minuscule
• tous les tags doivent etre fermes <p> </p>
• pour les tags uniques, on utilise / : <br />
• tout document doit debuter par une DTDhttp ://w3schools.com/xhtml/xhtml dtd.asp
• les images doivent definir le tag alt
• tous les caracteres speciaux doivent etre encodes(http ://w3schools.com/tags/ref entities.asp )
• tous les attributs doivent etre entoures de double quotes
76 / 87
Developpement Web - XML, DOM, XHTML
XHTML
Conventions XHTML
Conventions structure et elements de texte• utilisation des <div id=’...’>
• elements de structure du texte :• paragraphe : p• tableaux : table , tr , td• listes : ul , ol , li
• elements de texte : em, strong , blockquote , h1 a h5
77 / 87
Developpement Web - XML, DOM, XHTML
XHTML
Prologue XHTML
Prologue
XHTML reposant sur XML, il est recommande d’utiliser endebut de document la balise :< ?xml version="1.0" encoding="ISO-8859-1"?> .
78 / 87
Developpement Web - XML, DOM, XHTML
XHTML
DTD du Document XHTML
http://www.w3.org/TR/2002/REC-xhtml1-20020801/
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric t.dtd"
XHTML 1.0 Tansitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans itional.dtd"
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN "SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frame set.dtd"
79 / 87
Developpement Web - XML, DOM, XHTML
XHTML
Entete d’un Document XHTML
XHTML 1.0 Strict
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric t.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org /1999/xhtml"><head>
<meta http-equiv="Content-type" content="text/html; ch arset=UTF-8" />...
</head>
80 / 87
Developpement Web - XML, DOM, XHTML
XHTML
Un mot dur l’habillage des tableaux
• balises elementaires :• <table> creation• <caption> legende• <tr> ligne• <th> cellule entete• <td> cellule
• balises complementaires :• <thead> groupe de cellules entete• <tbody> groupe de cellules de contenu• <tfoot> groupe de cellules bas de tableau
<thead> et <tfoot> doivent etre declares avant <tbody>
81 / 87
Developpement Web - XML, DOM, XHTML
DOM et Javascript
DOM et Javascript
DOM et Javascript
82 / 87
Developpement Web - XML, DOM, XHTML
DOM et Javascript
DOM et Javascript
DOM et Javascript
Dans le cadre de Javascript on utilise principalement lesfonctions suivantes pour acceder aux elements du document :
• getElementById(string) : retourne l’unique elementd’identifiant specifie
• getElementsByName(string) : retourne une collectiond’elements de nom specifie
• getElementsByTagName(string) : retourne unecollection d’elements pour la balise donnee
Note
cela suppose que les elements a manipuler sont dotes d’un id
83 / 87
Developpement Web - XML, DOM, XHTML
DOM et Javascript
DOM et Javascript
DOM et Javascript
Dans le cadre de Javascript on utilise principalement lesfonctions suivantes pour acceder aux elements du document :
• getElementById(string) : retourne l’unique elementd’identifiant specifie
• getElementsByName(string) : retourne une collectiond’elements de nom specifie
• getElementsByTagName(string) : retourne unecollection d’elements pour la balise donnee
Note
cela suppose que les elements a manipuler sont dotes d’un id
84 / 87
Developpement Web - XML, DOM, XHTML
DOM et Javascript
Javascript et les evenements du navigateur
evenements du navigateur
On peut associer une fonction javascript lors du declenchementde certains evenements :
• onload : chargement de la page
• onclick , ondblclick
• onfocus , onblur : gain ou perte de focus
• onchange
• onmouseover , onmouseout , onmousemove
• onmouseup , onmousedown
85 / 87
Developpement Web - XML, DOM, XHTML
DOM et Javascript
DOM et Javascript
Exemples
voir les exemples sur le site web :http://www.info.univ-angers.fr/pub/richer
86 / 87
Developpement Web - XML, DOM, XHTML
DOM et Javascript
Fin
Fin
87 / 87