Un éditeur XML en JavaScript

L'objectif de ce TP est de réaliser un éditeur XML avec HTML et JavaScript.

Soit le fichier XHTML "editor.html" ci-après.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<html>
2
<!--editor.html-->
3
<head>
4
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
  <title>Éditeur de document</title>
6
  <script type="text/javascript" src="lib.js"></script>
7
</head>
8
<body id="body">
9
  <h1>Édition</h1>
10
  <form>
11
    <p>Ajouter un paragraphe</p>
12
    <input type="text" size="50" id="text"/>
13
    <input type="button" onclick="addPara(document.getElementById('text').value);" value="ajouter"/>
14
    <br/>
15
    <input type="button" onclick="alertXml(document);" value="Afficher DOM"/>
16
    <br/>
17
    <input type="button" onclick="saveXml();" value="Sérialiser XML"/>
18
  </form>
19
  <hr>
20
  <div id="visu">
21
    <h1>Visualisation</h1>
22
    <script type="text/javascript">
23
    //ouvre le fichier XML sur le serveur
24
    var xml = loadXml("src.xml");
25
    //ouvre le fichier XSLT sur le serveur
26
    var xsl = loadXml("xml2html.xsl");
27
    //exécute le XSLT sur le XML
28
    res=execXslt(xml,xsl);
29
    //afficher le résultat
30
    document.getElementById("visu").appendChild(res);
31
</script>
32
</div>
33
</body>
34
</html>
<html>
<!--editor.html-->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Éditeur de document</title>
  <script type="text/javascript" src="lib.js"></script>
</head>
<body id="body">
  <h1>Édition</h1>
  <form>
    <p>Ajouter un paragraphe</p>
    <input type="text" size="50" id="text"/>
    <input type="button" onclick="addPara(document.getElementById('text').value);" value="ajouter"/>
    <br/>
    <input type="button" onclick="alertXml(document);" value="Afficher DOM"/>
    <br/>
    <input type="button" onclick="saveXml();" value="Sérialiser XML"/>
  </form>
  <hr>
  <div id="visu">
    <h1>Visualisation</h1>
    <script type="text/javascript">
    //ouvre le fichier XML sur le serveur
    var xml = loadXml("src.xml");
    //ouvre le fichier XSLT sur le serveur
    var xsl = loadXml("xml2html.xsl");
    //exécute le XSLT sur le XML
    res=execXslt(xml,xsl);
    //afficher le résultat
    document.getElementById("visu").appendChild(res);
</script>
</div>
</body>
</html>

Question

Expliquer le fonctionnement de "editor.html".

Question

Créer un fichier XML avec un élément racine document contenant des éléments paragraphe. Le placer sur un serveur Web et le rendre accessible en lecture/écriture.

Question

Écrire les XSLT xml2html.xsl et html2xml.xsl, puis les déposer sur le serveur à côté du fichier XML.

Question

Écrire les fonctions loadXml et alertXml (la seconde permettant de tester la première).

Question

Écrire la fonction execXslt.

Question

Écrire la fonction addPara.

Question

Écrire la fonction saveXml permettant d'exécuter le fichier PHP ci-après.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<?php
2
//saveXml.php
3
$xml= $_POST["xml"];
4
$dom = new DomDocument();
5
$dom->loadXML($xml);
6
$dom->save('src.xml');
7
?>
<?php
//saveXml.php
$xml= $_POST["xml"];
$dom = new DomDocument();
$dom->loadXML($xml);
$dom->save('src.xml');
?>