A megvalósításhoz a Delphi-hez adott DBDEMOS alias név alatt elérhető adattáblák közül az Animals.dbf állományt használjuk fel. A készítendő program alapjait az első részben részletesen ismertettük, így ezeken a lépéseken csak címszavakban fussunk végig.
Nyissunk egy új WebSnap alkalmazást. Ismét a Web App Debugger executable típust válasszuk, melynél a CoClass nevet a mellékelt példában Two-ra választottuk.
A létrejött új projectben rögtön létrehozunk egy új lapot, vagyis egy új Web Snap PageModule-t. Mivel minden beállítási lehetőséget alapértéken hagytunk, így ennek az oldalnak a neve PageProducerPage3 lesz.
A létrejövő modulban rögtön töröljük a PageProducer1 komponenst, mivel erre nem lesz szükségünk.
Az adattábla eléréséhez tegyük a következőket: a BDE palettáról vegyünk le egy Session komponenst, majd az AutoSession property-jét állítsuk igazra.
Vegyünk le egy Table komponenst is. Itt a DatabaseName-nél válasszuk ki a DBDEMOS aliast, a TableName property-nél az Animals.dbf-et végül az Active property igazra állításával nyissuk meg a táblát. Ezek után vegyük fel a mezőszerkesztőben az első négy mezőt: Table1 komponens dupla kattintás, majd Ctrl + F. A felvett mezők közül most válasszuk ki a NAME nevűt. Az Object Inspector-ban a ProviderFlags property-nél a pfInKey értéket állítsuk igazra. A későbbiekben használandó WebSnap komponensek miatt van szükség erre a lépésre. Ez fogja meghatározni, hogy a táblában melyik lesz az a kulcs mező, amely alapján megtalálható egy-egy rekord.
Lapozzunk a WebSnap palettára és egy DataSetAdapter komponenst is helyezzünk a PageModule-ra. Ennek DataSet property-jénél kell kiválasztanunk a Table1 komponenst. Ez az adapter komponens biztosítja a kapcsolatot a tábla illetve a web oldal generáló komponens között.
Ez utóbbi most az AdapterPageProducer lesz, melyből szintén elhelyezünk egyet. E komponens WebPageItems property-ére kattintva, vagy magán a komponensen duplán kattintva megnyílik egy olyan ablak, ahol összeállíthatjuk, hogy minek kell szerepelnie a weblapon az adattáblából. Kattintsunk a New Item gombra, a megjelenő ablakból pedig válasszuk a New AdapterForm elemet. Ekkor a bal oldali hierarchiában megjelenik egy Adapter1 nevű objektum, melyre kattintva az Object Inspector-on keresztül el is érhetjük a tulajdonságait. Válasszuk ki tehát az Adapter1-et, majd ismét kattintsunk a New Item gombra. A megjelenő listából most a New AdapterGrid-et válasszuk ki. Ezzel tudunk táblázatot készíteni a web oldalunkra. A szerkesztő ablak alsó felében a Browser lapon ekkor megjelenik egy hibaüzenet "AdapterGrid1: Adapter property is nil", vagyis az AdapterGrid1 objektum Adapter property-je nincs beállítva. Ennek megoldásaként válasszuk ki e property-nél a DataSetAdapter1 komponenst. Ekkor a hibaüzenet eltűnik és máris látható lesz a majdani web oldalon megjelenő táblázat.
Hogy ez élesben is megjelenjen, ahhoz még szükségünk van néhány apró lépésre. Az egyik ilyet a Unit3.htm-ben kell elvégeznünk. Válasszuk a Unit3-at, majd a forráskód szerkesztő ablak alján váltsunk át a Unit3.htm állományra és ennek végére, de még a web oldalt lezáró html kód elé szúrjuk be a <#SERVERSCRIPT> sztringet. A web lapunk megjelenítésekor ennek helyére kerül az adattábla táblázata.
Kattintsunk most a PageProducerPage3 nevű PageModule-ra. Ennek van egy PageProducer nevű property-je. Itt kell megadni azt a komponenst, mely az adott web oldal tartalmát szolgáltatja. Mivel kezdetben letöröltük a PageProducer1 komponenst, így oldalunkat nem generálná le semmi. Ezért itt most válasszuk ki az AdapterPageProducer1 komponenst, mely szolgáltatja majd a web oldal tartalmát a táblázattal együtt.
Ezen a ponton alkalmazásunk már működőképes, próbáljuk is ki rögtön. Ehhez futtassuk a programot, majd zárjuk be. Ezzel a szükséges információ bekerült a regisztrációs adatbázisba. Indíthatjuk a Web App Debugger-t a már ismert módon és keressük elő a Project2.Two elemet, majd a Go gombbal eljutunk az új alkalmazásunk oldalára. A megjelenő web lapon a PageProducerPage3 linket választva jutunk arra a lapra, mely az Animals.dbf táblázatát tartalmazza.
Ha megvagyunk a próbával, térjünk vissza a Delphi-hez. Nézzük miként tudjuk befolyásolni a létrejött táblázat külalakját.
Ehhez válasszuk az AdapterPageProducer1 komponenst és kattintsunk rajta duplán. A megjelenő ablakban keressük elő az AdapterGrid1 objektumot, majd jobb gomb és Add All Columns menüpont. Ekkor a Delphi a táblázatunk minden oszlopához létrehoz egy-egy objektumot, melyek tulajdonságát az Object Inspector-on keresztül állíthatjuk.
Válasszuk a ColNAME objektumot, majd a Caption property-jébe írjuk be, hogy "Név". Az eredmény rögtön látható is lesz: a Name oszlop fejléce Név-re változik.
Jelöljük ki a ColSIZE és ColWeight objektumokat, majd az Align property-nél válasszuk a haRight értéket. Ezzel elérjük, hogy e két számokat tartalmazó oszlop értékei jobbra igazítva jelennek meg.
Válasszuk a ColAREA objektumot és a Custom property-hez írjuk a következőt: style="border: solid blue 1". A Custom property-ben egy tetszőleges HTML kódot adhatunk meg, melyet a programunk beilleszt a megfelelő helyre. Jelen esetben e kóddal körbekeretezünk minden ebben az oszlopban megjelenő szöveget.
Végül az AdapterGrid1-et választva a TableAttributes property Border property-jénél adjunk nullát értékül. Ezzel a táblázat körül eltüntettük a keretezést.
Ezzel a mellékelt példával el is készültünk.