vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 20

Komplexe Techniken: E-Commerce-Lösungen

Wozu verwenden Sie Ihren Internet-Zugang? Nachrichten und Informationen abrufen? Sicher haben Sie aber auch schon online eingekauft. Wenn Sie selbst ein Unternehmen haben, dann haben Sie sicher Ihre Produkte und Dienstleistungen schon online angeboten - andernfalls sollten Sie das sofort tun! E-Commerce wird den Handel revolutionieren.

Das heutige Projekt baut auf dem in Kapitel 13 entwickelten Katalogsystem auf und fügt dem System einen Einkaufswagen hinzu. Das beinhaltet einige Aufgabenstellungen, für die wir Lösungen finden müssen, um ein funktionales System zu schaffen. Heute behandeln wir folgende Fragestellungen:

20.1 Einfach komplex

Stellen Sie sich eine E-Commerce-Site vor. Stellen Sie sich vor, wie der Benutzer mit dem System kommuniziert. Das Ganze ist relativ unkompliziert. Der Benutzer schaut einen Katalog an, findet Produkte, die er kaufen will, und klickt dann auf die Schaltfläche Kaufen. Nachdem er seinen Einkauf abgeschlossen hat, gelangt er zur Kasse und kann seinen Auftrag vervollständigen. Die Schritte sind einfach, nicht jedoch das zugehörige Backend.

Wenn ein Benutzer einen Artikel in seinen Einkaufswagen legt, wohin gelangt dieser Artikel dann? Die Information muss an den Server zurückgemeldet und in irgendeinem Formular gespeichert werden. Wie können Sie sicherstellen, dass ein Auftrag nicht mit den Aufträgen eines anderen Benutzers verwechselt wird?

In aller Fairness gesagt, es gibt Einkaufswagensysteme, die nicht den Server kontaktieren, um den Inhalt zu verwalten. Einige Systeme sind sogar ausschließlich in JavaScript entwickelt. Das ist eine durchaus sinnvolle Lösung für Anwender, die keinen Zugriff auf eine serverseitige Verarbeitung haben, aber dennoch wenig wünschenswert, um eine E-Commerce-Site online zu stellen. JavaScript ist gut, wenn es funktioniert, aber nachdem immer mehr Leute alternative Browser-Lösungen einsetzen, wie beispielsweise Opera und iCab, gibt es keine Garantie, dass das auch in Zukunft der Fall sein wird. Durch die Realisierung wichtiger Verarbeitungsprozesse auf dem Server stellten Sie vollständige Client-Kompatibilität sicher.

Bisher gab es mehrere Ansätze, das Einkaufswagen-Dilemma zu lösen. Zwei der Techniken, die von kommerziellen Software-Paketen eingesetzt werden, sind in den beiden nächsten Abschnitten beschrieben.

Einkaufen unter Verwendung einer Sitzungs-ID

Bei der ersten Methode wird der Einkaufswagen einer bestimmten Sitzungs-ID zugeordnet, die auf dem Computer des Benutzers abgelegt ist. Wenn der Benutzer Artikel aus dem Online-Katalog in den Einkaufswagen legt, werden sie in einer Tabelle gespeichert, die dem ausgewählten Produkt die Sitzungs-ID zuordnet. Wenn der Benutzer seinen Einkauf abschließen will, ordnet das System schließlich den tatsächlichen Benutzerinformationen eine Sitzungs-ID zu und speichert sie in einem endgültigen Auftragsformular.

Ein Nachteil bei diesem Ansatz ist, dass zusätzliche Daten auf dem System abgelegt werden, die in bestimmten Zeitabständen vom System gelöscht werden müssen. Weil ein Benutzer die Site jederzeit verlassen und wieder betreten kann, muss das System in der Lage sein, pro Benutzer mehrere Sitzungs-IDs und Einkaufswagen anzulegen. Diese Information würde sich unendlich lange ansammeln, bis der gesamte Plattenspeicher belegt ist - es sei denn, das System setzt ein Ablaufdatum für die Daten. In bestimmten Zeitabständen werden Sitzungen entfernt, die vom System nicht in bestätigte Aufträge umgewandelt wurden. Dazu ist jedoch eine gewisse Backend-Programmierung erforderlich, die im Rahmen dieses Buchs nicht besprochen werden kann.

Ein weiterer Nachteil dieses Ansatzes ist, dass einige dieser Systeme diese Sitzungsinformation und die Kreditkarteninformation des Benutzers sammeln und an einer zentralen Position ablegen. Falls die Sitzung irgendwie geknackt wird, könnte der Eindringling auf alle Sitzungsinformationen zugreifen.

Die Verwaltung der Benutzerinformationen separat von den Einkaufswageninformationen scheint auf den ersten Blick nicht besonders wichtig zu sein - aber es kann wichtig werden. Eines der neueren Einkaufssysteme, das ich »zerlegt« habe, basierte auf einer kommerziellen E-Commerce-Software, die jede Sitzung in einer neuen Datenbanktabelle anlegte. Leider hatten die Entwickler der Site vergessen, die Berechtigungen der Tabellen beim Anlegen korrekt zu setzen. Damit konnte jeder ganz einfach einen Einkaufswagen eines Benutzers öffnen, indem er die URL auf dem Bildschirm leicht abänderte. Damit wurde alles angezeigt, was in der Einkaufswagentabelle des Benutzers stand - Name, Adresse, Kreditkarteninformation usw., und natürlich auch die Artikel, die der Benutzer gekauft hat. Man muss nicht erwähnen, dass die Site sofort offline genommen wurde, bis das Problem gelöst war. Hätte man die Benutzerinformation in einer separaten, geschützten Datenbank abgelegt, hätte man sich diese Erfahrung ersparen können.

Einige Tage später wurde die Site wieder online gestellt und schien perfekt zu funktionieren. Bis die Aufträge unter der falschen Kreditkarteninformation und einer Vermischung der Artikel abgesetzt wurden. Ein Fehler in der Verwaltung der Sitzungs-ID auf dem Server führte zu Überlappungen der Sitzungen. Der Server verwendete kein Ablaufdatum für alte Sitzungen und erlaubte statt dessen neuen Benutzern, alte Aufträge fortzuführen.

Sie denken vielleicht, das wäre eine über Nacht entstandene E-Commerce-Site gewesen, oder unter Verwendung eines billigen Backends, aber tatsächlich wurden mindestens 400.000 DM für die Entwicklung der Site, Software und Server ausgegeben.

Benutzerkonten

Eine zweite Methode zur Verwaltung von Benutzerinformationen ist, Benutzerkonten auf dem System anzulegen. Bevor der Benutzer das virtuelle Kaufhaus betreten kann, um Einkäufe zu machen, muss er sich beim System registrieren. Bei der Registrierung wird ein Benutzerkonto angelegt und damit eine Benutzer-ID - in diesem Fall ein Benutzername. Dieser Benutzername kann dann anstelle der Sitzungs-ID verwendet werden, um den Benutzer im System zu verfolgen. Statt basierend auf der Sitzungs-ID einen separaten Einkaufswagen zu verwalten, übergibt das System den Benutzernamen über die URL-Zeile oder über eine Sitzungsvariable.

Alle Einkaufswagentransaktionen werden in einer Master-Einkaufswagentabelle aufgezeichnet, die die gekauften Artikel sowie den Käufer aufzeichnet. Die eigentliche Benutzerinformation wird in einer erweiterten Version des Anmeldesystems gespeichert, das wir in anderen Projekten verwendet haben.

Mit diesem Ansatz für die E-Commerce-Site beschränken Sie den Betrag der zusätzlichen Daten, die Sie speichern müssen, indem Sie alle Auftragsinformationen direkt einem bestimmten Benutzer statt einer Sitzung zuordnen. Es könnte immer noch eine »Datenansammlung« geben, die aber sehr viel langsamer anwächst. Abhängig davon, wie der Entwickler die Site implementiert hat, kann es auch einen Vorteil für den Kunden darstellen, weil er die Site jederzeit verlassen kann und beim Zurückkommen den Einkaufswagen so vorfindet, wie er ihn verlassen hat. Auf diese Weise kann er den Auftrag speichern und dann absenden, wenn er das nötige Geld gespart hat.

Der mögliche Nachteil ist, dass der Benutzer sich am System anmelden muss, bevor er einkaufen gehen kann. Das schreckt den gelegentlichen Einkäufer ab und könnte Einige für immer vergraulen.

Unser »perfekter« Ansatz

Wir werden hier den perfekten Ansatz wählen. Was ist perfekt? Wir werden unsere E- Commerce-Site auf dem oben beschriebenen zweiten Ansatz basieren lassen. Der Unterschied liegt im Detail.

Die Site, die wir hier anlegen, ermöglicht einem Benutzer, den Katalog anzusehen, ohne sich zuvor anmelden zu müssen. Wenn er jedoch versucht, einen Artikel in den Einkaufswagen zu legen, wird er auf eine Anmeldeseite weitergeleitet. Falls der Benutzer keinen Anmeldenamen und kein Kennwort hat, muss er ein kurzes Registrierungsformular ausfüllen. Dieses Formular erstellt ein neues Konto im System und einen neuen Benutzernamen, mit dem alle nachfolgenden Auswahlen aus dem Katalog verfolgt werden.

