Delphi - Internet áruház készítése Delphi-vel

Internet áruház 8. rész

forráskód letöltése
Ezen a héten továbbfejlesztjük az áruházunkat: most már egy-egy terméknél megadható, hogy hány darabot szeretnénk rendelni belőle és lehetőségünk nyílik arra is, hogy kivegyünk termékeket a kosárból a rendelés leadása előtt. A mellékelt példaprogram megnyitása előtt a következő teendőket kell elvégezni, hogy a program működőképes legyen:
  • A HTMLProducer.pas-ban lévő komponenst telepítenie kell a Delphi alá. (Ezt a komponenst a cikksorozat 6. részénél hoztuk létre, forráskódja az ottani példában található!)
  • Kérjük, hozza létre az ASWEBSHOP08 alias-t. Ez mutasson a mellékelt példaprogram Data könyvtárára, az adatbázis elérés végett.
  • A lefordított WS08.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 másolja a C:\Inetpub\wwwroot\webshop\08\ könyvtárba. Ekkor a böngészőben a www.animare.hu/webshop/08/ 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\08\ könyvtárra több hivatkozás is van az egyes web lapokon, í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.


Múlt héten kitaláltunk egy módszert arra, hogy miként is tároljuk el az egyes web lapokon a kosár tartalmát, vagyis azt, hogy a product.dbf táblából mely termékek találhatók a kosárban. Ekkor még nem volt dolgunk a darabszámmal, így elegendő volt egy egyedi azonosító és a termék azonosító száma. Most, hogy már a darab számot is tárolnunk kellene, ez a múlt heti módszer nem felel meg, így azt átalakítjuk a következők szerint: az azonosító továbbra is P betűvel kezdődik. Utána viszont nem egy egyedi szám következik, hanem a termékkód, vagyis a product.dbf ID mezőjének értéke. Az egyenlőség jel után pedig az adott termék mennyisége kap helyett.

Ennek megfelelően a paraméterezés az alábbiak szerint alakul:
pl.: http://www.animare.hu/scripts/ws08.exe?p2=10 esetén a 2. azonosítóval rendelkező termék lesz a kosárban, méghozzá ebből 10 darab.

http://www.animare.hu/scripts/ws08.exe?p2=10&p4=1 esetén a 2. azonosítóval rendelkező termék lesz a kosárban, mennyisége 10 darab, valamint a 4-es kódú termékből 1 darab.

http://www.animare.hu/scripts/ws08.exe esetén a kosár továbbra is üres marad.

További szükségszerű újítás, hogy most már nem elegendő egy egyszerű link a web lapra, hogy az adott terméket betegyük a kosárba, mivel most már lehetőséget kell biztosítanunk a felhasználó számára, hogy egy tetszőleges mennyiséget is beírjon. Ehhez át kell alakítanunk a productitem.dat állományt is:
...
<form action="/scripts/ws08.exe" method=get>
<#boxlink>
<input type=hidden name="<#productid>" 
    value="0">
Ára: <#pricestr><br>
Mennyisége: <input style="width: 40px; text-align: right" 
     type=text name=count value="1"> db<br>
<div align=right>
<input class=but type=submit value="Tegyük a kosárba >>">
</div>
</form>
...
Mint látható létrehoztunk egy FORM-ot, melyen belül egyetlen látható adatbeviteli mező kap helyet, melyben a mennyiséget adhatja meg a felhasználó.
<input style="width: 40px; text-align: right" type=text
    name=count value="1">
Az adott termék azonosítóját egy rejtett mezőben adjuk meg programból a <#productid> címkét felhasználva. Ennek értéke mindig nulla, melyet a programból fel sem használunk. Itt csupán a termék azonosítása a cél, a valódi mennyiséget majd az előbbi adatbeviteli mezőből vesszük amúgy is.
<input type=hidden name="<#productid>" value="0">
Található még egy <#boxlink> nevű címke is, itt tároljuk el a kosár jelenlegi tartalmát, hogy amikor az új termék is bekerül a kosárba, akkor a régiekről is tudjon az alkalmazásunk.


Fentieknek megfelelően át kell írnunk a GetBox eljárásunkat is, mely arra hivatott, hogy az aktuális kosár tartalmát megállapítsa az adott felhasználótól érkezett kérés alapján.
procedure TWebModule1.GetBox;
var
  i, l: integer;
  b: boolean;
  product, pcount: string;
