vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 13

Komplexe Komponenten: Kataloge und Suchen

In diesem Kapitel geht es um ein komplexes Thema: Die Entwicklung eines Katalogsystems. Ein Katalog ist eine beliebige Auflistung von Elementen, die auf dem Computer angezeigt werden kann - normalerweise mit Produktdetails und anderen Informationen. Welchen Inhalt dieser Katalog hat, bleibt völlig Ihnen überlassen. In unserem Beispiel legen wir eine Art Produktkatalog an, der Produktbeschreibungen und andere Informationen enthält.

Sie haben bereits ein grundlegendes Katalogsystem kennen gelernt, das eine Personalliste verwaltete. Das hier gezeigte System wird jedoch komplexe Funktionsmerkmale vorstellen, die weit über die des vorherigen Beispiels hinausgehen. In diesem Kapitel lernen Sie:

13.1 Ein Produktkatalog

Bevor Sie mit der heutigen Lektion beginnen können, müssen Sie eine funktionierende Katalog-Datenbank einrichten. Das ist nicht unbedingt so einfach wie es den Anschein hat. Welche Funktionalität wollen Sie in Ihrem Katalog anbieten? Welche Tabellen brauchen Sie und wie implementieren Sie sie? Dies sind Fragen, die zu Beginn jedes der folgenden Kapitel gestellt werden müssen (und hoffentlich auch beantwortet werden können). Wir werden später noch einmal auf dieses Projekt zurückkommen, nämlich wenn wir das Katalogsystem zu einem Programm zur Verwaltung eines Einkaufswagens ausbauen, der mit einem erweiterten Produktkatalog angeboten werden kann.

Obwohl in diesem Kapitel einige Dinge beschrieben werden, die Sie schon aus früheren Kapiteln kennen, und die in dem Kapitel über E-Commerce noch einmal aufgegriffen werden, sollten Sie diese und die zukünftigen Kapitel nicht ungelesen überspringen. Es werden zahlreiche neue Konzepte vorgestellt, die durchaus interessant für Sie sein können.

Die Funktionen, die Sie dem Produktkatalog heute hinzufügen werden, sind für Online- Informationsverzeichnisse sehr gebräuchlich:

Die erweiterte Funktionalität verwendet eine etwas effizientere Oberfläche. Der Katalog setzt sich aus drei verschiedenen Bildschirmen zusammen: einem Suchbildschirm, einem Ergebnisbildschirm und einem Detailbildschirm. Anders als in den früheren Beispielen haben diese Bildschirme ein gemeinsames Erscheinungsbild, sodass die Site viel konsistenter wirkt als bei den vorherigen Einzeldarstellungen dieser Funktionen. MySQL unterstützt alles, was Sie brauchen, um diesem Kapitel wirklich folgen zu können. Abbildung 13.1 zeigt eine Sitemap mit diesem Katalogsystem.

Das Datenbankmodell, das ich für dieses einfache Katalogsystem entwickelt habe (in SQL- Tabellensyntax) wird daran anschließend beschrieben.

Abbildung 13.1:  Die Sitemap für das  Katalogsystem ist ganz einfach.

Produktkategorien

Für alle Elemente im Katalog sind Produktkategorien definiert. Ein Element kann bei dem hier verwendeten Datenbankmodell jeweils nur unter eine dieser Kategorien fallen.

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

Die Tabelle für die Produktkategorie besteht aus einer catID, die den Primärschlüssel darstellt, und einem Kategorienamen (catName). Die ID wird zusammen mit dem Katalog abgelegt, um jedem Produkt eine Kategorie zuzuordnen.

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 angezeigt.
  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 vollfunktionalen Handelskatalog zu implementieren, können Sie das Beispiel übernehmen und die Feldnamen den Anforderungen Ihrer eigenen Applikation anpassen.

Verwandte Elemente

Ein praktisches Funktionsmerkmal dieses Katalogs ist die Möglichkeit, Produkte einander zuzuordnen. Damit kann man die Funktion verwandter Elemente in einer Kategorie realisieren, die andere Produkte anzeigt, an denen der Benutzer möglicherweise ebenfalls interessiert ist. Für nicht kommerzielle Applikationen, wie beispielsweise die Datenbank eines Vogelbeobachters, könnte man damit die Möglichkeit anbieten, Datensätze mit ähnlichen Eigenschaften wie dem ursprünglich ausgewählten anzuzeigen.

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

In dieser Tabelle sind nur Paare aus Produkt-ID-Nummern enthalten. Die erste Nummer wird als Haupt-ID verwendet, und das zweite ID-Feld verweist auf ein Element, das mit diesem ersten Produkt verwandt ist. Abbildung 13.2 zeigt die endgültige Tabellendefinition.

Abbildung 13.2:  Die endgültige Definition der Katalogdatenbank verwendet drei Tabellen.

Es gibt noch eine andere - von mir bevorzugte - Methode, dieselbe Funktionalität zu realisieren. Leider verletzt sie aus der technischen Perspektive betrachtet die Normalisierungsregeln, aber gleichzeitig ist sie effizienter, weil für das Speichern der Datenbank weniger Informationen benötigt werden. In der alternativen Implementierung der Funktionalität verwandter Elemente könnte diese gesamte Tabelle weggelassen werden. Die Produkttabelle würde damit wie folgt implementiert:

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,
prodRelated varchar(250),
primary key (prodID)
);

Durch die Einführung des Felds prodRelated haben wir die Möglichkeit, eine sehr große Anzahl von Produkt-ID-Nummern einzugeben, aber die Anzahl der verwandten Elemente ist darauf begrenzt, was in dieses Feld passt. In diesem Modell würden Sie die verwandten Elemente in ein einziges Feld innerhalb der Produktliste eingeben, durch Kommas oder andere Trennzeichen voneinander getrennt.

Ganz abgesehen von der Normalisierung ist es manchmal am sinnvollsten, beim Entwurf von Tabellen seinen gesunden Menschenverstand einzusetzen. Es ist nicht weiter schlimm, die Normalisierungsregeln zu verletzen, wenn daraus ein Ergebnis entsteht, das sehr viel einfacher in der Handhabung ist. Anfänger sollten sich jedoch an die Normalisierungsregeln halten, bis sie ausreichend Erfahrung im Datenbankentwurf gesammelt haben.

Es ist ganz einfach, SQL zu entwickeln, das dieses Feld auswertet und die zusammengehörigen Katalogeinträge ermittelt.

Damit kommen wir zum nächsten Punkt - dem Entwurf des SQL.

Das SQL

Ein bisschen Aufwand vor dem Entwurf der eigentlichen Anwendung erspart Ihnen später eine Menge Kopfzerbrechen. Für die zu entwickelnde Applikation muss das Datenbank- Backend in der Lage sein, die Rolle zu übernehmen, die Sie ihm zugedacht haben. Das bedeutet, es müssen SELECT-Anweisungen entwickelt werden, die die gewünschten Daten aus den Tabellen abrufen.

Als Erstes tragen Sie ein paar Daten in die Tabellen ein, damit Sie eine Arbeitsgrundlage haben. Sie können dazu eigene Daten erfinden oder auch meine hier angebotenen verwenden. Sie brauchen jedoch Bilddateien für Ihre Applikation.

Hier ein Beispiel für das Füllen der Kategorien:

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