Nach diesem Ansatz können Sie ein System einrichten, das neuen Benutzern ermöglicht, den Katalog ungehindert anzusehen. Bevor sie jedoch einen Kauf vornehmen können, müssen sie sich anmelden oder registrieren. Durch die Anmeldung und Registrierung wird eine Sitzungsvariable auf den Benutzernamen gesetzt, der dann genutzt wird, um alle Artikel zu speichern, die in den Einkaufswagen gelegt werden. Das ist das Beste aus beiden Welten.

Sitemap für eine E-Commerce-Site

Anders als in der letzten Übung (Umfrage/Prüfungssystem) verwendet das Grundgerüst für das E-Commerce-System viel einfachere Serververhalten mit weniger benutzerdefinierter Programmierung. Um diese einfachere Site aufzubauen, müssen Sie jedoch viel mehr Support-Seiten anlegen.

Die Sitemap ist ähnlich dem Katalogsystem, dessen Entwicklung bereits beschrieben wurde:

Dieser Liste müssen wir auch hinzufügen:

Ein Großteil der Arbeit in dem System besteht aus der Aktualisierung und dem Einfügen von Datensätzen in die Tabellen, deshalb sollte es nicht all zu schwierig sein, die Seiten zu programmieren - der Trick ist, das Ganze zu kombinieren. Nachdem Sie alles auf einen Nenner gebracht haben, haben Sie ein System, das Sie als Grundlage für Ihr eigenes Online-Kaufhaus nutzen können. Weil dies das letzte Projekt in diesem Buch ist, werden Sie bemerken, dass es viele der Komponenten kombiniert, die Sie in anderen Projekten bereits kennen gelernt haben.

Abbildung 20.1 zeigt eine sinnvolle Darstellung eine Sitemap für das E-Commerce- System.

Abbildung 20.1:  Die grundlegende Sitemap für die  E-Commerce-Site

Weil wir Komponenten aus anderen Projekten nutzen, werden Ihnen einige Dinge bekannt vorkommen. Ich werde so viel wie möglich zusammenfassen, um möglichst viel Platz zu sparen. Wir fangen mit dem SQL an.

20.2 Die Tabellendefinitionen

Das SQL, das wir für dieses Projekt benötigen, basiert weitgehend auf dem System für unser Katalogprojekt - mit einigen wichtigen Ergänzungen. Außerdem brauchen wir Platz, um die Rechnungs- und Lieferinformationen sowie den Inhalt des Einkaufswagens für jeden einzelnen Benutzer abzulegen. Betrachten wir, was wir in Kapitel 13 entwickelt haben.

Produktkategorien

Für jeden Artikel in dem Katalog werden Produktkategorien definiert. In diesem Datenbankmodell kann ein Artikel nur einer einzigen Kategorie zugeordnet werden.

create table tblCategory (
catID int not null,
catName varchar(50) not null,
primary key (catID)
)

Die Produktkategorie-Tabelle enthält eine catID als Primärschlüssel und den Namen der Kategorie (catName). Die ID dient dazu, jedes Produkt mit einer Kategorie im Katalog zu verbinden.

Katalogelemente

Die primäre Katalogtabelle enthält die Informationen, die für den Entwurf aller Produktauflistungen und Detailbildschirme benötigt werden. Es handelt sich dabei um die Master-Tabelle für alle Informationen, die im Katalog angezeigt werden.

create table tblProduct (
prodID varchar(10) not null,
catID int not null,
prodName varchar(80) not null,
prodDesc varchar(250) not null,
prodPrice real not null,
prodSmPic varchar(80) not null,
prodLgPic varchar(80) not null,
primary key (prodID)
);


Hier die Definition der Produkt-Tabellenfelder:

  1. prodID - Eine eindeutige ID für das zu beschreibende Produkt. Dabei kann es sich um eine beliebige eindeutige Zeichenfolge handeln.
  2. catID - Die ID für die Kategorie, der das Produkt zugehört.
  3. prodName - Ein Kurzname für das Produkt.
  4. prodDesc - Die ausführliche Produktbeschreibung. Dieses Feld kann in der endgültigen Implementierung durchsucht werden.
  5. prodPrice - Der Produktpreis. Hier wird der Datentyp REAL verwendet, um eine Zahl mit Dezimalpunkt ablegen zu können.
  6. prodSmPic - Die URL für ein kleines (Thumbnail-)Bild. Dieses Bild wird in der allgemeinen Produktauflistung gezeigt.
  7. prodLgPic - Die URL für ein großes Bild. Das große Bild wird auf den Detailbildschirmen für das Objekt angezeigt.

Falls Sie noch weitere Informationen anzeigen wollen, fügen Sie sie in diese Tabelle ein. Wenn Sie nicht vorhaben, einen ganz speziellen Handelskatalog zu implementieren, können Sie die Feldnamen den Anforderungen Ihrer Applikation anpassen.

Verwandte Elemente

Verwandte Elemente werden häufig verwendet, um »Cross-Sells« in Online-Katalogen zu erstellen. Auf diese Weise kann der Benutzer ähnliche Produkte anzeigen, wodurch der Verkauf weniger häufig besuchter Artikel gefördert werden kann.

create table tblRelated (
prodID1 varchar(10) not null,
prodID2 varchar(10) not null,
primary key (prodID1, prodID2)
)

Ich weiß, dass diese nackten Schemas Ihnen irgendwie ein ungutes Gefühl verschaffen, richtig? Leider ist es unser Job, ein System zu entwickeln, das die Funktionsmerkmale besitzt, die die Administratoren von ihren Einkaufssystemen fordern, deshalb ist es sinnvoll, diese Möglichkeit anzubieten.

Benutzerinformation

Anders als bei dem vorgestellten Katalogsystem müssen wir hier in der Lage sein, Benutzeranmeldungen zu verfolgen und Rechnungs- und andere Informationen zu speichern. Das ist eine Kombination aus den Einstellungen der Benutzer und dem Anmeldesystem, das Sie bereits kennen. Die Tabellenstruktur sollte Ihnen also durchaus bekannt vorkommen:

create table tblUserInfo (
username varchar(50) not null,
password varchar(50) not null,
address1 varchar(100),
address2 varchar(100),
city varchar(100),
state varchar(20),
zip varchar(15),
primary key (username)
)

Diese Information speichert ein Basisprofil für den Benutzer. Außerdem wird sie genutzt, um die Information für den endgültigen Kaufauftrag beim Verlassen der Site vorzubereiten, sodass der Kunde nicht jedes Mal unzählige Formulare ausfüllen muss, wenn er einkaufen geht.

Das ist jedoch nicht die einzige Information, die wir für den Benutzer speichern müssen. Wir brauchen auch die Rechnungs- und Lieferinformation zum Zeitpunkt der Auftragserteilung. Für diesen Zweck kann eine zweite Tabelle erzeugt werden:

create table tblOrderInfo (
orderID varchar(50) not null,
username varchar(50),
billaddress1 varchar(100),
billaddress2 varchar(100),
billcity varchar(100),
billstate varchar(20),
billzip varchar(15),
shipaddress1 varchar(100),
shipaddress2 varchar(100),
shipcity varchar(100),
shipstate varchar(20),
shipzip varchar(15),
paymethod varchar(50),
payaccount varchar(50),
payexpire varchar(15),
primary key (orderID)
)

Durch Ablegen aller dieser Informationen in einer einzigen Tabelle können wir sie für die einzelnen Aufträge abändern, und sie werden von den Daten getrennt, die sich ständig ändern und auf die dauernd zugegriffen wird. Das bedeutet, die Tabelle OrderInfo ist der einzige Platz, der geschützt werden muss. Weil wir nie Daten aus dieser Tabelle lesen, begrenzen wir damit die Gefahr, dass etwas passieren könnte.

Sie können jederzeit andere Informationen in die Auftragstabelle oder in die Benutzerinformationstabelle eintragen. Daten wie beispielsweise die E-Mail-Adresse, die Telefonnummer usw. könnten für Ihre Applikation ganz nützlich sein.

Einkaufswageninformation

Als Letztes legen wir die Tabelle mit der Einkaufswageninformation an. Dort werden alle Informationen über die im Einkaufswagen abgelegten Artikel gespeichert. Weil die anderen Tabellen die gesamte Textinformation speichern, wird diese Tabelle einfach benötigt, um die Informationen zu verknüpfen - d.h., sie geben an, wer was bestellt hat.

create table tblCart (
cartID int not null auto_increment,
prodID varchar(50),
username varchar(50),
orderID varchar(50),
primary key (cartID)
)

Die Auftrags-ID (orderID) ist das einzige, was in der Tabelle aus der Reihe fällt. Dieser Wert wird ausgefüllt, nachdem der eigentliche Auftrag erteilt wurde. Er ordnet die Auftragsinformation den Artikeln im Einkaufswagen zu.

