Delphi - Internet áruház

Internet áruház 5. rész

forráskód letöltése
Internetes áruházunk készítésének mostani fejezetében kissé elkanyarodunk az eddigi fejlesztési vonaltól és elkezdjük kialakítani az áruház arculatát, elkészítjük azokat a web oldalakat és a hozzájuk szükséges programot, mellyel már a vevő fog találkozni, ha felkeresi üzletünket. A mellékelt példaprogram megnyitása előtt kérjük, hozza létre az ASWEBSHOP05 alias-t. Ez mutasson a mellékelt példaprogram Data könyvtárára, az adatbázis elérés végett. A programban talál egy HTMDIR konstanst. Ez szintén a Data könyvtár elérési útvonalát kell hogy tartalmazza, ha Ön ettől eltérő helyre másolta a példát, akkor fordítás előtt kérjük módosítsa ezt.
A lefordított WS05.EXE-t helyezze a web szerver scripts könyvtárába, ahonnan az futtatható.
A mellékelt HTM könyvtár tartalmát pedig helyezze el a web szerveren úgy, hogy az egy böngészőn keresztül elérhető legyen. Például: C:\Inetpub\wwwroot\webshop\05\. Ekkor a böngészőbe a www.animare.hu/webshop/05/ cím beírásakor meg kell hogy jelenjen a kezdő oldal. Persze a web szerver neve mindenkinél más és más lesz. A mellékelt példában a webshop\05\ könyvtárra több hivatkozás is van, így kérjük ettől Ön se térjen el.

A jelenlegi cikk elolvasása előtt javasoljuk a sorozat előző részeinek megismerését, mivel a mostani ismeretek csupán kiegészítői az előzőeknek, így azok ismerete nélkül e konkrét cikk tartalma sem érthető meg teljes egészében.


A nyitóoldalon most csak egy linket találunk, mellyel beléphetünk a virtuális üzletünkbe. A link a ws05.exe-re mutat paraméter nélkül. Ekkor az üzlet fő oldala kell, hogy megjelenjen, melyen a termékeket listázzuk ki.

Amikor tehát erre a linkre kattintunk, akkor kerül lefuttatásra a WebModule első, alapértelmezett akciója, a WebActionItem1. Ennél az OnAciton eseményénél a mellékelt main.htm állományt szolgáltatjuk a PageProducer1 komponens segítségével.

A main.htm állomány felépítése két oszlopra bontható: a képernyő bal oldalán a termékek adatbázist listázzuk ki a vevő részére, míg a jobb oldalra kerülnek majd a kosár kezelésével kapcsolatos információk.

Ehhez a main.htm egy olyan táblázatot tartalmaz, melynek két egymás melletti cellája van. Mindegyikben egy-egy címke.
<table border=0 width="95%">
<tr>
<td>
<#product>
</td>
<td width="200px" valign=top style="border-left-width: 1; 
   border-left-style: outset; border-left-color:#A0A0A0">
<#box>
</td>
</tr>
</table>

A product nevű címke helyére kerül majd a termékek adatbázisának listája, míg a box címke helyére a kosár tartalma.

Nézzük most a termékek adatbázisát a Product.dbf-et. Amikor ehhez a címkéhez ér a PageProducer1 komponens, akkor jön létre az OnHTMLTag nevű eseménye. Itt a TagString paraméterben kapjuk az aktuálisan megtalált címkét. Ha ez a product, akkor megnyitjuk az adatbázist, majd a PageProducer2 komponensbe betöltjük a product.dat állományt, mely egy táblázatot tartalmaz a Product.dbf adatbázisról.

Ez a táblázat, vagyis a product.dat az alábbit tartalmazza:
<table border=0 cellpadding=10>
<#productitem>
</table>
Látható, hogy ez csak a táblázat kerete és az egyes sorok, melyek az adatbázis egyes rekordjainak felelnek meg, nem lettek megvalósítva, helyettük csak egy productitem nevű címke került ide. Erre azért van szükségünk, mert nem tudhatjuk előre, hogy aktuálisan hány rekord lesz az adatbázisunkban.

Amikor tehát a PageProducer2 komponens megtalálja a productitem címkét, akkor a komponens OnHTMLTag eseményénél lehetőségünk van arra, hogy egy ciklus segítségével végigmenjünk az adatbázis rekordjain és kilistázzuk azokat.

Ezt úgy valósítjuk meg, hogy a PageProducer3 komponensbe betöltjük a productitem.dat állományt, mely egy olyan web lap részletet tartalmaz, amely megfelel a táblázat egyetlen sorának. Ezt a cikluson belül annyiszor adjuk a ReplaceText változónak értékül, ahány rekordunk, vagyis termékünk van.

Természetesen a productitem.dat is tartalmaz további címkéket, mivel minden egyes terméknél más lesz a megnevezés, ár, stb. Ezeket a PageProducer3 komponens OnHTMLTag eseményénél kezeljük le.

Ezzel tulajdonképpen meg is valósítottuk, hogy a Product.dbf-et kilistázzuk egy web lapra, egyedi formátumban.

A jelenleg kitűzött feladatunk ezzel meg is valósult: ha felvesz egy új rekordot a Product.dbf-be, akkor annak tartalma rögtön meg is jelenik a web lapon, csupán frissíteni kell azt.

A továbbiakban vizsgáljuk meg figyelmesen az eddig használt megoldásokat. Rövidesen beláthatjuk, hogy nagyon sok ismétlődő feladatot kellett manuálisan megvalósítanunk. Pedig éppen csak elkezdtük a web áruház valódi megjelenítését.

Megfigyelhető, hogy az eredmény eléréséhez több kis állományt kellett egymásba ágyazni, hogy létrejöjjön a végső web lap. Ez azt eredményezte, hogy több TPageProducer komponenst is fel kellett használnunk, annak ellenére, hogy mindegyiknél hasonló feladatokat kellett elvégezni.

További sok gépeléssel járó feladat volt a PageProducer3 komponens OnHTMLTag eseményének lekezelése, ahol az adatbázis mezőinek értékét kellett behelyettesíteni az adatbázis megegyező nevű mezőivel.

Egy egyszerű adatbázis tartalom listázásánál is igen sok felesleges munkánk volt, a későbbiek folyamán ha továbbra is így folytatnánk a fejlesztést, akkor rengeteg időnk feleslegesen elveszne.

A megoldás most is egy saját fejlesztésű komponens lesz, melyben megoldjuk a fenti nehézségeket, így a jövőben a web áruház fejlesztése nagymértékben felgyorsulhat.

Ezt a komponens viszont már csak a jövő heti részben készítjük el, mivel az egyszerűen használható komponenseket általában bonyolult elkészíteni.


Internet áruház cikksorozat