(Sie können in der Tabelle beliebig viele Kategorien anlegen - so viele Sie brauchen oder wollen!)

Anschließend richten Sie die Hauptprodukttabelle ein. Um die Funktionsmerkmale aus diesem Abschnitt zu demonstrieren, brauchen Sie schon ein paar Einträge in der Produkttabelle. In dieser Beispieldatenmenge habe ich nur eine Produktkategorie eingegeben. Sie können nach dem hier gezeigten Muster weitere Kategorien anlegen:

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
preiswert',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 den hier gezeigten Datensätzen fällt Ihnen vielleicht auf, dass statt eines einfachen Apostrophs der Backslash plus Apostroph, \', verwendet wird. Weil der Apostroph zur Abtrennung von Daten genutzt wird, kann er in den eigentlichen Daten nicht verwendet werden, ohne ein Escape zu erhalten (d.h. ohne ihm einen Backslash voranzustellen). Die Datentrennzeichen variieren von Datenbank zu Datenbank, informieren Sie sich also darüber, welche speziellen Anforderungen für Ihr System gelten.

Schließlich werden einige verwandte Produkte gekennzeichnet:

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

Damit werden drei Elemente als verwandt zur Produkt-ID 'M004' gekennzeichnet. Im fertigen Katalog werden diese Elemente auf dem Detailbildschirm von 'M004' angezeigt. Für Ihre eigenen Daten können Sie beliebig viele verwandte Produkte einführen, aber für unsere Zwecke sind diese drei Beispiele ausreichend.

Die SQL-Abfragen

Anhand der Beispieldaten können Sie jetzt Abfragen entwickeln, die Ihrer Datenbank ihre Funktionalität verleihen. Warum machen wir das nicht in der Entwurfsphase? Ganz einfach - dann würden Sie weniger Ihre Site entwerfen, als sich Gedanken um die Logik zu machen. Zuerst schafft man die komplizierten Probleme aus dem Weg, und dann wird die eigentliche Arbeit mit UltraDev zu einer viel angenehmeren Aufgabe.

Die meisten Abfragen in diesem Datenbanksystem sind einfach - simple SELECT- Anweisungen für einzelne Tabellen. Um beispielsweise die Produkttabelle anzuzeigen, verwenden Sie die Abfrage SELECT * FROM tblProduct.

Durchsuchen der Produktdatenbank

Das erste Problem tritt auf, wenn wir das Beschreibungsfeld nach einem Schlüsselwort durchsuchen. In manchen Situationen ist eine einfache Suche ausreichend, die ein Feld in der Datenbank mit einem vorgegebenen Wert vergleicht. Eine einfache Suche durchsucht das Feld jedoch nicht nach dem Wert ANYWHERE, und das ist genau, was Sie brauchen. Abhängig von Ihrer SQL-Implementierung müssen Sie dazu vielleicht etwas anders vorgehen. Die einfachste Methode, die Abfrage mit MySQL auszuführen, ist die Verwendung einer Mustersuchfunktion, um zu prüfen, ob eine Zeichenkette in einer anderen enthalten ist - nämlich wenn die Suchzeichenkette im Beschreibungsfeld enthalten ist.

Eine Suche nach dem Wort Leder sieht beispielsweise wie folgt aus:

select * from tblProduct where prodDesc like "%Leder%" \ G

Die SELECT-Anweisung sucht dabei nach allem, was dem Wort »Leder« ähnlich ist, unabhängig davon, was links und rechts davon steht. Das Ergebnis könnte wie folgt aussehen:

mysql> select * from tblProduct where prodDesc like "%Leder%" \ G
*************************** 1. row ***************************
prodID: M007
catID: 1
prodName: Freizeitschuhe Leder Damen
prodDesc: Attraktiver Lederschuh mit elegantem Aussehen
und bestem Tragekomfort - nur für Damen
prodPrice: 25.1500
prodSmPic: catalogimages/M007sm.jpg
prodLgPic: catalogimages/M007lg.jpg
*************************** 2. row ***************************
prodID: M006
catID: 1
prodName: Schwarze Lederschuhe Damen
prodDesc: Diese Lederschuhe bieten höchsten Tragekomfort
prodPrice: 76.9900
prodSmPic: catalogimages/M006sm.jpg
prodLgPic: catalogimages/M006lg.jpg
*************************** 3. row ***************************
prodID: M002
catID: 1
prodName: Schwarze Lederschuhe
prodDesc: Damit fühlen Sie sich den ganzen Tag wohl.
Diese Lederschuhe sind ein ausgezeichneter Kauf
prodPrice: 76.9900
prodSmPic: catalogimages/M002sm.jpg
prodLgPic: catalogimages/M002lg.jpg
*************************** 4. row ***************************
prodID: M004
catID: 1
prodName: Freizeitschuhe Leder
prodDesc: Attraktiver Lederschuh mit elegantem Aussehen und bestem Tragekomfort
prodPrice: 25.1500
prodSmPic: catalogimages/M004sm.jpg
prodLgPic: catalogimages/M004lg.jpg
4 rows in set (0.00 sec)

Wie beabsichtigt, wurden nur die Datensätze zurückgegeben, die das Wort Leder enthalten. Leider kann in dieser Abfrage ein verborgenes Problem lauern - abhängig davon, welchen Datenbankserver Sie verwenden. Um es zu erkennen, führen Sie die Abfrage leicht abgeändert noch einmal aus:

select * from tblProduct where prodDesc like "%LEDER%" \ G
mysql> select * from tblProduct where prodDesc like "%LEDER%" \ G
Empty set (0.00 sec)

Diese Abfrage funktioniert für das endgültige Produkt offensichtlich nicht wie geplant. Das Problem dabei ist, dass bei der Suche die Groß-/Kleinschreibung berücksichtigt wird. Die Lösung ist die Funktion UPPER, die einen Parameter entgegennimmt und ihn in Großbuchstaben zurückgibt. Um ein Suchelement und das Feld prodDesc zu vergleichen, wandeln wir zunächst beide in Großbuchstaben um und führen anschließend die Suche durch:

select * from tblProduct where UPPER(prodDesc) like UPPER("%leder%");
mysql> select * from tblProduct where UPPER(prodDesc)
like UPPER("%leder%") \ G
*************************** 1. row ***************************
prodID: M007
catID: 1
prodName: Freizeitschuhe Leder Damen
prodDesc: Attraktiver Lederschuh mit elegantem Aussehen und bestem Tragekomfort
prodPrice: 25.1500
prodSmPic: catalogimages/M007sm.jpg
prodLgPic: catalogimages/M007lg.jpg
...

Anzeige verwandter Produkte

Das größte Problem bei dem Produktkatalog ist die Definition der Abfrage, die die verwandten Produkte anzeigt. Die Tabelle mit den Einträgen der verwandten Produkte stellt einen möglichen Ansatz dar, aber sie enthält nicht die gewünschten Informationen. Um beispielsweise die Artikel anzuzeigen, die mit der Produkt-ID M004 verwandt sind, könnten Sie es mit der folgenden Abfrage versuchen:

mysql> select * from tblRelated where prodID1='M004' \ G
*************************** 1. row ***************************
prodID1: M004
prodID2: M005
*************************** 2. row ***************************
prodID1: M004
prodID2: M007
*************************** 3. row ***************************
prodID1: M004
prodID2: M008
3 rows in set (0.00 sec)