Sie fragen sich vielleicht, warum Sie eine Auftrags-ID brauchen, wenn Sie dem Einkaufswagen auch einen Benutzernamen zuordnen können. Das ist möglich, aber dann könnte jeder Benutzer immer nur einen einzigen Auftrag absetzen.

Wenn Sie eine Auftrags-ID vergeben, können Sie zwischen den Aufträgen eines einzelnen Benutzers unterscheiden. Angenommen, ein Benutzer will nacheinander fünf Aufträge an fünf verschiedene Adressen erteilen. Das wäre unmöglich, wenn wir für dem Auftrag nur den Benutzernamen zuordnen.

So viel zu den Tabellendefinitionen. Abbildung 20.2 zeigt die endgültige Datenstruktur.

Falls Sie Kapitel 13 noch nicht gelesen haben, sollten Sie dies jetzt nachholen. Das SQL zur Verknüpfung der Katalogtabellen ist dort detailliert erklärt. Die Ergänzungen, die wir am System vorgenommen haben, sind relativ einfach und bedürfen keiner weiteren Erklärungen.

Legen Sie diese Tabellen jetzt in Ihrem Datenbanksystem an, und fügen Sie Beispieldaten ein. Auch das sollte Ihnen vertraut vorkommen, weil wir die Daten aus Kapitel 13 verwenden - Sie können sie natürlich jederzeit beliebig abändern.

Füllen der Kategorien:

insert into tblCategory values (1,'Schuhe');
insert into tblCategory values (2,'T-Shirts');

Abbildung 20.2:  Diese Tabellen brauchen wir für  die Entwicklung eines grundlegenden  Einkaufswagensystems.

Sie können in die Tabelle beliebig viele Kategorien eintragen.

Jetzt folgt die Hauptprodukttabelle:

insert into tblProduct values ('M001',1,'Match Point Tennisschuhe',
'Ein hochqualitativer Tennisschuh, von den Profis empfohlen',
56.95,'catalogimages/M001sm.jpg','catalogimages/M001lg.jpg');
insert into tblProduct values ('M002',1,'Schwarze Lederschuhe',
'Damit fühlen Sie sich den ganzen Tag wohl. Diese Lederschuhe sind ein ausgezeichneter Kauf',
76.99,'catalogimages/M002sm.jpg','catalogimages/M002lg.jpg');
insert into tblProduct values ('M003',1,'Match Point Tennisschuhe Damen',
'Eine neue Version des Schuhs, speziell für Frauen entwickelt.
Aus der Schweiz importiert',56.95,'catalogimages/M003sm.jpg',
'catalogimages/M003lg.jpg');
insert into tblProduct values ('M004',1,'Freizeitschuhe Leder',
'Attraktiver Lederschuh mit elegantem Aussehen und
bestem Tragekomfort',25.15,'catalogimages/M004sm.jpg',
=>;'catalogimages/M004lg.jpg');
insert into tblProduct values ('M005',1,'Angebot Lederschuhe',
'Falls Sie sparen wollen - diese Schuhe sind preis-
wert',6.95,'catalogimages/M005sm.jpg',
'catalogimages/M005lg.jpg');
insert into tblProduct values ('M006',1,'Schwarze Lederschuhe Damen',
'Diese Lederschuhe bieten höchsten Tragekomfort',
76.99,'catalogimages/M006sm.jpg',
'catalogimages/M006lg.jpg');
insert into tblProduct values ('M007',1,'Freizeitschuhe Leder Damen',
'Attraktiver Lederschuh mit elegantem Aussehen und
bestem Tragekomfort - nur für Damen',25.15,'catalogimages/M007sm.jpg',
'catalogimages/M007lg.jpg');
insert into tblProduct values ('M008',1,'Angebot Schwarze Lederschuhe Damen',
'Variante unseres Bestsellers. Falls Sie sparen wollen -
diese Schuhe sind preiswert',6.95,
'catalogimages/M008sm.jpg','catalogimages/M008lg.jpg');
insert into tblProduct values ('M009',1,'Unisex Tanzschuhe',
'Ein toller neuer Schuh - Einheitsgröße - Sie werden die
Nacht damit durchtanzen',21.75,'catalogimages/M009sm.jpg',
'catalogimages/M009lg.jpg');

In dieser Beispieldatenmenge habe ich nur eine Produktkategorie eingegeben. Sie können nach demselben Muster aber beliebig viele Kategorien eintragen.

Jetzt noch einige verwandte Produkte:

insert into tblRelated values ('M004','M005');
insert into tblRelated values ('M004','M007');
insert into tblRelated values ('M004','M008');

Als letzten Schritt zur Vorbereitung laden Sie ein paar kleine und große Bilder für den Katalog ins System - in unserem Beispiel sind sie im Verzeichnis catalogimages abgelegt.

Beachten Sie, dass wir nur Daten für den eigentlichen Katalog eintragen (Produkte, verwandte Artikel usw.). Die anderen Tabellen werden vom E-Commerce-System ausgefüllt und wir lassen sie hier noch leer. Wenn Sie Testkonten für die Anmeldung anlegen wollen, dann steht Ihnen das natürlich frei, aber wir müssen dennoch die Bildschirme zum automatischen Anlegen der Konten entwickeln.

20.3 Das Katalogsystem

Wir haben heute so viel zu tun, dass nicht alles in einem Kapitel untergebracht werden kann. Deshalb verwenden wir das in Kapitel 13 entwickelte Katalogsystem und fügen die zusätzliche Funktionalität ein, nachdem der Katalog eingerichtet wurde.

Wenn Sie das Katalogprojekt in Kapitel 13 nachvollzogen haben, dann stehen Ihnen die Dateien bereits zur Verfügung, und Sie brauchen heute nur noch die neuen Katalogfunktionen einfügen. Andernfalls finden Sie im Folgenden eine Zusammenfassung der Schritte, die zur Erstellung des Katalogsystems erforderlich sind. Wenn Sie weitere Informationen brauchen, blättern Sie einfach zurück. Andernfalls ist es eine gute Möglichkeit, Ihr Wissen über UltraDev zu testen, weil es hier keine weiteren Erklärungen mehr gibt.

Suchformular

Das Suchformular ist der Ausgangspunkt für jeden, der das System verwenden will. Jedes der Datenbankfelder kann für die Suche benutzt werden, aber wirklich sinnvoll sind nur die Beschreibung (description), die Kategorie (category) und der Preis (price).

Legen Sie ein Suchformular mit diesen Bereichen an. Das Formular sollte wie folgt aufgebaut werden:

Anders als das Popup-Menü mit dem Preis kann aus den Informationen in der Datenbank die Kategorieliste erzeugt werden. Dazu fügen Sie das Serververhalten dynamische Elemente hinzu. Zuvor müssen Sie jedoch die Datensatzgruppe definieren, das alle Datensätze der Tabelle tblCategory enthält. Für meine Version habe ich die Datensatzgruppe category definiert, die alle erforderlichen Daten enthält. Diese Datensatzgruppe muss sowohl die Textbezeichnung aller Einträge im Popup-Menü als auch den entsprechenden Wert enthalten.

Nachdem die Datensatzgruppe definiert ist, können Sie Ihr dynamisches Serververhalten einfügen. Markieren Sie die Auswahlliste für die Kategorie und gehen Sie wie folgt vor:

  1. Öffnen Sie die Palette Serververhalten.
  2. Klicken Sie auf das Plussymbol (+).
  3. Wählen Sie im Popup-Menü Dynamische Elemente den Eintrag Dynamische Liste/Menü.
  4. Füllen Sie die Verhaltenseinträge nach Bedarf ein - möglicherweise müssen Sie nur ein paar Elemente ändern, um Ihre Datendefinition zu realisieren.

Nachdem Sie dieses Verhalten definiert haben, müssen Sie den Fall berücksichtigen, in dem der Benutzer alle verfügbaren Artikel anzeigen will. Bearbeiten Sie die Kategorieliste separat, um diese Funktionalität einzurichten.

Öffnen Sie den Eigenschafteninspektor für die Popup-Liste, klicken Sie auf die Schaltfläche Listenwerte und fügen Sie einen neuen Wert mit den folgenden Eigenschaften in die Liste ein:

Name - Alle

Wert - %

Damit ist die Definition des Bildschirms für die Produktdefinition abgeschlossen, den Sie in Abbildung 20.3 sehen.

Abbildung 20.3:  Der fertige Bildschirm für die Suche sollte wie hier gezeigt aussehen.

Suchergebnisse

Um die Suchergebnisse einzurichten, entwerfen Sie ein grundlegendes Layout für die Daten. Verwenden Sie dafür dasselbe Site-Layout, das Sie bereits definiert haben. Die Ergebnisse werden im Inhaltsbereich in einer vertikalen Liste zurückgegeben, ergreifen Sie also die entsprechenden Maßnahmen.

Für die Suche gibt es drei Bedingungen - Schlüsselwort, Kategorie und Preis. Jedes dieser Attribute muss in der WHERE-Klausel des SQL angegeben werden, um genau die Datensätze zu finden, die den Suchbedingungen entsprechen. Die folgende Abfrage erledigt diese Aufgabenstellung problemlos:

SELECT *
FROM tblProduct
WHERE catID LIKE 'formCat' AND prodPrice<'formPrice'
AND prodDesc LIKE '%formKey%'

Geben Sie diese SQL-Anweisung direkt in das Feld mit der erweiterten Abfrage für eine neue Datensatzgruppe ein. Richten Sie die UltraDev-Variablen formCat, formPrice und formKey ein, die die vom Formular übergebenen Daten aufnehmen.

Nachdem die Abfrage auf Ihrer Seite eingerichtet ist, fügen Sie das Serververhalten Wiederholter Bereich ein, sodass mehrere Datensätze gleichzeitig angezeigt werden. Wenn Sie dabei 5 bis 10 Datensätze pro Seite anzeigen, bleibt die Anzeige übersichtlich.

Nachdem Sie das grundlegende Layout für die Suche eingerichtet haben, geben sie dem Benutzer die Möglichkeit, sich durch die Katalogseiten zu bewegen.

Legen Sie auf Ihrer Ergebnisseite zwei Links an - Nächster und Vorheriger. Dazu können Sie Schaltflächen oder Text verwenden, es muss sich nur um gültige Objekte für Links handeln. Fügen Sie dem Link Nächster die Serververhaltensweise Zu nächstem Datensatz verschieben hinzu. Für den Link Vorheriger verwenden Sie die Verhaltensweise Zu vorherigem Datensatz verschieben. Das ist soweit alles. Abbildung 20.4 zeigt das Layout für den fast fertigen Browse-Modus des Katalogs.

Abbildung 20.4:  Der Katalog-Browser sollte aussehen wie hier gezeigt.

Detailbildschirme

Der Detailbildschirm für den Katalog basiert auf Serververhaltensweisen, die Sie der Katalogansicht bereits hinzugefügt haben. Statt alles von Grund auf neu zu entwickeln, können Sie Ihren vorherigen Bildschirm wieder verwenden, um die Detailansicht für die einzelnen Produkte zu erstellen. Um sie für die Verwendung als Detailseite aufzubereiten, gehen Sie wie folgt vor:

  1. Kopieren Sie die Suchergebnisseite in eine neue Datei und öffnen Sie sie.
  2. Löschen Sie das Verhalten Wiederholter Bereich in der Palette Serververhalten. Dieses Verhalten wird nur benötigt, wenn mehrere Datensätze auf der Seite angezeigt werden.
  3. Fügen Sie dem neuen Dokument die Verhaltensweise Gehe zu bestimmtem Datensatz hinzu, wie hier beschrieben.

Die Konfiguration von Gehe zu bestimmtem Datensatz ist relativ einfach - es handelt sich nur um die Auswahl einer bestimmten Spalte, die einen Datensatz in der von Ihnen verwendeten Datensatzgruppe eindeutig identifiziert. Wenn wir ein bestimmtes Produkt finden wollen, können wir seine Produkt-ID (productID) angeben, sodass dies die benutzte Spalte ist. Der URL-Parameter ist beliebig, aber er muss auf denselben Bezeichner gesetzt werden, der auch in der Suchergebnisseite für die Verhaltensweise Gehe Zu Detaildatensatz verwendet wurde. (Keine Sorge: Das ist noch nicht passiert.)

Jetzt legen Sie den neuen Detailbildschirm an, der das große Bild des Produkts sowie die vollständige Beschreibung anzeigt. Abbildung 20.5 zeigt den endgültigen Entwurf unseres Detailbildschirms.

Abbildung 20.5:  Der Detailbildschirm basiert auf den Katalogsuchergebnissen, ist also ganz einfach anzulegen.

Jetzt gehen Sie zurück auf die Ergebnisseite und legen einen neuen Link von den Produktsuchergebnissen zur Detailseite an. Gehen Sie wie folgt vor, um Ihrer existierenden Ergebnisseite das Verhalten hinzuzufügen:

  1. Öffnen Sie die Suchergebnisseite.
  2. Markieren Sie den Text oder das Bild, der bzw. das als Hyperlink zur Detailseite dienen soll. Für mein Projekt habe ich den Produktnamen verwendet.
  3. Öffnen Sie die Palette Serververhalten.
  4. Klicken Sie auf das Pluszeichen (+) und wählen Sie im Popup-Menü den Eintrag zu Detailseite wechseln.
  5. Konfigurieren Sie den Hyperlink, sodass die Produkt-ID (prodID) mithilfe des auf der Detailseite gesetzten URL-Parameters dem Detaildatensatz übergeben wird.
  6. Übergeben Sie alle existierenden Parameter, sodass die Suchinformation an die Detailseite weitergegeben wird.

Verwandte Elemente

Schließlich müssen dem Detailbildschirm verwandte Elemente hinzugefügt werden. Damit findet der Benutzer Produkte, die mit den aktuell angezeigten in irgendeiner Verbindung stehen. Legen Sie eine neue Datensatzgruppe an und gehen Sie in den erweiterten Modus. Konfigurieren Sie die Abfrage wie folgt:

SELECT tblProduct.* FROM tblProduct,tblRelated 
WHERE tblProduct.prodID=tblRelated.prodID2
AND tblRelated.prodID1='relatedID'

Die UltraDev-Variable relatedID sollte eingeführt werden, um den URL-Parameter id aufzunehmen und ihn der Datensatzgruppen-Definition zu übergeben.

Jetzt richten Sie Ihren Detailbildschirm so ein, dass die Datensätze aus der Datensatzgruppe auf dem Bildschirm angezeigt werden. Schaffen Sie unten im Katalogfenster Platz und ziehen Sie das Feld prodName aus der neuen Datensatzgruppe in die Entwurfsansicht.

Richten Sie das dynamische Feld für den Produktnamen, das Sie dem Entwurf hinzugefügt haben, so ein, dass es sich um einen wiederholten Bereich handelt. Der endgültige Seitenentwurf sieht aus wie in Abbildung 20.6 gezeigt.

Abbildung 20.6:  Nachdem Sie verwandte Elemente eingefügt haben, sollte der Detailbildschirm ähnlich wie hier gezeigt aussehen, aber es fehlen möglicherweise noch ein paar Funktionsmerkmale.

Die Anzeige organisieren

Um das Katalogsystem hier fertig zu stellen, suchen Sie die Links Nächster und Vorheriger, die Sie den Seiten für die Suchergebnisse und die Detailansicht hinzugefügt haben (es sei denn, natürlich, Sie haben sie in der Detailansicht weggelassen). Sie machen die Kataloganzeige übersichtlicher, wenn Sie diese Bereiche verbergen, wenn sie auf der Anzeige nicht benötigt werden.

Wenn der Benutzer beispielsweise das erste oder letzte Element in der Such- Datensatzgruppe anzeigt, ist es nicht erforderlich, die Links Nächster bzw. Vorheriger anzuzeigen. Das betrifft zwar nicht die Funktionalität der Site, aber es ist sinnvoller, als Links anzuzeigen, die nirgendwohin führen.

Um diese Verhalten hinzuzufügen, markieren Sie das Objekt, das angezeigt oder verborgen werden soll, und konfigurieren dann das Serververhalten:

  1. Öffnen Sie die Palette Serververhalten.
  2. Klicken Sie auf das Plussymbol (+), und wählen Sie das Verhalten Bereich anzeigen. Wählen Sie die Bedingung Bereich zeigen, wenn nicht letzter Datensatz bzw. Bereich anzeigen, wenn nicht erster, abhängig davon, ob Sie mit den Links Nächster oder Vorheriger arbeiten.
  3. Wählen Sie die Datensatzgruppe, mit dem die Vergleiche durchgeführt werden sollen.
  4. Klicken Sie auf OK, um das Verhalten Bereich verstecken hinzuzufügen.

Damit ist das Katalogsystem zunächst fertig. Wir werden noch einmal auf die Seiten zurückkommen und Links für die Einkaufswagen- und Benutzerregistrierungsmodelle einzufügen, aber dabei handelt es sich nur um geringfügige Änderungen am System.

Testen Sie das Katalogsystem, bevor Sie mit der Arbeit fortfahren. Heute müssen insgesamt drei Module implementiert werden. Wir werden dabei relativ schnell vorgehen, und weil das Katalogsystem das Rückgrat für das gesamte Projekt ist, sollte es korrekt funktionieren, bevor Sie das restliche System implementieren.

20.4 Das Authentifizierungssystem für den Benutzer

Dieser Teil der Applikation übernimmt die Registrierung eines Benutzers beim System und überprüft den Benutzernamen und das Kennwort, wenn er versucht, sich anzumelden. Das Authentifizierungssystem für unseren Katalog besteht aus vier verschiedenen Seiten:

Diese Seiten legen wir jetzt an. Hoffentlich haben Sie die Katalogvorlage zur Hand, sodass Sie sie für diese Seiten (und andere) benutzen können.

Die Registrierungsseiten

Zunächst müssen wir die Registrierungsseite anlegen. Wenn wir uns beim System nicht registrieren können, können wir uns offensichtlich auch nicht anmelden - deshalb ist es sinnvoll, hier anzufangen!

