Aktivní webová stránka pomocí XML

16. prosince 2002

•

Pokud na svých webových stránkách zobrazujete dynamická data, například různé sestavy, nabídky a podobně, které se periodicky aktualizují, většinou míváte tato data uložena v databázi. Pro jednodušší účely můžete databázi do určité míry nahradit XML daty. Při aktualizaci pak upravujete pouze jednoduchý XML soubor. V tomto článku vám na konkrétním příkladu předvedu, jak na to.

Příklad zde popisovaný ukazuje jednoduchou HTML stránku, která nabízí k prodeji CD nosiče, zatříděné podle hudebního žánru. Příklad je funkční pouze v Microsoft Internet Exploreru 5.0 a vyšším, protože používá Microsoft XML Parser, který je součástí uvedeného browseru. Článek předpokládá znalost alespoň základních pojmů z oblasti XML.

Jako první vytvořte DTD soubor s definicí struktury XML dat. Tento soubor nazvěte cd.dtd. Tady je jeho výpis:

<!ELEMENT ROOT (SKUPINA+)>
<!ELEMENT SKUPINA (ALBUM+)>
<!ELEMENT ALBUM EMPTY>
<!ATTLIST ROOT
  obchod CDATA #REQUIRED>
<!ATTLIST SKUPINA
  typ CDATA #REQUIRED>
<!ATTLIST ALBUM
  nazev CDATA #REQUIRED
  interpret CDATA #REQUIRED
  id CDATA #REQUIRED>

Položka SKUPINA reprezentuje seskupení nosičů podle hudebního žánru, „typ“ je názvem tohoto žánru. Položka ALBUM reprezentuje konkrétní CD album, parametry nazev a interpret jsou jasné, id může reprezentovat prodejní kód alba nebo jiný jednoznačný identifikátor. Ještě zřejmější bude popisovaná struktura XML dat z jejich konkrétního příkladu. Zde je výpis souboru, který nazvěte cd.xml:

<?xml version=“1.0″ encoding=“windows-1250″ ?>
<!DOCTYPE ROOT SYSTEM „cd.dtd“>
<ROOT obchod=“CD_disky“>
<SKUPINA typ=“Country“>
  <ALBUM nazev=“Come Fill Up Your Glasses“ interpret=“Irish Rovers“ id=“1″/>
  <ALBUM nazev=“AT MADISON SQUARE GARDEN“ interpret=“Johnny Cash“ id=“2″/>
</SKUPINA>
<SKUPINA typ=“Jazz“>
  <ALBUM nazev=“Romance“ interpret=“Frank Sinatra“ id=“3″/>
  <ALBUM nazev=“Live At Lucerna Hall“ interpret=“Louis Armstrong“ id=“4″/>
</SKUPINA>
</ROOT>

Všimněte si prvního řádku tohoto souboru, který definuje kódování pro něj použité. Pokud by tento řádek v souboru chyběl, XML parser u každého českého znaku zahlásí chybu a odmítne soubor zpracovat. Tento řádek je důležitý i v následujících souborech.

Počet žánrových skupin, respektive jednotlivých alb v rámci každé skupiny, není omezen a můžete jej libovolně rozšiřovat. Důležité při rozšiřování je pouze to, aby XML dokument byl „well formed“, tedy aby odpovídal obecným zásadám tvoření XML souboru a aby byl „valid“, neboli platný ve vztahu k výše uvedené definici v souboru cd.dtd. V této definici jsou parametry typ, nazev, interpret a id definovány jako povinné.

Dalším souborem, který je nutné vytvořit, je soubor zobrazující žádaným způsobem data uložená v souboru cd.xml. Jedná se o soubor s příponou XSL, nazvěte jej tabulka.xsl. Žádaným způsobem zobrazení bude v tomto případě tolik tabulek, kolik je v XML souboru skupin, přičemž každý řádek tabulky bude vždy obsahovat údaje o jednom albu a checkbox, jehož hodnota atributu value bude ID převzaté z XML dat. Každá tabulka bude nadepsána názvem hudebního žánru. Tady je výpis souboru:

<xsl:stylesheet xmlns:xsl=“http://www.w3.org/TR/WD-xsl“>
<?xml version=“1.0″ encoding=“windows-1250″ ?>
<xsl:template match=“/“>
  <xsl:for-each select=“//SKUPINA“>
    <xsl:value-of select=“@typ“/>
    <table class=“in“>
    <tr><th></th><th>Název</th><th>Interpret</th></tr>
    <xsl:for-each select=“ALBUM“ order-by=“@interpret“>
      <tr><td><input type=“checkbox“ name=“check“><xsl:attribute name=“value“><xsl:value-of select=“@id“/></xsl:attribute></input></td>
      <td><xsl:value-of select=“@nazev“/></td>
      <td><xsl:value-of select=“@interpret“/></td></tr>
    </xsl:for-each>
    </table>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Vnější cyklus for-each jde přes všechny skupiny v XML datech. Vnitřní jde přes všechna alba v příslušné skupině a všimněte si i řazení podle interpreta.

