THÈME DE L'EXPOSÉ :

1. GENERALITE SUR XML

2. REALISATION DU PROJET

Les membres du groupe : Chargé du cours :

M. AKANATE Alassani
1. DJEUPISNE OUALOUMI

2. DZOKPE ESSI Manuella

3. DOGBATSE ESSI Justine

4. NOUMATEKPO Yao

5. ATITSOGBE Amavi

Année Scolaire : 2025-2026

SOMMAIRELISTE DES FIGURES....................................................................................................................................
LISTE DES TABLEAUX...............................................................................................................................................................
PARTIE 1 : GENERALITE SUR XML..........................................................................................................................................
PARTIE 1
INTRODUCTION...........................................................................................................................................................................
1. PRINCIPES FONDAMENTAUX DE XML..............................................................................................................................
1.1 INTRODUCTION
Définition de XML...............................................................................................................................................................
AU GENERALITE SUR XML
1.2 XML est un méta-langage.....................................................................................................................................................
1.3 XML est un langage à balises...............................................................................................................................................
1.4 Notion de schéma..................................................................................................................................................................
1.5 PRINCIPES FONDAMENTAUX
Langages standard DE XML
et langages locaux..................................................................................................................................
1.6 Langages XML orientés données.........................................................................................................................................
1.7 Langages XML orientés documents.....................................................................................................................................
1.8 Caractéristiques essentielles de XML.................................................................................................................................
SYNTAXE XML
2. SYNTAXE XML.......................................................................................................................................................................
2.1 Document bien formé.........................................................................................................................................................
2.2 Les balises...........................................................................................................................................................................
2.3 Les éléments.......................................................................................................................................................................
SCHÉMAS XML
2.4 Les attributs.........................................................................................................................................................................
2.5 Structure générale d'un fichier XML..................................................................................................................................
2.6 Commentaires.....................................................................................................................................................................
2.7 MANIPULATIONS
Exemples d'exercices sur XML
la syntaxe...................................................................................................................................
3. SCHÉMAS XML.......................................................................................................................................................................
3.1 Notion de document valide.................................................................................................................................................
PARTI(DTD).....................................................................................................................................
3.2 Document Type Definition 2
3.3 W3C XML Schema............................................................................................................................................................
3.4 RelaxNG.............................................................................................................................................................................
PRESENTATION
4. MANIPULATIONS DU PROJET REALISE
XML.........................................................................................................................................................
4.1 L'arbre du document XML.................................................................................................................................................
4.2 Introduction à XPath...........................................................................................................................................................
4.3 XSL-XSLT..........................................................................................................................................................................
4.4 SAX (Simple API for XML)..............................................................................................................................................
4.5 DOM (Document Object Model)........................................................................................................................................
CONCLUSION..............................................................................................................................................................................
PARTIE 2 : REALISATION DU PROJET............................................................................................................................
INTRODUCTION.........................................................................................................................................................................
CONCLUSION..............................................................................................................................................................................

2
 LISTE DES FIGURES

Figure 1: Le resultat de fichier CSS pour ce document...............................................................................

Figure 2: Resultat du fichier XSLT qui affiche l’étudiant dont le code est égal à «3 »..............................
Figure 3: La moyenne validée.....................................................................................................................
Figure 4: La moyenne non validée..............................................................................................................
Figure 5: La base de données affichant la moyenne de chaque matière......................................................
Figure 6: La moyenne finale de l’UE..........................................................................................................
Figure 7: La base de données affichant la moyenne de chaque matière après modification.......................
Figure 8: La moyenne finale de l’UE après modification...........................................................................

3
 LISTE DES TABLEAUX

Tableau 1: Tableau récapitulatif de la syntaxe XML..................................................................................

Tableau 2: Symboles DTD importants........................................................................................................
Tableau 3:Tableau complèté........................................................................................................................

4
PARTIE 1 : GENERALITE SUR XML

5
 INTRODUCTION

Ce rapport présente l'ensemble des connaissances essentielles à maîtriser concernant le langage

XML (eXtensible Markup Language). Chaque concept est accompagné d'exemples de code pour
faciliter la compréhension.

1. PRINCIPES FONDAMENTAUX DE XML

1.1 Définition de XML

XML signifie eXtensible Markup Language. C'est un méta-langage permettant de définir des
langages à balises. XML est un standard du W3C depuis 1998.

Versions de XML :

• Version 1.0 : version historique et la plus largement utilisée

• Version 1.1 : différences mineures, nécessaire uniquement dans des contextes particuliers

1.2 XML est un méta-langage

Un méta-langage est un langage permettant de définir d'autres langages. XML ne définit pas
directement du contenu, mais permet de créer des langages qui eux-mêmes serviront à décrire des
informations.

Différence fondamentale : XML n'est PAS un langage, c'est un méta-langage. HTML est un
langage. XHTML est un langage XML.

Exemple de balises Lambda :

Xml
<lambda>
<body>
<p>This is an example</p>
</body>
</lambda>

6
Dans cet exemple, le texte est "This is an example", il est balisé avec les informations suivantes :
c'est un paragraphe (balise p) du corps (balise body) d'un document Lambda (balise lambda)

Schéma Lambda en DTD : dtd

<!ELEMENT lambda (body) >