Dabei handelt es sich um die korrekten Produktnummern, aber sie stellen nicht die Information dar, die Sie für den Aufbau einer dynamischen Seite brauchen. Sie müssen für jedes der zurückgegebenen prodID2-Felder den zugehörigen Datensatz ermitteln.

Zunächst erscheint dies wie ein zweistufiger Prozess - man ermittelt die IDs verwandter Produkte und sucht dann die zugehörigen vollständigen Datensätze. Sie könnten vielleicht versuchen, dieses Funktionsmerkmal mittels dieser Logik zu realisieren, aber das würde sehr viel Arbeit bedeuten und wird im Datensatzgruppenmodell von UltraDev nicht unterstützt. Wenn die Information nicht innerhalb einer einzigen Abfrage zurückgegeben werden kann, kann UltraDev sie nicht verarbeiten.

Wie der Zufall es jedoch will, kann diese Abfrage auch mit der folgenden Syntax realisiert werden:

select tblProduct.* from tblProduct,tblRelated where tblProduct.prodID=
tblRelated.prodID2 and tblRelated.prodID1='M004';

Bevor Sie es ausprobieren, zerlegen wir die Abfragen, sodass Sie die Logik erkennen:

select tblProduct.* - Wählt alle Felder aus der Datenbank tblProduct aus. Weil es sich hier um eine Abfrage über mehrere Tabellen handelt (einen Join), müssen Sie genau spezifizieren, welche Informationen Sie sehen wollen.

from tblProduct,tblRelated - Dies sind die Tabellen, aus denen die Daten geholt werden. Für die Abfrage sind sowohl die Produkttabelle als auch die Tabelle für verwandte Produkte erforderlich.

tblProduct.prodID=tblRelated.prodID2 - Gibt Datensätze zurück, in denen die Produkt- ID aus der Produkttabelle gleich dem Feld prodID2 der Tabelle verwandter Produkte ist.

tblRelated.prodID1='M004' - Begrenzt die Datensätze auf solche, wo das Hauptproduktfeld (ProdID1) in der Tabelle verwandter Produkte gleich dem Produkt ist, nach dem wir suchen.

Diese Abfrage erledigt auf magische Weise genau das, was wir wollten, und gibt alle Einträge zu dem vorgegebenen Produkt zurück, das ist in diesem Fall M004:

mysql> select tblProduct.* from tblProduct,tblRelated where 
tblProduct.prodID=tblRelated.prodID2 and tblRelated.prodID1='M004' \ G
*************************** 1. row ***************************
prodID: M005
catID: 1
prodName: Angebot Lederschuhe
prodDesc: Falls Sie sparen wollen - diese Schuhe sind preiswert
prodPrice: 6.9500
prodSmPic: catalogimages/M005sm.jpg
prodLgPic: catalogimages/M005lg.jpg
*************************** 2. row ***************************
prodID: M007
catID: 1
prodName: Freizeitschuhe Leder Damen
prodDesc: Attraktiver Lederschuh mit elegantem Aussehen und
bestem Tragekomfort - nur für Frauen
prodPrice: 25.1500
prodSmPic: catalogimages/M007sm.jpg
prodLgPic: catalogimages/M007lg.jpg
*************************** 3. row ***************************
prodID: M008
catID: 1
prodName: Angebot Lederschuhe Damen
prodDesc: Variante unseres Bestsellers. Falls Sie sparen wollen -
diese Schuhe sind preiswert
prodPrice: 6.9500
prodSmPic: catalogimages/M008sm.jpg
prodLgPic: catalogimages/M008lg.jpg
3 rows in set (0.02 sec)

Versuchen Sie immer, Ihrem Datenbankserver die Arbeit zu überlassen. Es scheint zwar, dass eine Abfrage ohne zusätzliche Programmierung unmöglich ist, aber SQL ist eine sehr leistungsfähige Sprache und kann so angepasst werden, dass sie genau das macht, was Sie von ihr erwarten. Darüber hinaus ist die Geschwindigkeit, in der der SQL-Server die Datenverarbeitung vornehmen kann, zweifellos sehr viel höher als die einer eingebetteten Programmiersprache.

Damit ist das SQL fertig, das Sie für das heutige Projekt brauchen. Wie Sie sehen, macht es die restliche Entwicklung sehr viel schneller, wenn erst einmal die Abfragen erledigt sind, und Sie wissen, dass das, was Sie beabsichtigen, auch wirklich funktionieren wird.

Ich habe heute bereits erwähnt, dass ich die Funktionalität verwandter Produkte anders implementieren würde. Versuchen Sie als inoffizielle Übung, die Abfrage entsprechend umzuformulieren. Betrachten Sie dazu den Abschnitt zur Schlüsselwortsuche. Die verwandten Produkte könnten ganz ähnlich implementiert werden.

13.2 Entwurf des Katalogs

Wie bereits erwähnt, wird sich diese Seite von den vorhergehenden dynamischen Applikationen unterscheiden. Der Entwurf wird die verschiedenen Komponenten (Suche, Ergebnisse usw.) kombinieren, und es entsteht für alle Funktionen ein einheitliches Look and Feel.

Bevor Sie mit dem Entwurf der Site anfangen, müssen Sie eine neue Site und eine neue Datenbankverbindung konfigurieren und ein geeignetes Servermodell auswählen. Stellen Sie sicher, dass UltraDev mit Ihrem Webserver und dem Datenbankserver kommunizieren kann.

Es gibt viele Möglichkeiten, ein geeignetes Layout für den Bildschirm zu finden. Ich verwende den in Abbildung 13.3 gezeigten einfachen Tabellenentwurf. Er ist die Grundlage für alle Seiten, die heute entwickelt werden. Der obere Seitenbereich ist für die Titelinformation reserviert, während auf der rechten Seite eventuell dynamische Navigationsinformationen eingefügt werden.

Abbildung 13.3:  Ein einfaches Layout ist für die Applikation ausgezeichnet geeignet.

Um Ihr bereits erworbenes Wissen anzuwenden, speichern Sie dieses erste Dokument als Vorlage, nachdem Sie Titel, Inhaltsbereich und Produkt-Kategoriezellen bearbeitbar gemacht haben. Aus Woche 1 wissen Sie, dass eine Vorlage die Möglichkeit bietet, Informationen, die von zwei Benutzern gemeinsam genutzt werden, an einer einzigen Position vorzuhalten.

Mit diesen Informationen legen Sie jetzt eine neue Seite an, auf der Sie Ihren Entwurf realisieren. Dies wird die Suchseite.

Suchformular

Wir haben die Verwendung von LIKE und % für einfache Suchen im Text eines Feldes bereits besprochen, aber beim Entwurf des Formulars können wir diesen Ansatz noch etwas weiterführen. Alle Felder der Datenbank können in die Suche einbezogen werden, aber nur wenige bieten dem Benutzer sinnvolle Informationen:

Produktbeschreibung (Product Description)

Kategorie (Category)

Preis (Price)

Jetzt legen wir ein Suchformular an, das diese Felder beinhaltet. Die Durchführung dieser Suche bedarf einer gewissen Erklärung, deshalb legen Sie nicht sofort ein beliebiges Formular an.

