Afficher des images triées dans un fichier XML avec XSL

**lino100** · 02/03/2014, 11h29

je suis débutant et je cherche à me former pour réussir à gérer un site (pour mon gite touristique ) sans avoir à louer une base de données.

en alternative à ActiveXObject que j'utilise sous IE (voir actuellement une page exemple active sous Internet explorer) :

http://www6.nordnet.fr/alberti/photosGiteExt.htm

je cherche une façon de programmer mes pages XSL pour
obtenir l'affichage (sous tous les navigateurs) des images dont le chemin est stocké dans un fichier XML qui me sert de base de données :

j'ai essayé : exemple XML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/HTML" href="galerie_photo2ter.xsl"?>
<gite>
<photo>
<auteur>L.A.</auteur>
<cat>ext</cat>
<rub>paysage</rub>
<date></date>
<image src="/images/GitePanoreglcom650.jpg"/>
<titre>panorama </titre>
<dim> </dim>
</photo>
 
<photo>
<auteur>L.A.</auteur>
<cat>int</cat>
<rub>paysage</rub>
<date></date>
<image src="/images/gitSaM.jpg"/>
<titre>salle à manger </titre>
<dim>  </dim>
</photo>
</gite>

par un fichier XSL qui permet de le mettre en page et les trier selon la catégorie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" doctype-public="-//W3C//DTD HTML 4.01//EN"
doctype-system="http://www.w3.org/TR/html4/strict.dtd" indent="yes"/>
 
<xsl:template match="/">
<xsl:apply-templates select="img src"/>
 
<html>
<head>
</head>
<body bgcolor="white">
 
<xsl:for-each select="gite/photo">
</xsl:for-each>
 
 
<table align="center" border="5" bordercolor="#00185A" bgcolor="#ffffcc" length="650" width="650">
<tr  align="center" bgcolor="white"><td bgcolor="ivory" align="center"> 
<!--
<img src="{@src}"/>
-->
<img><xsl:attribute name="src">
<xsl:value-of select='@src'/></xsl:attribute></img>
 
<xsl:if test =".[cat=='ext']">
</xsl:if>
 
</td>
</tr>
</table>
 
</body>
</html>
 
</xsl:template>
</xsl:stylesheet>

le but est de sélectionner par critère et de ne voir affichées que les images triées par catégorie (CAT = ext) par exemple

Merci si vous pouvez m'orienter car tel que c'est : çà ne marche pas... enfin le fichier XSL n'active rien :
Quand je teste la lecture de mon fichier en apercu sous quelque-soit le navigateur.
les images apparaissent dans mon fichier XML mais sans aucune mise en forme ...
d'avance merci du conseil !

**tsuji** · 08/03/2014, 13h38

Quelque peu comme ça.

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<xsl:template match="/">
    <html>
    <head>
    </head>
    <body bgcolor="white">     
    <table align="center" border="5" bordercolor="#00185A" bgcolor="#ffffcc" length="650" width="650">
        <xsl:apply-templates select="gite/photo[normalize-space(cat)='ext' and image/@src]" />
    </tr>
    </table>
    </body>
    </html>
</xsl:template>
<xsl:template select="photo">
    <tr align="center" bgcolor="white">
        <td bgcolor="ivory" align="center"><img src="{image/@src}" alt="{image/@src}" /></td>
    </tr>
</xsl:template>

ps Les rendrements de style sont un peu archaic : on ne fait presque plus comme ça. On les fait plutôt avec css et attribut style in-line si nécessaire.

**lino100** · 17/03/2014, 23h32

Bonsoir Tsuji et merci de la suggestion.
j'ai testé la formule proposée en fichier xsl telle quelle avec mon fichier exemple XML

j'obtiens en résultat : avec aperçu sous Mozilla

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
L.A.
ext
paysage
 
 
panorama 
 
 
 
 
L.A.
int
paysage
 
 
salle à manger

soit : l'édition texte de mes données mais toujours pas l'affichage des images (ou plutôt ici la seule image dont la CAT est ext) ...
je ne comprends pas où peut être l'erreur.

avec aperçu sous IE et sous CHROME : çà ne passe pas.
merci si vous pouvez tester de votre coté.

**tsuji** · 18/03/2014, 07h10

Je ne vois que deux erreurs dans mon esquisse : ligne #8 </tr> qui ne serait pas là, et ligne #13 où "select" devrait être lu comme "match" - ils sont un peu évidentes que vous ne devriez les découvrir très facilement vous-même - peut-être je suppose trop !

