XML – listování pomocí datových ostrůvků

    0

    Představte si situaci, kdy disponujete větším seznamem produktů (v našem případě knih), který potřebujete v lehce stravitelné podobě předložit návštěvníkům vašeho serveru. Vypsat na stránku desítky či stovky položek asi nebude příliš šťastným řešením. Díky ostrůvkům dat v XML lze ze seznamu vytvořit jednopoložkovou tabulku a daty jednoduše listovat pomocí tlačítek.

    Nejdříve potřebujete vytvořit zdroj dat. Já jsem zvolil seznam knih. Ten můžete samozřejmě generovat z databáze.

    <?xml version=“1.0″ encoding=“Windows-1250″?>
    <nabidka>
       <kniha>
          <nazev>Excel jednoduše</nazev>
          <autor>Ivo Magera</autor>
          <popis>Potřebujete se naučit zacházet s Excelem, ale nemůžete učení obětovat týdny času?</popis>
          <cena>93</cena>
       </kniha>
       <kniha>
          <nazev>MS Outlook 2002 Jednoduše</nazev>
          <autor>Jaroslav Černý</autor>
          <popis>Chcete se naučit pracovat s Outlookem rychle a snadno?</popis>
          <cena>99</cena>
       </kniha>
       <kniha>
          <nazev>Web a databáze</nazev>
          <autor>Luboslav Lacko</autor>
          <popis>Vše o databázích na webu.</popis>
          <cena>279</cena>
       </kniha>

    </nabidka>

    Kompletní XML soubor najdete zde.

    Nyní už stačí pouze vytvořit HTML stránku, do které budete data "natahovat":

    <html>
    <head>
    <title>Nabídka knih</title>
    </head>
    <body>
    <h3>Aktuální nabídka titulů</h3>
    <xml id=“Books“ SRC=“booksdata.xml“></xml>// pojmenování a nastavení zdroje dat
    <table border=“1″ width=“500″ id=“tblData“ datasrc=“#Books“ datapagesize=“1″>// id identifikuje tabulku pro pozdější práci navigačních tlačítek, datasrc uvádí zdroj dat a datapagesize udává počet záznamů na stránku (můžete nastavit libovolně)
       <tr>
          <td width=“120″>Název:</td>
          <td width=“380″><span datafld=“nazev“></span></td>
       </tr>
       <tr>
          <td width=“120″>Autor:</td>
          <td width=“380″><span datafld=“autor“></span></td>
       </tr>
       <tr>
          <td width=“120″>Popis</td>
          <td width=“380″><span datafld=“popis“></span></td>
       </tr>
       <tr>
          <td width=“120″>Cena:</td>
          <td width=“380″><span datafld=“cena“></span> Kč</td>
       </tr>
    </table>
    <input type=“button“ value=“<<“ onClick=“tblData.firstPage();“>
    <input type=“button“ value=“<“ onClick=“tblData.previousPage();“>
    <input type=“button“ value=“>“ onClick=“tblData.nextPage();“>
    <input type=“button“ value=“>>“ onClick=“tblData.lastPage();“>
    </body>
    </html>

    Výsledek si prohlédněte zde. Připomínám, že jde o technologii Microsoftu a vše funguje pouze pod MSIE.
    Jak vidíte, je vytvoření ostrůvku i navigace opět velmi jednoduché.

    Význam hodnoty onClick navigačních tlačítek je myslím zcela jasný. Výhodou je procházení záznamů bez nutnosti použití přídavného JavaScriptu. Pokud vám však 
    z nějakého důvodu JS chybí, uvádím i příklad takového řešení:

    <html>
    <head>
    <title>Nabídka knih</title>
    </head>
    <script language=“JavaScript“>
    <!–
    function Booksfirst(){
       data.recordset.moveFirst();
    }
    function Booksprevious(){ 
       if(data.recordset.absoluteposition>1)
       data.recordset.movePrevious();
    }
    function Booksnext(){
       if(data.recordset.absoluteposition < data.recordset.recordcount)
       data.recordset.moveNext();
    }
    function Bookslast(){
       data.recordset.moveLast();
    }
    –></script>
    <body>
    <h3>Aktuální nabídka titulů</h3>
    <xml id=“data“ SRC=“booksdata.xml“></xml>
    <table border=“1″ width=“500″>
       <tr>
          <td width=“120″>Název:</td>
          <td width=“380″><span dataSrc=“#data“ datafld=“nazev“></span></td>
       </tr>
       <tr>
          <td width=“120″>Autor:</td>
          <td width=“380″><span dataSrc=“#data“ datafld=“autor“></span></td>
       </tr>
       <tr>
          <td width=“120″>Popis</td>
          <td width=“380″><span dataSrc=“#data“ datafld=“popis“></span></td>
       </tr>
       <tr>
          <td width=“120″>Cena:</td>
          <td width=“380″><span dataSrc=“#data“ datafld=“cena“></span> Kč</td>
       </tr>
    </table>
    <input type=“button“ value=“|<“ onClick=“Booksfirst()“></input>
    <input type=“button“ value=“<“ onClick=“Booksprevious()“></input>
    <input type=“button“ value=“>“ onClick=“Booksnext()“></input>
    <input type=“button“ value=“>|“ onClick=“Bookslast()“></input>
    </body>
    </html>

    Sami máte možnost vidět, že použité formátování není velmi přívětivé. Použijte tedy CSS a stránku s nabídkou naformátujte do přijatelnějšího tvaru. Navíc se zbavíte zkostnatělé tabulky.

    <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
    <html>
    <head>
       <meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
       <meta http-equiv=“Content-language“ content=“cs“>
       <meta http-equiv=“Content-Style-Type“ content=“text/css“>
       <style media="all" type="text/css">@import "books.css";</style>
       <title>Akční nabídka knižních titulů</title>
       <script type=“text/javascript“ src=“booksnav.js“></script>
    </head>
    <body>
    <div class=“nadpis“>Nabídka knih</div>
    <script type=“text/javascript“ src=“setxml.js“></script>
    <div class=“databrd“>
       <div class="line">
          <span class=“popisek“>Název: </span><span class=“text“ datasrc=“#Books“ datafld=“nazev“></span>
       </div>
       <div class="line">
          <span class=“popisek“>Autor: </span><span class=“text“ datasrc=“#Books“ datafld=“autor“></span>
       </div>
       <div class="line">
          <span class=“popisek“>Popis: </span><span class=“text“ datasrc=“#Books“ datafld=“popis“></span>
       </div>
       <div class="line">
          <span class=“popisek“>Cena: </span><span class=“text“><span datasrc=“#Books“ datafld=“cena“></span> &nbsp; Kč </span>
       </div>
    </div>
    <p>
       <script type=“text/javascript“ src=“buttons.js“></script>
    </p>
    </body>
    </html>

    Výsledek najdete zde.
    Kompletní zdroje všech příkladu si můžete stáhnout zde.

    Starší komentáře ke článku

    Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

    Mohlo by vás zajímat

    Žádný příspěvek v diskuzi

    Odpovědět