Das Formular gibt seine Werte an eie Ergebnisseite weiter, die alle übereinstimmenden Elemente anzeigt. Dazu müssen Sie die Aktion Ihres Formulars auf die von results.asp setzen, oder welcher Name eben auf Ihrer Serverplattform verwendet wird. Legen Sie diese Aktion unbedingt fest, bevor Sie fortfahren. Man vergisst sie ganz leicht, was beim Debugging zu größerem Kopfzerbrechen führen kann.

Das Feld für die Produktbeschreibung kann als Textfeld implementiert werden. Das Kategoriefeld verhält sich etwas anders - es verwendet eine Liste mit Elementen, die dynamisch aus tblCategory geladen wird. Das Preisfeld wird für die Suche nach Elementen verwendet, deren Preis kleiner als ein angegebener Wert ist.

Abbildung 13.4:  Legen Sie einen einfachen Suchbildschirm an.

Abbildung 13.4 zeigt einen einfachen Suchbildschirm. Gestalten Sie Ihren Bildschirm ähnlich - nach dem Einfügen des HTML werden Sie ein dynamisches Verhalten einfügen.

Fügen Sie die beiden Popup-Menüs ein, indem Sie in der Objektpalette auf Liste/Menü einfügen klicken. In früheren Übungen haben Sie bereits mehrere Texteingabefelder angelegt, das sollte Ihnen also nicht neu sein. Achten Sie darauf, dass Ihre <FORM>-Tags die gesamte Tabelle umschließen.

Anschließend definieren Sie ein paar Werte für das Popup-Menü Preisobergrenze. Dazu markieren Sie das Feld Preisobergrenze und öffnen die Eigenschaftenpalette. Klicken Sie auf die Schaltfläche Listenwerte, um das Dialogfeld Listenwerte zu öffnen, wie in Abbildung 13.5 gezeigt. Sie fügen der Liste Einträge hinzu, indem Sie das Plussymbol (+) klicken und Werte für die einzelnen Felder festlegen.

Abbildung 13.5:  Fügen Sie diese Werte für eine einfache Suchfunktionalität für Preise ein.

Anschließend konfigurieren Sie die Kategorieliste. Anders als das Popup-Menü für die Preisobergrenze kann diese Liste aus der Information in der Datenbank angelegt werden. Dazu fügen Sie das Serververhalten Dynamische Elemente ein. Zuvor müssen Sie jedoch die Datensatzgruppe definieren, die alle Datensätze der Tabelle tblCategory enthält. Für meinen Setup habe ich die Datensatzgruppe category definiert, die alle benötigten Daten aufnimmt. Sie können sich vorstellen, dass diese Datensatzgruppe sowohl die Textbeschreibung jedes Elements für das Popup-Menü sowie den entsprechenden Wert aufnehmen muss.

Stellen Sie sicher, dass Ihre Datei mit der geeigneten Dateinamenerweiterung für Ihr Servermodell gespeichert wird. Das gilt nicht nur für dieses Projekt, sondern für alle weiteren Projekte, an denen Sie arbeiten werden. Als ich diese Seite angelegt habe, habe ich sie ursprünglich mit der Dateinamenerweiterung .html statt .asp auf dem Server abgelegt. Das Ergebnis war eine Live Data- Anzeigemodus, der nicht funktionierte, und eine Seite, die auf dem Applikationsserver nicht korrekt geöffnet werden konnte. Drei kleine Buchstaben haben mich eine Dreiviertelstunde Fehlersuche gekostet.

Dynamische Menüs

Nachdem die Datensatzgruppe definiert ist, können Sie Ihr dynamisches Serververhalten einfügen. Markieren Sie die Auswahlliste, die Sie für die Kategorie eingefügt haben, 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(s) Liste/Menü.
  4. Tragen Sie die Verhaltenskomponenten wie in Abbildung 13.6 gezeigt ein. Möglicherweise müssen Sie dazu einige Einträge ändern, um Ihre Datendefinition nachzubilden.

Es gibt einige Abschnitte in diesem Dialogfeld, die einer genaueren Erklärung bedürfen:

  1. Datensatzgruppe - Wie für alle Serververhalten wählen Sie die Datensatzgruppe aus, die für die Daten definiert wurde.
  2. Menü - Der Name des Menüs, das von der Datenbank abgeleitet werden muss. Gewöhnen Sie sich an, Ihren Formularen Namen zu geben, sodass Sie sie bei Seiten mit sehr vielen Formularen schnell erkennen.
  3. Beschriftungen abrufen aus - Das Feld in der Datensatzgruppe, das definieren soll, was der Benutzer im Popup-Menü sieht.
  4. Werte abrufen aus - Das Feld in der Datensatzgruppe, das als der Wert der Menüelemente verwendet wird. Im Fall des Produktkatalogs ist dies das Feld catID.
  5. Wert auswählen, der gleich - Der in der Liste ausgewählte Wert.

Leider gibt es mit dem Popup-Menü für die Kategorie immer noch ein kleineres Problem, weil auf dem Bildschirm nur die Auswahlmöglichkeiten aus der Datenbank angezeigt werden. Was tun, wenn der Benutzer alle Datensätze anzeigen will? Am einfachsten fügen Sie dazu eine statische ALL-Option in die Auswahlliste ein.

Abbildung 13.6:  Ein Serververhalten kann ein statisches Popup-Menü in ein dynamisch erstelltes Menü umwandeln.

Öffnen Sie den Eigenschafteninspektor für die Auswahlliste, 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: %

Sie haben richtig gelesen - der Wert des Elements Alle soll gleich % sein. Wenn Sie sich an die ersten SQL-Abfragen erinnern, die wir entwickelt haben, wissen Sie, dass das Prozentzeichen % in Kombination mit dem Schlüsselwort LIKE verwendet wurde, wo es für eine Übereinstimmung mit beliebigen Zeichen stand. Wenn wir in der Suche die Vorgabe catID LIKE '%' treffen, werden alle catID-Werte damit angesprochen - und genau das wollen wir.

Damit ist unsere Definition des Suchbildschirms abgeschlossen und er kann ein paar Ergebnisse ermitteln!

Suchergebnisse

Die Entwicklung der Seite für die Suchergebnisse ist ähnlich der für die Anzeige von Datensätzen, die Sie bisher erstellt haben - mit einem Unterschied: Weil es möglicherweise Hunderte von Einträgen in diesem Katalog gibt, wäre es ganz sinnvoll, sie durchlaufen zu können, ohne Ihren Browser mit 10.000 Datensätzen auf einer einzigen Seite zu überschwemmen. Das ist eine typische Anforderung für Online-Datenbanken und zweifellos ist es unabdingbar für eine Site, die verhältnismäßig viele Daten verwalten muss.

Um die Suchergebnisse darzustellen, legen Sie die neue Seite results.asp an, die ein grundlegendes Layout für die Daten aufweist. Sie sollte mithilfe derselben Vorlagenstruktur erstellt werden, die Sie bereits definiert haben, aber die Ergebnisse werden im Inhaltsbereich in einer vertikalen Liste zurückgegeben, treffen Sie also entsprechende Maßnahmen.

Um sich auf den Entwurf vorzubereiten, brauchen Sie Zugriff auf die Daten in der Datenbank, damit Sie sehen, wie das Ganze zusammenpasst. Das bedeutet, Sie müssen jetzt die Hauptsuchabfrage schreiben!