Voici je re-liste le script.

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<xsl:template match="/">
    <html>
    <head>
    </head>
    <body bgcolor="white">     
    <table align="center" border="5" bordercolor="#00185A" bgcolor="#ffffcc" length="650" width="650">
        <xsl:apply-templates select="gite/photo[normalize-space(cat)='ext' and image/@src]" />
    </table>
    </body>
    </html>
</xsl:template>
<xsl:template match="photo">
    <tr align="center" bgcolor="white">
        <td bgcolor="ivory" align="center"><img src="{image/@src}" alt="{image/@src}" /></td>
    </tr>
</xsl:template>

**lino100** · 20/10/2014, 10h39

Merci Tsuji pour votre réponse mais (j'ai du abandonner un temps mes recherches...) je viens de refaire un essai mais çà ne marche pas.

je regrette en effet de ne pas pouvoir détecter les éventuelles inexactitudes qui comme vous avez raison de dire : "ils sont un peu évidentes que vous ne devriez les découvrir très facilement vous-même - peut-être je suppose trop !"

je rappelle :
je suis toujours à la recherche d'une alternative à ActiveXObject que j'utilise sous IE pour faire afficher des images stockées en fichier xml (voir actuellement une page exemple active sous Internet explorer) :
http://www6.nordnet.fr/alberti/photosGiteExt.htm

pouvez-vous m'indiquer un didacticiel qui pourrait m'aider à comprendre ?

d'avance merci

**lino100** · 26/11/2014, 13h03

Bonjour

je désespère de pouvoir résoudre mon problème :

malgré les conseils précédents je ne parviens pas à faire afficher les images sous Firefox ou Google chrome alors qu'elles s'affichent sous IE.
quelqu'un pourrait-il analyser les exemples que je donne précédemment et me répondre ou m'indiquer un didacticiel qui parle de çà ?

Bien cordialement,

**tsuji** · 04/12/2014, 18h01

Ça fait tellement longtemps... pour un problème en principe assez routinier. Je reviens pour voir ce qui peut se passer. Il y a là une erreur dans l'instruction de processus assez bête.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<!--
<?xml-stylesheet type="text/HTML" href="galerie_photo2ter.xsl"?>
-->
<?xml-stylesheet type="text/xsl" href="galerie_photo2ter.xsl"?>

J'espère ça résout finalement le problème pour vous !

**lino100** · 14/01/2015, 21h51

J'ai refait les essais avec les corrections que vous m'avez suggéré, tsuji, mais je ne récupère que du texte.... mais les images n'apparaissent pas.

désolé je dois être borné. mais si vous vouliez bien tester de votre coté selon le code de l'exemple donné, je vous serais très reconnaissant de me confirmer que vous
voyez bien apparaître les images.

Bien cordialement,

**tsuji** · 15/01/2015, 17h20

désolé je dois être borné. mais si vous vouliez bien tester de votre coté selon le code de l'exemple donné, je vous serais très reconnaissant de me confirmer que vous voyez bien apparaître les images.

Volontiers, et c'est positive.

Mais, ça n'est pas une confirmation qui vous aide au final. Il faut que vous compreniez ou se trouve l'image jpg, dans quel répertoire (réel ou virtuel). Dans un site web c'est /images par rapport à la racine d'un domaine (ou le mot que je ne sache); dans une système windows de fichiers de "driver c", par exemple, c'est c:\images si vous voulez tester par charger le fichier xml local en une navigateur; dans un système de *nix, ... etc.

En un mot, ce n'est pas n'importe où !

**lino100** · 03/03/2015, 14h12

Envoyé par tsuji

Volontiers, et c'est positive.

Mais, ça n'est pas une confirmation qui vous aide au final. Il faut que vous compreniez ou se trouve l'image jpg, dans quel répertoire (réel ou virtuel). Dans un site web c'est /images par rapport à la racine d'un domaine (ou le mot que je ne sache); dans une système windows de fichiers de "driver c", par exemple, c'est c:\images si vous voulez tester par charger le fichier xml local en une navigateur; dans un système de *nix, ... etc.

En un mot, ce n'est pas n'importe où !

Je crois définitivement que je n'y comprends plus rien !
je n'obtiens que du texte quoi que je fasse ...

Merci de me lister un exemple de votre création et le mode d'emploi pour le tester sur mon ordinateur ainsi je pourrai peut-être comprendre comment vous faites ...

Allez, bien cordialement.

**tsuji** · 03/03/2015, 19h12

Cela fait douze mois entiers et mes interventions ne parviennent pas à vous faire progresser le sujet ? C'est désolant. Allez, le même et bon courage !

**lino100** · 03/03/2015, 19h27

Envoyé par tsuji

Cela fait douze mois entiers et mes interventions ne parviennent pas à vous faire progresser le sujet ? C'est désolant. Allez, le même et bon courage !

Eh oui tout le monde n'a pas votre science !... , mais si vous ne voulez pas la partager, à quoi bon ce forum !!! allez de même et, bon amusement !

**lino100** · 26/05/2015, 12h42

Malgré les "efforts" de Tsuji je n'ai pas réussi à solutionner le problème expliqué ci-dessus.

Peut-être lui-même ou quelqu'un d'autre pourra-t-il me réexpliquer mieux sa solution ? Je continue à croire que
la communauté Developpez.com pourra me tirer d'affaire.

merci d'avance

**lino100** · 31/07/2015, 22h52

Je fais une nouvelle demande : Y a-t-il un didactiticiel ou quelqu'un sur ce forum qui puisse m'aider à trouver une alternative à ActiveXObject que j'utilise sous IE (voir actuellement une page exemple active sous Internet explorer sur la première page de ma question ci-dessus), pour afficher des images stockées dans un fichier xml sous xslt

gardons espoir !...

**lino100** · 28/01/2016, 14h53

Bon ! N'ayant pas obtenu de réponse satisfaisante ou n'ayant pas pu mettre en oeuvre et donc pu contrôler la véracité des conseils précédemment reçus.
Conscient de mon ignorance, je me résigne à reposer la question depuis le début :

Quelqu'un aura-t-il la bonté de réexaminer le problème et me confirmer une solution ?
ou bien me diriger vers un didacticiel qui pourra me guider efficacement ?

ou devrai-je me résigner à utiliser un blog payant ?

Merci d'avance ...? et Bonne Année à Tous !

**thelvin** · 28/01/2016, 16h12

Hello,

En fait, la bonne manière de penser, c'est que tu devrais oublier qu'un jour tu as fait un truc qui utilise XSLT avec ActiveXObject.
Je suis sûr qu'à la lointaine époque où tu as fait ça, il n'y avait presque rien de possible sur le web et faire comme ça ça allait très bien.
Mais il s'est passé des décennies depuis. Aujourd'hui il existe des techniques très simples, faites pour et qui marchent partout. Et ce n'est pas avec XSLT ni avec ActiveXObject. Ça n'aurait jamais dû l'être. Aucun des deux n'est bon pour faire ça. XSLT est bon pour autre chose que ce que tu fais, et ActiveX... Passons.

Alors il faut oublier XSLT et ActiveXObject. Il ne faut pas leur chercher un remplacement. Il faut chercher comment faire ce que tu as à faire.
Tu veux afficher des données qui viennent d'un fichier XML et non pas d'une base de données. C'est très simple.

Il suffit d'utiliser les techniques AJAX. Nous avons des tas de tutoriels AJAX dans notre club. Prends-en, et tu auras tout ce dont tu as besoin. Pas besoin d'ActiveXObject, et pas besoin de XSLT non plus. Voilà.

Je vais même te prouver que ça marche.

Voici un fichier XML qui contient une base de données. Il s'appelle noms.xml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<noms>
  <nom>lino100</nom>
  <nom>thelvin</nom>
  <nom>tsuji</nom>
</noms>

Et voici une page HTML qui affiche ces données. Elle s'appelle noms.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<meta charset="utf-8">
 
<script>
  function allerChercherLesNoms() {
 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'noms.xml');
    xhr.onreadystatechange = function(result) {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        if(xhr.status == 200) {
          afficherLesNoms(xhr.responseXML);
        } else {
          alert("Hum, on a pas trouvé le fichier XML. L'URL doit pas être bonne, genre on s'est trompé sur son nom ou un truc comme ça.");
        }
      }
    };
    xhr.send();
  }
 
  function afficherLesNoms(xml) {
    var liste = document.getElementById("liste");
    for(nom of xml.getElementsByTagName("nom")) {
      liste.innerHTML += "<li>" + nom.textContent + "</li>";
    }
  }
 
  document.addEventListener("DOMContentLoaded", allerChercherLesNoms);
</script>
 
<p>Voici une liste des types qui ont parlé ici :</p>
<ul id="liste"></ul>

Juste ces deux fichiers côte à côte, ouvrir le fichier HTML dans un navigateur, et ça fonctionne très bien.

Plus qu'à apprendre à utiliser AJAX, et éventuellement jQuery pour simplifier les choses, et tu peux faire tout ce que tu veux.

Nous noterons au passage, que des bases de données gratuites, donc pas à louer, il y en a plein. Et donc qu'il n'y avait peut-être pas besoin de rechigner à faire comme tout le monde.
D'un autre côté, ce n'est plus très compliqué de faire comme ça, de nos jours.

Afficher des images triées dans un fichier XML avec XSL

XML/XSL et SOAP

Discussions similaires

Partager

Partager