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.

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

Odpovědět