begin
  with Request.QueryFields do begin
    FBoxList.Clear;
    for i:=0 to Count-1 do begin
      b:=false;
      if Names[i][1]='p' then begin
        product:=Names[i];
        pcount:=Values[Names[i]];
        b:=true;
      end;
      if (Names[i][1]='i') and (Names[i][2]='d') then begin
        product:=Names[i];
        System.Delete(product, 1, 2);
        product:='p'+product;
        pcount:=Values['count'];
        b:=true;
      end;

      if b then begin
        l:=0;
        while (l<FBoxList.Count) and (FBoxList.Names[l]
               <>product) do begin
          inc(l);
        end;

        if l<FBoxList.Count then begin
          FBoxList[l]:=product+'='+IntToStr(StrToInt(
             FBoxList.Values[FBoxList.Names[l]])+StrToInt(pcount));
        end else begin
          FBoxList.Add(product+'='+pcount);
        end;
      end;
    end;

    FBoxLink:='';
    for i:=0 to FBoxList.Count-1 do begin
      FBoxLink:=FBoxLink+'<input type=hidden name="'+
         FBoxList.Names[i]+'" value="'+FBoxList.Values[
         FBoxList.Names[i]]+'">'
    end;

  end;
end;
A menet továbbra is az, hogy egy ciklussal végig olvassuk az összes paramétert, a Request.QueryFields-ből. Bennünket most kétféle paraméter érdekel: azok, amelyek P betűvel kezdődnek, és azok, melyek ID betűkkel kezdődnek. A P betűsek azok a termékek, melyek már a kosárban vannak, míg az ID-vel azt a terméket azonosítjuk, mely most kerül a kosárba. Azért kell ezt külön választanunk, mert az ID esetében a Count nevű paraméterből fogjuk megtudni a tényleges mennyiséget, amit a felhasználó megadott a web lapon keresztül.

Mivel egy terméket többször is a kosárba helyezhet a vevő, így most egy ciklussal ellenőriznünk kell, hogy kosárban van-e már az adott termék. Ha igen, akkor csupán a mennyiséget növeljük és nem hozunk létre új elemet.
...
        l:=0;
        while (l<FBoxList.Count) and (FBoxList.Names
             [l]<>product) do begin
          inc(l);
        end;

        if l<FBoxList.Count then begin
          FBoxList[l]:=product+'='+IntToStr(StrToInt(
             FBoxList.Values[FBoxList.Names[l]])+StrToInt(pcount));
        end else begin
          FBoxList.Add(product+'='+pcount);
        end;
...
Ha készen vagyunk, akkor a termékek listája alapján már csak előállítjuk a kosár tartalmát leíró elemeket:
...
    FBoxLink:='';
    for i:=0 to FBoxList.Count-1 do begin
      FBoxLink:=FBoxLink+'<input type=hidden name="'+
         FBoxList.Names[i]+'" value="'+FBoxList.Values[
         FBoxList.Names[i]]+'">'
    end;
...
A kosárban lévő termékek törléséhez a felhasználónak az egyes tételek melletti kis piros X-re kell kattintani.

Ehhez módosítjuk először is a boxitem.dat állományt, melyben megjelentetjük az X-et:
...
<a title="Vegyük ki a kosárból" href="/scripts/ws08.exe?
      <#dellink>">
<img src="/webshop/08/del.gif" width=10 height=12 
      border=0>
</a>
...
Nézzük meg mit is kell a <#dellink> címke helyére tennünk programból:

Amikor a HTMLProducer1 komponensünk megtalálja ezt a címkét, akkor meghívjuk a GetDelLink függvényt, átadva neki a kosárban lévő aktuális termék azonosítóját:
procedure TWebModule1.HTMLProducer1CustomHTMLTag
    (Index: Integer; TagParams: TStrings; var ReplaceText: String);
begin
  case Index of
     ...
    11: begin//dellink
      ReplaceText:=GetDelLink('p'+tProductID.AsString);
    end;
  end;
end;
A GetDelLink előállít egy olyan sztringet, melyben fel van sorolva a kosárban lévő összes termék, kivéve azt, amelyik az aktuális.
function TWebModule1.GetDelLink(id: string): string;
var
  i: integer;
begin
  result:='';
  for i:=0 to FBoxList.Count-1 do begin
    if FBoxList.Names[i]<>id then begin
      result:=result+FBoxList[i]+'&';
    end;
  end;
  if result<>'' then begin
    System.Delete(result, Length(result), 1);
  end;
end;
Ha például két termék van a kosárban, mondjuk 2-es és 4-es kóddal, melyekből 3 és 5 darab került kiválasztásra, akkor a kód a következő: p2=3&p4=5.

Ekkor az első termék törléséhez a következő kerül: p4=5, míg a másodikhoz a p2=3 jön.

Internet áruház cikksorozat