Diese Seite (register.asp) und die Anmeldeseite sind die einfachsten Komponenten des Projekts, weil sie Informationen sammeln und sie mithilfe von ein oder zwei Verhalten verarbeiten. Entwerfen Sie die Registrierungsseite, sodass sie alle für ein grundlegendes Benutzerprofil erforderlichen Informationen sammelt, insbesondere

Benennen Sie die Felder so, dass sie mit den Feldern der Tabelle tblUserInfo übereinstimmen. Fügen Sie eine Schaltfläche Profil speichern ein, um das Formular abzurunden. Abbildung 20.7 zeigt das fertige Dokument.

Abbildung 20.7:  Der Bildschirm register.asp sollte alle für das Benutzerprofil erforderlichen Informationen sammeln.

Nachdem der Benutzer das Formular ausgefüllt und gesendet hat, wird es gespeichert. Dazu verwenden wir das Serververhalten Datensatz einfügen. Fügen Sie Ihrem Dokument dieses Verhalten jetzt hinzu.

Konfigurieren Sie das Verhalten so, dass es die Tabelle tblUserInfo aktualisiert. Stellen Sie dabei sicher, dass alle Datenbankfelder mit den Formularelementen übereinstimmen. Wenn Sie den Formularelementen dieselben Namen gegeben haben wie den Datenbankfeldern, sollte das aber kein Problem mehr sein.

Nach dem Eintragen soll das Programm zu login.asp umgeleitet werden (mit der für Ihr System verwendeten Dateinamenerweiterung). Damit kann sich der Benutzer am System anmelden, nachdem er die Registrierung vorgenommen hat, und genau das will er ja wahrscheinlich auch.

Bevor die Seite register.asp fertig ist, müssen wir sicherstellen, dass der von dem Benutzer angegebene Benutzername eindeutig ist. Dazu fügen wir das Serververhalten Neuen Benutzernamen überprüfen ein:

  1. Öffnen Sie die Palette Serververhalten und klicken Sie auf das Plussymbol (+).
  2. Wählen Sie im Menü Benutzerauthentifizierung den Eintrag Neuen Benutzernamen überprüfen.
  3. Wählen Sie in tblUserInfo (username) das Feld username.
  4. Konfigurieren Sie das Verhalten so, dass der Benutzer zu duplicate.asp weitergeleitet wird, falls der Benutzername bereits existiert.
  5. Abbildung 20.8 zeigt den Dialog. Klicken Sie auf OK, nachdem Sie fertig sind.

    Abbildung 20.8:  Stellen Sie sicher, dass der Benutzername eindeutig ist, bevor Sie die Registrierung bestätigen.

Um die Registrierung abzuschließen, legen Sie das Dokument duplicate.asp an, das eine Fehlermeldung enthält, die den Benutzer darauf hinweist, dass der von ihm angegebene Benutzername bereits verwendet wird. Außerdem sollten Sie einen Link zurück auf die Registrierungsseite bereitstellen, sodass der Benutzer seine Eingabe wiederholen kann.

Die Anmeldebildschirme

Der Hauptanmeldebildschirm (login.asp) ist nur ein Formular mit Feldern für den Benutzernamen und das Kennwort, das überprüft, ob die Daten im Formular mit Daten in der Tabelle tblUserInfo übereinstimmen. Diesen ersten Anmeldebildschirm legen wir jetzt an. Abbildung 20.9 zeigt eine fertige Version des Formulars.

Abbildung 20.9:  Das Anmeldeformular ist identisch mit anderen Anmeldeformularen, die Sie bisher angelegt haben - es enthält nur Felder für den Benutzernamen und das Kennwort.

Nachdem Sie das Formular angelegt haben, fügen Sie dem Dokument das Verhalten Benutzer anmelden hinzu. Damit werden der gesendete Benutzername und das Kennwort überprüft und der Benutzer abhängig vom Ergebnis an eine bestimmte Seite weitergeleitet (dabei wird außerdem eine Sitzungsvariable auf den Benutzernamen gesetzt).

  1. Öffnen Sie die Palette Serververhalten und klicken Sie auf das Plussymbol (+).
  2. Wählen Sie im Untermenü Benutzerauthentifizierung den Eintrag Benutzer anmelden.
  3. Wählen Sie das Anmeldeformular als Quelle für das Benutzernamenfeld und das Kennwortfeld.
  4. Wählen Sie die Verbindung für die Datenbank mit der Tabelle tblUserInfo.
  5. Markieren Sie die Spalten username und password aus der Tabelle tblUserInfo, die mit den Feldern in dem Formular verglichen werden.
  6. Falls die Anmeldung erfolgreich war, wird der Benutzer zur Suchseite des Katalogs weitergeleitet (index.asp).
  7. Falls die Anmeldung fehlschlägt, wird der Benutzer an badlogin.asp weitergeleitet. Das ist die Fehlerseite für den Anmeldeprozess.
  8. Klicken Sie auf OK, nachdem Sie fertig sind.

Damit sind alle erforderlichen Funktionen auf dieser Seite vorhanden. Als letzten Schliff für den Bildschirm fügen Sie einen Link auf die Registrierungsseite ein, der immer angezeigt wird. Es kann durchaus sein, dass ein naiver Benutzer versucht, sich ohne Registrierung anzumelden. Bieten Sie ihm deshalb am besten eine schnelle und einfache Möglichkeit, auf die Registrierung zuzugreifen.

Jetzt brauchen Sie noch die Seite badlogin.asp für Ihre Anmeldeseiten. Sie kann ganz einfach sein und dem Benutzer mitteilen, dass er einen falschen Benutzernamen bzw. ein falsches Kennwort eingegeben hat, und ihn für einen neuen Versuch auf den Anmeldebildschirm zurückführen.

Überprüfen der Sitzungsvariablen

Nachdem sich ein Benutzer angemeldet hat, können Sie ihm bei der Bewegung innerhalb der Seiten ein Feed-back zu seinem Status zurückgeben. Weil wir der Site die eingerichtete Sitzungsvariable mitteilen müssen, könnten wir hier auch über eine Anmeldebenachrichtigung nachdenken.

Öffnen Sie die Palette Datenbindung und das Plussymbol (+). Wählen Sie die Option Sitzungsvariable und geben Sie MM_Username als Variablennamen an. Jetzt sollte die Sitzungsvariable in der Palette Datenbindung zur Verfügung stehen.

Falls Sie dem Benutzer ein Feed-back zu seinem Anmeldestatus mitteilen wollen, ziehen Sie die Sitzungsvariable MM_Username von der Palette Datenbindungen in die Entwurfsansicht des Katalogsystems (das sind beispielsweise die Seiten index.asp oder details.asp), sodass der Name des Benutzers angezeigt wird, wenn er sich korrekt angemeldet hat.

Und jetzt kommen wir zur letzten und wichtigsten Komponente der Einkaufswagen-Site - dem Einkaufswagen.

20.5 Der Einkaufswagen

Der Einkaufswagen fügt der Einkaufswagen-Datenbank Produkte aus dem Katalog hinzu. Möglicherweise sind Sie überrascht, dass Sie dafür das Katalogsystem wirklich nur minimal ändern müssen. Der Großteil der Arbeit für das heutige Projekt ist für die endgültige Erteilung des Auftrags beim Verlassen der Site aufzuwenden - nicht für das Ablegen der Artikel im Einkaufswagen.

Um Artikel in den Einkaufswagen zu legen, fügen wir einfach ein ganz kleines Formular in die Detailseite des Katalogs ein. Dieses Formular enthält ein Datensatz Einfügen- Serververhelten, das der Tabelle den Artikel tblCart hinzufügt.

Am schwierigsten ist der Benutzername, username, hinzuzufügen, weil er in einer Sitzungsvariablen und nicht in einem Formular gespeichert ist. Das kann jedoch ganz einfach gelöst werden, wie Sie gleich sehen werden.

Öffnen Sie jetzt den Detailbildschirm des Katalogs. Sie brauchen eine Senden- Schaltfläche und ein Formular mit einem einzigen verborgenen Feld, das auf das prodID- Feld des anzuzeigenden Datensatzes gesetzt wird. Dieses Formular legen Sie wie folgt an:

  1. Fügen Sie dem Dokument ein neues Formular hinzu.
  2. Klicken Sie auf das versteckte Formularfeld, um es dem Dokument hinzuzufügen.
  3. Öffnen Sie den Eigenschafteninspektor, und markieren Sie das Tag für das versteckte Formular.
  4. Gehen Sie in den Attributansichtmodus.
  5. Fügen Sie ein neues Wertattribut hinzu.
  6. Klicken Sie auf das Blitzsymbol rechts von dem Attributfeld.
  7. Wählen Sie das Feld ProdID aus der Datenbank-Datensatzgruppe, mit dem die Detailansicht erzeugt wurde.

Fügen Sie die Schaltfläche In den Einkaufswagen legen ein, so wie Sie eine Senden- Schaltfläche anlegen. Das resultierende Formular könnte beispielsweise wie folgt aussehen:

<form name="frmAddtoCart">
<input type="hidden" name="prodID" value="<%=
(searchresults.Fields.Item("prodID").Value)%>">
<input type="submit" name="Purchase" value="In den Einkaufswagen legen">
</form>