Es gibt drei Suchbedingungen - das Schlüsselwort, die Kategorie und den Preis. Diese Attribute müssen in der WHERE-Klausel des SQL angegeben werden, um nur diejenigen Datensätze zu ermitteln, die eine Übereinstimmung mit der Suche erbringen. Die folgende Abfrage erledigt diese Abfrage zufriedenstellend:

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

Diese Abfrage ist einfach, aber leistungsfähig. Sie wird durch die drei Bedingungen gesteuert, die von dem definierten Formular abgeleitet sind:

  1. catID LIKE 'formCat' - Die Katalog-ID muss dieselbe sein wie die Katalog-ID im Formular. Der LIKE-Vergleich wird anstelle eines = verwendet, weil der Benutzer in der Lage sein muss, die Kategorie Any anzugeben. Im Popup-Menü gibt Any den Wert % zurück, wodurch in Verbindung mit LIKE alle Elemente eine Übereinstimmung erzeugen.
  2. prodPrice<'formPrice' - Ganz einfach: Der Produktpreis muss kleiner als der auf dem Formular angegebene Preis sein. Wie bei der Kategorie-ID muss es eine Bedingung geben, für die alle Produkte angezeigt werden. Das wurde in dem Formular realisiert, indem eine All-Auswahl mit einem sehr großen Wert angelegt wurde. Falls Sie von einem Paar Schuhe wissen, das mehr als $999.999 kostet, lassen Sie es mich wissen!
  3. prodDesc LIKE '%formKey%' - Das Feld für die Produktbeschreibung schließlich muss den formKey-Wert enthalten. Um überall im Feld zu suchen, verwenden Sie das Zeichen %, womit alle Zeichen um den formKey-Wert herum angesprochen werden.

Am einfachsten richten Sie diese Abfrage für Ihre Datensatzgruppe ein, indem Sie die SQL-Anweisung direkt in das SQL-Feld für die erweiterte Abfrage eingeben. Außerdem müssen Sie verschiedene Variablen einrichten (formCat, formPrice und formKey), die die vom Formular gesendeten Daten aufnehmen. Abbildung 13.7 zeigt die erweiterte Abfrage mit korrekt definierten Variablen.

Abbildung 13.7:  Die Suchabfrage sollte im erweiterten Modus eingerichtet werden.

Abbildung 13.7 setzt voraus, dass Sie das ASP-Servermodell zur Einrichtung von Variablen für die Applikation verwenden. Wenn Sie eines der anderen Servermodelle verwenden, müssen Sie die Werte 'Request("variablenname")' im Feld Laufzeitwert ändern, sodass sie zu dem jeweiligen Modell passen. Weitere Informationen darüber finden Sie in Kapitel 11, »Datenbanksätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren«.

Nachdem die Abfrage für Ihre Seite eingerichtet ist, fügen Sie das Serververhalten Bereich wiederholen ein, sodass mehrere Datensätze gleichzeitig angezeigt werden. Anders als bei früheren Instanzen der Applikation ändern Sie jedoch den wiederholten Bereich so ab, dass er nur ein paar Mal wiederholt wird - in meinem Beispiel zeige ich maximal drei Datensätze gleichzeitig an.

Auf diese Weise präsentiert sich dem Benutzer ein sauberes, übersichtliches Bild. Überprüfen Sie, ob Ihre Seite funktioniert, indem Sie sie mit der Suchseite verbinden und eine Suche nach allen Einträgen in der Datenbank durchführen. Sie sollten eine Ausgabe wie in Abbildung 13.8 gezeigt erhalten.

Leider ist die Anzeige zwar sauber, aber nicht vollständig. Der Benutzer hat noch keine Möglichkeit, die restlichen Datensätze der Datenbank anzuzeigen.

Abbildung 13.8:  Begrenzen Sie die Anzahl der angezeigten Elemente, um den Bildschirm übersichtlich zu halten.

Die Verhalten Zu Datensatz verschieben

Die bisher verwendeten Serververhalten gehen davon aus, dass bestimmte Daten vorliegen, entweder als kompletter Datensatz oder als Datensatzmenge. Sie bieten nicht die Möglichkeit, sich zwischen den Datensätzen zu bewegen. Es gibt jedoch mehrere Serververhalten, die Ihnen eine Bewegung zwischen den einzelnen Datensätzen sowie zwischen Gruppen von Datensätzen in der Datenbank erlauben.

Diese Verhalten finden Sie unter dem Menüpunkt Zu Datensatz verschieben in der Serververhaltenpalette:

Es besteht Verwirrung über den Unterschied zwischen dem Wechseln zu einer Detailseite und zu einem bestimmten Datensatz. Wenn man zu einem Detaildatensatz geht, erfolgt die Übergabe von Werten an eine Detailseite; dabei wird der Datensatz geändert, mit dem UltraDev in einer Datenbank arbeitet. Das Serververhalten Zu bestimmtem Datensatz verschieben kann die Daten übernehmen, die vom Verhalten Zu Detailseite wechseln übergeben wurden, und damit einen einzelnen Datensatz innerhalb einer Datensatzgruppe anzeigen. Als wir den Detaildatensatz zuletzt verwendet haben, haben wir uns manuell zu einer Datensatzgruppe bewegt, die aus einem einzigen Datensatz bestand. Dieser neue Prozess macht das Verhalten schlüssiger.

Um Ihrem Dokument eine Verschiebe zu-Funktionalität hinzuzufügen, legen Sie auf Ihrer Ergebnisseite zwei Links an - Vorheriger und Nächster. Sie können dafür Schaltflächen oder Text verwenden - solange es sich dabei nur um ein gültiges Objekt für einen Hyperlink handelt.

Um das Verhalten Nächster einzurichten, wählen Sie das Objekt aus, das auf die nächste Gruppe mit Datensätzen verweisen soll (bei mir ist das die Textmarke Nächster) und fügen das Serververhalten zum nächsten Datensatz verschieben ein. Abbildung 13.9 zeigt die Konfiguration für dieses Verhalten.

Abbildung 13.9:  Der Wechsel zu der nächsten Gruppe mit Datensätzen ist nur ein Serververhalten weit entfernt.

Das einzige, was Sie im Verschieben zu-Verhalten wirklich festlegen sollten, ist die Datensatzgruppe, die Sie durchlaufen. Es ist alles ganz einfach.

Nachdem Sie das Verhalten für den Hyperlink Nächster festgelegt haben, machen Sie dasselbe für den Hyperlink Vorheriger. Dabei gehen Sie genau vor wie bereits beschrieben, außer dass Sie ein anderes Serververhalten verwenden - zum vorherigen Datensatz verschieben. Testen Sie das Verhalten, indem Sie Ihre Webseite in einem Browser öffnen. Damit sollte es möglich sein, sich durch die verschiedenen Seiten zu klicken und den gesamten Kataloginhalt zu durchlaufen. Abbildung 13.10 zeigt die Anzeige des Katalogs auf meinem Computer.

Abbildung 13.10:  Die Hyperlinks Nächster und Vorheriger sollten jetzt funktionieren.

