A.

Belad
Technologie du Web
Structuration de documents (20h)
HTML XML
Cration dapplication Web (20h)
J avaScript PHP
A. Belad
Objectif
Crer une application Web
Ce sera votre projet
Agenda lectronique avec carnet dadresses
Avec une interface Web interactive (dynamique)
Rentrer des donnes : noms, adresses, RDV, par catgorie,
secteur, etc.
Faire des affichages de contacts par nom, groupe, secteur
dactivit,
Faire des affichages de planning, par crneau horaire, jour,
semaine, etc.
A. Belad
Objectif
A. Belad
Objectif
Les points importants
1. Rflchir sur lorganisation des donnes
Cours sur XML :
Reprsentation, lien, slection, interrogation, affichage,
transformation
2. Rflchir sur linterface et sur linteraction avec elles
Cours sur PHP
3. Rflchir sur larchitecture
Client (navigateur) serveur (calcul, donnes)
PHP - MySQL
A. Belad
XML
Introduction et concepts
6
A. Belad
Introduction
Aujourdhui
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 complter, les communiquer
dautres personnes
entre diffrents outils
les changer sur le Web
Les interroger
7
A. Belad
Introduction
Les documents balises offrent ces possibilits
Historiquement, on trouve :
SGML
Standard Generalized Markup Language
Cr par IBM, pour la circulation de ses documents
Permet de baliser plusieurs types de documents
Cest un langage de balisage gnral
HTML
Hypertext Markup Language
Application de SGML au Web, ayant peu de tag
XML
eXtensible Markup Language
Version plus lgre que SGML
8
A. Belad
Introduction
Tous ces langages essaient de reprsenter le document
par ses structures
Un exemple de document balis :
<book>
<title>XML l angage et appl i cat i ons</title>
<author>
<firstname>Al ai n</firstname>
<surname>Mi char d</surname>
</author>
. . .
<p>Ces der ni r es annes ont vu l ' ouver t ur e des
syst mes d' i nf or mat i on l ' I nt er net .
</p>
. . .
</book>
9
A. Belad
Pour les documents, ces langages
proposent un dcoupage hirarchique
Structure darbre pour la
structure logique
<book>
<title>XML l angage et
appl i cat i ons</title>
<author>
<firstname>Al ai n</firstname>
<surname>Mi char d</surname>
</author>
<chapter>
<title>I nt r oduct i on</title>
<para> bl a bl a bl a </para>
</chapter>
. . .
</book>
book
title
author
title para para
chapter chapter
surname
firstname
para
10
A. Belad
XML
Exemple : crer un portail multimdia pour dcrire lArt nouveau
Nancy
11
A. Belad
La galaxie XML :
les standards de base qui s'appuient sur XML
Xpath
pour la recherche dlments
XSL
pour la transformation et
laffichage
XQuery
pour linterrogation
DOM
pour la programmation
XML
RDF
XSc hema
XQuer y
SAX
SOAP
DOM
XSL
ebXML
12
A. Belad
Structure d'un document XML
Un document XML
a la structure suivante
Prologue
lment racine
Arbre d'lments ou structure
Le prologue
peut contenir :
une dclaration XML
des instructions de traitement
une DTD
Prologue
Arbre dlments
(structure du
document)
13
A. Belad
Structure d'un document XML
Exemple
<!-- Prologue -->
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<!-- lment racine -->
<biblio>
<!-- Premier enfant -->
<livre>
<!-- lment enfant titre -->
<titre>Les Misrables</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>
14
A. Belad
Document XML
Le prologue
La dclaration XML
Indique au processeur qui va traiter le document :
Version du langage : 1.0 (la plus rcente)
Encoding :
jeu de codage de caractres utilis dans le document. Le jeu de
caractres standard pour la France est le ISO-8859-1
Par dfaut, l'attribut encoding a la valeur UTF-8 (Unicode)
Standalone
Si Standalone = 'yes', le processeur considre que toutes les
dclarations ncessaires au traitement du document sont incluses
dans le document courant (le document est autonome et ne
requiert aucune autre donne externe)
<?xml version="1.0" encoding=iso-8859-1 standalone=yes?>
15
A. Belad
Document XML
Les attributs
Tous les lments peuvent contenir un ou plusieurs attributs
Un attribut est compos d'un nom et d'une valeur
Syntaxe :
<Nom-elemattribut
1
, attribut
2
, >
Syntaxe dun attribut
attribut
i
: nom="valeur"
Exemple :
<instrument type="vent">trompette</instrument>
16
A. Belad
Validit des documents
Pour tre utilisable par les diffrentes applications, un
document XML doit tre
bien form
Balises correctement imbriques
Parsable et manipulable
Pas ncessairement valide par rapport la DTD
valide
Bien form +
Conforme une DTD (ou un schma)
Logiciels de validation
Cooktop, XmlSpy, logiciels en ligne
17
A. Belad
DTD
DTD interne
Dclaration
<!DOCTYPE elt-racine dclarations>
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>
18
A. Belad
DTD
Validation
Appeler Cooktop ou chercher un validateur en ligne
19
A. Belad
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)>
20
A. Belad
DTD
Validation sous Cooktop
21
A. Belad
DTD
Dclaration d'lment
Dfinition
Chaque lment du document doit tre dfini par une
commande du type
<!ELEMENT nom (contenu) >
o nomest le nom de l'lment (balise) et
o contenu dcrit :
soit la structure de llment sil est compos
soit #PCDATA si cest une feuille
Exemple
<!ELEMENT livre (auteur, diteur)>
dfinit un lment livre compos d'une squence d'lments
auteur et diteur
22
A. Belad
DTD
Forme du contenu
Notations
(a, b) squence
(a|b) liste de choix
a? lment optionnel [0,1]
a* lment rptitif [0,N]
a+ lment rptitif [1,N]
Exemples
(nom, prenom, rue, ville)
(oui|non)
(nom, prenom?, rue, ville)
(produit*, client)
(produit*, vendeur+)
23
A. Belad
DTD
Exemple
annuaire.xml
<?xml version="1.0" encoding="ISO-
8859-1"?>
<!DOCTYPE annuaire SYSTEM
"annuaire.dtd">
<annuaire>
<personne type="tudiant">
<nom>HEUTE</nom>
<prenom>Thomas</prenom>
<email>webmaster@xmlfacile.com
</email>
</personne>
<personne type="chanteur">
<nom>CANTAT</nom>
<prenom>Bertrand</prenom>
<email>noir@desir.fr</email>
</personne>
</annuaire>
annuaire.dtd
<!ELEMENT annuaire
(personne*)>
<!ELEMENT personne
(nom,prenom,email+)>
<!ATTLIST personne type
(tudiant | professeur | chanteur |
musicien) "tudiant">
<!ELEMENT nom (#PCDATA)>
<!ELEMENT prenom
(#PCDATA)>
<!ELEMENT email (#PCDATA)>
24
A. Belad
DTD
lments fils dans le dsordre
Pour que les lments fils puissent tre entrs dans n'importe quel
ordre il faut utiliser le format suivant dans la dclaration :
<!ELEMENT exemple (premier | second | troisime)*> au lieu de
<!ELEMENT exemple (premier*, second*, troisime*)>
Si on ne met pas d'toile aprs la parenthse, c'est l'un des trois
lments
si on met un + c'est au moins un des trois lments, et si on emploie
la virgule au lieu de | alors est attendue une (plusieurs) squence(s)
obligatoirement dans l'ordre de la dclaration
25
A. Belad
DTD
lment NMTOKEN, NMTOKENS
NMTOKEN permet d'affecter un nom symbolique l'attribut tel
qu'un format de date, un format de fichier ou encore une
abrviation
NMTOKENS offre la possibilit la valeur de l'attribut de
comporter plusieurs noms symboliques spars par des
espaces blancs
Les tokens sont utiliss dans l'numration des signes des
langages ou des jeux de mots cls
Chaque nom symbolique ne peut tre constitu que de
caractres autoriss par XML, c'est--dire, des lettres, des
chiffres, des souligns (_), des tirets (-), des points (.) et des
deux points (:)
26
A. Belad
DTD
Exemple
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE gestionnaire [
<!ELEMENT gestionnaire (rpertoire)>
<!ELEMENT rpertoire (#PCDATA)>
<!ATTLIST rpertoire fichier NMTOKEN #REQUIRED>
]>
<gestionnaire>
<rpertoire fichier="index.htm">
Ce fichier reprsente la page d'accueil de ce rpertoire
</rpertoire>
</gestionnaire>
27
A. Belad
DTD
Exemple NMTOKENS
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE France [
<!ELEMENT France (rgion)>
<!ELEMENT rgion (#PCDATA)>
<!ATTLIST rgion dpartement NMTOKENS #REQUIRED>
]>
<France>
<rgion dpartement="14 50 61"> Basse-Normandie </rgion>
<rgion dpartement="04 05 06 13 83 84"> Provence-Alpes-Cte
d'Azur </rgion>
<rgion dpartement="75 77 78 91 92 93 94 95"> Rgion Ile-de-France
</rgion> ...
</France>
28
A. Belad
DTD
lment vide
Un lment vide est un lment qui n'a aucun contenu
Dclaration :
<!ELEMENT elem-vide EMPTY>
Exemples :
img, hr, br dans HTML
Un lment vide peut avoir des attributs
Dclaration dans le Body :
<img width="100" height="30" src="paysage.jpg" alt="Paysage de
neige"/>
29
A. Belad
DTD
lment vide : Exemple
<!ELEMENT contacts (personne+)>
<!ELEMENT personne (nom, prnom,
dateDeNaissance?, adresse, email+,
tlphone*)>
<!ELEMENT nom (#PCDATA)>
<!ELEMENT prnom(#PCDATA)>
<!ELEMENT dateDeNaissance (#PCDATA)>
<!ELEMENT adresse EMPTY>
<!ELEMENT email (#PCDATA)>
<!ELEMENT tlphone (#PCDATA)>
<!ATTLIST adresse pays CDATA
#REQUIRED>
<contacts>
<personne>
<nom>Chazalon</nom>
<prnom>Grgory</prnom>
<dateDeNaissance>1977-07-09
</dateDeNaissance>
<adresse pays="France"/>
<email>gchazalon@voila.fr</email>
<email>gchazalon@hotmail.com</email>
<tlphone>01 23 45 67 89</tlphone>
</personne>
<personne>
<nom>Lemoine</nom>
<prnom>J osphine</prnom>
<dateDeNaissance>1977-01-06
</dateDeNaissance>
<adresse pays="France"/>
<email>joe6@voila.fr</email>
</personne>
</contacts>
30
A. Belad
DTD
lment contenu mixte
Contient du texte et des lments
Exemple de dclaration :
<!ELEMENT bonjour (#PCDATA | cible*)>
Exemple d'utilisation :
<bonjour>
Hello
<cible>World</cible>
</bonjour>
31
A. Belad
Exemples dlments mixtes
Lintrt est de rendre accessible certaines parties du texte
32
A. Belad
DTD : attribut
Dfinition
<!ATTLIST tag [attribut type #mode [valeur]]* >
Dfinit la liste dattributs 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">
33
A. Belad
DTD
Dclaration d'attributs
Obligatoire :
<!ATTLIST elt attr CDATA #REQUIRED>
Lors du traitement par le processeur, si un attribut obligatoire
n'est pas prsent dans un lment, 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 diffrente de la valeur qui lui a t fixe dans la
DTD, cela provoquera une erreur
34
A. Belad
DTD
Dclaration d'attributs identificateurs
Type ID
Permet d'associer un lment un identificateur unique
Exemple :
chaque produit dans un magasin doit avoir un code unique
Dclaration :
<!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 dviter de dupliquer des lments
35
A. Belad
DTD
Dclaration 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="KJ 227"> Conserve </produit>
</service>
<service code="A003">
<produit code="OU152"> Lessive </produit>
<produit code="AH070"> Essuie-tout </produit>
</service>
</magasin>
On vrifie que service et produit
sont accompagns chacun dun
attribut code dont la valeur est
chaque fois diffrente
36
A. Belad
DTD
Dclaration d'attributs identificateurs
Question : comment indiquer quun produit est associ diffrents
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="KJ 227">Conserve </produit>
</service>
<service code="A003">
<produit code="OU152">Lessive </produit>
<produit code="AH070">Essuie-tout </produit>
<produit code="KJ 227">Conserve </produit>
</service>
</magasin>
37
A. Belad
DTD
Dclaration d'attributs identificateurs
Rponse : Type IDREF :
Permet une valeur d'attribut de faire rfrence l'identificateur
(ID) d'un autre lment
De cette manire, il est possible de relier des lments entre
eux
IDREFS permet d'associer plusieurs identificateurs (ID) en les
sparant par des espaces blancs dans la valeur d'un attribut
Les avantages
vite les rptitions
Factorise linformation rfrence par plusieurs lments
Permet de lier les lments
38
A. Belad
Exemple : magasin-ref.xml
mais on ne doit pas rpter un produit cause du fait quon lui a associ un ID
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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>
39
A. Belad
DTD
Dclaration 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>
40
A. Belad
Exercice
nonc
Proposez un document XML et sa DTD reprsentant une
famille o les enfants "Chelsea" et "David" sont lis leurs
parents "Susan" et "J ack"
Reprsentation bannir, car il y a rptition de fils et fille
<pere>J ack
<fils>David</fils>
<fille> Chelsea </fille>
</pere>
<mere>J ack
<fils>David</fils>
<fille> Chelsea </fille>
</pere>
41
A. Belad
DTD : Entit paramtre
encore sur la voie de la simplification et la factorisation
But : crer 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 rappele dans le
document par utilisation de &nom
Exemple :
<!ENTITY magasin "Primevre">
dfinit une entit magasin correspondant la chane de
caractres "Primevre"
le document XML
<message>Bienvenu au &magasin</message>
sera compris par l'analyseur comme :
<message>Bienvenu au Primevre</message>
42
A. Belad
DTD : Entit paramtre
Exemple
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE collection [
<!ENTITY image SYSTEM "http://www.monsite.com/image.gif">
<!ENTITY image2 SYSTEM "http://www.monsite.com/image2.gif">
<!ENTITY image3 SYSTEM "http://www.monsite.com/image3.gif">
<!ENTITY image4 SYSTEM "http://www.monsite.com/image4.gif">
<!ENTITY imageN SYSTEM "http://www.monsite.com/imageN.gif">
<!ELEMENT album EMPTY>
<!ATTLIST album source ENTITIES #REQUIRED>
<!ELEMENT collection (album)> ]>
<collection>
<album source="image image2 image3 image4 imageN"/>
</collection>
43
A. Belad
DTD : Entit paramtre
Exemple
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE site [
<!ENTITY fichier SYSTEM "fichier.zip">
<!ELEMENT tlchargement (#PCDATA)>
<!ATTLIST tlchargement source ENTITY #REQUIRED>
<!ELEMENT site (tlchargement)>
]>
<site>
<tlchargement source="fichier"> Cliquez ici pour tlcharger le
fichier
</tlchargement>
</site>
A. Belad
TD1
TD1-Enonce-XML
Exercice 1
Exercice 2