<!ELEMENT body (p+) >
<!ELEMENT p (#PCDATA) >

Ce code exprime formellement le langage Lambda. Il définit que :

• Un élément lambda contient exactement un body

• Un body contient un ou plusieurs p
• Un p contient du texte (#PCDATA)

1.3 XML est un langage à balises

Une balise est un descripteur ajouté au contenu en vue d'un traitement informatique. Un langage à
balises permet d'associer à un contenu des balises explicites pour rendre compte de sa structure.

Les balises se distinguent du contenu en utilisant les caractères <, > et /.

1.4 Notion de schéma

Un schéma permet de définir un langage XML particulier. Il liste les mots du langage
(vocabulaire) et définit leur utilisation (grammaire). On parle aussi de format.

Le schéma permet de :

• Lister les éléments XML autorisés

• Définir l'agencement possible de ces éléments

• Spécifier les attributs de chaque élément

1.5 Langages standard et langages locaux

Langage standard : Un langage dont le schéma est défini par une organisation reconnue et
multipartite (W3C, ISO, OASIS) pour les besoins génériques d'une large communauté
internationale.

Standard de fait : Les langages imposés par une organisation unique, mais à une telle échelle que
leur usage est incontournable. Exemple : formats de Microsoft Office (.doc,
.xls, .ppt).

7
Langage local : Un langage défini par une organisation seule ou une communauté restreinte pour
ses besoins propres (un service, une entreprise, un réseau d'organisations).

Format ouvert : Un format public utilisable sans contrainte par n'importe qui.

Format fermé : Un format dont l'accès est protégé, payant ou soumis à contraintes.

Format propriétaire : Un format à la fois local et fermé.

1.6 Langages XML orientés données

Ces langages permettent d'enregistrer et de transporter des données informatiques

structurées. Ils servent surtout à l'échange ou la sérialisation des données des programmes
informatiques.

Exemples de formats standards orientés données :

• MathML, ChemML (sciences)

• ATOM, RSS (syndication)
• Dublin Core (métadonnées)
• RDF, OWL (web sémantique)
• SVG (graphiques vectoriels) Exemple de format local orienté données : xml

<myVector>
<x>5</x>
<y>19</y>
</myVector>

Ce code représente un vecteur avec ses coordonnées x=5 et y=19, défini pour les besoins
spécifiques d'un programme.

Remarque importante : XML est plus verbeux que ses alternatives (CSV, JSON), ce qui le rend
plus explicite pour un humain mais moins performant informatiquement. Cette caractéristique
n'est pas toujours un problème selon les cas d'usage.

Langages XML de programmation : Le formalisme XML est également utilisé pour définir des
langages de programmation, généralement à vocation déclarative. Exemples : XSLXSLT, ANT,
XUL.

1.7 Langages XML orientés documents

Ces langages permettent de représenter informatiquement des documents numériques. Les

formats de documents faisant appel à des représentations fortement arborescentes, XML est un
candidat idéal pour cet usage.
8
On distingue deux types :

1. Langages orientés documents formatés (structure physique) :

Ils définissent des formats de mise en forme de document, généralement pour un support donné.

Exemples :

• XHTML (web)
• XSL-FO (impression)
• SMIL (multimédia)
• OpenDocument (bureautique libre)
• OOXML (Microsoft Office)

2. Langages orientés documents structurés (structure logique) :

Ils définissent des formats de structuration de document, généralement pour un métier donné, plus
ou moins précis selon la généralité du langage.

Exemples :

• DocBook (documentation technique)

• TEI (textes littéraires et historiques)
• DITA (documentation technique modulaire)

Exemple de format local orienté document structuré :

xml
<?xml version="1.0" encoding="UTF-8"?>
<document type="Lorem ipsum">
<paragraphe>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet
libero ac mauris egestas venenatis nec vitae sapien.</paragraphe>
<paragraphe>Donec a lectus sed augue pellentesque accumsan eu ac justo.
Etiam est urna, sagittis ac cursus nec, placerat quis velit.</paragraphe>
</document>

Ce document utilise une structure logique avec des éléments document et paragraphe, sans
spécifier comment ils doivent être présentés visuellement.

9
1.8 Caractéristiques essentielles de XML

Non-ambiguïté : Les règles syntaxiques strictes d'XML rendent son interprétation informatique
univoque. Il n'y a qu'une seule façon d'interpréter un document XML bien formé.

Lisibilité : Un format XML a pour objectif d'être lisible par un être humain, afin de plus
facilement en appréhender le langage. Les balises sont explicites et le contenu reste visible.

Passivité : Un format XML est passif, il dépend de programmes informatiques qui le

transforment. XML ne définit pas le comportement ni la manière dont doit être traité un
document, mais uniquement un format.

2. SYNTAXE XML
2.1 Document bien formé

Un document est dit bien formé lorsqu'il respecte les règles syntaxiques du XML.

Important : XML ne pose pas de sémantique à priori mais uniquement des règles syntaxiques.

Règles syntaxiques obligatoires :

1. Une seule racine : Il n'existe qu'un seul élément père par document, appelé racine,
contenant tous les autres éléments.
2. Inclusion complète : Tout élément fils est inclus complètement dans son père (pas
d'éléments croisés).
3. Fermeture obligatoire : Toute balise ouverte doit être fermée.

Attention : XML ne définit pas le comportement ni la manière dont doit être traité un

document, mais uniquement un format. Exemple de document bien formé - Un courriel :

xml

<?xml version='1.0' encoding='iso-8859-1'?>

<mail>
<de>[Link]@[Link]</de>
<a>[Link]@[Link]</a>
<objet>Demande d'information</objet>
<date>01-03-2001</date>
<corps>
<paragraphe>Bonjour Fabrice,</paragraphe>
<paragraphe>Peux tu m'expliquer ce qu'est le langage XML

10
?</paragraphe>
<paragraphe>Il me faudrait en effet ton avis éclairé sur le sujet.</paragraphe>
<paragraphe>J'attends ta réponse, à bientôt</paragraphe>
</corps>
</mail>

Ce document est bien formé car :

• Il possède une unique racine <mail> qui contient tous les autres éléments
• Tous les éléments sont complètement inclus les uns dans les autres
• Toutes les balises ouvertes sont fermées

2.2 Les balises

Les balises sont les composants fondamentaux permettant l'écriture de documents XML. Elles se
distinguent du contenu en utilisant les caractères <, > et /.

Les balises n'ont pas de présentation ou de signification définie par le langage mais elles auront
un sens pour les applications et/ou le lecteur.

Il existe trois types de balises :

• Balise d'ouverture : <nom_balise>

• Balise de fermeture : </nom_balise>
• Balise vide : <nom_balise/>

Exemple de balise XML :

<adresse>12, rue de Paris</adresse>

Dans cet exemple :

• <adresse> est la balise d'ouverture

• 12, rue de Paris est le contenu
• </adresse> est la balise de fermeture

11
2.3 Les éléments

Un élément XML est un extrait d'un fichier XML comprenant :

• Une balise ouvrante

• Une balise fermante
• Le contenu compris entre les deux balises (qui peut être du texte, d'autres éléments, ou
rien)

Règles pour les noms d'éléments :

• Peuvent contenir tout caractère alphanumérique plus _ (underscore), - (tiret) et . (point)

• Doivent commencer par un caractère alphabétique ou _
• Ceux commençant par la chaîne xml sont réservés (quelque soit la casse)
• Case-sensitive : XML différencie les majuscules des minuscules (<Nom> ≠ <nom>)

Attention : Deux éléments ne peuvent pas avoir un contenu croisé. Cette syntaxe est interdite :
<nom1> ... <nom2> ... </nom1> ... </nom2>

Éléments vides :

Un élément vide est un élément qui ne comporte rien entre sa balise ouvrante et sa balise
fermante.

Les deux syntaxes suivantes sont strictement équivalentes :

• <element></element>
• <element/>

Exemple d'arbre d'éléments :

xml
<lettre>
<expediteur>moi</expediteur> </lettre>

Dans cet exemple :

• lettre est l'élément racine

• expediteur est un élément fils contenant le texte "moi"

2.4 Les attributs

Un attribut est une information supplémentaire attachée à un élément. On parle de métadonnée.

Règles pour les attributs :

12
 1. Les attributs sont formés d'une suite d'affectations séparées par des espaces :
attribut1='valeur' attribut2='valeur'
2. Ils sont ajoutés à la balise ouvrante ou à une balise vide (jamais à une balise fermante)
3. La valeur est indiquée entre apostrophes ' ou guillemets " (au choix, mais pas de mélange
des deux)
4. Un élément ne peut pas contenir deux attributs ayant le même nom
5. Le nom d'un attribut est soumis aux mêmes contraintes que les noms d'éléments
6. La valeur de l'attribut peut contenir tout caractère à l'exception de ^, % et &

Méthode : Utilisez des apostrophes si la valeur de l'attribut inclut des guillemets et vice versa.

Équivalence attribut/élément :

Un attribut peut toujours être représenté alternativement par un élément fils. Ces deux syntaxes
sont similaires :

• <element attribut="x"/>
• <element><attribut>x</attribut></element>

Il est donc tout à fait possible de faire du XML sans utiliser d'attribut.

Usage recommandé des attributs :

• Pour différencier le contenu destiné à être affiché des métadonnées qui ne le seront pas
(version, date de création, etc.)
• Pour simplifier l'écriture du document
• Pour ajouter des identifiants et des références

Exemple de courriel avec attributs : xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<email>
<entete>
<date type='JJMMAAAA'>28102003</date>
<heure type='24' local='(GMT+01:00)'>14:01:01</heure>
<expediteur><adresse
mail='marcel@[Link]'>Marcel</adresse></expediteur>
<recepteur><adresse mail='robert@[Link]'>Robert</adresse></recepteur>
<sujet>Hirondelle</sujet>
</entete>
<corps>
<salutation>Salut,</salutation>

13
 <paragraphe>Pourrais-tu m'indiquer quelle est la vitesse de vol d'une hirondelle
transportant une noix de coco ?</paragraphe>
<politesse>A très bientôt,</politesse>
<signature>Marcel</signature>
</corps>
</email>

Dans cet exemple :

• L'attribut type='JJMMAAAA' indique le format de la date

• L'attribut mail='marcel@[Link]' contient l'adresse email
• Ces attributs sont des métadonnées qui ne seront pas nécessairement affichées

2.5 Structure générale d'un fichier XML

Un document XML est constitué de deux parties :

1. Le prologue (facultatif) :

Il comprend une déclaration XML, indiquant la version du langage XML utilisé et le codage des
caractères dans le document. Chacune de ces informations est optionnelle mais leur ordre est
obligatoire.

Syntaxe : xml

<?xml version="numéro de version" encoding="encodage des caractères"?> Exemple de

prologue : xml

<?xml version="1.0" encoding="UTF-8"?>

Ce prologue indique que le document est codé en utilisant un langage XML de version 1.0, avec
des caractères codés selon la norme UTF-8.

2. Un arbre d'éléments (obligatoire) :

Contenant au moins un élément qui est l'élément racine.

Exemple d'arbre d'éléments : xml

<lettre>
<expediteur>moi</expediteur>
</lettre>

14
2.6 Commentaires

Un fichier XML peut contenir des commentaires. Ils peuvent être insérés n'importe où dans le
document.

Syntaxe : xml

<!-- Ceci est un commentaire -->

Exemple d'utilisation : xml

<document>
Ceci est un contenu.
<!-- Ceci est un commentaire -->
</document>

Les commentaires ne sont pas traités par les programmes XML et servent uniquement à
documenter le code pour les développeurs.

2.7 Exemples d'exercices sur la syntaxe

Exercice 1 : Analyse d'un document XML

<papier type="scientifique">
<titre>Réinterroger les structures documentaires</titre>
<sousTitre>De la numérisation à l'informatisation</sousTitre>
<auteur>Stéphane Crozat</auteur>
<auteur>Bruno Bachimont</auteur>
<resume>Nous proposons dans cet article d'aborder ...</resume>
<abstract>In this paper we define...</abstract>
<motsCles>
<terme>Ingénierie des connaissances</terme>
<terme>XML</terme>
<terme>Document</terme>
</motsCles>
<keywords>
<word>Knowledge engineering</word>
<word>XML</word>
<word>Document</word>

15
 </keywords>
<publication date="2004-07-05"/>
<version maj='1' min='0'/>
<ressource uriSrc="[Link]
[Link]"/>
</papier>

Analyse du document :

• ✓ Ce fichier est un fichier XML

✓ Il possède un élément racine unique (papier) qui contient tous les autres
✓ Tous ses éléments sont inclus les uns dans les autres (pas de croisement)
•

✓ Toutes ses balises ouvertes sont fermées

•

✓ Ce fichier est aussi un fichier SGML (tout XML est SGML)

•
•

Règle importante : Les balises doivent être fermées dans l'ordre dans lequel elles sont ouvertes,
pour que chaque élément soit inclus dans son père. La syntaxe XML est sensible à la casse : P est
différent de p.

Tableau 1: Tableau récapitulatif de la syntaxe XML

16
 3. SCHÉMAS XML
3.1 Notion de document valide

Schéma : Un schéma est une description de la structure que doit respecter un document lui faisant
référence. Il établit la liste des éléments XML autorisés (avec leurs attributs), ainsi que
l'agencement possible de ces éléments.

On parle aussi de grammaire, au sens où le schéma définit l'enchaînement autorisé des balises et
vient en complément de la syntaxe XML (qui elle est indépendante d'un schéma particulier).

Document valide : Un document XML bien formé est dit valide pour un schéma donné s'il
respecte les règles structurelles imposées par ce schéma.

Utilité du contrôle de la structure :

1. S'assurer l'homogénéité structurelle des documents de même type

2. Le traitement automatique d'un ensemble de documents de même type (mise en forme,
stockage, extraction d'informations)
3. La création de formats standard et leur respect

Exemples de langages de schéma :

Il existe plusieurs langages de définition de schéma, mais les trois principaux sont :

1. Document Type Definition (W3C) : Un langage hérité de SGML qui fait partie du
standard XML
2. W3C XML Schema (W3C) : Une alternative aux DTD destiné à moderniser et compléter
ce langage historique
3. Relax NG (OASIS, ISO) : Une autre alternative, compromis entre W3C XML Schema et
DTD

3.2 Document Type Definition (DTD)

Le formalisme DTD est le premier qui a été introduit dès la première version du standard
XML. Il est intégré au standard W3C de XML. Il est directement hérité de la norme SGML.

Les DTDs utilisent un langage spécifique (non XML) pour définir les règles structurelles.

Un fichier DTD peut contenir principalement deux types de déclarations :

1. Déclarations d'éléments : Indiquent les éléments pouvant être inclus dans un document et
l'organisation du contenu de chaque élément (éléments fils ou texte).
2. Déclarations d'attributs : Définissent les attributs pouvant être associés à un élément ainsi
que leur type.
17
Exemple de DTD simple : dtd

<!ELEMENT document (paragraphe+)>

<!ATTLIST document type CDATA #REQUIRED>
<!ELEMENT paragraphe (#PCDATA)> Explication de

cette DTD :

• <!ELEMENT document (paragraphe+)> : Un document contient un ou plusieurs

paragraphes
• <!ATTLIST document type CDATA #REQUIRED> : L'élément document a un attribut
obligatoire nommé type
• <!ELEMENT paragraphe (#PCDATA)> : Un paragraphe contient du texte

Tableau 2: Symboles DTD importants

Exemple de document XML valide : xml

<?xml version='1.0' encoding='iso-8859-1'?>

<!DOCTYPE document SYSTEM "[Link]">
<document type='memo'>
<paragraphe>Xxxxxxxxx</paragraphe>
<paragraphe>Xxxxxxxxx</paragraphe>
<paragraphe>Xxxxxxxxx</paragraphe>
</document>

18
La ligne <!DOCTYPE document SYSTEM "[Link]"> indique que ce document doit être
valide par rapport à la DTD contenue dans le fichier [Link].

Exercice DTD : Entête de document

DTD donnée : dtd

<!ELEMENT entete (titre, date, auteur+, motscles*, resume?)>

<!ELEMENT titre (#PCDATA)>
<!ELEMENT date (#PCDATA)>
<!ELEMENT auteur (#PCDATA)>
<!ELEMENT motscles (#PCDATA)>
<!ELEMENT resume (paragraphe+)>
<!ELEMENT paragraphe (#PCDATA)> Analyse

de la DTD :

• entete contient dans l'ordre : titre (1), date (1), auteur (1 ou +), motscles (0 ou +), resume
(0 ou 1)
• titre, date, auteur, motscles contiennent du texte
• resume contient un ou plusieurs paragraphe
• paragraphe contient du texte Document XML valide minimal : xml

<?xml version="1.0"?>
<!DOCTYPE entete SYSTEM "[Link]">
<entete>
<titre/>
<date/>
<auteur/>
</entete>

Ce document est valide car il contient le minimum requis : titre, date et un auteur (tous peuvent
être vides).

Document XML valide complet : xml

<?xml version="1.0"?>
<!DOCTYPE entete SYSTEM "[Link]">
<entete>
<titre>Mon document</titre>
<date>Aujourd'hui</date>
<auteur>Moi</auteur>
19
 <motscles>Document</motscles>
<resume>
<paragraphe>Mon résumé</paragraphe>
</resume>
</entete>

Ce document utilise toutes les balises possibles de la DTD.

Document XML à valider : xml

<?xml version="1.0"?>
<!DOCTYPE entete SYSTEM "[Link]">
<entete>
<titre>Document de test</titre>
<date>2 décembre 2009</date>
<auteur>Stéphane Crozat</auteur>
<motscles>Document DTD XML Valide</motscles>
</entete>

Ce document est valide car il respecte la structure imposée par la DTD (titre, date, auteur
présents, motscles optionnel présent, resume optionnel absent).

3.3 W3C XML Schema

Les XML Schema ont été proposés par le W3C pour permettre de dépasser les limites des DTD.

Avantages principaux :

1. Une syntaxe XML (contrairement aux DTD)

2. L'extension de l'expression des règles d'organisation structurelle (héritage, réutilisation,
etc.)
3. L'ajout d'un langage de typage des éléments (particulièrement utile pour les formats XML
orientés données)

Exemple de DTD :

dtd

<!ELEMENT document (paragraphe+)>

<!ATTLIST document type CDATA #REQUIRED>
<!ELEMENT paragraphe (#PCDATA)>

W3C XML Schema équivalent : xml

20
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="[Link]
<xs:element name="document">
<xs:complexType>
<xs:sequence>
<xs:element maxOccurs="unbounded" ref="paragraphe"/>
</xs:sequence>
<xs:attribute name="type" use="required"/>
</xs:complexType>
</xs:element>
<xs:element name="paragraphe" type="xs:string"/>
</xs:schema>

Explication :

• <xs:element name="document"> : Définit l'élément document

• <xs:complexType> : Indique que l'élément a une structure complexe
• <xs:sequence> : Les éléments fils doivent apparaître dans l'ordre
• maxOccurs="unbounded" : Nombre illimité d'occurrences (équivalent au + en DTD)
• <xs:attribute name="type" use="required"/> : Attribut obligatoire
• type="xs:string" : Type de données chaîne de caractères

3.4 RelaxNG

RelaxNG (REgular LAnguage for XML Next Generation) est un langage de schéma XML.

Exemples de schémas publics définis en Relax NG :

• OpenDocument (format bureautique)

• DocBook (format documentaire)
• Atom (syndication)

Exemple de DTD :

dtd
<!ELEMENT document (paragraphe+)>
<!ATTLIST document type CDATA #REQUIRED>
<!ELEMENT paragraphe (#PCDATA)>

RelaxNG syntaxe XML équivalente : xml

21
<?xml version="1.0" encoding="UTF-8"?>
<grammar xmlns="[Link]
<start>
<element name="document">
<attribute name="type"/>
<oneOrMore>
<element name="paragraphe">
<text/>
</element>
</oneOrMore>
</element>
</start>
</grammar>

RelaxNG syntaxe compacte équivalente :

start = element document { attribute type

{text},
element paragraphe {text}+
}

La syntaxe compacte est beaucoup plus lisible et concise que la syntaxe XML.

RelaxNG avec patterns nommés (syntaxe XML) :

xml
xml version="1.0" encoding="UTF-8"?>
<grammar xmlns="[Link]
<start>
<ref name="document"/>
</start>
<define name="document">
<element name="document">
<attribute name="type"/>
<oneOrMore>
<ref name="paragraphe"/>

22
 </oneOrMore>
</element>
</define>
<define name="paragraphe">
<element name="paragraphe">
<text/>
</element>
</define> </grammar>

Les patterns nommés (`<define>` et `<ref>`) permettent de réutiliser des définitions et de mieux
structurer le schéma.

RelaxNG avec patterns nommés (syntaxe compacte) :

start = document
document = element document {attribute type {text}, paragraphe+ } paragraphe = element
paragraphe {text}

4. MANIPULATIONS XML
4.1 L'arbre du document XML

Il est possible de représenter un document XML sous forme d'arbre, tel que :

• L'arbre possède une racine / qui a comme fils l'élément racine

• L'élément racine est l'élément du document XML qui contient tous les autres
• Chaque nœud a comme fils les éléments et le texte qu'il contient, ainsi que ses attributs

Remarque importante : L'ensemble des nœuds de l'arbre d'un document est muni d'un ordre, qui
est celui de l'ordre dans le document XML sérialisé.

Exemple de fichier XML : xml

<?xml version="1.0" encoding="UTF-8"?>

<document modele="ULCoursGeneral" code="BP-Incendie3_S1_E2_UL1">
<entete>
<identification>
<titre>L'assurance de la responsabilité de voisinage</titre>
<date>21/02/01</date>
<auteur>AEA</auteur>
23
 <version>1.00</version>
</identification>
</entete>
<corps>
<contenu>
<paragraphe>Cette garantie est appelée : recours des voisins et des tiers.</paragraphe>
<remarque>
<paragraphe>L'image suivante <ressource URIsrc="[Link]" titre="Recours des
voisins et des tiers" type="image"/> montre la garantie.</paragraphe>
</remarque>
</contenu>
</corps> </document>

Représentation en arbre du même document :

/
|document
|@modele = "ULCoursGeneral"
|@code = "BP-Incendie3_S1_E2_UL1"
|entete
|identification
|titre
|text() = "L'assurance de ..."
|date
|text() = "21/02/01"
|auteur
|text() = "AEA"
|version
|text() = "1.00"
|corps
|contenu
|paragraphe
|text() = "Cette garantie ..."
|remarque
|paragraphe
|text() = "L'image suivante"
|ressource

24
 |@URIsrc = "[Link]"
|@titre = "Recours des voisins..."
|@type = "image"
|text() = "montre la garantie."

Dans cette représentation :

• / est la racine de l'arbre

• | indique un lien de parenté
• @ préfixe les attributs
• text() représente le contenu textuel

4.2 Introduction à XPath

Expression XPath : XPath est un langage d'expressions permettant de pointer sur n'importe quel
élément d'un arbre XML depuis n'importe quel autre élément de l'arbre.

Types d'expressions :

1. Expression XPath absolue : Sa résolution est indépendante d'un contexte ou nœud

courant. Elle commence par /.
2. Expression XPath relative : Sa résolution est dépendante d'un contexte ou nœud courant.
Elle ne commence pas par /, elle peut commencer par ./ (syntaxe développée).

Retour d'une expression XPath :

Une expression XPath renvoie :

• Un node-set (ensemble de nœuds), c'est à dire un sous-arbre de l'arbre du document

• Une chaîne de caractères
• Un booléen
• Un réel

Exemples d'expressions XPath :

xpath
/document/entete/identification/titre
/document/@modele
corps//contenu contenu/*
contenu/remarque[1]
../paragraphe @type

Explication des expressions :

25
 • /document/entete/identification/titre : Chemin absolu vers l'élément titre
• /document/@modele : Attribut modele de l'élément racine document
• corps//contenu : Élément contenu descendant de corps (à n'importe quel niveau)
• contenu/* : Tous les éléments fils de contenu
• contenu/remarque[1] : Premier élément remarque fils de contenu
• ../paragraphe : Élément paragraphe frère du nœud courant
• @type : Attribut type du nœud courant

Types de nœuds XPath :

• root nodes (nœuds racine)

• element nodes (nœuds éléments)
• text nodes (nœuds texte)
• attribute nodes (nœuds attributs)
• namespace nodes (nœuds espaces de noms)
• processing instruction nodes (nœuds instructions de traitement)
• comment nodes (nœuds commentaires)

4.3 XSL-XSLT

Définition : XSL-XSLT est une partie du standard W3C XSL qui a trait à la transformation des
documents XML (l'autre partie étant XSL-FO).

XSL-XSLT est un langage de programmation déclaratif écrit en XML (un programme XSLXSLT
est un document XML).

Remarque : On parle souvent (par simplification) de XSL ou de XSLT pour désigner XSLXSLT
et de FO pour désigner XSL-FO. XSL utilisé seul désigne donc par convention XSLXSLT.

Principe de fonctionnement :

XSL-XSLT fonctionne selon le principe suivant :

1. Il prend en entrée un fichier XML bien formé

2. Il livre en sortie un fichier texte (XML, HTML ou texte sans balise)

Algorithme général :

1. Il sélectionne (match) les éléments XML du fichier source

2. Pour chaque élément reconnu il génère une sortie sur le fichier cible

Notion de règle :

26
Un programme XSL-XSLT est composé d'une succession de règles. Chaque règle est
indépendante des autres et a en charge de sélectionner un élément dans la source et d'effectuer
une écriture dans la cible.

Exemple d'application d'une règle XSL-XSLT :

Source XML : xml

<a>
<b/><b/><c/> </a>

Règle XSL-XSLT :

xml
<xsl:template match="/a/b">
BONJOUR </xsl:template>

Résultat

BONJOUR BONJOUR

Explication : La règle sélectionne tous les éléments b fils de a (il y en a deux) et génère le texte
"BONJOUR" pour chacun.

4.4 SAX (Simple API for XML)

Définition : SAX est l'acronyme de Simple API for XML. SAX est une API qui sert à parcourir
un fichier XML, elle se base sur des événements déclenchés durant la lecture du flux (balise
ouvrante, balise fermante, etc.).

Caractéristiques :

• Développée pour plusieurs langages de programmation (JAVA, C++, PHP, Perl, etc.)
• Très utilisé pour les documents très lourds, car il nécessite moins de mémoire que les
autres API
• Lecture en flux (streaming)

Principe : La première interface (ContentHandler) permet d'analyser le flux entrant à l'aide des
événements. Il suffit de redéfinir les fonctions pour avoir le comportement souhaité.

Gestion d'un élément :

Un élément correspond à des balises, notamment une balise ouvrante et une balise fermante.

27
startElement : Déclenchée au démarrage d'un élément XML (balise ouvrante). Elle a plusieurs
paramètres dont l'espace de nommage, le nom de la balise, et les attributs de cette balise s'ils
existent.

endElement : Déclenchée à la fin du traitement d'une balise.

Exemple en Java :

java
public void startElement(String uri, String localName, String rawName,
Attributes atts) throws SAXException { [Link]("Ouverture de la balise :
" + localName);
}

public void endElement(String uri, String localName, String qName) throws

SAXException {
[Link]("Fermeture de la balise : " + localName);
}

Gestion du début et de la fin d'un document :

Dans l'interface ContentHandler, ces événements sont gérés par les deux fonctions startDocument
et endDocument.

• La fonction startDocument est la première fonction qui est appelée parmi toutes
les autres
• De même endDocument est la dernière fonction qui est appelée à la fin de

l'analyse Exemple en Java : java

public void startDocument() throws SAXException {

[Link]("Debut de l'analyse du document");
}

public void endDocument() throws SAXException {

[Link]("Fin de l'analyse du document");
}

4.5 DOM (Document Object Model)

Définition : Le DOM (Document Object Model) est un standard W3C qui décrit une API orientée
objet permettant de représenter un document XML ou HTML en mémoire afin de le manipuler
avec un langage de programmation.

28
Le standard DOM est indépendant d'un langage de programmation en particulier, et implémenté
dans de nombreux langages (JavaScript, Java, PHP, C, etc.).

Citation W3C : "The Document Object Model is a platform- and language-neutral interface that
will allow programs and scripts to dynamically access and update the content, structure and style
of documents."

Fonctions du DOM :

L'API DOM permet de :

1. Parcourir un arbre XML ou HTML

2. Rechercher des nœuds particuliers, en consulter le contenu
3. Créer, ajouter, supprimer, déplacer des nœuds dans l'arbre

Exemple d'utilisation :

L'API DOM implémentée en JavaScript permet de manipuler un document HTML ou XHTML,

afin d'en modifier dynamiquement (en fonction des actions utilisateurs), la structure et le
contenu :

• Faire apparaître ou disparaître des éléments div en fonction d'une action utilisateur
• Créer ou initialiser des contrôles de formulaire
• Modifier le style des éléments  Etc.

Fonctions DOM en JavaScript :

getElementById : javascript

vDiv = [Link]("id1"); Récupère un

élément par son identifiant unique.

getElementsByTagName :

javascript
vDivs = [Link]("p"); for (var i=0;
i<[Link]; i++) { [Link](i)...;
}

Récupère tous les éléments d'un type donné (ici tous les paragraphes).

firstChild : javascript

alert([Link]);

29
Accède au premier enfant d'un nœud et à son contenu.

removeChild : javascript

[Link]([Link]); Supprime un nœud

enfant.

appendChild : javascript

[Link](vDiv2); Ajoute

un nœud enfant. Exemple de

fonction complète : javascript

function fDisplay(pDivId) { var vDiv =

[Link](pDivId);
[Link]="block";
}

Cette fonction affiche un élément en modifiant son style CSS.

CONCLUSION

XML est un langage utilisé pour structurer, stocker et échanger des données. Il est lisible, flexible et
indépendant des plateformes. Grâce à des outils comme DTD, XML Schema et XPath, XML assure une
bonne organisation et une validation fiable des données.

30
PARTIE 2 : REALISATION DU PROJET

31
 INTRODUCTION
Ce projet port sur la gestion des étudiants de l’établissement d’ESGIS. Il vise a modéliser,
structurer et exploiter des informations relatives aux étudiants, a leurs filières, aux unités
d’enseignement (ue) ainsi qu’a leurs différentes notes. à travers l’utilisation des technologies xml,
dtd, css, xslt et php, ce travail permet de mettre en pratique les notions theoriques vues en cours
tout en developpant des compétences en structuration des donnees, en transformation de documents
et en interaction avec une base de donnees. L’objectif principal est de concevoir une solution
complete et coherente pour la gestion et l’affichage des informations academiques des etudiants.

1. Complétons le tableau ci-dessus avec vos propres données (Insérer 3 entrées)

Tableau 3:Tableau complèté

Cod Nom Préno Filière Nivea UE

e m u
Libell Notes
e UE
DS DS T Exame
1 2 P n
1 KOFFI Kokou Informatiqu L3 Base 10 11 1 12
e D 3
2 AGBEK Ama Gestion L2 Mrktn 11 12 1 13
O g 0
3 MENSA Edem Informatiqu L3 SI 13 15 1 14
H e 6
1 KOFFI Kokou Informatiqu L3 Prg wb 12 14 1 13
e 5
2 AGBEK Ama Gestion L2 Cptbt 15 16 1 17
O é 4
3 MENSA Edem Informatiqu L3 Rsaux 09 10 1 11
H e 2
32
 2. En utilisant le tableau rempli, proposons le fichier XML pour la gestion de ces
informations

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="[Link]"?>
<?xml-stylesheet type="text/xsl" href="[Link]"?>
<!DOCTYPE esgis SYSTEM "[Link]">
<esgis>
<etudiant code="1">
<nom>KOFFI</nom>
<prenom>Kokou</prenom>
<filiere>Informatique</filiere>
<niveau>L3</niveau>
<ues>
<ue>
<libelleUE>Programmation Web</libelleUE>
<notes>
<ds1>12</ds1>
<ds2>14</ds2>
<tp>15</tp>
<examen>13</examen>
</notes>
</ue>
<ue>
<libelleUE>Base de Données</libelleUE>

33
 <notes>
<ds1>10</ds1>
<ds2>11</ds2>
<tp>13</tp>
<examen>12</examen>
</notes>
</ue>
</ues>
</etudiant>

<etudiant code="2">
<nom>AGBEKO</nom>
<prenom>Ama</prenom>

<filiere>Gestion</filiere>
<niveau>L2</niveau>
<ues>
<ue>
<libelleUE>Comptabilité</libelleUE>
<notes>
<ds1>15</ds1>
<ds2>16</ds2>
<tp>14</tp>
<examen>17</examen>
</notes>
</ue>
<ue>
<libelleUE>Marketing</libelleUE>
<notes>
<ds1>11</ds1>
<ds2>12</ds2>
<tp>10</tp>
<examen>13</examen>
</notes>
</ue>
</ues>
</etudiant>

<etudiant code="3">
<nom>MENSAH</nom>

34
 <prenom>Edem</prenom>
<filiere>Informatique</filiere>
<niveau>L3</niveau>
<ues>
<ue>
<libelleUE>Réseaux</libelleUE>
<notes>
<ds1>19</ds1>
<ds2>10</ds2>
<tp>12</tp>
<examen>11</examen>
</notes>
</ue>
<ue>
<libelleUE>Sécurité Informatique</libelleUE>
<notes>
<ds1>13</ds1>
<ds2>15</ds2>
<tp>16</tp>
<examen>14</examen>
</notes>
</ue>
</ues>
</etudiant> </esgis>

3. Créons l’arbre de ce document

ARBRE DU DOCUMENT XML

esgis (racine)
│
├── etudiant [@code="1"]
│ ├── nom
│ ├── prenom
│ ├── filiere
│ ├── niveau

35
│ └── ues
│ ├── ue
│ │ ├── libelleUE
│ │ └── notes
│ │ ├── ds1
│ │ ├── ds2
│ │ ├── tp
│ │ └── examen
│ └── ue
│ ├── libelleUE
│ └── notes
│ ├── ds1
│ ├── ds2
│ ├── tp
│ └── examen
│
├── etudiant [@code="2"]
│ ├── nom
│ ├── prenom
│ ├── filiere
│ ├── niveau
│ └── ues
│ ├── ue
│ │ ├── libelleUE
│ │ └── notes
│ │ ├── ds1
│ │ ├── ds2
│ │ ├── tp
│ │ └── examen
│ └── ue
│ ├── libelleUE
│ └── notes
│ ├── ds1
│ ├── ds2
│ ├── tp
│ └── examen
│
└── etudiant [@code="3"]
├── nom

36
 ├── prenom
├── filiere
├── niveau
└── ues
├── ue
│ ├── libelleUE
│ └── notes
│ ├── ds1
│ ├── ds2
│ ├── tp
│ └── examen
└── ue
├── libelleUE
└── notes
├── ds1
├── ds2
├── tp
└── examen

LÉGENDE :

[@code] = attribut
└── = élément enfant
│ = niveau hiérarchique

4. Proposons et appelons la DTD de ce document

<!ELEMENT esgis (etudiant+)>

<!ELEMENT etudiant (nom, prenom, filiere, niveau, ues)>

<!ATTLIST etudiant code CDATA #REQUIRED>

<!ELEMENT nom (#PCDATA)>

<!ELEMENT prenom (#PCDATA)>
<!ELEMENT filiere (#PCDATA)> <!ELEMENT

37
niveau (#PCDATA)>

<!ELEMENT ues (ue+)>

<!ELEMENT ue (libelleUE, notes)>

<!ELEMENT libelleUE (#PCDATA)>

<!ELEMENT notes (ds1, ds2, tp, examen)>

<!ELEMENT ds1 (#PCDATA)>

<!ELEMENT ds2 (#PCDATA)>
<!ELEMENT tp (#PCDATA)>
<!ELEMENT examen (#PCDATA)>

5. Proposons et appelons un exemple de fichier CSS

pour ce document

esgis { display: block; font-family: 'Inter', 'Segoe UI', 'Roboto', 'Arial', sans-serif;
background: var(--light-bg); background-image: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2
100%); min-height: 100vh; padding: 30px 20px; line-height: 1.6;
color: var(--text-dark);
}
.....

.....

etudiant { display: block; background: var(--card-bg); border: 2px

solid var(--border-light); border-radius: 16px; margin: 30px auto;
padding: 0; max-width: 900px; box-shadow: var(--shadow-light);
animation: fadeInUp 0.8s ease-out forwards; transition: all 0.3s cubic-
bezier(0.4, 0, 0.2, 1); overflow: hidden;
}
....

....

nom, prenom, filiere, niveau { display: block; margin: 0;

padding: 12px 20px; background: white; border-radius:

38
10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
}

Résultat :

Figure 1: Le resultat de fichier CSS pour ce document

6. Proposons et appelons le fichier XSLT qui affiche l’étudiant dont le code est égal à
«3 »
39
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[Link]

<xsl:template match="/">
<html>
<head>
<title>Étudiant Code 3 - ESGIS</title>
<style> body {
font-family: Arial, sans-serif; background-color:
#ffffff; padding: 20px;
}
.etudiant {
background-color: #ffffff; border:
2px solid #000000; border-radius: 10px;
padding: 20px; max-width: 800px;
margin: 0 auto;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
} h1 {
background-color: #ff0000; color:
#ffffff; padding: 15px; border-radius:
5px;
} .info {
margin: 10px 0; font-size: 18px;
color: #000000;
} .label {
font-weight: bold; color: #ff0000;
} .ue {
background-color: #ffffff; border-left: 4px
solid #ff0000; border: 1px solid #000000;
padding: 15px; margin: 15px 0; border-
radius: 5px;

40
 .ue-titre { font-size: 18px;
font-weight: bold; color: #ff0000;
margin-bottom: 10px;
} .notes {
display: flex; gap: 10px;
flex-wrap: wrap;
} .note {
background-color: #ff0000; color:
#ffffff; padding: 8px 15px; border-
radius: 5px; font-weight: bold;
}
</style>
</head>
<body>
<xsl:apply-templates select="//etudiant[@code='3']"/>
</body> </html>
</xsl:template>

<xsl:template match="etudiant[@code='3']">
<div class="etudiant">
<h1>Étudiant Code : <xsl:value-of select="@code"/></h1>
<div class="info">
<span class="label">Nom :</span>
<span><xsl:value-of select="nom"/></span>
</div>

<div class="info">
<span class="label">Prénom :</span>
<span><xsl:value-of select="prenom"/></span>
</div>

<div class="info">
<span class="label">Filière :</span>

<span><xsl:value-of select="filiere"/></span>
</div>

<div class="info">
<span class="label">Niveau :</span>
41
 <span><xsl:value-of select="niveau"/></span>
</div>

<h2 style="color: #ff0000; margin-top: 20px;">Unités d'Enseignement</h2>

<xsl:for-each select="ues/ue"> <div

class="ue">
<div class="ue-titre">
<xsl:value-of select="libelleUE"/>
</div>
<div class="notes">
<div class="note">DS1: <xsl:value-of select="notes/ds1"/></div>
<div class="note">DS2: <xsl:value-of select="notes/ds2"/></div>
<div class="note">TP: <xsl:value-of select="notes/tp"/></div>
<div class="note">Examen: <xsl:value-of select="notes/examen"/></div>
</div>
</div>
</xsl:for-each>
</div>
</xsl:template>

</xsl:stylesheet>

Résultat :

42
 Figure 2: Resultat du fichier XSLT qui affiche l’étudiant dont le code est égal à «3 »

6. Utilisation directe du fichier XML : A l’aide du langage de programmation PHP, afficher

chaque étudiant, la moyenne de chaque matière et si la matière est validée (Validée si
moyenne >= 10)

<?php

$xml = simplexml_load_file('[Link]');

if ($xml === false) {

die("Erreur lors du chargement du fichier XML");
}

?>

<!DOCTYPE html> <html

lang="fr">

<head>

43
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestion des Notes - ESGIS</title>
<link rel="stylesheet" href="[Link]">
</head>

<body>
<div class="container">
<div class="header">
<h1>🎓🏫 ÉTABLISSEMENT ESGIS</h1>
<p>Système de Gestion des Notes des Étudiants</p>
</div>

<?php
// Parcourir tous les étudiants foreach ($xml->etudiant
as $etudiant) {
$code = (string)$etudiant['code'];
$nom = (string)$etudiant->nom;
$prenom = (string)$etudiant->prenom;
$filiere = (string)$etudiant->filiere;
$niveau = (string)$etudiant->niveau;

echo "<div class='etudiant-card'>"; echo "<div

class='etudiant-header'>"; echo "<h2>👤 $prenom
$nom</h2>"; echo "<div class='infos'>"; echo
"<span> Code: $code</span>"; echo "<span> Filière:
$filiere</span>"; echo "<span> Niveau: $niveau</span>";
echo "</div>"; echo "</div>";
echo "<div class='ue-list'>";

// Parcourir les UEs de l'étudiant foreach ($etudiant->ues-

>ue as $ue) {
$libelleUE = (string)$ue->libelleUE;
$ds1 = (float)$ue->notes->ds1;
$ds2 = (float)$ue->notes->ds2;
$tp = (float)$ue->notes->tp;
$examen = (float)$ue->notes->examen;

$moyenneDevoirs = ($ds1 + $ds2 + $tp) / 3;

44
 $moyenneFinale = ($moyenneDevoirs + $examen) / 2;
$moyenneDevoirsFormat = number_format($moyenneDevoirs, 2, '.', '');
$moyenneFinaleFormat = number_format($moyenneFinale, 2, '.', '');
$statut = $moyenneFinale >= 10 ? "Validée" : "Non Validée";
$classeStatut = $moyenneFinale >= 10 ? "valide" : "non-valide";

echo "<div class='ue-item'>";

echo "<div class='ue-titre'>📘 $libelleUE</div>";
// Affichage des notes echo "<div class='notes-row'>"; echo "<div
class='note-box'>"; echo "<div class='label'>DS 1</div>"; echo "<div class='value'>" .
number_format($ds1, 2, '.', '') .
"</div>";
echo "</div>";

echo "<div class='note-box'>"; echo "<div class='label'>DS 2</div>"; echo

"<div class='value'>" . number_format($ds2, 2, '.', '') .
"</div>";
echo "</div>";

echo "<div class='note-box'>"; echo "<div class='label'>TP</div>"; echo

"<div class='value'>" . number_format($tp, 2, '.', '') .
"</div>";
echo "</div>";

echo "<div class='note-box'>"; echo "<div class='label'>Examen</div>"; echo

"<div class='value'>" . number_format($examen, 2, '.', '') .
"</div>"; echo "</div>";
echo "</div>";

// Section de calcul détaillé echo "<div class='calcul-section'>";

echo "<h4> Détail du Calcul de la Moyenne</h4>"; echo "<div class='calcul-
steps'>";

45
 echo "<div class='step'>";
echo "<strong>Étape 1 :</strong> Moyenne des devoirs (DS1 + DS2 + TP) / 3<br>"; echo
"= (" . number_format($ds1, 2, '.', '') . " + " .
number_format($ds2, 2, '.', '') . " + " . number_format($tp, 2, '.', '') . ") /
3<br>"; echo "= " . number_format($ds1 + $ds2 + $tp, 2, '.', '') . " /
3<br>"; echo "= <strong>$moyenneDevoirsFormat</strong>";
echo "</div>";

echo "<div class='step'>"; echo "<strong>Étape 2 :</strong> Moyenne finale =

(Moyenne devoirs + Examen) / 2<br>"; echo "= ($moyenneDevoirsFormat + " .
number_format($examen, 2,
'.', '') . ") / 2<br>"; echo "= " . number_format($moyenneDevoirs + $examen, 2, '.', '')
. " / 2<br>"; echo "= <strong>$moyenneFinaleFormat / 20</strong>";
echo "</div>";

echo "</div>"; echo

"</div>";

// Résultat final
echo "<div class='resultat-section'>"; echo "<div class='moyenne-box'>";
echo "<div class='moyenne-label'>Moyenne Finale de l'UE</div>"; echo "<div
class='moyennevalue'>$moyenneFinaleFormat<small>/20</small></div>"; echo "</div>";
echo "<div class='statut $classeStatut'>$statut</div>"; echo "</div>";
echo "</div>";
}
echo "</div>";

echo "</div>";
}

?>
</div> </body>

</html>

46
Résultat 1:

Figure 3: La moyenne validée

Après modification des notes :

Résultat 2 :

47
 Figure 4: La moyenne non validée
7. Utilisation d’une base de donnée : A l’aide du langage de programmation PHP, afficher
chaque étudiant, la moyenne de chaque matière et si la matière est validée (Validée si
moyenne >= 10)

<?php
$host = 'localhost';
$dbname = 'esgis_db';
$username = 'root'; $password = '';

try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

48
 $sql = " SELECT
[Link],
[Link],
[Link],
[Link],
[Link],
[Link],
n.ds1,
n.ds2,
[Link],
[Link] FROM
etudiants e
INNER JOIN notes n ON [Link] = n.code_etudiant
ORDER BY [Link], [Link]
";

$stmt = $pdo->prepare($sql);
$stmt->execute();
$resultats = $stmt->fetchAll(PDO::FETCH_ASSOC);

} catch(PDOException $e) {
die("Erreur de connexion à la base de données: " . $e->getMessage());
}
?>

<!DOCTYPE html> <html

lang="fr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestion des Notes - ESGIS</title>
<link rel="stylesheet" href="[Link]">
</head>

<body>
<div class="container">
<div class="header">
<h1>🎓🏫 ÉTABLISSEMENT ESGIS</h1>
<p>Système de Gestion des Notes des Étudiants - Base de Données</p>

49
 </div>

<?php if (empty($resultats)) { echo "<div class='no-data'>"; echo "<h2>⚠

Aucune donnée disponible</h2>"; echo "<p>Veuillez d'abord importer les données dans la
base de données.</p>"; echo "</div>";
} else {
// Regrouper les résultats par étudiant
$etudiants = []; foreach ($resultats as $row) {
$code = $row['code']; if (!isset($etudiants[$code])) {
$etudiants[$code] = [
'nom' => $row['nom'],
'prenom' => $row['prenom'],
'filiere' => $row['filiere'],
'niveau' => $row['niveau'],
'ues' => []
];
}
$etudiants[$code]['ues'][] = [
'libelleUE' => $row['libelleUE'],
'ds1' => $row['ds1'],
'ds2' => $row['ds2'],
'tp' => $row['tp'],
'examen' => $row['examen']
];
}

// Afficher chaque étudiant foreach ($etudiants as $code =>

$etudiant) { echo "<div class='etudiant-card'>"; echo
"<div class='etudiant-header'>";
echo "<h2>👤 {$etudiant['prenom']} {$etudiant['nom']}</h2>"; echo "<div
class='infos'>"; echo "<span> Code: $code</span>"; echo "<span> Filière:
{$etudiant['filiere']}</span>"; echo "<span> Niveau: {$etudiant['niveau']}</span>";
echo "</div>"; echo "</div>";

echo "<div class='ue-list'>";

50
 // Afficher les UEs foreach ($etudiant['ues'] as
$ue) {
$ds1 = (float)$ue['ds1'];
$ds2 = (float)$ue['ds2'];
$tp = (float)$ue['tp'];
$examen = (float)$ue['examen'];

$moyenneDevoirs = ($ds1 + $ds2 + $tp) / 3;

$moyenneFinale = ($moyenneDevoirs + $examen) / 2;
$moyenneDevoirsFormat = number_format($moyenneDevoirs, 2, '.', '');
$moyenneFinaleFormat = number_format($moyenneFinale, 2, '.',
'');

$statut = $moyenneFinale >= 10 ? "Validée" : "Non Validée"; $classeStatut =

$moyenneFinale >= 10 ? "valide" : "nonvalide";

echo "<div class='ue-item'>";

echo "<div class='ue-titre'> {$ue['libelleUE']}</div>";
// Affichage des notes echo "<div class='notes-
row'>"; echo "<div class='note-box'>"; echo "<div
class='label'>DS 1</div>";
echo "<div class='value'>" . number_format($ds1, 2, '.', '')
. "</div>";
echo "</div>";

echo "<div class='note-box'>"; echo "<div class='label'>DS 2</div>";

echo "<div class='value'>" . number_format($ds2, 2, '.', '')
. "</div>";
echo "</div>";

echo "<div class='note-box'>";

echo "<div class='label'>TP</div>"; echo "<div class='value'>" . number_format($tp,

2, '.', '') .
"</div>";
echo "</div>";

51
 echo "<div class='note-box'>"; echo "<div class='label'>Examen</div>";
echo "<div class='value'>" . number_format($examen, 2, '.',
'') . "</div>"; echo "</div>";
echo "</div>";

// Section de calcul détaillé echo "<div class='calcul-section'>";

echo "<h4> Détail du Calcul de la Moyenne</h4>"; echo "<div class='calcul-
steps'>";

echo "<div class='step'>";

echo "<strong>Étape 1 :</strong> Moyenne des devoirs (DS1 + DS2 + TP) / 3<br>";
echo "= (" . number_format($ds1, 2, '.', '') . " + " .
number_format($ds2, 2, '.', '') . " + " . number_format($tp, 2, '.', '') . ") /
3<br>"; echo "= " . number_format($ds1 + $ds2 + $tp, 2, '.', '') . "
/ 3<br>"; echo "= <strong>$moyenneDevoirsFormat</strong>";
echo "</div>";

echo "<div class='step'>"; echo "<strong>Étape 2 :</strong> Moyenne finale =

(Moyenne devoirs + Examen) / 2<br>"; echo "= ($moyenneDevoirsFormat + " .
number_format($examen,
2, '.', '') . ") / 2<br>"; echo "= " . number_format($moyenneDevoirs + $examen, 2, '.',
'') . " / 2<br>";
echo "= <strong>$moyenneFinaleFormat / 20</strong>"; echo "</div>";

echo "</div>"; echo

"</div>";

// Résultat final echo "<div class='resultat-section'>";

echo "<div class='moyenne-box'>"; echo "<div class='moyenne-

label'>Moyenne Finale de l'UE</div>"; echo "<div
class='moyennevalue'>$moyenneFinaleFormat<small>/20</small></div>"; echo "</div>";
echo "<div class='statut $classeStatut'>$statut</div>"; echo "</div>";
echo "</div>";
}
echo "</div>"; echo
"</div>";

52
 }
}
?>
</div> </body>

</html>

Figure 5: La base de données affichant la moyenne de chaque matière

Résultat 1 :

53
 Figure 6: La moyenne finale de l’UE
Après modification des notes :

Figure 7: La base de données affichant la moyenne de chaque matière après modification

Résultat 2

54
 Figure 8: La moyenne finale de l’UE après modification

CONCLUSION
En conclusion, ce projet a permis de comprendre l’importance du langage XML dans la structuration et
l’échange des données. La mise en œuvre d’une DTD a assuré la validité du document XML, tandis que
l’utilisation des fichiers CSS et XSLT a facilité la présentation et la transformation des données.
L’exploitation du fichier XML à l’aide du langage PHP, avec et sans base de données, a renforcé nos
compétences en programmation et en traitement des données académiques.

55