Zum Serververhalten Vorheriger gibt es eine Alternative, die für Ihre Applikation möglicherweise besser geeignet ist. Das Serververhalten scheint zwar unmittelbar zu reagieren, wenn Sie sich zwischen den Datensätzen bewegen, in Wirklichkeit aber müssen Sie bei jeder Bewegung eine Abfrage für die Datenbank ausführen. Für sehr große Datenmengen kann das viel Zeit in Anspruch nehmen. Eine alternative Methode wäre, die Protokollfunktion des Browsers zu verwenden, um sich zum vorherigen Bildschirm zu bewegen. Mithilfe des Hyperlinks javascript:history.back(); können Sie sich rückwärts durch bereits besuchte Datensätze bewegen.

Falls alles nach Plan gelaufen ist, haben Sie jetzt ein funktionierendes Suchsystem. Es gibt jedoch zwei Bereiche, um die wir uns noch ein bisschen kümmern müssen. Der erste ist natürlich der Detailbildschirm.

Detailbildschirme

Der Detailbildschirm für den Katalog ist bei der Entwicklung der Site am einfachsten zu realisieren, weil Sie ihn eigentlich ja schon erstellt haben! Die Suchergebnisseite ist zu 99 % das, was Sie für eine neue Detailseite brauchen. Um sie für die Verwendung als Detailseite aufzubereiten, gehen Sie wie folgt vor:

  1. Kopieren Sie die Suchergebnisseite in eine neue Datei, details.asp, und öffnen Sie sie.
  2. Löschen Sie das Verhalten Bereich wiederholen. Dieses Verhalten wird nur benötigt, wenn mehrere Datensätze auf der Seite angezeigt werden.
  3. Fügen Sie dem neuen Dokument das Verhalten zu bestimmtem Datensatz verschieben hinzu. Abbildung 13.11 zeigt diese neue Verhaltenskonfiguration.

Bei der Konfiguration von zu bestimmtem Datensatz verschieben handelt es sich einfach nur um die Auswahl einer bestimmten Spalte, die einen Datensatz in der von Ihnen verwendeten Datensatzgruppe eindeutig identifiziert, und eines URL-Parameters, mit dessen Hilfe ein Wert für diese Spalte übergeben wird.

Abbildung 13.11:  Hier teilen Sie UltraDev mit, welche Spalte in der Datenbank mit welchem URL-Parameter übereinstimmen soll.

Wenn wir beispielsweise in unserem Katalogsystem ein bestimmtes Produkt finden wollen, geben wir seine Produkt-ID (prodID) an - also die Spalte, die wir verwenden wollen. Der URL-Parameter ist beliebig, muss aber auf denselben Bezeichner gesetzt werden, der auch in der Suchergebnisseite für das Verhalten zu Detailseite verschieben verwendet wurde. (Keine Sorge; das wurde noch nicht gemacht!)

Schließlich entwerfen Sie den neuen Detailbildschirm so, dass das große Bild des Produkts sowie eine vollständige Beschreibung angezeigt werden. Mein endgültiges Layout sehen Sie in Abbildung 13.12. Natürlich können Sie die Seite ganz Ihren Anforderungen anpassen.

Abbildung 13.12:  Auf der Detailseite zeigen Sie die größere Version des Bilds aus dem Katalog an und bieten die vollständige Produktinformation.

Beachten Sie, dass ich die Hyperlinks Nächster und Vorheriger unten auf meiner Seite beibehalten habe. Damit hat der Benutzer die Möglichkeit, den Katalog von der Detailansicht aus zu durchlaufen. Sie können diese Hyperlinks und die entsprechenden Serververhalten natürlich auch entfernen.

Um dem Benutzer wirklich die Möglichkeit zu bieten, den Produktkatalog anzuzeigen, gehen Sie zurück auf die Ergebnisseite und fügen einen neuen Hyperlink von den Produktsuchergebnissen zur Detailseite ein. Gehen Sie wie folgt vor, um Ihrer existierenden Ergebnisseite das Verhalten hinzuzufügen:

  1. Öffnen Sie die Suchergebnisseite (results.asp).
  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 Serververhaltenpalette.
  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.

Markieren Sie beide Optionen für die Übergabe existierender Parameter (Bestehende Parameter durchlaufen). Damit wird sichergestellt, dass die Suche durch die Detailseite ausgeführt wird.

Wenn Sie die existierenden Parameter nicht Ihrer Detailseite übertragen, werden Sie sich später vermutlich die Haare raufen. Die Hyperlinks Nächster und Vorheriger auf der Detailseite durchlaufen die gesamte Datensatzgruppe, statt nur die Suchergebnisse. Darüber hinaus bewirken Sprünge auf andere Seiten, dass die Suchergebnisse verloren gehen - das ist wichtig, wenn Sie vorhaben, die Funktionalität des Katalogs zu erweitern.

Verwandte Elemente

Sie erinnern sich, wie wir anfänglich eine komplexe Abfrage konstruiert haben, mit der verwandte Elemente für ein Element angezeigt werden konnten. Jetzt wollen wir der Seite details.asp diese Abfrage hinzufügen. Dazu öffnen Sie die Detailseite, legen eine neue Datensatzgruppe an und gehen dann in den erweiterten Modus. Konfigurieren Sie die Abfrage wie in Abbildung 13.13 gezeigt.

Abbildung 13.13:  Weil das SQL schon entwickelt wurde, ist es ganz einfach, verwandte Datensätze anzuzeigen.

Auch hier müssen Variablen angelegt werden, die die id aus dem URL-Parameter entgegennehmen und sie an die Definition der Datensatzgruppe weitergeben.

Anschließend ändern Sie Ihren Detailbildschirm so, dass die Datensätze aus der Datensatzgruppe auf dem Bildschirm angezeigt werden. Schaffen Sie unten im Fenster Platz und ziehen Sie dann das Feld prodName aus der neuen Datensatzgruppe in die Entwurfsansicht.

Schließlich richten Sie das dynamische Feld Produktname, das Sie dem Entwurf hinzugefügt haben, als wiederholten Bereich ein. Der endgültige Entwurf für Ihre Seite sollte wie in Abbildung 13.14 gezeigt aussehen.

Abbildung 13.14:  Die verwandten Elemente können unten in der Entwurfsansicht als wiederholter Bereich eingefügt werden.

Achten Sie darauf, die richtige Datensatzgruppe auszuwählen, wenn Sie den wiederholten Bereich für verwandte Elemente definieren. Hier sind zum ersten Mal mehrere Datensatzgruppen in einem einzelnen Dokument vorgekommen.

Wenn Sie diese Seite in Ihren Browser laden, zeigt sie unten auf dem Bildschirm eine Liste der verwandten Elemente an - basierend auf der Tabelle tblRelated, die in der Datenbank erstellt wurde.

Seitenelemente anzeigen/verbergen

Jetzt zum letzten Thema in diesem Kapitel. Angenommen, Sie wollen Nacktfotos von sich auf der Webseite bereitstellen, sie aber verbergen und nur unter bestimmten Voraussetzungen anzeigen. UltraDev hat ein spezielles Element, Bereich anzeigen, das genau für diesen Zweck geschaffen wurde. Hier wollen wir jedoch nicht auf den Exhibitionismus gewisser Programmierer eingehen, sondern das Ganze für eine profanere Aufgabe einsetzen - das Anzeigen und Verbergen von Hyperlinks, abhängig von verschiedenen Bedingungen.