Das ist alles, was Sie der Seite in Hinblick auf das HTML hinzufügen müssen, aber es gibt noch einige Serververhalten, die hinzugefügt und angepasst werden müssen. Das erste Verhalten, das wir hier einfügen wollen, ist Datensatz einfügen - es wird benötigt, um der Tabelle tblCart die Produkt-ID hinzuzufügen.

Um das Verhalten Datensatz einfügen nutzen zu können, müssen Sie eine Datensatzgruppe definieren, die auf den Inhalt des Datensatzes tblCart zugreift. Fügen Sie Ihrem Dokument diese Datensatzgruppe unter dem Namen rsCart hinzu - definieren Sie es als einfache Datensatzgruppe, die alle Datensätze auswählt. Weil wir sie nur zum Einfügen von Daten benötigen, spielt es keine Rolle, ob wir eine einfache Abfragedefinition verwenden.

Jetzt fügen Sie dem Dokument das Verhalten Datensatz einfügen hinzu:

  1. Öffnen Sie die Palette Serververhalten.
  2. Klicken Sie auf das Plussymbol (+), und wählen Sie Datensatz einfügen.
  3. Konfigurieren Sie das Verhalten so, dass es die Tabelle tblCart speichert.
  4. Stellen Sie sicher, dass das verborgene Formularfeld prodID mit dem Feld prodID der Datenbank verglichen wird.
  5. Weisen Sie UltraDev an, zu checkout.asp weiterzugehen, nachdem der Datensatz eingefügt wurde.
  6. Klicken Sie auf OK, nachdem Sie fertig sind.

Jetzt ändern Sie das hinzugefügte Verhalten etwas ab, um das gewünschte Verhalten zu realisieren. Wie sich herausstellt, hat der eingefügte Datensatz keinen zugehörigen Benutzernamen, weil dieser in einer Sitzungsvariablen abgelegt ist. Wir müssen den Code manuell bearbeiten, sodass sein Wert zur Verfügung steht, wenn das Formular gesendet wird.

Öffnen Sie Ihre HTML-Quellansicht und suchen Sie nach der Zeile, in der das Einfügen vorgenommen wird. Sie sollte etwa wie folgt aussehen:

MM_editQuery = "insert into " & MM_editTable & " (" & 
MM_tableValues & ") values (" & MM_dbValues & ")"

Die Anweisung für das Einfügen muss abgeändert werden, sodass Werte für alle Felder eingefügt werden und ein Zugriff auf die Sitzungsvariable mit dem Benutzernamen erfolgt:

strUsername = Session("MM_Username")
MM_editQuery = "insert into " & MM_editTable & " values (''," &
MM_dbValues & ",'" & strUsername & "','')"

Damit lösen wir das Problem. Legen Sie jetzt die leere Seite checkout.asp an, sodass das Verhalten irgendwohin führt, und testen Sie sie dann. Wenn alles wie vorgesehen funktioniert, sollte die tblCart aktualisiert werden, nachdem Sie im Formular auf die Schaltfläche In den Einkaufswagen legen geklickt haben.

Beachten Sie jedoch, dass er Benutzer erst einkaufen kann, wenn er sich am System angemeldet hat. Das bedeutet, die Schaltfläche In den Einkaufswagen legen sollte nicht angezeigt werden, solange der Benutzer sich nicht am System angemeldet hat. Weil wir das daran erkennen, ob die Sitzungsvariable MM_Username definiert ist, können wir das Serververhalten Bereich verbergen nicht verwenden, um die Schaltfläche zu verbergen. Statt dessen müssen wir das manuell erledigen.

Suchen Sie in Ihrem Details-Quellcode das Formular und bearbeiten Sie es so, dass es nur dann angezeigt wird, wenn die Sitzungsvariable MM_Username nicht leer ist:

<% If Session("MM_Username")<>"" Then %>
<form name="frmAddtoCart" method="post" action="<%=MM_editAction%>">
<input type="hidden" name="prodID" value="<%=(searchresults.Fields.Item("prodID").Value)%>">
<input type="submit" name="Purchase" value="In den Einkaufswagen legen">
<input type="hidden" name="MM_insert" value="true">
</form>
<% End If %>

Gleichzeitig sollten Sie einen Bereich einfügen, der sichtbar ist, wenn sich der Benutzer nicht angemeldet hat. Dabei soll es sich um einen Link auf den Anmeldebildschirm handeln, sodass sich ein Kunde gegebenenfalls schnell anmelden kann:

<% If Session("MM_Username")="" Then %>
<A HREF="login.asp">Log into the system</A>
<% End If %>

Damit haben Sie alle Änderungen an den Katalogseiten vorgenommen. Die restliche Arbeit steckt im Auftragssystem.

20.6 Das Auftragssystem

Die letzte Komponente der E-Commerce-Site ist das Auftragssystem. Die Einkaufswagen- Seiten sind am schwierigsten zu erstellen, weil sie einige relativ ernsthafte Änderungen an existierenden Serververhalten bedingen. Glücklicherweise erledigt der automatisch erstellte Code 99 % dessen, was wir brauchen, es wird also nicht mehr lange dauern, bis wir das fertige System haben.

Insgesamt brauchen wir drei Seiten:

Die Einkaufswagen-Ansicht

Die erste Auftragsseite zeigt den Einkaufswagen und alle darin enthaltenen Artikel an. Darüber hinaus kann der Benutzer hier Artikel aus dem Einkaufswagen nehmen, falls er sich gegen den Kauf entschieden hat. Als Erstes brauchen wir zwei Datensatzgruppen für das Dokument - eine für die Anzeige der Artikel im Einkaufswagen und die andere zur Anzeige des Gesamtauftrags.

Richten Sie die erste Datensatzgruppe wie folgt ein:

  1. Fügen Sie dem Dokument eine neues Serververhalten Datensatzgruppe (Abfrage) hinzu.
  2. Gehen Sie in die erweiterte Datensatzgruppe.
  3. Geben Sie der Datensatzgruppe den Namen rsCart.
  4. Definieren Sie das SQL wie folgt:
    SELECT tblCart.cartID,tblCart.prodID,
    tblProduct.prodName,tblProduct.ProdPrice
    FROM tblCart,tblProduct
    WHERE tblCart.username='varUsername' AND
    tblCart.prodID=tblProduct.prodID
    AND tblCart.orderID=''
  5. 5. Fügen Sie dem System die UltraDev-Variable varUsername hinzu, die auf den Laufzeitwert Session("MM_Username") gesetzt wird.

Abbildung 20.10 zeigt die Datensatzgruppe.

Abbildung 20.10:  Definieren Sie diese erweiterte Abfrage, sodass der Inhalt des Einkaufswagens angezeigt werden kann.

Das Attribut tblCart.orderID' ' soll sicherstellen, dass das Feld orderID (Auftrags-ID) im Einkaufswagen noch nicht gesetzt wurde. Nachdem ein Auftrag angenommen wurde, wird das Feld orderID ausgefüllt.

Die zweite Datensatzgruppe ist ganz ähnlich, verwendet aber die Summenfunktion, um alle Preise im Einkaufswagen zu addieren. Definieren Sie diese neue Datensatzgruppe als rsCartTotal mit derselben Variablen varUsername und dem folgenden SQL:

SELECT sum(tblProduct.ProdPrice)
FROM tblCart,tblProduct
WHERE tblCart.username='varUsername' AND
tblCart.prodID=tblProduct.prodID AND tblCart.orderID=''

Nachdem Sie diese Datensatzgruppen definiert haben, können Sie den Bildschirminhalt anlegen.

Wie Sie in Abbildung 20.11 sehen, habe ich eine Tabelle eingerichtet, die die verschiedenen Artikel im Einkaufswagen aufnimmt. Unten in der Tabelle wird die Gesamtsumme berechnet, indem sie aus der Datensatzgruppe rsCartTotal in die entsprechende Tabellenzelle gezogen wird.

Abbildung 20.11:  Das ist die Einkaufswagen-Anzeige.

Fügen Sie in die Tabellenzeile mit den Zellen, die die einzelnen Einkaufswagenartikel enthalten, das Serververhalten Wiederholter Bereich ein. Damit werden alle Artikel aus dem Einkaufswagen angezeigt, nicht nur der erste in der Datensatzgruppe.

Nachdem Sie die dynamischen Daten auf dem Bildschirm bearbeitet haben, markieren Sie das Preisfeld und wählen in der Palette Datenbindungen das Format Währung für das Feld. Dasselbe sollten Sie für das Feld mit der Gesamtsumme tun.

Beachten Sie in der Abbildung des Entwurfs, dass ich ein Optionsfeld eingeführt habe, mit dem ein Artikel markiert werden kann, und die Schaltfläche Gewählten Artikel löschen, um die markierten Artikel zu entfernen. Sie können dies auch in Ihrem Dokument realisieren, indem Sie die Tabelle in ein Formular aufnehmen. Durch Absenden dieses Formulars wird der Artikel aus dem Einkaufswagen entfernt.