Každá tabulka má vždy tři sloupce. V prvním sloupci je vždy pouze checkbox, který se mění pouze v atributu value (pro první album tedy <input type="checkbox" name="check" value="1">. Všimněte si syntaxe způsobu, jakým je zaneseno ID alba do hodnoty atributu value.Zápis <xsl:attribute name="value"> znamená, že hodnota má být zapsána do atributu value tagu INPUT, do něhož je tento zápis vnořen. Zápis <xsl:value-of select="@id"/> pak reprezentuje hodnotu ID parametru převzatou z XML dat procházených v cyklu.

Nezapomeňte na to, že XSL dokument je vlastně také formou XML dat a tedy musí být „well formed“. Například každý počáteční tag musí mít i svůj tag koncový. Setkáváte se zde tedy třeba s koncovým tagem </input>, který v HTML nepoužíváte.

Budete potřebovat ještě jeden XSL soubor, kterým nadefinujete SELECT tag, jehož položkami budou názvy hudebních žánrů, které jsou obsaženy v XML datech. Podle výběru položky se dynamicky zobrazí příslušná tabulka s alby příslušného žánru. Tento soubor nazvěte filtr.xsl:

<xsl:stylesheet xmlns:xsl=“http://www.w3.org/TR/WD-xsl“>
<?xml version=“1.0″ encoding=“windows-1250″ ?>
<xsl:template match=“/“>
<select onChange=“Zobraz(this.value)“>
  <option value=““>všechno</option>
  <xsl:for-each select=“//SKUPINA“>
    <option><xsl:attribute name=“value“><xsl:value-of select=“@typ“/></xsl:attribute><xsl:value-of select=“@typ“/></option>
  </xsl:for-each>
</select>
</xsl:template>
</xsl:stylesheet>

Syntaxe a sémantika použitá v tomto souboru se žádným způsobem neliší od té, která byla vysvětlena na příkladu souboru tabulka.xsl.

Posledním souborem, který bude zapotřebí, je samotný HTML soubor, který bude se všemi výše uvedenými soubory spolupracovat. Nazvěte jej cd.html:

<HTML>
<head>
<title>Příklad</title>
<STYLE TYPE=“text/css“>
TABLE.in {
font-size : 13px;
font-family : „Arial CE“, „Arial“, „Times New Roman“;
color : Black;
background-color : #89b8da;
border-width : thin;
border-color : Gray;
border-style : solid;
margin-top : 10px;
margin-bottom : 10px;
margin-right : 10px;
}
</STYLE>
<XML id=“dataXML“ src=“cd.xml“></XML>
<XML id=“fTbl“ src=“tabulka.xsl“></XML>
<XML id=“fFlt“ src=“filtr.xsl“></XML>
<script language=javascript>
function wnd_onload(){
var oXML=document.getElementById(‚dataXML‘);
var oTBL=document.getElementById(‚tbl‘);
var oTFL=document.getElementById(‚fTbl‘);
var oFLT=document.getElementById(‚fFlt‘);
var ooFLT=document.getElementById(‚flt‘);
oTBL.innerHTML=oXML.XMLDocument.transformNode(oTFL.XMLDocument)
ooFLT.innerHTML=oXML.XMLDocument.transformNode(oFLT.XMLDocument)
}
function Zobraz(val){
var oXML=document.getElementById(‚dataXML‘);
var oTBL=document.getElementById(‚tbl‘);
var oTFL=document.getElementById(‚fTbl‘);
var node=oTFL.XMLDocument.selectSingleNode(„//@select“)
if (val==““) {
node.text=“//SKUPINA“;
}else{
node.text=“//SKUPINA[@typ $eq$ ‚“ + val + „‚]“
}
oTBL.innerHTML=oXML.XMLDocument.transformNode(oTFL.XMLDocument)
}
</script>
</head>
<body onLoad=“wnd_onload()“>
<div id=“flt“>
</div>
<br>
<form action=“get_values.asp“ method=“post“>
<div id=“tbl“>
</div>
<br>
<input type=“submit“ value=“ Objednat „>
</form>
</body>
</HTML>

Na řádcích <XML id="dataXML" src="cd.xml"></XML> až <XML id="fFlt" src="filtr.xsl"></XML> se načtou do XML parseru veškerá data potřebná pro dynamickou funkci HTML stránky. Tato data jsou dále ovládána JavaScriptem. Ve funkci wnd_onload se zobrazí tabulky s alby (řádek oTBL.innerHTML=...) a vytvoří tag SELECT (řádek ooFLT.innerHTML=...).

Funkce Zobraz se zavolá vždy při změně hodnoty v tagu SELECT. V ní je nejdůležitější řádek node.text="//SKUPINA[@typ $eq$ '" + val + "']". Ten omezuje použitý filtr XML dat pouze na tu skupinu, jejíž hodnota parametru typ je shodná s hodnotou, jež je aktuálně vybraná v tagu SELECT.

Nyní nakopírujte všechny soubory do stejného adresáře a můžete si celý příklad vyzkoušet. Závěrem zdůrazňuji, že pokud budete chtít aktualizovat data zobrazovaná uvedenou aplikací, budete měnit pouze soubor cd.xml a žádný jiný.