Nachdem der Benutzer auf der Webseite eine Suche durchgeführt hat, gelangt er auf die Suchergebnisseite. Er kann sich mithilfe der Hyperlinks Nächster und Vorheriger unten auf dem Bildschirm durch die Suchergebnisse bewegen. Was passiert jedoch, wenn er sich auf der ersten Seite der Suchergebnisse befindet und auf den Hyperlink Vorheriger klickt, oder wenn er auf der letzten Seite auf Nächster klickt?

Durch Anklicken dieser Links gelangt der Benutzer wieder auf die Seite, auf der er sich bereits befindet, aber gleichzeitig wird die Datenbank erneut abgefragt. Damit entsteht eine zusätzliche Belastung für das Serversystem und es wird ein falscher Link erzeugt, der dem Benutzer präsentiert wird.

Jetzt sollte man sich fragen »Wäre es nicht praktisch, besäße UltraDev eine Methode zu erkennen, ob es sich um den ersten oder den letzten Datensatz in einer Datensatzgruppe handelt, und entsprechend die Elemente anzuzeigen?« Dem kann man nur zustimmen!

Bereich anzeigen sind die letzten Serververhalten, die Sie heute kennen lernen werden. Damit ist es möglich, einen Abschnitt Ihres HTML-Codes zu markieren und ihn nur dann anzuzeigen, wenn bei einer Datenbankabfrage bestimmte Bedingungen erfüllt sind.

Um dieses Verhalten anzuwenden, öffnen Sie die Suchergebnisseite und wählen den Link Nächster aus. Anschließend öffnen Sie die Serververhaltenpalette und wählen im Menü Bereich anzeigen die Option Bereich zeigen, wenn nicht letzter Datensatz. Sehr viel mehr Konfiguration ist nicht erforderlich. Wählen Sie einfach die zu wiederholende Datensatzgruppe und klicken Sie auf OK, wie in Abbildung 13.15 gezeigt.

Abbildung 13.15:  Das Verhalten Bereich anzeigen kann abhängig vom Status einer Datenbankabfrage bestimmte Bereiche anzeigen.

Wiederholen Sie diesen Prozess für den Hyperlink Vorheriger, verwenden Sie dabei jedoch die Option Bereich zeigen, wenn nicht erster Datensatz.

Das Verhalten Bereich anzeigen erkennt verschiedene Statuszustände. Sie sind hier vielleicht nicht erforderlich, aber irgendwann werden Sie sie in Ihren Applikationen brauchen können:

  1. Bereich zeigen, wenn Datensatzgruppe leer ist - Falls eine Suche keine Ergebnisse zurückgibt, wird diese Bedingung als True betrachtet.
  2. Bereich zeigen, wenn Datensatzgruppe nicht leer ist - Falls ein oder mehrere Datensätze zurückgegeben werden, wird diese Bedingung als True betrachtet.
  3. Bereich zeigen, wenn erster Datensatz - Falls der erste Datensatz in der aktuellen Datensatzgruppe enthalten ist, wird diese Bedingung als True betrachtet.
  4. Bereich zeigen, wenn nicht erster Datensatz - Falls die Datensatzgruppe den ersten Datensatz nicht enthält, wird der Bereich angezeigt.
  5. Bereich zeigen, wenn letzter Datensatz - Falls der letzte Datensatz angezeigt wird, wird der Bereich angezeigt.
  6. Bereich zeigen, wenn nicht letzter Datensatz - Falls der letzte Datensatz nicht angezeigt wird, wird der Bereich angezeigt.

Behalten Sie diese Optionen für zukünftige Verwendungszwecke im Gedächtnis. Nachdem Sie Ihre letzten Verhalten definiert haben, können Sie die fertige Version des Katalogsuchsystems testen. Gehen Sie zuvor jedoch zurück auf den Produktdetailbildschirm, und verbergen Sie die Links Vorheriger und Nächster, falls Sie sie in Ihrer Version bisher noch beibehalten haben.

Mithilfe eines Bereich anzeigen-Verhaltens verbergen Sie den Bereich nur, wenn eine bestimmte Bedingung erfüllt ist. Wenn Sie sensible Daten vor einem Benutzer verbergen wollen, ist das Verhalten Bereich anzeigen durchaus geeignet. Bei der Ansicht des Quellcodes wird die verborgene Information nicht angezeigt. Der Bereich wird auf Serverebene aus der Information entfernt, die an den Browser des Benutzers weitergegeben wird, es sei denn, die von Ihnen angegebenen Bedingungen sind erfüllt.

13.3 Automatisieren der Navigationsleiste

Wie Sie vielleicht schon erraten haben, könnten Sie das in Kapitel 11 beschriebene Verhalten Master-/Detailseite nutzen, um auf die heute entwickelten Bildschirme zu springen. Weil ich mehrere neue Serververhalten vorgestellt haben, wie beispielsweise Bereich anzeigen, sollten Sie den Schritten beim Entwicklungsprozess für den Katalog genau folgen, um wirklich zu verstehen, in welcher Beziehung die verschiedenen Serververhalten zueinander stehen.

Nach all diesen Informationen sollen Sie erfahren, dass es noch zwei weitere Werkzeuge gibt, die Sie in zukünftigen Projekten einsetzen könnten, um den Prozess noch effizienter zu machen. Es handelt sich dabei um die Objekte Navigationsleiste für Datensatzgruppen und Navigationsstatus für Datensatzgruppe - beide befinden sich im Menü Einfügen > Live-Objekte.

Navigationsstatus

Der Navigationsstatus ist einfach nur eine Zeichenkette, die anzeigt, welcher Datensatz aus der Gesamtheit der Datensätze einer Datensatzgruppe betrachtet wird. Auf diese Weise kann ein Benutzer abschätzen, wo in der Datenbank er sich ungefähr befindet. Um diese Information in Ihr Dokument einzufügen, klicken Sie einfach auf das Zahlensymbol in der Kategorie Live der Objektpalette. Alternativ könnten Sie das Objekt auch direkt aus dem Untermenü Live-Objekte des Hauptmenüs Einfügen einfügen.

Die Konfiguration ist einfach, wie in Abbildung 13.16 gezeigt. Wählen Sie die Datensatzgruppe, deren Status angezeigt werden soll, und klicken Sie auf OK. Die entsprechende Information wird direkt in die Entwurfsansicht Ihres Dokuments eingefügt.

Abbildung 13.16:  Wählen Sie die Datensatzgruppe aus, für die Statusinformationen angezeigt werden sollen.

Dasselbe erzielen Sie, indem Sie manuell die Objekte [erster Datensatz-Index], [letzter Datensatz-Index] und [Datensätze gesamt] aus der Datenbindungenpalette für eine bestimmte Datensatzgruppe herausziehen. Diese drei Elemente zeigen den ersten Datensatz in der Datensatzgruppe, den letzten Datensatz bzw. die Gesamtzahl der Datensätze.

Navigationsleisten

In diesem Kapitel haben Sie bereits die Hyperlinks Nächster und Vorheriger eingefügt, um eine Navigation durch die Datensatzgruppe zu ermöglichen. Außerdem haben Sie diesen Links die Bereich anzeigen-Verhalten hinzugefügt, um sie nur dann anzuzeigen, wenn bestimmte Bedingungen erfüllt sind. Sie können diesen ganzen Prozess automatisieren, indem Sie in der Objektpalette in der Kategorie Live auf das Objekt Navigationsleiste für Datensatzgruppen einfügen klicken.