Nachdem Sie das grundlegende Formular für die Tabelle angelegt haben, fügen Sie ein Optionsfeld neben dem wiederholten Element im Formular ein. Geben Sie ihm den Namen DeleteID, und setzen Sie es auf den Wert des cartID-Felds des Einkaufswagens:

  1. Markieren Sie das Optionsfeld.
  2. Öffnen Sie den Eigenschafteninspektor.
  3. Gehen Sie in die Attributansicht des Inspektors.
  4. Fügen Sie ein neues Wertattribut ein.
  5. Setzen Sie den Wert des Wertattributs auf das CartID-Feld der Datensatzgruppe rsCart, indem Sie auf das Blitzsymbol klicken und das entsprechende Feld und die Datensatzgruppe auswählen.

Anschließend fügen Sie unten in der Tabelle die Schaltfläche Gewählten Artikel Löschen ein. Damit ist das Formular fertig - jetzt fügen Sie das Verhalten Datensatz löschen ein.

Fügen Sie Ihrem Dokument dieses Verhalten jetzt hinzu und konfigurieren Sie es mit folgenden Parametern:

Die endgültige Definition der Verhaltensweise Datensatz löschen sehen Sie in Abbildung 20.12.

Abbildung 20.12:  Das Verhalten Datensatz löschen ermöglicht Benutzern, Artikel aus ihren Einkaufswagen zu entfernen.

Jetzt kommt der lustige Teil. Wir müssen den Quellcode bearbeiten, damit alles funktioniert. Wir entfernen alle verborgenen Felder, die UltraDev dem Dokument hinzufügt, um das zu löschende Element auszuwählen. Weil wir unsere eigene cartID- Auswahl verwenden, können wir nicht den von UltraDev erzeugten Wert verwenden.

Öffnen Sie den Quellcode und suchen Sie nach einer Zeile wie der folgenden in Ihrem Formular:

<input type="hidden" name="MM_recordId" 
value="<%= rsCart.Fields.Item("cartID").Value %>">

Entfernen Sie diese Zeile vollständig aus Ihrem HTML.

Das Löschen basiert auf MM_recordId, die gesetzt wird, bevor es ausgeführt wird. Wir müssen diese Überprüfung entfernen. Suchen Sie relativ weit oben im Quellcode nach folgender Zeile:

if (CStr(Request("MM_delete")) <> "" And 
CStr(Request("MM_recordId")) <> "") Then

Abhängig von Ihrer UltraDev-Version kann diese Zeile an mehreren Positionen wiederholt vorkommen. Stellen Sie sicher, dass sie überall im Dokument geändert wird, sodass MM_recordID dort nicht mehr verwendet wird:

if (CStr(Request("MM_delete")) <> "") Then

Nur noch ein paar Zeilen, und die Seite ist fertig. Jetzt geht es um das eigentliche SQL. Die SQL-Zeile:

MM_editQuery = "delete from " & MM_editTable & " where " & MM_tableCol & " = "
& MM_recordId

Diese Zeile verwendet die MM_recordId, aber weil wir diesen Wert mithilfe des Optionsfelds DeleteID anders gesetzt haben, kann das SQL wie folgt geändert werden:

MM_editQuery = "delete from tblCart where cartID='" & Request("DeleteID") & "'"

Schließlich kann das Serververhalten zur Umleitung so abgeändert werden, dass es nicht auf sich selbst zurückverweist und die Umleitung einfach komplett überspringt. Leider wird das Problem in diesem Fall nicht gelöst, indem man keinen Wert angibt. Sie müssen die Umleitung vollständig entfernen:

Suchen Sie die folgende Codezeile:

Call Response.Redirect(MM_redirectPage)

Löschen Sie sie vollständig. Statt auf eine neue (oder dieselbe) Seite zu springen, erzeugt das Programm die Seite wie gewohnt. Ein gelöschter Artikel verschwindet aus der Liste.

Durch das Entfernen des Umleitungsverhaltens beschleunigen Sie die Operationen auf Sites, mit denen Sie zur ursprünglichen Seite zurückkehren, nachdem das Verhalten abgeschlossen ist. Statt eine Umleitung verarbeiten zu müssen, erhält der Client-Browser einfach die Seiteninformation wie gewohnt.

Um diese Seite zu vervollständigen, fügen Sie einen Link zur endgültigen Auftragserteilung ein (wo die Rechnungsinformation gesammelt wird) - checkout2.asp, sowie einen Link zurück zu dem Einkaufsbereich (beispielsweise mit javascript:history.back()).

Die endgültige Auftragserteilung

Die endgültige Auftragserteilung (checkout2.asp) ermöglicht dem Benutzer, alle Rechnungs- und Lieferinformationen in ein Formular einzugeben und schließt den Auftrag im System ab. Am besten richten Sie diese Seite ein, indem Sie eine Kopie von checkout.asp anlegen und sie so bearbeiten, dass das gewünschte Verhalten realisiert wird.

Um die existierende Seite checkout.asp auf die Aufgabe vorzubereiten, legen Sie eine neue Kopie davon an (checkout2.asp) und entfernen das Löschen-Serververhalten von der Seite. Entfernen Sie anschließend auch die Formularelemente. Oben auf der Seite finden Sie eine Tabelle mit den Artikeln und dem Gesamtrechnungsbetrag.

Die restliche Seite ist ganz einfach anzulegen - ein riesiges Formular mit Rechnungs- und Lieferinformationen aus der folgenden Tabelle:

create table tblOrderInfo (
orderID varchar(50),
username varchar(50),
billaddress1 varchar(100),
billaddress2 varchar(100),
billcity varchar(100),
billstate varchar(20),
billzip varchar(15),
shipaddress1 varchar(100),
shipaddress2 varchar(100),
shipcity varchar(100),
shipstate varchar(20),
shipzip varchar(15),
paymethod varchar(50),
payaccount varchar(50),
payexpire varchar(15),
primary key (orderID)
)

Die beiden Werte, die Sie nicht manuell sammeln, sind die Auftrags-ID (orderID), die angelegt wird, wenn der Benutzer den Auftrag erteilt, und der Benutzername, der bereits in einer Sitzungsvariablen enthalten ist. Abbildung 20.13 zeigt die endgültige Version des Formulars. Sie können dieses Formular natürlich ganz nach Ihren Vorstellungen anlegen. Ich habe beispielsweise ein Popup-Menü eingeführt, um den Wert für das Feld paymethod auszuwählen. Nach diesem Muster könnten Sie auch Popup-Menüs für die Felder shipstate und billstate bereitstellen.

Außerdem brauchen wir zwei neue Datensatzgruppen für das Dokument - die Datensatzgruppe UserInfo und die Abfrage OrderInfo. UserInfo wird verwendet, um das Formular für die Liefer- und Rechnungsdaten zu füllen, während die Datensatzgruppe OrderInfo benötigt wird, um später ein Einfügen-Serververhalten hinzufügen zu können.

Definieren Sie die Datensatzgruppe rsOrderInfo als einfache Datensatzgruppen-Abfrage:

  1. Öffnen Sie die Palette Serververhalten.
  2. Klicken Sie auf das Plussymbol (+), und wählen Sie Datensatzgruppe (Abfrage).
  3. Fügen Sie die neue Abfrage rsOrderInfo ein, die alle Datensätze aus der Tabelle tblOrderInfo auswählt.

    Abbildung 20.13:  Legen Sie ein Formular an, das alle Felder für die Vervollständigung des Auftrags enthält.

Die zweite Abfrage, rsUserInfo, muss als erweiterte Abfrage erzeugt werden:

  1. Fügen Sie dem Dokument eine weiteres Serververhalten Datensatzgruppe (Abfrage) hinzu.
  2. Gehen Sie in den erweiterten Abfragedefinitionsmodus.
  3. Definieren Sie das SQL, das die Information abhängig von der Variablen varUsername aus der Tabelle tblUserInfo abruft:
    SELECT *
    FROM tblUserInfo
    WHERE username='varUsername'
  4. Legen Sie die UltraDev-Variable varUsername an, die auf den Laufzeitwert Session("MM_Username") gesetzt wird.

Mit der Tabelle UserInfo, die Ihnen jetzt zur Verfügung steht, können Sie das Serververhalten Dynamisches Textfeld verwenden, um jedes der Felder im Formular dem entsprechenden Feld in der Datenbank zuzuordnen. Damit wird das Formular mit den Informationen gefüllt, die der Benutzer bereits bei der Registrierung bereitgestellt hat - was das Ganze etwas vereinfacht.

Damit haben wir den letzten Schritt unseres Projekts erreicht - die Einfügen-Aktion. Wir müssen sie ein bisschen anpassen, aber wie üblich beginnen wir mit einem grundlegenden UltraDev-Verhalten:

  1. Öffnen Sie die Palette Serververhalten.
  2. Klicken Sie auf das Plussymbol (+), um ein neues Datensatz einfügen-Verhalten einzufügen.
  3. Konfigurieren Sie das Datensatz einfügen-Verhalten so, dass sie mithilfe der aus dem auf dieser Seite eingerichteten Formular in die Tabelle tblOrderInfo einfügt.
  4. Stellen Sie sicher, dass alle Formularelemente den Tabellenspalten entsprechen.
  5. Nachdem wir mit dem Einfügen fertig sind, weisen wir UltraDev an, den Benutzer an finished.asp weiterzuleiten - das ist der letzte Bildschirm, der einfach besagt »Danke für Ihren Einkauf!«.

