Come utilizzare XSLT per visualizzare dati XML su una pagina Web HTML
XML è un linguaggio utilizzato per strutturare, archiviare e scambiare dati. XSLT è un altro linguaggio che ti consente di trasformare i tuoi dati XML in altri formati, come HTML.
È possibile utilizzare XSLT per visualizzare i dati XML su una pagina Web HTML. L’utilizzo di XML e XSLT per visualizzare i dati può essere utile, in quanto consente di strutturare i dati in modo sensato per le proprie esigenze specifiche.
Come aggiungere dati di esempio a un file XML
Per visualizzare i dati XML su una pagina Web, devi prima creare il file XML e aggiungervi i dati.
- Crea un nuovo file chiamato data.xml .
- All’interno del file XML, dichiara la codifica e la versione XML:
<?xml version="1.0"encoding="UTF-8"?> - Collega il file XML a un file di foglio di stile XSL, che creerai in un passaggio successivo.
<?xml-stylesheet type="text/xsl"href="xmlstylesheet.xsl"?> - Aggiungere dati al file XML. XML contiene dati strutturati e memorizza ogni punto dati in un tag separato. Questo esempio include un tag root chiamato games . All’interno del tag dei giochi , memorizza ogni singolo gioco all’interno del proprio tag di gioco . Memorizza i dati per ogni gioco come il nome e lo sviluppatore in tag separati.
<?xml version="1.0"encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl"href="xmlstylesheet.xsl"?>
<games>
<game>
<name>The Last of Us Part II</name>
<developer>Naughty Dog</developer>
</game>
<game>
<name>Ghost of Tsushima</name>
<developer>Sucker Punch Productions</developer>
</game>
<game>
<name>Death Stranding</name>
<developer>Kojima Productions</developer>
</game>
</games>
Come utilizzare XSLT per leggere i dati dal file XML
Creare un nuovo file XSL per scorrere ogni punto dati nella pagina XML e visualizzare i dati.
- Nella stessa cartella del file XML, crea un nuovo file chiamato xmlstylesheet.xsl .
- All’interno del file, dichiara la versione XSL e aggiungi la struttura di tag XSL di base:
<?xml version="1.0"encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
// Your code here
</xsl:stylesheet> - All’interno del tag XSL principale, aggiungi un tag modello . Qui è dove puoi aggiungere codice HTML personalizzato per visualizzare e modellare i tuoi dati XML.
<xsl:template match="/">
<html>
<body>
// Your HTML code in here
</body>
</html>
</xsl:template> - All’interno del tag body, utilizza il selettore di tag xsl:for-each . Questo fungerà da ciclo for per scorrere ogni tag di gioco annidato sotto il tag di giochi .
<xsl:for-each select="games/game">
</xsl:for-each> - All’interno del ciclo for-each, visualizza il nome e i punti dati dello sviluppatore, utilizzando il selettore di tag xsl:value-of .
<xsl:value-of select="name" />
<xsl:value-of select="developer" />
Come visualizzare i dati su una pagina Web HTML
Non sarai in grado di aprire il file XSLT o XML direttamente nel browser per visualizzare i dati come parte di una pagina web. Crea un nuovo file HTML e visualizza i dati utilizzando un tag iframe .
- Nella stessa cartella dei file XML e XSL, crea un nuovo file chiamato index.html .
- Aggiungi la struttura di base di un file HTML. Se non hai mai usato l’HTML prima, puoi rispolverare i concetti introduttivi dell’HTML.
<!DOCTYPE html>
<html>
<head>
<title>XML and XSLT Example</title>
</head>
<body>
</body>
</html> - All’interno del tag body , utilizza un tag iframe per collegarti al file XML e al file XSL:
<h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="xmlstylesheet.xsl"></iframe> - Crea un nuovo file chiamato styles.css .
- All’interno del file, aggiungi alcuni CSS per modellare la tua pagina web. Sentiti libero di modificare il tuo CSS usando altri interessanti suggerimenti e trucchi CSS.
html,
body {
height: 100%;
margin: 0;
}body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}p {
margin-bottom: 24px;
} - Collega il tuo file HTML allo stile CSS aggiungendo quanto segue al tag head HTML.
<link rel="stylesheet" href="styles.css"> - Apri il file HTML utilizzando un browser per visualizzare i dati XML. Alcuni browser non supportano XSLT, ma alcuni browser come Firefox sì.
Visualizza i dati nelle pagine Web HTML
Esistono molti modi per visualizzare i dati nelle pagine Web HTML, XML e XSLT sono uno di questi. Sentiti libero di esplorare gli altri modi in cui puoi farlo, come archiviare e visualizzare l’input dell’utente utilizzando JavaScript.
Lascia un commento