Wie beim Navigationsstatus geben Sie an, für welche Datensatzgruppe Sie eine Navigationsleiste bereitstellen wollen, und ob Sie Grafiken oder Text für Hyperlinks verwenden wollen. Abbildung 13.17 zeigt den Bildschirm für die Konfiguration einer Navigationsleiste. Klicken Sie auf OK, nachdem Sie alle Informationen eingetragen haben.

Abbildung 13.17:  Geben Sie Ihre Datensatzgruppen ein und ob für die Links Text oder Grafiken verwendet werden soll.

Die in Ihr Dokument eingefügte Datensatzgruppen-Navigation beinhaltet die Verhalten Nächster und Vorheriger, die Sie bereits manuell eingefügt haben, ebenso wie die Schaltflächen Erster und Letzter, um zu dem ersten und letzten Datensatz in einer Datensatzgruppe zu springen. Die Bereich anzeigen-Verhalten werden dem Dokument ebenfalls hinzugefügt, sodass die Navigationsleiste nur dann angezeigt wird, wenn es erforderlich ist.

Sie können natürlich auch die Serververhalten verwenden, die Sie zuvor benutzt haben, um Ihrem Dokument diese Funktionalität zu verleihen. Dieses vorgefertigte Vorlageobjekt macht die Bereitstellung einer grundlegenden Datensatz-Navigation jedoch ganz einfach - mit einem einzigen Klick ist alles erledigt.

13.4 Zusammenfassung

In diesem Kapitel haben Sie ein einheitliches Layout für ein Katalogsystem entwickelt und eine Ergebnisseite angelegt, auf der man sich ganz einfach bewegen kann. Durch die Begrenzung der gleichzeitig angezeigten Einträge ist es einfach, Sites mit kontrolliertem Erscheinungsbild zu erstellen. Die Verschieben zu-Serververhalten ermöglichen eine Navigation innerhalb der auf dem Bildschirm angezeigten begrenzten Datenmengen.

Das Verhalten Bereich anzeigen bietet Ihnen die ultimative Steuerung über die Benutzeroberfläche. Statt sinnlose Hyperlinks anzuzeigen, die ins Nichts führen, verbergen Sie diese, abhängig von dem Status einer Datensatzgruppe.

Je weiter Sie in diesem Buch fortschreiten, desto straffer versuche ich alles zu formulieren. Wenn Sie Probleme mit den im Text beschriebenen Funktionen haben, sollten Sie den Stoff aus den letzten Kapiteln noch einmal betrachten. Anhand der Projekte der letzten Woche sollten Sie das UltraDev-Layout und die verfügbaren Serververhalten verstanden haben.

Alle weiteren Kapitel werden der hier vorgestellten didaktische Vorgehensweise folgen - zunächst wird die Entwicklung der Backend-Datenbank beschrieben und dann der Entwurf der eigentlichen Site. Der Titel dieses Buchs besagt zwar, dass es auf 21 Tage ausgelegt ist, aber Sie können sich dennoch beliebig viel Zeit nehmen, es zu lesen.

13.5 Fragen und Antworten

Frage:
Warum sollte ich nicht alle zurückgegebenen Datensätze aus einer Datensatzgruppe anzeigen?

Antwort:
Die Anzeige aller Datensätze aus einer Datensatzgruppe war für die kleinen Applikationen, die wir bisher entwickelt haben, durchaus sinnvoll, aber überlegen Sie nur, was passiert, wenn eine Datenbank mehrere Tausend Datensätze enthält. Die Anzeige von 2.000 Thumbnail-Bildern auf einer Seite wird den Browser des Benutzers weitgehend ausbremsen.

Frage:
Wie kann ich die Schaltflächen Nächster und Vorheriger nutzen, um die gesamte Datenbank statt einer Untermenge zu durchlaufen?

Antwort:
Der einzige Grund, warum Nächster und Vorheriger auf einige wenige Datensätze begrenzt sind, ist, dass die Datensatzgruppe durch die Suchparameter definiert ist. Mit den Aktionen Nächster und Vorheriger ohne Suchparameter wird die gesamte Datenbank zur Anzeige bereitgestellt.

Frage:
Warum haben wir oben nicht die Option Zu bestimmtem Datensatz verschieben verwendet?

Antwort:
Die Option Zu bestimmtem Datensatz verschieben wird nur dann benötigt, wenn sich in der Datensatzgruppe mehrere Datensätze befinden. Als wir den letzten Detaildatensatz erstellt haben, war das Ergebnis in einem Worst Case-Szenario definiert und es gab nur einen einzigen Datensatz in der Datensatzgruppe - somit mussten wir nicht zu einem bestimmten Datensatz gehen.

Frage:
Wofür braucht man die Bereich anzeigen-Verhalten, außer für die Navigation?

Antwort:
Sie werden überrascht sein, wie praktisch diese Bereiche sein können, insbesondere wenn Sie sie verwenden, um Code anzulegen, den Sie später verändern wollen. Beispielsweise können Sie Code anlegen, der bestimmte andere Aktionen ausführt, als nur Bereiche anzuzeigen. Richten Sie das Grundgerüst unter Verwendung des Serververhaltens ein, um einen generischen Bereich im Dokument anzuzeigen/zu verbergen und fügen Sie dann benutzerdefinierten Code in das Dokument ein.

13.6 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. Wie finden Sie in SQL eine Übereinstimmung für alle Werte (ANY)?
  2. Beschreiben Sie eine alternative Methode für die Realisierung der Funktionalität verwandter Elemente.
  3. Wie fügen Sie einer Datensatzgruppe die Funktionalität Nächster und Vorheriger hinzu?
  4. Wie wird das Verhalten Bereich anzeigen verwendet?
  5. Was passiert, wenn Sie vergessen, einer Datei eine entsprechende Dateinamenerweiterung zuzuordnen?
  6. Gibt es eine Alternative zum Verhalten Vorheriger?
  7. Wie legen Sie am schnellsten eine Navigationsleiste an?

Übungen

  1. Fügen Sie Navigationshyperlinks ein, um sich durch die drei Seiten zu bewegen. Momentan gibt es keine Möglichkeit, zu einer der Seiten zurückzugelangen, nachdem Sie sie verlassen haben. Um ein vollfunktionales Katalogsystem zu realisieren, muss der Benutzer in der Lage sein, sich durch die gesamte Site zu bewegen.
  2. Beachten Sie, dass ich links auf dem Bildschirm einen Seitenbereich freigelassen habe. Dort soll ein Site-übergreifender Suchmechanismus realisiert werden. Damit wird der Site die Funktionalität hinzugefügt, durch Anklicken eines Kategorie-Links unmittelbar alle Ergebnisse in diesem Bereich anzuzeigen.
  3. Als letzte Übung ändern Sie die im Katalog aufgelisteten verwandten Produkte so, dass man sie anklicken kann und sie den Benutzer zu den zugehörigen Detailseiten weiterführen. Hinweis: Dafür müssen Sie dem Detailbildschirm ein weiteres Serververhalten hinzufügen - das Sie bereits benutzt haben.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


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