Wodurch sich dieses Verhalten von anderen Einfügen-Verhalten unterscheidet, ist, dass mehrere Datensätze aktualisiert werden müssen, nicht nur die gesendete Information. Die Auftrags-ID (orderID) muss erzeugt werden, wenn das Einfügen stattfindet, und die Artikel, die in tblCart stehen, müssen aktualisiert werden, um die neu berechnete Auftrags-ID zu reflektieren. Es macht keinen besonderen Spaß, aber wir müssen den Quellcode noch einmal bearbeiten.

Öffnen Sie Ihren Quellcode. Suchen Sie nach dem SQL für das Erzeugen der INSERT- Anweisung:

MM_editQuery = "insert into " & MM_editTable & " (" & MM_tableValues & ")
values (" & MM_dbValues & ")"

Fügen Sie statt dessen den folgenden Code ein:

orderStr=Date() & "-" & Session("MM_Username") & "-" & Time()
MM_editQuery = "insert into " & MM_editTable & " (orderID," & MM_tableValues & ") values ('" & orderStr & "'," & MM_dbValues & ")"

Die erste Zeile erzeugt die Zeichenkette orderStr, die eine Kombination aus dem Datum, dem Benutzernamen und der aktuellen Zeit enthält. Auf diese Weise kann der Benutzer mehrere Aufträge erteilen, solange er dies zu unterschiedlichen Zeitpunkten macht (was sehr wahrscheinlich ist). Die zweite Anweisung erzeugt die richtige Einfügeanweisung, mit der dem System der neue OrderInfo-Datensatz mit der korrekten Auftrags-ID (orderID) hinzugefügt wird.

Jetzt müssen nur noch alle tblCart-Einträge für den aktuellen Einkaufswagen aktualisiert werden, sodass sie die richtige Auftrags-ID enthalten. Das ist relativ einfach. Suchen sie den folgenden Codeblock:

  ' das Einfügen ausführen
Set MM_editCmd = Server.CreateObject("ADODB.Command")
MM_editCmd.ActiveConnection = MM_editConnection
MM_editCmd.CommandText = MM_editQuery
MM_editCmd.Execute

Löschen Sie ihn nicht! Er nimmt die Ausführung des Codes vor, mit dem in tblOrderInfo eingefügt wird. Unmittelbar hinter diesem Codeblock fügen Sie folgendes ein:

  ' Auftragskomponenten so ändern, dass sie dieselbe ID haben
Set FixOrder=Server.CreateObject("ADODB.Command")
FixOrder.ActiveConnection = MM_editConnection
FixOrder.CommandText = "UPDATE tblCart SET orderID='" & orderStr & "'
WHERE username='" & Session("MM_Username") & "' AND orderID=''"
FixOrder.Execute

Damit wird die SQL-Anweisung ausgeführt, mit der der Inhalt der Tabelle tblCart aktualisiert wird, sodass die Auftrags-ID (orderID) auf den neuen orderStr-Wert gesetzt wird, der zuvor erzeugt wurde.

Das war's! Die Seite checkout2 ist fertig. Jetzt brauchen wir nur noch eine Seite: finished.asp. Diese Seite wird angezeigt, nachdem der Benutzer das vollständig ausgefüllte Auftragsformular gesendet hat.

Die Seite für die Benachrichtigung für einen abgesetzten Auftrag

Wir werden das letzte Projekt in diesem Buch ganz locker abschließen. Gehen Sie wie folgt vor, um das Dokument für die Benachrichtigung bei einem abgesetzten Auftrag anzulegen.

  1. Öffnen Sie eine neue Seite, auf der Sie eine Dankesmeldung bereitstellen.
  2. Speichern Sie die Seite unter dem Namen finished.asp (und verwenden Sie dafür die für Ihren Server geeignete Dateinamenerweiterung). Wenn sie Sie in etwa an die in Abbildung 20.14 gezeigte Seite erinnert, haben Sie ganze Arbeit geleistet.

    Abbildung 20.14:  Schlicht und einfach

Glückwunsch! Sie haben das heutige Projekt und damit die letzte Programmierübung in diesem Buch abgeschlossen.

20.7 Zusammenfassung

Dies war nicht das letzte Kapitel in diesem Buch, aber das letzte Programmierkapitel. Im nächsten Kapitel konzentrieren wir uns auf einige neue Techniken, die feststellen, warum Ihre Applikationen nicht korrekt arbeiten, und Probleme bei der Entwicklung interaktiver Websites vermeiden helfen.

In diesem Kapitel wurden fast alle Serververhalten von UltraDev noch einmal aufgegriffen. Dabei wurden die in den vorhergehenden Kapiteln vorgestellten Techniken kombiniert. Obwohl die hier vorgestellte E-Commerce-Seite bei weitem nicht perfekt ist, stellt sie einen guten Ausgangspunkt dar. Mit ein bisschen Aufwand kann man sie zu einem ausgezeichneten Online-Katalogsystem machen.

Heute haben Sie vielleicht gelernt, wie einfach es ist, das von UltraDev erzeugte SQL zu bearbeiten. Scheuen Sie sich nicht davor - legen Sie nur zuvor eine Sicherungskopie an. UltraDev erzeugt normalerweise bei der Entwicklung komplexer Applikationen 75 % bis 90% des Codes. Sie müssen manuelle Anpassungen vornehmen, damit diese funktionieren, aber mit einem grundlegenden Gerüst ist das viel einfacher als alle Alternativen.

20.8 Fragen und Antworten

Frage:
Ist diese Site sicher?

Antwort:
Größtenteils. Es gibt einige Ausfallmöglichkeiten, die im Einkaufswagen-Bereich auftreten können. Weil wir ein Formular verwenden, um die cartID zu übergeben, wenn Artikel gelöscht werden, könnte ein Benutzer das Formular verändern und Artikel aus anderen Einkaufswagen löschen. Sie sollten keine sensiblen Daten in der Datenbank ablegen, ohne zuvor die erforderlichen Tests durchzuführen.

Frage:
Welche Erweiterung könnte ich für die Site vornehmen?

Antwort:
Man könnte sich einen Bereich mit allgemeinen Geschäftsbedingungen auf der Website vorstellen, der angezeigt wird, wenn der Benutzer die Site zum ersten Mal besucht. Diese allgemeinen Geschäftsbedingungen könnten in der existierenden Datenbank in einer neuen Kategorie gespeichert werden.

Frage:
Kann ich die Site so anlegen, dass der Benutzer einkaufen kann, ohne sich anzumelden?

Antwort:
Ja. Dazu erzeugen Sie eine Auftrags-ID, wenn der Benutzer die Site zum ersten Mal besucht. Diese ID wird im Einkaufswagen gespeichert, während er sich auf der Site bewegt, und nicht, wenn er mit seinem Einkauf fertig ist.

Frage:
Wie finden Sie die Aufträge, nachdem sie erteilt wurden?

Antwort:
Die OrderInfo-Einträge können der Tabelle tblCart der Auftrags-ID entsprechend zugeordnet werden. Für jede Auftrags-ID (orderID) in tblOrderInfo gibt es möglicherweise mehrere Einträge in tblCart. Das benötigte SQL ist einfach - schreiben Sie es als Übung.

20.9 Workshop

Der Workshop dient dazu, den gelesenen Stoff mithilfe von gezielten Fragen und Übungen zu vertiefen. Die Antworten finden Sie in Anhang A, »Quiz-Antworten«.

Quiz

  1. Warum ist die Auftrags-ID zeitbasiert?
  2. Warum wird die Rechnungsinformation nicht zusammen mit der Benutzerinformation abgelegt?
  3. Warum müssen wir die von UltraDev eingefügte Datensatz-ID (recordID) aus dem Löschen-Verhalten entfernen?
  4. Warum ist die Seite finished.asp so leer?

Übungen

  1. Der Benutzer kann seine Informationen eingeben, diese aber später nicht bearbeiten. Ermöglichen Sie die Bearbeitung des Benutzerprofils und das Speichern der aktualisierten Information - inklusive einem neuen Kennwort.
  2. Realisieren Sie die Funktion mit den allgemeinen Geschäftsbedingungen, die ich im F&A-Abschnitt angesprochen habe. Sie können in einer speziellen Kategorie in der Datenbank abgelegt und angezeigt werden, wenn der Benutzer das Katalogsystem zum ersten Mal besucht.
  3. Im aktuellen Status berücksichtigt der Einkaufswagen keine Liefer-/ Bearbeitungsgebühren und keine Steuern. Fügen Sie diese Werte in die Tabelle OrderInfo und in das Auftragssystem ein. Sie können sie der Gesamtsumme ganz einfach hinzufügen, indem Sie das SQL abändern, das die Gesamtsumme berechnet.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH