Dreamweaver UltraDev 4 in 21 Tagen . Eigene E-Commerce-Anwendungen ohne Programmierkenntnisse

- bzw. <SPAN>-Tag regeln Sie, wie der Browser Inhalt einer Ebene behandeln soll, der größer ist als die Ebene selbst. VISIBLE zeigt den gesamten Inhalt der Ebene an, HIDDEN schneidet alles ab, was außerhalb des sichtbaren Bereichs der Ebene liegt. Die beiden letzten Optionen, SCROLL und AUTO blenden entweder dauerhaft Scrollbalken ein bzw. nur dann, wenn der Inhalt der Ebene den verfügbaren Platz überschreitet.

쐽

ABSCHN. L/O/R/U – Diese Werte sind mit den Koordinaten vergleichbar, die beim Definieren einer Ebene erzeugt werden, nur dass Sie über diese Attribute die sichtbaren Bereiche der Ebene bestimmen und nicht ihre Größe oder Position auf der Seite. Diese Werte sind relativ zur Ebene, nicht zur Seite. Sie benötigen diese Attribute zur Erstellung bestimmter JavaScript-basierter Effekte.

Mit den restlichen Optionen sollten Sie mittlerweile keine Schwierigkeiten mehr haben.

Die Ebenenpalette Da man Ebenen sehr häufig braucht, haben ihnen die Entwickler bei Macromedia eine eigene Werkzeugpalette spendiert. Um deren Funktionen näher kennen zu lernen, fügen Sie noch einige weitere Ebenen in das Dokument ein. Wenn Sie beim Einfügen der Ebene auf die Strg-Taste (Win) oder Befehl-Taste (Mac) drücken, können Sie sogar verschachtelte Ebenen erzeugen. Öffnen Sie nun mit Menü FENSTER > EBENEN die Ebenenpalette (Abb. 2.21). Mit dieser Palette können Sie unter anderem den Z-Index aller erstellten Ebenen verändern.

Abbildung 2.21: Die Ebenenpalette gibt Ihnen einen schnellen Überblick über alle Ebenen innerhalb eines Dokuments.

Wenn Sie auf das Augensymbol in der zugehörigen Spalte klicken, können Sie Ebenen ein- bzw. ausblenden (offenes bzw. geschlossenes Auge). Um den Namen einer Ebene und ihren Z-Index zu ändern, klicken Sie das betreffende Feld an und Sie können es editieren. Wenn Sie verschachtelte Ebenen erzeugt haben, werden diese eingerückt als hierarchische Liste angezeigt. Sie können verschachtelte Ebenen von der übergeordneten Eltern-Ebene lösen, indem Sie sie innerhalb der Ebenenpalette verschieben.

105

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Über dem Ebenenfeld gibt es ein Kontrollfeld ÜBERLAPPUNGEN VERHINDERN. Wenn Sie diese Option aktivieren, können Sie neu erstellte Ebenen nicht mehr über bereits vorhandenen platzieren. Über Menü MODIFIZIEREN > ANORDNEN > EBENENÜBERLAPPUNGEN VERHINDERN erreichen Sie denselben Zweck. Wozu dient nun diese Funktion?

Ebenen in Tabellen verwandeln und umgekehrt Wenn Sie einerseits nicht auf den Komfort verzichten möchten, den Ihnen die Verwendung von Ebenen in der Gestaltungsarbeit gibt, Ihnen andererseits aber auch die CrossBrowser-Kompatibilität Ihrer Seiten am Herzen liegt, bietet UltraDev ein Feature, das die Lösung für dieses Dilemma darstellt: Sie können nämlich Ebenen in Tabellen umwandeln und umgekehrt. Sie setzen also Ihren Entwurf unter Verwendung von Ebenen um, die Ihnen die freie Positionierung aller Elemente auf der Seite gestatten, und bevor Sie die Seiten publizieren, wandeln Sie sie in Tabellen um. Das einzige Hindernis besteht darin, dass das Programm sich überlappende Ebenen nicht in Tabellen verwandeln kann – daher das Kontrollfeld, von dem im vorigen Abschnitt die Rede war. Sie können diese Funktion ausprobieren, indem Sie sie über das Menü MODIFIZIEREN > KONVERTIEREN > EBENEN IN TABELLEN KONVERTIEREN aufrufen. Es öffnet sich das in Abb. 2.22 gezeigte Dialogfenster. Nach meiner Erfahrung ist es das Beste, die eingestellten Defaultwerte zu verwenden. Wenn es Ihnen nicht so sehr auf die exakte Positionierung der Zellen in der erzeugten Tabelle ankommt, können Sie statt der Option HÖCHSTE GENAUIGKEIT auch die Option KLEINSTES verwenden. Wenn Sie Tabellen mit höchster Genauigkeit erstellen lassen, erzeugt UltraDev so viele Zellen wie nötig, um den Inhalt der Ebenen möglichst genau zu positionieren. Mit der Option KLEINSTES werden Inhalte in die nächstliegende Zelle eingefügt, wenn sie innerhalb einer gewissen Zone liegen (Defaulteinstellung 4 Pixel). So werden kleinere Bereiche so weit wie möglich in einer Zelle zusammengefasst und die erzeugte Tabellenstruktur ist weniger kompliziert. Nachfolgend eine Übersicht über die weiteren Einstellungsmöglichkeiten: 쐽

DURCHSICHTIGE GIFS VERWENDEN – Formatiert die erzeugte Tabelle mit transparenten GIFs, sodass sie in allen Browsern gleich angezeigt wird.

쐽

AUF SEITE ZENTRIEREN – Die erzeugte Tabelle wird mittig auf der Seite platziert.

쐽

EBENENÜBERLAPPUNGEN VERHINDERN – Gleichnamige Funktion ein- bzw. ausschalten.

쐽

EBENENPALETTE ANZEIGEN – Ebenenpalette wird angezeigt, nachdem die Tabelle erzeugt wurde.

쐽

RASTER ZEIGEN – Raster wird angezeigt, nachdem die Tabelle erzeugt wurde.

쐽

AM RASTER EINRASTEN – Gleichnamige Funktion ein- bzw. ausschalten, nachdem die Tabelle erzeugt wurde.

106

Ebenen

Abbildung 2.22: Problemlose Umwandlung von Ebenen in Tabellen.

Umgekehrt können Sie auch Seiten, die Sie mithilfe eines Tabellenlayouts erstellt haben, von UltraDev in Ebenen konvertieren lassen. Rufen Sie hierzu den entsprechenden Befehl über Menü MODIFIZIEREN > KONVERTIEREN > TABELLEN IN EBENEN KONVERTIEREN auf. Sie werden feststellen, dass die Ergebnisse dieser Konvertierung nicht hundertprozentig exakt ausfallen. Die Grenzen dieser Funktion zeigen sich, wenn man zwischen Tabellen und Ebenen hin- und herkonvertiert. Wenn Sie z.B. bei der Konversion von Ebenen in Tabellen die Option DURCHSICHTIGE GIFS VERWENDEN aktiviert haben und nun die Tabelle wieder in Ebenen umwandeln lassen, wird nun jedes dieser GIFs in einer eigenen Ebene abgelegt. Aber auch mit diesen Einschränkungen handelt es sich trotz allem um eine höchst nützliche Funktion, die die Umsetzung von Layouts für ältere Browser erleichtert.

Mittels Frames Elemente mehrfach verwenden Bisher haben wir um Seiten miteinander zu verlinken keine andere Möglichkeit kennen gelernt, als jede Seite mit einer eigenen Menüleiste zu versehen. Dem Anwender eine einheitliche Menüsteuerung anzubieten ist eine der wichtigsten Gestaltungsregeln für die Erstellung einer Website. Konfrontieren wir den Anwender ständig mit einer anderen Oberfläche, wird ihn das irritieren und kaum längere Zeit auf unserer Seite halten. Wenn Sie mit Rollover-Menüs arbeiten, kann es einige Zeit dauern, bis die nächste Seite geladen ist. Selbst wenn die Buttons für unser Rollover-Menü im Cache abgelegt werden, bleibt die Ladezeit ein kritischer Punkt. Die Definition eines Framesets ist eine Möglichkeit, wie wir diesem Problem begegnen können. Ein Frameset besteht aus zwei oder mehreren Frames, die jeweils ein selbstständiges HTML-Dokument enthalten. Wir können also ein Framefenster für die Menüsteuerung definieren und ein weiteres für den Inhalt. Ein Vorteil der Frametechnik ist, dass wir die Inhalte der einzelnen Frames unabhängig voneinander austauschen können, also in den Inhaltsframe eine neue Datei laden können, während der Menüframe unverändert bleibt. Ein weiterer Vorteil ist, dass man die einzelnen Framefenster separat scrollen kann.

107

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Wenn Sie also in den Inhaltsframe Ihrer Seite ein längeres Dokument laden, bleibt das Menü an seinem festen Platz, sodass der Anwender jederzeit Zugriff auf die übrigen Seiten hat, während er das Dokument durchsucht. Sicher ist Ihnen schon das Eingabefeld ZIEL aufgefallen, wenn Sie einen Link gesetzt haben. Dieses Feld kommt jetzt bei der Erstellung von Framesets ins Spiel. Jeder Frame innerhalb eines Framesets hat einen eindeutigen Namen. Wenn Sie ein Dokument in einen bestimmten Frame laden lassen wollen, geben Sie bei der Definition des Links im Feld ZIEL den Namen dieses Frames an. Soll das Dokument in den gleichen Frame geladen werden, erübrigt sich die Angabe eines Ziels.

Framesets erstellen Die Definition von Framesets ist nicht gerade die stärkste Seite an UltraDev – wenn Sie mit dieser Funktion Probleme haben, sollten Sie die Schuld nicht bei sich suchen. Die Frame-Werkzeuge sind leider nicht so intuitiv zu bedienen, wie man das gerne hätte. Um ein Frameset zu erstellen, müssen Sie zuerst ein neues Dokument öffnen. Als Nächstes brauchen Sie die Unterpalette FRAMES der Objektpalette. Wählen Sie die Schaltfläche LINKEN FRAME EINFÜGEN. Hiermit teilen wir auf der linken Seite des Fensters einen Bereich, der unser Menü aufnehmen soll. Wenn Sie ein Frameset eingefügt haben, sehen Sie, dass die Design-Ansicht ähnlich wie eine Tabelle in verschiedene Bereiche aufgeteilt ist. Wenn Sie in einen dieser Bereiche klicken, um ihn zu bearbeiten, können Sie das HTML-Dokument, das in diesen Frame geladen wird, unmittelbar bearbeiten. Im Unterschied also zu Tabellen bearbeiten Sie nicht einzelne Zellen, sondern ein ganzes HTML-Dokument. Bevor wir uns aber ans Editieren machen, sollten wir das Frameset nach unseren Vorstellungen einrichten. Wählen Sie hierzu den Frame-Rahmen in der Dokumentansicht per Mausklick aus; die Frame-Rahmen müssen eingeschaltet sein (Menü ANSICHT > VISUELLE HILFSMITTEL > FRAME-RAHMEN). Wenn Sie den Mauszeiger auf den Frame-Rahmen setzen, verändert sich der Cursor zu einem Skalierwerkzeug. Ziehen Sie nun die Begrenzungslinie mit gedrückter Maustaste an die gewünschte Position. Wählen Sie nun durch Klicken auf den äußeren Rahmen das Frameset selbst aus und öffnen Sie den Eigenschafteninspektor. Abb. 2.23 zeigt die Eigenschaften eines Frame-Rahmens mit Menüsteuerung im linken Frame, wie wir ihn eingerichtet haben. Abbildung 2.23: Wählen Sie das Frameset aus, um die Eigenschaften der einzelnen Frames festzusetzen.

108

Ebenen

Im Eigenschafteninspektor können Sie die Größe der einzelnen Frames nun direkt editieren. Am rechten Rand der Palette sehen Sie ein grafisches Schema der aktuellen Frameteilung. Durch Anklicken der jeweiligen Fläche wählen Sie den entsprechenden Frame aus. Folgende Eigenschaften können Sie verändern: 쐽

RAHMEN – Wenn Sie möchten, dass Ihr Frameset von einer sichtbaren Begrenzungslinie umgeben ist, setzen Sie diese Option.

쐽

RAHMENBREITE – Wenn Sie eine Begrenzungslinie anzeigen lassen, definieren Sie hier deren Breite (in Pixel).

쐽

RAHMENFARBE – Hier weisen Sie der Begrenzungslinie eine Farbe zu.

쐽

ZEILEN- BZW. SPALTEN-AUSWAHL – Weist dem Frame eine relative (in Prozent) bzw. absolute (in Pixel) Breite oder Höhe zu.

Nachdem Sie diese Einstellungen vorgenommen haben, können Sie die Frames mit Inhalt füllen. Ich richte mein Frameset so ein, dass der linke Frame die Datei navigation.html aufnimmt und der rechte die Datei content.html. (Achtung! Diese Dateien müssen bereits vorhanden sein, bevor Sie sie in das Frameset einbinden.) Das geht am leichtesten mit der Frames-Palette, die Sie über Menü FENSTER > FRAMES öffnen (siehe Abb. 2.24). Über diese Palette können Sie nun die Eigenschaften der einzelnen Frames editieren, während wir zuvor die Eigenschaften des Framesets bearbeitet haben. Die Namen der einzelnen Frames werden in der Frames-Palette angezeigt.

Abbildung 2.24: Frames mit der Frames-Palette zur Bearbeitung auswählen

Die Frames-Palette Um einzelne Frames mit der Frames-Palette zu bearbeiten, muss der Eigenschafteninspektor ebenfalls geöffnet sein. Wählen Sie nun einen Frame in der Frames-Palette zur Bearbeitung aus und beachten Sie, wie sich die Oberfläche des Eigenschafteninspektors verändert. Es werden ganz spezifische Möglichkeiten der Editierung angeboten: 쐽

FRAME-NAME – Das ist der Name, mit dem Sie den Frame über das Attribut ZIEL ansprechen können. Wenn Sie als Ziel eines Links diesen Wert angeben, wird das Dokument in diesen Frame geladen.

109

Die WYSIWYG-Layoutwerkzeuge von UltraDev

쐽

QUELLE – In dieses Feld tragen Sie die Datei ein, die in diesem Frame zunächst angezeigt werden soll. In meinem Beispiel von oben käme in den linken Frame die Datei navigation.html und in den rechten Frame die Datei content.html.

쐽

ROLLEN – Hier stellen Sie ein, ob der Frame scrollen kann oder nicht. Bei Frames, die eine Menüsteuerung aufnehmen soll, wird man das Scrollen unterdrücken.

쐽

KEINE GRÖSSENÄNDERUNG – Wenn Sie möchten, dass der Anwender die Begrenzungslinien zwischen Frames frei verschieben kann, müssen Sie sie abwählen.

쐽

RAHMEN – Wenn Sie möchten, dass der aktuelle Frame von einem Begrenzungsrahmen umgeben ist, wählen Sie »Ja«. Diese Einstellung überschreibt die Einstellungen im Frameset.

쐽

RAHMENFARBE – Wenn Sie einen Rahmen anzeigen lassen möchten, können Sie ihm hier eine Farbe zuweisen.

Wenn Sie alle Einstellungen vorgenommen haben, speichern Sie Ihr Frameset mit Menü DATEI > FRAMESET SPEICHERN. In Abb. 2.25 sehen Sie das von mir erstellte Frameset. Wie Sie sehen, bleibt die Menüsteuerung im linken Frame fest stehen, während sich der rechte Frame scrollen lässt. Abbildung 2.25: Mit Framesets können Sie auf einer Seite statische Bereiche, wie z.B. ein Menü, definieren, die nicht mit dem anderen Teil der Seite gescrollt werden.

NoFrames-Inhalt bearbeiten Innerhalb des HTML-Codes, mit dem ein Frameset definiert wird, gibt es einen Bereich, der dann angezeigt wird, wenn der Browser die Darstellung von Frames nicht beherrscht. In diesem Bereich können Sie eine »framelose« Variante der Seite ablegen oder den Anwender höflich auffordern, sich einen neueren Browser zu besorgen, wenn er die Seite sehen möchte. Über das Menü MODIFIZIEREN > FRAMESET > NOFRAMES-INHALT BEARBEITEN können Sie diese Bereich aufrufen und bearbeiten.

110

Ebenen

Komplexe Framesets Bei der Erstellung von Framesets sind Sie nicht an die vordefinierten Schemata der Objektpalette gebunden. Ähnlich wie Tabellen können Sie auch Frames ineinander verschachteln, um einen Frame weiter zu unterteilen. Sie können Frames auch über das Menü MODIFIZIEREN > FRAMESET beliebig teilen. Das hat den Vorteil, dass Sie neue Frames innerhalb des aktuellen Framesets definieren und nicht Frameset in Frameset schachteln – was einen unschönen Spagetti-Code zur Folge hätte. Es gibt eigentlich nur einen vertretbaren Grund, mehrere Framesets ineinander zu verschachteln. Wie die Dinge im Moment liegen, können Links nur auf einen einzigen Frame innerhalb eines Framesets oder auf das Frameset selbst zeigen. Möchten Sie innerhalb eines Framesets nun mehrere Frames auf einmal austauschen, müssen Sie diese Frames in einem einzigen Frameset zusammenfassen und den Link auf dieses Frameset setzen.

Das Für und Wider von Frames Momentan wird die Frage, ob man zur Gestaltung von Websites Frames verwenden soll, wieder stärker diskutiert. Ich habe erst kürzlich am Redesign mehrerer ursprünglich Frame-basierter Websites mitgearbeitet, die nun ohne Frames funktionieren. Das Problem mit Frames ist, dass sie bei bestimmten Aktionen manchmal für Verwirrung beim Anwender sorgen können. Angenommen, Sie rufen eine Site auf, die Frames verwendet. In einem der Frames finden Sie Inhalt, der Sie interessiert und den Sie daher Ihren Lesezeichen hinzufügen möchten. Je nach Browser wird nun entweder das ganze Frameset den Bookmarks hinzugefügt (worin nun nicht unbedingt die gewünschte Seite enthalten sein muss) oder nur die der ausgewählte Frame innerhalb des Framesets. Für Neulinge im Internet kann das manchmal ebenso verwirrend wie frustrierend sein. Ein anderes Problem ergibt sich bei dynamischen Anwendungen. Wenn zwischen Anwendungen, die Inhalt für die einzelnen Frames erzeugen, Variablen übergeben werden müssen, können diese einzelnen Anwendungen sozusagen »aus dem Takt geraten«. Anstatt nur eine Seite zu generieren, muss die Anwendung mehrere Seiten in mehreren Frames aktualisieren. Das führt dazu, dass bestimmte Funktionen einer Anwendung auf mehrere Unterprogramme verteilt werden müssen, von denen jedes nur für seinen Frame zuständig ist. Wie Sie sich auch entscheiden, bei jeder Entscheidung gibt es ein Für und Wider. Frames sind ein Gestaltungsmittel von HTML wie Ebenen oder Tabellen mit ihren spezifischen Vor- und Nachteilen. Wählen Sie einfach das, was für Ihre Zwecke am besten passt.

111

Die WYSIWYG-Layoutwerkzeuge von UltraDev

2.7

Formulare

Ein HTML-Element, mit dem wir uns heute noch gar nicht beschäftigt haben, sind Formulare. Formulare werden gebraucht, um Daten an den Server zur Bearbeitung zu übergeben. Das Hauptthema dieses Buches ist ja die Erstellung serverseitiger dynamischer Anwendungen mit UltraDev, darum werden uns dem Thema »Formulare« ausführlich in Tag 11, »Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren«, widmen, wenn wir Daten in Online-Datenbanken speichern.

2.8

Zielbrowser prüfen

Nicht jeder Entwickler hat sämtliche Browser auf seinem System installiert, um den Code seiner Seiten auf alle möglichen Fehler hin zu überprüfen. In diesem Fall können Sie sich mit der Funktion im Menü DATEI > ZIELBROWSER ÜBERPRÜFEN behelfen. Dieser Befehl öffnet ein Dialogfenster, in dem Sie konfigurieren, für welche Browser Sie Ihr Dokument überprüfen lassen wollen. Wählen Sie die entsprechenden Browser aus und klicken Sie auf die Schaltfläche ÜBERPRÜFEN. UltraDev ist nun ein paar Augenblicke mit der Analyse des Codes beschäftigt und gibt dann einen präzisen Bericht aus mit Angaben zu eventuellen Fehlern und Kompatibilitätsproblemen zwischen Browsern. Abb. 2.26 zeigt die Analyse einer Seite, die für 4.0-Browser optimiert wurde.

Abbildung 2.26: Die Analyse offenbart alle Schwachstellen einer Seite.

112

Berichte erstellen

Wenn Sie es darauf anlegen, können Sie über den Befehl im Menü DATEI > KONVERTIEREN > 3.0 BROWSER-KOMPATIBEL den Code Ihrer Seite so konvertieren lassen, dass er von älteren Browsern angezeigt werden kann. Das Programm tut zwar sein Bestes, um hierbei möglichst schonend vorzugehen, aber sehr wahrscheinlich ist das Ergebnis nicht in allen Punkten so, wie Sie sich das vorgestellt haben.

2.9

Berichte erstellen

Um sich einen schnellen statistischen Überblick über die gesamte Site oder ein einzelnes Dokument zu verschaffen, rufen Sie den Befehl im Menü SITE > BERICHTE auf. Wie in Abb. 2.27 zu sehen, können Sie sich zu mehreren Themen Informationen ausgeben lassen, die die Funktionalität und die Geschwindigkeit Ihrer Site wesentlich verbessern können: 쐽

Kombinierbare verschachtelte FONT-Tags

쐽

Fehlender ALT-Text bei Grafiken

쐽

Überflüssige verschachtelte Tags

쐽

Entfernbare leere Tags

쐽

Unbenannte Dokumente

Abbildung 2.27: Wählen Sie die gewünschten Berichte aus und das Dokument, das geprüft werden soll.

Sie können auch bearbeiterspezifische Berichte erstellen oder sich eventuell vorhandene Design Notes ausgeben lassen. Mehr über verteilte Entwicklungsumgebungen erfahren Sie in Tag 3, »Websites planen und verwalten«.

113

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Abbildung 2.28: Berichte helfen bei der Fehlersuche und der Optimierung einer Website.

Wenn Sie einen Bericht erstellen lassen, wählen Sie, in welchem Umfang Dokumente geprüft werden sollen (ganze Seite, einzelnes Dokument usw.), und markieren Sie die Kontrollfelder der gewünschten Berichte. Einige Berichte erlauben die Definition zusätzlicher Prüfkriterien, die Sie unter der Schaltfläche BERICHTSEINSTELLUNGEN finden. Um die Berichtsfunktion zu starten, klicken Sie auf die Schaltfläche AUSFÜHREN. Abb. 2.28 zeigt das Ergebnis eines solchen Kontrolldurchgangs.

2.10 Zusammenfassung Heute haben Sie die meisten Werkzeuge kennen gelernt, die Sie zur Erstellung umfangreicher Websites benötigen. Tabellen, Frames, Ebenen und der Eigenschafteninspektor sollten Ihnen jetzt keine Rätsel mehr aufgeben. Zwar brauchen wir diese Werkzeuge nicht unmittelbar zur Entwicklung dynamischer Websites, doch gehören sie zum Inventar von UltraDev, das die Erstellung und Pflege einer Website in all ihren Aspekten ermöglicht – angefangen bei der logischen Struktur bis zur grafischen Gestaltung.

2.11 Fragen und Antworten F

Wenn ich für meine Website Suchbegriffe definiere, bedeutet das, dass meine Site dann in den Suchmaschinen angezeigt wird? A

114

Suchbegriffe in den <META>-Tags werden nur verwendet, wenn Ihre Site indiziert wurde. Dazu müssen Sie sie erst bei den Suchmaschinen anmelden. Gehen Sie auf die Anmeldeseite und geben Sie die URL ein, damit Ihre Site katalogisiert werden kann.

Workshop

F

Ich verwende Tabellen, um Bilder auf meiner Seite zu platzieren, aber irgendwie funktioniert das nicht richtig. Zwischen den Bildteilen ist immer ein Zwischenraum. Woran liegt das? A

F

Ich habe eine Seite mit Ebenen gestaltet, aber in der Browservorschau bekomme ich nichts angezeigt. A

F

Vergewissern Sie sich, dass Sie keine Leerzeichen in die Zellen der Tabelle eingefügt haben und dass die Zellen insgesamt nicht breiter sind als die Tabelle selbst. Tabellen sind nicht unproblematisch. Schon kleine Fehleingaben können bewirken, dass die Tabelle auseinander getrieben wird oder andere Darstellungsfehler aufweist.

Der Einsatz von Ebenen ist nur in Verbindung mit Cascading Style Sheets und 4.0-Browsern oder höher möglich. Vielleicht brauchen Sie ein Upgrade.

Ich habe ein Frameset angelegt, doch ich möchte auch einen Link auf eine Seite ohne Frames anbieten. Wie geht das? A

Geben Sie als Ziel Ihres Links »_top« an. Die Seite wird dann an »über« dem Frameset im Hauptfenster des Browsers geladen.

2.12 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 können Sie sich die Tags im -Bereich anzeigen lassen und bearbeiten? 2. Wo können Sie definieren, in welcher Farbe Links dargestellt werden? 3. Wie kann ich Elemente mithilfe einer Tabelle so positionieren, dass sie nahtlos aneinander gefügt werden? 4. Ich habe eine Seite mit Ebenen erstellt, doch nun soll sie auch auf 3.0-Browsern korrekt dargestellt werden. Geht das überhaupt? 5. Ich möchte keine Ebenen verwenden. Kann ich auch mit Tabellen pixelgenau positionieren, ohne dass ich mühselig an den Zellenbreiten herumfummeln muss?

115

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Übungen 1. Positionieren Sie die Elemente Ihrer Seite mit Tabellen. Die Versuchung ist zwar groß, derartige Aufgaben mithilfe von Ebenen zu erledigen, doch es schadet nach wie vor nicht, wenn Sie wissen, wie man mit Tabellen arbeitet. 2. Erstellen Sie mehrere Rollover-Bilder und eine Navigationsleiste. Wenn Sie noch keine Erfahrung mit der Erstellung der nötigen Buttons für den aktiven und passiven Zustand haben, ist die Aufgabe schwerer, als es im ersten Moment scheint. 3. Üben Sie sich in der Verwendung von Framesets. Wenn Sie schon statische Websites ohne Frames erstellt haben, strukturieren Sie sie mit Framesets um. Wenn Sie planen, in der Zukunft Frame-basierte Websites zu erstellen, sollten Sie sich mit den FrameWerkzeugen von UltraDev gut vertraut machen.

116

Websites planen und verwalten

3

Websites planen und verwalten

Zwar haben wir in Tag 2, »Die WYSIWYG-Layoutwerkzeuge von UltraDev«, die zur Umsetzung einer Website nötigen Werkzeuge schon kennen gelernt, doch benötigen wir noch etwas Hintergrundwissen, bevor wir eine Website mit allem, was dazugehört, entwickeln können. Die Gestaltung von Websites besteht nicht nur in der Erzeugung des nötigen HTML-Codes und der Grafiken. Sie müssen vor allem planen, wie Sie dem Anwender Ihre Informationen präsentieren, wie Sie ihn durch Ihre Seiten führen und wie er damit interagieren kann. Die Themen des heutigen Tages: 쐽

Vorbereitende Schritte bei der Realisierung einer Website

쐽

Die Werkzeuge von UltraDev zur Optimierung und Vereinfachung des Gestaltungsprozesses

쐽

Bestehende Websites innerhalb der gewohnten Oberfläche bearbeiten

쐽

Websites online betreuen und Arbeiten in verteilten Entwicklungsumgebungen

3.1

Planung der Site

Die Site-Planung ist die wichtigste Phase bei der Erstellung einer Website. Bei der Entwicklung müssen Sie besonders darauf achten, den Anwender navigationstechnisch in keine Sackgasse zu führen. Wird eine Website von einem Team realisiert, muss verstärkt darauf geachtet werden, ein einheitliches Layout- und Navigationsschema einzuhalten. Ich bin mir ziemlich sicher, dass jeder von Ihnen schon einmal die Erfahrung gemacht hat, sich auf einer Website nicht mehr zurecht zu finden. Plötzlich steht das Menü an einer anderen Stelle, Links sind mal sichtbar und dann wieder nicht, das Design wechselt von Unterseite zu Unterseite. Wie in der gestrigen Lektion erwähnt, ist ein Nachteil von Frames der, dass der Überblick schnell verloren gehen kann, wenn mehrere Dateien zugleich in mehrfach geteilten Framesets dargestellt werden. Zudem trifft man immer wieder auf die Unsitte, dass manche Websites stillschweigend Inhalte anderer Sites in eigene Frames laden. Neben dem fragwürdigen Umgang mit fremdem geistigen Eigentum sind solche Sites höchst chaotisch, denn es unmöglich nachzuvollziehen, wo die gezeigten Information herkommen oder angezeigt werden. Diese und ähnliche Fehler lassen sich durch sorgfältige Planung vermeiden. Verwenden Sie vor der Umsetzung einer Website genügend Zeit auf die Planung, Sie sparen sich damit so manchen Arbeitstag, den Sie die Überarbeitung der Site gekostet hätte.

Sitemaps Was versteht man eigentlich unter einer Sitemap? Nun, sie ist der Bauplan Ihrer Website. Sie ist ein Hilfsmittel, mit dem Sie visualisieren, wie der Anwender innerhalb der einzel-

118

Planung der Site

nen Seiten navigieren kann. Wenn Sie die Sitemap Ihrer neuen Website aufzeichnen und dann feststellen, dass man zur Hauptinformation nur über einen einzigen Link von der Seite »Meine Kinderfotos« kommt, sollten Sie Ihre Strategie noch einmal überdenken. Nehmen wir als Beispiel die Sitemap eines kleinen Computerladens. In Abb. 3.1 sehen Sie eine mögliche Sitemap, die wir zur Erstellung unserer Website verwenden können. In dieser Sitemap werden die einzelnen Seiten in Kategorien eingeteilt, die Verlinkung zwischen den einzelnen Kategorien wird durch Linien symbolisiert. Wenn Sie den Aufbau einer Site visualisieren, bevor Sie sie umsetzen, können Sie feststellen, welche die geeignete Navigationsstruktur ist. So vermeiden Sie auch das Problem der verwaisten Seiten, die nicht mit den übrigen Seiten innerhalb der Website verlinkt sind. Verwaiste Seiten entstehen meistens dann, wenn mehrere Entwickler an einer Site arbeiten. Jemand erstellt eine Seite, aber sie wird nie mit den übrigen Dokumenten verlinkt. Ich habe das selbst mehrfach erlebt, wenn Sites ohne entsprechende Sitemap realisiert wurden. Ich habe vor nicht allzu langer Zeit eine Website nach Kundenvorgaben umgesetzt, um schließlich festzustellen, dass man den Bereich »Über unsere Firma« von keiner der übrigen Seiten erreichen konnte. Hätten wir uns die Zeit genommen, vorher eine Sitemap zu erstellen, wäre dieses Problem gar nicht aufgetreten. Startseite

Firmeninfo

Mitarbeiter

Jobbörse

Hilfe

Shopping System

Firmennachrichten

Produktkatalog

Ausloggen

Abbildung 3.1: Eine Sitemap erleichtert die Erstellung der Navigationsstruktur und die anschließende Umsetzung der Website.

119

Websites planen und verwalten

Aufbau einer Verzeichnisstruktur Sitemaps erweisen sich auch als sehr nützlich, wenn es darum geht, die Verzeichnisstruktur einer neuen Website zu definieren. Immer wieder erlebt man, dass man die Betreuung einer Website übernimmt und feststellt, dass sämtliche Seite in einem einzigen Ordner liegen, egal welcher Kategorie oder welchem Menüpunkt sie angehören. Beim Anlegen einer Sitemap muss man sich notgedrungen auch Gedanken darüber machen, in welcher Beziehung die einzelnen Seiten bzw. Dokumente zueinander stehen. Wenn man dann später die eigentliche Site erstellt, bietet es sich geradezu an, zusammengehörige Dokumente in einem eigenen Ordner zu speichern und diesen sinnvoll zu benennen. Das Wiederfinden von Seiten zur späteren Bearbeitung wird hierdurch ungemein erleichtert. Normalerweise legt man für jeden Menüpunkt einer Website einen eigenen Ordner an und innerhalb dieser Ordner jeweils einen Unterordner für das auf diesen Seiten verwendete Grafikmaterial. Natürlich gibt es Fälle, für die sich andere Verzeichnisstrukturen besser eignen. In manchen Fällen enthält das einzelne Dokument so viele Abbildungen, dass es sinnvoller ist, für diese Datei einen eigenen Bildordner anzulegen. Bei der Definition einer Verzeichnungsstruktur sollte man immer im Hinterkopf behalten, dass die Website, die man erstellt, irgendwann von jemand anderem gewartet wird. Wenn Sie eine saubere, logisch gut nachvollziehbare Verzeichnisstruktur aufbauen, können Sie Ihrem Nachfolger das Leben um einiges leichter machen.

Dateinamenskonventionen Wenn Sitemap und Verzeichnisstruktur Ihrer Website stehen, ist der nächste wichtige Schritt, ein verbindliches Namensschema für die Benennung von Dateien festzulegen. Je nach Umfang der Website arbeiten meist mehrere Entwickler – HTML-Autoren, Grafiker, Systemadministrator – am Projekt mit, deren einzelne Beiträge zusammengeführt werden müssen. Jeder der am Projekt Beteiligten sollte auch ein Mitspracherecht bei der Festlegung der Dateinamenskonventionen haben.

Programmierer und Grafiker Für eine reibungslose Umsetzung des grafischen Entwurfs in das fertige Endprodukt muss der Programmierer wissen, wo der Grafiker welche Abbildungen in welcher Form verwenden will. Ein Beispiel: Größere Grafiken werden oft in kleinere Teile zerschnitten und dann in einer Tabelle wieder zusammengesetzt. Erhält der Programmierer diese Bilddateien nun vom Grafiker mit der Bezeichnung bild1.jpg, bild2.jpg usw., muss der Programmierer jede einzelne Datei öffnen und versuchen, das Puzzle richtig zusammenzusetzen (oder den Grafiker stundenlang am Telefon interviewen). Man wird also viel Zeit, Geld und Ner-

120

Planung der Site

ven sparen, wenn man ein System zur Benennung von Grafikdateien festlegt, aus dem die Position der einzelnen Bildteile in Tabellenzeile und -spalte klar hervorgeht. Heißt eine Datei dann z.B. blume01_z1s1.jpg, dann weiß der Programmierer sofort, dass dieses Bild in Zeile 1 Spalte 1 der Tabelle auf dieser bestimmten Seite gehört. Das ist natürlich nur ein Beispiel und Sie finden vielleicht auch ein System, das für Ihr Projekt besser passt. Ich möchte Ihnen nur empfehlen, ein entsprechendes Benennungssystem zu definieren und sich auch strikt daran zu halten, selbst dann, wenn außer Ihnen niemand an dem Projekt arbeitet. Spätestens, wenn Sie die Wartung einer Website übernehmen, bei der Sie auf solche Dateinamen wie 13123a.jpg stoßen, werden Sie feststellen, wie wichtig sinnvolle Dateinamen sind.

Programmierer und Systemadministrator Wenn Sie beide Ämter in Personalunion vereinen, ist das Glück Ihnen hold. Wenn nicht, sollten Sie einige Vorsichtsmaßnahmen treffen, bevor Sie sich an die Erstellung von Seiten machen. Auf welche Dateinamenskonventionen Sie sich auch geeinigt haben, die nach diesem Schema erstellten Dateinamen müssen für den Webserver, auf dem Ihre Website liegt, verständlich sein. Wenn Sie einen Macintosh-Webserver betreiben, auf dem irgendwas unter Mac OS X läuft, werden Sie mit Dateinamen, die länger als 32 Zeichen sind, Schwierigkeiten bekommen. UNIX-Systeme unterscheiden zwischen Groß- und Kleinschreibung, das ist besonders bei Links wichtig. Für einen Windows-Server ist die Datei HELLO.HTM identisch mit hello.htm. Unter Windows ist es also egal, wie Sie den Link schreiben, für UNIXSysteme müssen Sie hier jedoch klar unterscheiden. Die kleinen Eigenheiten der verwendeten Plattform sollten also bekannt und dokumentiert sein, bevor Sie sich daran machen, Dateinamen zu vergeben. Wenn Sie bei der Benennung von Dateien die folgenden Grundregeln einhalten, sind Sie schon weitgehend auf der sicheren Seite: 쐽

Keine Satzzeichen, keine Sonderzeichen – Entfernen Sie sämtliche Satz- und Sonderzeichen aus Dateinamen (ä, ö, ü, ß, &, Komma, usw.).

쐽

Keine Leerzeichen – Sie könnten theoretisch zwar Leerzeichen in Dateinamen verwenden, doch haben sie praktisch verschiedene Nachteile. Leerzeichen müssen im HTML-Code nämlich in die Zeichenfolge %20 aufgelöst werden, was beim Verlinken auf Dateinamen, die Leerzeichen verwenden, problematisch werden kann. Markieren Sie Wortgrenzen innerhalb von Dateinamen besser mit einem Unterstrich: erste_ seite.htm.

쐽

Einheitliche Schreibung – Wechseln Sie nicht bei der Schreibung von Dateinamen nicht zwischen Groß- und Kleinbuchstaben. Entscheiden Sie sich für eine Schreibung und behalten Sie sie bei.

121

Websites planen und verwalten

쐽

Kurz und einfach – Verwenden Sie einfache, möglichst kurze Dateinamen. Dadurch wird die eventuelle Portierung der Website auf andere Systeme erleichtert und der HTML-Code ist besser zu lesen und zu warten.

Die Einhaltung obiger Regeln ist zwar noch keine Garantie, dass Ihre Seiten auf anderen Plattformen problemlos laufen, aber die Wahrscheinlichkeit ist ziemlich groß. Fragen Sie Ihren zuständigen Systemadministrator, ob noch weitere, plattformspezifische Vorgaben bestehen, die Sie einhalten müssen.

3.2

Die Sitemap-Werkzeuge von UltraDev

Mit den eingebauten Sitemap-Werkzeuge von UltraDev wird die Anlage und Wartung von Websites fast zum Kinderspiel. Zwar entheben Sie diese Funktionen nicht der Notwendigkeit, die Grundstruktur Ihrer Website zunächst von Hand zu entwerfen und zu zeichnen, doch erleichtern sie den Weg vom Entwurf zur tatsächlichen Umsetzung erheblich. Nur durch das Öffnen eines Dokuments bzw. das Setzen eines Links erzeugen Sie die komplette Struktur Ihrer Website. (Bei der Erstellung der Inhalte müssen Sie beim gegenwärtigen Stand der Technik freilich noch selber tätig werden.) Sie haben die Site-Werkzeuge in ihrer einfachsten Form bereits kennen gelernt, als wir die Liste der Dateien im lokalen Ordner der Site-Ansicht durchforscht haben. In einem anderen Ansichtsmodus werden die Dateien einer Site in Form eines Struktogramms dargestellt, das die Verbindungen der Dokumente untereinander visualisiert. In dieser Darstellung können Sie z.B. Links zwischen Dokumenten setzen oder wieder löschen. Diese Struktogramm-Ansicht, also die eigentliche Sitemap, können Sie in zweierlei Weise nutzen: entweder, um die Struktur einer bereits erstellten Website darstellen zu lassen oder um eine neue Website zu erstellen. Zuerst werden wir die Sitemap-Funktion an einer bestehenden Website testen, dann erstellen wir mit ihrer Hilfe eine neue Site.

Sitemaps von fertigen Websites anzeigen Wenn Sie schon eine Site definiert und ein paar Seiten erstellt haben, dann öffnen Sie sie bitte über das Menü SITE > SITE ÖFFNEN. Haben Sie noch keine Sites definiert, dann öffnen Sie eine der Tutorial-Sites, die UltraDev bei der Installation automatisch anlegt, um die Funktion der Sitemap-Werkzeuge nachvollziehen zu können. Sobald Sie eine Site geöffnet haben, können Sie in die Sitemap-Darstellung umschalten. Hierzu klicken Sie auf die dritte Schaltfläche von links in der Menüleiste der Site-Ansicht. Über das Menü FENSTER > SITEMAP können Sie diese Ansicht ebenfalls aufrufen. Die Anzeige auf Ihrem Monitor sollte dann in etwa so aussehen wie in Abb. 3.2 gezeigt. Tolle

122

Die Sitemap-Werkzeuge von UltraDev

Sache, nicht wahr? Und das Ganze ist nicht nur nett anzusehen, sondern darüber hinaus noch höchst nützlich. Lassen Sie uns das Site-Fenster und die Funktionen, die man in dieser Ansicht ausführen kann, nun etwas näher untersuchen.

Abbildung 3.2: Die Sitemap ist eine grafische Darstellung der Struktur einer Website.

Die von UltraDev dargestellte Sitemap hat große Ähnlichkeit mit einem handgezeichneten Struktogramm, bietet aber den großen Vorteil, dass sie den direkten Zugriff auf den HTML-Code erlaubt.

Seitensymbole Jedes Symbol in der Sitemap steht für eine verlinkte Seite, wobei für lokale und entfernte Dokumente unterschiedliche Icons verwendet werden. Lokale Dokumente werden mit dem standardmäßigen Dokumentsymbol von UltraDev angezeigt, Links zu externen Seiten werden durch ein Symbol dargestellt, das aussieht wie ein beschriebenes Blatt Papier mit einem kleinen Globus rechts daneben. Diese beiden Symbole sind die primären Platzhalter für Dokumente innerhalb einer Website. Um zusätzliche Informationen zu den Dokumenten anzuzeigen, können Sie sich im Site-Fenster über das Menü ANSICHT > ABHÄNGIGE DATEIEN ANZEIGEN sämtliche Dateien einblenden lassen, die mit den einzelnen Dokumenten verlinkt sind (Grafiken, Stylesheets usw.). Da bei dieser Art der Darstellung der Überblick schnell verloren geht, sollten Sie sie nur im Bedarfsfall einblenden. Standardmäßig wird in der Sitemap der Dateiname eingeblendet, unter dem ein HTMLDokumente gespeichert ist. Sie können sich aber anstelle der Dateinamen den aus dem <TITLE>-Tag abgeleiteten Seitentitel anzeigen lassen, wenn Sie das praktischer finden. Wählen Sie hierzu im Site-Fenster den entsprechenden Befehl im Menü ANSICHT > SEITENTITEL ANZEIGEN. Diese Option können Sie auch im Dialogfenster SITE-DEFINITION unter der Kategorie SITEMAP-LAYOUT wählen.

123

Websites planen und verwalten

Aussagekräftige Seitentitel spielen auch eine wichtige Rolle bei der Benutzerführung, da sie in der Titelleiste des Browsers angezeigt werden. Seiten ohne Seitentitel sind auch nicht sinnvoll unter den Lesezeichen abzulegen, da keine Informationen zur Seite gespeichert werden. Seitentitel helfen dem Anwender somit, gespeicherte Informationen schnell wiederzufinden und erleichtern ihm die Navigation. Über die Option SEITENTITEL ANZEIGEN finden Sie mühelos sämtliche Dateien, denen Sie noch keinen Seitentitel zugewiesen haben. Diese Dateien sind mit »Untitled Document« gekennzeichnet. Wenn Sie möchten, dass ein bestimmtes Dokument in der Sitemap nicht angezeigt wird, können Sie es über das Menü ANSICHT > HYPERLINK EINBLENDEN/AUSBLENDEN verbergen. Wenn Sie allerdings einen Hyperlink ausblenden, wird es schwierig, ihn über HYPERLINK EINBLENDEN wieder anzuzeigen. Zum Glück können Sie über Menü ANSICHT > ALS VERBORGEN MARKIERTE DATEIEN ANZEIGEN ausgeblendete Dateien wieder einblenden. Hier handelt es sich wieder um eine der merkwürdigen Funktionen von UltraDev, die nicht unbedingt auf Anhieb verständlich sind. Lassen Sie verborgene Hyperlinks wieder einblenden, so werden sie in Kursivschrift markiert. Abschließend sei noch auf ein weiteres nützliches Feature der Sitemap hingewiesen, nämlich auf die Farbe, mit der die Symbole beschriftet werden. Unterbrochene Links werden in Rot dargestellt, somit brauchen Sie die Sitemap nur nach rot markierten Symbolen zu durchsuchen, um eventuelle Probleme zu finden.

Links Wie Sie bereits gesehen haben, werden Links zwischen Dokumenten als Pfeillinien zwischen den Dokumenten dargestellt. Manchmal geht die Sitemap-Funktion nicht so sparsam mit dem gebotenen Platz um, wie man das gerne möchte. In diesem Fall können Sie den Cursor auf die vertikalen Pfeillinien setzen und die Symbole mit gedrückter Maustaste verschieben, um mehr Platz zu gewinnen. Neben dem Symbol für lokal gespeicherte Dokumente gibt es ein kleines Fadenkreuz, wie Sie es schon im Eigenschafteninspektor neben dem Eingabefeld HYPERLINK kennen gelernt haben. Sie können Links erstellen, indem Sie dieses Fadenkreuz auf die Datei ziehen, auf die Sie einen Link setzen möchten. Damit fügen Sie im Fußbereich des Dokuments einen Textlink zur Zielseite ein. Es wäre natürlich nur allzu schön, wenn der Link gleich an der richtigen Stelle in unserem tollen grafischen Menü sitzen würde, aber so weit ist die Technik noch nicht. Sie müssen also die Seite öffnen und den Link von Hand an die richtige Stelle kopieren. Über den Befehl Menü MODIFIZIEREN > LINK ERSTELLEN können Sie ebenfalls einen Link setzen. Wenn Sie sich die Struktur Ihrer Website aus mehreren, hierarchisch angeordneten Ebenen zusammensetzt, werden Sie wahrscheinlich schon bemerkt haben, dass UltraDev nur

124

Die Sitemap-Werkzeuge von UltraDev

die oberste Ebene in der Hierarchie anzeigt. Die darunter liegenden Ebenen können Sie sehen, wenn Sie auf das Plussymbol (+) links neben dem Seitensymbol klicken, worauf der Ast des Strukturbaumes aufgeklappt wird, der die von diesem Dokument abhängigen Seiten enthält. Durch Klick auf das Minussymbol (-) können Sie den Ast wieder zusammenfalten. Sie können also die Anzeige übersichtlich halten und immer nur den Ast aufklappen, den Sie bearbeiten möchten. Wenn Sie sehr tief in der Struktur hinuntersteigen, kann es trotzdem irgendwann unübersichtlich werden. Dann empfiehlt es sich, die Datei zu markieren und im Site-Fenster über den Befehl im Menü ANSICHT > ALS STAMMORDNER ANZEIGEN als Verzeichniswurzel zu definieren. Die Datei wird dann in der obersten Ebene der Sitemap angezeigt. Am oberen Rand des Sitemap-Fensters wird dann ein Pfad angezeigt, aus dem Sie ersehen können, an welcher Stelle der Site-Hierarchie Sie sich befinden (siehe Abb. 3.3). Wenn Sie die entsprechenden Knotenpunkte, die über der Sitemap angezeigt werden, anklicken, können Sie im Verzeichnisbaum wieder nach oben hüpfen.

Abbildung 3.3: Verwenden Sie die Knotenpunkte über dem Sitemap-Fenster, um durch die Verzeichnisstruktur der Site zu navigieren.

Wenn Sie ein neue Homepage definieren möchten, markieren Sie die betreffende Datei im lokalen Ordner und wählen Sie im Site-Fenster den entsprechenden Befehl im Menü SITE > ALS HOMEPAGE EINRICHTEN. Über Menü SITE > NEUE HOMEPAGE können Sie ein neues HTML-Dokument einrichten, das die Stammseite Ihrer Website wird. Bis jetzt habe ich allerdings noch keine rechte Verwendung für diese Funktionen gefunden. Nützlicher sind da schon die Befehle SITE > HYPERLINK ÄNDERN bzw. HYPERLINK ENTWenn Sie ein Seitensymbol auswählen und den Befehl SITE > HYPERLINK ÄNDERN aufrufen, öffnet UltraDev das bekannte Dialogfenster HTML-DATEI AUSWÄHLEN. Wenn Sie einen Link ändern, wird UltraDev alle Links entsprechend anpassen, sodass sie auf die neue Datei verweisen. Umgekehrt löscht der Befehl SITE > HYPERLINK ENTFERNEN alle Links innerhalb der Site, die ursprünglich auf diese Datei verwiesen haben. Das hört sich anfangs vielleicht etwas verwirrend an, denn Sie ändern nicht das markierte Dokument, sondern die Links in den Dateien, die auf dieses Dokument zeigen. FERNEN.

125

Websites planen und verwalten

Ausgewählte Dateien Innerhalb der Sitemap können Sie mit der Maus ein Auswahlrechteck aufziehen und mehrere Dateien auf einmal selektieren. In der Statuszeile wird eine Gesamtinformation zu den ausgewählten Dateien angezeigt. Wenn Sie in der Sitemap Dateien auswählen, werden die zugehörigen Einträge in der Dateienliste des lokalen Orders ebenfalls markiert.

Weitere Sitemap-Optionen Sie können die Darstellung der Sitemap über verschiedene Optionen verändern. Rufen Sie hierzu in der Site-Ansicht den Befehl im Menü ANSICHT > LAYOUT auf. Es öffnet sich das Dialogfenster SITE-DEFINITION, die Kategorie SITEMAP-LAYOUT wird automatisch aktiviert. Auch hier ist die Oberfläche von UltraDev nicht ganz logisch. Außer ANZAHL DER SPALTEN und SPALTENBREITE können Sie hier keine Einstellungen vornehmen, die nicht bereits woanders angeboten wurden. ANZAHL DER SPALTEN besagt, wie viele Seitensymbole in der Sitemap nebeneinander in einer Reihe platziert werden, SPALTENBREITE definiert eine Standardbreite für ein Seitensymbol und seine Beschriftung (in Pixel).

Mit der Sitemap neue Websites anlegen Wenn wir eine fertige Website haben, können wir die Sitemap-Funktionen von UltraDev sofort einsetzen, um sie zu verwalten. Doch was bringt die Sitemap, wenn wir unsere Website erst anlegen müssen? Angenommen, Sie haben den Strukturplan Ihrer Website bereits per Hand skizziert, dann können Sie eine »Skelettversion« dieser Site erstellen, ohne dass Sie sofort Inhalte oder die nötigen Navigationselemente einbauen müssen.

Eine neue Site definieren Wenn Sie mit den Sitemap-Funktionen eine Site anlegen wollen, wählen Sie im SiteFenster den Befehl im Menü SITE > NEUE SITE. Erzeugen Sie einen neuen Stammordner, der die Dateien der Site lokal speichert. Nehmen Sie sämtliche Einstellungen so vor, als würden Sie der Site gleich Dateien hinzufügen. Definieren Sie eine Homepage und lassen Sie sie vom Programm gleich erstellen. Schalten Sie nun die Sitemap-Ansicht ein. Sie sollte eine einzige Datei oben im Fenster anzeigen.

Inhaltsseiten erstellen Für eine Website brauchen wir natürlich mehr als bloß die Homepage. Die übrigen Seiten und die erforderlichen Links zwischen den Seiten lassen sich in einem Arbeitsgang leicht erstellen. Nehmen wir an, dass wir von der Homepage auf drei weitere Seiten verlinken:

126

Die Sitemap-Werkzeuge von UltraDev

content.html, links.html und about.html. Markieren Sie das Seitensymbol der Homepage in der Sitemap und rufen Sie den Befehl im Menü SITE > VERKNÜPFEN MIT NEUER DATEI auf (auch über das Kontextmenü zugänglich). Es öffnet sich das in Abb. 3.4 Dialogfenster VERKNÜPFEN MIT NEUER DATEI. In dieses Fenster geben Sie Titel und Dateinamen Ihres neuen Dokuments ein.

Abbildung 3.4: Einfaches Erzeugen neuer Dateien in der Site-Ansicht.

Wenn Sie die neuen Dateien angelegt haben, werden die zugehörigen Symbole in der Sitemap sowie die Links angezeigt. Auf diese Weise können Sie alle Seiten Ihrer Website erzeugen.

Links definieren Zwar wurden die neu erzeugten Seiten mit der markierten Seite verlinkt, zwischen den neuen Seiten selbst jedoch bestehen noch keine Verknüpfungen. Wenn Sie sich noch erinnern können, was über die Erstellung von Links innerhalb bestehender Websites geschrieben wurde, wissen Sie, was zu tun ist. Wenn nicht, dann sei es hiermit wiederholt: Markieren Sie das entsprechende Seitensymbol und ziehen Sie das Fadenkreuz, das neben dem Symbol angezeigt wird, auf die Datei, auf die Sie den Link setzen wollen. Innerhalb kürzester Zeit können Sie so das Grundgerüst einer Website definieren sowie die Links zwischen den Seiten. So können Sie im Schnellverfahren einen Prototyp Ihrer Website anlegen, um die Navigation Ihrer künftigen Website zu testen und so ein Gefühl für ihre Funktionalität zu bekommen. Und wenn Sie dann so allmählich das Material von Ihren Kunden bekommen, können Sie die Seiten sogar mit Inhalt füllen.

Dateien organisieren Nun könnten Sie natürlich einwenden, dass alle Dateien, die wir auf diesem Weg erzeugt haben, im selben Verzeichnis liegen, und mich fragen, wie das zu meinen früheren Aussagen bezüglich einer klaren Dateistruktur passt. UltraDev besitzt die erfreuliche Eigenschaft, Links zu aktualisieren, wenn Dateien verschoben werden. Nachdem Sie also alle Seiten erzeugt und miteinander verlinkt haben, können Sie die nötigen Ordner anlegen und die Dateien dorthin verschieben. Die Links funktionieren weiterhin.

127

Websites planen und verwalten

Um neue Ordner zu erzeugen, klicken Sie mit der rechten Maustaste in das Fenster LOKALER ORDNER. Aus dem Kontextmenü wählen Sie den Befehl NEUER ORDNER. Wenn Sie alle Ordner definiert haben, verschieben Sie die Dateien in die richtigen Ordner. UltraDev wird alle Links aktualisieren.

Sitemap speichern Wen die Site fertig ist und Sie mit der Sitemap zufrieden, können Sie dieselbe über den Befehl im Menü DATEI > SITEMAP SPEICHERN als Grafik speichern. Das ist sehr nützlich, wenn Sie die Sitemap online stellen möchten. Sie können auf dieser Grafik dann Imagemaps definieren, um auf die verschiedenen Seiten zu verlinken. So wird die Sitemap zur Navigationshilfe für die Besucher Ihrer Site.

3.3

Websites in UltraDev importieren

Als Benutzer von UltraDev fallen Sie zwangsläufig in eine der folgenden Kategorien: Entweder erstellen Sie mit dem Programm neue Websites, oder Sie verwenden es, um bereits existierende Websites zu bearbeiten. Sie haben mittlerweile das nötige Wissen, um eine neue Website anzulegen. Doch was, wenn eine Website irgendwo draußen auf einem Server liegt und gepflegt und aktualisiert werden muss?

Wie Sie an die Daten kommen Je nach Serverplattform haben Sie mehrere Zugriffsmöglichkeiten auf die benötigten Daten. Am einfachsten ist es, wenn die Daten auf einem Netzlaufwerk liegen, zu dem Sie direkten Zugang haben, und Sie die Daten direkt auf dem Server bearbeiten können. Meine Kopie von UltraDev greift auf das Netzlaufwerk eines Linuxservers zu, sodass HTML-Dateien unmittelbar bearbeitet und aktualisiert werden. Linux- und NT-basierte Server haben im Normalfall keine Probleme im Zusammenspiel mit Mac- oder WindowsClients, was sie zu nahezu idealen Serverplattformen macht. Wenn Sie keinen Netzwerkzugang zum Server haben, können Sie über FTP auf die Daten der Website zugreifen. Wenn Sie mit FTP arbeiten, müssen Sie immer eine lokale Kopie der Website auf dem Rechner anlegen, auf dem Sie die Website bearbeiten. Sie nehmen Aktualisierungen an den lokalen Dateien vor und laden die geänderten Dateien dann auf den Server.

128

Websites in UltraDev importieren

Sie können auf jeden Fall eine lokale Kopie der Website anlegen und die Änderungen auf den Server übertragen, ob der Zugriff nun per Netzwerk oder FTP erfolgt. Wenn Sie Änderungen direkt auf dem Server durchführen können, wozu sollten Sie dann eine lokale Kopier der Website anlegen? Dateien lokal zu bearbeiten empfiehlt sich vor allem dann, wenn Sie nicht ständig mit dem Netzwerk verbunden sind oder Ihr Zugang sehr langsam ist. Darüber hinaus können Sie mit einer lokalen Kopie Änderungen an der Website ausführlich testen, bevor Sie sie online stellen. Wenn eine Seite noch im Bearbeitungsstadium ist und versehentlich publiziert wurde, dann können Sie nur beten, dass Sie keine Kommentare eingefügt haben, die nicht für die Augen der Öffentlichkeit bestimmt sind. Ich möchte Ihnen raten, grundsätzlich mit einer lokalen Kopie zu arbeiten und die Seiten erst dann zu veröffentlichen, wenn alle Änderungen abgeschlossen sind und die Site ausführlich getestet wurde.

Webserver-Verbindung einrichten Bevor Sie eine Verbindung zum Webserver einrichten, müssen Sie sich entscheiden, ob Sie eine lokale Kopie der Site anlegen wollen oder direkt auf dem Server arbeiten. Wenn Sie einen FTP-Zugang einrichten, müssen Sie ohnehin eine lokale Kopie anlegen. Wenn Sie noch keine lokale Kopie der Dateien angelegt haben, dann ist jetzt der Augenblick dafür gekommen.

Direkter Zugriff auf den Webserver Wenn Sie direkt auf den Produktionsserver zugreifen, müssen Sie die Adresse der Site so angeben, als würde sie lokal auf Ihrem Rechner liegen. Die anderen Verbindungen greifen auf eine lokale Kopie der Dateien zu. Wenn Sie diese kleine Hürde genommen haben, sollten Sie eigentlich loslegen können. Die ganze Prozedur dürfte eigentlich keine Schwierigkeit darstellen, Ähnliches haben Sie die ganze Zeit gemacht. Wenn Sie direkt auf dem Server arbeiten, sollten Sie den Server-Zugriff im Dialogfenster SITE-DEFINITION auf »Keine« stellen, obwohl man zunächst vermuten würde, dass »Lokal/Netzwerk« die richtige Einstellung ist. In letzterem Falle geht UltraDev dann allerdings davon aus, dass auf dem lokalen Rechner ein Webserver installiert ist, was aber nicht immer zutreffend sein dürfte.

Lokale/Netzwerk-Verbindung einrichten Die zweite Art des Serverzugriffs wird im Dialogfenster SITE-DEFINITION als »Lokal/Netzwerk« aufgeführt. Sie funktioniert ähnlich wie der zuvor besprochene direkte Zugriff auf

129

Websites planen und verwalten

den Webserver und setzt voraus, dass Sie auf das Verzeichnis Ihres Webservers wie auf ein Netzlaufwerk zugreifen können. Der Unterschied besteht darin, dass Sie auch eine lokale Kopie der Site angelegt haben, an der Sie Änderungen durchführen, um sie anschließend auf den Webserver zu publizieren. Bei der Auswahl dieses Verbindungstyps verändert sich die Eingabemaske im Dialogfenster SITE-DEFINITION wie in Abb. 3.5 gezeigt. Sie müssen einen entfernten Ordner angeben, in dem die Online-Version Ihrer Website liegt. Dieser Ordner darf nicht mit dem lokalen Site-Ordner identisch sein.

Abbildung 3.5: Auf Sites, die lokal gehostet werden oder auf einem Netzlaufwerk liegen, kann entweder direkt zugegriffen werden oder über die Option Lokal/Netzwerk, bei der eine lokale Arbeitskopie der Site angelegt wird.

WebDAV WebDAV ist erst mit der 4.0-Version von UltraDev verfügbar. WebDAV (Web Distributed Authoring and Versioning) ist ein neues Web-basiertes Datenverwaltungsprotokoll, das zunehmend als offener Standard akzeptiert wird. Windows unterstützt WebDAV bei seiner Webordner-Implementierung, und auch unter Mac OS X steht WebDAV systemweit zur Verfügung. Falls Ihr Netzwerk an einen WebDAV-Server angebunden ist, fragen Sie Ihren Systemadministrator nach den Zugangsdaten. Um eine WebDAV-Verbindung einzurichten, wählen Sie die entsprechende Zugangsart aus und klicken dann auf die Schaltfläche EINSTELLUNGEN. Sie werden nach den üblichen Daten gefragt: URL, Benutzername, Kennwort sowie E-Mail-Adresse. Das Kennwort können Sie speichern, sofern Sie das möchten.

130

Websites in UltraDev importieren

SourceSafe Database Auch dieses Feature steht erst mit UltraDev 4.0 zur Verfügung. SourceSafe Database arbeitet mit der Visual Sourcesafe-Technologie von Microsoft, die eine Datenzugriffskontrolle ermöglicht. Da es sich um eine proprietäre Technologie handelt, steht sie natürlich nicht auf allen Plattformen zur Verfügung. Haben Sie Zugriff auf ein SourceSafe-System, klicken Sie auf den Button EINSTELLUNGEN, um den Zugang einzurichten. Geben Sie den Pfad an sowie den Namen des Projekts, Benutzernamen und Kennwort. Aktivieren Sie das Kontrollkästchen SPEICHERN, wenn Sie das Kennwort nicht jedes Mal neu eingeben wollen. Welche Zugangsart Sie letztlich auch wählen, UltraDev erleichtert die Konfiguration mit diesem Dialogfenster erheblich.

FTP-Zugang Die letzte Option für den Zugriff auf den Webserver ist die Übertragung der Daten per FTPProtokoll – wenn sonst nichts geht, FTP geht immer. Wenn Sie nur per Einwahlverbindung auf den Server zugreifen können oder erhöhte Sicherheitsvorschriften gelten, bleibt Ihnen vermutlich sowieso nichts anderes übrig, als eine FTP-Verbindung einzurichten. Eingerichtet wird der FTP-Zugang über die entsprechende Option im Dropdown-Menü SERVER-ZUGRIFF. Um per FTP auf die entfernte Site zugreifen zu können, müssen Sie mehrere Einstellungen treffen, wie in Abb. 3.6 gezeigt. In diesem Beispiel ist die Hostadresse des FTP-Servers 192.168.0.1 und der Name des Verzeichnisses, in das die Dateien geladen werden, public.html. Sie müssen natürlich die Zugangsdaten eintragen, die Sie von Ihrem Provider bekommen.

Abbildung 3.6: Den FTP-Zugang konfigurieren im Dialogfenster SiteDefinition

131

Websites planen und verwalten

Über folgende Eingabefelder konfigurieren Sie den Zugang zum Webserver: 쐽

FTP-HOST – Hier tragen Sie den Host-Namen oder die IP-Adresse Ihres Webservers ein.

쐽

HOST-ORDNER – Hier tragen Sie den Pfad zum Stammverzeichnis Ihrer Website ein.

쐽

ANMELDUNG – Hier geben Sie Ihren Benutzernamen ein.

쐽

KENNWORT – In dieses Feld geben Sie das geheime Kennwort ein, das Ihnen Ihr Provider mitgeteilt hat. Wenn sichergestellt ist, dass mit Ihrem Kennwert kein Missbrauch betrieben werden kann, können Sie das Kennwort speichern, indem Sie das Kontrollfeld SPEICHERN anklicken.

쐽

PASSIVEN FTP VERWENDEN – Diese Einstellung wird wichtig, wenn Sie aus einem Subnetz, das mit IP-Masquerading und Network Address Translation arbeitet, per FTP auf den Server zugreifen. Technisch gesehen öffnet beim passiven FTP der lokale Rechner einen Daten- und Kontrollkanal zum Server, statt dass wie üblich der entfernte Rechner einen Rückkanal zum Client herstellt. Sie können diese Option vorbeugend aktivieren. Sollte sie nicht benötigt werden, verursacht sie keine Probleme.

쐽

FIREWALL VERWENDEN – Wenn Ihre Site hinter einer Firewall liegt, müssen Sie unter Umständen die Voreinstellungen von UltraDev entsprechend anpassen, damit das Programm auf den Server zugreifen kann. Versuchen Sie es zuerst über passiven FTP. Wenn das nicht funktioniert, müssen Sie den Firewall-Anschluss konfigurieren.

Den Firewall-Anschluss konfigurieren Sie wie schon erwähnt in den Voreinstellungen von UltraDev. Ein paar der Einstellungen sind identisch mit denen des Serverzugriffs über LOKAL/NETZWERK. Sie können also dort die entsprechenden Einstellungen nachsehen, auch wenn Sie kein FTP verwenden. Die Voreinstellungen zu Site-FTP verändern Öffnen Sie im Menü BEARBEITEN das Dialogfenster VOREINSTELLUNGEN. Wählen Sie im Listenfeld KATEGORIE den Eintrag SITE-FTP. Die Eingabemaske ändert sich wie in Abb. 3.7 gezeigt, sodass Sie die nötigen Feineinstellungen vornehmen können. Wenn Sie nicht hinter einer Firewall arbeiten, werden Sie die Einstellungen so belassen können, wie sie sind. Falls Sie Änderungen vornehmen müssen, stehen Ihnen folgende Optionen zur Auswahl: 쐽

IMMER ZEIGEN – Die Site-Ansicht ist in zwei Fenster geteilt, von denen das rechte standardmäßig die lokalen und das linke die entfernten Dateien der Site anzeigt. Über diese beiden Dropdown-Menüs können Sie die Anzeige der Dateien in den Fenstern austauschen.

쐽

ABHÄNGIGE DATEIEN – Abhängige Dateien sind Dateien, die von HTML-Dokumenten benötigt werden und ohne die sie nicht vollständig angezeigt werden können. Einfacher ausgedrückt: Wenn Ihr HTML-Dokument Bilder enthält, dann sind diese Bil-

132

Websites in UltraDev importieren

der abhängige Dateien. Über diese Kontrollfelder regeln Sie, ob UltraDev Sie vorher fragt, ob es abhängige Dateien einschließen soll, wenn es Dateien vom oder zum Server überträgt.

Abbildung 3.7: In den Site-Voreinstellungen legen Sie die Darstellung der Dateien in der Site-Ansicht sowie die Arbeitsweise des FTP-Clients fest. 쐽

FTP-VERBINDUNG – Hier stellen Sie ein, ob und nach welcher Zeitspanne die FTPVerbindung getrennt werden soll, falls keine Daten übertragen werden. Das ist vor allem dann sinnvoll, wenn Sie sich per Wählverbindung auf dem Server einloggen und Ihre Verbindungen nach Zeittakt abgerechnet werden.

쐽

FTP-ZEITÜBERSCHREITUNG – Hier geben Sie an, wie lange UltraDev versuchen soll, eine Verbindung zum entfernten Server herzustellen. Kommt innerhalb der eingestellten Zeitspanne keine Verbindung zu Stande, gibt UltraDev eine Fehlermeldung aus.

쐽

FIREWALL-HOST – Wenn Sie hinter einer Firewall arbeiten, geben Sie in diesem Feld die Adresse des Proxy-Servers ein, zu dem die Verbindung hergestellt werden soll. Über diesen Host erfolgt die eigentliche Verbindung zum Internet.

쐽

FIREWALL-ANSCHLUSS – Wenn Sie eine Firewall verwenden, muss ein feste Portnummer angegeben werden, über die die Verbindung zum FTP-Server hergestellt wird. Die Default-Portnummer ist 21.

쐽

BEREITSTELLUNGSOPTIONEN – Wenn Sie dieses Kontrollfeld aktivieren, werden noch nicht gespeicherte Änderungen an Dateien automatisch gesichert, bevor diese auf den Server geladen werden. Mit dieser Option verhindern Sie, dass Änderungen versehentlich verloren gehen.

133

Websites planen und verwalten

Die meisten dieser Optionen können unverändert bleiben. Wenn Sie Einstellungen an den Firewall-Option vornehmen, obwohl Sie nicht hinter einer Firewall arbeiten, führt dies zu einem Verbindungsfehler. Fortgeschrittene FTP-Konfiguration Das FTP-Protokoll erlaubt die Übertragung von ASCII- und Binär-Daten. Programme und Grafiken im ASCII-Modus zu übertragen ist eine ebenso schnelle wie wirksame Methode, diese Daten zu zerschießen. Warum sollten Sie dann überhaupt den ASCII-Modus verwenden? Unix, Mac und Windows verwenden unterschiedliche Kodierungen, um ein »end of line« zu bezeichnen, und dieses Steuerzeichen wird automatisch umgewandelt. Leider gibt es in UltraDev keine direkte Möglichkeit, dem Programm mitzuteilen, in welchem Modus es bestimmte Dateitypen vom und zum Server übertragen soll. Hier bleibt nur Handarbeit. Öffnen Sie zu diesem Zweck die Datei FTPExtensionMapMac.txt (Mac OS) bzw. FTPExtensionMap.txt (Windows) und passen Sie sie entsprechend an. Sie finden diese Datei im Ordner Dreamweaver UltraDev\Configuration auf Ihrer Festplatte. Nachfolgend sehen Sie einen Ausschnitt aus der Windows-Version dieser Datei: CGI CSS DCR DIR DOC DXR EXE GIF HTM HTML JPG JPEG JS LBI MNO MOV MPEG

ASCII ASCII BINARY BINARY BINARY BINARY BINARY BINARY ASCII ASCII BINARY BINARY BINARY BINARY BINARY BINARY BINARY

Um nun einem bestimmten Dateityp den entsprechenden Übertragungsmodus zuzuweisen, setzen Sie die Dateinamenserweiterung dieses Dateityps in die erste Spalte und den Modus (ASCII bzw. BINARY) in die zweite. Wie Sie in obigem Ausschnitt sehen, werden HTML-Dokumente im ASCII-Modus und Bilder (JPG, GIF) als Binär-Daten übertragen. Wenn Sie z.B. Java-Dateien übertragen müssen, ergänzen Sie die Liste um die Einträge JAR und CLASS und geben Sie als Übertragungsmodus BINARY an. Somit können Sie die entsprechenden Datentypen problemlos per FTP übertragen.

134

Websites in UltraDev importieren

Creator-Kennung und Dateitypen auf dem Mac Macs haben ein einzigartiges System der Dateiverwaltung. Zusammen mit jeder Datei wird eine Signatur bestehend aus vier alphanumerischen Zeichen gespeichert, an der das System erkennt, um welche Art von Datei es sich handelt und mit welchem Programm sie erzeugt wurde. Wenn Sie also eine GIF-Datei mit Photoshop erzeugen, wird sie auch mit Photoshop geöffnet. Bei anderen GIF-Dateien weist die Signatur vielleicht auf Fireworks als Erstellungsprogramm hin und ruft entsprechend dieses Programm auf. Jede Datei »merkt« sich also, welche Art von Datei sie ist und mit welchem Programm sie erzeugt wurde. Mit einem Programm wie Apples ResEdit können Sie die CreatorKennung einer Datei ermitteln. Setzen Sie diese Kennung dann in die Datei FTPExtensionMap.txt ein, damit UltraDev die Dateien im richtigen Modus übertragen kann.

Die Verbindung öffnen Wenn Sie nun den Server-Zugriff konfiguriert haben, können wir die Übertragungsfunktionen im Site-Fenster testen. Klicken Sie dazu auf die Schaltfläche VERBINDEN in der Werkzeugleiste. Abb. 3.8 zeigt die geöffnete Verbindung einer lokalen Site zum entfernten Server. Wenn Sie in der Site-Ansicht nur das Fenster mit den lokalen Dateien sehen, klicken Sie auf den kleinen Pfeil links unten in der Statuszeile, sodass er nach rechts zeigt. Einer Übertragung der Dateien zwischen der lokalen und der entfernten Site steht nun nichts mehr im Wege.

Abbildung 3.8: Die Verbindung zum Server ist geöffnet.

Dateien übertragen Am leichtesten lassen sich Dateien zwischen der lokalen und der entfernten Site per Drag and Drop verschieben. Auf diese Art und Weise können Sie eine oder mehrere Dateien oder sogar ganze Ordner von einem ins andere Fenster ziehen. Beim Verschieben prüft

135

Websites planen und verwalten

UltraDev automatisch, ob und welche Dateien von den ausgewählten Dateien abhängig sind, und fragt, ob die abhängigen Dateien mit übertragen werden sollen. Das Programm spart Ihnen also eine Menge Arbeit, da Sie nach den abhängigen Dateien nicht selbst suchen müssen. Der File-Transfer lässt sich auch mit den Pfeilen DATEI(EN) BEREITSTELLEN bzw. ABRUdurchführen, wie man sie auch von FTP-Clients kennt. Mit DATEI(EN) BEREITSTELLEN laden Sie Dateien auf den entfernten Server, mit DATEI(EN) ABRUFEN holen Sie sich Dateien oder ganze Ordner lokal auf die Festplatte. Eine Anzeige rechts unten in der Statusleiste informiert Sie, wie weit der Up- bzw. Download fortgeschritten ist. Wenn Sie auf den roten Stop-Button klicken, unterbrechen Sie die Übertragung. FEN

Falls es bei der Übertragung zu Fehlern kommt, können Sie sich das FTP-Protokoll anzeigen lassen, das alle Kommandos während der Datenübertragung aufzeichnet. Sie finden es unter Menü SITE > FTP-PROTOKOLL (Mac) bzw. unter Menü FENSTER > SITE-FTP-PROTOKOLL in der Site-Ansicht (Windows). Hier dürften Sie aller Wahrscheinlichkeit nach die Lösung für Ihr Problem finden.

Dateiansicht in den Site-Fenstern aktualisieren Wenn Sie Dateien in der entfernten bzw. lokalen Site ändern (löschen oder hinzufügen), kann es vorkommen, dass die Änderung in den entsprechenden Fenstern nicht angezeigt wird. Wenn Sie das unbestimmte Gefühl haben, dass eine der beiden Seiten nicht vollständig angezeigt wird, klicken Sie auf die Schaltfläche AKTUALISIEREN (der kreisförmige Pfeil in der Werkzeugleiste), dann werden die Dateilisten in beiden Fenstern auf den aktuellen Stand gebracht. Wenn Sie möchten, dass speziell die Liste mit den Dateien der entfernten bzw. der lokalen Site aktualisiert wird, wählen Sie den jeweiligen Befehl im Menü ANSICHT > ENTFERNT AKTUALISIEREN bzw. LOKAL AKTUALISIEREN. Die entsprechende Ansicht wird dann neu geladen.

Dateien synchronisieren Dateien zu synchronisieren ist die bequemste Art und Weise, HTML-Dokumente vom oder zum Server zu übertragen. Statt alle geänderten Dateien mühsam selbst zu suchen und per Drag & Drop zu verschieben, lassen Sie sich die Änderungen von UltraDev anzeigen. Wenn Sie sich nur eine Liste der geänderten Dateien anzeigen lassen wollen, wählen Sie den Befehl im Menü BEARBEITEN > NEUERE AUSWÄHLEN (LOKAL) bzw. NEUERE AUSWÄHLEN (ENTFERNT). Im entsprechenden Fenster werden dann die Dateien markiert, die neuer sind als die Dateien am anderen Ende der Verbindung. Per Drag and Drop können Sie die markierten Dateien dann in das andere Fenster ziehen, um die Daten zu synchro-

136

Websites pflegen

nisieren. Dieses Aktualisieren von Hand lässt Ihnen die volle Kontrolle darüber, welche Dateien aktualisiert werden sollen, andrerseits laufen Sie nicht Gefahr, abhängige Dateien zu vergessen, da UltraDev sie automatisch mit überträgt. Wenn Sie die ganze Arbeit dem Programm überlassen wollen, wählen Sie den Befehl SITE > SYNCHRONISIEREN, woraufhin sich das in Abb. 3.9 gezeigte Dialogfenster öffnet. Klicken Sie auf die Schaltfläche OK, um sich eine Liste aller zu aktualisierenden Dateien anzeigen zu lassen. Dateien, die Sie nicht übertragen wollen, können Sie abwählen. Klicken Sie nun auf OK.

Abbildung 3.9: Entfernte und lokale Site schnell synchronisieren

Im Dialogfenster DATEIEN SYNCHRONISIEREN können Sie einstellen, was übertragen werden soll (die ganze Site oder nur ausgewählte Dateien) und in welcher Richtung diese Dateien übertragen werden sollen (von der lokalen zur entfernten Site oder umgekehrt bzw. in beiden Richtungen). Wenn Sie das etwas missverständliche Kontrollfeld ENTFERNTE DATEIEN NICHT AUF LOKALEM LAUFWERK LÖSCHEN aktivieren, werden beim Upload sämtliche Dateien der entfernten Site gelöscht, für die es kein Gegenstück auf der lokalen Site gibt. Ebenso werden beim Download sämtliche lokalen Dateien gelöscht, die sich nicht auf der entfernten Site finden. Wenn Sie alle Daten übertragen haben, klicken Sie auf die Schaltfläche TRENNEN, um die Verbindung zwischen Ihrem Rechner und dem Server zu schließen. In der Site-Ansicht können Sie mit den beiden Schaltflächen links oben in der Werkzeugleiste schnell zwischen der Sitemap und den Site-Dateien umschalten.

3.4

Websites pflegen

Mit zum Schwierigsten beim Warten großer Websites gehört das Vermeiden von unterbrochenen Links. Bei ein paar Hundert Seiten kann es schon mal passieren, dass man versehentlich einen Link löscht, vor allem, wenn man so wie ich bei kleineren Eingriffen gerne selbst am Code bastelt.

137

Websites planen und verwalten

Hyperlinks überprüfen UltraDev kann sämtliche Links auf Ihren Seiten in Sekundenschnelle überprüfen. Rufen Sie hierzu den Befehl SITE > HYPERLINKS FÜR GANZE SITE PRÜFEN auf. Das Programm untersucht daraufhin die gesamte Website nach fehlerhaften, verwaisten und externen Links. Wählen Sie den benötigten Bericht über das Dropdown-Menü ANZEIGEN aus. Fehlerhafte (unterbrochene) Links beziehen sich auf lokale Dateien, die nicht mehr korrekt funktionieren. Mit den programminternen Funktionen von UltraDev zum Bearbeiten, Verschieben und Umbenennen von Dateien lassen sich diese Probleme in den meisten Fällen gut in den Griff bekommen. Dateien von Hand zu bearbeiten stellt allerdings immer eine gewisse Fehlerquelle dar. Externe Links sind Links, die auf Dateien zeigen, die nicht auf Ihrer Site liegen. Um sich alle externen Links Ihrer HTML-Dokumente anzeigen zu lassen, wählen Sie diese Option. UltraDev checkt diese Links zwar nicht selbst, aber anhand der angezeigten Liste können Sie diese Links aber selbst per Browser überprüfen. Abb. 3.10 zeigt die Ergebnisse eines Suchdurchlaufs nach den externen Links einer Website.

Abbildung 3.10: Mit der Funktion Hyperlinks für ganze Site prüfen können Sie sich z.B. alle externen Links anzeigen lassen.

Die letzte Option VERWAISTE DATEIEN findet sämtliche Dateien, die mit keinen anderen Dokumenten der Site verknüpft sind. Falls nicht zufällig ein externer Link von außerhalb auf diese Dateien gesetzt ist, kann kein Browser der Welt sie finden – daher der Name verwaiste Dateien. Wenn Sie die Linkprüfung über Ihre Site haben laufen lassen, können Sie das Ergebnis mit Klick auf die Schaltfläche SPEICHERN als Datei ausgeben. Es wird eine einfache Textdatei erzeugt, die Ihnen eine gute Kontrollmöglichkeit darüber gibt, welche Links schon berichtigt wurden und welche nicht. Nachfolgend ein Muster eines solchen Berichts:

138

Websites pflegen

Fehlerhafte Hyperlinks: klapptest.htm klapptest.htm klapptest.htm

# grafiken/transparent.gif #

Externe Hyperlinks: index.asp <%=MM_moveNext%> index.asp <%=MM_movePrev%> test01.asp <%=MM_moveNext%> test01.asp <%=MM_moveLast%> test01.asp <%=MM_editAction%> test03.asp <%=MM_moveNext%> test04.asp <%=MM_moveNext%> TMPz9av7d5cj.asp <%=MM_moveNext%> TMPz9av7d5cj.asp <%=MM_movePrev%> Verwaiste Dateien: hg_farbtest.gif multicol.htm screenshot.jpg test01.asp test02.asp test04.asp TMPz9av7d5cj.asp _mmDBScripts/adojavas.inc _mmDBScripts/MMHTTPDB.asp Connections/connTest.asp Connections/connVideothek.asp datenbank/video.ldb datenbank/video.mdb file:///E|/Eigene Dateien/Websites/videothek/multicol.htm Templates/Unbenannt.dwt Dateien: 21 gesamt, 13 HTML, Hyperlinks: 17 gesamt, 5 OK,

15 verwaist 3 fehlerhaft,

9 extern

Der Bericht enthält Angaben zu allen drei Kategorien, die geprüft werden, sowie zum Linkstatus innerhalb der gesamten Website. Wenn Sie eine schnelle Möglichkeit suchen, externe Links zu überprüfen, möchte ich Sie auf meinen Linkchecker hinweisen, den Sie unter der Adresse http://jray.ag.ohio-state.edu herunterladen können. Damit können Sie externe Links auf Ihrer Website in Echtzeit mit Ihrem Browser testen.

139

Websites planen und verwalten

Unterbrochene Links reparieren Wenn Sie auf Ihrer Website einen gebrochenen Link entdecken, der auf allen Seiten vorhanden ist – z.B. ein externer Link auf eine Adresse, die nicht mehr existiert oder sich geändert hat –, dann können Sie diesen Link global auf allen Seiten ändern lassen. Wählen Sie hierzu den Befehl SITE > HYPERLINK FÜR GANZE SITE ÄNDERN. Abb. 3.11 zeigt das Dialogfenster mit den nötigen Einstellungen, um alle Links auf die URL http://www.oldsite.com durch den Link auf die URL http://www.newsite.com zu ersetzen. Sie können auch auf das Ordnersymbol neben dem Eingabefeld klicken und ein Dokument Ihrer Site auswählen, dann müssen Sie nichts tippen. Klicken Sie jetzt auf OK, und das Programm macht sich an die Arbeit. UltraDev zeigt Ihnen ein Fenster mit einer Liste aller betroffenen Dateien an, in dem Sie diejenigen Dokumente auswählen, die aktualisiert werden sollen.

Abbildung 3.11: Schnelle Aktualisierung von Links

3.5

Verteilte Entwicklungsumgebung

Wenn ein mehrköpfiges Team an der Realisierung einer Website arbeitet, kann es erforderlich sein, dass Dateien von mehreren Personen gleichzeitig bearbeitet werden. Zu Problemen kann es kommen, wenn eine Datei von zwei Personen gleichzeitig bearbeitet wird. Im normalen Bearbeitungsmodus überspeichert der letzte Bearbeiter die Änderungen seines »Vorgängers«. Stets allen Kollegen sagen zu müssen, welche Datei Sie gerade bearbeiten und von der sie daher die Finger lassen sollen, kann nicht die endgültige Lösung des Problems sein. Aber, Sie ahnen es schon, UltraDev bietet auch hier Abhilfe. Mithilfe der Funktion EIN-/AUSCHECKEN können Sie sich eine Art Besitzrecht an einem Dokument sichern. »Ausgecheckte« Dokumente können von niemand anderem bearbeitet werden. Das ist so ähnlich wie mit einem Buch aus der Leihbücherei: Wenn Sie das Buch ausleihen, gehört es Ihnen solange, bis Sie es fertig gelesen haben. Ihre Kollegen sehen also, wer das Dokument in Bearbeitung hat, können aber nicht darauf zugreifen. Wenn Sie fertig sind, geben Sie die Datei frei, damit andere sie bearbeiten können. Verschiedene Technologien wie WebDAV und MS SourceSafe bieten solch Ein-/Auschecksysteme. Wenn Sie aber keine entsprechende Servertechnik definiert haben, »weiß« UltraDev nicht, ob diese Technologien zur Verfügung stehen und verwendet daher sein internes System, um Dateien für den Zugriff zu sperren.

140

Verteilte Entwicklungsumgebung

Funktion EIN-/AUSCHECKEN einrichten Wenn Sie die bei der Realisierung einer Website die Funktion EIN-/AUSCHECKEN verwenden wollen, müssen Sie in der Site-Definition die entsprechenden Einstellungen vornehmen. Rufen Sie hierzu in der Site-Ansicht über SITE > SITES DEFINIEREN das entsprechende Dialogfenster auf. Wählen Sie in diesem Fenster die Kategorie REMOTEINFORMAITONEN aus und aktivieren Sie das Kontrollfeld EIN-/AUSCHECKEN VON DATEIEN AKTIVIEREN. Abb. 3.12 zeigt die nicht sehr umfangreiche Eingabemaske. Aktivieren Sie die Funktion EIN-/AUSCHECKEN, können Sie noch wählen, ob die ausgecheckte Datei mit dem Namen und der E-Mail-Adresse des Bearbeiters versehen werden soll. Nicht zuletzt empfiehlt es sich auch, das Kontrollfeld DATEIEN BEIM ÖFFNEN AUSCHECKEN zu aktivieren, da Sie dann nicht jedes Mal von Hand auschecken müssen. Wenn Sie die Funktion EIN-/AUSCHECKEN von UltraDev verwenden wollen, müssen Sie in der Site-Definition als Server-Zugriff eine andere Option als KEINE einstellen.

Abbildung 3.12: Die Funktion Ein-/Auschecken begnügt sich mit wenigen Einstellungen.

Die Funktion EIN-/AUSCHECKEN im praktischen Einsatz Mit der Funktion EIN-/AUSCHECKEN ist es ein Leichtes, den Überblick darüber zu behalten, welche Datei augenblicklich von wem bearbeitet wird. Wenn Sie das Kontrollfeld DATEIEN BEIM ÖFFNEN AUSCHECKEN aktiviert haben, können Sie mit UltraDev wie

141

Websites planen und verwalten

gewohnt arbeiten. Dateien werden beim Öffnen sofort ausgecheckt und können dann von niemand anderem bearbeitet werden, sofern UltraDev bzw. Dreamweaver richtig konfiguriert sind. Sie können auch die Schaltflächen EINCHECKEN bzw. AUSCHECKEN in der Werkzeugliste der Site-Ansicht benutzen (Pfeile), um Dateien für die Bearbeitung durch andere Benutzer zu sperren bzw. freizugeben. Ausgecheckte Dateien werden in der Dateiliste als solche gekennzeichnet, zugleich wird der Name des Bearbeiters angezeigt. Wenn Sie den Namen des Bearbeiters anklicken, öffnet sich Ihr E-Mail-Programm und Sie können dem Kollegen freundlich aber bestimmt mitteilen, dass er nun endlich die Datei wieder freigeben soll. Abb. 3.13 zeigt das Auscheck-System in Funktion.

Abbildung 3.13: Ausgecheckte Dateien werden mit dem Namen des Bearbeiters angezeigt.

Wenn Sie Websites im Team entwickeln, werden Sie auf die Funktion EIN-/AUSCHECKEN bald nicht mehr verzichten wollen. Die einzige Alternative bestünden darin, einen strikten Bearbeitungsplan aufzustellen und genau festzulegen, wer wann welche Datei bearbeitet, oder die Website in mehrere Teile aufzusplitten und jeweils nur diesen Teil lokal auf dem Rechner der einzelnen Mitarbeiter ohne Zugriffsmöglichkeit von Seiten Dritter zu speichern.

Design Notes Auch die Design Notes sind eine Funktion, auf die Sie in einem Entwicklerteam bald nicht mehr verzichten wollen. Design Notes sind einfach ein Kommentar, den Sie während der Bearbeitung an ein beliebiges HTML-Dokument anhängen können. Diese Kommentare werden im XML-Format in einem eigenen Ordner namens _notes im Stammverzeichnis der Site abgelegt. Wenn ein Bearbeiter eine Datei auscheckt, an die Design Notes angehängt sind, kann er diese öffnen und sich über den Bearbeitungsstand informieren und seinerseits Kommentare einfügen. Design Notes werden unabhängig vom eigentlichen HTML-Dokument gespeichert, Sie brauchen also keine Bedenken zu haben, dass sich plötzlich XML-Markup in den normalen HTML-Code schleicht. Um Kommentare an eine Datei anzufügen, rufen Sie den Befehl DATEI > DESIGN NOTES auf. Um die an eine Datei angehängten Design Notes zu lesen, markieren Sie die entspre-

142

Verteilte Entwicklungsumgebung

chende Datei im Fenster LOKALER ORDNER der Site-Ansicht. Mit Klick auf die rechte Maustaste öffnen Sie das Kontextmenü und wählen den Befehl DESIGN NOTES. Das Eingabefenster DESIGN NOTES sehen Sie in Abb. 3.14.

Abbildung 3.14: Speichern Sie in den Design Notes alle wichtigen Informationen zu einer Datei.

Unter dem Register BASIS-INFO können Sie im Dropdown-Menü STATUS aus einer vordefinierten Liste den Bearbeitungsstatus der Datei auswählen. In das Feld ANMERKUNGEN können Sie freien Kommentar eingeben und mit Klick auf das Kalender-Symbol mit einem Datum versehen. Sie können ferner ein Kontrollfeld aktivieren, ob die Design Notes angezeigt werden sollen, wenn die Datei geöffnet ist. Möchten Sie in den Design Notes zusätzliche Informationen ablegen, klicken Sie auf das Register ALLE INFORMATIONEN. Ohne hier groß in XML einsteigen zu wollen, sei darauf hingewiesen, dass in den Design Notes sämtliche Attribute als Name/Wert-Paar gespeichert werden. Im Feld INFO finden Sie alle Paare aufgelistet, die definiert wurden. Name und Wert können verändert werden, indem man die entsprechende Zeile anklickt und in den Eingabefeldern NAME bzw. WERT die neuen Werte zuweist. Wie bei allen Eigenschaftslisten von UltraDev können über das Plus- bzw. Minussymbol Einträge hinzugefügt bzw. gelöscht werden. Wenn Sie die Design Notes direkt bearbeiten möchten, dann öffnen Sie im Explorer bzw. Finder den Ordner _notes. Er liegt im gleichen Verzeichnis wie die Website, wird aber in der Site-Ansicht von UltraDev nicht angezeigt. Die XML-Datei, die die Design Notes zu einem HTML-Dokument enthält, wird mit dem Namen dieses Dokuments und der Extension .xmo abgespeichert. Die Design Notes zu index.html werden also als index.html.mno gespeichert.

143

Websites planen und verwalten

Nachfolgend ein Beispiel für eine solche Notes-Datei in XML:

Wie Sie sehen, sind alle Informationen einsehbar und frei zugänglich. Die meisten Konfigurationsdateien von UltraDev sind in XML geschrieben, sodass sie relativ leicht angepasst werden können.

3.6

Zusammenfassung

Allmählich nehmen die Dinge Gestalt an. Mit Abschluss der heutigen Lektion sollten Sie mit den Werkzeugen zur Erstellung und Bearbeitung von HTML-Code vertraut sein sowie eine Verbindung zum Webserver herstellen können. Damit Websites auf unterschiedlichen Plattformen lauffähig sind, sollten Sie vor der Erstellung den nötigen Planungsaufwand nicht scheuen. Ohne eine verbindliche Dateinamenskonvention können bei der Umsetzung Problem auftreten. UltraDev bietet sehr leistungsfähige Tools zur Site-Erstellung, mit denen Sie in kürzester Zeit die Grundstruktur einer Website anlegen können. UltraDev unterstützt mehrere Zugriffsmethoden auf Webserver. Sobald eine Verbindung aufgebaut ist, können Sie Dateien, die zwischen dem lokalen Rechner und dem Server ausgetauscht werden, auschecken und für die Bearbeitung seitens Dritter sperren. HTMLDokumente können mit Design Notes versehen werden, um andere Bearbeiter über den aktuellen Bearbeitungsstand zu informieren.

3.7 F

Wenn ich auf Dateien auf dem Server verlinke, deren Namen die Zeichen »:« und »\« enthalten, gibt es Probleme. Warum? A

144

Fragen und Antworten

Diese Zeichen werden von Mac OS und Windows als Trennzeichen in Pfadangaben verwendet. Wenn Sie andere als alphanumerische Zeichen verwenden, informieren Sie sich bei Ihrem Systemverwalter, welche Sonderzeichen Sie auf Ihrer Serverplattform verwenden dürfen.

Workshop

F

Ich bin bis jetzt beim Entwurf und der Umsetzung von Websites immer ohne Sitemaps ausgekommen. Warum soll ich nun plötzlich welche verwenden? A

F

Was ist die günstigste Einstellung für den Server-Zugriff? A

F

Kleinere Websites lassen sich relativ problemlos ohne Map realisieren. Bei größeren Websites mit mehreren Hundert Seiten, die auf viele verschiedene Äste verteilt sind, verlieren Sie ohne sauber ausgearbeitete Struktur schnell den Überblick. Große Websites so anzugehen wie eine kleine Site ist ein Fehler, der sich bitter rächen kann.

Ich persönlich ziehe den Zugriff über Lokal/Netzwerk vor. Wenn ich Dateien direkt auf dem Server bearbeiten will, stelle ich die Option Server-Zugriff auf Keine. Wenn Sie nicht in einem Netzwerk arbeiten, verwenden Sie den Zugriff per FTP.

Was passiert, wenn ich eine Datei auschecke und nicht wieder einchecke? A

3.8

Dann sorgen Sie für böses Blut bei Ihren Kollegen. Diese könnten zwar die Ein-/ Auscheck-Funktion deaktivieren, damit wäre aber ihr eigentlicher Sinn ad absurdum geführt.

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. Welche Zeichen sollten Sie in Dateinamen verwenden? 2. Wie finden Sie am schnellsten alle HTML-Dokumente, denen Sie kein <TITLE>-Tag zugewiesen haben? 3. Welche zusätzlichen Einstellungen müssen Sie am FTP-Client von UltraDev vornehmen, wenn Sie von einem Subnetz, das IP-Masquerading verwendet, auf einen Webserver zugreifen? 4. Wie können Sie sich eine Liste sämtlicher externen Links Ihrer Website anzeigen lassen? 5. Welche Funktion müssen Sie aktivieren, um eine Datei während der Bearbeitung für die Benutzung durch Dritte zu sperren?

145

Websites planen und verwalten

Übungen 1. Zeichnen Sie für ein fiktives Unternehmen eine Sitemap mit allen erforderlichen Bereichen – News, Links, Kontaktinformationen, Produktpalette usw. 2. Bauen Sie diese Sitemap in UltraDev mit Platzhalterseiten nach und verlinken Sie diese Seiten untereinander. 3. Laden Sie die so erstellte Grundstruktur der Site auf den Webserver. Aktivieren Sie die Ein-/Auscheck-Funktion und fügen Sie Inhalt auf den Seiten ein.

146

Websites in Bewegung – clientseitige Verhaltensweisen

4

Websites in Bewegung – clientseitige Verhaltensweisen

Der Stoff der vorausgegangen Tage hat sich ausschließlich mit der Erstellung statischer Websites beschäftigt. Statisch bedeutet, dass Inhalt und Erscheinungsbild eines HTMLDokumentes durch anwenderseitige Aktionen weder beeinflusst noch verändert werden können. Zwar haben wir schon über die vorprogrammierten JavaScript-Objekte von UltraDev gesprochen, mit denen Sie HTML-Objekten dynamische Funktionalität verleihen können, doch haben wir sie bis jetzt noch nicht eingesetzt. Doch ab heute wird das anders, denn mit den DHTML-Objekten kommt Leben in die Website. Der Stoff des heutigen Tages im Überblick: 쐽

DHTML: Grundlagen, Für und Wider

쐽

Die Verhaltenspalette und wie Sie damit dynamische Objekte erzeugen sowie die vorprogrammierten JavaScript-Objekte an Ihre Zwecke anpassen können

쐽

Wie Sie mit Ebenen und DHTML einzigartige Webanwendungen erstellen

쐽

Wie Sie mit der Zeitleiste von UltraDev Animationen und andere zeitgesteuerte Effekte erstellen

쐽

Sonstige clientseitige dynamische Effekte

4.1

DHTML – Was hat man darunter zu verstehen und was nicht?

Der Begriff DHTML, die Abkürzung für dynamisches HTML, ist nicht ganz glücklich gewählt, denn er legt die Schlussfolgerung nahe, dass die bisher statische Auszeichnungssprache HTML nun um die Fähigkeit erweitert wurde, Objekte mit dynamischem Verhalten zu versehen. Liest man zum ersten Mal von DHTML, denkt man sich vielleicht: »Muss ich jetzt etwa schon wieder eine neue Programmiersprache lernen?« Tatsächlich ist DHTML nichts anderes als eine Mischung aus HTML, Stylesheets und JavaScript. Wenn Ihre Website für ein möglichst breites Publikum und die unterschiedlichsten Plattformen zugänglich sein soll, dann verbietet sich unter Umständen der Einsatz von DHTML. Wenn Sie Ihre Website mit DHTML-Effekten ausstatten, muss der Browser des Anwenders bestimmte Voraussetzungen erfüllen (Browser der neueren Generation, Installation bestimmter Plug-Ins usw.). Bei Einsatz solcher Effekte laufen Sie also Gefahr, ein bestimmtes Publikum auszuschließen.

148

DHTML – Was hat man darunter zu verstehen und was nicht?

Stylesheets Stylesheets, die wir in der morgigen Lektion ausführlich besprechen werden, ermöglichen die exakte Positionierung von Elementen auf der Seite sowie präzise Größenangaben. Auch die Verwendung von Ebenen ist weitgehend von der Verwendung von Stylesheets abhängig. Wenn Sie in ein HTML-Dokument Ebenen einsetzen und deren Eigenschaften definieren, haben Sie im Grunde ein Stylesheet für diese Ebene geschrieben. Im Fall von Ebenen werden die nötigen Stylesheets sozusagen stillschweigend im Hintergrund erzeugt, bei anderen Objekten müssen Sie jedoch die Ärmel aufkrempeln und selbst Hand anlegen. Da Stylesheets die pixelgenaue Positionierung von Elementen ermöglichen, spielen sie eine zentrale Rolle bei der Erzeugung von dynamischen Effekten und Animationen. Ohne Stylesheets könnte z.B. JavaScript nicht auf die Attribute eines Objekts zugreifen und sie dynamisch verändern.

JavaScript JavaScript ist eine Programmiersprache, die clientseitig im Browser arbeitet und sämtliche Objekte eines HTML-Dokuments ansprechen und verändern kann. JavaScript hat dabei aber nur auf die Eigenschaften eines Objektes Zugriff, die über HTML-Tags oder Stylesheets definiert sind. Sie können z.B. also nicht Helligkeit oder Kontrast einer Abbildung mit JavaScript verändern. Wenn Sie daher die Eigenschaften eines Objekts nicht per HTML oder Stylesheets ansprechen können, werden Sie auch mit JavaScript nicht weit kommen. Das heißt natürlich nicht, dass JavaScript nutzlos ist. Die Fähigkeit, die Eigenschaften eines Objekts dynamisch ändern zu können, bedeutet, dass Objekte clientseitig, d.h. auf dem Rechner des Anwenders, manipuliert werden können. Mit ein paar Zeilen Code können Sie so Bilder und Text austauschen oder in der Größe verändern. Da die nötigen Operationen vom Rechner des Anwenders ausgeführt werden, muss der Server nur die Seite im Ausgangszustand sowie die nötigen Grafiken übertragen und wird somit entlastet.

Das DHTML-Problem Wenn Sie nun sagen, dass DHTML eine tolle Erfindung ist, stimme ich Ihnen da durchaus zu. Theoretisch handelt es sich bei DHTML um eine wunderbare Möglichkeit, dem Anwender maßgeschneidert Feed-back zu geben, ohne serverseitige Scripts einsetzen oder schreiben zu müssen. Leider ist DHTML in der Praxis nicht so pflegeleicht, wie man sich das wünschen würde.

149

Websites in Bewegung – clientseitige Verhaltensweisen

In der Einleitung zu diesem Buch habe ich das Thema Webbrowser und die Problematik der unterschiedlichen Umsetzung von HTML-Standards angesprochen. Die Browserhersteller haben sich in diesem Punkt mittlerweile weitgehend geeinigt und es hat sich ein verbindlicher HTML-Standard etabliert. Bei der Implementierung von JavaScript in den Browsern bleibt in puncto Standards jedoch noch ein gutes Stück Arbeit zu leisten. Wenn Sie schon einmal ein JavaScript-Programm geschrieben haben, um es in eine Webseite einzubauen, haben Sie vermutlich auch einige Mühe darauf verwendet, dass Ihr fertiges Programm sowohl im Netscape Navigator als auch im Internet Explorer einwandfrei funktioniert. Und nach getaner Arbeit haben Sie sich stolz zurückgelehnt, mit sich und der Welt zufrieden, und an Freunde, Kollegen und Vorgesetzte schnell eine E-Mail geschickt mit der Bitte, doch mal einen Blick auf die tolle JavaScript-gepowerte Seite zu werfen. Aber welchen Browser Sie auch verwenden, um Ihre JavaScript-Seite zu testen, der Betrachter Ihrer Seite wird immer genau den anderen Browser verwenden und prompt funktioniert auch die Seite nicht wie erhofft. Hier holt nicht nur das Schicksal mit harter Hand zu einem grausamen Schlag gegen uns aus, sondern der Hoffnung auf erfolgreiche Präsentation von DHTML-Seiten über alle Browser- und Plattformgrenzen hinweg ist hiermit ein jähes Ende bereitet. Jeder Browser spricht sozusagen seinen eigenen JavaScript-Dialekt. Die Hauptschwierigkeit liegt in der Verwendung von unterschiedlichen Document Object Models (DOM) bei der Implementierung von JavaScript in den verschiedenen Browsern. Über das DOM wird geregelt, wie Objekte per JavaScript angesprochen und verändert werden. Zwischen dem DOM des Internet Explorers und demjenigen von Netscape klafft eine gewaltige Lücke. Um JavaScript-Code problemlos von einer Plattform auf die andere portieren zu können, ist Einiges an Vorausschau und Planung nötig. In vielen Fällen bedeutet das praktisch, dass Sie den Code für jeden Browser extra anpassen müssen. Die Verwendung der DHTML-Funktionen von UltraDev enthebt uns dieser Notwendigkeit, denn das Programm erzeugt Code, der von beiden Plattformen fehlerfrei verstanden wird. Wenn Sie HTML-Objekten auf einer Seite dynamische Verhaltensweisen zuweisen, können Sie darüber hinaus spezifizieren, welche Browsergeneration unterstützt werden soll. Je nach Zielpublikum, das Sie anvisieren, haben Sie verschiedene Optionen zur Auswahl. Sollten Sie es drauf anlegen und Ihre Seiten ausschließlich für den IE 5.0 optimieren, steht Ihnen eine lange Liste von dynamischen Effekten zur Auswahl.

Soll ich nun DHTML verwenden oder nicht? Wenn Sie DHTML-Effekte einsetzen, haben Sie zwar sicher die Bewunderer auf Ihrer Seite, doch Sie laufen Gefahr, dass Sie den Kreis Ihrer Adressaten unter Umständen erheblich einschränken. Wenn der Anwender nicht mindestens einen 4.0-Browser benutzt und JavaScript aktiviert hat, kann er sich DHTML-Websites schlichtweg nicht ansehen. Meiner

150

Clientseitige Verhaltensweisen

Meinung nach wird der Einsatz von DHTML auf manchen Sites übertrieben, sodass sie oft schlecht navigierbar sind und auch dem Auge viel zumuten. Ich finde, der Einsatz von DHTML sollte die Botschaft, die Information einer Seite unterstützen und nicht zum Selbstzweck werden. Wenn Sie den Anwender durch die Anwendung von DHTML-Effekten nicht optisch erschlagen, spricht nichts gegen deren Einsatz. Effekte aber nur um ihrer selbst willen zu verwenden, einfach nur, weil sie machbar sind, ist in meinen Augen keine gute Gestaltungsphilosophie. Es gibt viele Möglichkeiten, auf einer Webseite Animationen einzubauen – GIFs, Flash, Shockwave, Java, QuickTime usw. Diese verschiedenen Typen von Animationen werden in das HTML-Dokument eingebettet und benötigen ein Browser-Plug-In (außer GIFs), um angezeigt werden zu können. Anders bei DHTML-basierten Animationen: Sie sind Teil des HTML-Codes und brauchen zu ihrer Anzeige nur den Browser selbst. Nun können aber mit DHTML nicht alle Effekte erzeugt werden, die mit anderen Animationstechniken möglich sind. Heute werden viele Browser zusammen mit dem Flash-Plug-In installiert, sodass sich für die Erstellung komplexerer Animationen die Verwendung von Flash empfiehlt.

4.2

Clientseitige Verhaltensweisen

Heute lernen wir ein neues Werkzeug kennen: die Verhaltenspalette. Wenn im Folgenden von Verhaltensweisen gesprochen wird, sind damit immer clientseitige Verhaltensweisen gemeint. Mit dieser Palette weisen sie Objekten eine Verhaltensweise zu – das heißt, Sie legen fest, wie ein Objekt auf bestimmte Ereignisse von Seiten des Anwenders, z.B. einen Mausklick, reagieren soll. Die Funktionsweise dieses Werkzeugs wird am besten anhand eines praktischen Beispiels deutlich. Dazu brauchen wir auf unserer Seite zunächst ein JavaScript-Element. Das bekommen wir, wenn wir einen einfachen Rollover-Button auf unsere Seite setzen. Im nächsten Schritt öffnen Sie mit FENSTER > VERHALTEN die Verhaltenspalette.

Die Verhaltenspalette Der Inspector sollte zwei JavaScript-Aktionen anzeigen: onMouseOver und onMouseOut. Wenn alles glatt gegangen ist, sehen Sie auf Ihrem Monitor das in Abb. 4.1 gezeigte Fenster. Die Verhaltenspalette zeigt eine Liste der aktuell einem Objekt zugewiesenen Ereignisse und der damit verbundenen Aktionen. Im Fall unseres Rollover-Bildes handelt es sich um

151

Websites in Bewegung – clientseitige Verhaltensweisen

ein onMouseOver-Ereignis, das die Aktion BILD AUSTAUSCHEN auslöst. Umgekehrt wird durch das onMouseOut-Ereignis die Aktion BILDAUSTAUSCH WIEDERHERSTELLEN ausgeführt. Das Zusammenspiel dieser beiden Ereignisse bewirkt, dass ein Bild ausgetauscht wird, wenn wir den Mauszeiger darauf setzen, und der ursprüngliche Zustand wiederhergestellt wird, wenn sich die Maus außerhalb der Bildfläche befindet.

Abbildung 4.1: Verhaltensweisen sind JavaScript-basierte Aktionen.

Verhaltensweisen erstellen In der Verhaltenspalette gibt es ein Popup-Menü EREIGNISSE ZEIGEN FÜR. Wenn Sie es anklicken, wird eine Liste der verschiedenen Browser angezeigt, aus der Sie die gewünschte Zielplattform auswählen. Diese Einstellung sollten Sie vornehmen, bevor Sie ein Ereignis zuweisen, denn je nach gewähltem Browser ist die Liste der angebotenen Ereignisse kürzer oder länger bzw. nur für diese Plattform erhältlich. Die Auswahlliste selbst bedarf wohl keiner Erklärung, ich möchte Ihnen aber empfehlen, die Einstellung BROWSER AB 3.0 zu verwenden, um größtmögliche Kompatibilität zwischen den Plattformen zu erzielen. Die Einstellung BROWSER AB 4.0 bietet sich an, wenn es um größtmögliche Kompatibilität und Zukunftssicherheit geht. In den folgenden Beispielen arbeiten wir immer mit der Einstellung BROWSER AB 4.0.

Eine Aktion zuweisen Eine Aktion zuzuweisen ist recht einfach – Sie müssen lediglich das betreffende Objekt auswählen und dann zur Verhaltenspalette gehen. Klicken Sie dort auf das Plussymbol (+) und wählen Sie aus dem geöffneten Popup-Menü (siehe Abb. 4.2) die gewünschte Aktion aus. Bei manchen Aktionen ist es offensichtlich, was sie tun, andere bedürfen der Erklärung. In Tabelle 4.1 finden Sie eine Liste sämtlicher Aktionen samt Beschreibung.

152

Clientseitige Verhaltensweisen

Abbildung 4.2: Aktionen warten auf ihren Einsatz. JavaScript-Funktion

Beschreibung

AUDIO ABSPIELEN

Spielt Sounddateien auf dem System des Anwenders ab.

BILD AUSTAUSCHEN

Ersetzt ein Bild durch ein anderes. Wird benutzt, um Rollover-Effekte von Hand zu erstellen.

BILDAUSTAUSCH WIEDERHER- Setzt für das vertauschte Bild wieder die ursprüngliche Grafik ein. STELLEN

BILDER VORAUSLADEN

Lädt Bilder in den Cache, sodass sie im Bedarfsfall ohne weitere Ladezeit ausgetauscht werden können. UltraDev lädt Bilder für Rollover per Default im Voraus.

BROWSER ÜBERPRÜFEN

Leitet den Browser je nach Typ (NN oder IE) bzw. Version zu entsprechend optimierten Seiten.

BROWSER-FENSTER ÖFFNEN

Öffnet URL in neuem Browser-Fenster.

EBENE ZIEHEN

Ermöglicht dem Anwender, eine Ebene im Browser-Fenster frei zu verschieben.

EBENEN EIN-/AUSBLENDEN

Blendet Ebenen ein oder aus bzw. stellt die Standardsichtbarkeit wieder her.

EIGENSCHAFT ÄNDERN

Ändert Eigenschaften eines Objekts. Nützlich zur Anpassung von Ebeneneigenschaften usw.

FORMULAR ÜBERPRÜFEN

Überprüft, ob Formularfelder, die Daten enthalten müssen, vom Anwender auch ausgefüllt worden sind, bevor es zum Server zur Bearbeitung übertragen wird.

Tabelle 4.1: JavaScript-Funktionen und ihr Verwendungszweck

153

Websites in Bewegung – clientseitige Verhaltensweisen

JavaScript-Funktion

Beschreibung

GEHE ZU URL

Leitet den Browser zu neuer URL um.

JAVASCRIPT AUFRUFEN

Ruft eine selbst geschriebene JavaScript-Funktion auf.

NAVIGATIONSLEISTENBILD

Tauscht Bilder in der aktuellen Navigationsleiste aus.

FESTLEGEN

PLUG-IN ÜBERPRÜFEN

Prüft, ob das entsprechende Plug-In installiert ist und leitet den Anwender zur richtigen URL.

POPUP-MELDUNG

Blendet ein Fenster mit einer frei definierten Warnmeldung ein.

SHOCKWAVE ODER FLASHFILM STEUERN

Steuert die Wiedergabe von Shockwave oder Flash-Filmen.

SPRUNGMENÜ

Ändert die Attribute eines Sprungmenüs.

SPRUNGMENÜ GEHE ZU

Fügt dem Sprungmenü eine GEHE ZU-Schaltfläche hinzu. Das entsprechende JavaScript-Element finden Sie in der Unterpalette FORMULARE der Werkzeugpalette.

TEXT DEFINIEREN: EBENE-

Ersetzt Inhalt und Formatierung einer vorhandenen Ebene.

TEXT FESTLEGEN

TEXT DEFINIEREN: STATUS-

Definiert Text zur Anzeige in der Statusleiste des Browsers.

LEISTENTEXT FESTLEGEN

TEXT DEFINIEREN: TEXT VON TEXTFELD EINSTELLEN

Ersetzt den Inhalt eines Textfeldes in einem Formular.

TEXT DEFINIEREN: TEXT VON FRAME EINSTELLEN

Stellt Text eines Frames dynamisch ein.

ZEITLEISTE: GEHE ZU ZEIT-

Bewegt den Wiedergabekopf zu einem beistimmten Bild in der Zeitleiste.

LEISTENBILD

ZEITLEISTE: ZEITLEISTE ABSPIELEN BZW. ZEITLEISTE ANHALTEN

Definiert, welche Aktion zu einem bestimmten Zeitpunkt ausgeführt werden soll. Über diese Funktion können Sie gezielt Punkte in der Zeitleiste anspringen und den zeitlichen Ablauf von Ereignissen steuern.

Tabelle 4.1: JavaScript-Funktionen und ihr Verwendungszweck (Forts.)

Die meisten dieser Aktionen erfordern, dass das Objekt, auf das sie zugreifen, durch einen eindeutigen Namen identifizierbar ist, d.h., das Attribut name muss gesetzt sein. Falls Sie bisher Objekten keinen Namen zugewiesen haben, müssen Sie das nachholen, wenn Sie mit Verhaltensweisen arbeiten wollen. Wählen Sie hierzu das Objekt aus, und öffnen Sie den Eigenschafteninspektor. In der linken oberen Ecke der Palette befindet sich ein Eingabefeld, in das Sie den Namen des Objektes einsetzen.

154

Clientseitige Verhaltensweisen

Als JavaScript-Programmierer werden Sie vielleicht das Menü mit den Aktionen durchsehen und einwenden, dass es sich hier um keine eigentlichen JavaScript-Funktionen handelt. Der Einwand ist nicht unberechtigt. Bei der Verhaltensweisen-Bibliothek handelt sich um eine Sammlung fertig programmierter Verhaltensweisen, deren Ziel es ist, in allen Browsern und auf verschiedenen Plattformen zu funktionieren. Über die letzte Option im Popup-Menü WEITERE VERHALTEN werden Sie mit der Website von Macromedia verbunden, von wo Sie zusätzliche Verhaltensweisen herunterladen können. Die Einbindung neuer Verhaltensweisen sowie die Erweiterung von UltraDev ist Stoff unserer morgigen Lektion.

Ereignisse zuweisen Nachdem Sie in der Verhaltenspalette einem Objekt eine Aktion zugewiesen haben, müssen Sie noch definieren, durch welches Ereignis, d.h. durch welche Maus- bzw. Tastatureingaben des Anwenders, diese Aktion ausgelöst wird. Im Falle des Rollover-Bildes waren die auslösenden Ereignisse onMouseOver bzw. onMouseOut. Bestimmte Ereignisse sind nur in Verbindung mit bestimmten Objekten möglich, und je nach den Einstellungen, die Sie im Eingabefeld EREIGNISSE ZEIGEN FÜR der Verhaltenspalette getroffen haben, sind Sie entweder auf ein paar wenige Ereignisse beschränkt oder haben die ganze Batterie von IEspezifischen Ereignissen zu Ihrer Verfügung. Das auslösende Ereignis definieren Sie, indem Sie zunächst die betreffende Verhaltensweise auswählen und dann im Feld EREIGNISSE auf den kleinen, nach unten gerichteten Pfeil klicken, der rechts neben dem ausgewählten Ereignis angezeigt wird. Es öffnet sich das in Abb. 4.3 gezeigte Popup-Menü mit den möglichen Ereignissen. Vielleicht haben Sie schon bemerkt, dass in manchen Fällen das Ereignis zwischen Klammern steht. Das bedeutet, dass dieses Ereignis in Verbindung mit dem ausgewählten Objekt nicht funktioniert, sondern nur in Verbindung mit einem zweiten Objekt, das das gewünschte Ereignis unterstützt. Das -Objekt z.B. unterstützt eigentlich kein onMouseOver-Ereignis, es unterstützt nebenbei bemerkt fast überhaupt keine Ereignisse. Damit Grafiken überhaupt für Aktionen des Mauszeigers sensibel werden, legt UltraDev ein Anchor-Tag um das Bild (). Über diesen Umweg unterstützt die Grafik die gewünschte Funktion, und wir müssen uns nicht den Kopf zermartern, um uns wieder daran zu erinnern, welches Objekt welche Ereignisse unterstützt. Mehr darüber, welcher Browser welche Ereignisse unterstützt, erfahren Sie auf den Websites der Hersteller. Microsoft: http://msdn.microsoft.com/scripting/jscript/default.htm Netscape: http://developer.netscape.com/docs/manuals/index.html?content= javascript.html

155

Websites in Bewegung – clientseitige Verhaltensweisen

Abbildung 4.3: Aktionen ein auslösendes Ereignis zuweisen

Es folgt eine Übersicht der wichtigsten Ereignisse für 4.0-Browser und höher: 쐽

onMouseUp – Die gedrückte Maustaste wird über dem Objekt losgelassen.

쐽

onMouseOver – Der Mauszeiger befindet sich über dem Objekt.

쐽

onMouseDown – Die Maustaste wird gedrückt, während sich der Mauszeiger über dem Objekt befindet.

쐽

onMouseOut – Der Mauszeiger wird vom betreffenden Objekt weg bewegt.

쐽

onClick – Der Anwender klickt auf das betreffende Objekt.

쐽

onDblClick – Der Anwender führt einen Doppelklick auf das betreffende Objekt aus.

쐽

onKeyDown – Der Anwender drückt eine beliebige Taste.

쐽

onKeyPress – Der Anwender drückt eine beliebige Taste und lässt sie wieder los.

쐽

onKeyUp – Der Anwender lässt eine Taste los, die er zuvor gedrückt hat.

쐽

onBlur – Das betreffende Objekt hat seinen Focus verloren, d.h., es ist nicht mehr

Gegenstand der Benutzeraktion. 쐽

156

onChange – Der Inhalt eines Objekts wurde geändert. Dies kann beispielsweise der Fall sein, wenn der Anwender ein Menüelement auswählt oder den Wert eines Textfeldes ändert und dann auf eine andere Stelle der Seite klickt.

Clientseitige Verhaltensweisen

쐽

onFocus – Ein Objekt erhält den Fokus der Benutzerinteraktion. Beispielsweise wird das Ereignis onFocus generiert, wenn ein Anwender in einem Formular in ein Textfeld klickt.

Da die meisten JavaScript-Aktionen von Maus-Ereignissen ausgelöst werden, steht gewöhnlich auch deren Verwendung im Mittelpunkt des Interesses.

Verhaltensweisen bearbeiten Wenn Sie Objekten Aktionen zuweisen, die von bestimmten Ereignissen ausgelöst werden, können Sie die Auf- bzw. Ab-Pfeile in der Verhaltenspalette dazu verwenden, die Reihenfolge der Aktionen neu zu ordnen. Die Ereignisse werden von oben nach unten abgearbeitet. Sie können über das Popup-Menü jederzeit neue Ereignisse als Auslöser für Aktionen zuweisen. Wenn Sie auf eine Aktion doppelklicken, öffnet sich ein Dialogfenster, über das Sie die Aktion selbst editieren können. Um eine Verhaltensweise zu löschen, müssen Sie nichts weiter tun als auf das Minussymbol (-) der Palette zu klicken.

Per Verhaltensweise Text in der Statuszeile ausgeben Für unsere erste clientseitige Verhaltensweise nehmen wir eine einfache Aktion – wir weisen einem Rollover-Bild eine Verhaltensweise zu, die in der Statuszeile einen erklärenden Text zu diesem Bild bzw. Link ausgibt. Das ist eine ganz praktikable Methode, dem Anwender Feed-back zu geben, ohne dass man gleich Änderungen am HTML-Dokument vornehmen oder ein neues Browserfenster öffnen muss. Hoffentlich haben Sie die Datei gespeichert, in die wir einen Rollover-Bild eingesetzt haben. Wenn ja, dann öffnen Sie sie bitte jetzt, wenn nicht, müssen Sie einen neuen Rollover-Effekt erzeugen. Nun brauchen wir die Verhaltenspalette. Wie bereits gesagt, sind für Rollover-Effekte zwei Verhaltensweisen vordefiniert, die auf onMouseOver- bzw. onMouseOut-Ereignissen basieren. Um Text in der Statuszeile auszugeben, brauchen wir eine dritte Verhaltensweise.

Aktion STATUSLEISTENTEXT FESTLEGEN Klicken Sie in der Verhaltenspalette auf das Plussymbol (+), und wählen Sie aus dem Popup-Menü die Aktion TEXT DEFINIEREN > STATUSLEISTENTEXT FESTLEGEN. Es öffnet sich das in Abb. 4.4 gezeigte Dialogfenster, in das Sie den Text eingeben, der in der Statusleiste angezeigt werden soll.

157

Websites in Bewegung – clientseitige Verhaltensweisen

Abbildung 4.4: Textmeldungen in der Statuszeile ausgeben lassen

Wenn Sie vielleicht schon ein bisschen mit den Verhaltensweisen experimentiert haben, wissen Sie bereits, dass zu den meisten Aktionen Dialogfenster angezeigt werden, um den Ablauf der Aktion zu konfigurieren. Die Einstellungen des Fensters STATUSLEISTENTEXT FESTLEGEN gehören zu den einfachsten, die man vornehmen muss.

Ereignis onMouseOver hinzufügen Wenn Sie einem Objekt eine Aktion zuweisen, wird als auslösendes Ereignis standardmäßig onMouseOver gesetzt. Falls das sowieso Ihre Absicht war, brauchen Sie an der Einstellung nichts mehr zu verändern. Wenn Sie nun mit der Maus über die Grafik fahren, wird die Aktion STATUSLEISTENTEXT FESTLEGEN ausgeführt, und der Text, den Sie in der entsprechenden Dialogbox eingetippt haben, wird in der Statuszeile des Browsers ausgegeben. Sie könnten natürlich als auslösendes Ereignis auch onClick oder eines der anderen vordefinierten Ereignisse setzen. Wenn Sie alle Verhaltensweisen wie vorstehend definiert haben, müsste Ihre Verhaltenspalette so aussehen wie in Abb. 4.5 gezeigt.

Abbildung 4.5: Dem Rollover-Bild sind nun drei Aktionen zugewiesen worden.

Es macht nichts, dass zwei onMouseOver-Ereignisse gesetzt wurden. Die Reihenfolge der Verhaltensweisen in der Liste bezeichnet die Reihenfolge, in der sie abgearbeitet werden (von oben nach unten). In der in Abb. 4.5 gezeigten Konfiguration werden zuerst die Bilder ausgetauscht und dann der Text der Statuszeile ausgegeben. Das Ganze jedoch geschieht so schnell, dass wir keine Verzögerung bemerken, und die Reihenfolge spielt eigentlich keine Rolle. Wenn Sie aber möchten, dass zuerst der Text der Statuszeile angezeigt wird, markieren Sie dieses Verhalten und verschieben es mit dem Nach-oben-Button an die erste Stelle.

158

Clientseitige Verhaltensweisen

Sie können die Reihenfolge der Ausführung nur bei bestimmten Ereignissen abändern. Sie können z.B. ein onMouseOver-Ereignis im Stapel nicht über ein onMouseOut-Ereignis legen, da es voneinander unabhängige Ereignisse sind. Die Reihenfolge von zwei onMouseOver-Ereignissen können Sie jedoch vertauschen. Zum Abschluss unserer Bemühungen sollten wir unser Werk im Browser begutachten. Wenn alles gut gegangen ist, wird die Rollover-Grafik angezeigt, wenn Sie den Mauszeiger auf den Button setzen, und die eingestellte Nachricht wird in der Statuszeile angezeigt. So einfach geht das. Als Nächstes wollen wir eine ähnliche Funktionalität mit einer völlig anderen Verhaltensweise erreichen. Es empfiehlt sich, Verhaltensweisen eines Objekts in verschiedenen Browsern zu testen. Sie werden feststellen, dass die Resultate unterschiedlich ausfallen. Das liegt an den unterschiedlichen JavaScript-»Dialekten«. Bevor wir uns jedoch zu neuen Ufern wagen, möchten Sie vielleicht noch wissen, wie UltraDev diese und jene Kunststücke vollbringt. Lassen Sie uns daher einen Blick auf den JavaScript-Code werfen, den das Programm erzeugt hat, um den Objekten diese Verhaltensweisen zuzuweisen: <script language="JavaScript"> 0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
159

Websites in Bewegung – clientseitige Verhaltensweisen

Die obigen vier Funktionen werden in jedes HTML-Dokument eingefügt, das RolloverBilder verwendet. Die generische Routine MM_findObj ist für jeden JavaScript-Programmierer höchst nützlich. Sie ermöglicht unabhängig von der verwendeten Browserplattform auf Objekte über deren Namen zuzugreifen. Wenn Ihnen das böhmische Dörfer sind, müssen Sie sich deswegen keine grauen Haare wachsen lassen. Die übrigen drei Funktionen, MM_preloadImages, MM_swapImage und MM_swapImgRestore, dienen dazu, die benötigten Bilder auf die Seite zu laden, das aktuelle Bild gegen sein Rollover-Bild zu tauschen und den Ausgangszustand wiederherzustellen. Die folgende Funktion hat die Aufgabe, Text in der Statuszeile auszugeben: function MM_displayStatusMsg(msgStr) { //v1.0 status=msgStr; document.MM_returnValue = true; } //-->

Im -Bereich des HTML-Codes finden wir die auslösenden JavaScript-Ereignisse. Durch das onMouseOver-Ereignis werden der Austausch der Grafiken und die Anzeige in der Statuszeile veranlasst, während durch das onMouseOut-Ereignis wieder das Ausgangsbild geladen wird.

Mit jeder neuen Verhaltensweise wird dem Dokument auch neuer JavaScript-Code hinzugefügt. Auch wenn Sie selbst kein JavaScript-Programmierer sind, sollten Sie anhand der Namen der Funktionen erkennen, welche Routine zu welchem Verhalten gehört.

Benutzerhilfen einblenden Erklärenden Test in der Statuszeile einzublenden ist durchaus ein gangbarer Weg, um dem Benutzer Feed-back zu geben, doch von einem echten Blickfänger kann man in diesem Zusammenhang nicht gerade sprechen. Die Information sollte schon ein bisschen besser ins Auge fallen. Sie kennen sicher alle die Tooltipps, die aus keiner neuen Software mehr wegzudenken sind. Wäre es nicht toll, wenn Sie mit etwas JavaScript auf Ihrer Website eine ähnliche Funktionalität anbieten könnten? (Natürlich wäre das toll!)

160

Clientseitige Verhaltensweisen

Tooltipps einrichten Bevor Sie einen Tooltipp einrichten können, müssen Sie ein Objekt haben, zu dem dieser Tooltipp eingeblendet wird. Ich habe ein altgedientes Rollover-Bild aus meiner Sammlung genommen und es zweimal auf der Seite eingefügt. Welche Art von Objekt Sie verwenden ist egal, solange es onMouseOver-Ereignisse und onMouseOut-Ereignisse unterstützt. Die Tooltipps selbst werden in Ebenen abgelegt. Da ich zwei Buttons habe, zeichne ich auch zwei Ebenen – je eine pro Tooltipp. Geben Sie Ihren Ebenen eindeutige Namen, die die Zuordnung erleichtern. Wenn Sie auf Ihrer Seite Button1 und Button2 verwenden, dann nennen Sie die Ebenen ebene1 und ebene2. Schreiben Sie nun in diese Ebenen den Text, der beim Rollover angezeigt werden soll. Positionieren Sie die Ebenen an der Stelle, an der sie später eingeblendet werden sollen. Abb. 4.6 zeigt zwei Buttons und den zugehörigen Ebenen. Wenn Sie die Ebenen mit Text gefüllt und richtig positioniert haben, müssen für jede Ebene im Eigenschafteninspektor die Sichtbarkeit auf HIDDEN stellen. Somit ist sichergestellt, dass der Anwender die Ebenen nicht sieht, wenn er Ihre Seite zum ersten Mal lädt, und nur die Buttons angezeigt bekommt. Im nächsten Schritt werden wir den Ebenen das entsprechende Verhalten zuweisen, sodass sie bei einem Rollover wie Tooltipps zu den jeweiligen Buttons eingeblendet werden.

Abbildung 4.6: Positionieren Sie die Ebenen dort, wo sie später eingeblendet werden sollen.

161

Websites in Bewegung – clientseitige Verhaltensweisen

Verhaltensweise EBENEN EIN-/AUSBLENDEN zuweisen Für jeden Tooltipp, der ein- und wieder ausgeblendet werden soll, müssen Sie der Verhaltensweise des übergeordneten Buttons die Aktion EBENEN EIN-/AUSBLENDEN zuweisen. Wenn der Anwender mit der Maus den Button überfährt, sollte die entsprechende Ebene eingeblendet werden. Bewegt sich die Maus vom Button weg, sollte die Ebene wieder unsichtbar werden. Wählen Sie einen Button aus, um ihm ein Verhalten zuzuweisen und öffnen Sie die Verhaltenspalette. Klicken Sie auf das Plussymbol (+) und wählen Sie die Aktion EBENEN EIN/AUSBLENDEN aus. Es öffnet sich ein Fenster, das eine Liste aller Ebenen und die verfügbaren Optionen anzeigt (siehe Abb. 4.7). Abbildung 4.7: Wählen Sie die Ebene aus, die angezeigt oder verborgen werden soll, und klicken Sie auf die entsprechende Schaltfläche.

Markieren Sie die Ebene, die zu dem Button oder Objekt gehört, das Sie gerade bearbeiten, und klicken Sie auf die Schaltfläche AUSBLENDEN. Markieren Sie in der Verhaltenspalette das neu hinzugefügte Verhalten und ändern Sie das Ereignis auf onMouseOut. Damit stellen Sie sicher, dass die Ebene ausgeblendet wird, wenn der Anwender die Maus vom Button wegbewegt. Wiederholen Sie diesen Schritt und weisen Sie dem Button eine weitere Aktion EBENEN zu, nur dass Sie diesmal im Fenster EBENEN EIN-/AUSBLENDEN die Option »Einblenden« wählen. Die Verhaltenspalette sollte nun zwei Aktionen EBENEN EIN-/AUSBLENDEN (einmal EINBLENDEN, einmal AUSBLENDEN) enthalten, die die Ebene mit den Tooltipps des Buttons kontrollieren. Als auslösendes Ereignis für die Aktion EBENE EINBLENDEN setzen Sie onMouseOver. Dadurch wird die Ebene eingeblendet, wenn der Anwender die Maus auf den Button setzt. Wenn Sie sämtliche Verhaltensweisen zugewiesen haben, sollte die Palette so aussehen wie in Abb. 4.8 gezeigt. EIN-/AUSBLENDEN

Für den zweiten Button wiederholen Sie die gesamte Prozedur, nur dass Sie natürlich die zu diesem Button gehörige Ebene verwenden. Mit geringem Aufwand haben Sie jetzt Ihrer Webseite dynamische Informationen verpasst, die nur angezeigt werden, wenn sie benötigt werden.

162

Clientseitige Verhaltensweisen

Abbildung 4.8: Das Endergebnis: zwei Buttons, zwei Tooltipps – vier Verhaltensweisen.

Viele Webdesigner erzeugen Tooltipps über das onMouseOver-Ereignis, indem sie Abbildungen gegen Grafiken mit erklärendem Text austauschen lassen. Das ist zwar möglich, ist aber keine so effektive Methode wie die eben verwendete Verhaltensweise EBENEN EIN-/AUSBLENDEN. Als Grafik abgespeicherter Text braucht wesentlich länger um zu laden, außerdem können Sie diese Grafiken nicht so frei positionieren wie Ebenen. Auch in dem Fall, dass Ihre Tooltipps grafische Elemente enthalten, können Sie Ebenen verwenden, denn Ebenen können alle Arten von Objekten enthalten, auch Grafiken.

Popup-Fenster Ein weiteres sehr beliebtes Mittel, um dem Anwender zusätzliche Informationen zu geben, sind Popup-Fenster. Das sind eigene Fenster, die über dem Hauptfenster des Browsers geöffnet werden, wenn der Anwender auf den entsprechenden Link klickt. Diese Technik bietet sich vor allem dann an, wenn kurze Informationen eingeblendet werden sollen, die bestimmte Inhalte im Hauptfenster näher erläutern sollen. Sie können natürlich auch ohne den Einsatz von Verhaltensweisen einen Link in einem neuen Fenster öffnen lassen. Hierzu müssen Sie dem Link im Eigenschafteninspektor nur das entsprechende Ziel zuweisen. Diese Methode hat allerdings den Nachteil, dass ein neues Browserfenster mit all seinen Menüs und Werkzeugleisten geöffnet wird. Das sind nicht nur relative schwere Geschütze, um wenig zusätzliche Information einzublenden, sondern auch das Hauptfenster wird verdeckt, was den Anwender irritieren kann.

163

Websites in Bewegung – clientseitige Verhaltensweisen

Verhaltensweise BROWSERFENSTER ÖFFNEN Im Arsenal der Verhaltensweisen von UltraDev findet sich auch eine Aktion, die das Öffnen von neuen Browserfenstern mit oder ohne die üblichen grafischen Steuerelemente ermöglicht. Zur Realisierung dieses Beispiels verwende ich diesmal ein einfaches Bild. Ziel dieser Übung ist es, den Mausklick des Anwenders abzufangen und daraufhin ein neues Fenster zu öffnen. Im Beispiel mit den Tooltipps war der Text für die eingeblendete Information im gleichen HTML-Dokument gespeichert wie die aufrufende Verhaltensweise. Die Verhaltensweise BROWSERFENSTER ÖFFNEN zeigt jedoch auf die URL einer externen Datei, in der die entsprechenden Information liegen, und öffnet sie in einem neuen Fenster. Sie müssen also vorher ein neues Dokument anlegen. Ich habe zu diesem Zweck eine Datei namens help.html erzeugt. Sobald Sie diese Datei erstellt haben, markieren Sie das Objekt, dem Sie das Verhalten zuweisen wollen und öffnen die Verhaltenspalette. Wählen Sie im Popup-Menü die Aktion BROWSERFENSTER ÖFFNEN. Es öffnet sich das in Abb. 4.9 gezeigte Dialogfenster, in dem Sie weitere Einstellungen vornehmen.

Abbildung 4.9: Optionen für das neue Browserfenster festlegen

Durchsuchen Sie die Site nach der URL, die im neuen Fenster angezeigt werden soll, oder geben Sie sie direkt ein. Wenn Sie dem Fenster eine feste Höhe oder Breite zuweisen wollen, geben Sie die Werte in die entsprechenden Felder ein. Wenn das neue Fenster zusätzliche Informationen zur Hauptseite anzeigen soll, sollten Sie es nicht größer machen als die Hauptseite, sodass es der Anwender im Bedarfsfall verschieben kann, ohne das Hauptfenster zu verdecken. Mit den Kontrollfeldern setzen Sie die Attribute, mit denen das Popup-Fenster dargestellt werden soll. Stellen Sie keine festen Fenstergrößen ein, auch wenn Sie mit vorgegebenen Auflösungen arbeiten. Das letzte Wort darüber, wie er seinen Browser konfiguriert, hat immer der Anwender. Wenn Sie Ihr Layout noch so präzise angelegt haben, kann der Anwender mit seinen Einstellungen Ihre sämtlichen Vorgaben

164

Clientseitige Verhaltensweisen

überschreiben. Wenn Sie dem Anwender feste Auflösungen aufzwingen, wird es immer jemanden geben, dem Ihre Inhalte nicht zugänglich sind aus dem einfachen Grund, weil sie außerhalb des Anzeigebereichs liegen. Zu guter Letzt möchten Sie dem Kind vielleicht noch einen Namen geben. Wenn Sie das Fenster benennen, können Sie dieses Fenster als Ziel für andere Links angeben. Schließt der Anwender dieses Fenster jedoch, verliert der Browser dieses Ziel, und alle Links, die auf dieses Fenster zielen, werden in ganz normalen neuen Browserfenstern geöffnet. Damit haben wir alle nötigen Schritte durchgeführt. Bleibt uns nur noch, unser PopupFenster in Aktion zu bewundern. Rufen Sie die Browservorschau auf und klicken Sie auf das Objekt, dem Sie das Verhalten zugewiesen haben. Die Früchte meiner Arbeit sehen Sie in Abb. 4.10.

Abbildung 4.10: Hiermit stehen die berüchtigten Popup-Fenster auch zu Ihrer Verfügung.

Sie kennen sicher genügend Websites, die sofort ein Popup-Fenster öffnen, wenn man auf die Homepage geht. Manchmal ist das ganz nützlich, manchmal nervt es auch bloß. Wollen Sie auf Ihrer Website dieses Feature einbauen, müssen Sie die Aktion BROWSERFENSTER ÖFFNEN dem onLoad-Ereignis im Tag zuweisen. Auch wenn diese Funktion wie gesagt in manchem Fällen ganz nützlich ist, sollten Sie sie nicht in jeder Ihrer Seiten einbauen – Hunderte von kleinen Browserfenstern verderben schnell den Spaß am Surfen.

165

Websites in Bewegung – clientseitige Verhaltensweisen

Drag-and-Drop auf meiner Website? Ja, das geht. Allein mit den Bordmitteln von UltraDev ist es möglich, auf einer Website volle Drag-and-Drop-Funktionalität zu realisieren. Mit dem folgenden Beispiel schließen wir unsere Erkundung der Verhaltenspalette ab und lernen ein paar der interessanteren Aktionen von UltraDev kennen. Wie Sie gesehen haben, können Ebenen pixelgenau positioniert und ihre Attribute per JavaScript verändert werden. Es erhebt sich die Frage, ob man nicht Verhaltensweisen schreiben könnte, die eine Ebene im Fenster verschieben. Zwar lassen sich auf diesem Weg keine hochkomplexen Anwendungen realisieren, aber für einfachere Lernprogramme, die dem Anwender Rückmeldung geben, reicht es allemal. Im Folgenden bauen wir mit der Funktion EBENE ZIEHEN ein kleines Geschichtsquiz zusammen. Zu diesem Zweck habe ich die in Abb. 4.11 gezeigten Grafiken vorbereitet, denen wir dann das entsprechende Verhalten zuweisen.

Abbildung 4.11: Mithilfe dieser Grafiken erstellen wir eine einfache Quizanwendung.

Ziel der folgenden Übung ist es, eine Anwendung zu erstellen, bei der die drei gezeigten Grafiken an die richtige Stelle in der Tafel oben verschoben werden müssen. Um die Elemente auf der Seite zu positionieren, habe ich Ebenen verwendet. Elemente, die verschoben werden sollen, können sowieso nur in Ebenen abgelegt werden. Der statische Teil, die »Tafel«, wurde ebenfalls mit Ebenen erzeugt. Dies wäre zwar nicht nötig, aber mit Ebenen geht es einfacher. Wenn Sie meine Anwendung nachbauen, sollte das fertige Dokument so aussehen wie in Abb. 4.12 gezeigt.

Verhalten EBENE ZIEHEN zuweisen Die Grafiken sind platziert, nun müssen wir ihnen das Verhalten EBENE ZIEHEN zuweisen. Jede Ebene muss einzeln eingerichtet werden, aber wenn Sie einmal alle Schritte durchgespielt haben, dürfte es keine Schwierigkeiten mehr geben.

166

Clientseitige Verhaltensweisen

Abbildung 4.12: Das Dokument besteht aus vier Ebenen, die obere enthält das Ablageziel.

Sie können zwar bewegliche Ebenen im Dokument platzieren, doch wie alle Verhaltensweisen braucht auch diese ein auslösendes Ereignis. Wenn Sie möchten, dass die Ebenen verschiebbar sind, sobald die Seite geladen ist, setzen ein onLoad-Ereignis im -Tag. Bevor Sie ein Verhalten zuweisen, sollten Sie die Ebenen, die Sie bearbeiten, an die Endposition ziehen (sofern es eine gibt), die als Ablageziel dient. Das wird später ganz praktisch sein, weil Sie die Ebenen dann von hier aus an die Startposition ziehen können, wenn Sie die Ziehbewegung definieren. Setzen Sie nun das angesprochene onLoad-Ereignis im -Tag des Dokuments, um ihm das Verhalten EBENE ZIEHEN zuzuweisen. Es öffnet sich das in Abb. 4.13 gezeigte Dialogfenster.

Abbildung 4.13: Definieren Sie die Ziehbewegung und das Ablageziel der Ebene.

167

Websites in Bewegung – clientseitige Verhaltensweisen

Wählen Sie als Erstes im Popup-Menü die Ebene aus, die bewegt werden soll. Definieren Sie nun die Art der Bewegung, die die Ebene auf der Seite ausführen kann. Den Bewegungsmodus von Ebenen einstellen Wenn der Anwender Ebenen frei im Browserfenster verschieben können soll, lassen Sie die standardmäßige Voreinstellung im Eingabefeld BEWEGUNG auf UNBESCHRÄNKT. Wenn Sie jedoch möchten, dass der Anwender die Ebene nur innerhalb eines vorgegebenen Bereichs nach links, rechts, oben oder unten verschieben kann, wählen Sie die Option BESCHRÄNKT. In dieser Einstellung werden rechts neben dem Eingabefeld vier weitere Felder sichtbar. In diese Felder geben Sie ein, um wie viele Pixel die Ebene nach oben (O:), unten (U:), links (L:) und rechts (R:) ausgehend von ihrer Ursprungsposition verschoben werden kann. Das Eingabefeld akzeptiert nur positive Werte. Wenn ich nun z.B. möchte, dass der Anwender die Ebene nur nach oben oder unten verschieben kann, aber nicht nach links oder rechts, setze ich die Werte für L und R auf »0« und schränke damit die Bewegungsrichtung auf die Vertikale ein. Ablageziele von Ebenen festlegen Sie können Ebenen auch ein Ablageziel zuweisen. Weiter oben habe ich schon angedeutet, dass es sich empfiehlt, verschiebbare Ebenen an der Stelle zu positionieren, wo sie schließlich abgelegt werden sollen, bevor Sie ihnen ein Verhalten zuweisen. So können Sie nämlich über die Schaltfläche AKTUELLE POS. ABRUFEN die exakten Koordinaten für das Ablageziel abrufen. Als Letztes können Sie im Feld EINRASTEN, FALLS INNERHALB den Radius festlegen, innerhalb welchem die abgelegte Ebene am Ziel »einschnappt«, wenn die Ebene nicht exakt am Ablageziel platziert wird. Als guter Wert für die Einrastfunktion hat sich die halbe Breite des verschiebbaren Objekts erwiesen. Damit ist sichergestellt, dass das Objekt einschnappt, wenn es nur zur Hälfte auf dem Ablageziel liegt. Erweiterte Einstellungen Die erweiterten Einstellungen der Aktion EBENE ZIEHEN erhöhen das Maß an Interaktivität dieses Verhaltens. Standardmäßig gilt die gesamte Ebene als Anfasser, mit dem sie verschoben werden kann – der Anwender klickt das Objekt an irgendeiner Stelle an und verschiebt es über den Bildschirm. Für bestimmte Anwendungen ist es jedoch sinnvoller, Abbildungen mit einem als solchen erkennbaren Anfasser zu versehen. Wenn Sie z.B. eine Anwendung mit verschiebbaren Fenstern erstellen, könnten Sie am oberen Rand des Fensters eine Titelleiste anbringen, die als Anfasser dient. Zu diesem Zweck wählen Sie im Eingabefeld ZIEHGRIFF die Option BEREICH IN EBENE. In dieser Einstellung werden vier zusätzliche Eingabefelder angezeigt. Die Koordinaten des Anfassers sowie seine Größe

168

Clientseitige Verhaltensweisen

definieren Sie über den Abstand vom linken (L:) und oberen (T:) Rand der Ebene sowie über die Breite (B:) und Höhe (H:). Abb. 4.14 zeigt das Dialogfenster EBENE ZIEHEN im Register ERWEITERT.

Abbildung 4.14: Die erweiterten Einstellungen ermöglichen die Definition eines Anfassers sowie die Verknüpfung mit weiteren JavaScript-Funktionen.

Die Einstellungsoptionen neben BEIM ZIEHEN steuern, wie die Ebene beim Ziehen behandelt wird. In der Standardeinstellung wird die gezogene Ebene in den Vordergrund gebracht und an oberster Stelle über allen anderen Ebenen abgelegt. Mit der Option Z-INDEX WIEDERHERSTELLEN wird die Ebene wieder in ihre ursprüngliche Position im Stapel zurückgebracht. Wenn während der Ziehaktion zusätzlicher JavaScript-Code ausgeführt werden soll, dann geben Sie das im Feld JAVASCRIPT AUFRUFEN ein. Über das Eingabefeld WENN ABGELEGT: JAVASCRIPT AUFRUFEN steuern Sie, ob und welche JavaScripts ausgeführt werden sollen, sobald der Anwender das gezogene Objekt abgelegt hat. Aktivieren Sie zusätzlich das Kontrollfeld NUR WENN EINGERASTET, wird dieses JavaScript nur ausgeführt, wenn das Objekt am Ablageziel eingerastet ist. In diesem Beispiel lasse ich ein Alert-Fenster aufrufen. Mithilfe der Option NUR WENN EINGERASTET können Sie überprüfen, ob der Anwender das Objekt korrekt abgelegt hat, da das JavaScript nur ausgeführt wird, wenn das Objekt am Ablageziel eingerastet ist. Wenn Sie alle Einstellungen vorgenommen haben, müssen Sie nur noch auf OK klicken. Vergessen Sie aber nicht, die Ebene an ihren Ausgangspunkt zu verschieben. Wenn alles glatt gelaufen ist, sollten Sie jetzt die Früchte Ihrer Arbeit in der Browservorschau genießen können. Um den übrigen Ebenen dieselbe Funktionalität zuzuweisen, müssen Sie nur die entsprechenden Arbeitsschritte wiederholen und jeder Ebene einen eindeutigen Namen zuweisen sowie das jeweilige Ablageziel. Nicht um Sie zu erschrecken, sondern um Ihnen einen Eindruck davon zu vermitteln, wie viel Arbeit Ihnen UltraDev abgenommen hat, sei im Folgenden der komplette JavaScript-Code der Funktion MMdragLayer abgedruckt, der das Ziehen von Ebenen ermöglicht:

169

Websites in Bewegung – clientseitige Verhaltensweisen

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL, cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0 //Copyright 1998 Macromedia, Inc. All rights reserved. var i,j,aLayer,retVal,curDrag=null, NS=(navigator.appName=='Netscape'), curLeft, curTop; if (!document.all && !document.layers) return false; retVal = true; if(!NS && event) event.returnValue = true; if (MM_dragLayer.arguments.length > 1) { curDrag = MM_findObj(objName); if (!curDrag) return false; if (!document.allLayers) { document.allLayers = new Array(); with (document) if (NS) { for (i=0; i document.MM_maxZ) document.MM_maxZ = aLayerZ; var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1); if (aLayer.MM_dragOk != null && isVisible) with (aLayer) { var parentL=0; var parentT=0; if (!NS) { parentLayer = aLayer.parentElement; while (parentLayer != null && parentLayer.style.position) { parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop; parentLayer = parentLayer.parentElement; } } var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft); var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);

170

Clientseitige Verhaltensweisen

var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth); var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight); if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } } if (curDrag) { document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE); curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft; curTop = (NS)?curDrag.top:curDrag.style.pixelTop; MM_oldX = mouseX – curLeft; MM_oldY = mouseY – curTop; document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false; if(curDrag.MM_toFront) { eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1'); if (!curDrag.MM_dropBack) document.MM_maxZ++; } retVal = false; if(!NS) event.returnValue = false; } } else if (theEvent == 'mousemove') { if (document.MM_curDrag) with (document.MM_curDrag) { var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft; var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop; newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY; if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL); if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR); if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT); if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB); MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT; if (NS) {left = newLeft; top = newTop;} else {style.pixelLeft = newLeft; style.pixelTop = newTop;} if (MM_dragJS) eval(MM_dragJS); retVal = false; if(!NS) event.returnValue = false; } } else if (theEvent == 'mouseup') { document.onmousemove = null; if (NS) document.releaseEvents(Event.MOUSEMOVE); if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS if (document.MM_curDrag) with (document.MM_curDrag) { if (typeof MM_targL =='number' && typeof MM_targT == 'number' && (Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+ Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) { if (NS) {left = MM_targL; top = MM_targT;} else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;} MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; } if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS); if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;} retVal = false; if(!NS) event.returnValue = false; } document.MM_curDrag = null; } if (NS) document.routeEvent(objName); } return retVal; }

Wenn Sie bis jetzt alle Übungen erfolgreich mitgemacht haben, sind Sie mit allem ausgerüstet, um Ihre Webanwendungen um dynamische Objekte zu erweitern. Nun ist es an der Zeit, Sie mit der letzten Möglichkeit von UltraDev bekannt zu machen, Objekten ein bestimmtes Verhalten zuzuweisen, einem Werkzeug, das ebenso mächtig wie leicht zu bedienen ist.

171

Websites in Bewegung – clientseitige Verhaltensweisen

4.3

Mit Zeitleisten arbeiten

Wenn Sie schon mit Flash oder QuickTime gearbeitet haben, ist die Zeitleiste für Sie nicht Neues mehr. Zeitleisten dienen nicht so sehr dazu, um auf Aktionen, die der Anwender auf der Webseite ausführt, zu reagieren, sondern um die Ausführung bestimmter Aktionen abhängig vom Zeitpunkt zu steuern. Mit UltraDev können Sie Zeitleistenverhalten definieren, die ausgeführt werden, wenn die Seite geladen wird oder andere auslösende Ereignisse auftreten, ganz nach Belieben und Erfordernis. Die einzige Warnung, die ich in diesem Zusammenhang aussprechen möchte, ist die, dass auch hier eine übermäßige Verwendung dieses Effekts den Anwender eher irritiert als ihm nützt.

Der Zeitleisteninspektor Haupteinsatzgebiet des Zeitleisteninspektors ist die Animation von Ebenen. Hier kann er seine Stärken auch am besten ausspielen. Sie können damit zwar auch Grafiken animieren, doch haben Sie in diesem Fall nicht dieselben Möglichkeiten der Steuerung wie bei der Verwendung von Ebenen. Daher würde ich Ihnen empfehlen, grundsätzlich immer mit Ebenen zu arbeiten und die zu animierenden Grafiken in Ebenen einzusetzen. Für meine erste Demonstration des Zeitleisteninspektors möchte ich einen Ball über den Bildschirm zu seiner Endposition neben dem Logo meiner Website hüpfen lassen. Meine Startseite beinhaltet lediglich die Ebene mit der Grafik und dem Text, der auf der Seite erscheinen soll. Abb. 4.15 zeigt die Ausgangsposition der Elemente. Legen Sie ein ähnliches Dokument mit einer Ebene an, in die Sie eine beliebige Grafik einfügen. Wenn Sie alle nötigen Bestandteile für eine Animation zusammen haben, öffnen Sie über das Menü FENSTER > ZEITLEISTEN den Zeitleisteninspektor. Die leere StandardZeitleiste sehen Sie in Abb. 4.16. Bevor wir irgendetwas in die Zeitleiste einsetzen, sollten wir uns mit ihrer grundsätzlichen Funktionsweise bekannt machen. Da ist die zunächst die horizontale Reihe von Zahlen im Fenster. Diese Zahlen stehen für die Frames oder Schlüsselbilder, d.h. die einzelnen Phasen der Animation, die Sie erstellen. Sie können jedes Schlüsselbild in der Zeitleiste durch Klick auf die zugehörige Zahl anspringen. Eine roter Zeiger, der so genannte Wiedergabekopf, zeigt an, an welcher Stelle der Zeitleiste Sie sich befinden. Die vertikal angeordneten Zahlen links in der Palette stehen für die einzelnen Spuren der Zeitleiste. Diese Spuren oder Animationskanäle können Objekte aufnehmen, die simultan per Zeitleiste animiert werden. Über dem Wiedergabekopf liegt ein separater Kanal, der mit einem V bezeichnet ist. Hierbei handelt es sich um den Verhaltenskanal. Wenn Sie ein Schlüsselbild im Verhaltenskanal markieren, können Sie die Verhaltenspalette öffnen und diesem Schlüsselbild eine Aktion zuweisen. Über die Zeitleiste können Sie all jene Aktionen steuern, die sonst durch Maus-Rollover, Klicken oder andere Ereignisse ausgelöst werden.

172

Mit Zeitleisten arbeiten

Abbildung 4.15: Problemlose Animation von Ebenen mit der Zeitleiste

Im Kopf der Zeitleiste finden sich verschiedene Kontroll- und Navigationselemente. Da Sie pro HTML-Dokument mehrere Zeitleisten in Abhängigkeit von bestimmten Verhaltensweisen erzeugen können, empfiehlt es sich, jeder Zeitleiste einen eindeutigen Namen zu geben, um sie später nicht durcheinander zu bringen. Durch Klick auf den kleinen Pfeil öffnet sich ein Popup-Menü, aus dem Sie schnell die gewünschte Zeitleiste auswählen können.

Abbildung 4.16: Mit der Zeitleiste Aktionen zeitgesteuert auslösen

Die Buttons rechts davon funktionieren ähnlich wie die Steuerung eines Videorecorders. Der Rückspulknopf bewegt den Wiedergabekopf zum ersten Bild in der Zeitleiste zurück. Mit den Links- und Rechts-Pfeilen können Sie jeweils ein Bild zurück- bzw. vorspringen. Um schnell zu einem bestimmten Schlüsselbild zu springen, geben Sie einfach seine Nummer in das Feld zwischen diesen Pfeilen ein und das gewünschte Bild wird sofort angefahren. Wenn Sie auf den Wiedergabekopf klicken und ihn mit gedrückter Maustaste verschieben, können Sie Ihre Animation in Echtzeit betrachten und ihre Wirkungsweise beurteilen.

173

Websites in Bewegung – clientseitige Verhaltensweisen

Damit eine Animation flüssig abgespielt wird, müssen Sie im Eingabefeld BPS (Bilder pro Sekunde) die Framerate anpassen. Eine Framerate von 15 bedeutet, dass 15 Schlüsselbilder pro Sekunde abgespielt werden. Sollten mit diesem Defaultwert Ihre Animation allzu holprig geraten, erhöhen Sie die Framerate auf 30 Bps. Die Zeitleiste wird dadurch feiner unterteilt, sodass Sie die jeweilige Position des Objekts genauer festlegen können, was in einem runderen Bewegungsablauf resultiert. Als Letztes können Sie noch die Kontrollfelder AUTO-WDG und SCHLEIFE aktivieren. Mit AUTO-WDG fügen Sie dem -Tag ein onLoad-Ereignis hinzu, das bewirkt, dass die Animation abgespielt wird, sobald die Seite vollständig geladen ist. Die Option SCHLEIFE bewirkt, dass eine Animation immer wieder von vorne abgespielt wird, sobald sie am letzten Bild angekommen ist – hierzu wird im Verhaltenskanal eine entsprechende Anweisung (Gehe zu ZEITLEISTENBILD) in das letzte Schlüsselbild der Animation eingesetzt. Soll eine geloopte Animation sauber ablaufen, sollte das Objekt im letzten Schlüsselbild wieder auf der gleichen Position stehen wie im ersten Schlüsselbild. Andernfalls hat der Betrachter den Eindruck, dass das Objekt planlos auf dem Monitor herumhüpft.

Schlüsselbilder für eine Animation definieren Einfache Animationen lassen sich mit einigen wenigen Mausklicks erzeugen. Sie markieren ein bestimmtes Schlüsselbild in der Zeitleiste und platzieren die Ebene an der gewünschten Position. Alle nötigen Zwischenbilder berechnet UltraDev mit Fleiß und JavaScript. Ein praktisches Beispiel: Sie möchten eine Ebene animieren. Markieren Sie zuerst die entsprechende Ebene und klicken Sie dann auf den Pfeil rechts im Zeitleisteninspektor. Wählen Sie aus dem Popup-Menü den Befehl OBJEKT HINZUFÜGEN (Alternativ: Menü MODIFIZIEREN > ZEITLEISTE > OBJEKT IN ZEITLEISTE EINFÜGEN oder Kontextmenü IN ZEITLEISTE EINFÜGEN). In Kanal 1 sollte nun Ihre Ebene angezeigt werden. Wenn Sie möchten, können Sie die Ebene auch in andere Kanäle verschieben. Standardmäßig werden zwei Schlüsselbilder erzeugt: das Start- und das End-Schlüsselbild. Schlüsselbilder werden im jeweiligen Kanal durch einen weißen Ring erkennbar gemacht.

Schlüsselbilder hinzufügen und entfernen Für unsere erste Animation setzen Sie das End-Schlüsselbild bitte auf Frame 60. So haben wir genügend Ellbogenfreiheit bei unserer Arbeit. Markieren Sie nun in dem Kanal, in dem die zu bearbeitende Ebene liegt, Frame 15, und wählen Sie im Popup-Menü der Palette den Befehl KEYFRAME HINZUFÜGEN. (Die Begriffe »Keyframe« und »Schlüsselbild« werden von UltraDev in derselben Bedeutung nebeneinander verwendet. In der Hilfefunktion ist meist von Schlüsselbildern die Rede, in den Menüs von Keyframes.) Fügen

174

Mit Zeitleisten arbeiten

Sie auch bei Bild 30 und 45 Keyframes ein. Haben Sie versehentlich zu viele Keyframes gesetzt, können Sie sie mit dem Befehl KEYFRAME ENTFERNEN aus dem Palettenmenü entfernen. Nun können Sie anhand dieser Keyframes die Position der Ebene auf der Seite definieren. Ich möchte mein Logo um den Text auf meiner Seite kreisen lassen. Wenn Sie die Keyframes für Ihre Animation setzen, wird in der Dokumentansicht ein Pfad gezeichnet, der den Bewegungsablauf der Ebene symbolisiert. Abb. 4.17 zeigt den Pfad und die Zeitleiste, nachdem ich meine Animation fertig erstellt habe. Vergessen Sie nicht, die Option AUTO-WDG zu aktivieren, damit Ihre Animation abgespielt wird, wenn die Seite in den Browser geladen wird.

Abbildung 4.17: Zeitleiste und Bewegungspfad einer einfachen Animation

Komplexe Bewegungspfade mühelos erstellen Das war doch gar nicht so tragisch, oder? Aber es gibt noch eine einfachere Methode, um ein Objekt zu animieren. Mit ruhiger Hand und einer klaren Vorstellung vom Ablauf der Animation können Sie ein Objekt einfach den gewünschten Bewegungspfad entlang ziehen, während UltraDev die erforderlichen Schlüsselbilder automatisch erzeugt. Für diese Art der Animationserstellung brauchen wir ein leeres Arbeitsfenster. Entweder öffnen Sie ein neues Dokument mit einer Ebene oder Sie löschen den soeben erstellten Bewegungspfad in der Zeitleiste. Um eine Animation zu löschen, markieren den betreffenden Kanal per Mausklick und löschen die Animationsleiste über den Befehl ZEITLEISTE ENTFERNEN im Palettenmenü.

175

Websites in Bewegung – clientseitige Verhaltensweisen

Bewegungspfad aufzeichnen Markieren Sie in der Entwurfsansicht die Ebene, deren Bewegungspfad Sie aufzeichnen wollen, und aktivieren Sie den Befehl PFAD DER EBENE AUFZEICHNEN im Palettenmenü des Zeitleisteninspektors. Wechseln Sie wieder in die Entwurfsansicht und ziehen Sie die Ebene mit ruhiger Hand den Bewegungspfad entlang, dem die spätere Animation folgen soll.

Abbildung 4.18: Komplexe Animationen lassen sich durch Aufzeichnung des Bewegungspfades leicht erstellen.

Während Sie die Ebene verschieben, werden auf dem Monitor graue Punkte angezeigt, die die Richtung bzw. den Richtungswechsel Ihrer Ziehbewegung aufzeichnen. Wenn Sie die Ebene ablegen, wird der Pfad gefüllt und geglättet. Es ist aber mehr als schwierig, per Maus die ideale Bewegungskurve zu zeichnen, sodass UltraDev vermutlich weit mehr Schlüsselbilder in die Zeitleiste eingefügt hat, als tatsächlich nötig sind. Handarbeit ist also angesagt, um den Bewegungspfad nachträglich zu optimieren. Markieren Sie überflüssige Schlüsselbilder in der Zeitleiste und löschen Sie sie. Außerdem können Sie einzelne Schlüsselbilder anfahren und die Position der Ebene nachträglich noch feintunen. Ich habe die Hüpfbewegung eines Balls erzeugt, indem ich die Abbildung mehrfach vom unteren zum oberen Rand der Arbeitsfläche verschoben und die Eckpunkte etwas abgerundet habe. In Abb. 4.18 sehen Sie den aufgezeichneten Bewegungspfad und die zugehörige Zeitleiste.

176

Flash-Elemente mit UltraDev

Weitere Funktionen der Zeitleiste Die Mehrzahl der im Popup-Menü der Zeitleiste enthaltenen Befehle erklären sich von selbst. Es folgt eine Übersicht der Funktionen, die wir bis jetzt noch nicht besprochen haben: 쐽

FRAME HINZUFÜGEN – Nicht zu verwechseln mit der Funktion KEYFRAME HINZUFÜGEN. Fügt der Zeitleiste einen einfachen Frame hinzu. Wenn Sie eine Animation verlängern möchten, aber nicht alle Schlüsselbilder von Hand verschieben wollen, fügen Sie so viele Frames hinzu, bis die Animation die gewünschte Dauer hat.

쐽

FRAME ENTFERNEN – Löscht den markierten Frame.

쐽

OBJEKT ÄNDERN – Weist einem erstellten Bewegungspfad ein anderes Objekt zu, ohne den Bewegungspfad selbst zu verändern. Es öffnet sich das Dialogfenster OBJEKT ÄNDERN, in dem Sie aus einem Dropdown-Menü das neue Objekt auswählen.

쐽

OBJEKT HINZUFÜGEN/ENTFERNEN – Über diese beiden Funktionen setzen Sie ein Objekt in die Zeitleiste ein bzw. löschen es daraus.

쐽

VERHALTEN HINZUFÜGEN/ENTFERNEN – Eines der stärksten Features der Zeitleiste. Ermöglicht z.B. das Öffnen von Popup-Fenstern oder weiteren Zeitleisten. Mit dieser Funktion können Sie über die Zeitleiste jede Aktion steuern, für die sich eine Verhaltensweise schreiben lässt.

쐽

ZEITLEISTE HINZUFÜGEN/ENTFERNEN/UMBENENNEN – Diese Befehle tun genau das, was ihr Name sagt. Diese Funktionen brauchen Sie nur, wenn Sie mit mehreren Zeitleisten arbeiten.

Die Funktionalität von Zeitleisten bekommen Sie am besten in Griff, wenn Sie ausgiebig damit herumexperimentieren. Die Zeitleiste ermöglicht die Realisierung von Effekten, die vorher nur unter Verwendung von Flash oder anderen Plug-Ins möglich waren. Der Kreativität sind kaum Grenzen gesetzt: Lassen Sie beispielsweise gesteuert von Verhaltensweisen Sounddateien abspielen, während eine Animation abläuft – und zu all dem genügt ein einziges HTML-Dokument!

4.4

Flash-Elemente mit UltraDev

Mit UltraDev 4.0 lassen sich spezielle dynamische Objekte so einfach erzeugen wie HTML-Elemente. Flash ist ein sehr viel verwendetes Animationsprogramm, mit dem sich ressourcenschonende, schnell ladende Vektoranimationen erstellen lassen. Im Gegensatz zu den herkömmlichen animierten GIFs oder eingebetteten Videos benötigen FlashMovies nur sehr wenig Speicherplatz und ermöglichen beeindruckende Effekte.

177

Websites in Bewegung – clientseitige Verhaltensweisen

Macromedia hat die Objektpalette von UltraDev um zwei Funktionen erweitert, die einfache Flash-Elemente automatisch erzeugen. Sie müssen dazu weder das Programm selbst haben noch wissen, wie man damit arbeitet. 쐽

FLASH-SCHALTFLÄCHE EINFÜGEN – Flash-Buttons funktionieren wie mit einer Grafik erstellte Rollover-Buttons. Sie können jedoch die Größe flexibel anpassen und jeden auf Ihrem Rechner installierten Font verwenden, zur Markierung des Rollover-Status können auch Farbverläufe eingesetzt werden.

쐽

FLASH-TEXT EINFÜGEN – Die Möglichkeiten von Flash-Text beginnen dort, wo HTML-formatierter Text seine Grenzen findet. Sie sind nicht mehr auf ein paar Schriften bzw. Schriftgrößen eingeschränkt, sondern können jeden auf Ihrem Rechner installierten Font in beliebiger Größe verwenden. Der eingegebene Text lässt sich außerdem mit anderen Dokumenten verlinken.

Lassen Sie uns diese Features nun einmal ausprobieren. Sie werden staunen, wie leicht es ist, Ihre Site mit Flash-Elementen anzureichern.

Flash-Schaltflächen Um Flash-Schaltflächen auf Ihre Seite zu bringen, klicken Sie entweder auf das Icon FLASH-SCHALTFLÄCHE EINFÜGEN in der Objektpalette oder wählen Sie EINFÜGEN > INTERAKTIVE BILDER > FLASH-SCHALTFLÄCHE. Es macht nichts, wenn die Einfügemarke nicht dort steht, wo die Schaltfläche später hin soll. Sie können das Element, nachdem es eingefügt wurde, jederzeit in vollem Umfang editieren.

Abbildung 4.19: Wählen Sie Form und Beschriftung der FlashSchaltfläche.

178

Flash-Elemente mit UltraDev

Wenn Sie den Befehl FLASH-SCHALTFLÄCHE EINFÜGEN aktiviert haben, öffnet sich die in Abb. 4.19 gezeigte Dialogbox. Hier konfigurieren Sie das Verhalten des Buttons. Das Feld BEISPIEL zeigt ein Muster des späteren Buttons. Die Ansicht des Musters verändert sich nicht, wenn Sie Ihre persönlichen Einstellungen anpassen. Wählen Sie zuerst aus der Scrollliste einen passenden Stil aus – das Angebot geht von kreativ bis sachlich. Wenn Sie einen Stil ausgesucht haben, geben Sie in das Feld SCHALTFLÄCHENTEXT den Text ein, mit dem die Schaltfläche beschriftet werden soll, und weisen Sie ihm über das Dropdown-Menü SCHRIFT einen Schriftschnitt zu. Im Feld GRÖSSE geben Sie die gewünschte Größe ein. Im Feld HYPERLINK setzen Sie den Pfad auf die Datei, die geöffnet werden soll, oder wählen mit Klick auf DURCHSUCHEN die gewünschte Datei Ihrer Site. Über das DropdownMenü ZIEL stellen Sie ein, in welchem Fenster der Link geöffnet werden soll. Als letzten Schritt bestimmen Sie die Hintergrundfarbe des Buttons sowie den Namen, unter dem er abgespeichert werden soll. Die endgültige Flash-Datei kann mehr Platz beanspruchen als der eigentliche Button. Stellen Sie daher unter HG-FARBE für den umgebenden Hintergrund des Buttons eine passende Farbe ein. Wenn Sie mit Ihrem Werk zufrieden sind, brauchen Sie ihm nur noch einen Namen zu geben, doch wenn Sie möchten, weist UltraDev der Datei automatisch einen Namen zu. Klicken Sie nun noch auf ANWENDEN, um dem Button die getroffenen Einstellungen zuzuweisen. Ist die Flash-Schaltfläche ins Dokument eingefügt, können Sie sie auswählen und mithilfe der Anfasser auf jede beliebige Größe skalieren. Da Flash-Schaltflächen vektorbasiert sind, leidet die Auflösung darunter nicht und sie werden immer gleich scharf dargestellt. Durch Doppelklick auf den Button öffnet sich wieder das Dialogfenster FLASH-SCHALTFLÄCHE EINFÜGEN, sodass Sie ihn jederzeit editieren können.

Flash-Text Flash-Text funktioniert nach demselben Prinzip wie Flash-Schaltflächen und erlaubt das einfache Einsetzen von hochauflösendem Vektortext in ein Dokument. Klicken Sie hierzu entweder auf das Icon FLASH-TEXT EINFÜGEN in der Objektpalette oder wählen Sie EINFÜGEN > INTERAKTIVE BILDER > FLASH-TEXT. Es öffnet sich die in Abb. 4.20 gezeigte Dialogbox, über die Sie Flash-Text editieren. Dieses Fenster bietet ähnliche Einstellungsmöglichkeiten, wie wir sie schon bei den FlashSchaltflächen kennen gelernt haben. Sie können Font, Schriftgröße und Schriftschnitt sowie die Textausrichtung wählen. Wenn Sie im Text einen Link setzen wollen, können Sie außerdem eine Rollover-Farbe bestimmen.

179

Websites in Bewegung – clientseitige Verhaltensweisen

Abbildung 4.20: Die Funktion Flash-Text einfügen erzeugt hochauflösenden Vektortext.

Geben Sie im Feld TEXT den Text ein, der im Flash-Format abgespeichert werden soll. Ist das Kontrollfeld SCHRIFT ZEIGEN aktiviert, zeigt die Vorschau den Text in der gewünschten Schrift an. Wollen Sie einen Link setzen, geben Sie in den entsprechenden Feldern den Pfad und, falls nötig, das Ziel ein. Schließlich können Sie wie bei den Flash-Schaltflächen noch eine Hintergrundfarbe bestimmen und einen Dateinamen vergeben. Letzteres können Sie auch wieder vom Programm erledigen lassen. Im Gegensatz zu HTML-formatiertem Text können Sie Flash-Text in der Dokumentansicht beliebig proportional oder ungleichmäßig skalieren. Wollen Sie Flash-Text editieren, öffnen Sie per Doppelklick auf den Text das zugehörige Dialogfenster und verändern die gewünschten Einstellungen. Abb. 4.21 zeigt ein Dokument mit eingefügtem Flash-Text und Flash-Schaltfläche. Bevor Sie jedoch der Versuchung erliegen, nur noch mit den vektorbasierten Werkzeugen von UltraDev zu arbeiten, sollten Sie sich erst über Ihre Zielgruppe Gedanken machen. Nicht in allen Browsern ist das Flash-Plug-In installiert, und wenn Sie die Navigation Ihrer Seiten ausschließlich auf Flash-Text oder -Schaltflächen aufbauen, laufen Sie Gefahr, zumindest einen Teil Ihrer Adressaten auszusperren.

180

Weitere dynamische Elemente

Abbildung 4.21: Flash-Text und Flash-Schaltflächen erlauben die Verwendung hochauflösender Vektorelemente direkt in der HTML-Entwicklungsumgebung.

4.5

Weitere dynamische Elemente

Mit den bisher vorgestellten Lösungen sind die Möglichkeiten von UltraDev, dynamische Elemente auf die Website zu bringen, noch nicht erschöpft. In diese Kategorie fallen z.B. ausgewachsene Flash-Animationen oder Java-Applets. Mit Java können Sie komplette interaktive Programme in Ihre Website einbinden. Es gibt so gut wie nichts, das mit diesem Animationswerkzeug bzw. mit dieser Programmiersprache nicht möglich wäre. Im Unterschied zu den weiter oben vorgestellten Techniken brauchen Sie hier jedoch spezielle Plug-Ins, um die erstellten Anwendungen abspielen zu können, und die Anwendungen selbst müssen Sie außerhalb von UltraDev erstellen. Bestimmte Elemente lassen sich in der Dokumentansicht direkt abspielen, wenn Sie den Button ABSPIELEN im Eigenschafteninspektor anklicken. Wenn Sie eines dieser Elemente auf einer Webseite verwenden wollen, tun Sie das über EINFÜGEN > MEDIEN, wobei Sie im Untermenü MEDIEN dann den entsprechenden Typ auswählen, im Falle eines Flash-Movies also FLASH. Der eingefügte Medientyp wird als graues Rechteck mit dem entsprechenden Symbol dargestellt, wie in Abb. 4.22 gezeigt. Das dynamische Element selbst wird also nicht angezeigt, Sie können seine Attribute aber mit dem Eigenschafteninspektor bearbeiten und um den Platzhalter herum wie gewohnt Ihre sonstigen Elemente platzieren. Wenn ich auf meinen Websites spezielle dynamische Elemente brauche, verwende ich nach Möglichkeit lieber Java-Applets als irgendwelche proprietären Lösungen, die ohne eigenes Plug-In nicht laufen. Beim Einsatz von Java sollte man aber auf eine gewisse Verhältnismäßigkeit der Mittel achten, denn nur für ein paar animierte grafische Effekte Java zu bemühen, ist, als wollte man Reisnägel mit dem Dampfhammer einschlagen. Nichtsdestotrotz, falls Sie Ihre Website mit ein paar Java-Applets aufpeppen möchten, finden Sie unter http://www.gamelan.com komplette Bibliotheken zum herunterladen.

181

Websites in Bewegung – clientseitige Verhaltensweisen

Abbildung 4.22: Nicht alle dynamischen Elemente sind so pflegeleicht wie DHTMLEffekte.

4.6

JavaScript für Fortgeschrittene

UltraDev bietet JavaScript-Programmierern einige nützliche Features, um JavaScript-Code in HTML-Dokumenten zu editieren und auf Fehler zu überprüfen. Wenn Sie Programmierer sind, werden Ihnen diese Funktionen von anderen Entwicklungsumgebungen bzw. Debuggern her vertraut sein. Öffnen Sie ein neues Dokument, setzen ein paar Verhaltensweisen und schalten Sie in die Codeansicht um. In der Werkzeugleiste sehen Sie eine Schaltfläche mit geschwungenen Klammern: {}. Dieses Menü listet alle verwendeten JavaScripts auf. Die ausgewählte Funktion wird direkt gezielt angesteuert. Zur gezielten Einkreisung von Fehler können Sie außerdem im Code Haltepunkte setzen. Wenn Sie an der Stelle, an der die Einfügemarke steht, einen Haltepunkt setzen wollen, wählen Sie im Menü den Befehl HALTEPUNKT SETZEN. Am Kopf dieser Zeile wird dann ein roter Punkt angezeigt. An dieser Stelle wird die Ausführung des Programms gestoppt, sodass Sie die aktuellen Werte aller Variablen überprüfen und eventuelle Fehler einkreisen können. Um Haltepunkte zu löschen, wählen Sie im entsprechenden Pulldown-Menü den Befehl ALLE HALTEPUNKTE ENTFERNEN. Wenn Sie die nötigen Haltepunkte im JavaScript-Code gesetzt haben, wählen Sie den Befehl DATEI > DEBUG IN BROWSER. (Sie erreichen die Funktion auch über das GlobusIcon der Werkzeugleiste.) Daraufhin öffnet sich der gewählte Browser und arbeitet das Script ab, während gleichzeitig das in Abb. 4.23 gezeigte Fenster JAVASCRIPT-DEBUGGER angezeigt wird.

182

JavaScript für Fortgeschrittene

Abbildung 4.23: JavaScript-Code auf Fehler überprüfen mit dem Debugger

Im Kopf dieses Fensters sehen Sie mehrere Icons, über die Sie den Prüfdurchlauf durch das Script steuern. Wie bereits erwähnt, stoppt der Prüfdurchlauf, wenn das Programm bei einem Haltepunkt ankommt. Diese Schaltflächen erlauben jedoch noch weiter gehende Kontrollen. Es folgt (von links nach rechts) eine Übersicht über die Schaltflächen und ihre Funktionen: 쐽

AUSFÜHREN – Startet das Script. Arbeitet das Programm von der ersten Zeile an ab.

쐽

DEBUG-VORGANG BEENDEN – Beendet den Debugging-Durchlauf und schließt den Debugger.

쐽

HALTEPUNKT SETZEN/ENTFERNEN – Je nachdem, ob ein Haltepunkt gesetzt ist oder nicht, wird er gelöscht bzw. hinzugefügt.

쐽

ALLE HALTEPUNKTE ENTFERNEN – Löscht alle gesetzten Haltepunkte.

쐽

PROZEDURSCHRITT – Überspringt eine Zeile oder eine Funktion, sodass sie nicht ausgeführt wird.

쐽

EINZELSCHRITT – Springt eine Funktion an und arbeitet sie ab.

쐽

PROZEDUR ABSCHLIESSEN – Unterbricht die Abarbeitung einer Funktion (Gegenstück zu EINZELSCHRITT).

183

Websites in Bewegung – clientseitige Verhaltensweisen

Sie können ferner das Verhalten von Variablen in Funktionen überwachen, indem Sie sie in das untere Feld des Debugging-Fensters eintragen. Klicken Sie auf das Plussymbol (+), und geben Sie den Namen der Variablen ein. Wenn das Programm abgearbeitet wird, wird der jeweils aktuelle Wert der Variablen in dem Feld neben ihrem Namen angezeigt. Der JavaScript-Debugger ist für Programmierer eine fantastische Erweiterung der Entwicklungsumgebung von UltraDev. Was Cross-Browser-Kompatibilität und die Beachtung der zahlreichen Fallstricke angeht, ist und bleibt JavaScript eine der verzwicktesten Programmiersprachen.

4.7

Zusammenfassung

Es gibt kaum eine Website, die heute ohne dynamische Elemente arbeitet. Wenn sich auf Ihrer Site nicht irgendwas bewegt, haben Sie die Zeichen der Zeit noch nicht erkannt. Nun, ganz so schlimm ist es noch nicht, aber die Dinge bewegen sich in diese Richtung. Darum wird es zusehends wichtiger, dass man über das entsprechende Know-how verfügt, um DHTML-basierte Websites erstellen zu können. Heute haben Sie gelernt, wie Sie mit UltraDev Ihren Seiten automatisch dynamische Verhaltensweisen zuweisen können, die ohne die programminternen Funktionen ein erhebliches Maß an JavaScript-Programmierung erfordern würden. Mit ein paar Mausklicks erstellen Sie innerhalb Ihrer gewohnten HTML-Umgebung komplexe Animationen und verschiebbare Elemente – ohne andere Animations- oder DesignTools zu benötigen. Wer Flash-Elemente auf seine Seiten bringen will, kann mit der Objektpalette ganz einfach Flash-Buttons bzw. Flash-Text erstellen. Im Gegensatz zu HTML-Text oder den Pixelgrafiken im jpg- bzw. gif-Format sind Flash-Elemente vektorbasiert und lassen sich bei gleich bleibender Qualität auf jede beliebige Größe skalieren.

4.8 F

Werden der Netscape Navigator und der Internet Explorer bei der Implementierung von JavaScript jemals das gleiche DOM verwenden? A

184

Fragen und Antworten

Darauf würde ich mich nicht verlassen. Das Document Object Model des Netscape Navigator unterscheidet sich erheblich von demjenigen des Internet Explorer. Wenn Sie Anwendungen gezielt für den Internet Explorer 5.0 oder höher ver-

Workshop

wenden, haben Sie Zugriff auf eine Menge von Verhaltensweisen, die mit dem Netscape Navigator nicht funktionieren. Ich möchte Ihnen auf alle Fälle raten, so kompatibel wie möglich zu bleiben. F

Ich möchte eine bestimmte Verhaltensweise verwenden, die standardmäßig nicht vorhanden ist. Wie kann ich sie hinzufügen? A

F

Kann ich DHTML-Effekte aus einer Anwendung kopieren und in UltraDev einsetzen und bearbeiten? A

F

Sie könnten sich auf der Website von Macromedia umsehen und weitere Verhaltensweisen herunterladen. Wie man Sie einbindet, lernen wir in Tag 5, »Wieder verwertbare Elemente und Erweiterungsmodule«. Wenn Sie programmieren können, sollten Sie sich auch einmal in der Hilfefunktion das Kapitel »Dreamweaver erweitern« ansehen.

Nein, das geht nicht. Sie könnten zwar JavaScript-Code in UltraDev einsetzen, doch können Sie ihn nicht mit der Zeitleiste oder anderen Werkzeugen bearbeiten.

Verwende ich besser DHTML oder ein Plug-In? A

4.9

Das liegt ganz bei Ihnen. Ist die Wahrscheinlichkeit größer, dass Ihre Zielgruppe das erforderliche Plug-In installiert hat oder dass sie einen 4.0-Browser oder höher installiert hat? Bevor Sie eine Anwendung entwickeln, sollten Sie versuchen, diesbezügliche Informationen zu bekommen.

Workshop

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

Quiz 1. Was versteht man unter Verhaltensweisen? 2. UltraDev zeigt manche Ereignisse in Klammern an. Was ist der Unterschied zu anderen Ereignissen? 3. Wenn Sie die Ziehbewegung einer Ebene auf links und rechts einschränken wollen, welche Werte müssen Sie dann in die entsprechenden Felder eingeben?

185

Websites in Bewegung – clientseitige Verhaltensweisen

4. Was müssen Sie tun, damit Ebenen sofort verschiebbar sind, wenn die Seite geladen wird? 5. Sie haben eine Animation mit der Zeitleiste erstellt. Was können Sie tun, damit sie flüssiger abläuft? 6. Mit welchem Werkzeug können Sie beliebig skalierbaren Vektortext erstellen?

Übungen 1. Erzeugen Sie eine Verhaltensweise, die mit einem Rollover zwei Grafiken auf einmal austauscht. Mit der vordefinierten Rollover-Funktion kann nur das Bild ausgetauscht werden, das mit der Maus überfahren wird. 2. Erstellen Sie Ihre eigene DHTML-Animation eines hüpfenden Balls. Erweitern Sie die Animation um ein Aufprallgeräusch, das jedes Mal wiedergegeben wird, wenn die entsprechenden Frames abgespielt werden. 3. Forschen Sie ein bisschen herum, welche anderen Animationstechniken Sie durch die Verwendung von Plug-Ins möglich werden. Ein paar gute Beispiele finden Sie unter folgenden Adressen: Gamelan Java Collection, http://www.gamelan.com, und Joe Cartoon's Flash-Animationen, http://www.joecartoon.com. Auch die Website von Macromedia, http://www.macromedia.com, ist eine gute Anlaufstelle.

186

Wieder verwertbare Elemente und Erweiterungsmodule

5

Wieder verwertbare Elemente und Erweiterungsmodule

In den ersten vier Tagen haben Sie so ziemlich alles über den Umgang und die Verwendung der Werkzeugpaletten von UltraDev gelernt und wissen nun, wie Sie damit komplette Websites realisieren können. Auf der nächsten Stufe lernen Sie nun, wie Sie diese Werkzeuge so selten wie möglich benutzen. Damit meine ich natürlich nicht, dass Sie UltraDev jetzt wieder deinstallieren sollen – nein, es geht mir darum, Ihnen zu zeigen, wie Sie das Instrumentarium von UltraDev so effektiv wie möglich einsetzen. Macromedia hat das Programm mit einigen höchst nützlichen Funktionen ausgestattet, die die weit gehende »Wiederverwertung« einmal geschriebenen HTML-Codes ermöglichen. Sie können den Funktionsumfang des Programms durch Einbindung zusätzlicher Verhaltensweisen erweitern und sogar die Oberfläche von UltraDev selbst verändern, indem Sie z.B. neue Befehle in ein Menü integrieren oder die Menüstruktur verändern. Ein Blick auf die Themen des heutigen Tages: 쐽

Strategien für wieder verwertbaren Code. Lernen Sie, wie Sie Ihre Websites optimal strukturieren, um erstellten HTML-Code auch für andere Projekte verwenden zu können.

쐽

Wie Sie mit Stylesheets Ihren Produktionsalltag erleichtern und bessere Cross-Browser-Kompatibilität erreichen

쐽

HTML-Code mit den Bibliotheksfunktionen von UltraDev speichern und mehrfach nutzen

쐽

Sinnvolle Arbeitsteilung durch Verwendung von Vorlagen oder wie sich Designer, Autoren und Programmierer nicht mehr in die Quere kommen

쐽

Arbeitsschritte aufzeichnen und als Makro speichern

쐽

Erweiterung und Anpassung von UltraDev an die eigenen Arbeitsumgebung

5.1

HTML-Code wieder verwenden

Wenn Sie schon an größeren Websites gearbeitet haben, haben Sie vermutlich auch per Ausschneiden und Einfügen Elemente zwischen den einzelnen Seiten hin- und herkopiert, um eine einheitliche Gestaltungslinie einzuhalten. Es gibt viele Möglichkeiten, Websites möglichst ökonomisch und effektiv anzulegen, hierzu gehören sicher auch Frames oder Server-Side-Includes. Aber was ist, wenn sich der Einsatz dieser Techniken verbietet, weil der Webserver Server-Side-Includes nicht unterstützt oder Frames für eine spezielle Anwendung nicht sinnvoll sind? UltraDev verfügt über Funktionen, die den Erstellungsaufwand von Websites deutlich minimieren können und trotzdem zu allen Serverplattformen kompatibel sind. Welche Werkzeuge sind das nun, wie funktionieren sie, wie muss ich meine Site planen, um dieses

188

HTML-Code wieder verwenden

Instrumentarium sinnvoll einsetzen zu können? Mit ein bisschen Vorausplanung werden Sie in Zukunft Sites erstellen, die mit weit weniger Aufwand als bisher zu pflegen und aktualisieren sind – zu Ihrem eigenen Wohle und dem eventueller Nachbearbeiter.

Einheitliche Formatierung mit Stylesheets Werfen Sie einmal einen Blick in Ihren HTML-Code. Wenn Sie Text wie üblich mit HTML-Formaten auszeichnen, dann wimmelt es in der Code-Ansicht nur so von Tags und zugehörigen Attributen wie face, size usw. Verwendet man Text in Tabellen, dann wird das definieren von -Tags für jede einzelne Zelle schnell zur Strafarbeit, abgesehen davon wird auch die Datei schnell aufgebläht. Zudem ist die Einhaltung einheitlicher Textformatierungen über viele Seiten sehr aufwändig und fehleranfällig. Die Formatierung von Text und die Zuweisung von Stilattributen lässt sich zum größten Teil bequem über Cascading Style Sheets (CSS) erledigen. Stylesheets werden von Browsern der 4. Generation (und höher) verstanden und sind so etwas wie eine Formatvorlage. Z.B. könnten Sie über Stylesheets die Darstellung von Text innerhalb des -Tags neu definieren und dem Browser so mitteilen, dass er diesen Text in 10 Punkt Arial darstellen soll. Sie können auch ganz neue Stile definieren und diese den verschiedenen Objekten innerhalb Ihres HTML-Dokuments zuweisen, sei es von Hand oder über die entsprechenden Inspektoren von UltraDev. CSS können für das jeweilige Dokument erstellt werden, oder – was weit sinnvoller ist – in einer externen Datei gespeichert und mit den einzelnen HTML-Dateien innerhalb der Site verlinkt werden. Müssen Sie nun Änderungen an der Textformatierung durchführen, z.B. Times durch Arial ersetzen, müssen Sie nur noch eine Datei, das Stylesheet bearbeiten, und Ihre Änderungen werden sofort in allen Dateien durchgeführt. Darüber hinaus wird es mit Stylesheets möglich, Websites zu gestalten, die auf den unterschiedlichen Plattformen konsistent dargestellt werden. Gestalten Sie eine Website auf dem Mac und schauen Sie sich diese Website dann auf einem PC an – gut möglich, dass das Ergebnis nicht ganz Ihre Absichten widerspiegelt. Gestalten Sie dieselbe Site auf dem PC und öffnen Sie sie dann auf einem Mac – dasselbe in Grün. Abb. 5.1 zeigt, wie eine häufig besuchte Website auf dem Mac aussieht. Abb. 5.2 zeigt dieselbe Site auf einem PC. Beachten Sie die unterschiedliche Menge an Information, die bei gleicher Monitorgröße angezeigt wird. Das größte Problem bei der Entwicklung plattformübergreifender Websites ist die unterschiedliche Auflösung von 96 dpi auf Windowssystemen und von 72 dpi bei Macs. Das hat zur Folge, dass dieselbe Seite auf einem PC wesentlich größer dargestellt wird als auf einem Mac.

189

Wieder verwertbare Elemente und Erweiterungsmodule

Abbildung 5.1: Der Mac stellt Schriften mit 72 dpi dar.

Abbildung 5.2: Windows verwendet Fonts mit 96 dpi.

Über diese Unterschiede in der Auflösung muss ich mich immer wieder wundern. Nach wie vor hängen an den meisten Windows-Rechnern 15“- oder 17“-Monitore – etwas unterdimensioniert für eine Auflösung von 96 dpi. Bei gleicher Monitorgröße ist vom Inhalt einer Webseite auf einem Mac weit mehr zu sehen als auf PCs.

190

HTML-Code wieder verwenden

Durch die Verwendung von CSS lässt sich das Problem der unterschiedlichen Auflösungen umgehen, indem man Fonts nicht eine Größe in Punkt, sondern eine exakte Höhe in Pixel zuweist. Damit lässt sich auf allen Plattformen eine weitgehend identische Darstellung erreichen. Wenn Sie auf den Einsatz von CSS verzichten wollen, weil sie von der anvisierten Browserplattform nicht unterstützt werden, können Sie an ihrer Stelle HTML-Stile verwenden, um Text in Ihren Dokumenten einheitlich zu formatieren, doch arbeiten HTML- Stile mit den üblichen -Tags.

Wiederkehrende Elemente In allen Websites gibt es wiederkehrende Elemente, die über viele Seiten hinweg immer wieder auftauchen: Kopf- und Fußzeilen oder Menüs. Meistens werden diese Elemente auf jeder Seite frisch in HTML codiert. Bei kleineren Sites mag das noch praktikabel sein, doch wenn eine Website erst einmal mehrere Hundert Seiten zählt, wächst sich die Pflege und Aktualisierung solcher Elemente schnell zu einer Sisyphosarbeit aus. Zur Veranschaulichung ein Beispiel aus meiner eigenen Praxis. Ich betreue eine Website mit Veranstaltungshinweisen, die ständig aktualisiert werden. Auf dieser Site gibt es auch ein Archiv, in dem die Covergrafik des einmal jährlich erscheinenden Prospektes veröffentlicht wird. Jede Jahresgrafik bekommt eine eigene Seite und wird mit den Seiten verlinkt, die die vorhergehenden Jahresgrafiken enthalten. Wenn also eine neue Seite hinzukommt, müssen alle bereits vorhandenen mit der neuen Seite verlinkt werden. Angenommen, die Site enthält bereits 20 solcher Archivseiten, müsste ich 20 einzelne Seiten bearbeiten, nur um einen einzigen Link hinzuzufügen. Solche Aktionen lassen sich mit den Bibliotheksfunktionen von UltraDev erheblich rationalisieren. Bibliotheken sind Sammlungen von HTML-Elementen, die beliebig oft auf verschiedenen Seiten verwendet werden können. Wenn Sie ein Element der Bibliothek hinzugefügt haben, können Sie es in jede beliebige Seite einschließen, müssen es aber an einer Stelle bearbeiten. Wenn Sie den Einsatz serverseitiger Dienste wie der erwähnten Server-Side-Includes planen, um eine ähnliche Funktionalität wie durch die Verwendung von Bibliothekselementen zu erreichen, müssen Sie zuerst mit dem zuständigen Webmaster abklären, welche Features vom Server überhaupt unterstützt werden, bevor Sie sich an die Umsetzung machen. Wenn Sie keine Informationen über den künftigen Produktionsserver haben, sollten Sie ausschließlich das Bibliothekssystem von UltraDev einsetzen. Wenn Ihr Webserver Server-Side-Includes (SSI) versteht, sind sie das Mittel der Wahl, um mehrfach verwendbare Komponenten zu erzeugen. Durch SSI werden Dateien kleiner, da diese Komponenten in eigenen HTML-Dokumenten

191

Wieder verwertbare Elemente und Erweiterungsmodule

abgelegt werden und erst bei der Übertragung vom Server in das Dokument eingeschlossen werden. Bibliotheken gestatten dieselbe Flexibilität, nur wird der HTML-Code eines Bibliothekselements automatisch in den Code der jeweiligen Dokumente eingefügt. Dadurch werden die Dateien zwar größer, aber Sie sind nicht von der Serverplattform und deren Technologie abhängig. Wenn Sie Strukturplan und Navigationsschema Ihrer Website erstellen, überprüfen Sie, ob und welche Elemente auf den einzelnen Seiten wiederkehren und ob diese gegebenenfalls aktualisiert werden müssen. Solche Elemente empfehlen sich zur Aufnahme in das Bibliothekssystem.

Vorlagen Vorlagen sind nicht ganz das Gleiche wie Bibliotheken, sind aber ebenfalls eine Möglichkeit, erstellten HTML-Code wieder zu verwenden. Vorlagen sind, wie der Name schon sagt, Vorlagen oder Musterseiten für eine Website. Angenommen, Sie haben für eine Website ein Musterlayout für eine Produktseite entwickelt, die nun, mit verschiedenen Produkten gefüllt, immer wieder verwendet werden soll. Der gewitzte Webmaster wird nun nicht jedes Mal die ganze Seite komplett neu erstellen wollen, wenn ein neues Produkt dazukommt. Nehmen wir zum Beispiel eine Immobiliensite. Das Layout für die einzelnen Immobilien steht zwar, aber eigentlich wäre es Ihnen am liebsten, wenn nun die Makler die Daten ihrer neuen Objekte selbst einstellen würden. Darum erstellen Sie eine Vorlage, damit die einzelnen Mitarbeiter Inhalte ins Netz stellen können, ohne sich um den HTML-Code kümmern zu müssen. In Vorlagen lassen sich die wichtigen Teile der Seite wie z.B. Menüs gegen versehentliche oder mutwillige Veränderungen schützen, indem man sie für die Bearbeitung sperrt, während die Inhaltsbereiche frei editierbar bleiben. Mit Vorlagen lässt sich die mit der Aktualisierung und Pflege einer Website anfallende Belastung effizient auf mehrere Mitarbeiter verteilen. In Verbindung mit CSS erlauben Vorlagen das Maximum an Kontrolle über den Inhalt und seine Darstellung.

5.2

HTML-Stile

Wenn Sie Schriftstile erzeugen möchten, die auch mit nicht CSS-fähigen Browsern funktionieren, können Sie HTML-Stile mit den standardmäßigen Fontattributen verwenden. Die erzeugten Stile finden Sie unter TEXT > HTML-STILE. In diesem Menü finden Sie einige bereits vordefinierte Stile, die Sie sofort einsetzen können. Markieren Sie den Text, den Sie formatieren möchten, und weisen Sie ihm den gewünschten Stil aus dem Menü zu.

192

HTML-Stile

Um einen neuen Stil zu erzeugen, wählen Sie TEXT > HTML-STILE > NEUER STIL, woraufhin sich das in Abb. 5.3 gezeigte Dialogfenster öffnet.

Abbildung 5.3: HTML-Stile funktionieren in allen Browsern.

Bevor Sie den neuen Stil verwenden können, müssen Sie ein paar Attribute einstellen: 쐽

NAME – Der Name, den Sie Ihrem neuen Stil zuweisen. Wird in im Untermenü HTML-STILE angezeigt.

쐽

ANWENDEN AUF – Hier legen Sie fest, welcher Textbereich formatiert wird: ein ganzer Absatz oder nur der markierte Abschnitt.

쐽

BEIM ANWENDEN – Die Option ZU VORHANDENEM STIL HINZUFÜGEN verbindet den neuen Stil mit bereits bestehenden Stilattributen. Die Option VORHANDENEN STIL LÖSCHEN löscht alle eventuell bestehenden Formatierungen und wendet den Stil auf den Defaultstil an.

쐽

SCHRIFTATTRIBUTE – Hier wählen Sie Schriftart, Größe, Farbe und Schnitt der Schrift.

쐽

ABSATZATTRIBUTE – Wenn Sie einen Absatzstil definieren, wählen Sie hier das Format und die Ausrichtung.

Wenn Sie alle Einstellungen vorgenommen haben, schließen das Fenster mit Klick auf OK, und der Stil steht zur Verfügung.

193

Wieder verwertbare Elemente und Erweiterungsmodule

Es gibt noch einen anderen Weg, HTML-Stile zu erzeugen. Formatieren Sie zunächst den Text im Dokument wie gewünscht. Nun markieren Sie den formatierten Text und rufen die Option NEUER STIL auf. Die Attribute des formatierten Textes werden im Dialogfenster angezeigt, sodass Sie dem Stil nur noch einen Namen zuweisen und ihn dann abspeichern müssen. Auf HTML-Stile haben Sie außer über das Menü TEXT auch über die Palette HTMLSTILE Zugriff. Sie öffnen sie über FENSTER > HTML-STILE. Eine Abbildung dieser Palette sehen Sie in Abb. 5.4. Am Buchstaben- bzw. Absatzsymbol erkennen Sie, ob es sich um einen Auswahl- oder einen Absatzstil handelt.

Abbildung 5.4: Mit der Palette HTML-Stile lassen sich Stile schnell erzeugen, zuweisen, löschen und bearbeiten.

Sie können HTML-Stile einem Text auf zwei Arten zuweisen. Standardmäßig ist das Kontrollfeld ANWENDEN links unten in der Palette aktiviert. Wenn Sie in der Dokumentansicht Text markieren und dann einen Stil aus der Liste auswählen, indem Sie darauf klicken, wird er automatisch auf die Auswahl angewendet. Deaktivieren Sie das Kontrollfeld, wird der Button ANWENDEN aktiv. Um dann einer Auswahl einen Stil zuzuweisen, müssen Sie auf diesen Button klicken. Am rechten unteren Rand der Palette gibt es zwei weitere Schaltflächen, die manchmal recht nützlich sind. Durch Klicken auf das Papier-Icon können Sie einen neuen Stil erzeugen, klicken auf den Abfalleimer löscht den in der Liste markierten Stil. Durch Doppelklick auf einen Stil in der Liste können Sie ihn editieren, doch Vorsicht: Ist das Kontrollfeld ANWENDEN aktiviert, weisen Sie unter Umständen den Stil – statt ihn zu editieren – einem Textabschnitt zu. Um das zu verhindern, deaktivieren Sie das Kontrollfeld. HTML-Stile stehen nur innerhalb der Site, in der sie erstellt wurden, zur Verfügung. Möchten Sie Ihre selbst definierten HTML-Stile auch in anderen Sites verwenden, müssen Sie die Datei styles.xml aus dem Ordner Library in den gleichen Ordner der anderen Site kopieren. Die Stilformate werden im HTML-Dokument unabhängig von der Datei styles.xml angezeigt.

194

Cascading Style Sheets

5.3

Cascading Style Sheets

Cascading Style Sheets oder CSS sind eine prima Sache, die das Leben des Webdesigners um vieles leichter machen können. Im Gegensatz zu HTML-Stilen ermöglichen CSS eine weit bessere Kontrolle über die Elemente einer Seite und Sie können damit Attribute eines Objekts verändern, die über HTML nicht zugänglich sind. Stylesheets sind sehr komplex, und sie von Hand zu editieren ist nicht so spaßig. Es ist nicht so schwierig, ihre Syntax zu verstehen, wohl aber, sämtliche möglichen Attribute und Einstellungen im Kopf zu behalten. Nachstehend eines kleines Beispiel, das die Formatierung von -Tags und -Tags verändert: <style type="text/css">

Mit diesem Stylesheet wird der Font für -Tags auf »Arial, Helvetica, sans serif« gesetzt sowie eine Schriftgröße und -farbe definiert. Das -Tag bekommt ebenfalls dieselbe Fontgruppe zugewiesen, nur wurde eine andere Farbe und eine höhere Schriftgröße gewählt. Jedes HTML-Dokument, das mit diesem Stylesheet verlinkt wird bzw. in das dieses Stylesheet eingefügt wird, erbt diese Eigenschaften. Mit UltraDev wird die Erstellung von CSS bzw. die Neudefinition von Tags zum Kinderspiel – nur ein paar Einträge auswählen, klick, fertig!

Stylesheets verwenden Die Palette CSS-STILE hat große Ähnlichkeit mit der Palette HTML-STILE. Sie können CSS-Stile zwar auch über TEXT > CSS-STILE definieren, doch bietet die Palette CSSSTILE bequemere Möglichkeiten der Einstellung, darum arbeiten wir gleich mit der Palette. Wenn Sie sie noch nicht geöffnet haben, tun Sie das bitte jetzt über FENSTER > CSS-STILE (siehe Abb. 5.5). Im Gegensatz zu den HTML-Stilen gibt es in der CSS-Palette keine vordefinierten Stile. Haben Sie bereits ein Stylesheet erstellt, können Sie es sofort mit Ihrem Dokument verknüpfen. Klicken Sie hierzu rechts unten im Fenster auf das äußerste linke Icon. Es öffnet sich ein Dialogfenster, das Sie auffordert, das Stylesheet auszuwählen. Um ein neues Stylesheet zu erzeugen, klicken Sie auf das Icon NEUER STIL rechts unten in der Palette (ein Blatt Papier mit einem Pluszeichen). Alternativ können Sie auch den entsprechenden Befehl über das Palettenmenü aufrufen (auf den schwarzen Pfeil rechts oben klicken). Daraufhin öffnet sich das in Abb. 5.6 gezeigte Dialogfenster NEUER STIL.

195

Wieder verwertbare Elemente und Erweiterungsmodule

Abbildung 5.5: CSS-Stile lassen sich einem einzelnen Dokument sowie einer ganzen Website zuweisen.

Abbildung 5.6: Wählen Sie den gewünschten Stil und klicken Sie auf OK.

Folgende drei Stiltypen stehen zu Ihrer Auswahl: 쐽

BENUTZERDEFINIERTEN STIL ERSTELLEN (KLASSE) – Benutzerdefinierte Stile werden auf beliebige HTML-Objekte angewandt, doch müssen sie explizit zugewiesen werden. Dem Namen von benutzerdefinierten Stilen muss ein Punkt vorausgehen: .benutzerstil.

쐽

HTML-TAG NEU DEFINIEREN – Wenn Sie ein HTML-Tag neu definieren, setzen Sie einen Defaultstil für dieses Tag, der jedes Mal zum Einsatz kommt, wenn dieses Tag verwendet wird. Wollen Sie diese Einstellungen fallweise überschreiben, müssen Sie einen benutzerdefinierten Stil erstellen.

쐽

CSS-SELEKTOR VERWENDEN – CSS-Selektoren sind Kombinationen mehrerer Tags.

Die mächtigste Funktion in diesem Zusammenhang ist sicher die, benutzerdefinierte Stile erstellen zu können. Ohne dass Sie irgendetwas am HTML-Code verändern, bekommt Ihr Dokument plötzlich einen völlig neuen Look verpasst.

196

Cascading Style Sheets

Sie können Stylesheets an zwei Orten ablegen – einmal in einer externen Datei, zum anderen im aktuellen Dokument selbst. Möchten Sie das Stylesheet als externe Datei speichern, können Sie im Dialogfenster NEUER STIL unter DEFINIEREN IN die Option NEUE STYLESHEET-DATEI wählen. Haben Sie bereits ein Stylesheet mit Ihrem Dokument verknüpft, können Sie auch dieses aus dem Popup-Menü wählen, anstatt ein neues zu erzeugen. Wollen Sie das Stylesheet nur für das aktuelle Dokument erzeugen, wählen Sie die Option NUR DIESES DOKUMENT.

Einen Stil erzeugen Für unseren ersten Stil definieren wir das Tag neu. Wählen Sie HTML-TAG NEU DEFINIEREN, und wählen Sie aus dem Popup-Menü TAG das Tag B. Klicken Sie dann auf OK. 1. Im Listenfeld KATEGORIE können Sie zwischen acht Kategorien von Attributen wählen, die Sie einem Stil zuweisen können. Die am meisten gebräuchliche Kategorie ist TYP. Hier legen Sie sämtliche Schriftattribute fest. Sollte diese Kategorie nicht ausgewählt sein, dann machen Sie das bitte jetzt. Die zugehörige Eingabemaske ist in Abb. 5.7 zu sehen.

Abbildung 5.7: Im Fenster Stildefinition setzen Sie sämtliche Attribute für den Font.

2. Wählen Sie als Schriftgruppe »Arial, Helvetica, sans-serif«, als Schriftgröße stellen Sie 72 Pixel ein, als Stärke wählen Sie »fett«. Sie müssen sich natürlich nicht an diese Werte halten, sondern können sämtliche zur Verfügung stehenden Einstellungen ganz nach Geschmack treffen. Die Qual der Wahl liegt bei Ihnen. Da so viele Optionen zur Auswahl stehen, folgt im Anschluss an diese Einführung eine kurze CSS-Referenz.

197

Wieder verwertbare Elemente und Erweiterungsmodule

3. Wenn Sie alle Einstellungen vorgenommen haben, klicken Sie auf OK. 4. Bevor Sie Ihren Stil anwenden, öffnen Sie das Fenster noch einmal, doch diesmal erzeugen Sie einen benutzerdefinierten Stil. 5. Das Procedere ist das gleiche, nur dass Sie diesmal anstelle der Option HTML-TAG NEU DEFINIEREN die Option BENUTZERDEFINIERTEN STIL ERSTELLEN auswählen. Nennen Sie ihn .heading und weisen Sie ihm die entsprechenden Attribute zu, wie Sie das beim vorigen Stil getan haben. Ich habe als Größe 128 Pixel genommen und als Stil »oblique«. 6. Haben Sie alle Attribute gesetzt, klicken Sie auf OK. Öffnen Sie nun die Codeansicht ihres Dokuments. Wenn bei der Stildefinition nichts schief gegangen ist, finden Sie im Head-Bereich des Codes die folgenden Style-Anweisungen: <style type="text/css">

Öffnen Sie jetzt die CSS-Stile-Palette, um sich alle verfügbaren Stile anzeigen zu lassen. Wie Sie sehen, ist nur »heading« aufgelistet. Das liegt daran, dass nur benutzerdefinierte Stile aufgeführt werden. Stile, die auf neu definierten HTML-Tags basieren, werden automatisch zugewiesen und müssen daher nicht angezeigt werden.

Stile zuweisen Stile, die auf HTML-Tags beruhen, brauchen Sie wie gesagt nicht zuzuweisen, da sie automatisch angewendet werden, sobald dieses Tag im HTML-Code erscheint. Probieren Sie das einmal mit dem HTML-Tag aus, das Sie neu definiert haben. Wenn Sie wie im obigen Beispiel das -Tag umdefiniert haben, geben Sie etwas Text ein und formatieren ihn fett (Menü TEXT > STIL > FETT). Wie Sie sehen, verhält sich fett formatierter Text auf einmal völlig anders als gewohnt. Fett formatierter Text wird in dem Dokument, in dem Sie das Stylesheet definiert haben, nun mit den Attributen angezeigt, die Sie diesem Tag zugewiesen haben. Wollen Sie Text einen benutzerdefinierten Stil zuweisen, benutzen Sie hierzu entweder die CSS-Palette oder das Menü TEXT > CSS-STILE. Markieren Sie den Text und klicken Sie auf den gewünschten Stil in der CSS-Palette oder wählen Sie ihn über das Menü aus.

198

Cascading Style Sheets

Ist das Kontrollfeld ANWENDEN in der CSS-Palette deaktiviert, müssen Sie auf den Stil doppelklicken, bevor er angewählt wird. Um zugewiesene Stile wieder zu löschen, markieren Sie den Text und wählen in der CSS-Palette die Option KEINE. Genaue Kontrolle darüber, auf welche Abschnitte ein Stil angewendet wird, erhalten Sie, wenn Sie im Feld ANWENDEN AUF das Popup-Menü öffnen und das Tag auswählen, dem die Stildefinition zugewiesen wurde. Falls ein selbst definierter Stil in der Dokumentansicht nicht richtig angezeigt wird, könnte es daran liegen, dass UltraDev dieses Stilattribut nicht unterstützt. Überprüfen Sie in einem solchen Fall, ob der betreffende Stil im Dialogfenster STILDEFINITION mit einem * gekennzeichnet ist. In diesem Fall müssten Sie das Dokument in der Browservorschau öffnen, damit Sie sehen, ob dieses Stilattribut korrekt gerendert wird.

Bearbeitung und Links zu externen Stylesheets Stylesheets innerhalb eines einzelnen Dokuments zu verwenden ist zwar nicht verkehrt, zieht aber nicht den optimalen Nutzen aus dieser Technik. Statt für jedes Dokument Stilanweisungen zu schreiben, erzeugen Sie ein zentrales Stylesheet, auf das alle Dateien verlinken. Das ist die effektivste Methode, einen einheitliche Gestaltungslinie innerhalb einer Site einzuhalten. Am einfachsten verknüpfen Sie – wie bereits erwähnt – eine Datei und ein Stylesheet mit dem Button STYLESHEET ANFÜGEN rechts unten in der CSS-Palette. Damit haben Sie aber nicht die volle Kontrolle über das Stylesheet – verwenden Sie besser das Icon STYLESHEET BEARBEITEN (es stellt Papier und Bleistift dar), um mit dem Dokument verlinkte Stile zu bearbeiten. Um ein externes Stylesheet zu erzeugen, klicken Sie auf dieses Icon, oder wählen Sie TEXT > CCS-STILE > STYLESHEET BEARBEITEN. Es öffnet sich das in Abb. 5.8 gezeigte Dialogfenster STYLESHEET BEARBEITEN. In diesem Dialogfenster können Sie Stile neu erstellen oder duplizieren, bearbeiten oder entfernen. Was uns in diesem Zusammenhang am meisten interessiert, ist der Button VERKNÜPFEN. Bitte klicken Sie jetzt diese Schaltfläche an, um das Dialogfenster ENTFERNTES STYLESHEET HINZUFÜGEN zu öffnen (siehe Abb. 5.9). Geben Sie dort in das Feld DATEI / URL die Adresse des Dokuments ein, auf das verlinkt werden soll, und wählen Sie unter der Option HINZUFÜGEN ALS, ob das Stylesheet in das aktuelle Dokument importiert oder damit verknüpft werden soll. Wenn Sie bereits ein Stylesheet erstellt haben, geben Sie bitte den Pfad in das Feld DATEI /URL ein. Wenn nicht, dann vergeben Sie einen neuen Dateinamen wie z.B. meinStil.css und klicken auf OK. Daraufhin wird ein neues Stylesheet ohne Inhalt erzeugt.

199

Wieder verwertbare Elemente und Erweiterungsmodule

Abbildung 5.8: Stylesheets bearbeiten und einbinden mit der Dialogbox Stylesheet bearbeiten

Abbildung 5.9: Mit existierendem Stylesheet verknüpfen oder neues Stylesheet erzeugen

Jetzt sehen Sie wieder das Dialogfenster STYLESHEET BEARBEITEN. Im Listenfeld wird das verlinkte Stylesheet angezeigt. Um es zu bearbeiten, markieren Sie es und klicken auf BEARBEITEN. Es öffnet sich eine leere Kopie des Dialogfensters STYLESHEET BEARBEITEN, in der Titelleiste wird jedoch der Name des Stylesheets angezeigt. Um nun die gewünschten Stile zu definieren, klicken Sie in diesem Fenster auf NEU. Alle Stile, die Sie auf diesem Weg definieren, werden nun zwar in dem externen Stylesheet abgelegt, stehen aber im aktuellen Dokument ohne Einschränkung zur Verfügung. Bei der Erstellung der Folgeseiten brauchen Sie nur noch auf dieses Stylesheet zu verlinken, und sämtliche Stile stehen Ihnen zur Verfügung. In den bisherigen Versionen verfügt UltraDev nicht über die Fähigkeit, Stile zwischen einzelnen Stylesheets auszutauschen oder zwei Stilvorlagen zusammenzuführen. Hierzu müssen Sie einen Texteditor öffnen und die Stildefinitionen per Ausschneiden und Einfügen übertragen.

200

Cascading Style Sheets

CSS-Referenz Das Dialogfenster STILDEFINITION und die schriftspezifischen Einstellmöglichkeiten haben Sie ja schon kennen gelernt. Die meisten dieser Optionen sind selbsterklärend, doch ein paar bedürfen der Erläuterung. Darüber hinaus sind nicht alle Einstellungen in allen Fällen gültig oder sinnvoll. Wenn Sie z.B. die Positionierungseigenschaften einer Ebene definieren, sind Fontattribute nicht sonderlich hilfreich. Die folgenden Tabellen geben einen Überblick über die verschiedenen Einstellungsmöglichkeiten in den acht Kategorien des Fensters STILDEFINITION sowie über deren Wirkungsweise. Die Eingabemaske TYP haben Sie ja schon benutzt, um die Stilattribute von Text zu definieren. In Tabelle 5.1 gehen wir auf die einzelnen Attribute noch einmal näher ein. Attribute

Beschreibung

SCHRIFT

Font bzw. Fontgruppe, die einem Objekt zugewiesen wird.

GRÖßE

Festlegung der Schriftgröße. Die Verwendung der Maßeinheit »Pixel« ermöglicht bessere Cross-Browser-Kompatibilität.

STÄRKE

Definiert, wie mager bzw. fett ein Font dargestellt wird.

STIL

Der Schriftschnitt: gerade oder kursiv.

VARIANTE

Kleinbuchstaben werden als Kapitälchen ausgegeben.

ZEILENHÖHE

Regelt den Durchschuss im Text, indem Werte für den Zeilenabstand gesetzt werden.

GROß-/KLEIN-

Text wird nur in Groß- bzw. Kleinbuchstaben ausgegeben bzw. der erste Buchstabe eines Wortes ist groß.

SCHREIBUNG

AUSZEICHNUNG

Weitere Textstile, die mit HTML nicht möglich sind, wie z.B. DURCHGESTRICHEN.

FARBE

Textfarbe zuweisen.

Tabelle 5.1: Typ-Atribute

In der Eingabemaske HINTERGRUND definieren Sie Hintergrundfarbe oder Hintergrundbilder von Objekten wie z.B. Tabellen oder Ebenen. Tabelle 5.2 erläutert die verschiedenen Optionen. Attribute

Beschreibung

Hintergrundfarbe

Definiert die Hintergrundfarbe eines Objekts.

Hintergrundbild

Zeigt ein Objekt mit einem Hintergrundbild an.

Tabelle 5.2: Hintergrund-Attribute

201

Wieder verwertbare Elemente und Erweiterungsmodule

Attribute

Beschreibung

Wiederholen

Definiert, ob und wie ein Hintergrundbild wiederholt wird (horizontal, vertikal, in beiden Richtungen).

Anlage

Je nach Einstellung wird das Hintergrundbild mit der Seite gescrollt oder bleibt im Hintergrund fest stehen.

Horizontale Position

Gibt die horizontale Position des Hintergrundbildes in Bezug zum Element an.

Vertikale Position

Gibt die vertikale Position des Hintergrundbildes in Bezug zum Element an.

Tabelle 5.2: Hintergrund-Attribute (Forts.)

In der Eingabemaske BLOCK regeln Sie Textausrichtung und Abstände von ganzen Textblöcken wie z.B. Absätzen. Tabelle 5.3 erläutert die verschiedenen Optionen. Attribute

Beschreibung

Wortabstand

Regelt den Abstand zwischen den einzelnen Wörtern. Negative Werte verschieben die Wortgrenzen ineinander.

Zeichenabstand

Regelt den Abstand zwischen den Buchstaben. Negative Werte rücken die Buchstaben näher aneinander.

Vertikale Ausrichtung

Gibt die vertikale Ausrichtung in Relation zum übergeordneten Element an.

Textausrichtung

Gibt an, wie der Text innerhalb des Elements ausgerichtet ist (mittig, links, rechts).

Texteinzug

Gibt an, ob und wie weit die erste Zeile einen Textblocks eingezogen wird.

Leerraum

Legt fest, wie Leerraum behandelt wird. Während bei der normalen Ausgabe von HTML-formatiertem Text mehrere Leerzeichen zu einem zusammen gefasst werden, erhält PRE sämtliche Leerzeichen. Die Option KEIN UMBRUCH bricht Text nur dann um, wenn im Text ein
-Tag steht.

Tabelle 5.3: Block-Attribute

Die Eingabemaske BOX regelt die Position eines Objektes auf der Seite sowie die Randabstände. Tabelle 5.4 gibt über die verschiedenen Optionen näher Auskunft. Attribute

Beschreibung

Breite

Weist dem Objekt eine Breite zu.

Höhe

Weist dem Objekt eine Höhe zu.

Tabelle 5.4: Feld-Attribute

202

Cascading Style Sheets

Attribute

Beschreibung

Schwebend

Das Objekt wird an den linken oder rechten Rand verschoben und von den übrigen Elementen umflossen.

Frei

Legt die Seite des Objekts fest, die nicht umflossen werden darf. Diese Seite bleibt frei.

Auffüllen

Definiert den Abstand zwischen dem Inhalt und dem Rahmen eines Objekts.

Rand

Definiert den Abständen zwischen Objekten.

Tabelle 5.4: Feld-Attribute (Forts.)

In der Eingabemaske RAHMEN definieren Sie den Randstil und die Farbe von Tabellenrahmen. Tabelle 5.5 erläutert die verschiedenen Optionen. Attribute

Beschreibung

Breite

Randstärke von Tabellen oder Ebenen.

Farbe

Farbe, in der ein Rahmen dargestellt wird.

Stil

Randstil des Rahmens (gestrichelt, durchgehend usw.)

Tabelle 5.5: Rahmen-Attribute

Die Eingabemaske LISTE definiert die Darstellung von geordneten und ungeordneten Listen. Tabelle 5.6 erläutert die verschiedenen Optionen. Attribute

Beschreibung

Typ

Art der Aufzählungspunkte (Zahl, Kreis usw.)

Aufzählungsbild

Ersetzt die zeichenbasierten Aufzählungspunkte durch anwenderdefinierte Grafiken.

Position

Regelt den Umbruch innerhalb von Listeneinträgen.

Tabelle 5.6: Listen-Attribute

Die Eingabemaske POSITIONIERUNG regelt die Positionierung von Ebenen und deren sichtbare Bereiche. Tabelle 5.7 erläutert die verschiedenen Optionen. Attribute

Beschreibung

Typ

Art der Positionierung einer Ebene. RELATIV platziert die Ebene in eine relative Position zum übergeordneten Objekt. ABSOLUT definiert eine Position zum linken oberen Seitenrand. STATISCH hält die Ebene an einer festen Position innerhalb des Textflusses.

Z-Index

Gibt die Position der Ebene innerhalb eines Stapels von Ebenen an.

Tabelle 5.7: Positionierungs-Attribute

203

Wieder verwertbare Elemente und Erweiterungsmodule

Attribute

Beschreibung

Sichtbarkeit

Definiert, ob die Ebene ursprünglich sichtbar ist oder nicht.

Überlauf

Stellt ein, wie mit Inhalt umgegangen wird, der größer ist als die Ebene (sichtbar, unsichtbar, scrollen).

Plazierung

Position und Größe der Ebene.

Abschneiden

Definiert, welche Bereiche der Ebene sichtbar sein sollen und welche nicht.

Tabelle 5.7: Positionierungs-Attribute (Forts.)

Die Eingabemaske ERWEITERUNGEN enthält Stile und Effekte, die nicht in allen Browsern zur Verfügung stehen, wie z.B. bestimmte Filtereffekte oder Cursorstile. Tabelle 5.8 beschreibt die verschiedenen Optionen näher. Attribute

Beschreibung

Seitenumbruch

Erzwingt einen Seitenumbruch, wenn die Seite gedruckt wird.

Cursor

Verändert den Cursorstil, wenn der Cursor auf ein Objekt gesetzt wird. Funktioniert nur im Internet Explorer.

Filter

Ebenfalls ein Feature, das nur vom Internet Explorer unterstützt wird. Bringt Photoshop-ähnliche Effekte auf eine Website. Diese Funktionen werden wohl nicht zum Standardinventar von HTML gehören.

Tabelle 5.8: Erweiterungen-Attribute

UltraDev bietet wie zu HTML auch zu Cascading Style Sheets umfangreiche Informationen in der Hilfe-Funktion. Rufen Sie für detaillierte Angaben einfach das Hilfe-Menü auf.

Ein letzte Bemerkung zu Stylesheets Wenn Sie nun mit CSS arbeiten, lassen Sie sich nicht von den Wogen der Begeisterung davon reißen. CSS sind ein fantastisches Werkzeug, aber leider verhalten sie sich nicht immer so, wie wir uns das vorstellen. Es gibt Unterschiede in der Darstellung zwischen Netscape Navigator und Internet Explorer und sogar bei den gleichen Browsern auf unterschiedlichen Plattformen. Ich habe gute Erfahrungen mit CSS gemacht und finde sie höchst nützlich, um innerhalb einer Website ein einheitliches Schriftbild und größtmögliche Cross-Browser-Kompatibilität zu erreichen. Doch dürfen Sie nicht davon ausgehen, dass die Browserdarstellung sich hundertprozentig mit der Designansicht von UltraDev deckt. Kontrollieren Sie die Seiten immer wieder in der Browservorschau und verwenden Sie nicht nur einen speziellen Browser für Ihre Testläufe.

204

Bibliotheken

5.4

Bibliotheken

Bibliotheken sind im Grunde eine Sammlung von häufig verwendeten »HTML-CodeSchnipseln«. Diese Schnipsel werden an einer Stelle gespeichert und lassen sich nach Bedarf beliebig auf anderen Seiten verwenden. Gutes Beispiel für solche wieder verwertbaren Elemente sind Navigationsleisten. Haben Sie sich einmal die Mühe gemacht, ein Menü zu erstellen, werden Sie es vermutlich wieder verwenden wollen. Darum möchte ich Ihnen als Nächstes zeigen, wie Sie ein fertig erstelltes Menü als Bibliothekselement ablegen.

Fertige HTML-Elemente in Bibliotheken ablegen Am bequemsten erstellen Sie Bibliothekselemente, wenn Sie das Objekt, das Sie der Bibliothek hinzufügen möchten, in der Dokumentansicht erstellen. Nehmen wir als Beispiel die schlichte Navigationsleiste aus Abb. 5.10, die mithilfe von Imagemaps erstellt wurde. Wenn Sie Objekte in Tabellen oder Ebenen erstellen, werden die Objekte gewissermaßen gruppiert und können bei der Anzeige im Browser nicht auseinander gerissen werden. Um die Navigationsleiste unserem Bibliotheksbestand einzuverleiben, markieren Sie die Ebene, die das Menü enthält und gehen Sie dann auf MODIFIZIEREN > BIBLIOTHEK > OBJEKT IN BIBLIOTHEK EINFÜGEN.

Die Elementepalette: Bibliotheken Das Objekt sollte nun im Register BIBLIOTHEK der Palette ASSETS stehen. Sie öffnen die Palette ELEMENTE über FENSTER > ELEMENTE. Klicken Sie auf das Buch-Icon, um sich alle Bibliothekselemente anzeigen zu lassen. Wie in Abb. 5.11 zu sehen, ist die Menüleiste jetzt zum Bibliothekselement geworden. Über die Palette ELEMENTE haben Sie schnellen Zugriff auf alle gespeicherten Objekte. Das im Listenfeld aktuell markierte Objekt wird im oberen Feld der Palette angezeigt. Normalerweise ist die Palette ziemlich klein, wenn sie geöffnet wird, unter Umständen müssen Sie sie etwas aufziehen, um das obere Feld sehen zu können. Sie können Bibliothekselemente schnell der aktuellen Seite hinzufügen, wenn Sie auf den Button EINFÜGEN links unten in der Palette klicken.

205

Wieder verwertbare Elemente und Erweiterungsmodule

Abbildung 5.10: Mit UltraDev Objekte in die Bibliothek aufnehmen

Abbildung 5.11: Unter dem Register Bibliothek werden alle Objekte angezeigt, die Sie Ihrer Sammlung von HTML-Elementen hinzugefügt haben.

206

Bibliotheken

Bibliothekselemente neu erstellen Sie können Bibliothekselemente natürlich auch von der Pike auf erstellen. Hierzu müssen Sie in die Dokumentansicht gehen und das Bibliotheksregister der Palette ELEMENTE öffnen. Klicken Sie rechts unten in der Palette auf das Icon NEU (Blatt Papier mit einem Pluszeichen). Nun wird im Listenfeld der Bibliothekselemente ein leerer Eintrag angezeigt. UltraDev gibt Ihnen daraufhin im oberen Feld Hinweise auf die erforderlichen weiteren Schritte, wie in Abb. 5.12 zu sehen.

Abbildung 5.12: Bibliothekselemente von der Pike auf erstellen

Das Icon BEARBEITEN, von dem die Programmmeldung spricht, ist ein kleines Icon rechts unten in der Palette ELEMENTE, das ein Blatt Papier und einen Stift zeigt. Mit diesem Icon können Sie jederzeit Bibliothekselemente öffnen und editieren. Schließen Sie das Dokument, das das Bibliothekselement enthält, werden Sie aufgefordert, Ihre Änderungen zu speichern. Die Aktualisierungen werden dann sofort in allen Seiten angezeigt, die das Element verwenden.

Weitere Bibliotheksfunktionen Um Bibliothekselemente neu zu benennen, doppelklicken Sie auf seinen Namen im Listenfeld und geben dann den gewünschten Namen ein. Sie können auch das Palettenmenü öffnen (auf den Pfeil rechts oben in der Palette klicken) und den Befehl UMBENENNEN aufrufen. Der Befehl AKTUELLE SEITE AKTUALISIEREN aktualisiert das geöffnete Dokument, so dass alle neu durchgeführten Änderungen an Bibliothekselementen angezeigt werden. Normalerweise werden Sie aber nicht einzelne Dokumente aktualisieren, sondern die ganze Site. Wählen Sie hierzu den Befehl SITE AKTUALISIEREN.

207

Wieder verwertbare Elemente und Erweiterungsmodule

Mit diesem Befehl öffnen Sie das in Abb. 5.13 gezeigte Dialogfenster. Hier stellen Sie ein, ob UltraDev die ganze Site überprüfen oder nur nach solchen Seiten suchen soll, die ein bestimmtes Bibliothekselement enthalten, um sie dann zu aktualisieren. Es wird ein Bericht über sämtliche Aktualisierungen angelegt, sodass Sie volle Kontrolle über alle Änderungen haben.

Abbildung 5.13: Sämtliche Dokumente einer Website in einem Durchgang auf den neuesten Stand bringen

Um ein Bibliothekselement zu entfernen, klicken Sie auf den kleinen Abfalleimer rechts unten in der Palette. Der Befehl LÖSCHEN im Palettenmenü erfüllt denselben Zweck. Die Bibliothekselemente einer Site finden Sie im Ordner Library im Fenster LOKALER ORDNER. Bibliothekselemente erkennen Sie an der Endung .lbi. Trotz dieser Extension handelt es sich um ganz normale HTML-Dateien, die Sie in UltraDev oder jedem anderen Editor öffnen und bearbeiten können.

5.5

Vorlagen

Bei der Arbeit mit UltraDev sind Sie sicher auch schon über den Begriff »Vorlagen« gestolpert. Vorlagen sind eine spezielle Art von Dokument, die sich etwas anders verhalten als die gewöhnlichen HTML-Files einer Site. Vorlagen ermöglichen es, Seiten mit einem festen, nicht veränderbaren Layout zu erstellen, in die aber beliebiger Inhalt eingestellt werden kann. Somit ist sichergestellt, dass am Layout einer Seite nichts verändert werden kann, wenn diese Dokumente von den unterschiedlichsten Bearbeitern geöffnet, verändert und wieder abgespeichert werden. Macht ein »normales« HTML-Dokument die Runde durch die Firma, so widerfahren ihm im Laufe der Zeit die wunderlichsten Veränderungen – Tabel-

208

Vorlagen

lenbreiten ändern sich scheinbar in Abhängigkeit von der Raumtemperatur, Links führen plötzlich ins Nichts – und niemand kann sich auch nur im Entferntesten vorstellen, woran das liegen könnte. Speichern Sie solche Dokumente als Vorlagen, ist dem ein Riegel vorgeschoben. Erstellen Sie solche Seiten auf Basis von Vorlagen, können Sie Ihre Seiten beruhigt an die verschiedenen Bearbeiter weitergeben, da nun das Layout der Seite selbst gegen Veränderungen aller Art geschützt ist. Dieses Vorgehen ist vor allem bei Sites, die von mehreren Bearbeitern betreut werden, ein absolutes Muss. Man könnte sich Vorlagen auch als die Umkehrung der Bibliotheksfunktion vorstellen. Statt einzelne HTML-Schnipsel zu speichern, die dann in das jeweilige Dokumente eingefügt werden, wird bei Vorlagen ein komplettes HTML-Dokument gespeichert, in das man dann diverse HTML-Schnipsel einsetzt. Die Bibliothekspalette und die Vorlagenpalette sehen sich daher auch ziemlich ähnlich.

Bestehende HTML-Dokumente als Vorlage speichern Da eine Vorlage letztlich nichts anderes ist als das fertige Layout einer Webseite, empfiehlt es sich, Vorlagen auf Basis schon vorhandener Seiten zu erstellen. Entwerfen und realisieren Sie wie gewohnt Ihre Seite in UltraDev, ohne sich schon im Vorfeld den Kopf zu zerbrechen, welche Seitenbereiche editierbar sein sollen und welche nicht. Nehmen wir als Beispiel den in Abb. 5.14 gezeigten Screen, ein schlichtes dreispaltiges Tabellenlayout. Die linke Spalte nimmt das Menü auf, die beiden anderen Spalten den Inhalt. Nun wollen wir das Menü in der linken Spalte vor unbefugten Zugriffen schützen und nur die beiden anderen Spalten zur Bearbeitung freigeben, sodass Bild und Text ausgetauscht werden können. Mit dem Befehl DATEI > ALS VORLAGE SPEICHERN machen Sie aus einem normalen Dokument eine Vorlage. Das Dialogfenster ALS VORLAGE SPEICHERN unterscheidet sich etwas vom normalen SPEICHERN UNTER-Dialog. Vorlagen werden innerhalb der Website in einem eigenen Ordner Templates abgespeichert und sind an der Endung .dwt erkenntlich. Wie Abb. 5.15 zeigt, können Sie in diesem Dialogfenster wählen, in welche Site diese Vorlage gespeichert werden soll und welchen Namen sie erhalten soll. Ist die Vorlage gespeichert, können Sie die editierbaren Bereiche definieren. Sie müssen ein Dokument nicht als Vorlage speichern, bevor Sie die editierbaren Bereiche definieren. Das ist nur eine Sicherheitsmaßnahme, um die Originaldatei vor ungewollten Änderungen zu schützen. Standardmäßig ist das gesamte Dokument für die Bearbeitung gesperrt. Sie müssen nun festlegen, welche Bereiche editierbar sein sollen. Markieren Sie einen editierbaren Bereich und gehen Sie in Menü MODIFIZIEREN > VORLAGEN > NEUER BEARBEITBARER BEREICH. Es öffnet sich in Dialogfenster, in das Sie einen Namen für diesen editierbaren Bereich eingeben. So können Sie die einzelnen Bereiche voneinander unterscheiden, wenn Sie

209

Wieder verwertbare Elemente und Erweiterungsmodule

Inhalt in die Vorlage importieren. Möchten Sie die Editierbarkeit eines Bereiches wieder aufheben, gehen Sie in Menü MODIFIZIEREN > VORLAGEN > BEARBEITBAREN BEREICH ENTFERNEN. Wählen Sie im geöffneten Dialogfenster den Bereich aus und löschen Sie ihn. Der Bereich ist somit wieder gesperrt.

Abbildung 5.14: Fertige Seiten lassen sich im Handumdrehen in Vorlagen verwandeln.

Abbildung 5.15: Vorlagen werden in eine Site gespeichert.

Editierbare Bereiche werden blaugrau markiert, um anzuzeigen, dass sie nicht gesperrt sind. Wenn Sie eine Vorlage öffnen, um eine neue Webseite zu erstellen, werden gesperrte Bereiche durch eine gelbe Markierung angezeigt, während bearbeitbare Bereiche nicht markiert sind.

210

Vorlagen

Wenn diese Tönungen nicht ganz Ihren Geschmack treffen, können Sie die Markierungsfarben in den Voreinstellungen verändern.

Wenn Sie alle editierbaren Bereiche definiert haben, speichern Sie die Vorlage mit allen Änderungen und schließen das Vorlagenfenster.

Die Elementepalette: Vorlagen Sie können Ihre Vorlagen mit der Elementepalette (öffnen über FENSTER > ELEMENTE) überprüfen, indem Sie auf das Vorlagen-Icon klicken (direkt über dem Bibliothek-Icon). Wenn Ihnen die Vorlagenpalette ganz so vorkommt wie die Bibliothekspalette, dann ist da was Wahres dran. Wenn Sie eine Vorlage per Klick auswählen, wird sie in der oberen Hälfte der Palette angezeigt. Die unter den Icons liegenden Befehle sowie die Befehle im Palettenmenü sind identisch mit denen der Bibliothekspalette.

Vorlagen neu erstellen Sie können Vorlagen ohne Weiteres mithilfe der Vorlagenpalette von einem leeren Dokument, sozusagen von Null aus erstellen, doch ist das meiner Meinung nach nicht so effektiv, als wenn Sie eine fertige Seite als Vorlage speichern. Klicken Sie hierzu auf das Icon NEUE VORLAGE, worauf im Listenfeld eine neue Vorlage angezeigt wird. Durch Doppelklick auf diesen Eintrag bzw. Klick auf das Icon BEARBEITEN öffnen Sie die neue Vorlage, um sie zu editieren. Mit diesen Funktionen sollten Sie ja schon von der Arbeit mit der Bibliothekspalette her vertraut sein. Das leere Dokument im Vorlagenfenster unterscheidet sich äußerlich nicht von einer normalen Datei in der Dokumentansicht, nur stehen Ihnen im Vorlagenfenster ein paar weitere Funktionen zur Verfügung. Gestalten Sie die Vorlage zunächst wie jedes normale Dokument. Wenn Sie nun einen Bereich als bearbeitbar definieren möchten, gehen Sie in Menü MODIFIZIEREN > VORLAGEN > NEUER BEARBEITBARER BEREICH und vergeben einen Namen für diesen Bereich. Dieser Name wird dann an der entsprechenden Stelle wie ein Etikett angezeigt. Den Text unter dieser Marke können Sie überschreiben. Beachten Sie, dass alles, was Sie in ein solches Feld eingeben, mit derselben Farbe wie editierbare Bereiche markiert wird. Sie können diese Markierung aufheben, wenn Sie den Bereich im Untermenü VORLAGEN anhand seines Namens abwählen. Ob Sie nun erst die komplette Seite erstellen und dann die editierbaren Bereiche bestimmen oder Zug um Zug arbeiten, einen Teil fertig stellen und dann editieren, liegt ganz bei

211

Wieder verwertbare Elemente und Erweiterungsmodule

Ihnen, doch sollten Sie gut vorausplanen. Wenn Sie zuerst die ganze Site erstellen und dann nachträglich versuchen, Sie an Ihre Vorlage anzupassen, dürfen Sie sich auf Überstunden einstellen. Eine klug geplante Website erspart Ihnen langfristig viel überflüssige Arbeit.

Hast du mal 'ne Vorlage? Die Vorlage ist fertig, aber was tun wir nun damit? Am leichtesten lassen sich Vorlagen zum Einsatz bringen, wenn Sie über DATEI > NEU VON VORLAGE ein Dokument gleich auf Basis einer Vorlage erstellen. Ein Dialogfenster zeigt Ihnen daraufhin alle zur Verfügung stehenden Vorlagen an, die Sie als Grundlage Ihrer neuen Seite verwenden können. Und wie wir es von einer Vorlage erwarten dürfen, können nur die editierbaren Bereiche überschrieben werden. Andere Bearbeiter können nun Inhalte in die Seite einstellen, ohne befürchten zu müssen, an der Datei oder am Layout etwas zu zerstören. Eine andere Art mit Vorlagen zu arbeiten ist, ein Dokument mit einer Vorlage zu verbinden. Die Vorlage wird mit dem Dokument verknüpft und der Inhalt in eines der editierbaren Felder eingefügt. Verwenden Sie hierzu den Button ANWENDEN in der Vorlagenpalette. Ähnlich wie Bibliothekselemente können Sie auch Vorlagen bearbeiten und aktualisieren und über MODIFIZIEREN > VORLAGEN > SEITEN AKTUALISIEREN auf alle Seiten anwenden, die auf dieser Vorlage basieren. Somit lassen sich eventuelle Layoutänderungen an Seiten, die dieselbe Formatvorlage verwenden, durch Anpassung einer einzigen Datei auf schnellstem Wege bewerkstelligen. Wenn das keine gute Nachricht ist! Damit Bibliotheken und Vorlagen optimal eingesetzt werden können, ist es wichtig, dass sämtliche Mitarbeiter, die eine Site betreuen, deren Funktionsweise wirklich verstehen, bevor sie damit arbeiten. Verwendet man eine Vorlage wie ein gewöhnliches HTML-Dokument, ist es nicht mehr möglich, Dokumente zentral zu aktualisieren oder Inhalte zu kontrollieren. Wenn Sie größere Veränderungen an einer Vorlagen-basierten Seite vornehmen möchten, ohne die Vorlage dabei zu zerstören, können Sie über MODIFIZIEREN > VORLAGEN > VON VORLAGE LÖSEN das Dokument von seiner Vorlage trennen. Sie unterliegen dann nicht mehr den Einschränkungen der Vorlage, die Inhalte der Seite bleiben aber erhalten. Wenn Sie eine Seite von ihrer Vorlage lösen, werden eventuelle Aktualisierungen an dieser Vorlage nicht mehr auf diese Seite übertragen.

212

Der Elemente-Manager

5.6

Der Elemente-Manager

Wie Sie bei der Arbeit mit Vorlagen und Bibliotheken schon gesehen haben, enthält die Palette ELEMENTE sämtliche Objekte die innerhalb einer Website zur Verfügung stehen. Wir haben uns vordringlich mit Vorlagen und Bibliotheken beschäftigt, weil das die komplexesten Themen sind. Doch stehen über den Elemente-Manager auch noch andere Objekte zu Verfügung. Öffnen Sie bitte die Palette ELEMENTE. Am linken Palettenrand sehen Sie neun Icons. Jedes Icon steht für eine bestimmte Ressource, die Sie damit aufrufen können. Es handelt sich um die folgenden Objekte, von oben nach unten: 쐽

BILDER – Jedes Bild, das in der Site vorkommt, ist hier aufgeführt.

쐽

FARBEN – Enthält die Farben, die verwendet wurden.

쐽

URLS – Zeigt Links zu andern Seiten oder Objekten an.

쐽

FLASH – Flash-Dateien, die in der Site verwendet werden.

쐽

SHOCKWAVE – Listet alle Shockwave-Inhalte auf.

쐽

FILME – Alle eingebetteten oder sonst wie verknüpften Videodateien werden hier aufgeführt.

쐽

SCRIPTE – Listet sämtliche JavaScript-Funktionen bzw. VBScript-Code auf.

쐽

VORLAGEN – Hier stehen alle verfügbaren Vorlagen.

쐽

BIBLIOTHEK – Sämtliche Bibliothekselemente werden hier geführt.

Wenn Sie einen bestimmten Objekttyp ausgewählt haben, können Sie die enthaltenen Elemente über diese Palette editieren oder einer Seite hinzufügen, wie wir das bei den Bibliothekselementen und Vorlagen schon gemacht haben. Sie können auch ausgewählte Objekte in eine andere Site kopieren. Öffnen Sie hierzu mit dem kleinen Pfeil rechts das Palettenmenü. So können Sie Elemente zwischen einzelnen Sites austauschen, ohne irgendwelche Dateien von Hand hin- und herkopieren zu müssen.

Verschiedene Ansichtsmodi im Elemente-Manager Im Elemente-Manager haben Sie zwei Ansichtsmodi zur Auswahl: ganze Site und Favoriten. Standardmäßig werden alle Objekte einer Site angezeigt – auch solche, die eher im Weg sind. Um die Liste etwas kürzer zu halten und den Überblick zu bewahren, können Sie ein Element auswählen und es über das Palettenmenü oder durch Klick auf das Favoriten-Icon (ein Band mit einem Pluszeichen) der Favoritenliste hinzufügen. Sie können natürlich jederzeit zwischen den Ansichten umschalten, indem Sie das jeweilige Optionsfeld oben in der Palette anklicken.

213

Wieder verwertbare Elemente und Erweiterungsmodule

5.7

UltraDev erweitern

UltraDev ist extrem ausbaufähig. Darauf einzugehen würde den Rahmen dieses Buches bei weitem sprengen, denn die Erweiterung von UltraDev wäre noch einmal Stoff für zwei oder drei Wochen. Das ganze Menüsystem ist editierbar, selbst geschriebene JavaScript-Verhaltensweisen lassen sich nahtlos in die Entwicklungsumgebung von UltraDev integrieren. Nehmen wir zum Beispiel das Menü BEFEHLE. Hier wurden schon einige externe Befehle integriert, wie z.B. HTML OPTIMIEREN und WORD-HTML OPTIMIEREN. Diese Funktionen sind nicht Teil des genuinen Programmcodes, sondern liegen als Erweiterungsmodul vor. Wenn Sie kein Programmierer sind und Ihre JavaScript-Verhaltensweisen nicht selbst schreiben wollen, stehen Ihnen zwei Wege offen, wie Sie UltraDev um zusätzliche Funktionen erweitern können: die Installation von vordefinierten Verhaltensweisen von Drittanbietern und die Speicherung von mehreren Arbeitsschritten in einem Makro.

Makros aufzeichnen Die einfachste Art, UltraDev um selbst erstellte Funktionen zu erweitern, ist die Aufzeichnung von Bearbeitungsschritten als Makro, das sich immer wieder verwenden lässt. Leider können Sie während der Aufzeichnung Objekte nicht mit der Maus auswählen, sodass Sie im Wesentlichen auf Tastatureingaben und das Einfügen von Objekten beschränkt sind. Wenn Sie ein Makro aufzeichnen wollen, gehen Sie wie folgt vor: 1. Führen Sie die Bearbeitungsschritte aus, die Sie aufzeichnen möchten: Text eingeben, Objekt einfügen usw. 2. Öffnen Sie die Palette VERLAUF und markieren Sie die Schritte, die Sie als Makro (von UltraDev als »Befehl« bezeichnet) speichern wollen. 3. Wenn Sie die Befehlsfolge vor dem Speichern erst noch einmal abspielen wollen, um zu überprüfen, ob sie sich wie gewünscht verhält, klicken Sie auf den Button WIEDERGABE oder wählen im Palettenmenü den Befehl SCHRITTE WIEDERHOLEN. 4. Sind Sie mit dem Ergebnis zufrieden, können Sie es durch Klick auf das DiskettenIcon oder mit dem Befehl ALS BEFEHL SPEICHERN im Palettenmenü speichern. 5. Vergeben Sie einen Namen für Ihren neuen Befehl. 6. Wenn Sie jetzt das Menü Befehle öffnen, sehen Sie, dass nun Ihr Makro dort aufgelistet wird. Abb. 5.16 zeigt die Verlaufspalette, nachdem ein paar einfache Aktionen durchgeführt wurden. Diese Bearbeitungsschritte können nun als Befehl gespeichert werden.

214

UltraDev erweitern

Wenn Sie sehr oft Textbausteine oder Tabellen in ein Dokument einfügen müssen, können Sie solche wiederkehrenden Arbeitsschritte als Makro ablegen und müssen dann im Bedarfsfall nur noch das Makro abspielen. Möchten Sie ein Makro löschen oder umbenennen, wählen Sie BEFEHLE > BEFEHLSLISTE BEARBEITEN. Es öffnet sich das in Abb. 5.17 gezeigte Dialogfenster. Klicken Sie auf den entsprechenden Befehl im Listenfeld, um ihn neu zu benennen. Mit Klick auf die Schaltfläche LÖSCHEN wird das Makro gelöscht.

Abbildung 5.16: Markieren Sie die Bearbeitungsschritte, die Sie als Befehl speichern möchten.

Abbildung 5.17: Befehle löschen und umbenennen

Sie haben aber auch die Möglichkeit, eine Folge von Bearbeitungsschritten aufzuzeichnen und beliebig oft zu verwenden, ohne sie als Makro abzulegen, indem Sie sie als temporären Befehl speichern.

Temporäre Befehle aufzeichnen Mit der Erstellung von temporären Befehlen zeichnen Sie eine Folge von Bearbeitungsschritten während einer UltraDev-Sitzung auf, die beliebig oft wiedergegeben werden kann, aber mit Beendigung dieser Sitzung wieder gelöscht wird. Um einen temporären

215

Wieder verwertbare Elemente und Erweiterungsmodule

Befehl zu erstellen, wählen Sie BEFEHLE > AUFZEICHNUNG STARTEN. Sie arbeiten wie gewohnt mit dem Programm, während es Ihre Aktionen aufzeichnet. Auch hier gilt leider die Einschränkung, dass Sie während der Aufzeichnung keine Objekte mit der Maus auswählen können. Um die Aufzeichnung zu beenden, wählen Sie BEFEHLE > AUFZEICHNUNG STOPPEN. Sobald ein temporärer Befehl gespeichert wurde, steht das Kommando BEFEHLE > AUFGEBEFEHL ABSPIELEN zur Verfügung und Sie können die aufgezeichnete Sequenz beliebig oft wiedergeben.

ZEICHNETEN

Erweiterungsmodule für UltraDev herunterladen Bevor Sie sich nun durch die Hilfe-Funktion von UltraDev pflügen und sich das Hirn darüber zermartern, wie Sie Ihre eigenen Erweiterungen schreiben, sollten Sie erst einmal auf der Website von Macromedia vorbeischauen und auskundschaften, was dort an fertigen Modulen bereits erhältlich ist. Über BEFEHLE > MEHR BEFEHLE kommen Sie direkt auf die Website von Macromedia. (Dazu müssen Sie natürlich online sein.) Ein Blick auf Abb. 5.18 dürfte keinen Zweifel aufkommen lassen, dass sich dort so manche nützliche Erweiterung finden lässt.

Abbildung 5.18: Auf der Website von Macromedia finden Sie ein reiches Angebot an Erweiterungsmodulen.

Mit den folgenden vier Schritten installieren Sie ein Erweiterungsmodul (von Macromedia als »Package« bezeichnet):

216

UltraDev erweitern

1. Klicken Sie auf das Modul, das Sie herunterladen möchten. 2. Klicken Sie auf der Seite, die sich nun geöffnet hat, auf das Download-Icon für Ihr Betriebssystem (Mac oder Windows). 3. Öffnen Sie den Ordner, in den das Erweiterungsmodul gespeichert wurde. 4. Doppelklicken Sie auf das Modul. Nachdem Sie doppelt auf das Modul geklickt haben, öffnet sich der Extension Manager (siehe Abb. 5.19) und installiert das Modul. Abschließend wird eine Meldung über die erfolgreiche Installation sowie den Funktionsumfang des Moduls angezeigt.

Abbildung 5.19: Der Extension Manager verwaltet alle installierten Erweiterungsmodule.

Um ein Modul wieder zu entfernen, wählen Sie im Extension Manager den Befehl FILE > REMOVE EXTENSION. Es steht ein Unzahl an neuen Features zur Verfügung, um die Sie UltraDev erweitern können. Sie müssen nur auf der Website von Macromedia vorbeischauen und sich die passenden Module herunterladen. Bevor Sie also den Schluss ziehen, dass es doch etwas gibt, was UltraDev nicht kann, sollten Sie sich erst einmal alle erhältlichen Erweiterungen vornehmen. Diese Module gibt es übrigens umsonst! Sie können UltraDev nicht nur durch diverse Module erweitern, sondern auch die Oberfläche nach Ihren Vorstellungen umgestalten. Im Anhang B, »Anpassen der UltraDev-Umgebung«, finden Sie die nötigen Informationen, wie Sie die Programmoberfläche so umstrukturieren, dass Sie damit Ihren persönlichen Workflow verbessern.

217

Wieder verwertbare Elemente und Erweiterungsmodule

5.8

Zusammenfassung

Zu einer effizienten Entwicklung von Websites gehört auch die intelligente Wiederverwertung bereits erstellter Funktionen und Inhalte. Zu diesem Zweck hält UltraDev ein paar sehr nützliche Werkzeuge bereit. Cascading Stylesheets sorgen für ein einheitliches Schriftbild innerhalb einer Site und garantieren eine weitgehend identische Darstellung über Browser- und Betriebssystemgrenzen hinweg. Darüber hinaus können Sie den Aufwand mit CSS-Dateien wesentlich kleiner halten als mit der üblichen HTML-Formatierung von Text. Entwickeln Sie für Browser, die keine CSS unterstützen, können Sie auf HTML-Stile ausweichen. Vorlagen und Bibliotheken sind Features von UltraDev, die die Wiederverwendung bereits erstellter Elemente ermöglichen. Bibliotheken speichern häufig verwendete »HTMLSchnipsel«, die sich in jedes beliebige Dokument einfügen lassen, sodass bei Änderungen nur eine Datei aktualisiert werden muss. Vorlagen sorgen für ein einheitliches Erscheinungsbild aller Seiten, die auf dieser Vorlage basieren. Und auch hier muss im Falle einer Aktualisierung nur eine einzige Datei geändert werden. Und schließlich ist UltraDev erweiterbar – durch Installation von Modulen, die Sie aus dem Internet herunterladen können oder durch Aufzeichnung eigener Makros. Ein paar Klicks und das Programm ist um neue, leistungsfähige Funktionen erweitert, die in der Standardinstallation fehlen.

5.9 F

Soll ich ein zentrales Stylesheet verwenden oder die Stilinformationen in jedem Dokument gesondert speichern? A

F

Das kommt ganz auf Ihre Anforderungen an. Ein zentrales Stylesheet empfiehlt sich vor allem für komplexe Websites. Wenn sich jedoch die Seiten im Layout stark unterscheiden, müssen Sie vielleicht das Stylesheet ständig anpassen, um sämtliche Stilvarianten abzudecken. In diesem Fall würde es sich empfehlen, bei Seiten, die im Layout abweichen, die Stildefinitionen direkt ins Dokument zu schreiben.

Kann ich spezielle Effekte, wie z.B. Filter verwenden, auch wenn sie vom Netscape Navigator nicht unterstützt werden? A

218

Fragen und Antworten

Ja, aber ich würde ein solches Vorgehen nicht empfehlen. Die Grundidee des Internet ist, eine offene Plattform zu sein, über die Dokumente unabhängig von Betriebsystemen oder Browsern ausgetauscht werden können. Websites nur für einen speziellen Browser zu entwickeln ist ziemlich kurzsichtig.

Workshop

F

Welche Elemente speichert man besten in einer Bibliothek? A

F

Vor allem natürlich Menüs und Navigationsleisten, doch auch kleinere Elemente, die sich öfter ändern, wie z.B. Linklisten, E-Mail-Adressen oder regelmäßig wechselnde Grafiken. Wenn Sie bei Aktualisierungen nicht jedes Mal die ganze Site durchpflügen wollen, sollten Sie solche Objekte in Bibliotheken ablegen.

Sind Vorlagen völlig sicher gegen Veränderungen? A

Ganz und gar nicht. Sie können eine auf Vorlagen basierende Website nicht für verschiedene Bearbeiter zugänglich machen und die Dateien hundertprozentig gegen Veränderungen schützen, seien sie nun absichtlich oder nicht. Sie sollten daher sämtliche Mitarbeiter im effektiven Umgang mit UltraDev schulen, damit sie Sinn und Zweck solcher Vorlagen verstehen und dementsprechend damit umgehen.

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

Quiz 1. Welches ist der Hauptverwendungszweck von CSS? 2. Funktionieren sämtliche CSS-Attribute in sämtlichen Browsern und auf allen Plattformen? 3. Wozu dient die Bibliothek? 4. Wie machen Sie aus einem normalen HTML-Dokument eine Vorlage? 5. Wie installieren Sie Erweiterungsmodule?

Übungen 1. Öffnen Sie eine bereits bestehende Website und ersetzen Sie HTML-Formatierungen durch Stylesheets. 2. Trainieren Sie die Verwendung von Bibliotheken und Vorlagen. Erzeugen Sie Vorlagen von bestehenden Webseiten und fügen Sie neuen Inhalte ein. 3. Gehen Sie auf die Website von Macromedia und installieren Sie neue Erweiterungsmodule für UltraDev. Machen Sie sich mit dem Extension Manager vertraut und wie man damit Erweiterungen installiert.

219

Einführung in dynamische Webanwendungen und Datenbankentwicklung

6

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Was sind eigentlich datenbankgestützte Websites? Welche Vorteile bieten sie gegenüber »normalen« Websites? Welche Kenntnisse braucht man, um sie zu erstellen? Das sind die Fragen, auf die wir in der heutigen Lektion eine Antwort finden wollen. Heute können wir uns einmal zurücklehnen und den Computer ausgeschaltet lassen. Sie werden lernen, was dynamische Websites sind und welche Konzepte dahinter stehen. Leider geht das nicht ohne etwas Theorie. Die heutigen Themen im Überblick: 쐽

Welche Art von Websites lässt sich per Datenbank steuern? Welche Elemente können dynamisch verändert werden?

쐽

Welche Technologien stecken hinter dynamischen Websites und wie werden diese Technologien vom HTTP-Protokoll unterstützt?

쐽

Wie lassen sich datenbankgestützte Websites realisieren? Welchen Planungsaufwand muss man vor der Umsetzung betreiben?

쐽

Wie lautet das kleine Einmaleins des Datenbankentwurfs? Was versteht man unter Normalisierung? Wie baut man eine effektive und leicht zu pflegende Datenbankstruktur auf?

6.1

Dynamische Websites

An den vorausgegangenen Tagen haben wir uns mit der Erzeugung von statischen Websites befasst und haben gerade einmal das erste Viertel des Buches hinter uns gebracht. Zu was in aller Welt muss man nun noch so viel Papier und Druckerschwärze verbrauchen? Nun, für die Erklärung, wie man dynamische Websites erstellt. Aber was versteht man eigentlich darunter? Wenn eine Website dynamisch ist, so heißt das, dass Inhalte eines HTML-Dokuments nicht – wie wir das bisher von HTML-Dateien kennen – statisch, also unveränderlich, sind, sondern ausgetauscht werden können. Diese neuen Inhalte werden dynamisch in Abhängigkeit von den Eingaben des Anwenders erzeugt. Nun haben wir ja schon Seiten erstellt, bei denen sich Objekte verändert oder bewegt haben, wenn der Anwender z.B. den Mauszeiger darauf gesetzt hat. Sind das also auch schon dynamische Websites? Nein, eigentlich nicht. Der Code, auf dem diese Effekte basieren, ist bereits in das HTML-Dokument integriert, alle erforderlichen Rechenoperationen werden clientseitig, vom System des Anwenders, durchgeführt. Bei echten dynamischen Sites wird ein HTML-Dokument aus Programmcode generiert, der vom Server abgearbeitet wird. Rufen zwei Besucher einer Site dasselbe Dokument ab, kann sich der HTML-Code dieser Dateien durchaus unterscheiden. Zur Erstellung einer individualisierten HTML-Seite wird also auf die Rechenleistung des Servers zugegriffen,

222

Dynamische Websites

der das Dokument auf der Grundlage der Anwendereingaben erzeugt. Diese Seite kann nun die Art von dynamischen Elementen enthalten, die wir in den vorhergehenden Lektionen kennen gelernt haben, oder ein gewöhnliches statisches HTML-Dokument sein. Der entscheidende Punkt ist, dass die Seite während der Laufzeit vom Server erzeugt und dann an den Client übertragen wurde. Hinter dynamischen Websites steht gewöhnlich ein Datenbanksystem, um die Datenbestände möglichst effektiv zu speichern und zu verwalten. Dynamisch erzeugte Dokumente lassen sich manchmal an der Extension der angeforderten Datei wie .cgi, .php oder .jsp – kurz allem, was von .htm oder .html abweicht – erkennen. Die Extension einer Datei ist zwar noch keine hundertprozentige Garantie, dass hinter der Website eine Datenbank steht, aber doch ein ziemlich verlässlicher Hinweis. Sie ist auch ein Hinweis darauf, welche Technologie verwendet wird, um die Site dynamisch zu machen. Es gibt zwei verbreitete Ansätze, um dynamische Websites zu erzeugen: den Einsatz von CGI-Scripts und die Verwendung eingebetteter Skriptsprachen.

Traditionelle Programmierung von Web-Applikationen Traditionell konzentrierte man sich bei der Programmierung von Web-Applikationen darauf, spezialisierte Anwendungen zu schreiben, die genau definierte Aufgaben erledigen, die so genannten CGI-Scripts (CGI: Common Gateway Interface). CGI-Scripts sind Anwendungen, die sich im Prinzip nicht von den Programmen unterscheiden, die Sie lokal auf Ihrem Rechner einsetzen, nur dass sie auf einem Server installiert sind. Es sind Programme wie andere auch, nur verwenden sie ein HTML-Interface. Das Hauptproblem von CGI-Scripts ist, dass sie eine Menge Speicherplatz auf dem Server beanspruchen. Eine typische Perl-Anwendung (Perl ist die am weitesten verbreitete Programmiersprache für CGI-Scripts) belegt ungefähr 5 MB RAM. Für einen modernen UNIX- oder NT-Server ist das noch kein Problem, wohl aber das ständige Laden des Programms in den Arbeitsspeicher und das anschließende Löschen. Diese ständigen Ladeund Löschvorgänge machen CGI-Applikationen weit ressourcenhungriger als eingebettete Scriptsprachen, auf die wir im Anschluss eingehen. Bevor sich jetzt allgemein Unmut breit macht, möchte ich darauf hinweisen, dass man das Perl-Problem elegant umgehen kann. Mit der mod_perl-Library für den Apache-Webserver bzw. dem Perl-Add-on von ActiveState für den IIS kann man einen Perlinterpreter in den Webserver integrieren. So muss nicht jedes Mal ein eigener Perl-Prozess gestartet werden, wenn ein CGI-Script aufgerufen wird. CGI-Scripts werden normalerweise programmiert, um eine genau definierte Aufgabe auszuführen. Auf meiner Website unter http://jray.ag.ohio-state.edu/ finden Sie ver-

223

Einführung in dynamische Webanwendungen und Datenbankentwicklung

schiedene solcher CGI-Scripts. Es handelt sich nicht um die üblichen seitenlangen Webapplikationen, sondern sie sind für einen speziellen Einsatzzweck geschrieben (Besucherstatistiken, grafische Netzwerkanalyse usw.). Der »Pferdefuß« an den herkömmlichen CGI-Programmiersprachen ist, dass sie nicht für die Programmierung von Webapplikationen konzipiert wurden. Wofür Sie bei einer herkömmlichen CGI-Applikation mehrere Dutzend Zeilen Code brauchen, lässt sich mit eingebetteten Scriptsprachen vielleicht mit einer einzigen Zeile erledigen. Wenn Sie Erfahrung mit CGI-Scripts haben, werden Sie feststellen, dass der Einsatz von eingebetteten Sprachen den Sourcecode drastisch verkürzen kann.

In den HTML-Code eingebettete Scriptsprachen Eingebettete Scriptsprachen sind die Nachfolger der CGI-Sprachen. In puncto Benutzerfreundlichkeit und Leistungsumfang übertreffen sie herkömmliche CGI-Scripts bei weitem. Der Hauptunterschied zwischen CGI-Scripts und eingebetteten Scriptsprachen lässt sich am besten an der Frage festmachen, wer sozusagen die »Oberhoheit« über den Code hat. Bei CGI-Scripts steht der Code unter der Regie der Programmiersprache, die das HTML-Dokument erzeugt. Bei eingebetteten Sprachen steuert das HTML-Dokument den Code. Statt also erst ein Programm zu schreiben, das dann anschließend eine HTMLDatei ausgibt, schreiben Sie gleich den erforderlichen HTML-Code und setzen dort, wo Elemente dynamisch verändert werden sollen, den entsprechenden Anwendungscode ein. Auch hinsichtlich der Abarbeitung unterscheiden sich die Programmiersprachen. Eingebettete Sprachen werden vom Server abgearbeitet, wenn er die Seite an den Client schickt. Hierzu muss kein externes Programm aufgerufen werden. Der Interpreter für die Sprache ist in den Server selbst eingebunden. Das macht eingebettete Sprachen höchst effektiv, was Geschwindigkeit und Ressourcenbedarf angeht. Ein anderer fantastischer Vorteil von eingebetteten Sprachen ist, dass man mit ihnen direkt auf Datenbanken zugreifen kann. Datenbankunterstützung wurden bei den meisten Programmiersprachen erst nachträglich integriert. Die Entwickler eingebetteter Sprachen erkannten jedoch frühzeitig das Potenzial, das im direkten Zugriff auf Datenbanken aus dem HTML-Code heraus liegt und integrierten dieses Feature von vorneherein in diese Sprachen. Geschwindigkeit und leichte Anwendbarkeit sind nur zwei der Vorteile dieser optimal aufeinander abgestimmten Technologien. Die Kombination von eingebetteten Scriptsprachen und HTML-Code bietet also große Vorteile. In den letzten zwei Jahren sind eingebettete Sprachen daher zu einem wahren Siegeszug angetreten und werden mittlerweile auf breiter Front eingesetzt. UltraDev unterstützt drei Typen eingebetteter Scriptsprachen und ist somit flexibel einsetzbar. Außerdem erlaubt das Programm als eines der ersten dieser Art eine Live-Vorschau dynamischer Websites.

224

Dynamische Sites verstehen

6.2

Dynamische Sites verstehen

Auch wenn es vielleicht den Anschein hat, dass sich die Entwicklung einer dynamischen Website bis auf den Punkt, dass sie eine HTML-Oberfläche benötigt, in nichts von der Programmierung einer anderen Anwendung unterscheidet, so ist hierbei doch eine völlig andere Vorgehensweise vonnöten. Was den Entwicklern von Web-Applikationen das Leben etwas vergällt, ist das HTTP-Protokoll. Was geschieht zum Beispiel, wenn Sie eine Anwendereingabe entgegennehmen, sie verarbeiten, eine weitere Information abfragen, sie verarbeiten und dann das Ergebnis ausgeben? Mit einer gewöhnlichen Programmiersprache ist das kein Problem. Sie strukturieren den Programmablauf genau in der Reihenfolge, wie die einzelnen Bearbeitungsschritte ausgeführt werden sollen. Soll eine Anwendung im Web laufen, müssen Sie an die Programmierung anders herangehen. Der Grund liegt darin, dass immer nur ein Programmschritt auf einmal implementiert werden kann und dass diese Programmschritte irgendwie miteinander verknüpft werden müssen. Nun ist aber das HTTP-Protokoll ein verbindungsloses Protokoll, und zwischen Client und Server besteht zwischen dem Aufruf von zwei dynamisch erzeugten Seiten keine Verbindung. Jede einzelne Seite, die ausgegeben wird, ist – sofern sie dynamisch erzeugt wurde – das Ergebnis der individuellen Ausführung eines Programms auf dem Server. Wenn der Anwender ein Formular abschickt, geht es an den Server, wird dort abgearbeitet und an den Anwender wird eine Ergebnisseite übermittelt. Nach der Übertragung sind die Daten auf dem Server nicht mehr existent und die Verbindung zwischen Client und Server wurde gelöscht. Also, was tun, wenn Sie diese Daten eigentlich für weitere Operationen benötigen? Um eine konstante Verbindung zwischen Client und Server über mehrere Anwenderzugriffe hinweg aufrecht zu erhalten, müssen Sie die Eigenheiten des HTTP-Protokolls überlisten und mit einem so genannten Session-Management arbeiten. Einfach ausgedrückt ist das Session-Management ein Trick, um zwischen dem Anwender und dem Webserver eine permanente virtuelle Verbindung einzurichten, während in Wirklichkeit keine dauerhafte Verbindung besteht. Für die Realisierung eines Session-Managements können Sie zwischen zwei Möglichkeiten wählen – dem Einsatz von Cookies und der Übergabe von Variablen.

Variablenübergabe Variablenübergabe ist eine Möglichkeit, die Werte von verschiedenen Variablen von einem HTML-Dokument an das nächste weiterzugeben. Sie kennen sicher URLs wie die folgende, die sich nicht auf eine bestimmte statische HTML-Seite beziehen: http://www.someplaceurl.com/test.jsp?firstname=John&lastname=Ray

225

Einführung in dynamische Webanwendungen und Datenbankentwicklung

In diesem Beispiel werden die Variablen firstname und lastname an das Programm test.jsp auf dem Server mit den Werten John bzw. Ray übertragen. Sollen bei einer Anwendung Daten zwischen Seiten übergeben werden, kann man diese Werte in Variablen ablegen und an den Link anhängen, der diese Seite aufruft. Wird der Link aktiviert, werden die Daten »weitergereicht«. Man bezeichnet diese Art der Variablenübergabe als GET-Methode. Sie wird häufig verwendet, doch erzeugt sie hässliche Monster-URLs, die zudem manchmal unerwünschte Einblicke ins Innenleben einer Website zulassen. Ein weiterer Nachteil ist, dass beim Bookmarken von Seiten, die mit der GET-Methode erzeugt wurden, diese Variablen mit abgelegt werden. Werden diese Seiten nun wieder aufgerufen, werden auch die Variablen wieder mitgesendet, die beim ersten Aufruf der Seite vom Webserver erzeugt wurden. Der Vorteil der Variablenübergabe per GETMethode ist, dass man die erforderlichen Links gut von Hand erzeugen kann. Parameter aus Datenbankabfragen oder an anderer Stelle eingegebene Benutzerdaten lassen sich so problemlos in einen Link schreiben. Es folgt ein Codebeispiel für einen Request an den Webserver unter Verwendung der GET-Methode: GET / thetest.jsp?firstname=John&password=notonyourlife&lastname=Ray&action=transferbank funds HTTP/1.0 Host: poisontooth.com: User-Agent: Johnclient.pl (Linux)

Daten lassen sich alternativ auch per POST-Methode übergeben. Sie wird gewöhnlich dann verwendet, wenn man Formulardaten an den Server übermitteln möchte, ohne dabei sämtliche Daten in die URL einbetten zu müssen. Gerade bei sehr umfangreichen Formularen ist es nicht wünschenswert, Daten per URL zu übergeben. Die POST-Methode sendet Daten als Teil der Request-Mitteilung an den Server. POST /thetest.jsp HTTP/1.0 Host: poisontooth.com: User-Agent: Johnclient.pl (Linux) Content-type: application/x-www-form-urlencoded Content-Length: 75 firstname=John&password=notonyourlife&lastname=Ray&action=transferbankfunds

Wie Sie sehen, sind die Unterschiede zwar klein, aber umso weitreichender. Abgesehen davon, dass der resultierende HTML-Code übersichtlicher ist, können auch größere Datenmengen per Formular an das Programm übergeben werden. Mit dem POST-Befehl können Sie jedoch nur dann Daten per HTML übergeben, wenn Sie Formulare benützen. Sie können nicht selber eine URL erzeugen und damit per POST-Befehl Daten übergeben. Dadurch lässt sich die POST-Methode nur begrenzt einsetzen. Verwenden Sie jedoch eine Reihe von Formularen, die der Anwender ausfüllen soll, ist die POST-Methode sehr nützlich.

226

Dynamische Sites verstehen

Sitzungsvariablen Egal für welche Art der Variblenübergabe Sie sich letztlich entscheiden, das Problem, wie Sie Ihre Daten verwalten, ist damit noch nicht gelöst. Wenn Sie z.B. eine WarenkorbFunktion programmieren wollen, die alle gekauften Waren in einer Einkaufsliste speichert, wäre es nicht gerade effizient, eine Warenkorb-Variable zu definieren, an diese Variable dann alle Bestellnummern zu hängen und dann per URL an die nächste Seite zu übergeben. Zur Übergabe dieser Informationen empfiehlt sich die Verwendung von Sitzungsvariablen. Sitzungsvariablen sind virtuelle Variablen, die für die Dauer einer Anwendungssitzung vergeben werden. In Sitzungsvariablen lassen sich beliebige Werte ablegen, die nur für die jeweilige Sitzung gültig sind. Da sich die Dauer einer Anwendersitzung nicht vorhersagen lässt, werden die Variablen gelöscht, sobald der Anwender die Seite wieder verlässt. Manchmal werden Sitzungsvariablen auch zeitabhängig gelöscht. Der Anwender wird dann automatisch vom System ausgeloggt, und die gespeicherten Informationen werden gelöscht. Haben Sie nicht auch schon mal einen Webshop besucht und ein paar Dinge in Ihren Einkaufskorb gelegt, um sie dann schließlich doch nicht zu kaufen? Wahrscheinlich haben Sie dann Ihren Einkaufswagen nicht geleert, sondern einfach das Browserfenster geschlossen. Falls Sie dann am nächsten Tag nochmal auf die Site gegangen sind, war Ihr Einkaufskorb wahrscheinlich leer, d.h., die Sitzungsvariable wurde gelöscht. Sitzungsvariablen können, wenn sie intelligent eingesetzt werden, sowohl dem Anwender als auch dem Programmierer das Leben leichter machen. Man kann damit sowohl komplexere als auch sicherere Anwendungen schreiben, als das unter der Verwendung der üblichen Art der Variablenübergabe möglich wäre. Werden Anwendungen mit Sitzungsvariablen aber nicht sauber programmiert, kann sich der Effekt ins Gegenteil verkehren. Bei den meisten Programmiersprachen, die die Definition von Sitzungsvariablen gestatten, können Sie die vollständige Warenkorbstruktur in einer einzigen Variablen abbilden. Das ist zwar möglich, kann aber den Server schon mal in die Knie zwingen. Komplexe Strukturen, die in einer einzigen Variablen abgelegt werden, müssen zuerst serialisiert, d.h. in eine Datenfolge umgewandelt werden, die auf dem Server gespeichert werden kann. Wird die Information nun aus irgendeinem Grund noch einmal abgerufen, muss sie wieder zurückkonvertiert werden. Laufen mehrere solcher Prozesse simultan ab, kann ein Server in puncto Rechenzeit und Ressourcen schon mal an seine Grenzen kommen. Es empfiehlt sich daher, Datenbanken so zu modellieren, dass sie die Struktur der Daten logisch abbilden, und für den Zugriff auf die einzelnen Datensätze jeweils eigene Sitzungsvariablen zu definieren. Der Webserver kann dann sämtliche Daten an den Datenbankserver weitergeben und wird dadurch entlastet.

227

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Ein weiterer Variblentyp, der bei dynamischen Anwendungen zum Einsatz kommt, ist die so genannte Applikationsvariable. Dieser Typ von Variable wird für sämtliche Anwendersitzungen definiert und kann von der gesamten Webanwendung jederzeit abgerufen werden. Ähnlich globalen Variablen gelten Applikationsvariablen als wenig sinnvolles Konzept. Zur Erstellung interner Statistiken von Webanwendungen können sie jedoch recht nützlich sein. Über Session-IDs lassen sich Anwendersitzungen eindeutig identifizieren. Sie sind eine »Gedächtnisbrücke« für den Server, die ihm hilft, sich an bestimmte Werte wieder zu »erinnern«, die der Anwender während einer Session bereits eingegeben hat. Für den Programmierer heißt das, dass er lediglich eine ID von einer Seite zur nächsten übergeben muss, mehr nicht. Leider gibt's auch hier ein kleines Problem mit der Bookmark-Funktion des Browsers. Wird eine URL mit einer Session-ID in der URL als Lesezeichen abgespeichert, kann es – je nachdem, wie die Anwendung konfiguriert ist – zu Fehlermeldungen wie »session expired« oder nicht vorhersehbaren Fehlfunktionen kommen, wenn die Seite wieder aufgerufen wird. Die perfekte Lösung wäre, wenn man das Session-Management so handhaben könnte, dass man Variablen ohne spezielle Programmierung weitergeben kann und die Vorgänge für Anwender und Programmierer transparent sind. Und diese Möglichkeit gibt es: Cookies.

Cookies Cookies sind eine Möglichkeit, wie eine Webanwendung auf dem Clientrechner Informationen ablegen und wieder auslesen kann. Bei vielen Anwendern läuten beim Thema Cookies allerdings die Alarmglocken. Wenn Cookies auf meinem Rechner Daten ablegen können, wer garantiert mir dann, dass sie nicht irgendwelche unerwünschten Transaktionen vornehmen und Daten auf meinem Rechner zerstören? Nun, das ist schon der schlichten Dateigröße wegen nicht möglich. Cookies können gerade mal einige Tausend Bytes haben – was kaum ausreicht, um eine größere Menge an sinnvollen Informationen zu speichern, geschweige denn ganze Programme. Zudem werden Cookies in einer eigenen Datei gespeichert. Sie können diese Datei jederzeit öffnen und ihre Inhalte überschreiben oder löschen. Als Netscape-Anwender können Sie nach der Datei cookies.txt suchen, verwenden Sie den Internet Explorer, sehen Sie im Ordner Cookies im Windowsverzeichnis nach. Nachfolgend ein Ausschnitt aus meiner eigenen Cookie-Datei: #Netscape HTTP Cookie File #http://www.netscape.com/newsref/std/cookie_spec.html #This is a generated file!Do not edit.

228

Dynamische Sites verstehen

free.aol.com FALSE /tryaolfree FALSE 993674880 user 31031923 .excite.com TRUE / FALSE 1057815167 mesp_popup y2k%fDyes .excite.com TRUE / FALSE 1057815167 UID 9A7BF6F2Df023B94 .excite.com TRUE / FALSE 1057815167 registered no .doubleclick.net TRUE / FALSE 1920499223 id 8bccs8ce .deja.com TRUE / FALSE 1102550463 GTUID 04.48861.3.0.f.4363

Jede kommerzielle Website verwendet aus dem einen oder anderen Grund Cookies. Meine Cookie-Datei zählt momentan gut 400 Cookies, obwohl ich meistens technikorientierte Sites ansurfe und nichts online einkaufe. Ein weiterer Vorbehalt gegen Cookies ist, dass man mit ihrer Hilfe das Surfverhalten von Anwendern über mehrere Websites hinweg verfolgen kann. Für manche Sites ist das zwar richtig, aber nur, weil diese Sites untereinander kooperieren. Cookies sind so konzipiert, dass die darin gespeicherte Information nur von der Site ausgelesen werden kann, die das Cookie gesetzt hat. Damit soll Datenklau seitens anderer Webanwendungen verhindert werden. Für die einzelne Site ist es jedoch sehr wohl möglich, die Aktionen des Anwenders zu rekonstruieren. Und das ist ja genau das, was wir erreichen wollen: bestimmte Vorgänge auf der Website einem einzelnen Anwender zuordnen. Mithilfe von Cookies kann der Programmierer ohne besonderen Programmieraufwand Variablen setzen, auf die von jeder Seite der Website aus zugegriffen werden kann. Cookies werden mit einer Pfadangabe gesetzt. Seiten, die innerhalb dieses Pfades stehen, haben Zugriff auf das Cookie. Den folgenden Code schickt eine Website an den Browser mit der Anfrage, ob ein Cookie gesetzt werden darf: Set-Cookie: SESSION=3424; path=/shopping

Sobald das Cookie gesetzt ist, wird jedes Mal, wenn der Client eine URL anfordert, die innerhalb des Verzeichnisses »Shopping« steht, an den Server folgende Mitteilung geschickt: Cookie: SESSION=3424

Mit der Anweisung path=/ definiert die Webanwendung, wann und von welchen Seiten aus der Client die Cookie-Information an die Webanwendung zurückschickt. Wie sieht nun der typische Einsatz von Cookies in Webanwendungen aus? Sind sie ein »Speichermedium«, das sämtliche Informationen aufnimmt, die zwischen den einzelnen Seiten einer Webanwendung übergeben werden müssen? Das wird wohl nur in den seltensten Fällen so sein, wenn die Informationsmenge so gering ist, dass man diese Daten am besten direkt in ein Cookie schreibt. Arbeiten Webanwendungen mit Sitzungsvariablen, dienen Cookies gewöhnlich der Speicherung der vergebenen Session-IDs. Eine Frage wird zwangsläufig immer wieder gestellt: »Soll ich auf meiner Website mit Cookies arbeiten?« Ich persönlich halte Cookies für eine wunderbare Sache, um mit dem geringsten Programmieraufwand dem Besucher ein

229

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Höchstmaß an Anwendungsfreundlichkeit zu bieten. Wenn Sie Ihre Besucher darüber aufklären, warum und wie Sie Cookies einsetzen, dürfen Sie auch mit entsprechender Akzeptanz rechnen. Die Alternative zu Cookies wäre, mit Variablenübergabe zu arbeiten, eine in meinen Augen alles andere als verlockende Perspektive. Bei den verschiedenen Webanwendungen, die wir im Laufe dieses Buches noch gemeinsam entwickeln werden, werden wir jeweils die Techniken verwenden, die für den jeweiligen Zweck am sinnvollsten sind. Mit UltraDev können Sie beide Varianten des Session-Managements automatisieren. Das Programm erlaubt sowohl die Verwendung von Cookies als Art globaler Variable als auch die Übergabe von Variablen an die nächste Seite per Link.

6.3

Dynamische Websites kreieren

Die Entscheidung, ob und wann man eine Website um dynamische Funktionen erweitert, sollte nicht überstürzt getroffen werden. Ich habe Websites betreut, die aus den unterschiedlichsten Gründen als statische Websites konzipiert und umgesetzt wurden. Die monatliche Aktualisierung dieser Sites erfordert nun aber jedes Mal mehrere Arbeitsstunden, um alle betroffenen Seiten auf den neuesten Stand zu bringen. Je umfangreicher solche Sites mit der Zeit werden, desto aufwändiger wird es, sie zu warten, und umso größer werden die Schwierigkeiten, sie dynamisch an eine Datenbank anzubinden. Es empfiehlt sich dringend, für jede Website, die aus mehr als einem HTML-Dokument besteht, eine Sitemap anzulegen, auch wenn dies am Anfang völlig überflüssig erscheint. Eines vielleicht gar nicht so fernen Tages werden Sie ganz froh darüber sein.

Verschiedene Typen dynamischer Websites Wenn abzusehen ist, dass eine Website häufig aktualisiert werden muss, ist sie ein »Bilderbuchkandidat« für eine Datenbankanbindung. Dynamische Websites entlasten den Bearbeiter von der lästigen Pflicht, jedes Mal den gesamten HTML-Code aktualisieren zu müssen, wenn sich ein Inhalt ändert. Sie müssen nur einmal eine Dateneingabemaske erstellen, mit der sich dann ebenso leicht arbeiten lässt wie mit einer gewohnten OfficeAnwendung. Auch Sites, bei denen größere Mengen an Benutzerdaten anfallen, eignen sich gut zur Dynamisierung. Erstaunlich oft werden die Ergebnisse von Anwenderbefragungen und Kundenkommentare einfach als E-Mails zusammengefasst und an den Betreiber der Site weitergeleitet. Einige Hundert CGI-Applikationen sind in der Folge damit beschäftigt, diese per Formular gewonnenen Daten in lesbaren Text umzuwandeln und dann per

230

Dynamische Websites kreieren

E-Mail an ein Wesen aus Fleisch und Blut zur endgültigen Bearbeitung weiterzuleiten. Da ist es dann interessant zu hören, dass es eigens Programme gibt, die solche per Webanwendung generierten E-Mails zur leichteren Bearbeitung auf Empfängerseite aufbereiten und in Datenbanken speichern. Wäre es da nicht viel einfacher, diese Daten nicht gleich von Anfang an in einer Datenbank zu erfassen, anstatt den Umweg über Formular zu E-Mail und von E-Mail zu Datenbank zu gehen? Ähnlich verhielt es sich bei einigen großen kommerziellen Sites, an deren Redesign ich mitgearbeitet habe. Anfragen zu Produkten oder andere Daten, die ein Anwender in ein Formular auf der Website eingeben hatte, wurden per E-Mail an den Betreiber der Site weitergeleitet. Dort wurden die E-Mails vom Systemadministrator ausgedruckt und an die verschiedenen Kundenbetreuer zur endgültigen Bearbeitung weitergeleitet. Das ist eigentlich nicht die Art von Prozedere, an die man beim Wort E-Commerce denkt. Hier zeigte sich einmal mehr, wie schwierig es ist, bestimmte Praktiken wieder auszumerzen, wenn sie sich erst einmal eingeschliffen haben. Und schließlich eignen sich alle Websites zur Umstellung auf Datenbanken, die große Mengen von Information hosten (und die für den Anwender gut navigierbar gemacht werden sollen). Hat der Anwender z.B. die Möglichkeit, ganze Bücher zu durchsuchen und sich die Ergebnisse strukturiert anzeigen zu lassen, so ist dies für den Nutzwert natürlich unvergleichlich höher, als nur den reinen Text zur Verfügung zu stellen oder allgemeine Informationen über das Buch. Kann der Anwender seine Suchabfragen selbst definieren, wird eine Webdatenbank zu einem fantastischen Recherchewerkzeug.

Die Planung von dynamischen Websites Der erste Schritt zur Umsetzung einer dynamischen Website besteht in der gründlichen Planung. Wenn Sie schon im Vorfeld die richtigen Entscheidungen treffen, kann Ihnen das später so manches graue Haar ersparen – es ist nämlich alles andere als leicht, eine bis dato statische Website datenbankgerecht aufzubereiten. Tatsächlich können Sie sich gar nichts Schlimmeres antun, als eine Website zunächst statisch anzulegen und sich dann im Nachhinein doch dafür zu entscheiden, die Site an eine Datenbank anzubinden. Je umfangreicher und vielschichtiger eine Site wird, desto stärker sind HTML-Code und Inhalt ineinander verzahnt. In solchen Fällen lässt sich der Übergang von der statischen Website zur dynamischen Webanwendung meistens nur durch völlige Neugestaltung bewältigen. Nachfolgend wird auf die einzelnen Planungsschritte eingegangen.

Eine Sitemap anlegen Erstellen Sie eine detaillierte Sitemap der Website mit allen Bereichen und einer kurzen Beschreibung der Inhalte, die unter diesen Bereichen liegen. Die Sitemap ist das A und O bei der Planung und Umsetzung einer jeden Website, und für dynamische Websites gilt

231

Einführung in dynamische Webanwendungen und Datenbankentwicklung

das noch in weit höherem Maße. Wenn Sie sämtliche Seiten und ihre wechselseitigen Bezüge in einem klaren Struktogramm erfassen, können Sie damit auch gut die Beziehungen erkennen, die zwischen den Daten dieser Seiten bestehen.

Mehrfach vorhandene Informationen ermitteln Stellen Sie fest, ob und welche Informationen in den jeweiligen Bereichen mehrfach vorhanden sind. Häufen sich solche Elemente oder sind sie sehr umfangreich, kann man sie in einer Datenbank ablegen. Bei der Identifizierung solcher Elemente sollten Sie natürlich den gesunden Menschenverstand walten lassen. Nur weil das Wörtchen »der« 19 Mal auf einer Seite vorkommt, sollten Sie es nicht bei jedem Auftreten aus der Datenbank abrufen. Adressen, Kontaktinformationen, Telefonnummern u.ä. – das sind unsere Kandidaten, die sich zur Aufnahme in die Datenbank empfehlen.

Auf Listen überprüfen Überprüfen Sie, ob es irgendwelche Listen mit Informationen gibt, die mehr als einige wenige Einträge umfassen. Listen sind eigentlich schon eine Art Datenbank, nur sind sie nicht in elektronischer Form gespeichert. Auf jeder Website gibt es z.B. Linklisten oder Listen von Presseberichten. Diese Listen werden meistens von Mitarbeitern der Firma gepflegt und nicht von der betreuenden Internetagentur. In den Firmen, mit denen ich zu tun hatte, erledigten das die PR- bzw. die Personalabteilung, die die neuen Daten dann an die Agentur weitergaben. Je länger die Liste war, desto häufiger waren auch doppelte Einträge.

Häufige Änderungen lokalisieren Finden Sie heraus, ob es auf den verschiedenen Seiten Elemente gibt, die häufig verändert oder aktualisiert werden müssen. Der »Lesetipp der Woche« oder ähnliche kurzfristig wechselnde Aufmacher lassen sich gut über eine Datenbank generieren. Ist die Werbeaktion abgelaufen, kann das Buch – um bei diesem Beispiel zu bleiben – in den Archivbereich der Site verschoben werden, sodass sich Interessenten auch später noch über diesen Titel informieren können. Das Wichtigste bei der Planung datenbankgestützter Websites ist der Grundsatz der Verhältnismäßigkeit. Es gibt keine unfehlbaren Gesetze, wann und unter welchen Umständen eine Website an eine Datenbank angebunden werden sollte oder nicht. Besteht Ihre Site nur aus zwei oder drei HTML-Dokumenten, lohnt es den Aufwand nicht, einen Datenbank- bzw. Anwendungsserver aufzusetzen, um sie ins Netz zu stellen. Bei so kleinen Sites ist manuelle Datenpflege das Mittel der Wahl. Als professioneller Webdesigner werden Sie allerdings von Kundenseite oft mit der Forderung konfrontiert, dass mit der erstellten Website kein hoher Wartungsaufwand verbunden

232

Datenbankentwurf

sein soll. Selbst in diesen Zeiten des Internetbooms möchten die Leute möglichst wenig mit HTML und allem, was damit zusammenhängt, zu tun haben. Die Einrichtung eines Datenbank-Backends ist in solchen Fällen die einfachste Lösung, die Informationen auf der Site von einer Anwendung aus zu verwalten. Der Kunde kann somit seine Website stets auf dem neuesten Stand halten, ohne an irgendeinem Punkt mit dem Code in Berührung zu kommen. Und schließlich gibt es noch die Leute, die einfach jeder Mode hinterher rennen. Und bei Websites geht der Trend augenblicklich weg von statischen und hin zu dynamischen, datenbankgestützten Anwendungen. In dieser Hinsicht habe ich durchaus schon einige unangenehme Erfahrungen gemacht. Manche Leute wollen einfach nicht einsehen, dass es Fälle gibt, in denen die damit verbundenen Nachteile in keinem Verhältnis zu den wenigen Vorteilen stehen. Statt einfach, um ein Beispiel zu nennen, ein paar Zeilen im HTML-Code anzupassen, muss man nun erst einmal die Datenbank nach dem zugehörigen Datensatz durchsuchen und ihn dann dort ändern. Datenbankgestützte Websites sind in manchen Fällen auch deshalb schwerer zu warten, weil sie, einmal abgesehen von zusätzlich erforderlichen Arbeitsschritten, auch höhere Anforderungen an das Know-how des Bearbeiters stellen. Mit einem UNIX-Zugang und einem einfachen Palm Pilot könnte ich mich auf nahezu jedem Server einloggen und Änderungen an einer Website durchführen. Liegen die Daten in einer Datenbank, dann geht das nicht mehr so leicht. Treffen Sie diesbezügliche Entscheidungen nur nach reiflicher Überlegung. Setzen Sie nicht irgendwelche Technologien ein, nur weil Ihnen jemand weismachen will, Sie müssten das tun. Vielleicht realisieren Sie eine statische Website und stellen später fest, dass Sie besser doch eine datenbankgestützte Anwendung erstellt hätten. Doch kann es Ihnen genauso gut passieren, dass Sie eine dynamische Website erstellen, die sich als statische Website besser und einfacher hätte pflegen lassen. Die Kunst besteht darin, den später möglicherweise entstehenden Schaden möglichst gering zu halten.

6.4

Datenbankentwurf

Doch bevor wir überhaupt eine datenbankgestützte Website ins Netz stellen können, brauchen wir erst einmal ein Datenbank-Backend, aus dem wir unsere Daten holen können. UltraDev liefert kein solches Backend und sucht auch keines für uns aus. Bevor wir also mit UltraDev dynamische Websites entwickeln können, müssen wir auf unserem Rechner zuerst einen Datenbankserver oder zumindest eine Datenbank wie z.B. MS Access installieren. Aber keine Bange, Sie erhalten später eine schrittweise Anleitung, wie Sie eine MySQL-Datenbank einrichten. Diese Datenbank ist für UNIX-Systeme als Freeware und für Windows NT-Rechner als Shareware erhältlich. Somit kann sie auf jeder beliebigen Plattform, eingeschlossen Mac OS X, eingesetzt werden, und das in vielen Fällen unentgeltlich.

233

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Bevor Sie eine Datenbank anlegen, sollten Sie über die Grundlagen des Datenbankenentwurfs Bescheid wissen. Leider ist es nicht damit getan, dass Sie ein paar Werte in eine Tabelle schreiben und das Ganze dann unter dem Namen Datenbank speichern. Zuerst müssen Sie sich eine Strategie überlegen, wie Sie Ihre Daten sinnvoll strukturieren, damit Sie mit der gespeicherten Information effektiv arbeiten können. Lassen Sie uns daher anhand eines Beispiels den Aufbau einer sauberen Datenstruktur nachvollziehen.

Terminologie der Datenmodellierung Wenn Sie eine Datenbank anlegen, sollten Sie auch die damit verbundene Terminologie kennen. Beginnen wir mit dem Wichtigsten: Was versteht man unter Normalisierung?

Normalisierung Unter Normalisierung versteht man den Prozess, eine Menge von Daten so weit zu reduzieren, dass sämtliche Redundanzen, also mehrfach vorhandene identische Datensätze, ausgeschlossen sind. Hierarchische Datenbanksysteme speichern mehr Daten, als tatsächlich erforderlich sind. Durch Normalisieren wird diese monolithische Datenstruktur heruntergebrochen in mehrere kleinere, besser handhabbare »Datenpakete«. Ziel der Normalisierung ist es, Redundanzen auszuschließen und die Aktualisierung des Datenbestands zu vereinfachen. Der Prozess der Normalisierung erfolgt in mehreren Schritten, wie wir heute noch sehen werden. Diese Schritte kann man als Etappen sehen, um die eine Datenmenge Zug um Zug der endgültigen Form zugeführt wird, die sie dann in der Datenbank haben wird.

Entitäten Entitäten sind so etwas wie ein Oberbegriff, unter dem wir spezielle Daten speichern. Praktisch sind sie gleichbedeutend mit den Tabellen in einer Datenbank. Tatsächlich benennt man die Tabellen einer Datenbank nach diesen aufgestellten Entitäten.

Attribute Entitäten setzen sich aus Attributen zusammen. In gewöhnliche Datenbanksprache übersetzt heißt das, dass Tabellen Felder enthalten. Ein Attribut ist ein Feld innerhalb einer Entität. Sie heißen Attribute, weil sie die Entität näher beschreiben. Die Entität Auto könnte z.B. die Attribute Jahr oder Farbe besitzen.

234

Datenbankentwurf

Identifikationsschlüssel Unter Identifikationsschlüssel versteht man ein Attribut oder eine Gruppe von Attributen, über die ein bestimmter Datensatz und nur dieser Datensatz eindeutig identifiziert werden kann. Für die Definition eines Identifikationsschlüssels gelten drei feste Vorschriften: 쐽

Der Identifikationsschlüssel muss eindeutig definiert sein und immer einen Wert haben. Er darf also nicht leer sein.

쐽

Identifikationsschlüssel dürfen in allen Datensätzen einer Entität jeweils nur einmal vorkommen. Sie dürfen nicht zwei Datensätze innerhalb einer Entität erzeugen, die denselben Identifikationsschlüssel haben. Wenn also zwei Personen denselben Namen haben, können Sie den Namen nicht als Identifikationsschlüssel verwenden.

쐽

Der Identifikationsschlüssel darf sich nicht ändern. Vielleicht scheint Ihnen das im Moment wenig einleuchtend, aber wir werden auf die Gründe hierfür noch eingehen. Veränderliche Werte eignen sich nicht als Identifikationsschlüssel einer Entität.

Beziehungen Beziehungen sind genau das, was sich im Namen ausdrückt – die Art und Weise der Verbindung, die zwischen zwei Informationen oder Datensätzen besteht. Folgende drei Arten oder Grade der Beziehung sind zwischen Entitäten möglich: 쐽

1:1 – Jeder Instanz einer Entität entspricht genau eine Instanz einer anderen Entität. Dieser Fall ist eher selten, denn 1:1-Beziehungen treten gewöhnlich nur innerhalb einer Entität auf und nicht zwischen zwei Entitäten.

쐽

1:n – Einer Instanz einer Entität entsprechen mehrere Instanzen einer anderen Entität. Die Entitäten Kurs und Raumnummer stehen in einer 1:n-Beziehung, denn von einem bestimmten Raum kann es nur eine Instanz geben, aber dieser Raum kann von mehreren Kursen benutzt werden. Die meisten Datensätze fallen unter diese Art von Beziehung.

쐽

m:n – Eine »Viele-zu-viele«-Beziehung. Mehrere Instanzen einer Entität stehen zu mehreren Instanzen einer anderen Entität in Beziehung. Sie dürfen keine m:n-Beziehungen schaffen, da sonst die Zuordnung von Daten zwischen den verschiedenen Entitäten nicht eindeutig ist. Sollte am Ende Ihrer Normalisierungsbemühungen eine m:n-Beziehung stehen, müssen Sie leider Ihre Datenstruktur noch einmal völlig überarbeiten.

235

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Beispiel für eine Normalisierung Nehmen wir an, Sie möchten eine Datenbank für eine Schule erstellen, die die folgenden Informationen enthält: 쐽

Dozent

쐽

Kurse

쐽

Teilnehmer

쐽

Raumnummern

Der erste Gedanke wäre vielleicht, nun die Datenbank auf der Basis einer einfachen Tabelle zu erstellen und in den Spalten Dozent, Kurse, Teilnehmer und Raumnummern die entsprechenden Informationen einzutragen. Wenn wir das mit ein paar einfachen Datensätzen durchspielen, sehen wir jedoch bald, wo bei diesem Datenmodell das Problem liegt. Werfen Sie einen Blick auf Tabelle 6.1. Name des Dozenten

Kurse

Teilnehmer

Raumnummern

Hr. Müller

Chemie I Chemie II

Franz Feinbein Lieschen Müller Otto Döderlein

112, 113

Hr. Müller

Mathematik I

Otto Döderlein Karl Kraut Rosie Rüstig

010, 314, 112

Fr. Meier

Psychologie im Alltag

Hans Holbein Anna Lieblich Susi Söhnlein

212, 112, 322

Tabelle 6.1: Tabellarische Aufbereitung der gewünschten Informationen

Wie Sie sehen, lassen sich mit dieser Tabelle die vorhandenen Daten zwar bequem erfassen, aber die Art der Erfassung macht sie nicht besonders tauglich für praktische Zwecke. Nehmen wir beispielsweise an, Sie möchten herausfinden, welche Kurse ein bestimmter Teilnehmer besucht. Dazu müssten Sie alle Dozenten durchgehen und die Spalte Teilnehmer überprüfen. Das ist in höchstem Maße Zeit raubend und ineffektiv. Um unser Suchverfahren optimieren zu können, müssen wir unseren Datenbestand normalisieren. Zu diesem Zweck werden wir uns heute mit der ersten, zweiten und dritten Normalform auseinander setzen. Es gibt zwar noch weitere Normalformen, doch die ersten drei sind die wichtigsten. Mit jedem Schritt wird ein höherer Grad der Normalisierung erreicht.

236

Datenbankentwurf

Erste Normalform Um Daten in eine Normalform zu bringen, muss man sie in Entitäten zusammenfassen. Wir beginnen mit der Entität Dozent, unter der wir die Attribute Namen der Dozenten, Kurse, Teilnehmer, Raumnummern ablegen. Abb. 6.1 zeigt die grafische Darstellung der Entität Dozent. Um unser Datenmaterial vollständig zu normalisieren, müssen wir unserem Datenbankmodell noch weitere Entitäten hinzufügen. Am Schluss wird es nicht mehr viel gemeinsam haben mit unserem momentanen Modell. Dozent Name des Dozenten unterrichtete Kurse Teilnehmer Raumnummern

Abbildung 6.1: Die Basisentität Dozent nach dem Ausgangsdatenmodell

Die erste Normalform verlangt, dass alle Entitäten eindeutig sein müssen und alle Attribute nur einfache Attributwerte aufweisen, also nicht mehrfach vorkommen dürfen. Um herauszufinden, ob sich Attribute wiederholen, überprüfen wir einfach, ob irgendwelche Attribute im Plural stehen. Und da haben wir gleich mehrfach Anlass, uns am Kopf zu kratzen: 쐽

Kurse

쐽

Teilnehmer

쐽

Raumnummern

All diese Attribute wiederholen sich und dürfen daher nicht in der Entität Dozent enthalten sein, wenn wir unsere Daten in die erste Normalform bringen wollen. Zu diesem Zweck müssen wir diese Attribute herunterbrechen und in ihrer eigenen Entitätentabelle erfassen. Ferner müssen wir überprüfen, ob alle Attribute in die kleinsten sinnvollen Entitäten aufgesplittet worden sind. So sollten Namen z.B. in Vornamen und Nachnamen aufgeteilt werden. Abb. 6.2 zeigt unsere neue Sammlung von Entitäten, die auch gleich um ein paar Attribute erweitert wurden. Wir haben jetzt also vier verschiedenen Tabellen: Dozent, Kurs, Teilnehmer, Raum. Und weil's grad so schön war, habe ich die Entitäten gleich um ein paar Attribute erweitert: Dozent – vname, nname, status, gehalt Kurs – bezeichnung, zeit, thema, level Teilnehmer – vname, nname, alter, level Raum – nummer, plaetze, einrichtung

237

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Dozent

Kurs

vname nname status gehalt

bezeichnung zeit thema level

Teilnehmer

Raum

vname nname alter level

nummer plaetze einrichtung

Abbildung 6.2: Sich wiederholende Attribute erhalten ihre eigene Tabelle.

Jede Entität ist nun eindeutig und enthält keine sich wiederholenden Attribute. Die Entitäten enthalten sich aber nur selbst und haben keine Beziehung zueinander. Somit können wir aus diesem Datenmodell immer nur die Informationen beziehen, die innerhalb einer Entität abgelegt sind. Damit hat dieses Modell allerdings keinen besonderen praktischen Wert für uns. Um nun die Daten zueinander in Beziehung zu setzen, brauchen wir Identifikationsschlüssel. Lassen Sie uns die einzelnen Entitäten der Reihe nach dahingehend untersuchen, was wir als Identifikationsschlüssel verwenden können. Die Entität »Dozent« muss irgendwie adressiert werden können. Der erste Gedanke wäre vielleicht, die Namen der Dozenten als Identifikationsschlüssel zu verwenden. Aber, so muss man sich fragen, ist dieser Wert immer eindeutig und unveränderlich? Da es sich um Personennamen handelt, muss diese Frage mit Nein beantwortet werden. Selbst wenn dieser Fall aller Wahrscheinlichkeit nach nie eintritt, darf die potenzielle Möglichkeit dennoch nicht gegeben sein, damit das Datenmodell korrekt ist. Aus diesem Grund müssen wir für die Entität Dozent einen eindeutigen Identifikationsschlüssel einführen. Wir tun das mit dem Attribut persNr, also einer Personalnummer. Das kann ein beliebiger Wert sein, solange er eindeutig ist. Die meisten Datenbanken verfügen über eine Autowert-Funktion, die an jeden neuen Datensatz automatisch eine neue Nummer vergibt, sodass die Datensätze fortlaufend durchgezählt werden. In Abb. 6.3 sehen Sie die normalisierte Form der Entität Dozent. Bei der grafischen Darstellung von Datenmodellen werden die Attribute, die als Identifikationsschlüssel dienen, in geeigneter Form optisch hervorgehoben. Die Entität Kurs ist ähnlich problematisch wie die Entität Dozent. Vermutlich werden mehrere Kurse mit derselben Bezeichnung angeboten und finden vielleicht sogar parallel statt. Also brauchen wir auch für die Entität Kurs einen Identifikationsschlüssel. Am leichtesten lösen wir dieses Problem, indem wir für jeden Kurs eine eigene Kursnummer vergeben. Da die meisten Kurse sowieso schon eine Nummer haben, brauchen wir uns hier nicht übermäßig verausgaben. Wenn Sie versuchen, einen Datenbestand zu normalisie-

238

Datenbankentwurf

ren, werden Sie auf Informationen stoßen, die Sie bei der Erstellung des Ausgangsdatenmodells zunächst außer Acht gelassen haben, oder auf andere Daten, die sich nun als plötzlich sehr nützlich erweisen und darum in die Datenbank aufgenommen werden sollten. Mit der Vergabe einer Kursnummer ist die Entität Kurs in der ersten Normalform, zu sehen in Abb. 6.4. Dozent persNr* vname nname status gehalt

Abbildung 6.3: Die Entität Dozent in der ersten Normalform

Kurs kursNr* vname nname zeit thema level

Abbildung 6.4: Die Entität Kurs wird über die Kursnummer eindeutig identifiziert.

In unserem Ausgangsdatenmodell waren die Kursteilnehmer nur »Menschen zweiter Klasse«, denn der einzige Weg, über die Teilnehmer etwas herauszufinden, führte über die Entität Dozent. Erfassen wir die Teilnehmer nun in einer eigenen Entität und damit in einer eigenen Tabelle, können wir mit jedem Datensatz noch zusätzliche Informationen speichern. Wie bei der Entität Dozent haben wir auch hier das Problem, dass Teilnehmer denselben Namen haben können, und die Wahrscheinlichkeit ist sogar größer, da es ja mehr Teilnehmer als Dozenten gibt. Wie bei den Dozenten vergeben wir auch für die Teilnehmer Nummern, um sie eindeutig identifizieren zu können. Heraus kommt die erste Normalform der Tabelle Teilnehmer, zu sehen in Abb. 6.5. Teilnehmer teilnNr* vname nname alter level

Abbildung 6.5: Wie bei der Entität Dozent können auch bei der Entität Teilnehmer Namen mehrfach vorkommen.

Die letzte Entität, die adressiert werden muss, ist die Entität Raum. Mit unserer gegenwärtigen Festlegung haben wir Glück. Da sich ein Raum über seine Raumnummer eindeutig von allen anderen Räumen des Gebäudes unterscheiden lässt, sind wir schon am Ziel unserer Bestrebungen. Sollte sich die Volkshochschule jedoch entschließen, ihre Kurse auf mehrere Veranstaltungsorte zu verteilen, bekämen wir Schwierigkeiten. Wir wollen es

239

Einführung in dynamische Webanwendungen und Datenbankentwicklung

aber heute nicht allzu schwer machen und gehen darum davon aus, dass alle Kurse im selben Gebäude stattfinden. Eine vielleicht nicht ganz realistische Annahme, darum können Sie im Übungsteil zu dieser Lektion das Datenmodell dahingehend anpassen, dass die Kurse auf mehrere Veranstaltungsorte verteilt werden. Die endgültige Form der Entität Raum sehen Sie in Abb. 6.6. Raum raumNr* plaetze einrichtung

Abbildung 6.6: Die Entität Raum ist bereits in der Normalform.

Nachdem alle Entitäten in die erste Normalform gebracht sind und eindeutige Identifikationsschlüssel besitzen, können wir daran gehen, die Beziehungen zwischen den einzelnen Entitäten zu definieren. So erhalten wir ein klareres grafisches Datenmodell und können eventuelle Inkonsistenzen besser lokalisieren. Nehmen wir zum Beispiel die Entitäten Kurs und Raum. Sehen Sie sich die verschiedenen Entitäten an und versuchen Sie, die einzelnen Entitäten mit dem Verb »hat« in Beziehung zu setzen. Im Falle von Kurs und Raum ergäbe das: »Jeder Kurs hat einen Raum«. Auf diesem Weg haben wir unsere erste Beziehung ermittelt. Nach unserem Datenmodell lassen sich die nachstehend aufgeführten Beziehungen ermitteln (grafisch dargestellt in Abb. 6.7): Raum raumNr* plaetze einrichtung

1 Kurs

∞ ∞

kursNr* zeit thema level

Dozent

∞

persNr* 1 vname nname status gehalt

∞ Teilnehmer teilNr* vname nname alter level

240

Abbildung 6.7: Die Beziehungen innerhalb unseres aktuellen Datenmodells. Nicht unproblematisch!

Datenbankentwurf

쐽

Raum/Kurs (1:n) – In einem Raum können mehrere Kurse stattfinden.

쐽

Dozent/Kurs (1:n) – Ein Dozent kann mehrere Kurse geben.

쐽

Teilnehmer/Kurs (m:n) – Ein Teilnehmer kann mehrere Kurse belegen. Ein Kurs

kann mehrere Teilnehmer haben. Mit der Teilnehmer/Kurs-Beziehung sind wir etwas in die Bredouille geraten. Es handelt sich hier um eine Viele-zu-viele-Beziehung, die wir in zwei getrennte Eins-zu-viele-Beziehungen aufbrechen müssen. Hierzu müssen wir eine dritte Entität einfügen, die zwischen den beiden anderen Entitäten sozusagen den Vermittler spielt. Diese neue Entität muss zu den beiden anderen Entitäten in einer 1:n-Beziehung stehen. Im Falle der Entitäten Teilnehmer und Kurs könnten wir die Entität Platznummer einführen und damit den Platz des Teilnehmers in einem bestimmten Kurs definieren. 쐽

쐽

Teilnehmer/Platznummer (1:n) – Ein Teilnehmer kann mehrere Platznummern in verschiedenen Kursen haben. Kurs/Platznummer (1:n) – Ein Kurs kann mehrere Platznummern für Teilnehmer ha-

ben. Raum raumNr* plaetze einrichtung

1

∞

Kurs

Dozent

kursNr* name zeit thema level

∞

persNr* 1 vname nname status gehalt

Abbildung 6.8: Alle Entitäten sind nun in die erste Normalform gebracht und über 1:n-Beziehungen miteinander verknüpft.

1

∞ Platznummer sitzNr*

∞ 1

Teilnehmer teilnNr* vname nname alter level

241

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Damit lösen wir unser m:n-Problem, denn ein Sitzplatz kann nicht von mehr als einem Teilnehmer gleichzeitig besetzt werden, noch können Sitzplätze von mehreren Kursen auf einmal belegt werden. Wir fügen die neue Entität mitsamt ihren Beziehungen in unser grafisches Datenmodell ein und erhalten das in Abb. 6.8 gezeigte Schema. Na, das war jetzt doch Einiges an Gehirnakrobatik. Sie fragen sich vielleicht, was der ganze Aufwand soll, nur um eine simple Datenbank zu entwerfen. Aber – so lehrt die Erfahrung – die Mühe, die Sie in die Entwurfsphase stecken, erspart Ihnen später Einiges an Zeit und Arbeit. Ohne Fleiß gibt's nun mal keinen Preis.

Die zweite Normalform Der Weg zur ersten Normalform war hie und da mit Steinen gepflastert. Im nächsten Schritt müssen wir die Entitäten in die zweite Normalform bringen. Um die Bedingungen für die zweite Normalform zu erfüllen, müssen die Entitäten in einer Form definiert werden, die ermöglicht, dass die einzelnen Attribute (mit Ausnahme des Identifikationsschlüssels) allein vom jeweiligen Identifikationsschlüssel abhängen. Kommen z.B. bestimmte Attribute in verschiedenen Datensätzen einer Entität mehrfach vor, sind also identisch, so sind sie nicht vollständig von einem Identifikationsschlüssel abhängig. Ein Weg, das herauszufinden, ist sich zu fragen: »Wenn sich ein Datum in diesem Datensatz ändert, muss ich es dann in anderen Datensätzen dieser Entität ebenfalls ändern?« Überprüfen Sie unter diesem Gesichtspunkt die verschiedenen Attribute der Entitäten, die wir in unserem Datenmodell aufgestellt haben. In allen Fällen sind sämtliche Attribute von einem Identifikationsschlüssel abhängig. Jeder Datensatz einer Entität kommt nur einmal vor.

Die dritte Normalform Bringt man Daten in die zweite oder dritte Normalform, stößt man immer wieder mal auf Daten, die noch nicht in das Datenmodell integriert sind. Die dritte Normalform bietet weniger Verständnisschwierigkeiten als die zweite. Um die Bedingungen für die dritte Normalform zu erfüllen, muss die Entität bereits in die zweite Normalform gebracht sein und darf keine Attribute enthalten, die in irgendeiner Form voneinander abhängig sind (mit Ausnahme vom ID-Schlüssel). Solche Fälle lassen sich gewöhnlich leicht einkreisen. So gibt es z.B. bei unserer Entität Kurs eindeutig Probleme mit der dritten Normalform. Die Entität Kurs hat die Attribute Name und Thema. Diese beiden Attribute hängen offensichtlich zusammen, also müssen wir die Entität modifizieren, um sie in die dritte Normalform zu bringen. Zu diesem Zweck führen wir eine neue Entität Thema ein, die den Namen des Kurses und sein Thema aufnimmt. Da mehrere Kurse dieselbe Bezeichnung und dasselbe Thema haben können, besteht zwischen Thema und Kurs eine 1:n-Beziehung. Abb. 6.9 zeigt das endgültige Datenmodell.

242

Datenbankentwurf

Unser Datenmodell umfasst nun die folgenden Entitäten: 쐽

Dozent – persNr, vname, nname, status, gehalt

쐽

Kurs – kursNr, zeit, level

쐽

Thema – name, thema

쐽

Teilnehmer – teilnNr, vname, nname, alter, level

쐽

Platznummer – sitzNr

쐽

Raum – raumNr, plaetze, einrichtung

Diese Entitäten und die Beziehungen, die zwischen ihnen bestehen, sind alles, was Sie brauchen, um Datenbanken für dynamische Websites anzulegen.

Vom Entwurf zur Datenbank Haben wir unser Datenbankmodell auf dem Papier konzipiert, ist die Datenbank selbst damit noch nicht vollständig definiert. Wir müssen unsere Informationen noch irgendwie aufbereiten, um die physikalische Datenbankstruktur anlegen zu können. Diese Struktur ist den Entitäten nicht unähnlich, die wir definiert haben, aber wir müssen noch Mittel und Wege finden, wie wir die Beziehungen zwischen ihnen beschreiben. Die Definition mehrerer Tabellen mit den gewählten Attributen reicht offensichtlich nicht aus, um diese Tabellen untereinander zu verknüpfen. Hierzu müssen wir uns noch mit dem Konzept der Schlüssel auseinander setzen.

Datenschlüssel definieren Um unser Datenbankmodell zu komplettieren, brauchen wir noch so genannte Schlüssel, von denen es zwei verschiedene Typen gibt. Der erste ist der so genannte Primärschlüssel, den wir schon kennen gelernt haben, als wir den Identifikationsschlüssel der einzelnen Entitäten definiert haben. Über den Primärschlüssel kann das Datenbanksystem Datensätze eindeutig erkennen. Mit der Definition eines eigenen Schlüssels für jeden Datensatz haben wir eigentlich nichts anderes getan, als jeder Entität ein weiteres, eindeutiges Feld hinzuzufügen. Es wäre aber auch eine andere Vorgehensweise denkbar, vor allem dann, wenn eine Entität auf der »n-Seite« einer 1:n-Beziehung steht. Man kann nämlich verschiedene Attribute einer Entität sozusagen gruppieren und als Primärschlüssel definieren. Ein Beispiel: Der Nachname einer Person kann mehrfach vorkommen und ist daher kein eindeutiges Merkmal, könnte es aber in Verbindung mit anderen Attributen werden. So ist es höchst unwahrscheinlich, dass der Name einer Person in Kombination mit Anschrift und Geburtsdatum nicht eindeutig ist.

243

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Raum raumNr* plaetze einrichtung

1

∞

Thema

Kurs

tname* thema

kursNr* zeit level

1

∞

Dozent

∞

persNr* 1 vname nname status gehalt

1

∞

Platznummer sitzNr*

∞ 1 Teilnehmer teilnNr* vname nname alter level

Abbildung 6.9: Nun ist unser Datenmodell in der dritten Normalform.

Primärschlüssel haben wir also schon verwendet und sie stellen auch kein Verständnisproblem dar. Die zweite Art von Schlüssel, die wir brauchen, ist der so genannte Fremdschlüssel. Mit ihm kommt Bewegung in unsere träge Datenmasse, denn er definiert die Beziehungen zwischen den verschiedenen Entitäten. Der Fremdschlüssel ist nichts anderes als der in einer Entität gespeicherte Primärschlüssel einer anderen Entität. Er macht die Beziehung zwischen diesen beiden Entitäten sozusagen amtlich. Für alle Beziehungen muss auf der »n-Seite« einer Beziehung ein Fremdschlüssel festgelegt werden. Für unser Datenmodell haben wir die folgenden Beziehungen definiert: 쐽

Raum/Kurs (1:n) – In einem Raum können mehrere unterschiedliche Kurse stattfinden.

쐽

Dozent/Kurs (1:n) – Ein Dozent kann mehrere Kurse geben.

쐽

Teilnehmer/Platznummer (1:n) – Ein Teilnehmer kann mehrere Platznummern haben.

244

Datenbankentwurf

쐽

Kurs/Platznummer (1:n) – Ein Kurs hat mehrere Plätze für Teilnehmer.

쐽

Thema/Kurs (1:n) – Ein Thema kann in mehreren Kursen behandelt werden.

In all diesen Fällen muss die »n-Seite« den Primärschlüssel der »1-Seite« erben. Wird ein Primärschlüssel in einer anderen Tabelle gespeichert als in der, in der er definiert wurde, spricht man von ihm als Fremdschlüssel. So müssen wir z.B. in der Entität Kurs das Attribut Raumnummer mit speichern, das wir von der Entität Raum übernehmen. Damit werden die 1:n-Beziehungen der Entität komplettiert. Diesen Schritt müssen wir für alle anderen Entitäten ebenfalls durchführen. Wenn Sie möchten, können Sie das jetzt durchspielen. Abb. 6.10 zeigt das endgültige grafische Modell unserer Datenstruktur. An diesem Punkt haben wir die Daten so weit geordnet, dass wir sie als saubere SQL-Datenbank anlegen können. Raum raumNr* plaetze einrichtung

Thema tname* thema

1

Kurs 1

1

∞

kursNr* raumNr tname persNr level

Dozent

∞ ∞

1

persNr* vname nname status gehalt

Platznummer

∞

sitzNr* kursNr teilnNr

∞

Teilnehmer teilnNr* vname nname alter level

1

Abbildung 6.10: Das endgültige Datenbankmodell

245

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Die fertige SQL-Datenbank In einer späteren Lektion (Tag 12, »Komplexe Datenbankabfragen«) werden Sie etwas über die Datenbank-Abfragesprache SQL lernen. Im Moment wollen wir uns mit einem Blick darauf begnügen, wie unser Datenbankmodell in SQL aussieht. Die Entitäten unseres Modells bilden die Tabellen der Datenbank, die einzelnen Attribute werden zu den Feldern der Tabelle. Es dürfte nicht schwer fallen, die Bezüge zwischen Modell und SQL nachzuvollziehen. create table raumTbl ( raumNr int not null, plaetze int, einrichtung varchar(50), primary key (raumNr) ) create table dozentTbl ( persNr int not null, vname varchar(25), nname varchar(25), status varchar(50), gehalt int, primary key (persNr) ) create table kursTbl ( kursNr int not null, thema varchar(50), persNr int, raumNr int, time time, level int, primary key (kursNr) ) create table themaTbl ( name varchar(50) not null, thema varchar(250), primary key (name) ) create table teilnTbl ( teilnNr int not null, vname varchar(25), nname varchar(25), alter int, level int, primary key (teilnNr) ) create table platznrTbl (

246

Zusammenfassung

sitzNr int not null, teilnNr int, kursNr int, primary key (sitzNr) )

Im Grunde ist daran nichts Geheimnisvolles. Interessant ist ein Vergleich des endgültigen Datenbankmodells mit unserem Ausgangsmodell. Statt einer einzigen Tabelle mit einem Wust von teils redundanten Daten haben wir nun ein logisch strukturiertes Modell von sechs Tabellen.

6.5

Zusammenfassung

Um dynamische, datenbankgestützte Websites zu erzeugen braucht es etwas mehr als nur UltraDev zu öffnen und dann einfach loszulegen. Sie sollten reichlich Zeit auf die Planungsphase verwenden. Es ist effektiver, zunächst einmal auf einem Blatt Papier die komplette Datenbankstruktur zu entwerfen, statt gleich am Programmcode zu stricken und dann festzustellen, dass man die Datenbank nochmal völlig neu konzipieren muss. Bestimmte HTML-Dokumente lassen sich besonders gut dynamisch machen: 쐽

Listen – Einträge in Listen lassen sich gut aus einer Datenbank beziehen und als Tabelle darstellen.

쐽

Mehrfach verwendete Informationen – Bestimmte Informationen, die auf mehreren Seiten verwendet werden, können ebenfalls in einer Datenbank abgelegt werden. So hat man leichten Zugriff darauf und kann sie ohne großen Aufwand aktualisieren.

쐽

Informationen, die häufig aktualisiert werden müssen – Für Informationen, die häufig ausgetauscht oder geändert werden müssen, empfiehlt sich ebenfalls der Einsatz einer Datenbank. Mit einer eigens erstellten Eingabemaske lassen sich diese Informationen leicht auf den neuesten Stand bringen.

Eine Sitemap zu zeichnen und die künftige Site auf diese drei Kategorien hin zu überprüfen sind die ersten Schritte in der erfolgreichen Planung einer dynamischen Webanwendung. Haben Sie alle Informationen vorliegen, die Sie zur Erstellung einer Site benötigen, können Sie ein Datenmodell entwerfen. Das Verfahren, mit dem das Datenmodell um redundante Daten bereinigt wird, bezeichnet man als Normalisierung. Es gibt drei Normalisierungsschritte, die man einhalten sollte, damit das Datenmodell problemlos in eine tatsächliche Datenbank übersetzt werden kann.

247

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Die erste Normalform definiert die Entitäten, mit denen das Modell arbeitet, sowie die entsprechenden Attribute. Damit wird ferner sichergestellt, dass die Attribute nur einmal vorkommen und sich wiederholende Attribute in einer eigenen Tabelle abgelegt werden. Sind die Entitäten definiert, muss geklärt werden, welche Beziehungen zwischen ihnen bestehen. Beziehungen werden graduell eingestuft: 1:1, 1:n, m:n. Die zweite Normalform setzt voraus, dass die Daten bereits in die erste Normalform gebracht sind. Ferner dürfen Attribute ausschließlich vom Identifikationsschlüssel des jeweiligen Datensatzes abhängig sein. Für die dritte Normalform müssen die Entitäten in der zweiten Normalform vorliegen. Zusätzlich muss eine weitere Anforderung erfüllt sein. Hängen Attribute nicht ausschließlich vom Identifikationsschlüssel, sondern von anderen Attributen ab, müssen sie in einer eigenen Tabelle abgelegt werden, damit die Bedingungen für die dritte Normalform erfüllt sind. Der letzte Schritt im Datenbankentwurf besteht in der Anlage der Datenbankstruktur selbst. Die Struktur der Datenbank beruht auf dem fertig ausgearbeiteten Datenbankmodell, muss aber noch um die Informationen ergänzt werden, in welcher Beziehung die Entitäten zueinander stehen.

6.6 F

Was ist der Hauptgrund für den Einsatz von datenbankgestützten Websites? A

F

Vielleicht wundern Sie sich, wieso eine datenbankgestützte Website »pflegeleichter« sein soll als eine auf reinem HTML-Code basierende Site. Wenn Sie eine Datenbank wie MS Access verwenden oder eine Programmiersprache wie RealBASIC, können Sie eine Eingabemaske erstellen, die genauso leicht zu bedienen ist wie eine beliebige Office-Anwendung.

Kann ich Datenbanken auch erstellen, ohne die Daten vorher zu normalisieren? A

248

Das Hauptargument für eine Datenbankanbindung ist die Effizienz. Allzu oft ist das Argument für den Einsatz einer bestimmten Technologie die bloße Verfügbarkeit, nicht tatsächliche praktische Erfordernisse oder Notwendigkeiten. Sie sollten Datenbanken nur dann einsetzen, wenn es die Website um sinnvolle Funktionen bereichert und die Betreuung vereinfacht – nicht, weil es gerade »hipp« ist.

Wie kann man mit einer Datenbank eine leichter bedienbare Oberfläche für eine Webseite erstellen, als das mit HTML-Mitteln möglich wäre? A

F

Fragen und Antworten

Das geht zwar, aber ich würde es nicht empfehlen. Die Normalisierung von Daten führt zu einem effizienten Datenmodell ohne Redundanzen. In manchen Fällen ist ein gewisses Maß an Redundanz vertretbar, und Sie können auf den Prozess der

Workshop

Normalisierung verzichten. Wollen Sie aber professionelle Sites erstellen, möchte ich Ihnen dringend raten, sich die Zeit zu nehmen und die Daten sauber zu normalisieren. F

Mit welchen Problemen muss ich rechnen, wenn ich Daten nicht normalisiere? A

6.7

In diesem Fall müssen Sie damit rechnen, dass Sie wirklich viel Zeit damit aufwenden müssen, um Ihren Datenbestand zu aktualisieren. Nicht normalisierte Datenbanken weisen Redundanzen auf. Somit ist es unmöglich, exakte Suchabfragen zu formulieren. Eine Aktualisierung ist ebenfalls sehr aufwändig, da Sie pro Änderung immer mehrere Datensätze aktualisieren müssen. Bei fünf oder sechs Datensätzen ist das noch kein Problem. Aber, wie Sie sich vorstellen können, wächst die benötigte Zeit mit der Anzahl der Datensätze.

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. Welche Teile einer Website lassen sich am besten dynamisieren? 2. Was bewirkt die Normalisierung einer Datenbank? 3. Was ist die erste Normalform? 4. Was ist die zweite Normalform? 5. Was ist die dritte Normalform? 6. Was versteht man unter einem Primärschlüssel? 7. Was versteht man unter einem Fremdschlüssel?

Übungen 1. Zeichnen Sie Sitemaps von Sites, die Sie erstellt haben oder erstellen wollen. Welche Bereiche ließen sich mit Datenbankanbindung effizienter gestalten? Konzentrieren Sie sich dabei nicht nur auf solch offensichtliche Punkte wie Personaldaten oder Videoarchive. Suchen Sie nach Informationen, die sich zur Manipulation per Datenbank anbieten.

249

Einführung in dynamische Webanwendungen und Datenbankentwicklung

2. Erstellen Sie ein Datenmodell für einen Spielzeugladen mit den Daten aus Tabelle 6.2 und bringen Sie sie in die dritte Normalform. Der Spielzeugladen möchte diese Datenbank für Mailingaktionen verwenden und Kunden anschreiben, die ähnliche Artikel bereits gekauft haben. Artikel

Preis

Käufer

Kategorie

Riesen-Rad

320,00 DM

Lisa Fröhlich, Heinz Kopf, Emma Maier

Räder, Kleinkinder

Toller Flieger

75,00 DM

Emma Maier, Jule Huber, Sven Moser

Jugendliche, Flugzeuge

Murmeln

5,00 DM

Kurt Knobel, Paul Grüblein, Susi Sommer

Kleinkinder, Jugendliche, Erwachsene, Diverses

Tabelle 6.2: Schreiben Sie ein normalisiertes Datenmodell für diesen Spielzeugladen

250

Die unterstützten Skriptsprachen verstehen

7

Die unterstützten Skriptsprachen verstehen

Was tun Sie, wenn Sie noch keinen eigenen Webserver installiert haben und auch sonst keinen Zugriff auf einen Server haben? UltraDev unterstützt drei verschiedene Skriptsprachen (dreieinhalb, um genau zu sein). Wenn Sie kein genaues Verständnis davon haben, was diese Sprachen tun und wo bzw. wie Sie sie einsetzen können, werden Sie eine Bruchlandung erleiden, bevor Sie überhaupt gestartet sind. Um es aber erst gar nicht so weit kommen zu lassen, lernen Sie heute, 쐽

welche Skriptsprachen von UltraDev unterstützt werden und welche Konsequenzen eine Entscheidung für die jeweilige Sprache hat;

쐽

welche Servertypen die gewählte Skriptsprache unterstützen;

쐽

wie der Sourcecode der jeweiligen Skriptsprachen zu lesen und zu interpretieren ist. Dieser Teil ist nicht die ultimative Einführung ins Programmieren, aber danach sollten Sie sich im Programmcode besser zurecht finden können.

7.1

Skriptsprachen in UltraDev

Wenn Sie mit UltraDev das erste Mal eine Live-Data-Verbindung für Ihre Website einrichten, müssen Sie sich entscheiden, in welcher Sprache der erforderliche Sourcecode geschrieben werden soll. Doch das ist Stoff für unsere morgige Lektion. Heute erarbeiten wir uns das Wissen, das uns die morgigen Entscheidungen erleichtert. Wie in Abb. 7.1 zu sehen, werden verschiedene Servermodelle unterstützt: 쐽

ASP (VBScript) – Das Servermodell Active Server Pages mit der Standard-Skriptsprache VBScript.

쐽

ASP (JavaScript) – Das Servermodell Active Server Pages mit der Standard-Skriptsprache JavaScript.

쐽

JSP – Java Server Pages. Java Server Pages werden unter Verwendung von eingebettetem Java-Code (nicht JavaScript) erzeugt.

쐽

CFML – Cold Fusion Markup Language. Die Cold Fusion Markup Language ist keine Programmiersprache im eigentlichen Sinn, vereinfacht aber die Erstellung von Webapplikationen erheblich.

Es gibt wie gesagt vier verschiedene Skriptsprachen und drei verschiedene Servermodelle zur Auswahl. Welche eignet sich nun am besten für Ihre Applikation, was ist langfristig die beste Investition? Wofür soll man sich entscheiden, wenn man noch nach allen Seiten offen ist?

252

Skriptsprachen in UltraDev

Abbildung 7.1: UltraDev unterstützt drei verschiedene Servermodelle und vier verschiedene Skriptsprachen.

Die Projekte in diesem Buch wurden unter Verwendung von Active Server Pages als Serverplattform realisiert. Der den Beispielen beigegebene Code wurde also mit Active Server Pages erzeugt, doch sollte es Ihnen nicht schwer fallen, diese Applikationen so anzupassen, dass sie auch auf anderen Serverplattformen lauffähig sind – vor allem nach der Lektüre dieses Kapitels.

Active Server Pages Active Server Pages sind eine Microsoft-Entwicklung und eine der ersten Technologien überhaupt, die die Programmierung mit eingebetteten Skriptsprachen ermöglicht. Statt wie üblich eine externe Anwendung zu schreiben und von diesem Programm dann den erforderlichen HTML-Code erzeugen zu lassen, können Sie das Programm direkt in den HTML-Code einbetten. Das ASP-Modell ist insofern etwas verwirrend, da es sich hierbei um keine Programmiersprache im eigentlichen Sinn handelt, sondern um ein Set von Technologien, die in Verbindung mit verschiedenen Programmiersprachen funktionieren. Unklar? Dann versuchen wir es mal so herum: Eingebettete Skriptsprachen machen es möglich, Informationen aus Datenbanken auszulesen bzw. dort abzulegen, Cookies zu speichern usw. Das ASP-Modell stellt für all diese Funktionen vordefinierte Routinen zur Verfügung, die von jeder Programmiersprache

253

Die unterstützten Skriptsprachen verstehen

genützt werden können, die Active Server Pages unterstützen. Sie könnten sich z.B. Perl herunterladen und als ASP-Sprache installieren. Allerdings wird Perl als Skriptsprache für Active Server Pages von UltraDev nicht unterstützt. Das Haupt-Handicap von Active Server Pages ist, dass es sich hierbei um eine proprietäre Technologie handelt und nur für zwei Plattformen verfügbar ist. Wenn Sie MS Windows installiert haben, können Sie sich den Personal Web Server (PWS) herunterladen und die ASP-Komponenten installieren. Allerdings ist das nicht die ideale Plattform, denn sie ist mehr als langsam. Während der Arbeit an diesem Buch wollte ich den PWS eigentlich unter Windows ME auf einem 750-MHz-Athlon betreiben. Da ich aber jedes Mal gut 10 Sekunden warten musste, bis die Seite generiert war, gab ich dieses Vorhaben auf und zog auf einen NT 4.0-Server um, der eine wesentlich bessere Performance bietet. Hier liegt das Problem von Active Server Pages. Um damit zu arbeiten, sind Sie an die verschiedenen Microsoft-Plattformen gebunden. Und für Mac-User bzw. Open-Source-Jünger dürften diese Plattformen wahrscheinlich nicht zur ersten Wahl gehören. Doch zum Glück gibt es für alle Probleme eine Lösung. Wenn Sie Active Server Pages einsetzen müssen, aber nicht auf Windows NT/2000 arbeiten, können Sie ein Produkt namens ChiliSoft verwenden. Damit werden Active Server Pages auf verschiedenen UNIXDerivaten lauffähig, unter anderem Solaris und Linux. Der Haken an der Sache ist, dass die Anschaffungskosten für eine UNIX-basierte ASPLösung weit über denen für die NT-Plattform liegen. Sie können sich Testversionen und weitergehende Produktinformationen unter folgender Adresse herunterladen: http://www.chilisoft.com/

Das ist sicher eine gangbare Möglichkeit, hat aber ihre Haken und Ösen. Für den Einsteiger empfiehlt es sich, Servermodell und Skriptsprachen nach den Vorteilen auszusuchen, die sie ihm bieten. Das ASP-Modell ist eine sehr flexible Entwicklungsplattform und bietet einiges an Funktionalität. Als Skriptsprache kommt gewöhnlich VBScript zum Einsatz, allerdings wird manchmal auch JavaScript verwendet. VBScript ist leicht zu lernen, wird aber von vielen als nicht besonders leistungsfähige Programmiersprache angesehen. Gestandene C-Programmierer finden es meist unter ihrer Würde, sich plötzlich wieder mit BASIC abzugeben. Die zweite Möglichkeit, JavaScript, gilt zwar als etwas salonfähiger, hat aber nicht ganz den Chic und die Power »angesagter« Sprachen wie z.B. Java.

254

Skriptsprachen in UltraDev

Java Server Pages Java Server Pages oder JSP ist eine relativ junge Technologie der eingebetteten Programmierung. JSP setzen auf einem Java-Servlet-Modul (auch als Servlet Engine bezeichnet) auf, das seinerseits auf Java basiert. Java-Servlets entsprangen dem Bedürfnis, für Java-Umgebungen ein Java-basiertes Äquivalent zu den traditionellen CGI-Scripts zu schaffen. Ein Servlet ist ein kompiliertes Java-Programm, mit dem sich verschiedene Aufgaben erledigen lassen wie die Erzeugung von HTML-Dokumenten oder die Verarbeitung von Anwendereingaben usw. Servlets halten sich vollständig an den Java-Standard, arbeiten jedoch mit speziellen Klassen zur Erzeugung von dynamischen Webapplikationen. Sie können zwar HTML-Code in ein Servlet einbetten, jedoch kein Servlet in ein HTMLDokument. Um diese Einschränkung zu umgehen, wurden Servlets zu Java Server Pages weiterentwickelt. JSP sind ein Mittel, Java-Code in HTML-Dokumente einzubinden. Was das Ganze noch interessanter macht, ist die Tatsache, dass die JSP-Technologie Java Server Pages vor ihrer Ausführung als Servlet kompiliert. Aber keine Angst, das sind Dinge, die Sie gar nicht wissen müssen, wenn Sie mit JSP arbeiten – die erforderlichen Schritte laufen automatisch auf dem Server ab. Vielleicht erhebt sich nun von der einen oder anderen Seite der Einwand, dass dieser Umwandlungsprozess von JSP zu Servlet zu Performance-Einbußen führt, darum will ich näher darauf eingehen. Wenn eine JSP in ein Servlet übersetzt wird, bleibt das Servlet im Server-Cache gespeichert. Erst wenn die JSP modifiziert wird, wird entsprechend ein neues Servlet erzeugt. Beim ersten Aufruf einer Seite kann es vielleicht zu gewissen Verzögerungen kommen, aber es gibt keinen Grund, sich hinsichtlich der Geschwindigkeit Sorgen zu machen. Einer der Vorzüge von JSP ist, dass es sich um Java pur handelt. Alles, was mit Java realisierbar ist (mit der Ausnahme von grafischen Benutzerschnittstellen), ist auch mit JSP machbar. Das heißt, dass Sie als Java-Programmierer sofort in die Erstellung von JSP einsteigen können. Java ist eine moderne Programmiersprache, die in den letzten Jahren zunehmend an Bedeutung gewonnen und andere Programmiersprachen verdrängt hat. Es gibt auch keine Anzeichen, dass sich daran in nächster Zukunft etwas ändern wird. Java hat auch den Vorzug, vollständig plattformübergreifend und an kein spezielles Betriebssystem gebunden zu sein. Java Server Pages sind ohne Anpassung oder Änderung am Code auf jedem Webserver lauffähig, der JSP unterstützt. Das gilt für sämtliche Bereiche der Seitenerstellung einschließlich Datenbankzugriff. JDBC-Datenbanktreiber können mit nur einer einzigen Treiberdatei auf diverse Datenbanken zuzugreifen. Kopieren Sie den JDBC-Treiber auf einen anderen JSP-Server und eine völlig andere Plattform: Er wird dort genauso funktionieren.

255

Die unterstützten Skriptsprachen verstehen

Der Einsatz von JSP-Anwendungen gestaltet sich etwas flexibler als die Verwendung von ASP- oder ColdFusion-Applikationen. Die JSP-Technologie steht zudem völlig unentgeltlich zur Verfügung. Die Apache Group hat z.B. einen Open-Source-JSP-Server implementiert, der unentgeltlich heruntergeladen werden kann. Dieser Server trägt den Namen Tomcat und wurde vom Apache-Jakarta-Projekt entwickelt. Die JSP-1.1-Spezifikationen wurden vollständig implementiert. Tomcat erfreut sich großer Beliebtheit und entwickelt sich zum meistverwendeten JSP-Server. Wenn Sie in die Entwicklung von JSP-Seiten einsteigen möchten, können Sie sich Tomcat von der Website des Jakarta-Projekts bei Apache herunterladen: http:://jakarta.apache.org/

Da an Tomcat noch fleißig entwickelt wird, müssen Sie ein paar Nachteile in Kauf nehmen – die gewichtigsten sind die mehr als unvollständige Dokumentierung und der wenig anwenderfreundliche Installationsprozess. Wenn Sie mit diesem Manko leben können, werden Sie feststellen, dass Tomcat eine universell einsetzbare Produktionsplattform ist, die auf jedem Betriebssystem lauffähig ist, das JSP unterstützt – von Windows 2000/NT bis zu Mac OS X. Wenn Sie lieber auf kommerzielle Software zurückgreifen, können Sie Ihren Anforderungen entsprechend zwischen mehreren Produkten auswählen. Für Windows und UNIX sind mehrere JSP-Server verfügbar, nachfolgend eine subjektive Auswahl: 쐽

Allaire Jrun – http://www.allaire.com/

쐽

Oracle 8i Jserver – http://www.oracle.com/

쐽

IBM WebSphere Application Server – http://www.software.ibm.com/

쐽

iPlanet Web Server – http://www.iplanet.com/

쐽

Silverstream Application Server – http://www.silverstream.com/

Beim Einsatz von JSP-Servern sind hohe Zuwachsraten zu verzeichnen. Informationen über den neuesten Entwicklungsstand bei JSP-Servern finden Sie auf der Website von Sun unter http://java.sun.com/products/jsp/industry.html

Alle ColdFusion-Jünger seien auf den ersten Hersteller in obiger Liste hingewiesen. Dieselbe Firma, die die ColdFusion-Linie entwickelt und vertreibt, hat ihren eigenen (sehr guten) JSP-Server im Programm. Wenn das kein Indiz für die Leistungsfähigkeit der JSP als Produktionsplattform ist, dann weiß ich es auch nicht.

256

Skriptsprachen in UltraDev

Obwohl es sich also bei JSP um eine auf verbindlichen Standards basierende Serverplattform handelt, die vermehrt Anwendung findet, bleibt da noch die Sache mit Java selbst. Java ist eine moderne, objektorientierte Programmiersprache, die auf Grund ihrer Komplexität an den Lerner einige Ansprüche stellt. Wenn Sie C oder C++ kennen, werden Sie sich mit JSP-Code schnell zurechtfinden. Sind Sie jedoch bisher nur an Visual Basic oder RealBasic gewöhnt, dann kann die Beschäftigung mit JSP zunächst mal zur kalten Dusche werden. Wir werden uns mit JSP-Code später noch näher beschäftigen.

ColdFusion Die am leichtesten handhabbare Skriptsprache ist die ColdFusion Markup Language (CFML). Sie erinnert weniger an eine Programmiersprache, sonder eher an erweitertes HTML, mit dem sich nun plötzlich auch auf Datenbanken zugreifen lässt. Allaire hat mit ColdFusion eine Programmierumgebung entwickelt, die auch den Ansprüchen professioneller Entwickler genügt, anderseits aber so leicht erlernbar ist, dass sie auch den gelegentlichen HTML-Autor nicht abschreckt. Die Entwicklung dynamischer Webanwendungen ist damit für einen großen Anwenderkreis in den Bereich des Möglichen gerückt. Nächste Woche werden wir anhand von Codebeispielen die verschiedenen Skriptsprachen, die UltraDev schreiben kann, direkt miteinander vergleichen. Sie werden feststellen, dass CFML-Code bei weitem am klarsten ist. Während ASP und JSP ihren proprietären Programmcode zwischen speziellen BegrenzerTags in den HTML-Code einbetten, müssen Sie sich bei ColdFusion lediglich an den Anblick ein paar neuer Tags gewöhnen, die in das bekannte HTML-Inventar eingefügt werden. Als ich zum ersten Mal mit dieser erweiterten Entwicklungsumgebung gearbeitet habe, war das ein richtiges Aha-Erlebnis für mich. ColdFusion bricht aus dem Schema herkömmlicher Programmiersprachen aus und betritt echtes Neuland, indem es Datenbankanbindung so einfach macht wie die Erzeugung von normalem HTML-Code. Wenn Sie ColdFusion noch nicht kennen, sollten Sie das unbedingt nachholen. Ich habe meine Programme immer in Java, Perl oder C geschrieben, aber nachdem ich einige Zeit mit ColdFusion gearbeitet hatte, war ich wirklich beeindruckt. Die Entwickler der CFML hatten wirklich an alle Funktionen gedacht, die man sich als Entwickler von Webanwendungen wünscht, und gleich noch einige Dutzend mehr drauf gelegt. Man sollte sich von dem scheinbar simplen ColdFusion-Ansatz der eingebetteten Programmierung nicht täuschen lassen. Man kann mit diesem Programm sehr schnelle und sehr leistungsfähige Webanwendungen realisieren, die sich zudem noch kinderleicht debuggen lassen.

257

Die unterstützten Skriptsprachen verstehen

Doch wo Licht ist, ist auch Schatten, und das gilt auch für ColdFusion. Das erste Problem ist ein mentales, nämlich gewisse fixe Ideen seitens der Programmierer. Programmierer haben immer bestimmte Erwartungen bzw. Vorstellungen, wie eine Programmiersprache aufgebaut zu sein hat. Und diese Konzepte stehen ihnen bei der Beschäftigung mit einer neuen Sprache gerne im Weg. Da wird nach for...next-Schleifen und if...then-Bedingungen Ausschau gehalten und keiner kann sich vorstellen, dass sich komplette Funktionen hinter ein paar Tags verbergen. Sie können nicht glauben, dass die komplexe Syntax einer Schleifenanweisung in einem schlichten -Tag steckt. Dieser Umlernprozess macht erfahrenen Programmierern den Einstieg in ColdFusion unter Umständen schwerer als jemandem, der noch gar keine Programmiererfahrung hat. Und wie Active Server Pages leidet auch ColdFusion an der Beschränkung auf bestimmte Plattformen. Sie müssen den ColdFusion-Server unter Linux, Solaris, HP-UX oder Windows zusätzlich zum Webserver installieren und vor dem praktischen Einsatz wird erst einmal Bares fällig. Dass ColdFusion nicht auf allen Plattformen verfügbar ist, ist der einzige Nachteil dieser wirklich tollen Software. Ich weiß, ich sollte das hier eigentlich gar nicht sagen, aber wenn Sie mit ColdFusion Studio arbeiten, werden Sie früher oder später feststellen, dass im Vergleich mit UltraDev ColdFusion Studio die bessere CFML Entwicklungsumgebung ist. Die verschiedenen Serververhalten wurden für die unterstützten Plattformen möglichst homogen in UltraDev implementiert. Aus diesem Grund hat man auch kaum versucht, die besonderen Vorteile der einzelnen Sprachen auszureizen. ColdFusion Studio hingegen wurde für die ausschließliche Verwendung mit CFML konzipiert und optimiert und bietet daher natürlich ein Höchstmaß an Flexibilität und Kontrolle über die damit erstellten Anwendungen. Als Mac-User haben Sie allerdings keine andere Alternative als UltraDev. Es ist momentan die einzige CFML-Entwicklungsumgebung für den Mac.

7.2

Die Auswahl des Servers

Eigentlich sollten die folgenden Zeilen in eine kleine Marginalie bzw. Fußnote wandern, aber nach reiflicher Überlegung fand ich, dass dieses Thema einen eigenen Abschnitt innerhalb dieses Kapitels verdient. Wenn Sie sich für eine bestimmte Servertechnologie entschieden haben, müssen Sie sich darüber klar werden, welches Betriebssystem auf dem Server verwendet werden soll. Für alle gängigen Entwicklungsumgebungen können Sie in der Hauptsache zwischen zwei Optionen wählen: UNIX oder Windows. Aber wofür sich entscheiden?

258

Die Auswahl des Servers

Diese Frage wird oft und gerne ausführlich diskutiert, ohne jedoch jemals zu wirklichen Ergebnissen zu führen. Erst kürzlich habe ich wieder in einem IT-Magazin einen Artikel über das Pro und Contra von UNIX und NT gelesen, und obwohl auf dem Cover »die endgültige Antwort« versprochen wurde, blieb der Autor die Antwort auf die Frage, welches System welchem nun vorzuziehen sei und warum, geflissentlich schuldig. Wenn der gewiefte Fachmann sich also weigert, verbindliche Auskunft zu geben, worauf soll der Laie seine Entscheidung in Sachen Serverbetriebssystem dann stützen? Die Wahl der Serverplattform wächst sich mittlerweile fast schon zum selben »Glaubenskrieg« aus wie die Entscheidung für Mac oder Windows-PC. Der jüngste Linux-Boom hat auch hat auch den Markt für UNIX- und UNIX-Derivate wiederbelebt, während man schon allgemein mit einer Abdankung von UNIX als Serverplattform zugunsten von NT rechnete.

Anwenderfreundlichkeit Das Hauptargument für den Einsatz von NT lässt sich auf einen Begriff bringen – Anwenderfreundlichkeit. Auch ohne große Erfahrung im Umgang mit Computern kann man in kurzer Zeit einen Windows NT/2000-Server aufsetzen und ein Netzwerk einrichten. Microsoft hat die Einrichtung der verschiedenen Dienste, die für den Betrieb eines Internetservers erforderlich sind, stark vereinfacht. Die Integration der einzelnen Systemkomponenten und das Zusammenspiel der verschiedenen Anwendungen ist gut gelöst, sodass komplexe Netzwerke leicht aufzubauen und über ein einfaches Interface gut zu administrieren sind. UNIX und Linux sehen diesem Treiben allerdings nicht tatenlos zu. In den letzten beiden Jahren hat sich Linux vom Betriebssystem ohne konsistente Benutzerschnittstelle zum Betriebssystem mit einer der komfortabelsten grafischen Oberflächen überhaupt gemausert. Dank den freien Entwicklern des GNOME- (http://www.gnome.org/) und des KDEProjekts (http://www.kde.org/) kommen Linux-Anwender heute in den Genuss ähnlich bequem per Mausklick zu bedienender Installationsroutinen wie Windows-User. Leider sind noch nicht alle dieser Konfigurations-Tools auf dem Niveau kommerzieller Anwendungen. Zieht man aber in Betracht, dass die Entwicklung von Linux weit schneller vorangetrieben wird als die von Windows oder anderen Betriebssystemen, dürfte diese Einschränkung bald nicht mehr gelten. Obwohl manchmal behauptet wird, dass es sich bei UNIX und Linux um zwei Paar Stiefel handle, stehen sie sich in Wirklichkeit ziemlich nahe. Linux ist eine Open-Source-Implementierung eines UNIX-Derivates. Das Ganze ist letztlich nur eine Frage der Wortwahl, und wo ich die beiden Begriffe verwende, können Sie sie nach Belieben als UNIX oder Linux lesen.

259

Die unterstützten Skriptsprachen verstehen

Welche Dienste werden angeboten? Ein weiteres Entscheidungskriterium für oder gegen ein bestimmtes Betriebssystem ist die Frage, welche Dienste sie bieten. Standardmäßig kommt NT mit einigen grundlegenden Webserver- und Netzwerkdiensten (File Sharing, Print Sharing, Active Directories). Red Hat Linux oder ähnliche Distributionen bieten das Open-Source-Gegenstück dieser Dienste und noch einiges mehr. Der PostgreSQL-Datenbankserver ist ein extrem leistungsfähiger relationaler Datenbankserver, der bei industriellen Standard-Benchmarktests (http://www.greatbridge.com/) Kopf an Kopf mit kommerziellen Produkten von Oracle und Microsoft liegt. Tatsächlich hat der zusammen mit Linux vertriebene Apache-Webserver höhere Zuwachsraten zu verzeichnen als der rein auf NT beschränkte IIS-Server. Die neuesten Statistiken über die Verbreitung der verschiedenen Serverplattformen finden Sie im Internet unter http://www.netcraft.com/survey/

Die verschiedenen Linuxdistributionen unterstützen zwar standardmäßig weit mehr solcher Serverdienste als NT, aber die Konfiguration dieser Dienste gestaltet sich leider unter Linux immer noch schwieriger als unter Windows. Der Internet-Dienstmanager von Windows ermöglicht die Konfiguration von Web-, FTP- und anderen Internetdiensten mittels eines einzigen Interfaces. Unter UNIX müssen Sie pro Dienst jeweils eine eigene Datei öffnen und die Einstellungen von Hand vornehmen.

Stabilität Windows ist im Laufe der letzten Jahre immer stabiler geworden, vor allem mit dem Erscheinen von Windows 2000. Nichtsdestotrotz liegt hier UNIX vorne. Kommerzielle UNIX-Betriebssysteme wie Solaris oder AIX bieten ein Höchstmaß an Stabilität bei kritischen Anwendungen. Es ist ziemlich schwierig, Betriebssysteme in puncto Stabilität miteinander zu vergleichen, und leider sind die meisten Aussagen diesbezüglich sehr subjektiv. Nachfolgend sei als Beispiel die Uptime-Statistik einer stark frequentierten E-CommerceSite angeführt, die auf AIX läuft: www3:/> uptime 10:38AM up 285 days,17:59,1 user,load average: 0.26,0.48,0.45

Es handelt sich hier um einen Produktionsserver mit extrem hoher Auslastung. Der Entwicklungsserver dieser Site ist ein NT 4.0-Rechner, der nur wenig belastet wird. Trotzdem bleibt er öfters stehen und muss ein bis zwei Mal pro Woche neu gebootet werden. Ich würde Ihnen empfehlen, sich umzuhören und für die ins Auge gefasste Serverplattform und Hardware Erfahrungsdaten zu sammeln. Die richtige Kombination von Hard- und Software ist die beste Garantie, dass Ihre Site rund um die Uhr online ist und Sie nicht um 3 Uhr früh durch die Gegend telefonieren müssen, weil Ihr Server wieder mal hängt.

260

Die Auswahl des Servers

Performance/Kosten-Relation Über viele Jahre hat NT bei der Performance/Kosten-Relation gepunktet, da Sie hier relativ preisgünstige, Intel-basierte Hardware einsetzen konnten. Wollten Sie ein UNIX-System verwenden, mussten Sie zum Betriebssystem auch gleich die passende Hardware kaufen. Mit Linux hat sich in dieser Beziehung Einiges geändert. Linux läuft auf derselben Hardware wie NT (und, nebenbei bemerkt, auch auf einigen Plattformen, auf denen NT nicht läuft), stellt aber bei weitem nicht die Anforderungen an die Hardware wie NT und läuft auch kleineren Pentium-Systemen ohne Murren. Die Anschaffungskosten für ein Linux-System (kostenlos, wenn man keine Distribution verwendet) sprechen ebenfalls zugunsten des Open-Source-Betriebssystems.

Support Für viele ist das der eigentliche Knackpunkt. »Was soll ich mit einem Produkt, für das ich keinen Support bekommen kann?« Das ist eine berechtigte Frage, die gerade im Firmenumfeld immer wieder gestellt wird. Hinter NT steht natürlich ein Großkonzern mit den entsprechenden Möglichkeiten. Wird ein Fehler entdeckt, wird er sofort dokumentiert und ein Bugfix bereitgestellt. Man kommt kaum einmal in die Lage, dass man Hilfe suchend das Internet durchstreift in der Hoffnung, jemanden zu finden, der weiß, wovon man da eigentlich spricht. Kommerzielle UNIX-Systeme bieten zwar vergleichbaren Support, für Linux gilt das leider nicht. Linux »gehört« niemandem und es gibt keinen Händler, der im »Garantiefall« tätig werden muss. In vielen Fällen bekommen Sie auf ein Posting in einer Newsgroup Hunderte von nützlichen Antworten, aber es gibt auch Situationen, in denen man völlig auf sich allein gestellt ist, und das kann ganz schön frustrierend sein. Ein Freund von mir hatte z.B. eine neue Ethernet-Karte in seinem Rechner installiert. Nachdem er auf seinem Rechner Linux aufgespielt hatte, musste er feststellen, dass sich die Netzwerkverbindung alle paar Stunden verabschiedete. Er suchte im Internet nach einer Lösung für sein Problem und fand heraus, dass derjenige, der den fehlerhaften Treiber entwickelt hatte, mittlerweile einen neuen Treiber geschrieben hatte. Freudig wollte er auf die Website des Entwicklers gehen, musste aber dann feststellen, dass die Site umgezogen und nicht länger existent war. Diesen Programmierer wieder ausfindig zu machen, ihn per E-Mail um Zusendung eines neuen Treibers zu bitten und anschließend auf eine Reaktion zu warten, zog sich über mehrere Wochen hin. Das Ganze komplizierte sich noch durch eine umständliche und komplizierte Installationsprozedur, die einen Linux-Neuling an den Rand der Verzweiflung treiben kann. Das ist sicher ein Extrembeispiel, doch sollte man Fälle wie den geschilderten mit einplanen.

261

Die unterstützten Skriptsprachen verstehen

Die endgültige Entscheidung Wägt man also die Vor- und Nachteile der jeweiligen Plattformen ab, welche ist dann für die eigenen Zwecke die richtige? Statt einer spreche ich zwei Empfehlungen aus und nenne Ihnen jeweils die Gründe, warum Sie sich für die eine oder andere Seite entscheiden sollten. Option eins: Windows. Mit der Entscheidung für Windows als Serverplattform sind Sie auf der sicheren Seite. Sie bekommen ein hinreichend stabiles System, das leicht zu konfigurieren und pflegen ist. Sie müssen eine größere Anfangsinvestition für die benötigten Softwarekomponenten einplanen, die Sie zur Realisierung Ihrer Website brauchen. Windows ist die beste Wahl für jemanden, der sich nicht noch nebenbei mit Systemadministration und komplexen Betriebsystemfragen auseinander setzen will. Option zwei: UNIX/Linux. Mit der Entscheidung für UNIX bekommen Sie eine sehr flexible und schnelle Plattform. Ihren Server ans Netz zu bringen kostet Sie im Falle von Linux nicht mehr als die eingesetzte Hardware plus Ihre Online-Kosten. Für Technikfreaks oder Leute mit schmalem Geldbeutel ist das ein gewichtiges Argument. Der Support ist allerdings eine zweischneidige Sache, doch wenn Sie Hardware von bekannten Markenherstellern verwenden, ist nicht mit größeren Schwierigkeiten zu rechnen. Wenn es Ihnen schlichtweg wurst ist, wie ein Server funktioniert, sollten Sie lieber die Finger von UNIX lassen. Welchen Server verwendet der Autor? Finden Sie es heraus auf seiner Website unter http://www.poisontooth.com/.

7.3

Ein Blick auf die unterstützten Skriptsprachen

Bisher haben wir uns mit der Frage beschäftigt, welche Skriptsprachen UltraDev verwendet, welche Anwendungsserver diese Sprachen unterstützen und unter welchen Gesichtspunkten man das Betriebssystem des Webservers auswählen sollte. Nun wollen wir uns die Struktur und die Funktionsweise dieser Sprachen näher ansehen. Das Folgende ist natürlich keine Einführung ins Programmieren. Ich möchte Ihnen jedoch das nötige Wissen an die Hand geben, damit Sie die von UltraDev erzeugten Serververhalten analysieren und an Ihre Bedürfnisse anpassen können. Sehen Sie das Folgende als Heranführung an grundlegende Programmierkonzepte für diejenigen, die noch nie eine Zeile Code geschrieben haben. Falls Sie nicht zu dieser Gruppe gehören, bitte ich um Nachsicht.

262

Ein Blick auf die unterstützten Skriptsprachen

Grundlegende Konzepte der Programmierung Gewisse grundlegende Konzepte sind allen Programmiersprachen gemeinsam. Das gilt bei allen sonstigen Unterschieden auch für die von UltraDev unterstützten Skriptsprachen. Am besten versteht man eine Programmiersprache, mit der man sich noch nie befasst hat, wenn man sich ein Verständnis für diese Konzepte erwirbt und sich ansieht, wie diese Sprache sie umsetzt. JavaScript wird zwar von UltraDev unterstützt, doch gehe ich in diesem Zusammenhang nicht darauf ein. Auf einer grundlegenden Ebene unterscheiden sich JavaScript und Java nicht, sodass sich eine nähere Besprechung erübrigt.

Grundsätzliches Bevor wir auf die einzelnen Sprachen eingehen, sollten Sie sich ein paar grundsätzliche Dinge für den Umgang mit dem Programmcode einprägen: 쐽

Tags – ASP- und JSP-Tags werden in spitze Klammern eingeschlossen: <% tag %>. ColdFusion-Tags werden direkt in den HTML-Code eingebettet und sehen aus wie die bekannten HTML-Tags.

쐽

Kommentare – Kommentare werden im ASP-Code durch einen Apostroph ' gekennzeichnet, der die Kommentarzeile einleitet. Kommentare im Java- und CFScriptCode werden durch Doppel-Slash // markiert. Da sämtliche Skriptsprachen den Code in HTML einbetten, können Sie Kommentare auch ganz HTML-konform kennzeichnen: .

쐽

Zeilenende – In VBScript wird die einzelne Code-Zeile mit einem »Return« abgeschlossen. ColdFusion-Script und Java verwenden hier ein Semikolon.

Variablen Variablen speichern bestimmte Informationen, solange eine bestimmte Anwendung ausgeführt wird. In Variablen können Text, Zahlen oder abstraktere Informationen wie z.B. die Uhrzeit abgelegt werden. Jede Programmiersprache behandelt Variablen anderes und bietet unterschiedliche Möglichkeiten, mit den definierten Variablen zu arbeiten. ASP/VBScript VBScript oder Visual Basic Script ist eine leicht zu erlernende Programmiersprache von Microsoft, die sich von deren verbreiteter Visual Basic-Entwicklungsumgebung herleitet. In VBScript-Programmen definieren Sie Variablen einfach durch ihre erstmalige Benutzung. Sie können in Variablen Text oder numerische Daten ablegen, ohne zwischen dem Variablentyp zu unterscheiden.

263

Die unterstützten Skriptsprachen verstehen

Ein Beispiel: myVar=3

und myVar="Vier"

sind beides gültige Wertzuweisungen. Manchmal finden man in VBScript-Code auch die Anweisung Dim(Dimension): Dim myVar

Mit dieser Anweisung wird die Variable myVar deklariert, ihr aber kein bestimmter Wert zugewiesen. Da Variablen mit ihrer erstmaligen Verwendung automatisch deklariert werden, wird dieser Befehl selten verwendet. Es gibt auch die Möglichkeit, ganze Wertelisten unter einer Variablen zu speichern, die so genannten Arrays. Sie werden gekennzeichnet durch einen Variablennamen, gefolgt von []. Über einen Index lässt sich einem Eintrag des Arrays ein Wert zuweisen oder dieser auslesen: myVar [50]=12345. Java Verglichen mit VBScript ist Java wesentlich restriktiver. So können Sie nicht mittendrin im Programmcode neue Variablen einführen, wenn es gerade nötig ist. Sie müssen Variable und Variablentyp ausdrücklich deklariert haben, bevor Sie sie im Sourcecode verwenden. Das sieht dann etwa folgendermaßen aus: int myInt; float myFloat; String myString="Hier steht ein String"; myInt=3; myFloat=4.5;

Wie Sie am Beispiel von myString sehen können, ist es möglich, Variablen bei der Deklaration gleich einen Wert zuzuweisen. Beachten Sie auch, dass jede Code-Zeile mit Semikolon abgeschlossen wird, wie es den Konventionen von Java und JavaScript entspricht. Eine Anweisung darf dabei ruhig über mehrere Zeilen laufen, wichtig ist nur, dass sie immer korrekt abgeschlossen wird. Java-Arrays unterscheiden sich nicht von ihren VBScript-Pendants, sie müssen nur entsprechend den Java-Konventionen erst deklariert werden (int myInt[50];), bevor Sie damit arbeiten können. CFML/CFScript ColdFusion lässt sich nicht in das übliche Schema von Programmiersprachen einordnen. CFML erlaubt die schnelle Erledigung von Programmieraufgaben, erfordert aber von Programmierern, die an die Logik von herkömmlichen Programmiersprachen gewöhnt sind,

264

Ein Blick auf die unterstützten Skriptsprachen

ein gewisses Umdenken. Aus diesem Grund hat man ColdFusion eine zweite Programmiersprache mitgegeben, die ebenfalls in den HTML-Code eingebettet werden kann. UltraDev verwendet bei der Generierung seiner Serververhalten beide Varianten. Variablen werden in CFML nach dem folgenden Schema deklariert:

Innerhalb von CFScript werden Variablen jedoch in ähnlicher Weise deklariert und verwendet wie in VBSCript: myVar="Test" myInt [50]=75

Von CFML aus können Sie auf eine CFScript-Variable über die Anweisung #variablenname# zugreifen. Vielleicht etwas verwirrend, aber es funktioniert.

Bedingungen und Schleifen Jedes Programm und jede Anwendung muss die zu verarbeitenden Daten irgendwie bewerten und zuordnen können und danach den weiteren Programmablauf steuern. Sie möchten z.B. alle Datensätze in Ihrer Datenbank anzeigen lassen, wissen aber nicht, wie viele Datensätze tatsächlich gespeichert sind. Daher müssen Sie den Datenbestand so lange durchsuchen lassen, bis der letzte Datensatz erreicht ist. Sind keine Datensätze vorhanden, soll ein entsprechender Warnhinweis auf dem Bildschirm ausgegeben werden. In beiden Fällen muss der logische Programmablauf je nach den zu erfüllenden Bedingungen entsprechend modifiziert werden. Lassen Sie uns im Folgenden die Programmierlogik bzw. die Sprachkonstrukte, mit denen sich eine solche Ablaufsteuerung erreichen lässt, sowie ihre Umsetzung in den drei Skriptsprachen näher betrachten. VBScript Bei der Arbeit mit den Serververhalten von UltraDev werden Ihnen zwei Typen von Schleifen begegnen: die for...next-Schleife und die while-Schleife. Die for...nextSchleife wird so oft durchlaufen und die darin enthaltene Anweisung so oft ausgeführt, bis ein bestimmter Wert erreicht ist. Die while-Schleife hingegen führt eine Anweisung so lange aus, wie die damit verknüpfte Bedingung erfüllt ist. Beispiel für eine for...next-Schleife: For x=1 To 5 ' Führe diese Schleife fünf Mal aus Next

Beispiel für eine while-Schleife: Do While (x<5) ' Führe diese Anweisung aus, solange x kleiner 5 ist Loop

265

Die unterstützten Skriptsprachen verstehen

Anwendungen müssen nicht nur in der Lage sein, bestimmte Anweisungen per Schleife wiederholt auszuführen, sondern auch entscheiden können, wie sie im Programmablauf weiterfahren sollen, wenn bestimmte Bedingungen erfüllt sind. Möglich wird dieses Verhalten durch das if...then...else-Konstrukt, das überprüft, ob eine Bedingung erfüllt ist, bevor es eine Anweisung ausführt: If x=5 Then ' Tu was Vernünftiges!! Else ' Such Dir einen neuen Job!! End If

Durch das Definieren von Bedingungen können Sie den logischen Programmfluss steuern und erzwingen, dass in Abhängigkeit von dieser Bedingung eine andere Operation ausgeführt wird. Java Schleifen werden in Java entsprechend der C-Syntax definiert. Im Gegensatz zum vergleichsweise »geschwätzigen« VBScript-Code gibt sich Java eher wortkarg: for (x=0;x<5;x=x+1){ //Mach das jetzt 5 Mal }

Die einleitende Zeile der for-Schleife bewirkt dreierlei: Sie initialisiert die Variable x mit dem Wert 0, formuliert die Bedingung, wie oft die Schleife ausgeführt werden soll (x<5), und teilt dem Programm mit, was es bei jedem Bearbeitungsschritt tun soll (erhöhe x um den Wert 1). Im Gegensatz zu VBScript, das verschiedene Konstrukte verwendet, ist Java-Code immer nach demselben Muster aufgebaut, wobei Anweisungen in geschweifte Klammern {} eingeschlossen werden. So unterscheidet sich die while-Schleife von der for-Schleife nur in der ersten Zeile: while (x<5){ //Tu was! }

Auch die if-Bedingung ist nach demselben Prinzip konstruiert: if (x==5){ // Tu was Vernünftiges!! } else { // Such Dir einen neuen Job!! }

Wie Sie sehen, führt das zu einem weit konsistenteren Programmierstil. Bei mehreren verschachtelten Bedingungen kann sich die Fehlersuche jedoch schwierig gestalten.

266

Ein Blick auf die unterstützten Skriptsprachen

CFML/CFScript Wie es der Zufall so will, ist die Syntax von CFScript und Java identisch, sodass wir nicht weiter darauf eingehen müssen. Dafür müssen wir uns mit den CFML-Tags beschäftigen, die Schleifen und Bedingungen steuern. Mit den ...-Tags lässt sich sowohl eine for...next-Schleife als auch eine while-Schleife definieren:

Diese Schleife wird von 1 bis 5 durchgezählt, genau wie die entsprechenden ASP- und JSPPendants. Das -Tag normal wurde der besseren Übersichtlichkeit halber auf mehrere Zeilen umbrochen, um seinen Aufbau zu verdeutlichen. Man könnte es aber ohne Weiteres in eine einzige Zeile setzen. Um eine bedingte Schleife zu definieren, muss das Tag nur leicht verändert werden:

Wie Sie sehen, ist mit ColdFusion die Erstellung dynamischer Websites so einfach wie die Kodierung in normalem HTML-Code. Die Definition einer if-Bedingung ist ebenso einfach – mit ein paar weiteren Tags, ......, steuern Sie den Programmablauf:

Es ist nicht schwer, mit CFML zu arbeiten, nur gewöhnungsbedürftig!

Dynamische Elemente Dynamische Elemente sind in diesem Zusammenhang Elemente, die von Inhalten erstellt werden, die der Browser des Clients übermittelt hat. Dazu zählen Session-IDs, Cookies und Formulardaten.

267

Die unterstützten Skriptsprachen verstehen

Die hier behandelten Programmiersprachen handhaben diese Elemente ganz unterschiedlich, da es sich hier nicht um ein gemeinsames Feature herkömmlicher Programmiersprachen handelt, sondern diese Funktionalitäten erst nachträglich in die Kernsyntax implementiert wurden. ASP/VBScript Active Server Pages erleichtern den Umgang mit dynamisch erzeugten benutzerspezifischen Daten wie Session-IDs, Cookies oder Formulardaten erheblich. Wenn Sie je mit Perl oder einer anderen traditionellen Programmiersprache serverbasierte CGI-Skripten geschrieben haben, werden Sie angenehm überrascht sein, wie leicht sich diese Dinge mit ASP realisieren lassen. Die Definition einer Session-Variable ist so leicht wie das Setzen jeder beliebigen anderen Variable: Session("myVar)="Mein Wert"

Auch Cookies lassen sich mühelos einrichten: Response.Cookies("myVar")="Mein zweiter Wert"

Durch Anfügen einer kleinen Anweisung können Sie sogar das Verfallsdatum festsetzen: Response.Cookies("myVar").Expires=#12/31/2030#

Cookies lassen sich zwar problemlos einrichten, doch müssen Sie das tun, bevor irgendwelche Informationen an den Client-Rechner geschickt werden. Andernfalls erhalten Sie eine Fehlermeldung. Mit UltraDev können Sie die Werte all dieser Elemente auslesen, wenn Sie eine Datenbindung einrichten. Wie das geht, ist Thema von Tag 9, »Einführung in die dynamischen Werkzeuge von UltraDev«. Wollen Sie allerdings einen Wert setzen, müssen Sie das von Hand tun. Java Session-Variable werden in Java ähnlich definiert wie in ASP, die Syntax variiert allerdings ein wenig: session.putValue("myVar","Mein Wert")

In diesem wie im vorigen Beispiel setzt sich der Code aus einem Befehl und einem daran angefügten »Nachsatz« zusammen, der eine Methode innerhalb eines Objekts beschreibt. Sie können sich ein Objekt als höhere Funktionsbibliothek vorstellen. Es enthält Methoden (Funktionen), die einen speziellen Typ von Daten verarbeiten. Das Objekt session z.B. enthält eine Funktion putValue, die das Setzen einer Sitzungsvariablen ermöglicht.

268

Ein Blick auf die unterstützten Skriptsprachen

Wollen Sie mehr über objektorientierte Programmierung wissen, möchte ich Ihnen den Markt&Technik-Titel »Java in 21 Tage« empfehlen. Um in JSP ein Cookie zu setzen, müssen Sie das Cookie in den Response-Header schreiben, der an den Client-Rechner zurückgeschickt wird. Das deckt sich vom Ansatz her mit der von ASP verwendeten Methode und erklärt, warum der ASP-Befehl das Wort »response« enthält. myCookie = new Cookie("myVar","Mein Wert!")); myCookie.setMaxAge(50000); response.addCookie(myCookie);

Der Unterschied ist der, dass hier zur Erzeugung des Cookies ein weiterer Schritt erforderlich ist. Als Erstes müssen Sie das Objekt »Cookie« erzeugen (in diesem Beispiel myCookie). Als Nächstes definieren Sie – wenn Sie möchten – die maximale Gültigkeitsdauer des Cookies in Sekunden. Schließlich wird das korrekt konfigurierte Cookie in den Response-Header geschrieben. CFML Bevor Sie unter ColdFusion Sitzungsvariablen verwenden können, müssen Sie das -Tag setzen, um das Session-Management zu aktivieren. Dieses Tag wird in die Datei application.cfm, die Sie für jedes Projekt erstellen, geschrieben und sollte

nur dort verwendet werden.

Sobald Sie das Session-Management für ein Projekt aktiviert haben, können Sie mit dem -Tag Sitzungsvariablen wie irgendeine andere beliebige Variable definieren.

Cookies werden über ein spezielles -Tag definiert, in dem sich vom Client übermittelte Werte ablegen lassen:

Und das war's auch schon! Mit diesen Informationen und den Werkzeugen von UltraDev sollte es Ihnen möglich sein, die vom Programm erzeugten Serververhalten zu analysieren und Ihren Erfordernissen entsprechend abzuwandeln. Und was noch wichtiger ist: Sie können die Beispiele im Buch durch ein paar Änderungen am Programmcode (keine Angst, Sie müssen lediglich hie und da ein paar Zeilen Code ergänzen) an Ihre Serverplattform anpassen.

269

Die unterstützten Skriptsprachen verstehen

7.4

Zusammenfassung

Die heutige Lektion hat alle Informationen nachgeliefert, die uns noch gefehlt haben, bevor wir uns an die Erstellung von dynamischen Websites machen können. Mit UltraDev steht Ihnen eine große Auswahl an Entwicklungs- und Serverplattformen zur Verfügung, aber für einen Einsteiger kann es schwer sein, die richtige Entscheidung zu treffen. Wir haben uns mit den verschiedenen eingebetteten Skriptsprachen, ihren Vor- und Nachteilen beschäftigt sowie mit den Betriebssystemen, auf denen sie lauffähig sind. Nach diesen Ausführungen haben Sie hoffentlich die nötigen Informationen, um unter den Gesichtspunkten der Anwenderfreundlichkeit sowie der Performance/Kosten-Relation die für Sie sinnvollste Konstellation auszuwählen. Schließlich haben wir noch einen Blick ins Innenleben dieser Skriptsprachen gewagt. Das war zwar keine erschöpfende Einführung ins Programmieren, doch sollten Sie so viel an Information bekommen haben, dass Sie mit von UltraDev erzeugtem Code auch ohne vorausgehende Programmiererfahrung umgehen können. Von nun an werden einen Zahn zulegen und im Laufe der nächsten Woche werden Sie schon mit der Erstellung dynamischer Websites zugange sein.

7.5 F

Warum sollte ich Tomcat nicht verwenden, wenn es doch nichts kostet? A

F

Jeder favorisiert eine bestimmte Programmiersprache. Da liegt es nahe, dass man bei der Erstellung dynamischer Webanwendungen auf diese Sprachen zurückgreift und sie in den HTML-Code einbettet. JSP richtet sich an Java-Entwickler, ASP an Visual Basic-Programmierer. ColdFusion ist eine der wenigen Sprachen, die von vornherein für die Entwicklung dynamischer Websites konzipiert wurden.

Ich lasse auf meinem Rechner NT laufen und er stürzt nie ab. Also was soll das Gerede? A

270

Die Frage ist nicht, ob das Programm etwas kostet oder nicht. Einige kommerzielle Anwendungen sind jedoch schneller und bieten besseren Support. Bevor Sie eine Entscheidung treffen, sollten Sie Ihre speziellen Anforderungen überprüfen.

Warum werden eigentlich so viele verschiedene eingebettete Skriptsprachen verwendet? A

F

Fragen und Antworten

Ein Teil der Probleme mit NT haben ihren Ursprung in der verwendeten Hardware. Der x86-Standard ist alles andere als ein Standard und NT verhält sich je nach Hardware-Umgebung ganz unterschiedlich. Ich habe auf einem kommerziellen Server NT in einer Minimalversion installiert und einmal pro Woche hängt sich das System auf. Aber vielleicht ist das nur bei mir so.

Workshop

F

Ich habe einen Mac und möchte meinen eigenen Server betreiben. Geht das? A

7.6

Ja. Sehen Sie sich Tomcat vom Jakarta-Projekt an. Es läuft unter Mac-OS X und sogar unter Mac-OS 8/9, wenn man an ein paar Schräubchen dreht.

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. Was bedeutet ASP und von wem stammt es? 2. Welche Skriptsprachen verwenden die Zeichenfolge <%...%>, um Anfang und Ende des eingebettetem Codes zu markieren? 3. Können Sie in JSP und ASP einem Cookie jederzeit einen Wert zuweisen? 4. Können Sie jederzeit eine Session-Variable setzen? 5. Welche Entwicklungsumgebung eignet sich am besten für ColdFusion?

Übung Unsere heutige Übung ist nicht schwer. Entscheiden Sie sich für einen bestimmten Server und installieren Sie ihn. Zwar sind Sie bis zur heutigen Lektion ohne Webserver bzw. Applikationsserver ausgekommen, doch für alles Weitere sind sie unabdingbar. Für alle weiteren Kapitel benötigen Sie eine Serveranbindung.

271

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6 Tag 7

Tag 8 Tag 9 Tag 10 Tag 11 Tag 12 Tag 13 Tag 14

Tag 15 Tag 16 Tag 17 Tag 18 Tag 19 Tag 20 Tag 21

Die Programmumgebung von UltraDev Die WYSIWYG-Layoutwerkzeuge von UltraDev Websites planen und verwalten Websites in Bewegung – clientseitige Verhaltensweisen Wieder verwertbare Elemente und Erweiterungsmodule Einführung in dynamische Webanwendungen und Datenbankentwicklung Die unterstützten Skriptsprachen verstehen

Mac und Windows-PC für die Datenbankanbindung fit machen Einführung in die dynamischen Werkzeuge von UltraDev Datenbankgestützte Webseiten entwickeln Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren Komplexe Datenbankabfragen Komplexe Komponenten: Kataloge und Suchen Komplexe Komponenten: Benutzeranmeldungen

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren Komplexe Techniken: Datensammlung und Berichte Komplexe Techniken: Benutzerdaten verfolgen und verwenden Komplexe Techniken: Komplexe Abfragesysteme Komplexe Techniken: Lehren und Prüfen – online Komplexe Techniken: E-Commerce-Lösungen Dynamische Applikationen testen und einsetzen

31 69 117 147 187

W O C H E

221 251

275 305 337 365 409 435 467

501 529 561 599 633 669 707

W O C H E

W O C H E

Auf einen Blick Nachdem wir die verschiedenen Paletten und Inspektoren, die wir zur Erstellung eines HTML-Dokuments benötigen, kennen gelernt haben, werden wir uns in der zweiten Woche mit den Werkzeugen auseinander setzen, die uns die Erzeugung serverbasierter Anwendungen ermöglichen. UltraDev unterstützt von einem konsistenten Interface aus drei verschiedene Skriptsprachen, die die Realisierung dynamischer Websites ermöglichen. Ohne Programmierkenntnisse erstellen Sie mit ein paar Mausklicks datenbankgestützte Websites. Probleme mit UltraDev haben meist nur Anwender, die aus der »Programmierecke« kommen. UltraDev und seine dynamischen Werkzeuge zielen eher auf den Designer als den Informatiker, und obwohl diese Werkzeuge leicht zu bedienen sind, müssen Programmierer häufig erst einmal umdenken. Der Stoff der zweiten Woche ist speziell auf Nicht-Programmierer zugeschnitten, doch ist die Einführung so gehalten, dass auch Programmierer daraus ihren Nutzen ziehen und ihren programmiertechnischen Hintergrund einfließen lassen können. UltraDev realisiert dynamische Webanwendungen durch die Kopplung von Daten mit vorprogrammierten Verhaltensweisen. Diese Verhaltensweisen führen genau definierte Aufgaben aus wie das Auslesen von Informationen aus einer Datenbank oder die Ausgabe einer Meldung auf dem Monitor. Serververhalten an sich sind eher unspektakulär. Ihr Einsatz macht aus einer Website noch kein multimediales Meisterwerk, aber in Verbindung mit den clientseitigen Verhaltensweisen, die wir letzte Woche kennen gelernt haben, kann man in der Tat sehr aufwändige Sites gestalten. Nachfolgend ein kleiner Überblick über die Funktionen, die Sie im Laufe der folgenden Lektionen kennen lernen werden: 쐽

Informationen in Abhängigkeit von bestimmten Bedingungen anzeigen oder verbergen

쐽

Datensätze einer Datenbank anzeigen, aktualisieren oder löschen

쐽

Identität eines Anwenders mittels Benutzername und Passwort überprüfen

쐽

Daten zwischen einzelnen Webseiten übergeben

Ende der zweiten Woche werden wir diese (und andere) Verhaltensweisen ausführlich besprechen. Sie werden auch lernen, wie Sie durch Kombination dieser Features die für dynamische Websites typischen Bedienelemente erzeugen. Am Ende dieser zweiten Woche werden Sie praktisch mit dem gesamten Funktionsumfang von UltraDev vertraut sein. Wenn Sie den Stoff der zweiten Woche durchgearbeitet haben, sollten diese Verhaltensweisen eigentlich kein Problem mehr für Sie darstellen. Das Einzige, was Ihnen dann noch fehlt, ist Praxis. Die Lektionen der letzten Woche wurden vor diesem Hintergrund konzipiert. Jeden Tag werden Sie eine andere dynamische Website erstellen, wobei Sie jedes Mal andere nützliche Anwendungen kennen lernen.

274

Mac und Windows-PC für die Datenbankanbindung fit machen

8

Mac und Windows-PC für die Datenbankanbindung fit machen

Damit Sie von UltraDev aus mit Datenbanken arbeiten können, muss auf Ihrem Rechner bzw. in Ihrem Netzwerk bereits ein Datenbanksystem eingerichtet sein, auf das Sie zugreifen können. Sämtliche Programmfeatures, die Sie in den nun folgenden Tagen kennen lernen werden, setzen zwingend voraus, dass Sie eine Datenbankanwendung installiert haben. Das heutige Kapitel ist absolut grundlegend, denn auf diesen Stoff bauen alle weiteren Lektionen auf. Die Themen im Überblick: 쐽

Datenbanken, mit denen UltraDev kommunizieren kann und wie Sie den eigenen Rechner für die Arbeit mit Datenbanken konfigurieren

쐽

Unterschiedliche Datenbankverbindungen bei Macintosh- und Windows-Rechnern

쐽

Wie man einen Mac mit einem Windows-PC vernetzt, um Zugriff auf ein größeres Spektrum von Datenbanken zu bekommen

쐽

Wie man einen Open-Source-Datenbankserver auf Windows- und UNIX-basierten Serverplattformen einrichtet

8.1

Datenbankverbindungen

Da wir uns mit unterschiedlichen Plattformen auseinander setzen werden, ist der Text im Anschluss an diese allgemeine Einführung entsprechend in Abschnitte gegliedert. Die gemachten Ausführungen gelten entweder plattformübergreifend oder plattformspezifisch, worauf jeweils hingewiesen wird. Manche Unterkapitel beschäftigen sich speziell mit ASP (Active Server Pages), JSP (Java Server Pages) oder ColdFusion-Anwendungen. Ich möchte Ihnen nahe legen, keinen der Abschnitte zu überspringen, denn diese Informationen könnten Ihnen auch bei der Arbeit mit anderen Anwendungen als UltraDev nützlich sein. Wenn Sie in einer reinen Mac- bzw. Windows-Umgebung arbeiten oder sich nur für eine bestimmte Serverplattform interessieren, steht es Ihnen natürlich frei, lediglich die diesbezüglichen Abschnitte zu lesen. Für die heutige Lektion wird davon ausgegangen, dass Sie bereits einen Datenbankserver installiert haben und Erfahrung in der Erstellung von Datenbanken besitzen. Wenn nicht, arbeiten Sie bitte zuerst die Ausführungen über die Installation des MySQL-Servers am Ende der heutigen Lektion durch. Danach haben Sie das nötige Grundlagenwissen, um Ihr UltraDev-Backend einzurichten. Wenn Sie mit UltraDev dynamische Seiten erzeugen, müssen Sie dem Programm bestimmte Informationen geben, damit es den Anwendungsserver mit einer Datenbank verbinden kann. Je nach Voreinstellung werden Sie eine Webanwendung vielleicht auf Basis einer lokalen Datenbank entwickeln und sie dann auf den Produktionsserver stellen, auf dem eine eigene Datenbankverbindung eingerichtet ist. In diesem Fall müssen Sie Ihre Datenbank lokal genauso konfigurieren wie auf dem entfernten Server.

276

Datenbankverbindungen

Die Alternative wäre, die Applikation gleich in Anbindung an die Datenbank auf dem Produktionsserver zu entwickeln. So oder so ist die Einrichtung einer Datenbankverbindung nicht schwierig, und für den Fall, dass Sie mit einer Datenbank auf dem entfernten Server arbeiten, braucht Ihr lokaler Rechner nicht einmal einen eigenen Treiber, denn UltraDev verwendet den Treiber des Servers, um die Daten lokal verfügbar zu machen. Falsch konfigurierte Datenbankverbindungen sind eine häufige Fehlerquelle. In der Folge kommuniziert UltraDev mit einer Datenbank, die lokal anders konfiguriert ist als auf dem Produktionsserver. UltraDev kann dann zwar problemlos auf die Datenbank zugreifen und in der Dokumentansicht funktioniert scheinbar auch alles bestens. Laden Sie das Dokument dann allerdings zur Vorschau in den Browser oder übertragen es auf den Server, funktionieren die dynamischen Verhaltensweisen nicht mehr. Der entscheidende Punkt ist wie gesagt, dass Sie, falls Sie mit lokalen Datenquellen arbeiten, diese genauso wie auf dem Anwendungsserver konfigurieren.

Eine Datenbankverbindung einrichten (Mac/Win) Sie können theoretisch pro Website mehrere Datenbankverbindungen einrichten, doch gewöhnlich arbeitet man nur mit einer. Die Verwendung mehrerer verschiedener Datenquellen ist durchaus zulässig, und Sie könnten sogar eine Website anlegen, die Daten von verschiedenen, voneinander unabhängigen Servern bezieht. Um eine dynamische Website einzurichten, definieren Sie wie gewohnt eine neue Site, doch bevor Sie das Konfigurationsmenü verlassen, aktivieren Sie im Listenfeld KATEGORIE die Option ANWENDUNGSSERVER (siehe Abb. 8.1). Wählen Sie ein Servermodell (ASP, JSP oder ColdFusion) aus, die Standard-Skriptsprache, in der die Anwendung geschrieben werden soll, sowie die zu verwendende Standard-Seitenerweiterung. Darüber hinaus können Sie noch einige Zugriffsinformationen definieren. UltraDev trägt der Tatsache Rechnung, dass Sie Ihre dynamische Anwendung vielleicht auf einem anderen Server ablegen möchten als die übrige Website. Über die Anpassung der Einstellungen unter ZUGRIFF und ENTFERNTER ORDNER können Sie einen anderen Speicherort definieren. Diese Einstellungen entsprechen denen, die wir in Tag 3, »Websites planen und verwalten«, bei der Definition des entfernten Ordners auf dem Server vorgenommen haben. Wenn Sie hier nichts anderes eingeben, geht UltraDev davon aus, dass der Anwendungsserver und der entfernte Server identisch sind. Sie können sich die Dateien auf dem Anwendungsserver anzeigen lassen, indem Sie in der Site-Ansicht in der Werkzeugleiste auf das zweite Icon von links (kleine Quadrate mit einem Blitz) klicken. Falls entfernter Server und Anwendungsserver identisch sind (was meistens der Fall sein dürfte), erfüllt diese Schaltfläche keine weiteren Funktionen.

277

Mac und Windows-PC für die Datenbankanbindung fit machen

Abbildung 8.1: Einrichten des Servermodells, der Skriptsprache und des Speicherorts

Nachdem Sie die neue Website eingerichtet und ein Anwendungsserver-Modell gewählt haben, richten Sie im nächsten Schritt die Datenbankverbindung ein. Bei der Auswahl des für Ihre Serverplattform geeigneten Verbindungstyps unterstützt Sie das Programm durch verschiedene Dialogfenster. Es stehen folgende Verbindungstypen zur Auswahl: 쐽

ADO/ODBC – ActiveX Data Objects. Die ADO-Technologie ist die jüngste Entwicklung von Microsoft zur Verbindung mit Datenquellen. ADO ist eine generische Datenzugriffsmethode, über die sich die unterschiedlichsten Informationen abfragen lassen. Für Datenbankverbindungen wird eine ADO/ODBC-Verbindung eingerichtet (Open Database Connectivity). Wenn Sie mit dem ASP-Datenmodell arbeiten, wählen Sie diesen Verbindungstyp. Auf dem Mac können Sie keine lokale ADO/ODBCVerbindung einrichten. In diesem Fall muss der Zugriff über den entfernten Server erfolgen.

쐽

JDBC – Java Database Connectivity. Eine vollkommen plattformunabhängige Technologie der Datenbankabfrage. Haben Sie sich für JSP als Servermodell entschieden, wählen Sie diese Einstellung.

쐽

ColdFusion Data Source – Eine Datenquelle, die im ColdFusion-Administrator entsprechend dem ColdFusion-Konventionen definiert wurde. Wird nur in Verbindung mit dem Server benutzt.

An diesem Punkt entringt sich der Brust des Mac-Users gewöhnlich ein tiefer Seufzer der Klage: »Unter Windows hat man viel mehr Typen der Datenbankverbindung zur Auswahl als auf dem Mac. Das ist gemein!« (Als Powerbook-Benutzer kann ich in diese Klage nur

278

Datenbankverbindungen

einstimmen.) Doch gibt es eine Möglichkeit, Verbindungen zu Datenbanken herzustellen, für die nur Windows-ODBC-Treiber verfügbar sind. Macromedia hat UltraDev so programmiert, dass Datenbankverbindungen über den Anwendungsserver selbst erfolgen können. Wenn Sie also Ihre Sites auf einem Mac entwickeln, stehen Ihnen trotzdem sämtliche Verbindungstypen zur Verfügung. Zusätzlich können Sie sich noch per JDBC-Treiber mit Windows-Datenquellen verbinden, was ein weiteres Plus an Verbindungsoptionen darstellt. So, und jetzt wollen wir endlich unsere erste Datenbankverbindung erstellen. Wenn Sie Ihre Website richtig konfiguriert und Servermodell und Zugriffsmethode korrekt gewählt haben, kann es losgehen.

Eine Datenbankverbindung kreieren Um für Ihre Site eine Datenbankverbindung einzurichten, wählen Sie MODIFIZIEREN > VERBINDUNGEN, worauf sich das in Abb. 8.2 gezeigte Dialogfenster öffnet. Wenn Sie bis dato noch keine Datenbankverbindung in UltraDev eingerichtet haben, ist das Listenfeld leer. Wurden bereits Verbindungen definiert, können Sie sie hier durch Klick auf die entsprechende Schaltfläche bearbeiten, duplizieren oder entfernen.

Abbildung 8.2: Das Dialogfenster zur Einrichtung und Bearbeitung von Datenbankverbindungen

Oftmals ist es leichter, eine bereits definierte Datenbankverbindung zu duplizieren, statt eine neue einzurichten, falls diese neue Verbindung ähnlich der schon vorhandenen ist. Ich habe meistens die Syntax für einen JDBC-Verbindungsstring nicht im Kopf und muss dann meine Kenntnisse anhand eines bereits definierten Strings auffrischen. Klicken Sie auf den Button NEU, um eine neue Datenbankverbindung einzurichten. Je nach gewähltem Servermodell wird ein Popup-Menü angezeigt, über das Sie die Verbindungstypen konfigurieren können. Im Folgenden werden wir die einzelnen Einstellungsmöglichkeiten, nach Anwendungsservern getrennt, näher untersuchen. Gehen Sie zum Abschnitt für Ihre Plattform und lesen Sie dort, wie Sie für Ihre Site eine Datenbankverbindung einrichten.

279

Mac und Windows-PC für die Datenbankanbindung fit machen

Data Source Name (ASP) Default-Verbindungstyp ist eine ADO/ODBC-Verbindung, die einen Data Source Name (DSN) verwendet. Um einen Data Source Name zu vergeben, muss eine ODBC-Datenquelle für diesen Server und diese spezielle Datenbank definiert worden sein. Wenn Sie noch nie eine ODBC-Verbindung eingerichtet haben, sollten Sie unbedingt das entsprechende Unterkapitel am Ende dieser Lektion lesen, in dem die Einrichtung eines einfachen Datenbankservers und das Zusammenspiel mit UltraDev beschrieben wird. Neben den Anweisungen zur Installation des Servers wird auch die Einrichtung einer ODBC-Verbindung zu diesem Server beschrieben. Wie in Abb. 8.3 zu sehen, müssen Sie für eine Grundverbindung fünf Eingabefelder konfigurieren: 쐽

VERBINDUNGSNAME – Der Name, den Sie für diese Datenbankverbindung vergeben. Wählen Sie nach Möglichkeit einen ebenso einfachen wie sprechenden Namen, aus dem hervorgeht, zu welcher Datenquelle die Verbindung erstellt wurde. Wenn abzusehen ist, dass Sie den von UltraDev generierten Code von Hand editieren werden, sollten Sie einen Namen wählen, der sofort als entsprechende Variable im Code erkennbar ist. Das Programm schlägt zu diesem Zweck vor, dem Namen das Kürzel conn voranzustellen, damit ersichtlich ist, dass sich diese Variable auf eine Verbindung bezieht. Sie müssen sich aber daran nicht halten. Praktisch ist das nur von Nutzen, wenn Sie den Code von Hand editieren wollen.

쐽

DATA SOURCE NAME (DSN) – Der Data Source Name für die ODBC-Datenquelle, zu der die Verbindung erstellt wird. Bei der Arbeit mit lokalen Datenquellen können Sie unter Windows hier ein Popup-Menü öffnen und eine der bereits auf Ihrem Rechner definierten Datenquellen auswählen. Falls Sie mit Datenquellen auf dem Anwendungsserver arbeiten (die einzige Möglichkeit für Mac-User), klicken Sie auf die Schaltfläche DATA SOURCE NAME (DSN), um sich mit den auf dem Server liegenden Datenquellen zu verbinden. Unter Windows können Sie Datenquellen nicht nur über das Popup-Menü auswählen. Klicken Sie auf die Schaltfläche DEFINIEREN, um das ODBC-Dialogfenster zu öffnen. Nun können Sie einen neuen DSN für Ihren lokalen Rechner definieren.

쐽

BENUTZERNAME – Der Benutzername, der für den Datenbankzugriff für diese Verbindung vergeben wird.

쐽

KENNWORT – Das für die Verbindung erforderliche Passwort.

쐽

ULTRADEV SOLL VERBINDUNG HERSTELLEN – Über diese Optionsfelder teilen Sie dem Programm mit, ob es sich mit der Datenquelle über den Anwendungsserver verbinden oder eine lokale Datenquelle verwenden soll. Mac-Usern steht dies Option nicht zur Verfügung, da sie sich sowieso nur über den Anwendungsserver mit der Datenquelle verbinden können.

280

Datenbankverbindungen

Auf dem Mac werden zwar lokale ODBC-Verbindungen unterstützt, aber UltraDev macht von diesem Feature keinen Gebrauch. Falls UltraDev auf Mac OS X portiert wird, werden verbesserte Netzwerkfunktionen und damit auch ODBC-Verbindungen zur Verfügung stehen.

Abbildung 8.3: DSN-Verbindungen werden zu bereits existenten ODBCDatenquellen eingerichtet.

Bei der Konfiguration einer ODBC-Datenquelle werden zusammen mit dem DSN oft auch gleich ein Benutzername und ein Kennwort definiert. So müssen nicht noch einmal extra Benutzername und Kennwort vergeben werden, wenn eine Anmeldeseite eingerichtet wird. Wenn Sie alle Einstellungen vorgenommen haben, klicken Sie auf OK oder auf TESTEN, um zu überprüfen, ob eine funktionierende Verbindung eingerichtet wurde. Damit steht Ihre Datenbankverbindung. Wenn Sie möchten, können Sie die folgenden Abschnitte lesen, um mehr über andere Arten von Datenbankverbindungen zu erfahren.

Benutzerdefinierte Datenbankverbindungen (ASP-Server) Datenbankverbindungen über einen benutzerdefinierten Verbindungsstring einzurichten geht nicht ganz so bequem wie unter Verwendung eines DSN. Allerdings können Sie bei der Wahl des Speicherorts und der Einstellung anderer datenbankspezifischer Parameter wesentlich flexibler verfahren und müssen keine lokale ODBC-Datenquelle definieren. Da die einzelnen Parameter des Verbindungsstrings vom gewählten Datenbankserver abhängig sind, müssen Sie bei Einrichtung dieses Verbindungstyps die Dokumentation zu Ihrer Datenbank zu Rate ziehen. Abb. 8.4 zeigt das Dialogfenster zur Konfiguration des Verbindungsstrings. Für diesen Verbindungstyp müssen Sie lediglich zwei Eingabefelder ausfüllen: VERBINDUNGSNAME, d.h. den Verbindungsnamen, den UltraDev verwendet, und VERBINDUNGSSTRING. Den Aufbau und die genaue Syntax des ADO-Verbindungsstrings müssen Sie dem Handbuch zu Ihrer Datenbank entnehmen. Sie können zwei Arten von Verbindungsstrings definieren: mit DSN und ohne DSN. Die DSN-Variante ist lediglich eine Spielart

281

Mac und Windows-PC für die Datenbankanbindung fit machen

des eben besprochenen Verbindungstyps. Hier genügt für den Verbindungsaufbau allerdings bereits die Angabe des Data Source Name und optional von Benutzernamen und Kennwort.

Abbildung 8.4: Über Strings lässt sich eine Datenbankverbindung einrichten, ohne dass zuvor ein ODBCDSN definiert wurde.

Ein Verbindungsstring dieses Typs zu einer ODBC-Datenquelle namens mydatabase mit dem Benutzernamen myname und dem Kennwort mypassword würde folgendermaßen aussehen: dsn=mydatabase;uid=myname;pwd=mypassword;

Ein DSN-loser Verbindungsstring dagegen speichert wesentlich mehr Informationen. Er enthält sämtliche Angaben, die zur Verbindung mit einer ODBC-Datenquelle gebraucht werden. Ein DSN-loser Verbindungsstring zu einer Access-Datenbank mit Namen mydatabase.mbd auf Laufwerk c:\ wäre folgendermaßen aufgebaut: DRIVER={Microsoft Access Driver (*.mdb)};DBQ=c:\mydatabase.mdb

Anders als eine Verbindung zu bereits existenten Datenquellen hängt ein ADO-Verbindungsstring von den speziellen Datenbank-Features ab, die Sie einsetzen wollen. Schlagen Sie wegen näherer Informationen über die unterstützten Verbindungsattribute im Handbuch zu Ihrer Datenbank nach. Ähnlich wie bei der Datenbankverbindung über DSN können Sie auch hier wählen, ob die Verbindung über einen Treiber auf dem Anwendungsservers oder einen lokalen Treiber erfolgen soll. Mac-Usern steht nur die Verbindung über den Anwendungsserver zur Verfügung.

ColdFusion-Datenquellen (ColdFusion) ColdFusion verwaltet Datenbanken anders als andere Programme. Datenbanken werden direkt in der ColdFusion-Umgebung definiert und unabhängig von Standard-ODBC-Verbindungen verwaltet. Um eine ColdFusion-Datenquelle einzurichten, wählen Sie MODIFIZIEREN > VERBINDUNGEN > NEU > DATA SOURCE NAME (DSN). Abb. 8.5 zeigt die Dialogbox zur Konfigurierung einer ColdFusion-Datenquelle. Dieses Dialogfenster sieht der Palette zur Definition von ODBC-Verbindungen verblüffend ähnlich. Der einzige Unterschied besteht im Eingabefeld DSN. Wenn Sie die Option

282

Datenbankverbindungen

MITHILFE DES DSN AUF DEM ANWENDUNGSSERVER wählen, müssen Sie auf ANMELDUNG klicken, um sich auf dem ColdFusion-Server einzuloggen und sich eine Liste der verfügbaren Datenquellen anzeigen zu lassen.

Abbildung 8.5: Bei der Definition der Datenbankverbindung auf die Verwendung von ColdFusion-DSN achten

Ähnlich wie ODBC-DSNs speichern auch ColdFusion-DSNs Benutzernamen und Kennwort für gewöhnlich mit. Wenn Sie Ihren DSN mit diesen Angaben definiert haben, können Sie die Eingabefelder BENUTZERNAME und KENNWORT frei lassen. Wenn Sie nicht ständig freien Zugriff auf den Datenbankmanager des ColdFusion-Servers haben, können Sie Ihre Anwendungen unter Verwendung eines ODBC-DSN auf Ihrem Arbeitsrechner entwickeln. Diese Option ist bei der Konfigurierung von ColdFusion-Verbindungen standardmäßig voreingestellt. Über die Optionsfelder ULTRADEV SOLL VERBINDUNG HERSTELLEN können Sie zwischen der Verwendung von lokalen DSNs (ODBC) und ColdFusion-ODBCs (Anwendungsserver) wählen. Da auf dem Mac keine Verbindung zu lokalen ODBC-Datenquellen möglich ist, müssen Sie in diesem Fall MODIFIZIEREN > VERBINDUNGEN > NEU > DATA SOURCE NAMEADVANCED wählen. Dieses Dialogfenster ist im oberen Teil identisch mit der bereits bekannten Dialogbox, enthält aber noch zusätzlich Eingabefelder, um einen JDBC-Treiber zur Verbindung mit lokalen oder Netzwerk-Datenbanken zu konfigurieren. Näheres zu den hier erforderlichen Einstellungen erfahren Sie im folgenden Abschnitt über JDBCVerbindungen.

JDBC-Verbindungen (JSP-Server) Der letzte mögliche Verbindungstyp ist die JDBC-Verbindung. Haben Sie JSP als Serverplattform gewählt, zeigt Ihnen ein Klick auf ÄNDERN > VERBINDUNGEN > NEU sämtliche auf Ihrem System installierten JDBC-Treiber an. Wird der gewünschte Treiber nicht angeboten, wählen Sie BENUTZERDEFINIERTE JDBC-VERBINDUNG. Sie bekommen dann eine leere Konfigurationsmaske angezeigt. Dieser Verbindungstyp ist am schwierigsten einzurichten. Abb. 8.6 zeigt das Dialogfenster für einen MySQL-Treiber. Die Einstellungen leh-

283

Mac und Windows-PC für die Datenbankanbindung fit machen

nen sich etwas an den benutzerdefinierten Verbindungsstring an und erlauben die Anpassung der einzelnen Verbindungsparameter, die für den Zugriff auf entfernte Datenbanken gesetzt werden müssen.

Abbildung 8.6: Nicht gerade anwenderfreundlich: JDBC-Treiber

Wie bei den anderen Verbindungstypen auch, müssen Sie der Verbindung einen Namen zuweisen, damit UltraDev sie erkennt. Sie müssen ferner einen Benutzernamen und ein Kennwort für den Datenbankzugriff vergeben. So weit ist also alles wie gehabt, doch gibt es zwei weitere Eingabefelder, die der Erklärung bedürfen: 쐽

TREIBER – Die anderen Verbindungstypen kommen zwar auch nicht ohne Treiber aus, doch müssen Sie sie nicht speziell definieren, da sie bereits ins Betriebssystem integriert sind. Java hingegen wird von vielen Betriebssystemen immer noch als Add-on angesehen, daher müssen Sie dem System ausdrücklich mitteilen, wie der zu verwendende Treiber heißt. Java-Datenbanktreiber werden als Java-Klassen implementiert und sind daher auf jedem System lauffähig, sofern sie als reiner Java-Code implementiert wurden. Der Treiber für die MySQL-Datenbank, die Sie später noch einrichten werden, heißt org.gjt.mm.mySQL.Driver. Wenn Sie zusammen mit Ihrem Datenbankserver eine Dokumentation erhalten haben und er JDBC-Verbindungen unterstützt, sollte der Treiber sehr gut beschrieben sein.

쐽

URL – Hat in diesem Zusammenhang in etwa dieselbe Funktion wie der ADO-Verbindungsstring. In diesem Feld geben Sie ein, wohin und auf welche Weise die Verbindung erfolgt. Diese Einstellungen sind datenbankspezifisch, sodass Sie in Ihren Dokumentationsunterlagen die richtigen Parameter nachschlagen müssen. Die URL, mit der Sie zu einer MySQL-Datenbank eine JDBC-Verbindung aufbauen, sieht in etwa folgendermaßen aus: jdbc:mySQL://192.168.0.1/ud1, wobei »192.168.0.1« die IPAdresse Ihres Rechners wäre und »ud1« der Name Ihrer Datenbank.

Die Verbindung testen Nachdem wir eine Verbindung definiert haben, sollten wir zu guter Letzt noch testen, ob UltraDev nun auch wirklich mit der Datenbank kommunizieren kann. Der einfachste

284

Datenbankverbindungen

(und unspektakulärste) Weg ist ein kurzer, trockener Klick auf den Button TESTEN im Fenster VERBINDUNG DEFINIEREN. Hat alles geklappt, wird das Dialogfenster VERBINDUNG WURDE ERFOLGREICH HERGESTELLT angezeigt, wie in Abb. 8.7 zu sehen.

Abbildung 8.7: Der erfolgreiche Verbindungsaufbau wird durch dieses lakonische Fenster signalisiert.

Konnte kein Verbindungsaufbau erfolgen, erhalten Sie eine detaillierte Fehlermeldung der folgenden Art: 쐽

Benutzername/Kennwort ungültig

쐽

Falscher Hostname/Falsche IP-Adresse des entfernten Datenbankservers

쐽

Falscher Datenbankname

쐽

Ungültige Treibernamen

쐽

Zugriffsverweigerung auf dem Datenbankserver Wenn Sie einen ODBC-Treiber für Ihre Datenbankverbindung verwenden und eine Benutzername/Kennwort-Fehlermeldung erhalten, sollten Sie sich vergewissern, ob Sie den ODBC-DSN korrekt konfiguriert haben. Vielleicht haben Sie im Konfigurationsmenü Namen oder Passwort falsch eingegeben. Wenn Sie noch keinen ODBC-Treiber eingerichtet haben, möchte ich Sie noch einmal daran erinnern, sich mit dem Kapitel MySQL und ODBC-Treiber am Ende dieser Lektion zu befassen.

Gehen wir einmal ganz optimistisch und zuversichtlich davon aus, dass der Verbindungstest positiv war. Wenn nicht, müssen Sie wohl oder übel noch einmal alle Einstellungen durchgehen und genau überprüfen. Wenn Sie hier keine Fehler entdecken können, könnte das Problem beim Datenbankserver selbst liegen, vor allem wenn Sie sich mit einer Datenbank auf einem entfernten Server verbinden. Die meisten Datenbankserver können den Zugang IP-abhängig sperren. Es ist sogar so, dass die meisten Datenbankserver den Zugriff für sämtliche Anwender zunächst einmal grundsätzlich sperren und erst im Bedarfsfall freigeben. In solchen Fällen müssten Sie zunächst einige Einstellungen an der Datenbank selbst verändern, bevor Sie darauf zugreifen können.

285

Mac und Windows-PC für die Datenbankanbindung fit machen

Eine Testabfrage durchführen Unsere Verbindung wurde also erfolgreich aufgebaut und wir könnten so weit ganz glücklich sein. Aber ist dieses kleine graue Mitteilungsfenster wirklich alles, was wir uns vom Leben erhofft haben? Nein! Wenn Sie mit eigenen Augen sehen wollen, dass Sie nun wirklich mit Ihrer Datenbank verbunden sind, schließen Sie zunächst die Fenster VERBINDUNGEN DEFINIEREN und VERBINDUNGEN. Öffnen Sie nun in der Dokumentansicht eine neue Datei. Das Dokument kann ruhig leer sein, wir müssen nur ein Serververhalten hinzufügen, um überprüfen zu können, ob die Verbindung wirklich aktiv ist. 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), um dem Dokument ein neues Verhalten zuzuweisen. 3. Wählen Sie den Befehl DATENSATZGRUPPE (ABFRAGE). 4. Wählen Sie in der nun geöffneten Dialogbox im Popup-Menü VERBINDUNG die Verbindung, die Sie gerade eingerichtet haben. 5. Wählen Sie aus dem Popup-Menü TABELLE eine Tabelle aus Ihrer Datenbank. Diese Tabelle sollte bereits mit einigen Daten gefüllt sein. 6. Klicken Sie zuletzt auf die Schaltfläche TESTEN. Die Testabfrage einer Datensatzgruppe (siehe Abb. 8.8) ist in der Tat ein weit befriedigenderer Beweis dafür, dass unser Bemühen nicht fruchtlos war.

Abbildung 8.8: Die Testabfrage einer Datensatzgruppe zeigt die tatsächlichen Daten einer Tabelle an.

Das sollte eigentlich Beweis genug sein, dass die Dinge tatsächlich funktionieren wie behauptet. Wenn nicht, dann harren Sie der morgigen Lektion.

286

Java/ODBC-Verbindung einrichten (Macintosh/Windows NT)

8.2

Java/ODBC-Verbindung einrichten (Macintosh/Windows NT)

Datenbanken werden auf dem Mac bisher eher wenig unterstützt. Es gibt zwar einen ODBC-Treiber-Manager, aber dieser führt ein ziemliches Schattendasein. Die meisten Mac-User wissen nicht einmal, dass er überhaupt existiert. Diese Verhältnisse könnten sich allerdings mit der Einführung von Mac OS X ändern, das dank seiner verschiedenen UNIX-Unterbauten mit einer guten ODBC-Unterstützung kommt. Doch gibt es auch für all diejenigen, die ihr altes Mac OS weiter verwenden wollen, eine Möglichkeit, UltraDev für die Entwicklung dynamischer Websites einzusetzen: ein JDBC/ ODBC-Gespann, das per RmiJdbc-Treiber aneinander gekoppelt wird. Dieses kleine Stückchen Software verlinkt zwei JDBC-Treiber miteinander. Im Zusammenspiel mit einem JDBC-ODBC-Treiber auf einem Windows NT-Rechner kann ein Mac mithilfe dieses Treibers auf Datenquellen unter NT zugreifen. Windows NT fungiert als Übersetzer zwischen den ODBC-Treibern auf dem Rechner und der JDBC-Verbindung zum Mac. Somit steht jede auf dem NT-Server verfügbare ODBC-Datenbankverbindung nun auch auf dem Mac als JDBC-Datenquelle zur Verfügung. Als weitere Konsequenz stehen damit auch auf dem Mac die meisten Datenbanken für die Entwicklung von ColdFusion- und JSP-Anwendungen offen. Abb. 8.9 veranschaulicht das Zusammenspiel der verschiedenen Treiber.

Mac OS

RMIJDBC

Windows NT/2000

ODBC/ADO

Datenbanken

RMIJDBC

Abbildung 8.9: Der ODBC-JDBC-Treiber fungiert als Übersetzer und öffnet dem Mac den Weg in eine größere Datenbankwelt.

Den Macintosh-JDBC-Client-Treiber installieren Dann wollen wir zur Tat schreiten. Voraussetzung ist, dass Sie neben Ihrem Mac auch noch einen NT-Server besitzen und dass beide Rechner miteinander vernetzt sind. Als NTRechner genügt ein alter Pentium 90. Für den Übersetzungsdienst ist dessen Leistung ausreichend.

287

Mac und Windows-PC für die Datenbankanbindung fit machen

Auf dem Mac müssen Sie folgende Installationsschritte durchführen: Kopieren Sie die Datei RmiJdbc.jar von der UltraDev-CD auf die Festplatte. Sie können auch die aktuellste Version des Treibers als gepackte Datei aus dem Internet herunterladen: http://www.objectweb.org/RmiJdbc/rmijdbcDownload.htm

Macromedia gibt im Handbuch zu UltraDev eine andere Download-Adresse für den RmiJdbc-Treiber an. Unter diesem Link liegt die Macromedia-Version des Treibers. Der Link, den ich im Buch angebe, führt zur Homepage der RmiJdbc-Entwickler. Ich empfehle Ihnen, auf dieser Website vorbeizuschauen, egal woher Sie Ihren Treiber beziehen, denn auf dieser Seite finden Sie wertvolle Informationen. Nebenbei bemerkt funktioniert dieser Treiber nicht nur auf dem Mac. Sie können ihn immer verwenden, wenn Sie über Netzwerk auf einen anderen JDBC-Treiber zugreifen möchten (in diesem Fall den JDBC-ODBC-Treiber von Sun). Nun müssen den Treiber noch im richtigen Verzeichnis installieren – im Systemordner unter Extensions > MRJ Libraries > MRJClasses (siehe Abb. 8.10).

Abbildung 8.10: Der Ordner MRJClasses: Hier werden der RmiJdbcund alle anderen Java-Treiber installiert.

Falls dieser Ordner auf Ihrem Rechner nicht existiert, haben Sie vermutlich nicht die richtige Version des Macintosh Runtime for Java installiert. Dem lässt sich aber leicht abhelfen, da auf der UltraDev-CD die aktuellste Version des MRJ installiert ist. Alternativ können Sie sich die letzte Version bei Apple herunterladen: http://asu.info.apple.com/

288

Java/ODBC-Verbindung einrichten (Macintosh/Windows NT)

Nachdem Sie die .jar-Datei mit dem JDBC-Treiber im richtigen Verzeichnis installiert haben, sollten Sie den Rechner neu starten, damit das System den Treiber erkennt. Danach ist der Treiber einsatzbereit. Nach dem Neustart können Sie mittels RmiJdbcTreiber eine Datenbankverbindung einrichten. Eine korrekt konfigurierte Verbindung sehen Sie in Abb. 8.11.

Abbildung 8.11: Konfigurieren Sie in UltraDev den RmiJdbc-Treiber, um auf den NT-Server zugreifen zu können.

Folgende Parameter müssen Sie in die Eingabefelder eintragen. Sie müssen auch die Design-Zeit-Einstellungen entsprechend diesen Werten verändern: 쐽

TREIBER (DRIVER) – RmiJdbc.RJDriver

쐽

BENUTZERNAME (USER NAME) – Der Benutzername, mit dem Sie sich an der Datenbank auf dem NT-Server anmelden.

쐽

KENNWORT (PASSWORD) – Das Kennwort, mit dem Sie sich an der Datenbank anmelden.

쐽

URL – jdbc:rmi:///jdbc:odbc:<Windows NT Data Source Name>

Wenn Sie zum ersten Mal einen JDBC-Treiber auf einem Mac einrichten, könnte Ihnen beim Anblick des Eingabefeldes TREIBER vielleicht der Gedanke kommen, dass es sich hier um eine bestimmte Datei handelt, die an einem bestimmten Ort auf dem Rechner gespeichert ist. Doch ein Suchlauf mit Sherlock fördert nichts zu Tage. Die .jar-Datei, die Sie zuvor installiert haben, ist eine Archivdatei, die eine oder mehrere Java-Klassen enthält, die zusammen den Treiber bilden. Wenn Ihr System einen JDBC-Treiber anfordert, durchsucht es die .jar-Datei nach den benötigten Klassen. Das klingt vielleicht etwas ungewohnt, aber es funktioniert.

289

Mac und Windows-PC für die Datenbankanbindung fit machen

Nachdem Sie Ihren Mac eingerichtet haben, müssen Sie sich um den NT-Server kümmern, der die ODBC-Datenquelle verwaltet und sie dem Mac zur Verfügung stellt. Die Konfiguration der NT-Server-Seite ist etwas aufwändiger, fassen Sie sich daher in Geduld, wenn nicht alles gleich beim ersten Mal klappt.

Den Windows NT-JDBC-ODBC-Server konfigurieren Für diesen Abschnitt wird davon ausgegangen, dass Sie Windows NT 4.0-Server und mindestens Service Pack 4 installiert haben. Wenn Sie NT frisch aufgespielt haben, um dessen JDBC/ODBC-Übersetzungsdienste zu nutzen, sollten Sie unbedingt erst die erforderlichen Service Packs installiert haben, bevor Sie weitere Schritte unternehmen. Damit der NT-Rechner als Übersetzer zwischen einer ODBC-Datenquelle und einem Mac mit RmiJdbc-Treiber fungieren kann, muss zunächst auf der Windows-Maschine ein funktionierender ODBC-Treiber eingerichtet werden. Bevor diese Voraussetzung nicht gegeben ist, wäre es ziemlich unklug, irgendwelche weiteren Schritte zu unternehmen. Eine falsch konfigurierte ODBC-Datenquelle kann das Leben zur Hölle machen, wenn Sie in einem Client-Server-Pool nach Fehlern in der JDBC-ODBC-Verbindung suchen müssen. Falls Sie noch nie einen ODBC-Treiber konfiguriert haben, sollten Sie zuerst den entsprechenden Abschnitt am Ende des Kapitels über die Verbindung einer ODBCDatenquelle mit einer MySQL-Datenbank lesen. Dort wird die Installation einer MySQLDatenbank beschrieben sowie die Konfiguration der ODBC-Verbindung. Zweitens müssen Sie auf Ihrem NT-Rechner Java installieren. Hierzu müssen Sie sich lediglich den Java-Installer 1.1.8 von der Sun-Website herunterladen: http://java.sun.com/products/jdk/1.1/jre/download-jre-windows.html

Java 1.1.8 ist die jüngste Version der 1.1-Java-Implementierung. Haben Sie Java 2 (1.2) installiert oder möchten es verwenden, sollte es keine Probleme geben. Die Version 1.1.8 ist die Version von Java, die von allen Plattformen (Windows, Mac, Linux) unterstützt wird. Die Version 2.0 leidet noch an gewissen Kinderkrankheiten, aber man darf davon ausgehen, dass sie bald ausgereift ist und die Version 1.1.8 ablöst. Nachdem Sie sich das Java Development Kit heruntergeladen haben, installieren Sie es mit Doppelklick auf das Icon INSTALLIEREN und folgen den Anweisungen des Installationsprogramms. Während des Installationsvorgangs wird lediglich die Java-Distribution in einem Ordner auf dem Windowsrechner abgelegt. Der ganze Vorgang ist eine Sache von Minuten. Legen Sie als Nächstes einen Ordner für die Datei RmiJdcb.jar an, z.B. c:\rmijdcb, und laden Sie den Treiber unter folgender Webadresse herunter: http://www.objectweb.org/RmiJdbc/rmijdbcDownload.htm

290

Java/ODBC-Verbindung einrichten (Macintosh/Windows NT)

Sie können natürlich auch den Treiber von der Programm-CD verwenden, ganz nach Belieben. Im letzten Schritt müssen Sie den Pfad der Datei RmiJdbc.jar in die CLASSPATH-Umgebungsvariable von NT schreiben. So findet das Java-Laufzeitsystem die .jar-Datei und kann die dort gespeicherte RmiJdbc-server-class ausführen. Dieser Vorgang ist identisch mit dem Ablegen der .jar-Datei im Ordner MRJClasses auf dem Mac. Der Unterschied ist der, dass Sie unter NT Java-Klassen in jedes beliebige Verzeichnis schreiben können, solange Sie den Pfad in die CLASSPATH-Variable eintragen. Mac OS sieht standardmäßig im Ordner MRJClasses nach. Um die CLASSPATH-Variable auf dem NT-Server zu setzen, befolgen Sie folgende Schritte: 1. Klicken Sie mit der rechten Maustaste auf das Symbol ARBEITSPLATZ. 2. Wählen Sie im Kontextmenü die Option EIGENSCHAFTEN. 3. Klicken Sie auf die Registerkarte UMGEBUNG. Unter Windows 2000 klicken Sie auf das Register FORTGESCHRITTEN und dann auf die Schaltfläche UMGEBUNGSVARIABLE. 4. Scrollen Sie durch das Listenfeld SYSTEMVARIABLEN und suchen Sie den Eintrag CLASSPATH und markieren Sie ihn mit einem Mausklick. Die Variable CLASSPATH wird dann im Feld Variable unten im Fenster angezeigt. 5. Sollte die Variable CLASSPATH nicht gesetzt sein, tragen Sie sie in das Feld VARIABLE ein. Unter Windows 2000 klicken Sie auf den Button NEU und nennen die Variable CLASSPATH. 6. Tragen Sie in das Feld WERT den Pfad der Datei RmiJdbc.jar ein. Haben Sie die Variable eben erst definiert, brauchen Sie nur c:\rmijdbc einzugeben. Ist die Variable bereits gesetzt, hängen Sie den Pfad, getrennt durch ein Semikolon (;), einfach an bereits definierte Pfade an. 7. Klicken Sie auf die Schaltfläche SETZEN (Windows 2000: OK). Die neue gesetzte bzw. modifizierte Variable CLASSPATH wird nun in der Liste SYSTEMVARIABLEN angezeigt. In Abb. 8.12 wurde im Dialogfenster SYSTEMEIGENSCHAFTEN die Variable CLASSPATH markiert und ihr ein Wert zugewiesen. Bevor Sie das Dialogfenster SYSTEMEIGENSCHAFTEN schließen, sollten Sie auch noch den Pfad zum Verzeichnis bin des Java-Laufzeitsystems angeben. Wenn Sie diesen Wert nicht setzen, müssen Sie jedes Mal den vollen Pfad angeben, wenn Sie Java starten. Je nachdem, wo Sie das Java-Laufzeitsystem installiert haben, sieht der Pfad etwa folgendermaßen aus: c:\jdk1.1.8\bin. Führen Sie noch einmal die gleiche Prozedur wie beim Setzen der Variable CLASSPATH durch, nur dass Sie diesmal die Variable PATH bearbeiten und den Pfad zum Java-Laufzeitsystem an den bereits existierenden Pfad anfügen. (Die Variable PATH ist bereits vorhanden, Sie müssen Sie nicht neu setzen.) Klicken Sie zum Abschluss wieder auf SETZEN, damit Ihre Änderungen gespeichert werden.

291

Mac und Windows-PC für die Datenbankanbindung fit machen

Abbildung 8.12: Durch Setzen der CLASSPATH -Variable kann Java die Datei RmiJdbc finden.

Haben Sie im Dialogfenster SYSTEMEIGENSCHAFTEN sämtliche Einstellungen getroffen, schließen Sie mit Klick auf OK und starten Sie anschließend den Rechner neu, damit alle Änderungen wirksam werden. Nach dem Neustart des Rechners können Sie den RmiJdbc-Server starten. Öffnen Sie die Kommandozeile und geben Sie Folgendes ein: java RmiJdbc.RJJdbcServer sun.jdbc.odbc.JdbcOdbcDriver

Der Server startet daraufhin ohne großes Tamtam. Kein großartiges Schauspiel, aber es funktioniert. Sobald der Server läuft, können Sie am Mac eine Verbindung zu jeder beliebigen Datenquelle auf dem NT-Server herstellen. Der RmiJdbc-Treiber kommuniziert mit dem RmiJdbc-Server auf dem NT-Rechner, der wiederum mit dem der ODBC-Datenquelle kommuniziert. Der einzige Haken an dieser Konfiguration ist, dass sie zwar läuft, aber dass Sie jedes Mal, wenn Sie den Rechner neu starten oder die Kommandozeile schließen, auch diesen Prozess neu starten müssen. In einer Produktionsumgebung, wo Server und Datenbank rund um die Uhr verfügbar sein müssen, ist das nicht sehr praktikabel. Sie können den RmiJdbc-Treiber unter Windows NT jedoch als Dienst einrichten. In diesem Fall wird der RmiJdbc-Server automatisch neu gestartet, wenn der Rechner gebootet wird. Der Server läuft im Hintergrund, ohne dass Sie die Kommandozeile öffnen müssen.

292

Java/ODBC-Verbindung einrichten (Macintosh/Windows NT)

Die Originalanleitung, wie man den RmiJdbc-Server als Dienst einrichtet, stammt von der RmiJdbc-Website. Ich stelle diese Informationen hier in modifizierter Form zur Verfügung. Für weitere Informationen empfiehlt sich ein Besuch auf der ObjectWeb-Website: http://www.objectweb.org/RmiJdbc/

Den RmiJdbc-Server als Dienst konfigurieren Damit Sie den RmiJdbc-Server als Dienst einrichten können, brauchen Sie die Datei srvany.exe aus dem Resource Kit von Windows NT. Für die folgenden Ausführungen wird davon ausgegangen, dass Sie diese Datei im Verzeichnis c:\tools gespeichert haben. Führen Sie nach der Installation folgende Schritte aus: 1.

Starten Sie INSTSRV RmiJdbc c:\tools\svrany.exe.

2. Wählen Sie START > AUSFÜHREN. 3. Tippen Sie regedit in das Eingabefeld ÖFFNEN, um den Registrierungseditor zu öffnen. 4. Erzeugen Sie einen neuen Schlüssel: HKEY_LOCAL_MACHINE\SYSTEM \CurrentControlSet\Services\RmiJdbc\Parameters.

5. Erzeugen Sie unter diesem Schlüssel einen neuen Eintrag Application mit dem Namen REG_SZ und dem Wert einer .cmd-Datei, die die Parameter für den RmiJdbcServer enthält, z.B. c:\rmijdbc\rmijdbc.cmd. 6. Schließen Sie den Registrierungseditor. Nun müssen Sie die Datei c:\rmijdbc\rmijdbc.cmd erzeugen, die den Rmidbc-Server startet. Nachstehend finden Sie ein entsprechendes Beispielskript. Dabei wird davon ausgegangen, dass die Variable CLASSPATH richtig gesetzt wurde und das Java-Laufzeitsystem im Verzeichnis c:\jdk1.1.8\bin liegt. @echo off c:\jdk1.1.8\bin\java RmiJdbc.RJJdbcServer sun.jdbc.odbc.JdbcOdbcDriver > c:\rmijdbc \rmijdbc_server.log

Als letzten Schritt konfigurieren Sie den neuen Dienst so, dass er automatisch gestartet wird, wenn der Rechner bootet. 1. Klicken Sie auf START. 2. Wählen Sie EINSTELLUNGEN > SYSTEMSTEUERUNG. 3. Öffnen Sie das Kontrollfenster DIENSTE. 4. Suchen Sie den neu definierten Dienst »RmiJdbc« und markieren Sie ihn. 5. Klicken Sie auf STARTART, um zu definieren, wie der Dienst gestartet werden soll.

293

Mac und Windows-PC für die Datenbankanbindung fit machen

6. Wählen Sie die Option AUTOMATISCH. 7. Schließen Sie das Kontrollfenster und starten Sie den Rechner neu. 8. Der Dienst wird nach dem Neustart automatisch gestartet. Sie müssen sich nicht einloggen oder den Dienst von Hand starten. Nach dieser Prozedur können Sie sich wieder wie gewohnt Ihrem Mac widmen. Das ganze Verfahren scheint zwar recht aufwändig, doch müssen Sie nur ein paar problemlos erhältliche Programmpakete installieren und bestimmte Einstellungen vornehmen, die denen bei der Einrichtung anderer Datenbankverbindungen weitgehend ähnlich sind. Mit der oben beschriebenen Konfiguration haben Sie auf dem Mac mehr oder weniger dieselben Zugriffsmöglichkeiten auf Datenbanken wie unter Windows.

8.3

MySQL installieren

Das letzte Thema des heutigen Tages beschäftigt sich mit der Einrichtung der MySQLDatenbank. MySQL ist ein Open Source-Datenbanksystem, das weitgehend konform zu den SQL-Spezifikationen ist. Leider unterstützt es bestimmte recht nützliche Features von UltraDev wie Ansichten und gespeicherte Prozeduren nicht, dafür ist es aber sehr schnell und stabil und gerade für den Einsatz von Webanwendungen sehr beliebt. Das Sympathische an MySQL ist, dass es für viele Plattformen erhältlich ist und als Open Source-Produkt frei für andere Plattformen kompiliert werden darf. (Die binäre Version für Windows ist allerdings Shareware.) Zuerst werden wir MySQL unter Windows konfigurieren, und dann werden wir uns ansehen, wie wir es unter UNIX/Linux zum Laufen bringen.

MySQL unter Windows einrichten Der MySQL-Server läuft ohne Probleme unter Windows 95/98 und natürlich auch unter NT. Spielen Sie jedoch mit dem Gedanken, MySQL in irgendeiner Form als professionellen Datenbankserver einzusetzen, weichen Sie besser auf NT als Produktionsplattform aus. Unter NT können Sie MySQL als Standard-Dienst einrichten. Unter Windows ist die Installation von MySQL mit ein paar Handgriffen erledigt, da das Programm bereits kompiliert ist: 1. Laden Sie die aktuelle Version von MySQL Win32 aus dem Internet herunter: http: //www.mysql.com/. Die Windowsvariante liegt manchmal in einer älteren Version vor als das UNIX-Paket. Sehen Sie ab und zu unter dieser Adresse nach, ob zwischenzeitlich aktuellere Versionen angeboten werden.

294

MySQL installieren

2. Entpacken Sie die Datei. 3. Starten Sie das Setup-Programm. 4. Folgen Sie den Anweisungen des Installationsprogramms. Nach erfolgter Installation können Sie nach ein paar Handgriffen loslegen. Öffnen Sie das Installationsverzeichnis. Da das Programm nicht ins Startverzeichnis eingetragen wird, müssen Sie das Installationslaufwerk durchsuchen. Das MySQL-Verzeichnis besteht aus mehreren Ordnern. Für unsere Zwecke ist das Verzeichnis bin wichtig. Hier liegen die verschiedenen Applikationen, die wir brauchen, um MySQL zu kontrollieren. Die beiden, mit denen wir arbeiten werden, sind mysqld und mysql. MySQL ist eine Client/Server-Anwendung. Auch bei rein lokalem Einsatz braucht MySQL einen Client, um mit dem Server zu kommunizieren. mysqld ist ein Server ohne Oberfläche, die Clientanwendung heißt mysql. Den Server starten Sie mit der Betriebssystem-spezifischen Version von mysqld – mysqld-opt unter Windows 95/98, unter NT mysqld-nt. Durch Doppelklicken auf die entsprechende Version wird der Server gestartet und verschwindet sofort von der Oberfläche. Das heißt nicht, dass die Serveranwendung wieder geschlossen wurde, sie legt sich nur automatisch in den Hintergrund. Unter NT können Sie MySQL als Dienst einrichten. Dazu müssen Sie das Programm folgendermaßen aufrufen: c:\mysql\bin\mysqld-nt-install

Dabei wird natürlich davon ausgegangen, dass MySQL im Verzeichnis c:\mysql liegt – passen Sie den Pfad Ihrer Arbeitsumgebung entsprechend an. Als Nächstes müssen Sie den neu eingerichteten MySQL-Dienst so konfigurieren, dass er automatisch gestartet wird. Nähere Informationen hierzu finden Sie im Abschnitt »RmiJdbc-Server als Dienst konfigurieren«.

MySQL auf UNIX-Systemen einrichten MySQL auf UNIX-Systemen einzurichten erfordert etwas Handarbeit. Verwenden Sie eine Linux-Distribution, müssen Sie sich nur eine RPM herunterladen und folgen der Installationsroutine. Ansonsten müssten Sie sich eine vorkompilierte Version besorgen oder den Sourcecode selbst kompilieren. Im letzteren Falle laden Sie den Sourcecode unter folgender Adresse herunter: http:// www.mysql.com/downloads/

und entpacken Sie ihn. Die Version, die in diesem Buch verwendet wird, ist mysql-3.23.21beta.tar.gz, die aktuellste, die zum Zeitpunkt, als ich diese Zeilen schrieb, erhältlich war.

295

Mac und Windows-PC für die Datenbankanbindung fit machen

[jray@contempt mysql ]$tar -zvxf mysql-3.23.21-beta.tar.gz | more mysql-3.23.21-beta/ mysql-3.23.21-beta/Makefile.in mysql-3.23.21-beta/README mysql-3.23.21-beta/stamp-h.in mysql-3.23.21-beta/COPYING mysql-3.23.21-beta/COPYING.LIB mysql-3.23.21-beta/Makefile.am mysql-3.23.21-beta/acconfig.h mysql-3.23.21-beta/acinclude.m4 ... mysql-3.23.21-beta/support-files/my-huge.cnf.sh mysql-3.23.21-beta/support-files/mysql-log-rotate.sh mysql-3.23.21-beta/support-files/mysql.server.sh mysql-3.23.21-beta/support-files/binary-configure.sh

Starten Sie nun das Konfigurationsprogramm, um eine Makefile für Ihr System zu erzeugen. Daraufhin werden die erforderlichen Systemdaten ausgelesen, was unter Umständen etwas dauern kann. creating checking checking checking .. creating creating creating creating creating creating ...

cache ./config.cache host system type... i686-pc-linux-gnu target system type... i686-pc-linux-gnu build system type... i686-pc-linux-gnu sql-bench/Makefile tests/Makefile Docs/Makefile support-files/Makefile include/mysql_version.h config.h

Ist die Konfigurierung abgeschlossen, müssen Sie das Programm kompilieren. Starten Sie die Kompilierung mit dem Befehl »make«. (Dieser Vorgang dauert eine gewisse Zeit.) [jray@contempt mysql-3.23.21-beta ]$ make make all-recursive make [1]:Entering directory '/home/jray/mysql/mysql-3.23.21-beta ' ... binary-configure.sh > binary-configure-t /bin/mv binary-configure-t binary-configure make [2]:Leaving directory '/home/jray/mysql/mysql-3.23.21-beta/support-files ' make [2]:Entering directory '/home/jray/mysql/mysql-3.23.21-beta ' make [2]:Nothing to be done for 'all-am '. make [2]:Leaving directory '/home/jray/mysql/mysql-3.23.21-beta ' make [1]:Leaving directory '/home/jray/mysql/mysql-3.23.21-beta '

296

MySQL installieren

Die Installation ist ebenfalls einfach. Geben Sie nur den Befehl »make install« ein: [jray@contempt mysql-3.23.21-beta]$ make install Making install in include make [1]:Entering directory '/home/jray/mysql/mysql-3.23.21-beta/include ' make [2]:Entering directory '/home/jray/mysql/mysql-3.23.21-beta/include ' make [2]:Nothing to be done for 'install-exec-am '. /bin/sh ../mkinstalldirs /usr/local/include/mysql mkdir /usr/local/include .. make [2]:Nothing to be done for 'install-data-am '. make [2]:Leaving directory '/home/jray/mysql/mysql-3.23.21-beta ' make [1]:Leaving directory '/home/jray/mysql/mysql-3.23.21-beta '

Starten Sie jetzt den Server. Ist er standardmäßig im Verzeichnis /usr/local/bin installiert, geben Sie Folgendes ein: [jray@contempt mysql-3.23.21-beta]$ /usr/local/bin/safe_mysqld &

Über ein Skript können Sie den MySQL-Server starten, wenn der Rechner bootet. Näheres hierzu finden Sie in der MySQL-Dokumentation und im Handbuch zu Ihrer Linux-Distribution.

Den MySQL-Server testen Um die erfolgreiche Installation von MySQL (unter Windows und Linux) zu testen, stellen Sie per mysql-Client eine Verbindung zum Datenbankserver her. Anschließend können Sie die Systemdatenbank von MySQL auslesen, in der verschiedene Tabellen zur Zugriffskontrolle auf den Datenbankserver gespeichert sind. Einzelheiten zur Konfiguration entnehmen Sie bitte der Dokumentation zu MySQL. Einen grundlegenden Funktionstest führen Sie über die Kommandozeile (Windows: MSDOS-Eingabeaufforderung) durch. Es folgt eine Beschreibung der erforderlichen Schritte unter Windows. Wechseln Sie zunächst in das Verzeichnis mysql/bin, geben Sie dann am DOS-Prompt den Befehl »mysql« ein, um den Client zu starten. Verbinden Sie sich mit der Systemdatenbank mit dem Befehl »connect mysql;«. Geben Sie zuletzt den Befehl »show tables;« ein. Sie schließen den Client mit dem Befehl »quit«. Welcome to the mySQL monitor. Commands end with ; or \g. Your mySQL connection id is 10 to server version: 3.23.29a-gamma Type 'help;' or '\h' for help. Type '\c' to clear the buffer mysql> connect mysql; Connection id: 11 Current database: mysql mysql>show tables;

297

Mac und Windows-PC für die Datenbankanbindung fit machen

+-----------------+ | Tables_in_mysql | +-----------------+ | columns_priv | | db | | host | | tables_priv | | user | +-----------------+ 5 rows in set (0.00 sec) mysql>quit Bye

Als Folge dieser Operation wird die interne Datenbank mysql, die Zugriffsrechte regelt, sowie die zugehörigen Tabellen angezeigt. Zwar kein Augenschmaus, aber ein Beweis, dass der Server läuft. Nähere Informationen finden Sie unter http://www.mysql.com/

ODBC-Datenquelle für MySQL einrichten Bevor Sie einen ODBC-Treiber für MySQL einrichten können, müssen Sie ihn erst aus dem Internet unter folgender Adresse herunterladen: http://www.mysql.com/downloads/ api-myodbc.html. Wählen Sie aus den angebotenen Versionen die richtige für Ihre Windowsplattform aus (95/98, NT). Achtung: Laden Sie die Full-Setup-Version herunter! Starten Sie nach erfolgtem Download das Setup-Programm: 1. Klicken Sie im Begrüßungsfenster auf den Button CONTINUE. 2. Daraufhin wird das Dialogfenster INSTALL DRIVERS angezeigt (siehe Abb. 8.13). Markieren Sie im Listenfeld AVAILABLE ODBC DRIVERS den MySQL-Treiber, sonst wird er nicht installiert. Klicken Sie anschließend auf OK.

Abbildung 8.13: Markieren Sie den MySQL-Treiber, ansonsten wird er nicht installiert.

298

MySQL installieren

3. Nachdem der Treiber installiert wurde, werden Sie aufgefordert, eine ODBC-Datenquelle zu definieren. Diesen Schritt können Sie ohne Weiteres abbrechen. Wir werden das anschließend per Standard-Prozedur erledigen. Falls Sie eine Fehlermeldung erhalten, dass Sie Ihr System neu booten und den Installationsvorgang wiederholen sollen, kann es unter Umständen genügen, wenn Sie das Setup etwas modifizieren. Klicken Sie im Dialogfenster auf den Button ADVANCED und wählen Sie die Option DO NOT INSTALL DRIVER MANAGER und schließen das Fenster mit OK. In den meisten Fällen ist damit das Problem behoben. Sobald der Treiber installiert ist, können Sie eine Datenquelle definieren. Führen Sie hierzu folgende Schritte aus (ein anschließender Neustart ist nicht erforderlich): 1. Klicken Sie auf START. 2. Wählen Sie EINSTELLUNGEN > SYSTEMSTEUERUNG. 3. Öffnen Sie mit Doppelklick das Kontrollfenster ODBC-DATENQUELLEN (Windows 9x/NT). Unter Windows 2000 klicken Sie auf VERWALTUNG und dann DATENQUELLEN (ODBC). 4. Öffnen Sie die Registerkarte SYSTEM-DSN. 5. Klicken Sie auf HINZUFÜGEN. 6. Wählen Sie den MySQL-Treiber aus der Liste und klicken Sie auf FERTIG STELLEN. 7. Es öffnet sich das in Abb. 8.14 gezeigte Konfigurationsfenster. Nehmen Sie die entsprechenden Einstellungen vor und klicken Sie auf OK. Nun ist die Datenquelle einsatzbereit. Abb. 8.14 zeigt die Konfiguration einer Testdatenbank, die ich während der Arbeit an diesem Buch verwendet habe. Im Einzelnen können Sie folgende Einstellungen vornehmen: 쐽

WINDOWS DNS NAME – Vergeben Sie einen frei gewählten Data Source Name, um sich mit der Datenquelle zu verbinden.

쐽

MYSQL HOST – Der Hostname des Datenbankservers.

쐽

MYSQL DATABASE NAME – Name der Datenbank auf dem MySQL-Server.

쐽

USER – Der Benutzername, mit dem Sie sich auf dem MySQL-Server anmelden.

쐽

PASSWORD – Das Kennwort für die Datenbank, sofern eines vergeben wurde.

쐽

PORT – Sofern Sie nicht irgendwelche Netzwerkeinstellungen des MySQL-Servers verändert haben, können Sie dieses Feld leer lassen.

299

Mac und Windows-PC für die Datenbankanbindung fit machen

Abbildung 8.14: Mit einigen wenigen Einstellungen sind Sie mit der Datenbank verbunden. 쐽

SQL COMMAND ON CONNECT – Befehle, die nach dem Verbindungsaufbau auf dem Server durchgeführt werden sollen.

Sofern die Verbindung zur Datenbank mysql korrekt definiert wurde, können Sie sofort damit arbeiten. Mit MS Access oder einer anderen Anwendung lässt sich eine Verbindung schnell testen. Waren Sie nicht auch überwältigt von den zahllosen Einstellungsmöglichkeiten, die myODBC bietet? Die meisten können Sie unbeachtet lassen, der Treiber funktioniert trotzdem. Wenn Sie Näheres dazu wissen wollen, werden Sie in der Dokumentation zum MySQL-Server fündig.

8.4

Eine ODBC-Datenquelle für Microsoft Access definieren

Auf vielen Windowsrechnern ist MS Access schon installiert und kann für Datenbankanbindungen mit UltraDev verwendet werden. Genau wie bei MySQL müssen Sie einen Access-spezifischen ODBC-Treiber einrichten und in UltraDev verwenden. Sofern Sie Access bereits installiert haben, ist auch der passende ODBC-Treiber bereits vorhanden.

300

Eine ODBC-Datenquelle für Microsoft Access definieren

1. Klicken Sie auf START. 2. Wählen Sie EINSTELLUNGEN > SYSTEMSTEUERUNG. 3. Öffnen Sie mit Doppelklick das Kontrollfenster ODBC-DATENQUELLEN (Windows 9x/NT). Unter Windows 2000 klicken Sie auf VERWALTUNG und dann DATENQUELLEN (ODBC). 4. Öffnen Sie die Registerkarte SYSTEM-DSN. 5. Klicken Sie auf HINZUFÜGEN. 6. Wählen Sie den MS Access-Treiber aus der Liste und klicken Sie auf FERTIG STELLEN. 7. Es öffnet sich das in Abb. 8.15 gezeigte Konfigurationsfenster. Nehmen Sie die entsprechenden Einstellungen vor und klicken Sie auf OK. Nun ist die Datenquelle einsatzbereit.

Abbildung 8.15: Um eine ODBC-Datenquelle für eine Access-Datenbank einzurichten, müssen Sie lediglich den DSN und die Datenbank selbst zuweisen.

In Abb. 8.15 sehen Sie ein Beispiel für eine Muster-ODBC-Verbindung zu einer AccessDatenbank: 쐽

DATENQUELLENNAME – Der DSN ist ein frei gewählter Name, mit dem Sie eine Datenbank ansprechen.

쐽

BESCHREIBUNG – Eine kurze Beschreibung der Verbindung. Dieser Eintrag dient nur zur Information des Anwenders und wird von UltraDev nicht benötigt.

쐽

DATENBANK – Klicken Sie auf die Schaltfläche AUSWÄHLEN, um zu einer bereits bestehenden Datenbank eine Verknüpfung herzustellen. Die anderen Schaltflächen (ERSTELLEN, REPARIEREN, KOMPRIMIEREN) haben die gleiche Funktion wie in Access. Sie haben keinen Einfluss auf die Konfiguration des ODBC-Treibers.

301

Mac und Windows-PC für die Datenbankanbindung fit machen

쐽

SYSTEMDATENBANK – Ist eine Datenbank im Netzwerk gespeichert und wird sie von mehreren Anwendern benutzt, müssen Sie dieses Feld entsprechend den Angaben Ihres Netzwerkadministrators ausfüllen. Ansonsten können Sie es frei lassen.

Falls Sie keinen ODBC-Treiber finden, müssen Sie ihn von der MS-Office-CD nachinstallieren. Genau wie im Falle des MySQL-Treibers können Sie auch nach der Konfiguration des Access-Treibers von UltraDev aus sofort auf die Datenquelle zugreifen. Der Einsatz von MySQL erfolgt zu reinen Trainingszwecken. Der Hintergrund ist, jedem Anwender und für jede Plattform ein freies Datenbanksystem an die Hand zu geben, das schnell einsatzbereit ist. Für komplexere Anwendungen empfiehlt sich der Einsatz professioneller Datenbanken wie PostgreSQL (http://www.postgresql.com/) oder der SQL-Server von Microsoft, die zusätzliche Programmfeatures von UltraDev unterstützen. Es mag zwar verlockend sein, MS Access als Datenbankserver einzusetzen, doch kommen Office-Programme schnell an ihre Grenzen, wenn mehrere Benutzeranfragen parallel zu verarbeiten sind. Wenn Access denselben Leistungsumfang böte wie der SQL-Server von Microsoft, was wäre dann der Sinn eines solchen Produkts? Andererseits ist MS Access ein ausgezeichnetes Entwicklungstool, mit dem sich funktionierende Arbeitsmodelle realisieren lassen, die dann auf einen größer dimensionierten SQL-Server portiert werden.

8.5

Zusammenfassung

Gegenstand der heutigen Lektion war die Einrichtung von Datenbankverbindungen, die die Grundlage für die Entwicklung von dynamischen Webapplikationen mit UltraDev darstellen. Datenbankverbindungen können lokal oder über den Anwendungsserver definiert werden. Mögliche Verbindungstypen zu einer Datenbank sind ADO/ODBC, ColdFusion und JDBC. Mit UltraDev 4.0 stehen diese Verbindungstypen auch Mac-Usern zur Verfügung, doch müssen sie sich über den Anwendungsserver verbinden. Die Ausnahme sind Verbindungen per JDBC oder fortgeschrittene ColdFusion-Konfigurationen. Diese beiden Verbindungsarten erlauben Mac-Usern den Datenbankzugriff per JDBC-Treiber. Wenn Sie sich als Mac-Anwender in puncto Datenbankverbindungen eingeschränkt fühlen, steht Ihnen per RmiJdbc-Treiber eine größere Auswahl an Verbindungstypen zur Verfügung. Über einen NT-Server stellt RmiJdbc eine Brücke zwischen den ODBC-Treibern des NT-Rechners und dem JDBC-Treiber auf dem Mac her.

302

Fragen und Antworten

Zur Vervollständigung des Stoffes wurde zum Abschluss der heutigen Lektion das MySQLDatenbankssytem vorgestellt. MySQL ist ein äußerst stabiler und kostengünstiger Datenbankserver, den Sie gut mit UltraDev kombinieren können. Er bietet zwar nicht alle Features kommerzieller Produkte, ist jedoch extrem schnell und eignet sich hervorragend für Internet-Anwendungen. Jedoch lassen sich nicht alle Beispiele in diesem Buch problemlos realisieren, da es an bestimmten Zusatzfunktionen fehlt.

8.6 F

Welche Datenbanken kann ich zusammen mit UltraDev verwenden? A

F

Die Verbindungsparameter werden zusammen mit den übrigen Dateien der Site in einem eigenen Ordner Connections gespeichert. Jeder Anwender, der seine Site mit denselben Einstellungen einrichtet, kann auf dieselben Datenbankverbindungen zugreifen. Frühere Versionen von UltraDev haben diese Verbindungsdaten in der Datei connections.xml gespeichert, die im Ordner Configuration > Connections liegt. Wenn Sie mit UltraDev 1.0 arbeiten, brauchen Sie diese Datei nur auf den anderen Rechner zu kopieren, dann stehen diese Verbindungsdaten auch dort zur Verfügung.

Warum kann man eigentlich keine JDBC-Treiber zusammen mit ASP verwenden? A

F

Zu den meisten modernen Datenbanken gibt es sowohl ODBC- wie auch JDBCTreiber, sogar zum SQL Server von Microsoft. Insofern dürfte es keine Probleme bei der Einrichtung einer Datenbankverbindung geben.

Kann man eine eingerichtete Datenbankverbindung auf einen anderen Rechner transferieren? A

F

Fragen und Antworten

ASP unterstützt ursprünglich keine JDBC-Treiber. Es gäbe zwar einen Workaround, aber UltraDev akzeptiert nur reinen ADO-ASP-Code.

Welche Funktionen unterstützt MySQL nicht, die für den praktischen Einsatz unter Umständen wichtig wären? A

Was in erster Linie fehlt, sind Ansichten und gespeicherte Prozeduren. Für komplexe Anwendungen könnten diese Features wichtig werden. In solchen Fällen müssten Sie entweder zu einem anderem Produkt wechseln oder per Handarbeit die fehlenden Funktionen implementieren, indem Sie den vom Server automatisch generierten Code entsprechend bearbeiten.

303

Mac und Windows-PC für die Datenbankanbindung fit machen

8.7

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. Welche Typen von Datenbankverbindungen gibt es? 2. Wie kann man vom Mac aus auf ODBC-Datenquellen zugreifen? 3. Auf welchen Systemen ist MySQL lauffähig? 4. Welche Konsequenzen hat es, wenn Sie RmiJdbc nicht als Dienst einrichten? 5. Wo werden JDBC-Treiber am Mac installiert?

Übungen 1. Richten Sie eine Datenbankverbindung ein und testen Sie diese Verbindung mit den Mitteln, die Sie heute kennen gelernt haben. 2. Richten Sie eine MySQL-Datenbank ein und experimentieren Sie damit. SQL wurde zwar noch nicht besprochen, doch können Sie den Beispielcode von Tag 6, »Einführung in dynamische Webanwendungen und Datenbankentwicklung«, benutzen, um die Funktionalität zu testen. Die Befehle, mit denen eine Datenbank erzeugt wird, stehen im Text. Nachdem Sie eine Datenbank angelegt haben, stellen Sie mithilfe des MyODBC-Treibers eine Verbindung dazu her.

304

Einführung in die dynamischen Werkzeuge von UltraDev

9

Einführung in die dynamischen Werkzeuge von UltraDev

Auch wenn Sie Dreamweaver-Profi sind oder Datenbankexperte und MS-Access- oder Filemaker-Anwendungen im Schlaf einrichten, müssen Sie eine gewisse Einarbeitungszeit einplanen, um sich mit den dynamischen Programmfunktionen von UltraDev vertraut zu machen. Mit UltraDev, das traditionelle Datenbankwerkzeuge und eine weborientierte Entwicklungsumgebung unter einer Oberfläche integriert, ist Macromedia ein großer Wurf gelungen. Die Themen des heutigen Tages im Überblick: 쐽

Die Befehlssprache von UltraDev zur Verbindung mit Datenbanken, Definition von Abfragen und Anzeige von Suchergebnissen

쐽

Die Funktionen der Paletten SERVERVERHALTEN und DATENBINDUNGEN

쐽

Effizienter Einsatz der dynamischen Werkzeuge und Anpassung der Arbeitstechniken an den eigenen Entwicklungsstil

9.1

Herkömmliche Datenbanken und das Web

Herkömmliche Datenbanken unterscheiden sich etwas von Web-basierten Datenbanken. Im ersteren Fall haben Sie sofortigen Zugriff auf die Daten und volle Kontrolle über programminterne Abläufe. Wie wir bereits gelernt haben, haben wir es im Internet mit einem verbindungslosen Protokoll zu tun, d.h., es merkt sich Ihre Eingaben nicht. Um mit UltraDev effizient arbeiten zu können, müssen Sie wissen, was Sie mit diesen dynamischen Werkzeugen tun können und was nicht. Ziel dieses Kapitels ist es, Sie mit diesen Möglichkeiten und Einschränkungen bekannt zu machen, wobei auch einige bereits bekannte Dinge wiederholt und vertieft werden. Ich denke, dass ein Überblick über die verschiedenen Programmfunktionen, die der Entwicklung dynamischer Sites dienen, ganz nützlich sein wird. Wenn Sie die gestrige Lektion durchgearbeitet haben, wissen Sie, wie man eine Datenbankverbindung einrichtet und können alles Weitere nachvollziehen. In Woche 1 haben Sie die Werkzeuge kennen gelernt, die der Erstellung statischer Sites dienen. Nun werden wir uns die Werkzeuge ansehen, die eine Website dynamisch machen. Wenn Sie mit MS Access oder einem anderen Datenbankprogramm vertraut sind, wird Ihnen die Art und Weise, wie UltraDev Daten handhabt, bekannt vorkommen. Um Ihre Datenbank vom Desktop ins Web zu bekommen, gibt es drei wichtige Werkzeuge oder Grundfunktionalitäten: Datenbankverbindung, Serververhalten und Datenbindungen.

Datenbankverbindungen Mit Datenbankverbindungen haben wir uns in Tag 8, »Mac und Windows-PC für die Datenbankanbindung fit machen«, beschäftigt. Datenbankverbindungen sind die Grundlage für die Kommunikation von UltraDev und dem gewählten Anwendungsserver mit

306

Herkömmliche Datenbanken und das Web

dem Datenbankserver. Datenbankverbindungen gelten für die komplette Site und sind spezifisch für das jeweilige Projekt. Die Verbindungsdaten werden im Verzeichnis der Site in einem eigenen Ordner Connections gespeichert. Da die Verbindungsdaten zusammen mit den übrigen Dokumenten der Site gespeichert werden, sind diese Daten auf jedem anderen Rechner verfügbar, auf dem die Site mit denselben Parametern definiert wurde. Darüber hinaus wird eine Datei connections.xml, gespeichert im Ordner Connections, angelegt. Sie können diese Datei um Ihre eigenen Treiber-Konfigurationen ergänzen, womit sich die manuelle Eingabe der Verbindungsdaten erübrigt, wenn Sie eine weitere Datenbank anbinden. Gestern haben wir uns mit der Konfiguration von JDBC-Treibern beschäftigt. Sie werden sich wahrscheinlich noch daran erinnern, dass dieser Vorgang mit einem Haufen Schreibarbeit verbunden war, die Sie sich sparen können, wenn Sie besagte Datei um einen Eintrag driverinfo ergänzen, in dem die Defaulteinstellungen eines bestimmten Treibers gespeichert werden Im Falle eines JDBC-Treibers würde das so aussehen: MySQL JDBC: Driver Class Name-"org.gjt.mm.mysql.Driver" Access URL-"jdbc:mysql://[hostname]:[port]/[database]"

Anhand dieser Daten können wir in der connections.xml folgendes driverinfo-Objekt erzeugen:

Damit Sie die mit den im Folgenden vorgestellten Werkzeugen arbeiten können, müssen Sie eine funktionierende Datenbankverbindung eingerichtet haben.

Serververhalten Wenn Sie eine Datenbankverbindung eingerichtet haben, ist der nächste Schritt in der Entwicklung dynamischer Websites die Zuweisung von Serververhalten, die auf dieser Verbindung aufsetzen. Mithilfe der Serververhaltenpalette (siehe Abb. 9.1) können Sie Serververhalten zuweisen und bearbeiten. Sie können Sie die Serververhaltenpalette als fortgeschrittene Variante der Standard-Verhaltenspalette vorstellen, die wir zur Erstellung konventioneller HTML-Dokumente verwendet haben. Der Unterschied liegt darin, dass der Programmcode eines Verhaltens in diesem Fall nicht clientseitig, sondern vom Server abgearbeitet wird. Das bedeutet, dass Sie nun nicht mehr den Unwägbarkeiten von JavaScript unterliegen, sondern sich beim Einsatz dynamischer Elemente ganz auf die Performance Ihres Servers verlassen können.

307

Einführung in die dynamischen Werkzeuge von UltraDev

Abbildung 9.1: Serververhalten zuweisen und editieren mit de Serververhaltenpalette

Neben diesen Vorteilen gibt es wie immer auch den einen oder anderen Nachteil. Das größte Plus ist sicher, dass egal welche Serververhalten Sie einsetzen, diese auf jeder Plattform funktionieren, unabhängig davon, ob JavaScript aktiviert ist oder nicht. Solange der Server selbst richtig konfiguriert ist, können Sie jede beliebige dynamische Anwendung entwickeln, ohne sich über die Anwenderplattform Gedanken machen zu müssen. Serververhalten sind nicht in jedem Fall völlig unabhängig vom Client. Arbeitet ein Serververhalten mit Cookies, muss der Clientbrowser diese akzeptieren. Doch ist dieser Weg immer noch zuverlässiger als eine JavaScript-Lösung. Serververhalten sind Codefragmente, aus denen UltraDev ein funktionierendes Programm zusammensetzt. Es handelt sich hierbei um vordefinierte ASP-, JSP- bzw. ColdFusionRoutinen, die in der Kombination lauffähigen Code ergeben, der in das HTML-Dokument eingebettet wird. Wenn Sie sich näher für die Bausteine dieses Puzzles interessieren, empfehle ich Ihnen, im Programmordner von UltraDev einen Blick in den Unterordner Configuration/ ServerBehaviors zu werfen. Sie werden dort eine lange Liste von Serververhalten finden. Diese Serververhalten sind allesamt in JavaScript programmiert und steuern alle dynamischen Funktionen von UltraDev. Als Beispiel ein Code-Schnipsel aus der Datei Recordset.js:

308

Herkömmliche Datenbanken und das Web

//Copyright 2000 Macromedia,Inc.All rights reserved. //***************GLOBALS VARS ***************** var helpDoc =MM.HELP_ssAdvancedRecordset var SP_Mode =false;//Since we have different formatting behavior based //on whether the object is a stored proc or not, //we use this as a switch to keep track of what's //the current selection. //The following constants and vars are used to build up the SQL statement. var CONST_SELECT="SELECT"; var CONST_FROM="FROM"; var CONST_WHERE="WHERE"; var CONST_EQUALS="="; var CONST_ORDERBY="ORDER BY"; var var_select="*"; var var_from=""; var var_where=""; var var_orderby="; var gSimpleParamName="MMColParam" var ERROR_MESSAGE="";

Wie Sie sehen, enthalten diese Programmdateien die Funktionen, mit denen das Serververhalten den erforderlichen SQL-Code erzeugt. Sie können diese Dateien Ihren Erfordernissen entsprechend umschreiben und die Variablen durch die Standardwerte ersetzen, die Sie in Ihrer Entwicklungsumgebung verwenden, doch möchte ich Ihnen von zu massiven Eingriffen abraten. In diesem Codefragment könnten Sie z.B. die Defaultwerte ändern, die an den Datenbankserver übermittelt werden. Wenn Sie diese Programmdateien ausgiebiger unter die Lupe nehmen, werden Sie auch an die Codeteile stoßen, die dann tatsächlich ins HTMLDokument eingesetzt werden. Wenn Sie jedoch an diesen Dateien Änderungen vornehmen, müssen Sie sich der Tatsache bewusst sein, dass Ihre fertige Anwendung nicht mehr mit dem originalen Macromedia-Code arbeitet, der sozusagen unter härtesten Praxisbedingungen seine Tauglichkeit bewiesen hat. Einem ausgemachten Programmierer wird das freilich vielleicht bloß ein müdes Schulterzucken entlocken. Als Neuling in diesen Dingen muss Ihnen aber klar sein, dass Sie durch Veränderungen am Originalcode Ihren Garantieanspruch verwirken. Und es dürfte mehr als unwahrscheinlich sein, dass Sie irgendwo einen UltraDev-User finden, der Ihnen dann noch weiterhelfen kann. Also, was sind nun diese famosen Serververhalten und was können sie für uns tun? Lassen Sie uns zu diesem Zweck die wichtigsten Serververhalten und ihre Arbeitsweise unter die Lupe nehmen.

309

Einführung in die dynamischen Werkzeuge von UltraDev

Standard-Serververhalten Auf einer grundlegenden Ebene ist die dynamische Datenbankanbindung von UltraDev eine einfache Sache – Sie zeigen damit Informationen aus einer Datenbank an und verändern sie gegebenenfalls. Es gibt fünf Hauptfunktionen und ein paar weitere einfache Verhaltensweisen, die nachfolgend beschrieben werden.

Datensatzgruppe Unter einer Datensatzgruppe versteht man die Gesamtheit aller Datensätze, die auf eine Datenbankabfrage hin zurückgegeben werden. In UltraDev werden Datensatzgruppen dadurch erzeugt, dass man der Anwendung die SQL-Anweisungen übergibt, die sie ausführen soll, sich entspannt zurücklehnt und das Programm arbeiten lässt. Eine Datensatzgruppe kann aus mehreren Datensätzen bestehen, doch ist jeweils nur der erste Datensatz zugänglich, nachdem die Datensatzgruppe erzeugt wurde. Um auf die weiteren Datensätze zugreifen zu können, müssen Sie weitere Serververhalten hinzufügen, die die erstellte Datensatzgruppe handeln können. Sie haben zwei Möglichkeiten, Datensatzgruppen zu erzeugen – die erste ist die einfache Abfrage (siehe Abb. 9.2).

Abbildung 9.2: Für einfach aufgebaute Datensatzgruppen genügt die einfache Abfrage.

Mit einfachen Abfragen lassen sich Gruppen von Datensätzen aus einer Datenbanktabelle ohne großen Aufwand selektieren. Wenn Sie z.B. Datensätze anhand von im URL-Feld übergebenen Parametern auswählen wollen und das endgültige Abfrageergebnis dann ausgehend vom Inhalt einer bestimmten Spalte sortieren lassen wollen, wählen Sie für die

310

Herkömmliche Datenbanken und das Web

Erstellung einer Datensatzgruppe die einfache Variante. Hierbei sind Sie an automatisch erzeugte SQL-Anweisungen gebunden. In manchen Fällen genügen aber diese StandardRoutinen nicht. Klicken Sie auf die Schaltfläche ERWEITERT. Es öffnet sich die in Abb. 9.3 gezeigte Eingabemaske, die eine weit flexiblere Erzeugung von Datensatzgruppen erlaubt.

Abbildung 9.3: Erweiterte Abfragen ermöglichen eine bessere Kontrolle über die Anwendung.

Im Modus ERWEITERT können Sie selbst geschriebene SQL-Abfragen an den Datenbankserver schicken und seine Leistungsfähigkeit ausreizen. Von hier aus haben Sie direkten Zugriff auf Tabellen, Ansichten und gespeicherte Prozeduren. Ferner weisen Sie hier den Abfragevariablen, die UltraDev verwendet, einen Wert zu. Mit Abfragevariablen können Sie vom Client übermittelte Daten wie Request-Werte, Cookies und Sitzungsvariable einer lokalen Variablen in UltraDev zuweisen und für Abfragen verwenden. Diese Einbindung von Clientdaten in eine SQL-Abfrage ist im einfachen Abfragemodus nicht möglich. Definiert werden diese internen Abfragevariablen durch Klick auf das Plussymbol (+) und Vergabe eines Variablennamen sowie durch Setzen des Standardwerts und des Laufzeitwerts. 쐽

NAME – Der Name der UltraDev-Variablen, der die dynamischen Daten zugewiesen werden. Diese Variable muss in einfache Anführungszeichen gesetzt und im Feld SQL eingetragen sein.

311

Einführung in die dynamischen Werkzeuge von UltraDev

쐽

STANDARDWERT – Für jede Variable lässt sich ein Defaultwert setzen, falls keine dynamischen Daten verfügbar sind. Somit ist sichergestellt, dass Abfragen auch dann funktionieren, wenn der Anwender nicht die erforderlichen Angaben gemacht hat.

쐽

LAUFZEITWERT – Der Wert, denn die Variable annimmt, während die Anwendung auf dem Server läuft. Laufzeitwerte werden gewöhnlich auf den Wert von Variablen aus Formularen oder anderen dynamischen Daten gesetzt. Seien Sie vorsichtig beim Setzen von Standardwerten. Sie sind zwar sehr nützlich, wenn man sich in der Live-Data-Ansicht Ergebnisse von Abfragen anzeigen lassen will, ohne Anwendereingaben simulieren zu müssen. Nur passiert es leider allzu oft, dass man Standardwerte setzt und nicht mehr daran denkt, sie wieder zu löschen. Nehmen wir zum Beispiel an, dass Sie eine Anmeldeseite erzeugen, die Benutzernamen und Kennwort abfragt und auf ihre Richtigkeit überprüft. Wenn Sie Standardwerte für Benutzernamen und Kennwort gesetzt haben, könnte ein Anwender ein leeres Formular abschicken und sich trotzdem einloggen. Da bei der Überprüfung keine Daten gefunden wurden, werden die leeren Eingabefelder mit den Standardwerten ausgefüllt.

Falls Sie mit UltraDev kompliziertere Features wie das Durchsuchen von Datenbeständen oder benutzerdefinierte Abfragen in Ihre Anwendungen implementieren wollen, brauchen Sie diese Suchvariablen. Sobald die Datensatzgruppe definiert ist, können Sie durch Klicken auf die Schaltfläche TESTEN Ihre Abfrage in Echtzeit testen.

Datensatz einfügen Mit dem Serververhalten DATENSATZ EINFÜGEN können Sie einen neuen Datensatz in eine Datenbank schreiben. Dieser Datensatz wird aus einem Formular gelesen und über die definierte Datenbankverbindung zu einer bestimmten Tabelle übertragen. Dieses Verhalten funktioniert nur in Verbindung mit einem HTML-Formular. Doch mit etwas Erfindungsgabe und etwas Programmierung können Sie mit diesem Verhalten bestimmte Informationen vom Anwender abfragen. In einer späteren Lektion werden wir dieses Verhalten dazu benützen, Artikel in einem Warenkorb abzulegen. Bevor Sie Datensätze in eine Tabelle schreiben bzw. diese aktualisieren oder löschen können, müssen Sie in einem HTML-Dokument ein Formular definieren. Jedes dieser Verhalten wird in Abhängigkeit von einer bestimmten Formulareingabe ausgelöst. Abb. 9.4 zeigt das Dialogfenster, in dem Sie das Verhalten DATENSATZ EINFÜGEN konfigurieren.

312

Herkömmliche Datenbanken und das Web

Abbildung 9.4: Daten aus einem Formular in einer Datenbanktabelle ablegen mit Datensatz einfügen

Da wir jetzt noch keine Webanwendungen entwickeln, möchte ich Ihnen empfehlen, in ein leeres HTML-Dokument ein Formular einzufügen. So können Sie die Dialogfenster zu den einzelnen Serververhalten öffnen und den Ausführungen besser folgen. Das Serververhalten DATENSATZ EINFÜGEN ist insofern ähnlich strukturiert wie die übrigen Serververhalten, als es eine Datenbankverbindung voraussetzt sowie Tabellen, in die es diese Datensätze schreiben kann. Es folgt eine Erklärung der verschiedenen Einstellungsmöglichkeiten: 쐽

FORMULAR – Da eine Seite mehrere Formulare enthalten kann, müssen Sie UltraDev mitteilen, welches Formular die Daten an die Tabelle übermittelt. Das Formular selbst muss alle Felder enthalten, die auch in der Tabelle ausgefüllt werden sollen.

쐽

FORMULARELEMENTE – In diesem Listenfeld werden alle Formularfelder angezeigt. Damit UltraDev die Daten aus den Formularfeldern den richtigen Tabellenfeldern zuordnen kann, müssen Sie die einzelnen Einträge der Reihe nach markieren und dann aus dem Popup-Menü SPALTEN die Tabellenspalte auswählen, in die die Eingabe aus dem Formularfeld eingetragen werden soll. Im Popup-Menü SENDEN ALS wählen Sie den Datentyp (Text/Numerisch) aus.

쐽

ZU URL WECHSELN – Nachdem die Daten eingegeben wurden, leitet das Serververhalten den Anwender auf eine neue Seite, deren URL Sie hier eingeben. Sie können den Anwender auch zur selben Seite zurückschicken.

Sie werden feststellen, dass die anderen datenbankspezifischen Verhaltensweisen dem Serververhalten DATENSATZ EINFÜGEN verblüffend ähnlich sind.

Datensatz aktualisieren Obwohl es vielleicht zunächst so scheint, dass das Serververhalten DATENSATZ EINFÜGEN identisch ist mit dem Serververhalten DATENSATZ AKTUALISIEREN, handelt es sich doch

313

Einführung in die dynamischen Werkzeuge von UltraDev

um zwei ganz unterschiedliche Dinge. Um einen Datensatz in einer Datenbank zu aktualisieren, wählen Sie das Serververhalten DATENSATZ AKTUALISIEREN. Das Dialogfenster zur Konfigurierung dieses Verhaltens sehen Sie in Abb. 9.5. Die Ähnlichkeit zwischen den beiden Fenstern ist offensichtlich, tatsächlich sind sie mehr oder weniger identisch. Gegenüber dem Serververhalten DATENSATZ AKTUALISIEREN müssen Sie jedoch zwei weitere Angaben machen: 쐽

DATENSATZ AUSWÄHLEN AUS – Im Gegensatz zum Einfügeverhalten greift eine Aktualisierung auf einen bereits bestehenden Datensatz zu. Diesen Datensatz müssen Sie aus einer Datensatzgruppe auswählen. Hierzu öffnen Sie das Popup-Menü und selektieren die betreffende Datensatzgruppe.

쐽

SPALTE FÜR EINDEUTIGEN SCHLÜSSEL – Das Feld mit dem Identifikationsschlüssel, über den der einzufügende Datensatz eindeutig adressiert werden kann. Da UltraDev keine zusammengesetzten Primärschlüssel unterstützt, müssen Sie diesem Faktum bereits beim Entwurf Ihrer Datenbank Rechnung tragen. Wenn Sie nicht mehr genau wissen, was es mit Primärschlüsseln auf sich hat, lesen Sie Einzelheiten noch einmal unter Tag 6, Einführung in dynamische Webanwendungen und Datenbankentwicklung, nach.

Abbildung 9.5: Datensatz aktualisieren schreibt keine neuen Einträge, sondern aktualisiert bestehende Datensätze.

Fortgeschrittene Datenmanipulation: replace into Manche Datenbankserver verwenden anstelle der Anweisung insert into, die standardmäßig vom Serververhalten DATENSATZ EINFÜGEN verwendet wird, die Anweisung replace into. Die Anweisung replace into leistet im Prinzip dasselbe wie insert into, der Unterschied besteht darin, dass ein alter Eintrag zuerst aus der Tabelle gelöscht wird, wenn der neue Eintrag unter diesem Schlüssel denselben Wert hat. Wenn Sie replace into an Stelle von insert into verwenden, können Sie Daten in eine Datenbank neu einfügen, ohne sich mit dem Serververhalten DATENSATZ AKTUALISIEREN beschäftigen zu müssen. Später in den Beispielen verwende ich dieses Kommando nicht (da es nicht in allen Datenbanken zur Verfügung steht), aber vielleicht möchten Sie ein-

314

Herkömmliche Datenbanken und das Web

mal austesten, ob Ihr Datenbankserver dieses Feature unterstützt. Haben Sie sich für den MySQL-Server als Produktionsplattform entschieden, wird es Sie interessieren, dass Sie hier diese Funktion zur Verfügung haben. Um das Serververhalten DATENSATZ EINFÜGEN gegen ein replace into auszutauschen, müssen Sie die Datei InsertRecord.js im Ordner Configuration/ServerBehaviors modifizieren. Diese Datei ist in vier Abschnitte gegliedert: ASP (JavaScript), ASP (VBScript), JSP und CFML. Öffnen Sie die Datei und suchen Sie den entsprechenden Abschnitt. Der Code für ASP/JavaScript beispielsweise liest sich folgendermaßen: //***********ASP *************** var WGHT_AspEditMain =20; //***ASP/JavaScript *** var PREP_AspJsEditMain ="MM_insert"; var PATT_AspJsEditMain ='Request\\([\'"]MM_insert'; var MASK_AspJsEditMain =""+

In diesem Abschnitt des Programmcodes steht eine einzelne Zeile, die die SQL-Anweisung erzeugt: " var MM__insertStr = ' insert into ' +MM_tableName + ' ➥(' +MM_tableValues + ')values...

Damit UltraDev das neue Kommando verwendet, müssen Sie lediglich die insert intoAnweisung durch replace into ersetzen: " var MM__insertStr = ' replace into ' + MM_tableName + ' ➥(' +MM_tableValues + ')values...

Das modifizierte Serververhalten steht danach unmittelbar zur Verfügung. In der praktischen Arbeit werden Sie keinen Unterschied feststellen, nur verwendet das DATENSATZ EINFÜGEN-Verhalten statt des von UltraDev eingestellten Codes nun den neuen Code. Falls Sie ein Serververhalten modifizieren, dürfen Sie nicht davon ausgehen, dass die modifizierte Verhaltensweise automatisch auf allen Seiten aktualisiert wird. Die Serververhalten werden zusammen mit jedem Dokument der Website gespeichert. Um den Code im Dokument zu aktualisieren, müssen Sie ihn entweder von Hand aktualisieren oder das Serververhalten löschen und wieder zuweisen.

Datensatz löschen Vierter im Bunde ist das Serververhalten DATENSATZ LÖSCHEN. Denn wenn man Datensätze in einer Datenbank ablegen kann, dann sollte man sie auch wieder löschen können. Von diesem Serververhalten gibt es weiter nichts zu berichten als das es genau tut, was sein Name sagt. Abb. 9.6 zeigt das Konfigurationsmenü des Serververhaltens DATENSATZ LÖSCHEN.

315

Einführung in die dynamischen Werkzeuge von UltraDev

Abbildung 9.6: Datensätze per Formular löschen: das Serververhalten Datensatz löschen

Die Einstellungen in diesem Dialogfenster lassen sich aus den vorher beschriebenen Menüs ableiten. Sie sollten damit keine Probleme haben.

Befehl Das Allzweck-Serververhalten ist das Verhalten BEFEHL, zu sehen in Abb. 9.7. Über dieses Verhalten können Sie gespeicherte Prozeduren oder blanken HTML-Code ausführen und gegebenenfalls eine Datensatzgruppe ausgeben lassen. Im Unterschied zu anderen Serververhalten können Sie aber mit dem Verhalten BEFEHL programminterne Variablen mit Serververhalten verbinden, die so mit anderen Verhaltensweisen nicht möglich sind.

Abbildung 9.7: Mit dem Serververhalten Befehl können Sie gespeicherte Prozeduren und andere SQLAbfragen ausführen lassen.

Wenn Sie einen Befehl definieren, werden Sie feststellen, dass dieses Verhalten große Ähnlichkeit mit dem Verhalten DATENSATZ EINFÜGEN und DATENSATZGRUPPE hat. Wenn Sie für den Befehl einen Namen vergeben haben, müssen Sie den Typ wählen: entweder

316

Herkömmliche Datenbanken und das Web

eine Standard-SQL-Anweisung (Einfügen, Aktualisieren usw.) oder eine gespeicherte Prozedur. Soll nach Ausführung des Befehls ein Datensatz zurückgegeben werden, müssen Sie noch das Kontrollfeld FOLGENDEN DATENSATZ ZURÜCKGEBEN NAMENS: aktivieren und einen Namen für die neue Abfrage vergeben. Was dieses Werkzeug noch flexibler macht, ist die Tatsache, dass Sie programminterne Variablen von UltraDev wie eine normale Datensatzgruppe verwenden können. Das heißt, Sie können auf Sitzungsvariablen, Cookies usw. für die Definition des Befehls zurückgreifen. Im Gegensatz zum normalen Einfüge-Verhaltens BEFEHL EINFÜGEN kann das Verhalten BEFEHL URL-Parameter und andere Daten in einer insert-Anweisung verarbeiten. Wenn Sie sich für die fortgeschritteneren Entwicklungsmöglichkeiten mit UltraDev interessieren, dann sind Sie hier richtig. Wenn Sie den Stoff von Tag 12, »Komplexe Datenbankabfragen«, durchgearbeitet haben, können Sie mit diesem Verhalten direkt auf Datenbanken und deren Befehlssatz zugreifen.

Der Unterschied online – offline Wenn Sie schon Datenbankerfahrung haben, werden Sie sich vielleicht fragen: »Das ist doch alles wie bei anderen Datenbanken auch, wo liegt also das Problem?« Der Unterschied zwischen einer gewöhnlichen Datenbank und den Serververhalten ist der, dass eine Aktion nicht unmittelbar ausgeführt wird. Serververhalten benötigen Informationen von einer Webseite, und diese Webseite verwendet die Informationen zur Ausführung des Serverhaltens. Was die Sache vielleicht etwas verwirrend macht, ist, dass der Code für ein Serververhalten in der Seite gespeichert wird, die die Daten überträgt, obwohl die übertragende Seite aller Wahrscheinlichkeit nach nicht die Seite ist, die nach Ausführung des Serververhaltens angezeigt wird. Nachfolgend der genaue Ablauf: 1. Es wird ein HTML-Dokument erstellt, das mithilfe eines Formulars Daten an eine Datenbank überträgt. Bei den zu übertragenden Daten kann es sich um Datensätze handeln, die beispielsweise eingefügt oder gelöscht werden müssen. 2. Dem HTML-Dokument wird ein Serververhalten zugewiesen, das die Daten verarbeiten soll, die in dieses Dokument eingefügt werden. Bei diesen Serververhalten handelt es sich typischerweise um die Befehle DATENSATZ EINFÜGEN, AKTUALISIEREN oder LÖSCHEN. 3. Das Verhalten wird so konfiguriert, dass der Anwender nach Ausführung des Serververhaltens auf eine neue Seite geleitet wird. 4. Die Webseite steht online. 5. Ein Anwender kommt auf die Seite, füllt das Formular aus und schickt es ab.

317

Einführung in die dynamischen Werkzeuge von UltraDev

6. Das Formular schickt die Daten an dieselbe Seite zurück, in der das Serververhalten gespeichert ist, woraufhin das Serververhalten ausgeführt wird. 7. Nachdem das Serververhalten ausgeführt wurde, schickt das Serververhalten den Browser zu einem anderen Dokument oder einer anderen Website. Ich hoffe, das macht die Geschichte etwas transparenter. Der Ablauf, der sich hinter diesen Serververhalten verbirgt, mag etwas bizarr erscheinen, doch um effektive dynamische Sites zu entwickeln, müssen Sie mit diesen Hintergründen vertraut werden. Nicht alle Serververhalten dienen jedoch dem Zweck, Daten in einer Datenbank abzulegen oder den Anwender auf eine neue Seite zu leiten. Lassen Sie uns einen Blick auf die restlichen Serververhalten werfen, die Sie zum Entwickeln von Webapplikationen brauchen.

Weitere Serververhalten Daten in einer Datenbank anzuzeigen bzw. zu manipulieren ist das Haupteinsatzgebiet von UltraDev. Die zuvor besprochenen Serververhalten sind ein guter Einstieg in die Materie, doch reichen sie allein noch nicht aus, um eine brauchbare Webanwendung zu realisieren. Nehmen wir an, wir haben eine Datensatzgruppe mit 20 Einträgen erzeugt – wie bringen wir sie alle auf den Schirm? Und nehmen wir weiter an, es handelt sich um 2000 Datensätze. Wie können wir dem Anwender diese 2000 Datensätze zugänglich machen, ohne sie alle in ein einziges HTMLDokument zu packen? Die Lösung für dieses Problem (und einige andere) bieten verschiedene zusätzliche Serververhalten, mit denen es möglich ist, die Anzeige einer Datensatzgruppe zu steuern.

Bereich wiederholen Das Verhalten BEREICH WIEDERHOLEN arbeitet in einer Datensatzgruppe wie eine Schleife. Sie können sich damit mehrere Datensätze einer Gruppe auf einmal anzeigen lassen – entweder alle oder eine bestimmte Anzahl. Dieses Verhalten wiederholt nicht nur einzelne Feldwerte, sondern alles, was in einem bestimmten Bereich steht. Die einzelnen Felder oder Spalten einer Datenbank werden in HTML-Dokumenten gewöhnlich in Tabellenform dargestellt, damit die Daten zusammengehalten werden. Wenn Sie das Verhalten BEREICH WIEDERHOLEN verwenden, würden Sie in diesem Fall alle Felder, die Sie wiederholen möchten, in eine einzige Tabellenzeile schreiben und auf diese Zeile das Verhalten anwenden. Von diesen Datensätzen werden dann jeweils so viele angezeigt, wie Sie im Konfigurationsdialog eingestellt haben. Abb. 9.8 zeigt das Dialogfenster BEREICH WIEDERHOLEN.

318

Herkömmliche Datenbanken und das Web

Abbildung 9.8: Mehrere Datensätze auf einmal anzeigen lassen mit dem Verhalten Bereich wiederholen

Haben Sie einen bestimmten Bereich ausgewählt, der wiederholt angezeigt werden soll, fordert das Dialogfenster Sie auf, die Datensatzgruppe und die Anzahl der anzuzeigenden Datensätze einzugeben.

Zu Datensatz verschieben Die wenigsten Anwender wollen sich durch 5.000 Datensätze auf ihrem Monitor scrollen. Tatsächlich sind den meisten schon zehn Datensätze zu viel. Wenn Sie die Anzahl der angezeigten Datensätze mit dem Verhalten BEREICH WIEDERHOLEN einschränken, müssen Sie auch Navigationsmöglichkeiten anbieten, um zu den vorherigen oder nachfolgenden Datensätzen in der Datenbank springen zu können. Die Befehlsgruppe ZU DATENSATZ VERSCHIEBEN stellt alle erforderlichen Verhaltensweisen zur Verfügung, um durch eine Datensatzgruppe navigieren zu können. Sie finden diese Verhaltensweisen in der Palette SERVERVERHALTEN unter dem Menüpunkt ZU DATENSATZ VERSCHIEBEN: 쐽

ZUM ERSTEN DATENSATZ VERSCHIEBEN – Unabhängig vom zuletzt angezeigten Datensatz springt dieses Verhalten zum ersten Datensatz einer Gruppe.

쐽

ZUM VORHERIGEN DATENSATZ VERSCHIEBEN – Geht zum jeweils vorigen Datensatz zurück. Wollen Sie zum vorher angezeigten »Datenblatt« zurückspringen, verwenden Sie dieses Verhalten.

쐽

ZUM NÄCHSTEN DATENSATZ VERSCHIEBEN – Das Pendant zum obigen Verhalten. Springt einen Datensatz weiter.

쐽

ZUM LETZTEN DATENSATZ VERSCHIEBEN – Springt zum letzten Datensatz einer Gruppe. Dieses Verhalten in Verbindung mit dem Verhalten ZUM ERSTEN DATENSATZ VERSCHIEBEN erlaubt dem Anwender, schnell zum ersten bzw. letzten Eintrag einer Datenbank zu springen.

쐽

ZU BESTIMMTEM DATENSATZ VERSCHIEBEN – Statt wie mit den obigen Verhaltensweisen zu Einträgen zu springen, die relativ zum aktuell angezeigten sind, definieren Sie hier per Identifikationsschlüssel absolute Sprünge zu einem Datensatz, den Sie im Feld URL-PARAMETER spezifizieren.

319

Einführung in die dynamischen Werkzeuge von UltraDev

Man muss sich klar machen, dass diese Serververhalten jeweils nur in Verbindung mit bestimmten Datensatzgruppen funktionieren, nicht etwa mit einer kompletten Tabelle in der Datenbank. Wenn Sie also z.B. den Befehl ZUM NÄCHSTEN DATENSATZ VERSCHIEBEN verwenden, muss das nicht der nachfolgende Datensatz in der Tabelle sein, sondern der nächste Eintrag in der Datensatzgruppe. Die ganze Befehlsgruppe ZU DATENSATZ VERSCHIEBEN funktioniert nach demselben Prinzip: Datensatzgruppe auswählen, Link definieren, der das Serververhalten auslöst, und fertig. Abb. 9.9 zeigt ein vorschriftsmäßig konfiguriertes Serververhalten.

Abbildung 9.9: Die Befehlsgruppe Zu Datensatz verschieben ermöglicht die Navigation in Datensatzgruppen.

Bereich anzeigen Der Befehl BEREICH ANZEIGEN ist mein absolutes Lieblingsserververhalten, obwohl man es eigentlich nicht braucht, um Datensätze einer Datenbank anzuzeigen. Dieses Verhalten macht genau, was sein Name vermuten lässt: Es verbirgt bzw. zeigt bestimmte Bereiche innerhalb eines Dokuments. Sie wollen wissen, wozu das gut ist? Ein eindeutiger Anwendungsfall z.B. wäre (übrigens der einzige, den Macromedia in den Programmunterlagen dokumentiert), einen bestimmten Bereich einer Seite in Abhängigkeit von bestimmten Daten der Datensatzgruppe anzuzeigen oder auszublenden. Dieses Verhalten wird also gesteuert vom Vorhandensein (bzw. Nicht-Vorhandensein) bestimmter Einträge in der Datensatzgruppe. Ein Beispiel: Auf der Dokumentseite gibt es eine Schaltfläche oder einen Link NÄCHSTER DATENSATZ, gesteuert vom Serververhalten ZUM NÄCHSTEN DATENSATZ verschieben. Wenn Sie beim letzten Datensatz einer Gruppe angelangt sind, ist dieser Link natürlich überflüssig. Also weisen Sie diesem Link das VERHALTEN BEREICH ZEIGEN, WENN NICHT LETZTER DATENSATZ zu. Die Konfiguration des Verhaltens BEREICH ANZEIGEN bereitet keine Probleme (siehe Abb. 9.10).

320

Herkömmliche Datenbanken und das Web

Abbildung 9.10: Wählen Sie zum Testen des Verhaltens die richtige Bedingung und die richtige Datensatzgruppe aus.

Zum Ein- bzw. Ausblenden von Vor/Zurück-Buttons ist das Verhalten BEREICH offensichtlich von großem Nutzen, aber es gibt noch ein paar andere, viel effektivere Einsatzmöglichkeiten.

ANZEIGEN

Mit diesem Verhalten lässt sich jede Art von Information anzeigen bzw. verbergen. Damit lassen sich Webseiten erstellen, deren Inhalte in Abhängigkeit von Abfrageergebnissen komplett ausgetauscht werden. Sollen Inhalte in Abhängigkeit von bestimmten Bedingungen verborgen werden, kann das gewünschte Verhalten auch erreicht werden, indem die Inhalte angezeigt werden, wenn die Umkehrung der Bedingung zutrifft. In einer der späteren Lektionen werden Sie lernen, wie Sie mit diesem Verhalten Login-Informationen überprüfen können und noch ein paar interessante Dinge mehr.

Dynamische Elemente Die in der Gruppe DYNAMISCHE ELEMENTE zusammengefassten Serververhalten gehören zu den Elementen, die Sie wahrscheinlich am häufigsten benutzen werden, auch wenn das momentan noch nicht so offensichtlich sein mag. Wenn Sie eine Datensatzgruppe angelegt haben, wird diese Datengruppe in der Palette DATENBINDUNGEN zusammen mit einem kleinen Icon angezeigt. Klicken Sie auf das Plussymbol (+), wird der ganze Ast ausgeklappt und alle verfügbaren Datenfeldnamen angezeigt (siehe Abb. 9.11). Um diese Datenfelder im HTML-Dokument zu platzieren, müssen Sie in der Dokumentansicht lediglich das entsprechende Feld in den DATENBINDUNGEN anklicken und mit gedrückter Maustaste an die gewünschte Stelle im Dokument ziehen. Folgende dynamischen Elemente stehen zur Auswahl: 쐽

DYNAMISCHER TEXT – Fügt den Wert eines Datenbankfeldes direkt in der Dokumentansicht ein.

쐽

DYNAMISCHE(S) LISTE/MENÜ – Füllt ein Listen- bzw. Menüobjekt mit Einträgen aus einer Tabelle der Datenbank. Erlaubt außerdem die datenbankgesteuerte Vorbelegung eines Listen- bzw. Menüeintrags.

321

Einführung in die dynamischen Werkzeuge von UltraDev

Abbildung 9.11: Die Palette Datenbindungen zeigt alle verfügbaren Felder einer Datensatzgruppe an. 쐽

DYNAMISCHES TEXTFELD – Schreibt das Attribut »value« aus einem Formularfeld in die Datenbank. Wird oft benutzt, um bereits eingegebene Anwenderwerte wiederherzustellen.

쐽

DYNAMISCHES KONTROLLKÄSTCHEN – Überprüft, ob ein Kontrollkästchen als aktiviert angezeigt werden soll. Hierzu wird ein Wert in der Datenbank mit einem anderen bekannten Wert verglichen.

쐽

DYNAMISCHE OPTIONSSCHALTER – Ähnlich wie beim Kontrollkästchen wird ein Optionsfeld als ausgewählt gesetzt, wenn eine bestimmte Bedingung erfüllt ist.

In den meisten Fällen reichen die Verhalten BEREICH WIEDERHOLEN und DYNAMISCHER TEXT völlig aus, um Datenbankinhalte online auf den Monitor des Anwenders zu bringen.

9.2

Datenbindungen

Jedes Mal, wenn Sie ein Serververhalten DYNAMISCHE ELEMENTE einer Seite zuweisen, erstellen Sie in Wirklichkeit eine Datenbindung. Die Palette DATENBINDUNGEN ist das zentrale Instrument, das Ihnen einen Überblick darüber gibt, auf welche Daten Sie Zugriff haben, mit welchem HTML-Objekt sie verknüpft sind und wie Sie sie formatieren können. Lassen Sie uns die verschiedenen Funktionen dieser Palette nun der Reihe nach durchgehen.

322

Datenbindungen

Dynamische Daten Zuallererst zeigt die Palette DATENBINDUNGEN alle Daten an, die innerhalb der definierten Datensatzgruppe verfügbar sind. In Datensatzgruppen stehen die dynamischen Daten, die Sie an Ihre Website anbinden können. Ist eine Datensatzgruppe definiert, wird sie sowohl in der Palette SERVERVERHALTEN wie in der Palette DATENBINDUNGEN angezeigt. Im Gegensatz zu anderen Serververhalten können Sie eine Datensatzgruppe (Abfrage) direkt in der Palette DATENBINDUNGEN definieren, indem Sie auf das Plussymbol (+) klicken und DATENSATZGRUPPE (ABFRAGE) wählen. Diesen Datentyp werden Sie bei der Arbeit mit UltraDev sicher am häufigsten verwenden, doch stehen in dieser Ansicht auch noch weitere Daten zur Verfügung. So können Sie auch Anforderungsvariablen und Sitzungsvariablen definieren, zwei ebenfalls sehr nützliche Datenbindungstypen. Über diese beiden Verhalten haben Sie Zugriff auf serverseitig generierte Sitzungsvariablen, URL-Parameter, Cookies, Formulardaten usw. Im Gegensatz zu Datensatzgruppen oder Datenbindungen, die eine Datenbankverbindung voraussetzen, sind Sitzungsvariablen und auf Cookies basierende Anforderungsvariablen Site-weit zugänglich. Die meisten Bindungstypen sind seitenspezifisch und gelten nur für die Seite, für die sie definiert wurden. Genau wie Datensatzgruppen werden diese zusätzlichen Daten in der Palette DATENBINangezeigt und können mit der Maus direkt ins Dokument gezogen werden.

DUNGEN

Die Datenbindungen (Sitzungsvariable, Cookies) bringen ein gravierendes Manko der UltraDev-Entwicklungsumgebung ans Licht. Sie können zwar zu bereits definierten Sitzungsvariablen usw. eine Datenbindung herstellen, jedoch ist es nicht möglich, Cookies oder Sessions neu zu erzeugen. Um diese Webtechniken einsetzen zu können, müssen Sie selbst Hand an den Code legen und ein neues Serververhalten schreiben. Dies wird unser letzter Tagespunkt sein.

Datenbindungen in der Dokumentansicht Die Palette DATENBINDUNGEN hat sozusagen einen Doppelnutzen. Einerseits zeigt sie, wie wir mittlerweile wissen, alle dynamischen Daten an, die mit einem Dokument verbunden sind. Das ist die erste Information, die wir über diese Palette bekommen. Zusätzlich zeigt sie uns Informationen darüber an, wie die einzelnen Daten mit den Objekten in der Dokumentansicht verbunden sind.

323

Einführung in die dynamischen Werkzeuge von UltraDev

Die einfachste Bindung ist z.B. die zwischen dynamischem Text in der Dokumentansicht und einem x-beliebigen Datensatz in der Palette DATENBINDUNGEN. Ziehen Sie probehalber einen Datensatz aus der Palette in die Dokumentansicht und sehen Sie sich dann die Palette noch einmal an (siehe Beispiel in Abb. 9.12). In der Spalte BINDEN wird angezeigt, dass das ausgewählte Feld mit »Ausgewählter Text« verbunden ist. Jede Beziehung von einem Objekt im Dokument mit einem dynamischen Datensatz wird in dieser Palette angezeigt.

Abbildung 9.12: Die Palette Datenbindungen macht deutlich, wie Elemente in der Dokumentansicht mit DesignZeit-Elementen verknüpft sind.

Bindungen in der Dokumentansicht beschränken sich nicht bloß auf dynamischen Text. So könnten Sie z.B. ein bereits erstelltes Popup-Menü mit einem Datensatz verknüpfen, statt per Serververhalten ein Popup-Menü oder eine Auswahlliste zu erzeugen. Wenn Sie ein Objekt in der Dokumentansicht auswählen und den entsprechenden Datensatz in der Palette markieren, können Sie jedes der für dieses Objekt verfügbaren Attribute damit verbinden, wenn Sie auf den Button EINFÜGEN klicken. (Die verfügbaren Attribute werden im Popup-Menü unten in der Palette angezeigt.) Sie können Dutzende von Attributen – Name, Farbe, ausgewähltes Objekt – binden. Alles, was UltraDev als Attribut eines Objektes erkennt, kann mit dynamischen Daten verbunden werden. Um eine Bindung zu ändern, markieren Sie die Bindung, klicken auf den Pfeil, der neben der Bindung angezeigt wird, und wählen ein neues Attribut aus. Sie können Daten einer Datenbank auf zwei Arten dynamisch mit HTMLObjekten verknüpfen. Entweder direkt über ein Serververhalten oder indirekt über Datenbindungen. Beide Techniken werden in den nächsten Lektionen ausführlich besprochen.

324

Datenbindungen

Datenformate Für jeden verbundenen Datensatz können Sie eine Formatierung wählen, mit der er an UltraDev übergeben wird – sei es zur Darstellung auf dem Monitor oder für die Datenbindung selbst. Die Formate wählen Sie aus dem Popup-Menü in der Spalte FORMAT. Fügen Sie Ihrem Dokument dynamische Daten hinzu, damit Sie dieses Popup-Menü öffnen können. Folgende Formatierungen stehen zur Auswahl: 쐽

DATUM/UHRZEIT – Ist der verbundene Datensatz ein Datum oder eine Uhrzeit, können Sie eine der angebotenen Formatierungen verwenden.

쐽

WÄHRUNG – Hiermit können Sie Geldbeträge formatieren. Mithilfe von Währungsformaten müssen Sie Währungssymbole (wie z.B. $) nicht von Hand einsetzen.

쐽

NUMMER – Hiermit lassen sich Zahlen formatieren: Aufrunden, Anzahl der Kommastellen usw.

쐽

PROZENT – Wie oben, nur eben für Prozentwerte.

쐽

GROSS-/KLEINSCHREIBUNG – Wandelt Text in Groß- oder Kleinbuchstaben um.

쐽

FEINEINSTELLUNG – Textinformationen in Datenbanken werden oft durch Leerzeichen getrennt. Feinstellung beseitigt Leerzeichen entweder von links, rechts oder beiden Seiten.

Die übrigen Arten der Formatierung betreffen die Kodierung von URLs, die Stringdaten enthalten, sodass sie per URL übergeben werden können. (Sonderzeichen werden in Hexagesimalcode umgewandelt.) Falls Sie das passende Format nicht finden, können Sie es über FORMATLISTE BEARBEITEN erstellen oder ein bereits vorhandenes Format anpassen. Abb. 9.13 zeigt das Dialogfenster FORMATLISTE BEARBEITEN.

Abbildung 9.13: Formatierungen bearbeiten oder hinzufügen

Wie Sie ein neues Format hinzufügen: 1. Klicken Sie auf das Plussymbol (+). 2. Wählen Sie das Format, das Sie ergänzen wollen (Nummer, Währung, Prozent) aus dem Popup-Menü.

325

Einführung in die dynamischen Werkzeuge von UltraDev

3. Setzen Sie die Attribute für Ihr neues Format: Zahl der führenden Nullen, Nachkommastellen usw. 4. Klicken Sie auf OK.

Abbildung 9.14: Passen Sie Formate an die speziellen Erfordernisse Ihrer Anwendung an.

9.3

Benutzerauthentifizierung

Ab UltraDev 4.0 gibt es eine Reihe neuer Serververhalten, die der Authentifizierung des Anwenders dienen. Im Gegensatz zu anderen Verhaltensweisen verändern sie keine Daten oder die Art ihrer Darstellung. Diese Verhaltensweisen dienen dem Zweck, den Zugang zu bestimmten Seiten nur für berechtigte Anwender zuzulassen. Sie setzen eine Tabelle mit Zugangsberechtigungen voraus, die Sie selbst verwalten und pflegen müssen. In dieser Tabelle werden der Name und das Passwort des Anwenders in Klartext gespeichert. Die UltraDev-Verhaltensweisen vergleichen diese Daten mit den Eingaben des Anwenders im Anmeldeformular. Stimmen sie überein, wird eine Session-Variable MM_Username gesetzt. Auf allen weiteren Seiten wird diese Variable überprüft um festzustellen, ob der Betreffende eine Zugangsberechtigung zu diesen Seiten besitzt. Es gibt insgesamt vier Authentifizierungsverhalten, die wir nun der Reihe nach durchgehen werden.

Benutzer anmelden Das Verhalten BENUTZER ANMELDEN (siehe Abb. 9.15) präsentiert sich zwar mit einer umfangreichen Eingabemaske, ist aber leicht zu konfigurieren. Dieses Verhalten wird zweckmäßigerweise einer Anmeldeseite zugewiesen. Alles, was Sie tun müssen, ist, ein Formular zu erstellen – der Rest wird automatisch erledigt. Um das Verhalten zu konfigurieren, müssen Sie die vier Felder der Eingabemaske entsprechend den Werten in Ihrer Site bzw. Datenbank ausfüllen: 쐽

326

EINGABE ABRUFEN AUS FORMULAR – Hier wählen Sie das Formular aus, das die Authentifizierungsdaten an das Verhalten schickt. Ferner müssen Sie spezifizieren, welche Formularfelder den Benutzernamen und das Passwort enthalten.

Benutzerauthentifizierung

Abbildung 9.15: Das Verhalten Benutzer anmelden vergleicht Anwendereingaben aus einem Formular mit Einträgen in der Datenbank. 쐽

VALIDIEREN ÜBER VERBINDUNG – Hier wählen Sie die Datenbankverbindung aus, die Tabelle und die Tabellenspalten, die die gespeicherten Log-In-Daten enthalten. Diese Informationen müssen im Klartext vorliegen, dürfen also nicht verschlüsselt sein.

쐽

BEI ERFOLGREICHER ANMELDUNG HIERHER GEHEN – Wenn sich die Daten aus dem Anmeldeformular mit den Einträgen in der Datenbank decken, wird der Besucher zu der hier definierten URL geschickt. Wenn Sie das Kontrollfeld ZUM VORHERIGEN URL GEHEN aktivieren, wird der Besucher zurück zu der Seite geleitet, die er ursprünglich laden wollte, für die er aber keine Zugriffsrechte hatte. Schlägt die Anmeldung fehl, können Sie den Besucher zu einer eigens hierfür definierten Seite schicken.

쐽

ZUGRIFF BESCHRÄNKEN BASIEREND AUF – In diesem untersten Bereich der Eingabemaske haben Sie zwei Optionen zur Auswahl: Sie können die Zugriffsrechte entweder auf Grund von Benutzernamen und Kennwort beschränken bzw. auf Grund von Benutzernamen, Kennwort und Berechtigungslevel. Die erste Option bedarf keiner weiteren Erklärung. Bei der zweiten Option können Sie den Zugang zu bestimmten Seiten über eine Berechtigungshierarchie regeln (Gast, registrierter Besucher, Administrator usw.). Falls Sie Zugang mit Berechtigungslevel implementieren, müssen Sie in der Datenbanktabelle, in der die Zugangskennungen gespeichert sind, eine entsprechende Spalte angelegt haben.

Mit diesen wenigen Handgriffen haben Sie eine Anmeldeseite generiert. Hat das Serververhalten die nötigen Daten erhalten und überprüft, wird der Besucher auf die von Ihnen festgelegte Seite gelenkt. Ihre Aufgabe ist es nunmehr, diese Seiten zu gestalten.

327

Einführung in die dynamischen Werkzeuge von UltraDev

Zugriff auf Seite beschränken Wenn sich ein Besucher auf einer Website einloggen muss, dann hat das meistens einen tieferen Grund – z.B., um den Zugang zu bestimmten Informationen zu beschränken. Das Serververhalten ZUGRIFF AUF SEITE BESCHRÄNKEN ermöglicht es zu überprüfen, ob ein Besucher die erforderliche Berechtigung hat, eine bestimmte Seite anzusehen, bevor diese angezeigt wird. Es wird vorausgesetzt, das Sie bereits ein Verhalten BENUTZER ANMELDEN definiert haben, bevor Sie über dieses Verhalten eine Zugangsbeschränkung festsetzen. Wenn Sie dieses Verhalten einsetzen wollen, brauchen Sie es lediglich der Seite zuzuweisen, die nur für bestimmte Besucher zur Verfügung stehen soll. Wie aus Abb. 9.16 ersichtlich, genügt es für die Konfigurierung dieses Verhaltens, dass Sie festlegen, auf Grund welcher Daten der Zugriff beschränkt werden soll (gültiges Login bzw. gültiges Login plus Berechtigungslevel). Hat sich der Besucher nicht korrekt eingeloggt, wird er auf die Seite geschickt, die Sie im Feld BEI VERWEIGERTEM ZUGRIFF HIERHER GEHEN eingeben.

Abbildung 9.16: Zugriffsrechte beschränken mit Benutzernamen und Kennwort, eventuell ergänzt um einen Berechtigungslevel

Wollen Sie Zugriffsrechte zusätzlich über die Definition von Berechtigungsleveln regeln, müssen Sie bereits ein Anmeldeverhalten erstellt haben, das Berechtigungslevel überprüft. Wenn Sie Berechtigungslevel an dieser Stelle zum ersten Mal einsetzen, müssen Sie auf die Schaltfläche DEFINIEREN klicken, um die entsprechenden Level der Auswahlliste hinzuzufügen. Über die Plus- und Minussymbole können Sie Berechtigungslevel erzeugen bzw. löschen. Vorsicht: Berechtigungslevel müssen exakt so benannt sein wie ihre Entsprechungen in der Datenbank. Haben Sie diese Berechtigungslevel bereits definiert, müssen Sie sie nur noch aus der Liste auswählen. In der Folge haben nur die Besucher Zugang zu dieser Seite, die den nötigen Berechtigungslevel besitzen.

Benutzer abmelden Sinn und Zweck des Verhaltens BENUTZER ABMELDEN lässt sich problemlos aus seinem Namen ableiten. Auch wenn Sie dieses Verhalten auf Ihrer Website nicht wirklich brauchen, gibt es doch ein paar sinnvolle Einsatzmöglichkeiten. Sobald sich ein Besucher ein-

328

Benutzerauthentifizierung

loggt, legt dessen Browser für diese Session ein Cookie an. Dieses Cookie existiert nur so lange, wie der Browser geöffnet ist. Schließt der Anwender den Browser, hat er sich damit definitiv aus der Anwendung ausgeloggt und es besteht keine Notwendigkeit für ein Auslog-Verhalten. Soll der Besucher aber die Möglichkeit haben, sich während einer Sitzung aus einem Zugangskonto auszuloggen und sich anschließend unter einem anderen Zugang wieder einzuloggen, müssen Sie dieses Verhalten implementieren. Das zugehörige Dialogfenster sehen Sie in Abb. 9.17. Abbildung 9.17: Konfiguration des Abmelde-Verhaltens und der Seite, die in der Folge angezeigt werden soll

Zur Konfiguration dieses Verhaltens braucht das Programm Informationen, wann das Abmelde-Verhalten aktiviert werden soll (nachdem ein Link angeklickt wurde oder wenn die Seite mit dem Abmelde-Verhalten geladen wird), und zu welcher Seite der Besucher im Anschluss gelenkt werden soll. Wie gesagt, wirklich brauchen tun Sie dieses Verhalten nicht. Es ist ziemlich unwahrscheinlich, dass die Besucher auf Ihrer Site diesen Logout-Link überhaupt bemerken werden – so ist das eben im Internet.

Neuen Benutzernamen überprüfen Für bestimmte Websites ist es erforderlich, dem Besucher ein Online-Anmeldeformular zur Verfügung zu stellen, über das er seinen eigenen Zugang konfigurieren kann. Hierzu muss er einen Benutzernamen und ein Kennwort eingeben können. Bei einigen Hundert registrierten Benutzern kann jedoch nicht ausgeschlossen werden, dass der gewählte Benutzername bereits vergeben ist. (Wenn Sie je versucht haben, bei einem Free-Maildienst eine persönliche Mailadresse einzurichten, dann wissen Sie wahrscheinlich, wovon ich rede.) Das Verhalten NEUEN BENUTZERNAMEN ÜBERPRÜFEN kontrolliert, ob ein Benutzername bereits vergeben ist, bevor es ihn in die Datenbank schreibt. Das Verhalten NEUEN BENUTZERNAMEN ÜBERPRÜFEN arbeitet in Verbindung mit dem Verhalten DATENSATZ EINFÜGEN und verlangt zwei Eingaben: das Datenfeld, das den Benutzernamen enthält, sowie die URL der Seite, auf die der Besucher geschickt werden soll, falls der gewählte Benutzername bereits vergeben ist. Abb. 9.18 zeigt das zugehörige Dialogfenster.

329

Einführung in die dynamischen Werkzeuge von UltraDev

Abbildung 9.18: Wählen Sie die Spalte der Tabelle aus, die den Benutzernamen enthält, sowie die Seite, auf die der Besucher geschickt wird, falls der Name bereits vergeben ist.

Wenn Sie Anmeldeseiten entwickeln, werden Sie dieses Verhalten nicht mehr missen wollen, da damit doppelte Einträge unmöglich sind.

Technik für Fortgeschrittene: Serververhalten editieren bzw. neu erstellen Die nachfolgenden Instruktionen sollten nur von den Lesern praktisch umgesetzt werden, die die Entwicklungsumgebung von UltraDev und zumindest eine der eingebetteten Skriptsprachen aus dem Effeff kennen. UltraDev enthält einen eigenen Editor, mit dem Sie neue Serververhalten erzeugen bzw. bereits vorhandene Ihren Erfordernissen entsprechend modifizieren. Ich kann nur jedem dringend davon abraten, die vordefinierten Serververhalten von UltraDev in irgendeiner Form zu verändern. Wenn Sie dergleichen vorhaben, speichern Sie das Verhalten erst unter einem anderen Namen, bevor Sie den Code umschreiben. Ich möchte Ihnen an einem kleinen Beispiel vorführen, wie sich Serververhalten anpassen lassen, damit Sie einen Eindruck davon bekommen, wie die Sache im Prinzip funktioniert. Klicken Sie in der Palette SERVERVERHALTEN auf das Plussymbol (+), und wählen Sie SERVERVERHALTEN BEARBEITEN, um ein bereits vorhandenes Serververhalten zu modifizieren (wir raten ab) oder NEUES SERVERVERHALTEN, um ein neues Serververhalten zu erstellen bzw. ein Serververhalten als Kopie zu speichern und dann zu modifizieren. Nehmen wir an, Sie möchten ein neues ASP-Serververhalten definieren, das eine SessionVariable unter Bezug auf eine Anforderungsvariable setzt. Die Befehlssyntax würde sich folgendermaßen lesen: <%Session("MySessionVariable")=Request("MyRequestVariable")%>

Im ersten Schritt wählen Sie im Popup-Menü der Serververhaltenpalette den Befehl NEUES SERVERVERHALTEN. Es öffnet sich das in Abb. 9.19 gezeigte Dialogfenster.

330

Benutzerauthentifizierung

Abbildung 9.19: Wählen Sie das Servermodell aus und vergeben Sie einen Namen für das neue Verhalten.

Wählen Sie das richtige Servermodell aus (in diesem Fall ASP) und vergeben Sie einen Namen für das neue Verhalten. Wenn Sie die Option VORHANDENES SERVERVERHALTEN KOPIEREN aktivieren, können Sie eines der bereits vorhandenen Serververhalten auswählen und modifizieren. Sie müssen dann nicht ganz blank beginnen. Haben Sie die erforderlichen Eingaben gemacht, klicken Sie auf OK. Im zweiten Schritt definieren Sie das eigentliche Serververhalten. Hierzu müssen Sie den erforderlichen Code im Dialogfenster SERVERVERHALTEN-ERSTELLUNG einsetzen (siehe Abb. 9.20).

Abbildung 9.20: Im Dialogfenster Serververhalten-Erstellung definieren Sie den nötigen ASP-, JSP- bzw. CFML-Code.

Jedes Serververhalten kann aus mehreren Codeblöcken bestehen, die an ganz unterschiedlichen Stellen im HTML-Dokument stehen können. Da es sich bei unserem Beispiel um ein ganz simples Serververhalten handelt (es besteht aus einem einzigen Codeblock), sollte es nicht schwierig zu definieren sein: 1. Klicken Sie auf das Plussymbol (+), um einen neuen Codeblock hinzuzufügen. Nennen Sie ihn Set_Session_block1 (der Defaultname). 2. Wählen Sie in den Eingabefeldern CODE EINFÜGEN und RELATIVE POSITION die Option »Über dem Tag « bzw. »Anfang der Datei«. Diese beiden Popup-Menüs regeln, in welchen Teil des Dokuments der Code eingefügt wird und wo er dort steht.

331

Einführung in die dynamischen Werkzeuge von UltraDev

3. Ändern Sie den Codeblock folgendermaßen um: <%Session("")=Request("")%> 4. Platzieren Sie nun den Cursor zwischen die beiden Anführungszeichen der SessionHälfte: Session(""). Klicken Sie dann auf die Schaltfläche PARAMETER IN CODEBLOCK EINFÜGEN. Sie werden aufgefordert, einen neuen Parameter zu definieren. Nennen Sie ihn SessionName. 5. Setzen Sie den Cursor jetzt zwischen die Anführungszeichen der Request-Hälfte: Request(""). Klicken Sie wieder auf die Schaltfläche PARAMETER IN CODEBLOCK EINFÜGEN. Es öffnet sich das bereits bekannte Dialogfenster. Nennen Sie diesen Parameter RequestName. 6. Damit haben Sie das Grundgerüst für das neue Serververhalten geschaffen. Klicken Sie nun für die weiteren Schritte auf die Schaltfläche WEITER. Der letzte Schritt in der Definition des neuen Serververhaltens besteht darin, das nun geöffnete Dialogfenster zu konfigurieren. Dieser Vorgang ist wie so viele andere in UltraDev ebenfalls automatisiert. Wie in Abb. 9.21 zu sehen, können Sie die Anordnung der Eingabefelder im Dialogfenster verändern. Klicken Sie in der Spalte ANZEIGEN ALS auf einen der Parameter, können Sie sie mit der Datensatzgruppe verknüpfen. Dadurch wird es möglich, dass diese Parameter mit dynamischen Daten gefüllt werden.

Abbildung 9.21: Legen Sie die Reihenfolge und die Art der Anzeige der Eingabefelder im neuen Serververhalten fest.

Wenn Sie die erforderlichen Einstellungen vorgenommen haben, klicken Sie auf OK. Nun wird das Serververhalten erzeugt und dem Menü der Palette SERVERVERHALTEN hinzugefügt. Das Dialogfenster für unser neu erzeugtes Serververhalten ist in Abb. 9.22 zu sehen. Wenn Sie die Beispiele in den kommenden Lektionen durcharbeiten, werden Sie feststellen, dass in manchen Fällen der automatisch generierte Codes angepasst werden muss, damit die Anwendung wie gewünscht funktioniert. Und das sind genau die Einsatzbereiche, wo wir nicht mit modifizierten Serververhalten arbeiten sollten. Rein theoretisch ginge das zwar, aber es würde länger dauern, ein Verhalten auf die gewünschte Funktionalität hin abzuändern, als einfach den Code zu editieren. Die Definition neuer Verhaltens-

332

Zusammenfassung

weisen empfiehlt sich dann, wenn sich damit stets wiederkehrende Arbeitsschritte automatisieren lassen – nicht der gelegentliche Einzelfall, da die vordefinierten Verhaltensweisen nicht die gewünschte Funktionalität bieten. So gesehen ist die Möglichkeit, eigene Serververhalten zu generieren ein fantastisches Werkzeug, das gerade die Programmierergilde zu schätzen wissen wird.

Abbildung 9.22: Das neue Serververhalten ist einsatzbereit.

9.4

Zusammenfassung

Ähnlich wie in der allerersten Lektion haben wir heute die grundlegenden Werkzeuge kennen gelernt, die wir für die weitere Arbeit brauchen. Ich weiß, es brennt Ihnen unter den Nägeln, diese Tools nun selbst auszuprobieren und eigene Sites zu kreieren, drum legen wir morgen auch gleich los damit. Später in dieser Woche werden wir uns den SQLBefehlssatz selbst noch etwas genauer ansehen, damit Sie Ihre eigenen Abfragen generieren können, die über die Möglichkeiten der vordefinierten Routinen hinausgehen. Nach der heutigen Lektion sollten Sie ein Verständnis für die Funktion der Serververhalten mitbringen, wissen, wo Sie sie im Programm finden und was Sie damit tun können. Auch Sinn und Zweck der Datenbindungen sollte Ihnen klar sein. Die Palette DATENBINDUNGEN werden Sie für die Entwicklung dynamischer Websites ständig brauchen, denn sie ist die Schnittstelle zu allen Datenbankabfragen sowie sämtlichen dynamischen Daten. Über die Palette DATENBINDUNGEN können Sie außerdem die Attribute eines beliebigen HTML-Objekts in der Dokumentansicht mit dynamischen Daten verknüpfen.

333

Einführung in die dynamischen Werkzeuge von UltraDev

Schließlich haben Sie auch noch die Möglichkeit, aus der Datenbank bezogene Daten bei der Ausgabe formatieren zu lassen. Da bestimmte Attribute in Tabellen von Datenbank zu Datenbank oft unterschiedlich formatiert sein können, kann diese Funktion in vielen Fällen ein wahres Geschenk der Götter sein. Wenn Ihnen die Funktion einzelner Werkzeuge vielleicht jetzt noch nicht ganz klar ist, wird sich das sicher in Laufe der kommenden Lektionen ändern, wenn Sie mit praktischen Beispielen arbeiten. Die einzelnen Serververhalten werden noch einmal gründlich besprochen, wenn wir sie in eine Seite einbauen. Sie müssen also den Stoff der heutigen Lektion nicht auswendig lernen.

9.5 F

Gibt es bei den fortgeschrittenen Abfragen irgendwelche Einschränkungen? A

F

Ja und nein. Wenn Sie dieses Verhalten wie zwei ineinander geschachtelte for...next-Schleifen verwenden, werden Sie eine kleine Überraschung erleben. Der von UltraDev generierte Code initialisiert die beiden Schleifen gleichzeitig, bevor eine davon ausgeführt wird. Das hat zur Folge, dass die innere Schleife nur einmal ausgeführt wird.

Wozu ist eigentlich der Befehl ZUSÄTZLICHE DATENQUELLEN ABRUFEN der Datenbindungspalette gut? A

334

Es ist vom Ergebnis her völlig gleich, ob ein Bereich angezeigt wird, weil eine Bedingung wahr ist, bzw. weil das Gegenteil der Bedingung wahr ist. Wenn Sie z.B. einen Bereich verbergen möchten, wenn die Bedingung A=1 erfüllt ist, können Sie das Serververhalten so konfigurieren, dass das Element angezeigt wird, wenn A≠1. Der Effekt ist der gleiche.

Kann man das Verhalten BEREICH WIEDERHOLEN ineinander schachteln? A

F

Die Abfragemöglichkeiten werden nur vom Datenbankserver begrenzt. UltraDev schickt die Abfrage so, wie sie ist, an den Server. Der SQL-Code selbst wird vom Programm nicht geparst.

Wie kann ich einen Bereich verbergen statt ihn anzuzeigen? A

F

Fragen und Antworten

Immer, wenn Sie in einer Palette oder einem Menü den Befehl Zusätzliche ... abrufen finden, können Sie über diesen Befehl Ihren Browser starten und direkt von der Macromedia-Website die entsprechenden Erweiterungen herunterladen.

Workshop

9.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. Welche Funktion hat das Verhalten DATENSATZGRUPPE? 2. Wie können Sie die Anweisung DATENSATZ EINFÜGEN direkt auf dem Server ausführen? 3. Unterstützt UltraDev zusammengesetzte Primärschlüssel bei Abfragen? 4. Gibt es neben den Serververhalten noch andere Wege, eine Site um dynamische Funktionen zu erweitern? 5. Wie können Sie dynamische Werte bei der Ausgabe formatieren lassen?

Übungen 1. Probieren Sie die verschiedenen Werkzeuge aus, die Sie heute kennen gelernt haben. Versuchen Sie, diese Tools zusammen mit der gestern definierten Datenbankverbindung zu testen. 2. Machen Sie sich mit der Palette Datenbindungen vertraut. Wenn Sie eine funktionierende Datenbankverbindung eingerichtet haben, fügen Sie einige HTML-Elemente in der Dokumentansicht ein und verbinden Sie mit den Daten einer Datensatzgruppe. Sie müssen hier keine sinnvolle Anwendung erstellen, es geht darum, dass Ihnen das Prinzip in Fleisch und Blut übergeht. 3. Wenn Sie schon Webanwendungen entwickelt haben, untersuchen Sie, wie Sie die dort implementierten Funktionen mit den Serververhalten von UltraDev realisieren können. Sie werden feststellen, dass UltraDev ein sehr flexibles Werkzeug ist, mit dem Sie eine große Anzahl von Entwicklungsaufgaben lösen können, auch wenn Sie hier nicht mit herkömmlichen Programmiersprachen arbeiten.

335

Datenbankgestützte Webseiten entwickeln

0 1

Datenbankgestützte Webseiten entwickeln

Sobald Sie eine funktionierende Verbindung zu einem Datenbankserver eingerichtet haben, zeigt sich UltraDev als der leistungsfähige visuelle Editor, der er ist. Wenn Sie eine Verbindung zu einer Datenbank erstellt haben, wird es Ihr erstes Ziel sein, die dort gespeicherte Information anzuzeigen. Je nach Webanwendung kann das schon die ganze dynamische Funktionalität sein, die wir brauchen. Heute lernen Sie, wie Sie datenbankgestützte Webseiten entwickeln und wie das Backend aussehen muss, das die Dynamik liefert. Die Themen der heutigen Lektion: 쐽

Datenbank-Backends erstellen und online verfügbar machen

쐽

Optisch ansprechende Gestaltung dynamisch erzeugter Informationsseiten

쐽

Einfache Suche in Datensätzen

쐽

Individualisierte Ausgabeseiten durch Einsatz von Grafiken

10.1 Datenbankgestützte Webseiten Unser erstes Produkt, das wir mit UltraDev anfertigen, ist gleichzeitig auch das wichtigste, den Sie werden es für jede Website mit Datenbankanbindung brauchen: eine einfache Übersichtsseite, die alle Inhalte der Datenbank darstellt. Eine solche Seite wird manchmal auch als Report bezeichnet. Auch wenn Sie Ihren Besuchern nicht mehr Interaktion mit der Datenbank bieten, als sich den Inhalt derselben anzeigen zu lassen, sollten Sie sich trotzdem darum bemühen, diese Informationen in einer für den Anwender möglichst transparenten Form zu präsentieren. Ein häufiges (optisches) Problem datenbankgestützter Webseiten ist, dass sie den Charme von Zugfahrplänen haben. Doch Daten lassen sich auch anders präsentieren. Überlegtes Design in Verbindung mit den Möglichkeiten von UltraDev ermöglicht die Entwicklung dynamischer datenbankgestützter Websites, deren Optik den Besucher sich nicht schaudernd abwenden lässt. Heute werden wir lernen, wie man unterschiedliche Typen dynamischer Seiten »von Null an« erstellt. Ein weiteres Thema ist die Einrichtung der zugehörigen Datenbank. Am Ende der Lektion werden Sie die grundlegenden Abfragefunktionen von UltraDev kennen wie Ihre Westentasche. Danach können wir uns an größere Projekte wagen. Um uns das Leben leichter zu machen, starten wir mit einer einfachen Datendarstellung und arbeiten uns schließlich Zug zum Zug empor.

338

Eine einfache Tabelle

10.2 Eine einfache Tabelle Wie Sie wissen, bezeichnet man eine Gruppe zusammengehöriger Informationen in einer Datenbank als Tabelle. Die Ausgabe von Tabellen auf dem Bildschirm ist unsere erste Aufgabe heute. Wie sich vorstellen können, lässt sich die Tabelle einer Datenbank problemlos in eine HTML-Tabelle übersetzen. Mit UltraDev ist die Erzeugung einer solchen Anwendung ein Kinderspiel – leider ist das Rohprodukt so beschaffen, dass wir um etwas Schönheitspflege nicht herumkommen. Die Befehle in diesem und den nachfolgenden Beispielen entstammen dem Wortschatz von MySQL. Sie sollten sich jedoch mit wenigen oder gar keinen Änderungen auf jeden Standard-SQL-Server übertragen lassen.

Das Backend erstellen Zunächst werden wir eine SQL-Tabelle erzeugen, die bestimmte Kontaktinformationen enthalten soll. Nachfolgend die entsprechenden Anweisungen an den MySQL-Server: create table personal( vname varchar(50) not null, nname varchar(50) not null, age int, telephon varchar(20), beschreibung varchar(200), primary key (vname,nname) )

Diese Tabelle enthält lediglich ein paar Personendaten wie Vorname, Nachname, Alter, Telefonnummer und eine kurze Beschreibung. (Achtung: Die Variable »Alter« habe ich mit dem englischen Wort »age« benannt, da »alter« ein reservierter MySQL-Name ist, dessen Verwendung zu Fehlermeldungen führt.) Als Primärschlüssel werden vname und nname der Person gesetzt. Das bedeutet, dass es keine zwei Personen geben darf, die denselben Vor- und Nachnamen haben. Für eine reelle Anwendung ist das ein problematischer Ansatz, doch für unsere Zwecke hier mag er genügen. Die Tabellen, die wir heute erzeugen, werden wir auch für die morgige Lektion brauchen. Die Verwendung eines zusammengesetzten Primärschlüssels soll auch nicht zuletzt dazu dienen, das Bewusstsein für verschiedene »Problemzonen« in UltraDev zu schärfen. insert into personnel values ('John','Ray',99,'555-555-5555', 'Ein famoses Haus'); insert into personnel values ('Robyn','Ness',62,'555-555-1234', 'Ein scharfes Mundwerk'); insert into personnel values ('Anne','Groves',12,'230-555-1234',

339

Datenbankgestützte Webseiten entwickeln

'Besitzt knabenhaften Charme'); insert into personnel values ('Paul','Jeebers',12,'430-555-4444 ', 'Eine rein virtuelle Existenz'); insert into personnel values ('Jack','Dairyfay',62,'555-555-7123', 'Glaubt, dass Fleisch verseucht ist und vor dem Verzehr schwarz gebraten werden muss');

Ein Hinweis in eigener Sache: Falls Sie sich gewundert haben, was der letzte Eintrag in der Liste soll, hier ist die Erklärung: Der Betreffende existiert wirklich und ist ein Freund von mir. Er traut keinem Stück Fleisch, das er nicht eigenhändig hat anbrennen lassen. Und um bei abgepacktem Hackfleisch kein Risiko einzugehen, kocht er es vor dem Verzehr. Ich weiß nicht, ob es nur mir so geht, aber ich finde das etwas seltsam. Der letzte Schritt beim Einrichten unseres Datenbank-Backends besteht darin, zu testen, ob auch alle Daten korrekt in die Tabelle eingesetzt wurden. Das geschieht mithilfe der SQL-Anweisung SELECT: mysql>select * from personnel mysql> \G ***************************1.row *************************** firstname: John lastname: Ray age: 99 phone: 555-555-5555 description: Ein famoses Haus ***************************2.row *************************** firstname: Robyn lastname: Ness age: 62 phone: 555-555-1234 description: Ein scharfes Mundwerk ***************************3.row *************************** firstname: Jack lastname: Dairyfay age: 62 phone: 555-555-7123 description: Glaubt, dass Fleisch verseucht ist und vor dem Verzehr schwarz gebraten werden muss ***************************4.row *************************** firstname: Anne lastname: Groves age: 12 phone: 230-555-1234 description: Besitzt knabenhaften Charme ***************************5.row ***************************

340

Eine einfache Tabelle

firstname: Paul lastname: Jeebers age: 12 phone: 430-555-4444 description: Eine rein virtuelle Existenz 5 rows in set (0.00 sec)

So weit sieht alles ganz gut aus, drum lassen Sie uns die Daten jetzt ins Netz bringen.

Das UltraDev-Frontend entwickeln Nachdem wir unser Datenmaterial im Backend gespeichert haben, wird es Zeit, das erforderliche Frontend zu schaffen. Zuerst müssen wir wieder eine Datenbankverbindung einrichten. Wenn Sie nicht mehr genau wissen, wie das geht, sehen Sie bitte in Tag 8, »Mac und Windows-PC für die Datenbankanbindung fit machen«, nach. Falls es Sie interessiert, in welcher Umgebung ich diese Anwendung entwickle, hier die Daten: Als Webserver verwende ich Windows NT mit dem IIS, einen Linuxrechner mit MySQL und PostgreSQL als Datenbankserver sowie ein Macintosh-Powerbook als Designwerkzeug. Wie Sie sehen, eine sehr heterogene Installation, aber sie funktioniert unglaublich gut. Damit Sie die folgenden Beispiele nachvollziehen können, müssen Sie diese Schritte erledigt haben: 1. Definieren Sie eine neue Site. 2. Richten Sie ein lokales Verzeichnis der Site ein sowie ein entferntes auf dem Webserver. Das Verzeichnis auf dem Server muss Ausführungsrechte besitzen. 3. Wählen Sie das gewünschte Anwendungsservermodell. Ich arbeite mit ASP 2.0. 4. Richten Sie eine Datenbankverbindung ein. Haben Sie diese vier Schritte erfolgreich durchgeführt und die Verbindung getestet, steht weiteren Taten nichts mehr im Wege.

Datensatzgruppe definieren In unserer Testdatenbank gibt es augenblicklich nur eine Tabelle, darum brauchen wir auch nur eine Datensatzgruppe zu erzeugen. Öffnen Sie die Palette SERVERVERHALTEN und klicken Sie auf das Plussymbol (+), um eine neue Datenbindung zu erstellen. Wählen Sie DATENSATZGRUPPE (ABFRAGE). Ich möchte nur eine einfache Datensatzgruppe einrichten, die alle Daten meiner Tabelle enthält. Die entsprechenden Einstellungen sehen Sie in Abb. 10.1.

341

Datenbankgestützte Webseiten entwickeln

Abbildung 10.1: Definition einer einfachen Datensatzgruppe, die sämtliche Felder der Tabelle enthält

Die einzigen Einstellungen, die ich in diesem Dialogfenster vornehmen muss, ist die Auswahl einer Verbindung sowie einer Tabelle aus der Datenbank. Schließlich vergebe ich noch einen Namen für die Verbindung und wähle die Option SPALTEN : ALLE. Wenn alles vorschriftsmäßig funktioniert hat, sollte die Palette DATENBINDUNGEN so aussehen wie in Abb. 10.2 gezeigt. Können Sie die einzelnen Felder nicht sehen, klicken Sie auf das Plussymbol (+), um die Datensatzgruppe auszuklappen.

Abbildung 10.2: Datensatzgruppe mit den darin enthaltenen Datenfeldern

Weil das unsere erste dynamisch erzeugte Site ist, wollen wir mit den Werkzeugen noch ein bisschen herumspielen. Wie bekommen wir z.B. Daten aus der Datenbank in unser HTML-Dokument? Nun, das ist nicht schwer: klicken, ziehen, fallen lassen.

342

Eine einfache Tabelle

Daten auf die Seite bringen Für den Anfang ziehen wir jedes der Felder in der Datenbindungenpalette in die Dokumentansicht. Das fertige Dokument enthält dann einige Tags, die nach folgendem Muster aufgebaut sind: {Recordset.Fieldname}. Abb. 10.3 zeigt ein einfaches Dokument, in das ich alle Felder der Datensatzgruppe gezogen habe. Abbildung 10.3: Datensätze lassen sich mit Drag and Drop ins Dokument importieren.

Wahrscheinlich sind Ihnen in der Palette DATENBINDUNGEN drei zusätzliche Einträge aufgefallen, die nicht aus unserer Datenbank stammen. Diese drei Funktionen werden sich später noch als recht nützlich erweisen: [erster Datensatz-Index], [letzter Datensatz-Index] sowie [Datensätze gesamt]. [Datensätze gesamt] zeigt die Gesamtanzahl von Einträgen in der Datensatzgruppe, [erster Datensatz-Index] ist die Nummer des ersten auf der Seiten angezeigten Datensatzes, [letzter Datensatz-Index] analog die Nummer des letzten Datensatzes, der auf einer Seite angezeigt wird. Diese Zähler werden wir bald brauchen. Natürlich kann man nun Seiten erstellen, indem man diese abstrakten Platzhalter für Datenfelder wie jedes andere Element auch im Dokument platziert. Auf diese Weise machen wir allerdings von einem der stärksten Features, die UltraDev zu bieten hat, keinen Gebrauch. Ich spreche von der Fähigkeit des Programms, in der Dokumentansicht Daten aus der Datenbank sozusagen live anzeigen zu können. Andere Entwicklungsumgebungen benutzen zur Darstellung von Datenbankmaterial ähnliche Tags wie wir sie gerade kennen gelernt haben. Verbindungen zu Daten auf einem Datenbankserver von unterschiedlichen Designumgebungen und unterschiedlichen Serverplattformen aus herzustellen zu können, die mit den unterschiedlichsten Verbindungstechniken arbeiten, ist sicher alles andere als eine leichte Aufgabe. Macromedia hat eine völlig neue und höchst leistungsfähige Technik entwickelt, die es ermöglicht, in der Entwurfsansicht einer Entwicklungsumgebung direkt auf eine Datenbank zugreifen zu können.

Live Data-Vorschau Damit Sie sich eine Seite in der Live Data-Vorschau ansehen können, wird das Dokument, das Sie gerade bearbeiten, auf den Server geladen. Dieser rendert die Seite wie unter reel-

343

Datenbankgestützte Webseiten entwickeln

len Produktionsbedingungen, lädt die berechnete Webseite herunter, gleicht sie mit dem Dokument in der Dokumentansicht ab und setzt die dynamischen Daten in die entsprechenden Felder – und all das in weniger als einer Sekunde, eine schnelle Verbindung vorausgesetzt. Um auf die Live Data-Vorschau umzuschalten, wählen Sie lediglich Menü ANSICHT > LIVE DATA. Wenn Sie diesen Befehl jetzt wählen und Sie Ihre Datenbank aufgebaut haben wie ich die meine, bekommen Sie die Abb. 10.4 gezeigte Ansicht. Abbildung 10.4: Die abstrakten FeldTags werden durch aktuelle Daten aus der Datenbank ersetzt.

Sollte die Live Data-Ansicht nicht funktionieren, dann überprüfen Sie noch einmal sämtliche Einstellungen in der Site-Definition, vor allem die Informationen zum Anwendungsserver sind hier interessant. Wichtig sind dabei die Felder LIVE DATA SERVER und LIVE DATA-URL-PRÄFIX. Unter LIVE DATA SERVER haben Sie zwei Optionen zur Auswahl: Entweder »lokaler Web-Server«, der mit einer gespiegelten Kopie der Daten arbeitet, oder »entfernter Web-Server«. Wenn Sie auf den entfernten Server über eine Wählverbindung oder eine sonstige langsame Verbindung gehen, kann die Live Data-Vorschau per entfernter Server zur Geduldsprobe werden. Der einzige Ausweg ist hier, die Daten vom Server auf den lokalen Rechner zu spiegeln und die Live Data-Vorschau von dieser Kopie berechnen zu lassen. Wenn Sie sich für diesen Weg entscheiden, muss der lokale Server dieselbe Technologie verwenden wie der entfernte. Es geht also nicht, dass Sie auf der entfernten Website mit JSP arbeiten und das ASP-Modell für die lokale Live Data-Vorschau verwenden. Wenn Sie die Live Data-Verbindung richtig eingerichtet haben, können Sie die Seite mit Klick auf den kreisförmigen Pfeil links oben neu laden lassen. Sollte ein Reload länger dauern als vorgesehen, klicken Sie auf das kleine Stop-Icon. Der Reload wird dann abgebrochen. Soll bei Änderungen an der Seite die Live Data-Ansicht unmittelbar aktualisiert werden, aktivieren Sie das Kontrollfeld AUTOMAT. AKTUALISIERUNG. Ziehen Sie also beispielsweise ein neues Element (Datenfelder usw.) auf die Seite, spiegeln sich diese Veränderungen sofort in der Dokumentansicht wider. Aktivieren Sie dieses Kontrollfeld, müssen Sie entweder über den Reload-Button oder über Menü ANSICHT > LIVE DATA AKTUALISIEREN die Seite frisch laden, um den Fortschritt Ihres Werkes begutachten zu können. Über das URL-Feld unterhalb der Menüzeile der Live Data-Ansicht, können Sie sich von einer Seite bestimmte Werte in die Dokumentansicht schicken lassen. Somit können Sie die Übergabe von Variablen durch eine andere Webanwendung simulieren. Dieses Feature wird sich als höchst nützlich erweisen, wenn wir in der letzten Woche daran gehen, richtige Webanwendungen zu entwickeln.

344

Eine einfache Tabelle

Mehrere Datensätze gleichzeitig darstellen Wie Sie bemerkt haben, bekommen wir in der Dokumentansicht nur einen einsamen Datensatz angezeigt, während unsere Datenbank doch an Material nur so überbordet. (Wir haben immerhin fünf Datensätze gespeichert.) Wie können wir nun das Programm überreden, statt nur einem alle Datensätze auf einmal anzuzeigen? Wir könnten nun lauter neue Datensatzgruppen generieren, die jeweils einen Datensatz aus der Datenbank holen, was aber ziemlich daneben wäre. Hier kommt nun das Serververhalten BEREICH WIEDERHOLEN ins Spiel. Damit lassen sich mehrere Datensätze auf einmal anzeigen. Dieses Verhalten kann entweder alle oder eine bestimmte Anzahl von Datensätzen auf der Webseite ausgeben. Sie wählen lediglich aus, welche Daten (welche Bereiche) wiederholt werden sollen, und UltraDev erledigt den Rest. BEREICH WIEDERHOLEN funktioniert nach dem Prinzip einer do...until- bzw. for...next-Schleife. Wenn Sie alle Datensätze einer Gruppe anzeigen lassen, wird dieses Verhalten einen Bereich des HTML-Dokuments wiederholen, den nächsten Datensatz holen und dann diesen Bereich zusammen mit dem neuen Datensatz ausgeben, bis der letzte Datensatz erreicht wurde. Wenn Sie nur eine Teilmenge aller Datensätze anzeigen lassen, wird das Verhalten BEREICH WIEDERHOLEN zählen, wie oft es die Schleife bereits durchlaufen hat, und dann stoppen, wenn die angegebene Zahl der maximalen Durchläufe erreicht wurde. Bevor Sie das Verhalten BEREICH WIEDERHOLEN einer Seite zuweisen, sollten Sie die Zeile, die die dynamischen Daten enthält, mit einem Zeilenumbruch abschließen. Andernfalls werden sämtliche Datensätze in einer einzigen Zeile ausgegeben. Wollen Sie die Datensätze, die Sie bereits ins Dokument gezogen haben, zeilenweise ausgeben, müssen Sie nur Folgendes tun: 1. Wählen Sie für jeden Datensatz, den Sie wiederholen wollen, das entsprechende Element auf der Seite aus. Da wir in diesem Fall ja alle Datenfelder ins Dokument gezogen haben, müssen wir lediglich die ganze Zeile auswählen. 2. Öffnen Sie als Nächstes die Palette SERVERVERHALTEN. 3. Klicken Sie auf das Plussymbol (+), und wählen Sie aus dem Popup-Menü BEREICH WIEDERHOLEN. Nun müssen Sie das Verhalten noch konfigurieren. Abb. 10.5 zeigt das zugehörige Dialogfenster. Wählen Sie die Datensatzgruppe aus, in der die Daten liegen, die wiederholt werden sollen (in diesem Fall MitarbeiterInfo), sowie die Zahl der Datensätze, die ausgegeben werden sollen (in diesem Fall alle).

345

Datenbankgestützte Webseiten entwickeln

Abbildung 10.5: Wählen Sie die Datensatzgruppen, deren Elemente wiederholt ausgegeben werden sollen, sowie die Anzahl der Datensätze, die zugleich dargestellt werden sollen.

Haben Sie alle Einstellungen vorgenommen, müssen Sie nur noch auf OK klicken. Wenn Sie in der Live Data-Ansicht sind, müssten Sie jetzt alle Datensätze der Datenbank sehen – einen pro Zeile. Die dynamischen Daten der Live Data-Ansicht werden farblich hervorgehoben, um zu signalisieren, dass die »Platzhalter« vom entfernten bzw. lokalen Server erfolgreich in echte Daten übersetzt wurden. Sie können die Farbe dieser Markierung über Menü BEARBEITEN > VOREINSTELLUNGEN > MARKIERUNG Ihrem Geschmack anpassen. Wenn Sie erst einmal mit UltraDev vertraut geworden sind und der Umgang mit Live-Daten auf dem Schirm für Sie nichts Neues mehr ist, möchten Sie die farbliche Markierung von Live-Daten vielleicht ganz abschalten. Hierzu müssen Sie nur die entsprechenden Kontrollfelder für Live Data in den Voreinstellungen deaktivieren. Ich finde diese farbigen Markierungen eher hinderlich beim Entwickeln von Seiten. Wenn Sie Ihre Datensätze genug bewundert haben, schließen Sie bitte die Live-DataAnsicht und sehen sich die veränderte Dokumentansicht an. Wie in Abb. 10.6 deutlich zu erkennen, gibt sich die Normalansicht nicht die geringste Mühe, uns einen Eindruck davon zu vermitteln, was das Verhalten BEREICH WIEDERHOLEN bewirkt. Sie legt um die zu wiederholenden Bereiche lediglich einen Rahmen und versieht ihn mit einer Registermarke WIEDERHOLEN. Abbildung 10.6: Ist die Live-DataAnsicht ausgeschaltet, präsentiert sich die Ansicht minder prächtig.

Diese Art der Darstellung ist zwar hilfreich, wenn man wissen will, wie die Seite anwendungstechnisch aufgebaut ist oder wenn man Änderungen an bestimmten Bereichen vornehmen will, dem Designer wird sie jedoch weniger einen Eindruck vom endgültigen Aussehen seines Produkts geben.

346

Eine einfache Tabelle

Eine Tabelle in der Tabelle Wir haben also erreicht, dass das Programm unsere Daten anzeigt, an der Optik lässt sich aber sicher noch feilen. Genau genommen sieht das Ding bis dato eher scheußlich aus. Fünf Datensätze unterschiedlichen Umfangs werden ohne jegliche Formatierung ausgegeben. Dem lässt sich aber leicht abhelfen. Wir nehmen uns ein HTML-Objekt, das eigens zu dem Zweck geschaffen wurde, Daten optisch zu gliedern und zusammenzuhalten, was zusammengehört: eine Tabelle. Wir haben fünf Datenfelder (Vorname und Nachname gehen getrennt), also könnten wir eine Tabelle mit fünf Spalten erstellen und da alles hineinplatzieren. Damit aber die Tabelle nicht übermäßig aufgebläht wird, setzen wir Vorund Nachnamen in eine Spalte. Öffnen Sie ein neues Dokument, das die Tabelle aufnehmen soll. Für dieses Dokument müssen Sie die Datensatzgruppe, die wir für die vorige Seite erstellt haben, neu definieren. Sie können natürlich auch das alte Dokument weiter verwenden, dann müssen Sie aber zuvor sämtliche Serververhalten löschen. In letzterem Falle müssen Sie die Palette SERVERVERHALTEN öffnen und jedes Verhalten mit Klick auf das Minussymbol (-) löschen. Wenn Sie ein Dokument, dem Sie Serververhalten zugewiesen haben, bearbeiten oder anderweitig neu verwenden, dürfen Sie die Serververhalten auf keinen Fall in der Dokumentansicht selbst löschen. Sie könnten natürlich im Dokument selbst beispielsweise das Verhalten BEREICH WIEDERHOLEN markieren und löschen, und scheinbar funktioniert auch alles, doch wird der hinter dem Verhalten liegende Code nicht (vollständig) entfernt. Versuchen Sie ein Verhalten direkt in der Dokumentansicht zu löschen, erhalten Sie eine Warnmeldung. Weisen Sie nun ein neues Verhalten BEREICH WIEDERHOLEN der Seite zu, wird es nicht funktionieren, wenn Sie sich die Seite anzeigen lassen wollen. Die einzige Abhilfe besteht in einem solchen Fall darin, die serverseitigen Skripten direkt im HTML-Code zu bearbeiten. Grundsätzlich möchte ich Ihnen raten, lieber gleich ein neues Dokument anzulegen, als bereits erstellte zu »recyclen«. Die erforderlichen Datenbindungen sind mit wenigen Handgriffen neu erstellt, und Sie laufen nicht Gefahr, alten »Störcode« im Dokument mitzuschleifen. Haben Sie die erforderlichen Datenbindungen neu definiert, fügen Sie in der Dokumentansicht eine Tabelle ein. Für unsere Personaldatenbank brauchen wir eine Tabelle mit vier Spalten und zwei Zeilen. Die vier Spalten dienen der Aufnahme der vier Datenfelder (Vor- und Nachname kommen wie gesagt in eine Spalte). Aber warum zwei Zeilen? Warum nicht fünf, wenn doch die Tabelle stolze fünf Datensätze zählt? Stimmt, die brauchen wir auch, aber das erledigt UltraDev für uns. Eigentlich braucht die Tabelle ja sogar nur eine Zeile, um die Datenfelder aufzunehmen. Aber bei zwei Zeilen können wir in die obere einen Spaltenkopf setzen, was den Informationswert der Tabelle für den Anwender deutlich erhöht. Erstellen wir also nun unser Tabellenlayout:

347

Datenbankgestützte Webseiten entwickeln

1. Deaktivieren Sie die Live Data-Ansicht während der Designphase. Das ist zwar kein Muss, doch ich persönlich finde es leichter, ein Dokument in der Normalansicht einzurichten. 2. Fügen Sie eine Tabelle mit zwei Zeilen und vier Spalten ins Dokument ein. 3. Schreiben Sie in die Felder der oberen Zeile den Namen der jeweiligen Spalte: Name, Alter, Telefon und Beschreibung. Sie bilden den Spaltenkopf. 4. Ziehen Sie aus der Datenbindungenpalette die einzelnen Datensätze in die jeweilige Spalte der zweiten Zeile. 5. Als Letztes markieren Sie die Zeile, die die Datenfelder enthält. Weisen Sie ihr dann das Serververhalten BEREICH WIEDERHOLEN zu. Wählen Sie im Dialogfenster die richtige Datensatzgruppe aus und die Option SPALTEN : ALLE. Wenn es alles gut gegangen ist, sollte Ihr Bildschirm in etwa so aussehen wie in Abb. 10.7 gezeigt.

Abbildung 10.7: Mit einem Tabellenlayout lassen sich Daten gut präsentieren. Gestalten ...

Schalten Sie zum endgültigen Test in die Live-Data-Ansicht oder in die Browservorschau. Wie in Abb. 10.8 zu sehen, werden alle fünf Datensätze in der Tabelle angezeigt – ganz so, wie wir das gewollt haben.

Abbildung 10.8: ... und das Werk begutachten.

Auch wenn es nicht so aussieht, so ist hier im Prinzip (bis auf die verbesserte Optik natürlich) nichts anderes geschehen als im vorigen Beispiel auch, bei dem die Datensätze zeilenweise ausgegeben wurden. UltraDev erzeugt automatisch den nötigen Code, um eine

348

Grafiken mit Datensatzgruppen verknüpfen

Gruppe von Feldern sowie die erforderlichen HTML-Tags so oft zu wiederholen, bis alle Datensätze angezeigt worden sind. Im ersten Beispiel mussten nur die dynamischen Daten wiederholt werden sowie das
-Tag am Ende jeder Zeile. Dieses Beispiel funktioniert nicht anders, nur war der wiederholte Bereich eine Tabellenzeile: .... Für das Programm macht es keinen Unterschied, ob es Teile einer Tabelle wiederholt oder eine Textzeile. Uns jedoch nötigt solcherlei vielleicht doch einen gewissen Respekt ab. Nun ist also unsere Tabelle schon recht hübsch, aber wollen wir damit wirklich schon an die Öffentlichkeit treten? Ist das wirklich schon das Maximum an Ästhetik? Präsentiert sie die Information so, wie man es von einer Website erwartet? Wie können wir dem Ganzen etwas Pep geben? Die naheliegendste Lösung wäre natürlich, die Seite um ein paar Grafiken zu ergänzen und damit das monotone Tabellengefüge etwas aufzulockern. UltraDev selbst kann zurzeit noch nicht direkt mit in Datenbanken eingebetteten Grafiken umgehen. Doch mit etwas Planung ist das keine unüberwindliche Hürde.

10.3 Grafiken mit Datensatzgruppen verknüpfen Es wäre schon eine tolle Sache, wenn man zu jeder Person in der Tabelle neben ihren Personendaten auch noch ein Bild hätte. Wenn in diesem Fall jedoch UltraDev die Zusammenarbeit verweigert, wie können wir dann Grafiken in Datenbanken einbinden? Die Antwort ist nicht schwer: Wir speichern in der Datenbank einfach die URL, die zu einer bestimmten Grafik in einem bestimmten Verzeichnis auf dem Server führt. Statt des Bildes speichern wir einfach eine Referenz auf das Bild. Selbst wenn UltraDev eines Tages eingebettete Grafiken unterstützen sollte, würde ich es mir gut überlegen, von diesem Feature Gebrauch zu machen. Der Datentyp blob (Binary Large Object) erlaubt das direkte Speichern von Grafiken, Dateien und anderen Binär-Daten in einer Datenbank. Grafiken in einer Datenbank zu halten kann fallweise recht nützlich sein, da so das Wiederfinden von Grafiken in großen Bildbibliotheken erleichtert wird. Anderseits können die Leute, die mit dem Bildmaterial arbeiten, die Grafiker also, nicht mehr so ohne Weiteres auf die Grafiken zugreifen. Je nach System ist dann der Einzige, der Zugriff auf das Bildmaterial hat, der Datenbankadministrator. Da Dreamweaver und UltraDev ja als verteilte Entwicklungsumgebung konzipiert sind, wäre es entgegen der Philosophie dieser Software.

349

Datenbankgestützte Webseiten entwickeln

Um nun Bilder in unserer Datenbank zu speichern, müssen wir sie bloß um ein Feld imageurl erweitern. In diesem Feld speichern wir dann den Pfad der Abbildung, also z.B. pictures\image01.jpg.

Ein grafiktaugliches Datenbank-Backend Damit wir Grafikverweise in der Datenbank ablegen können, müssen wir die Personaldatenbank mit neuer Struktur noch einmal aufbauen: create table personal2 ( vname varchar(50), nname varchar(50), age int, phon varchar(20), beschreibung varchar(200), imageurl varchar(80) not null, primary key (imageurl) )

Wie Sie sehen, habe ich nicht nur ein neues Datenfeld imageurl hinzugefügt, sondern auch den Primärschlüssel verändert und auf imageurl gesetzt – denn wir dürfen davon ausgehen, dass es keine zwei Angestellten gibt, die dasselbe Bild haben. Als Nächstes müssen wie die Daten in der Datenbank entsprechend aktualisieren: insert into personal2 values ('John','Ray',99,'555-555-5555', 'Ein famoses Haus','bilder/JohnRay.jpg'); insert into personal2 values ('Robyn','Ness',62,'555-555-1234', 'Ein scharfes Mundwerk','bilder/RobynNess.jpg'); insert into personal2 values ('Anne','Groves',12,'230-555-1234', 'Besitzt knabenhaften Charme','bilder/AnneGroves.jpg'); insert into personal2 values ('Paul','Jeebers',12,'430-555-4444', 'Eine rein virtuelle Existenz','bilder/PaulJeebers.jpg'); insert into personal2 values ('Jack','Dairyfay',62,'555-555-7123', 'Glaubt, dass Fleisch verseucht ist und vor dem Verzehr schwarz gebraten werden muss','bilder/JackDairyfay.jpg');

Die Datensätze wurden nun um ein Feld ergänzt, das einen Verweis auf das Bild der betreffenden Person und das Verzeichnis, in dem es liegt, enthält. Wie geht das Ganze nun online? Kein Problem! Wir erstellen wieder ein Tabellenlayout wie im letzten Beispiel, ergänzen es aber um eine weitere Spalte, die die Grafik aufnimmt. Wiederholung ist die Mutter des Lernfortschritts, daher nachfolgend noch einmal alle erforderlichen Schritte zum Aufbau unserer grafiktauglichen Tabelle: 1. Öffnen Sie ein neues Dokument bzw. speichern Sie die bereits erstellte Seite unter anderem Namen und löschen Sie alle Serververhalten.

350

Grafiken mit Datensatzgruppen verknüpfen

2. Erstellen Sie für dieses Dokument eine Datensatzgruppe, die alle Felder unserer neu definierten Datenbank enthält. 3. Fügen Sie eine Tabelle ein oder modifizieren Sie die Daten im Dokument dahingehend, dass Sie eine weitere Spalte für die Grafik einfügen, die mit jedem Datensatz angezeigt werden soll. 4. Ziehen Sie wie im letzten Beispiel alle Platzhalter mit Ausnahme der Grafik-URL ins Dokument. Hier müssen wir etwas anders vorgehen. Weisen Sie noch kein Verhalten BEREICH WIEDERHOLEN zu. Die Tabelle steht nun, jetzt müssen wir nur noch die Grafiken in die Spalte bringen. Im Prinzip geht das so einfach wie das Einfügen einer normalen Grafik.

Das Dokument um dynamische Bilder ergänzen Setzen Sie zunächst die Einfügemarke in die letzte Tabellenspalte, die die Grafik aufnehmen soll. Wählen Sie dann im Menü EINFÜGEN > BILD und aktivieren unter DATEINAMEN WÄHLEN AUS die Option DATENQUELLEN. Nun können Sie die einzusetzende Grafik so konfigurieren, dass die Anwendung keine statische Abbildung verwendet, sondern Namen und Speicherort aus der Datenbank bezieht. Abb. 10.9 zeigt das geöffnete Dialogfenster.

Abbildung 10.9: Markieren Sie den Datensatz, der die Grafik-URL enthält.

Wählen Sie in diesem Dialogfenster im Listenfeld DATENQUELLEN die richtige Datensatzgruppe sowie das Datenfeld aus, das die Grafik-URL enthält. Klicken Sie abschließend auf OK. Ein kleines Icon im Dokumentfenster zeigt an, dass eine dynamische Grafik eingesetzt wurde.

351

Datenbankgestützte Webseiten entwickeln

Markieren Sie nun die Zeile, die die dynamischen Platzhalter enthält, und weisen Sie ihr das Verhalten BEREICH WIEDERHOLEN zu. Wenn Sie noch nicht in der Live Data-Vorschau sind, schalten Sie sie jetzt ein. Sämtliche Grafiken werden nun in der richtigen Spalte angezeigt (Abb. 10.10).

Abbildung 10.10: Die Grafiken werden jetzt zusammen mit den übrigen Informationen angezeigt.

Und das war auch schon die ganze Kunst, wobei das Layout zugegebenermaßen etwas Nacharbeit vertragen könnte, aber darum kümmern wir uns später. Zuerst möchte ich Ihnen noch eine andere Methode vorstellen, die zum selben Ergebnis führt.

Ein anderer Ansatz Die Namen unserer Grafikdateien setzen sich ja aus Vor- und Nachnamen der betreffenden Person plus der Extension .jpg zusammen. Könnten wir nicht einfach die Grafik über diese beiden Felder adressieren, statt ein ganz neues Datenfeld imageurl einzuführen? Wie Sie sicher vermuten, geht das tatsächlich und ist nicht einmal besonders schwierig, Sie dürfen lediglich ein bisschen Bastelarbeit nicht scheuen. Markieren Sie eine Grafik in der Dokumentansicht und öffnen Sie den Eigenschafteninspektor in der Attributansicht (auf das untere der beiden Icons am linken Palettenrand klicken). Wenn Sie mit Active Server Pages arbeiten, sollte die Anzeige in der Palette in etwa so aussehen wie in Abb. 10.11 gezeigt. Verwenden Sie andere Anwendungsserver, sieht der Code natürlich anders aus, aber der Aufbau deckt sich im Prinzip, sodass Sie die entscheidenden Stellen erkennen müssten. Das Tag <%=(Recordset1.Fields.Item("imageurl").Value)%> macht nichts anderes, als sich selbst durch den Wert im Feld imageurl der Datenbank zu ersetzen. Wir bringen wir das System dazu, statt dessen Vor- und Zunamen aus der Datenbank zu verwenden? Indem wir den Code folgendermaßen abändern: <%=(Recordset1.Fields.Item("firstname").Value)%> <%=(Recordset1.Fields.Item("lastname").Value)%>

352

Grafiken mit Datensatzgruppen verknüpfen

Abbildung 10.11: Dieser ASP-Code ruft die Grafik aus der Datenbank ab.

Damit ist das Gröbste schon geschafft. Was uns noch fehlt, ist das bilder vorne und das .jpg hinten. Diese Informationen mit dem ASP-Code zu verknüpfen, ist ebenfalls keine besondere Hürde. Die von UltraDev unterstützten Serverskriptsprachen binden den Code direkt ins HTML ein. Wir können also nach Herzenslust normalen Text um die ASP-Tags herumsetzen. Der Text, den wir im Attribut src des -Tags ablegen, sieht dann so aus: bilder/<%=(Recordset1.Fields.Item("vname").Value)%> <%=(Recordset1.Fields.Item("nname").Value)%>.jpg

Tauschen Sie obigen Code gegen das Tag <%=(Recordset1.Fields.Item("imageurl") .Value)%> aus und sehen Sie sich das Dokument noch einmal in der Live-Data-Vorschau an. Es sollte kein Unterschied zu vorher zu sehen sein. Letztlich ist damit das Dateifeld imageurl in der Datenbank überflüssig geworden. Dieses Feld benötigen Sie nur, wenn Sie

die Grafik in anderen Dokumenten ohne Rückgriff auf Vor- und Nachnamen ausgeben wollen. Ansonsten können Sie die Datenbank in den ersten Zustand zurückversetzen und die Grafik-URLs durch Verkettung der Vor- und Nachnamen erzeugen. In größeren Unternehmen dürfte es schwierig werden, die Namen der Grafikdateien und die Namen der betreffenden Personen konsistent zu halten. Die Grafik könnte dann z.B. als franzmeier.jpg gespeichert sein, während derselbe Herr in der Datenbank als Franz Meier geführt wird. In diesem Fall ist sicherer, einheitlich formatierte Daten wie Personal- oder Versicherungsnummern zu verwenden.

353

Datenbankgestützte Webseiten entwickeln

10.4 Das Layout verschönern Die bisherigen Layouts waren zwar durchaus zweckdienlich, doch sicher nicht übermäßig attraktiv oder das, was man sich unter gelungenem Webdesign vorstellt. In diesem Abschnitt werden wir ausprobieren, wie wir unsere Mitarbeitertabelle aufpeppen können. Der zentrale Punkt bei der Entwicklung eines ansprechenden Designs ist, einmal ganz zu vergessen, dass man mit dynamischen Daten arbeitet. Das heißt, dass wir die Seite zunächst wie ein statisches Dokument anlegen. Hierbei dürfen wir ruhig einmal voll in die Tasten langen und das ganze Instrumentarium einsetzen, das UltraDev zu bieten hat. Die in Abb. 10.12 gezeigte Anordnung der Elemente ist ein weit attraktiverer Ansatz, Material aus einer Datenbank darzustellen. Die Positionierung der Elemente und das Layoutschema wurden unter Verwendung von Tabellen umgesetzt.

Abbildung 10.12: Dynamische Seiten müssen nicht unansehnlich sein.

Ferner habe ich auch mit unterschiedlichen Fonts und Hintergrundfarben gearbeitet. Das Endergebnis hat nicht ganz diesen Computerlook und ist fürs Auge etwas gefälliger. In diesem Fall habe ich auch mit der Regel gebrochen, nur eine Zeile wiederholen zu lassen. Hier wird eine ganze Tabelle und eine horizontale Linie wiederholt, um die Tabellen optisch zu trennen. Es gibt keine fixen Vorschriften, wie Sie Ihre Dokumente gestalten müssen. Entwickeln Sie Ihr Design, wie Sie bei anderen Dokumenten auch tun würden. Ziehen Sie alle Register von UltraDev, und lassen Sie sich nicht von der Vorstellung einschränken, dass Sie nur die Inhalte einer Zeile mehrfach ausgeben dürften.

354

Dynamische Attribute und komplexe Screens

10.5 Dynamische Attribute und komplexe Screens Wir haben nun gesehen, wie wir Grafiken auf eine Seite bringen können, indem wir die Attribute des HTML-Tags mit dynamischen Daten verknüpfen. In diesem Beispiel wurde für jeden Datensatz das src-Attribut ausgetauscht. Gibt es in dieser Hinsicht irgendwelche Einschränkungen? Sie werden sehen, dass Sie nahezu alle Attribute eines Objekts dynamisch setzen können. Somit können Sie Dokumente gestalten, deren Layout dynamisch in Abhängigkeit von den Daten in Ihrer Datenbank gesteuert wird. Bevor wir uns anderen Themen zuwenden, möchte ich Ihnen eine weitere Möglichkeit der Seitengestaltung vorstellen, diesmal unter Verwendung von wiederholten Ebenen. Angenommen, Sie möchten Ihr Seitenlayout nicht auf einem Tabellenraster aufbauen, sondern irgendwie versetzt. Da wir fünf Bilder haben, könnten wir sie ja schlauerweise im Fünfeck anordnen. In einem statischen HTML-Dokument lässt sich dieses Vorhaben mithilfe von Ebenen problemlos verwirklichen. Aber nehmen wir an, die Bilder werden täglich ausgetauscht, und Sie möchten Ihre Website an ein Datenbank-Backend anbinden. Grundsätzlich gibt es zwei Möglichkeiten, um zum Ziel zu kommen. Einmal könnten Sie für jeden der fünf Datensätze eine eigene Datensatzgruppe definieren. Das ist aber ziemlich aufwändig und Sie müssten immer das Dokument selbst bearbeiten, wenn ein neuer Mitarbeiter dazu kommt oder das Layout verändert werden soll. Zweitens könnten Sie eine wiederholte Datengruppe definieren, die unter anderem Felddaten zur Positionierung der Ebenen sowie einige weitere Ebenenattribute enthält. Und das ist genau der Ansatz, den wir hier verfolgen werden. Falls Sie eine weitere Ebene hinzufügen müssen, brauchen Sie nur einen Datensatz in die Datenbank zu schreiben. Der erforderliche HTML-Code wird dann ganz von alleine erzeugt.

Ein erweitertes Datenbank-Backend Damit wir das Ebenenlayout (Position und Hintergrundfarbe) dynamisch erzeugen können, müssen wir unser Datenbankschema etwas modifizieren und Felder für die Höhe, Breite und Position anlegen: create table personal3( vname varchar(50) not null, nname varchar(50) not null, age int, phon varchar (20), beschreibung varchar(200), width int, height int,

355

Datenbankgestützte Webseiten entwickeln

xloc yloc primary key

int, int, (vname,nname)

)

Für unsere neue Datenbank brauchen wir natürlich noch das richtige Zahlenfutter. Die Daten für unser dynamisches Ebenenlayout bekommen wir am einfachsten, wenn wir die Seite zuerst statisch anlegen und uns die Werte für die linke obere Ecke der Ebenen notieren, um sie dann in die Datenbank zu übernehmen. Für mein Fünfeck-Layout habe ich folgende »Eckdaten« ermittelt: insert into personal3 values ('John','Ray',99,'555-555-5555', 'Ein famoses Haus',150,150,300,10); insert into personal3 values ('Robyn','Ness',62,'555-555-1234', 'Ein nettes Frauenzimmer',150,150,0,180); insert into personal3 values ('Anne','Groves',12,'230-555-1234', 'Typischer ColdFusion-Freak',150,150,450,180); insert into personal3 values ('Paul','Jeebers',12,'430-555-4444', 'Ein Ex-Knacki',150,150,70,350); insert into personal3 values ('Jack','Dairyfay',62,'555-555-1723', 'Ein Mathe-Genie',150,150,380,350);

Für unser datenbankgesteuertes Layout müssen wir erst einmal eine Ebene mit den erforderlichen Werten erzeugen. Ich habe die Style-Attribute folgendermaßen gesetzt: position:absolute;width:<%=(Recordset1.Fields.Item("width").Value)%>px; height:<%=(Recordset1.Fields.Item("height").Value)%>px;z-index:1; left:<%=(Recordset1.Fields.Item("xloc").Value)%>px; top:<%=(Recordset1.Fields.Item("yloc").Value)%>px; width:170px;height:158px;left:217px;top:3px; background-color:#FFFF99;layer-background-color:#FFFF99; border:1px none #000000

Dieser Code-Schnipsel greift auf die Felder height, width, xloc und yloc der Datenbank zu und holt sich dort die Werte für die jeweiligen Stilattribute. Leider geht das nicht mit den Standardmitteln von UltraDev. Da hier verschiedene Attribute kombiniert werden, müssen wir sie von Hand setzen. Wenn Sie mit den Ebenen später noch anderes vorhaben, kann es sinnvoll sein, ihnen eindeutige Namen zu geben. Zur Realisierung des Designs ist das zwar nicht zwingend erforderlich, aber wenn Sie selbst oder eine andere Person diese Seite einmal ändern möchten, dann kann das bei einem größeren Stapel von Ebenen ziemlich zeitaufwändig sein. Um die Namen von Ebenen im Moment der Erzeugung dynamisch zu setzen, müssen Sie den entsprechenden Datensatz mit dem id-Attribut der Ebene verknüpfen. Folgende Schritte sind erforderlich, um ein (beliebiges) Attribut dynamisch an einen Datensatz zu binden: 1. Markieren Sie zunächst das Objekt, dessen Attribut Sie dynamisch verändern wollen. In diesem Fall also die Ebene, deren Name dynamisch gesetzt werden soll.

356

Dynamische Attribute und komplexe Screens

2. Schalten Sie den Eigenschafteninspektor in die Attributansicht um. Wählen Sie das Attribut aus, das an die Datenbankinformation angebunden werden soll. Beim Namen der Ebene wäre das id. 3. Klicken Sie auf das kleine Blitzsymbol am rechten Ende der Zeile, zu sehen in Abb. 10.13.

Abbildung 10.13: Über das Blitz- bzw. Ordnersymbol können Sie dynamische Daten mit jedem beliebigen Attribut verknüpfen.

Gewöhnlich verwendet UltraDev ein Blitz-Icon, um anzuzeigen, dass bestimmte Attribute dynamisch gesetzt werden können. Manchmal erfüllt ein Ordnersymbol denselben Zweck. Die Version 4.0 führt nun zusätzlich ein Fadenkreuz ein, mit dem Attribute sofort mit Dateien in der Site-Ansicht verknüpft werden können. 4. Wählen Sie die Datensatzgruppe und den Feldnamen, der die Informationen für das Attribut enthält. Ich habe das Feld nname gewählt. Somit trägt jede Ebenen den Namen der Person, zu der sie Informationen anzeigt. 5. Klicken Sie auf OK. Zum Schluss müssen Sie noch die einzelnen Felder, die angezeigt werden sollen, in die Ebene ziehen. Ich habe auch das Bild in die Ebene gesetzt, wobei ich das src-Attribut wie schon vorher beschrieben über eine Verkettung von vname und nname setze. Nun müssen Sie nur noch die Ebene markieren und ihr das Verhalten BEREICH WIEDERHOLEN zuweisen. Abb. 10.14 zeigt das Endergebnis in der Dokumentansicht. Ist die Live Data-Ansicht abgeschaltet, bietet sich kein besonders aufregender Anblick. Legen wir den Schalter jedoch um, ergibt sich gleich ein anderes Bild. In der Live Data-Ansicht werden sämtliche Ebenen entsprechend den Daten angeordnet und mit dem richtigen Datenmaterial gefüllt. Abb. 10.15 zeigt die Live Data-Vorschau mit dem datenbankgesteuerten Layout.

357

Datenbankgestützte Webseiten entwickeln

Abbildung 10.14: Die endgültige Dokumentansicht für ein vollkommen datenbankgesteuertes Layout

Abbildung 10.15: Die Live DataAnsicht zeigt das ganze Bild.

Als letzte Kontrolle, ob alles zu unserer Zufriedenheit gelaufen ist, können wir die Seite noch in einem Webbrowser öffnen und uns den Quelltext zu Gemüte führen (siehe Listing 10.1). 1 2 3 4 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> 5 6 7 8

12 John Ray
13 99

358

Dynamische Attribute und komplexe Screens

14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60


555-555-5555
Ein famoses Haus

Robyn Ness
62
555-555-1234
Ein nettes Frauenzimmer

Anne Groves
12
230-555-1234
Typischer ColdFusion-Freak

Paul Jeebers
12
430-555-4444
Ein Ex-Knacki

Jack Dairyfay
62
555-555-7123
Ein Mathe-Genie

Listing 10.1: Mit dynamischen Ebenenattributen erzeugter HTML-Code

Code-Analyse Jeder Ebene wird wie beabsichtigt der Nachname der Person als id zugewiesen (Zeilen 8, 21, 34, 47 und 60). Die Positionierungsattribute werden ebenfalls dynamisch gesetzt (Zeilen 9, 22, 35, 48 und 61). Dieses Dokument unterscheidet sich im HTML-Code nicht von einem statischen, per Hand erzeugten. Der Einsatz von dynamisch erzeugten Layouts wird nur durch die Zeit begrenzt, die Ihnen für die Erstellung des Probelayouts zu Verfügung steht, sowie durch die Grenzen von HTML selbst. Mit etwas Mehraufwand könnten Sie auch verschiebbare bzw. zeitleistengesteuerte Ebenen dynamisch erzeugen.

10.6 Zusatzfunktionen in dynamisch erzeugten Dokumenten Nun denken Sie vielleicht: »Na ja, nicht schlecht, aber war das schon alles?« Aber keine Bange, wir haben noch längst nicht alle Möglichkeiten ausgeschöpft, dazu brauchen wir schon noch ein paar Lektionen mehr. Mit dem, was wir heute gelernt haben, können wir Seiten erstellen, die Datensätze aus der Datenbank nach dem Inhalt einer ausgewählten Spalte sortiert ausgeben. Die nachfolgend vorgestellte Methode ist vielleicht nicht die effektivste Technik, aber sie funktioniert ohne Schnörkel und tut ihren Dienst. Später werden wir noch fortgeschrittenere Methoden kennen lernen.

360

Zusatzfunktionen in dynamisch erzeugten Dokumenten

Sortieren Datensätze zu sortieren ist nicht schwer. Wenn Sie eine Datensatzgruppe definieren, können Sie im untersten Eingabefeld des Dialogfensters DATENSATZGRUPPE unter SORTIEREN auswählen, nach welcher Spalte die Datensätze sortiert werden sollen. Abb. 10.16 zeigt das Dialogfenster mit der Einstellung SORTIEREN nach nname. Das Setzen von Sortierungsparametern beeinflusst die Reihenfolge, in der Datensätze ausgegeben werden. Mit unseren bisher erworbenen Kenntnissen können wir eine Webseite erstellen, die je nachdem, welcher Spaltenkopf angeklickt wird, die Daten in einer anderen Reihenfolge ausgibt.

Abbildung 10.16: Die Sortierfunktion beeinflusst die Reihenfolge, in der Datensätze ausgegeben werden.

Angenommen, Sie haben eine Tabellen mit vier Spalten, und die Datensätze sollen jeweils nach dem Inhalt der verschiedenen Spalten sortiert werden können. Um diese Sortierfunktion auf HTML-Basis zu realisieren, gibt es einen schnellen, aber nicht ganz sauberen Trick. 1. Erstellen Sie ein HTML-Dokument, das die dynamischen Elemente enthält. Erzeugen Sie drei weitere Kopien diese Dokuments, sodass Sie das Dokument in vierfacher Ausfertigung vorliegen haben. 2. Ändern Sie in jedem Dokument die Sortierfolge der Datensatzgruppe, sodass jedes Dokument nach einer anderen Spalte geordnet wird. 3. Speichern Sie die Dokumente mit den geänderten Sortierparametern neu ab.

361

Datenbankgestützte Webseiten entwickeln

4. Verknüpfen Sie die einzelnen Dokumente mit einem ganz normalen HTML-Link. So kann man mit einfach per Mausklick zwischen den unterschiedlich sortierten Dokumenten springen. Der Haken an der Sache ist natürlich, dass Sie für jedes Feld, das Sie sortieren lassen, eine eigene Datei benötigen. Diese Dokumente müssen natürlich auch jeweils extra aktualisiert werden – je mehr Dateien Sie haben, desto unerquicklicher wird es. Es gibt programmiertechnisch gesehen bessere Methoden, Dokumente sortieren zu lassen. Diese sind Stoff von Tag 14, »Komplexe Komponenten: Benutzeranmeldungen«. Zu Übungszwecken jedoch ist die eben beschriebenen Technik ganz nützlich.

10.7 Zusammenfassung Dynamische HTML-Dokumente in UltraDev zu erstellen erfordert nicht mehr, als eine Datenbankverbindung einzurichten, eine Datensatzgruppe zu definieren und die »Platzhalter« der dynamischen Daten an die entsprechende Stelle im Dokument zu ziehen. Die Vorschau auf das endgültige Dokument ist ebenfalls problemlos möglich – die Live Data-Vorschau ist ein Feature, das nur wenige Entwicklungsumgebungen für Webanwendungen bieten. Die fertige gestaltete Seite wird auf dem entfernten Server abgelegt und gerendert. Somit haben Sie mit UltraDev eine Entwicklungsumgebung zur Verfügung, die Ihnen bei der Arbeit mit dynamischen Daten echtes WYSIWYG bietet. Die Kunst bei der Erstellung dynamischer Seiten liegt darin, Seiten zu erstellen, die nicht nur funktional, sondern auch gestalterisch ansprechend sind. Viele Websites begnügen sich damit, dem Anwender Daten in einer spartanischen Tabellendarstellung zu präsentieren. Wenn Sie mit UltraDev dynamische Seiten entwickeln, stehen Ihnen neben den dynamischen Tools aber auch alle anderen Gestaltungswerkzeuge zur Verfügung. Machen Sie davon Gebrauch. UltraDev erlaubt die Verknüpfung dynamischer Daten mit nahezu allen Attributen eines beliebigen HTML-Objekts. Somit können Sie diese Attribute dynamisch per Datenbank setzen. Sogar das Erscheinungsbild der Seite selbst, also die Platzierung der Elemente auf der Seite usw., kann über Werte aus der Datenbank gesteuert werden.

362

Fragen und Antworten

10.8 Fragen und Antworten F

Muss ich bei der Gestaltung einer Site in der Live Data-Vorschau arbeiten? A

F

Welche Attribute können mit dynamischen Daten verknüpft werden? A

F

Grundsätzlich jedes Attribut eines HTML-Objekts. Sogar wenn Sie auf das Attribut nicht direkt zugreifen können, können Sie den entsprechenden ASP-, JSP- bzw. CFML-Code in den HTML-Code einfügen, aber solche Fälle sind eher selten.

Welche Art von Daten kann ich in einer Datenbank speichern? A

F

Nein, ganz und gar nicht. Die Live Data-Vorschau funktioniert am besten in schnellen Netzwerken mit schnellen Rechnern. Sind Sie auf eine Wählverbindung angewiesen oder haben keinen lokalen Webserver installiert, am dem eine Kopie der Site liegt, dann kann die Live-Data-Vorschau die Arbeit ganz schön ausbremsen. Sie können Ihre Seiten durchaus ohne Live Data-Vorschau entwickeln, Sie müssen sich nur an den Anblick solcher Platzhalter-Tags wie recordset.fieldname gewöhnen.

UltraDev kann nur als Text gespeicherte Daten verarbeiten. Momentan ist es nicht möglich, binäre Daten wie z.B. Grafiken zu verarbeiten. Sie haben jedoch immer noch die Möglichkeit, in der Datenbank Verweise auf die entsprechenden Dateien zu speichern.

Was mache ich, wenn sich der von UltraDev erzeugte Code »aufhängt"? A

Die beste Lösung ist, es gar nicht erst so weit kommen zu lassen. UltraDev gibt eine Warnmeldung aus, wenn Eingriffe des Anwenders in den Code voraussichtlich zu Problemen führen werden. Als Faustregel kann man sagen, dass Sie immer die Palette Serververhalten verwenden sollten, wenn Sie Serververhalten wieder von einer Seite löschen wollen.

10.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. Welche beiden Voraussetzungen müssen schon erfüllt sein, bevor Sie eine dynamische Webseite erstellen können?

363

Datenbankgestützte Webseiten entwickeln

2. Wie generiert UltraDev seine Live Data-Ansicht?. 3. Wie erstellen Sie ein Serververhalten BEREICH WIEDERHOLEN? 4. Welche Attribute können mit dynamischen Daten verknüpft werden? 5. Wie können Sie Grafiken in einer Datenbank verwenden? 6. Was genau passiert, wenn ein Datensatz sortiert ausgegeben wird? 7. Müssen Sie ein weiteres Datenfeld anlegen, wenn Sie in einer Datenbank mit Grafiken arbeiten?

Übungen 1. Legen Sie ein Datenbank-Backend an und entwickeln Sie das zugehörige Frontend. Erweitern Sie diese Datenbank um Grafiken und binden diese Grafiken in Ihre dynamisch erzeugten Seiten ein. Entwickeln Sie ein Seitenlayout, das nicht auf einem Tabellenraster aufbaut. Nutzen Sie möglichst die ganze Bandbreite der UltraDev-Werkzeuge. 2. Erweitern Sie die Funktionalität Ihrer datenbankgestützten Webseiten, indem Sie die Attribute einzelner HTML-Objekte dynamisch setzen lassen. Wenn Sie mit Grafiken arbeiten, könnten Sie z.B. deren height- und width-Attribute aus der Datenbank auslesen lassen (sofern die Bilder nicht alle gleich groß sind). Wenn Sie bei Grafiken die Höhen- und Breiten-Attribute setzen, kann der Browser schon das Seitenlayout aufbauen, bevor alle Elemente geladen sind.

364

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

1 1

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Gestern haben wir gelernt, wie wir mit den per Mausklick zu konfigurierenden Dialogfenstern von UltraDev schnell und einfach datenbankgestützte Webseiten erstellen können. Nun können Sie statt gewöhnlicher statischer HTML-Dokumente Seiten erzeugen, die in Laufzeit Daten aus jeder beliebigen Datenbank auslesen. Rechnen Sie einmal nach, wie viel Zeit Sie sich dadurch sparen, dass Sie Daten nun nicht mehr ständig neu eintippen müssen. Nur war die einzige Eingabemaske, über die wir auf diese Daten zugreifen konnten, die Datenbank selbst. Darum werden wir heute lernen, wie wir mit UltraDev für diese Datenbank eine Bedienoberfläche erzeugen, die uns das Einfügen, Aktualisieren und Löschen von Datensätzen in unserer Datenbankanwendung erlaubt. Wenn Sie den Stoff der heutigen Lektion durchgearbeitet haben, haben Sie von jedem Rechner mit Internetanschluss aus völlige Kontrolle über Ihre Datenbank. Die Themen des heutigen Tages: 쐽

Erstellen von Formularen. Bis jetzt haben wir mangels Veranlassung noch nicht mit den Formularwerkzeugen von UltraDev gearbeitet. Das wird jetzt anders.

쐽

Anwenderdaten per Formular an eine Datenbank übertragen und speichern. Fortan haben Sie nicht mehr nur über die Datenbankoberfläche Zugriff auf Ihr Datenmaterial.

쐽

Datensätze aus der Datenbank löschen. Datensätze speichern ist nur die eine Seite der Medaille – Informationen müssen im Bedarfsfall auch gelöscht werden können.

쐽

Datensätze modifizieren. Zwar ließen sich per Löschen und Speichern Datensätze auch bearbeiten, was aber ein vergleichsweise umständliches Vorgehen wäre. Da ist es doch viel eleganter, die vorhandenen Datensätze zu aktualisieren und neu zu speichern.

11.1 Datenmanipulation online Um Ihre Webapplikationen richtig planen zu können, sollten Sie sich ein Verständnis dafür erwerben, nach welchem Prinzip der Code funktioniert, den UltraDev schreibt. Mit UltraDev erstellte Anwendungen folgen einem vordefinierten Programm- bzw. Datenfluss. Die gesamte Funktionalität wird nicht in eine einzige eingebettete Datei geschrieben, sondern die Kontrolle über den Programmablauf wird von einer Teilanwendung an die nächste übergeben. Üblicherweise funktionieren Websites, wie sie auch UltraDev erzeugt, nach folgendem Prinzip: 1. Eine Liste von Datenbankeinträgen wird angezeigt. 2. Von jedem Datensatz wird zu einer Aktualisierungs- bzw. Detailseite verlinkt. 3. Wird eine Detailseite aufgerufen, kann der Anwender wählen, ob er den Datensatz aktualisieren oder löschen möchte. 4. Nach dem Löschen oder Aktualisieren eines Datensatzes wird eine Bestätigungsseite angefordert, die über den erfolgreichen Lösch- bzw. Aktualisierungsvorgang informiert. Diese Seite ist oft identisch mit der, von der der Anwender gekommen ist.

366

Online-Formulare erstellen

Vielleicht hört sich das für Sie jetzt so an, als hätten Sie keinen großen Spielraum beim Design Ihrer Websites. Doch diese Ängste sind völlig unbegründet. Die meisten dynamischen Sites funktionieren nach genau diesem Schema, sie wissen es nur gut zu verbergen. Der Trick am Ganzen ist, dass man die Anwendung für den Anwender spannend gestaltet. Wenn Sie noch keine Erfahrung mit eingebetteten Programmiersprachen haben, fragen Sie sich vielleicht, was an dem oben dargestellten Vorgang so ungewöhnlich sein soll. Eingebettete Programmiersprachen sind sehr flexibel, und es wäre durchaus möglich, eine gesamte Webanwendung in eine einzige Datei zu packen. Wenn ich Webanwendungen von Hand programmiere, schreibe ich gewöhnlich alle Ausgabe-, Lösch- und Aktualisierungsfunktionen in eine einzige Datei. In UltraDev ist das schwer möglich, will man nicht den kompletten Code, den das Programm schreibt, von Hand editieren. Damit wir neue Daten in eine Datenbank schreiben können, müssen wir ein Formular erstellen, dessen Felder denen der Datenbank exakt entsprechen. Das ist der erste Einsatz für die Formularwerkzeuge. Wenn Sie jetzt den Eindruck haben, dass wir uns wieder den HTML-Werkzeugen der ersten Tage zuwenden, dann ist das vollkommen zutreffend.

11.2 Online-Formulare erstellen In Tag 10, Datenbankgestützte Webseiten entwickeln, haben wir eine Übersichtsseite für unsere Personaldatenbank entwickelt, in der zu jedem Mitarbeiter Personendaten und ein Bild angezeigt wurden. Abb. 11.1 zeigt noch einmal unser ursprüngliches Datendisplay. Im ersten Entwicklungsschritt werden wir unserer Personaldatenbank eine Eingabemaske spendieren. Ihre Funktion besteht darin, neue Datensätze in die Datenbank zu schreiben. Die Aktualisierung von bereits vorhandenen Datensätzen erfordert zusätzlichen Programmcode, den wir in einem späteren Schritt hinzufügen. Die Personaldatenbank personal2 haben wir mit folgendem SQL-Code erzeugt: create table personal2 ( vname varchar(50), nname varchar(50), age int, phon varchar(20), beschreibung varchar(200), imageurl varchar(80) not null, primary key (imageurl) )

367

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Abbildung 11.1: Die Personaldatenbank war unsere erste datenbankgestützte Anwendung.

Das Formular, das wir nun erstellen, muss exakt dieselben Felder enthalten. Ich werde die gestern erstellte Datenbank weiter verwenden und würde Ihnen raten, dasselbe zu tun. Möchten Sie die heutige Lektion als neues Projekt anlegen, müssen Sie Ihr DatenbankBackend neu aufsetzen und die erforderlichen Datenbankverbindungen einrichten, bevor Sie weitermachen.

Ein einfaches HTML-Formular erstellen Die Gestaltung von Formularen macht mir überhaupt keinen Spaß, und vielleicht ist das der wahre Grund, warum dieses Thema erst so spät zur Sprache kommt. Formulare sind eines der am wenigsten Cross-Browser- bzw. Cross-Plattform-kompatiblen HTML-Elemente überhaupt. Auf Windows-Systemen kann man z.B. über das -Tag die Größe von -Feldern und anderen Formularelementen beeinflussen. Auf dem Mac hingegen werden Formularelemente in einer festen Größe dargestellt. Da beim Rendern von Formularen zudem je nach Plattform verschiedene Systemschriften zum Einsatz kommen, ist es schier unmöglich, vorauszusagen, wie ein Formular auf der jeweiligen Plattform aussehen wird. Überprüfen Sie nach Möglichkeit das Aussehen von Formularen auf den verschiedenen Systemen, bevor Sie Ihr Werk für vollendet erklären.

368

Online-Formulare erstellen

Vielleicht kann es der eine oder andere von Ihnen schon nicht mehr hören, doch halte ich diesen Punkt für so wichtig, dass ich an dieser Stelle noch einmal darauf eingehen möchte. Hauptkriterium für eine gute Benutzerführung ist eine durchgehend einheitliche Gestaltung von Bedienelementen. Buttons und Eingabefelder sollten stets von gleicher Größe und Form sein. Wenn natürlich der HTML-Code die Darstellung dieser Elemente verändert, haben wir ein Problem. Das Grundkonzept von HTML ist, dass Informationen auf jedem Bildschirm unabhängig vom Betriebssystem identisch dargestellt werden. Diese Unabhängigkeit geht zum Teil wieder verloren, wenn das Betriebsystem das Aussehen von Bedienelementen in der HTML-Oberfläche verändert. Legen Sie nun in der Site, die die Übersichtsseite der Personaldaten enthält, ein neues Dokument an und nennen Sie es dateneingabe. Platzieren Sie eine Tabelle mit 6 Zeilen und 2 Spalten im Dokument. Am leichtesten lassen sich Formulare mit Tabellen aufbauen. Ohne Tabellen ist ein exaktes Layout von Tabellenelementen schier unmöglich, da deren Größe stark variiert. Ich lege alle Formularseiten so an, dass ich eine Tabelle mit 2 Spalten und so viele Zeilen wie Datenfeldern definiere. Schreiben Sie nun in die linke Spalte der Tabelle den Namen der einzelnen Datenfelder. Nun kommt der spannende Teil – die dynamischen Platzhalter ins Bild ziehen. Doch bevor wir uns an diese Aufgabe machen können, müssen wir noch das Objekt einfügen, zu dem diese Datenfelder gehören, also ein Formular. Klicken Sie in der Unterpalette auf das Icon FORMULAR EINFÜGEN. Formulare werden durch eine gestrichelte rote Linie symbolisiert. Nun gibt es aber mit dem Formular, das wir gerade eingefügt haben, ein Problem. Die Tabelle, die später die Eingabefelder aufnehmen soll, steht nicht innerhalb des Formularrahmens. Dazu müssen wir den HTML-Code etwas anpassen. Mit Formularen direkt in der Dokumentansicht zu arbeiten ist kein Problem, sie sind schnell eingesetzt. Das Formular auswählen und bearbeiten ist eine andere Sache. Wechseln Sie in die Codeansicht und setzen Sie das öffnende -Tag vor das öffnende -Tag, das schließende Tag hinter das schließende -Tag. Damit ist die Tabelle und alle später hinzukommenden Eingabefelder in das Formular eingebettet (siehe Abb. 11.2). Ihr HTML-Code sollte sich so lesen wie das Listing 11.1: 1 2 3 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 5 6 7 8

Neue Mitarbeiterdaten eingeben

9

10 11

369

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

12 13 17 18 19 20 21 22 23 24 25 26 27 28 29 31 32 33 34 35

Vorname	Nachname
Alter
Telephon
Beschreibung		30
Bild-URL

36

37 38

Listing 11.1: Ein einfaches HTML-Eingabeformular

Abbildung 11.2: Fügen Sie auf der linken Seite der Tabellen Zeilenköpfe ein.

370

Online-Formulare erstellen

Achten Sie darauf, dass die

-Tags die -Tags umschließen (Zeile 9 bzw. 36). Ich persönlich finde es schwierig, mit den UltraDev-Werkzeugen innerhalb von Formularen Elemente zu platzieren. Ich ziehe es vor, direkt im HTML-Code zu arbeiten. In Ihrem Code sollte es einen Zeilenkopf geben (Zeilen 12, 16, 20, 24, 28 und 32) sowie leere Zellen, die dann die Eingabefelder aufnehmen (Zeilen 13, 17, 21, 25, 29 und 33). Wenn Sie in der Quellcode-Ansicht sind, können Sie auch gleich eines der wichtigsten Attribute eines Formulars setzen, nämlich seinen Namen (siehe Zeile 9). Mithilfe des Formularnamens kann UltraDev die zu speichernde Information zuordnen. Ferner können Sie im -Tag method auf »post« setzen, falls hier »get« eingestellt sein sollte. Wie aus Zeile 9 zu ersehen, arbeitet dieses Formular mit der Methode »post«. In diesem Formular ist das Attribut »action« augenblicklich noch nicht gesetzt, aber darüber brauchen wir uns im Moment noch keine Gedanken zu machen. UltraDev erledigt das automatisch, wenn es den zum Speichern von Datensätzen erforderlichen Code generiert. Sie müssen allerdings die einzelnen Formularattribute nicht in der Codeansicht setzen. Sie können auch in der Dokumentansicht das Formular markieren und die nötigen Einstellungen im Eigenschafteninspektor vornehmen. Manchmal lässt sich das Formular allerdings schlecht auswählen. Meist ist es leichter, das Formular mithilfe der Tagliste links unten in der Statuszeile zu selektieren. Abb. 11.3 zeigt die Oberfläche des Eigenschafteninspektors, wenn ein Formular markiert wurde.

Textfelder Öffnen Sie nun in der Objektpalette die Unterpalette FORMULARE und platzieren Sie die Einfügemarke in der rechten Spalte der ersten Zeile, also in dem Feld, in das der Anwender seinen Vornamen eingeben soll. Klicken Sie in der Objektpalette nun auf das Icon TEXTFELD EINFÜGEN oder wählen Sie EINFÜGEN > FORMULAROBJEKTE > TEXTFELD, um ein einfaches Textfeld in die Zeile einzufügen. Wiederholen Sie diesen Schritt für alle weiteren Zeilen. Am Ende sollte Ihre Formular so aussehen wie in Abb. 11.4 gezeigt (im Feld BESCHREIBUNG wird ein mehrzeiliges Textfeld verwendet). Wenn Sie alle Textfelder eingesetzt haben, müssen Sie sie noch leicht bearbeiten, damit sie die eingegebenen Daten korrekt an die Anwendung übermitteln. Öffnen Sie den Eigenschafteninspektor und markieren Sie das erste Textfeld. Über den Eigenschafteninspektor können Sie den Typ des Textfelds verändern. Die folgenden drei Varianten von Textfeldern stehen zur Auswahl:

371

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Abbildung 11.3: Manchmal lassen sich die Eigenschaften eines Formulars leichter per Hand als mit dem Eigenschafteninspektor setzen.

Abbildung 11.4: Setzen Sie ein Textfeld für jedes Datenfeld. 쐽

EINZEILIG – Nimmt einzeiligen Text entgegen. Theoretisch könnten Sie hier auch ellenlange Sätze oder ganze Textabschnitte eingeben, aber es ist eigentlich dafür konzipiert, ein oder zwei Wörter aufzunehmen. EINZEILIG ist die Standardeinstellung für Textfelder.

쐽

MEHRZEILIG – Dient der Aufnahme von mehrzeiligem Text und erlaubt etwas größere Bewegungsfreiheit bei der Texteingabe. Der Anwender kann den eingegebenen Text zwar nicht wie in einer Textverarbeitung formatieren, doch kann er wie gewohnt im Text springen. Auch wenn dieser Typ ins Textfeld-Werkzeug integriert ist, unterscheidet er sich doch erheblich von den beiden übrigen.

쐽

KENNWORT – Wie der Name bereits verrät, geben Sie in dieses Feld ein Passwort ein. Dieses Feld ist identisch mit dem einzeiligen Textfeld, doch wird die Eingabe nicht im Klartext angezeigt, sondern verschlüsselt. Allerdings bietet die Verwendung des Kenn-

372

Online-Formulare erstellen

wortfeldes so gut wie keinen wirksamen Schutz. Sie können z.B. Ihre Site damit nicht wirklich gegen Angreifer schützen. Es wird nur verhindert, dass das Kennwort für Umstehende gleich zu lesen ist. Sie müssen nicht nur einen Feldtyp setzen, sondern dem Textfeld auch einen Namen geben. Da anhand dieses Namens die eingegebenen Daten in die Datenbank geschrieben werden, achten Sie darauf, dass sich der hier vergebene Name mit dem Namen des Datenfeldes in der Datenbank exakt deckt. Formularfelder genau so zu benennen wie die korrespondierenden Felder in der Datenbank hat sein Für und Wider. Die Vorteile liegen auf der Hand: Schneller Abgleich zwischen Formular und Datenbank. Bei sehr umfangreichen Formularen ist das ein entscheidender Zeitfaktor. Der Nachteil an der Sache ist, dass Sie hierdurch die Struktur Ihrer Datenbank relativ offen legen. Für ein ausreichend geschütztes System ist das allein zwar noch kein Sicherheitsrisiko, doch könnte ein Hacker hieraus erste Rückschlüsse über den Aufbau Ihrer Anwendung ziehen. Die Konfiguration des ersten Textfeldes ist in Abb. 11.5 zu sehen.

Abbildung 11.5: Namen und Typ des Textfeldes per Eigenschafteninspektor setzen

Die übrigen Felder in der Palette dienen dazu, das Aussehen der Felder zu verändern bzw. die Eingaben des Anwenders auf ein bestimmtes Höchstmaß zu beschränken: 쐽

ZEICHENBREITE – Definiert die Breite des Textfeldes und wie viele Zeichen gleichzeitig dargestellt werden können. Diese Einstellung hat keinen Einfluss darauf, wie viele Zeichen in das Feld eingeben werden dürfen.

373

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

쐽

MAX. ZEICHEN (nur bei einzeiligen und Kennwortfeldern) – Die maximale Anzahl an Zeichen, die der Anwender in ein Feld eingeben kann. Über diese Einstellung begrenzen Sie die Textmenge auf die Anzahl der Zeichen, die für die einzelnen Datenbankfeldern definiert ist.

쐽

ANZAHL AN (nur bei mehrzeiligen Textfeldern) – Bei mehrzeiligen Textfeldern wird die Option »Max. Zeichen« durch diese Option ersetzt. Hier definieren Sie, wie viele Zeilen Text gleichzeitig angezeigt werden, wenn der Anwender seine Daten eintippt. Bei mehrzeiligen Textfeldern können Sie die Anzahl der Zeichen nur mit JavaScript begrenzen.

쐽

ANFANGSWERT – Weist dem Feld einen bestimmten Anfangswert zu. Dieser Eintrag wird angezeigt, wenn der Anwender das Formular zum ersten Mal aufruft, kann aber von ihm jederzeit überschrieben werden. Seien Sie vorsichtig mit der Vergabe von Anfangswerten. Anwender neigen dazu, bereits ausgefüllte Felder zu überspringen. Wenn Sie hier keinen Kontrollmechanismus vorsehen, laufen Sie Gefahr, wertlose Daten zurückzubekommen.

쐽

UMBRUCH (nur bei mehrzeiligen Textfeldern) – Diese Option steuert die Art des Textumbruchs, wenn der Anwender eine Textzeile ganz gefüllt hat. In der Einstellung »Aus« wird der Text endlos in einer Zeile fortgeschrieben, ein Zeilenumbruch lässt sich nur durch ein Return erzwingen. »Virtuell« umbricht den Text zwar, wenn der Text den Rand des Eingabefeldes erreicht, schreibt aber kein EOL-Steuerzeichen (Zeilenende) in den Text. »Physisch« verhält sich wie »virtuell«, nur wird hier ein EOL-Steuerzeichen hinzugefügt.

Nehmen Sie nun die oben beschriebenen Einstellungen für die Textfelder in Ihrem Formular vor. Denken Sie daran, die Felder so zu benennen wie die entsprechenden Felder in Ihrer Datenbank. Gestalten Sie das Feld »Beschreibung« als mehrzeiliges Textfeld, damit der Anwender ein größeres Eingabefeld zur Verfügung hat.

Submit-Schaltflächen Das fertig ausgefüllte Formular muss nun irgendwie an den Server zurückgeschickt werden. Am einfachsten geschieht dies mit einer Submit-Schaltfläche, den wir nun ins Formular einfügen: 1. Platzieren Sie den Cursor dort, wo die Schaltfläche stehen soll. Achten Sie darauf, dass Sie sich innerhalb der roten Markierungslinie befinden. 2. Klicken Sie in der Objektpalette auf das Icon SCHALTFLÄCHE EINFÜGEN oder wählen Sie EINFÜGEN > FORMULAROBJEKTE > SCHALTFLÄCHE.

374

Online-Formulare erstellen

Ins Dokument wird daraufhin eine Schaltfläche eingesetzt, standardmäßig handelt es sich dabei um eine Submit-Schaltfläche (ABSCHICKEN). Markieren Sie nun diese Schaltfläche in der Dokumentansicht und öffnen den Eigenschafteninspektor, um die Attribute der Schaltfläche zu bearbeiten. Abb. 11.6 zeigt die Attribute einer Standard-Submit-Schaltfläche.

Abbildung 11.6: Im Eigenschafteninspektor können Sie der Schaltfläche einen eindeutigen Namen zuweisen.

Wenn Sie mit Ihrem Formular keine ganz speziellen Zwecke verfolgen, genügt es zumeist, die Beschriftung anzupassen. Der Text, den Sie im Feld BESCHRIFTUNG eingeben, wird dann auf der Schaltfläche angezeigt. Nicht zu verwechseln mit dem Eingabefeld SCHALTFLÄCHE, über die Sie dem Schaltflächenobjekt einen eindeutigen Namen zuweisen. Wozu braucht eigentlich eine Schaltfläche einen eigenen Namen? Schaltflächen sind ein ebenso wichtiges Eingabemedium wie Formularfelder. Nehmen wir einmal an, Sie sammeln Informationen über Ihren Bestand an Videos. Statt nun für jede Alterskategorie, für die der Film frei gegeben ist (ab 18, ohne Altersbeschränkung usw.), ein eigenes Optionsfeld anzulegen, könnten Sie diesen Wert der Submit-Schaltfläche zuweisen. Sie definieren dann in einem Formular »Alterskategorie« einfach so viele Submit-Schaltflächen, wie Sie Alterskategorien haben, die je nach Kategorie einen anderen Wert abschicken. Submit-Schaltflächen sind Eingabemedien, deren Nützlichkeit man nicht unterschätzen sollte.

375

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Außer der Sendefunktion können Schaltflächen noch zwei weitere Funktionen haben. Von anderen Websites her kennen Sie sicher die Reset- oder Löschen-Schaltflächen. Wenn Sie einer Schaltfläche in UltraDev die Aktion ZURÜCKSETZEN zuweisen und im Formular platzieren, kann der Anwender mit Mausklick das Formular wieder auf die anfänglichen Defaultwerte zurücksetzen. Damit erübrigt sich das manuelle Löschen von Feldinhalten im Formular. Lassen Sie bei der Beschriftung und Platzierung von Submit- und Reset-Schaltflächen eine gewisse Vorsicht walten. Wenn sich der Anwender durch ein ellenlanges Formular müht und alle Einträge versehentlich wieder löscht, nur weil die Reset-Schaltfläche auffälliger platziert ist als die Submit-Schaltfläche, dann dürften Sie ihn ziemlich sicher vergrault haben. Mit ZURÜCKSETZEN versetzen Sie ein Formular wieder in seinen ursprünglichen, also nicht ausgefüllten Zustand. Haben Sie für bestimmte Felder einen Anfangswert gesetzt, so werden auch diese Werte wieder hergestellt. Die zweite Aktion, die Sie einer Schaltfläche zuweisen können, ist KEINE. Diese Einstellung wird meist in Verbindung mit JavaScript gebraucht, um clientseitige Verhalten auszulösen. Haben Sie die Schaltflächen in Ihr Formular eingesetzt, sollte das Ganze in etwa so aussehen wie in Abb. 11.7 gezeigt.

Abbildung 11.7: Das Eingabeformular zur Übertragung von Daten an die Datenbank ist nun fertig, aber noch nicht mit der Datenbank verbunden.

376

Online-Formulare erstellen

Grafiken als Schaltflächen Wenn Ihnen die grauen Standardbuttons nicht gefallen, dann gibt es einen Ausweg: Schicken Sie Daten mit einer selbst erstellten Grafik als Schaltfläche ab. Diese Art von Schaltfläche benimmt sich etwas anders insofern, als sie die Daten nicht in derselben Art und Weise wie die Standard-Submit-Schaltfläche an den Server schickt. Um eine GrafikSchaltfläche zu erstellen, fügen Sie das entsprechende Bild in das Dokument ein. Wie bei Grafiken üblich, fragt Sie das Programm nach dem Speicherort der Grafikdatei. GrafikSchaltflächen sind ein reines HTML-Objekt, es ist kein JavaScript im Spiel. Grafik-Schaltflächen sind rein statische Bilder ohne Rollover-Effekte oder Ähnliches. Diese Grafik-Schaltfläche verhält sich zunächst genauso wie die gewöhnliche SubmitSchaltfläche – sie schickt den Inhalt des Formulars an den Server zur weiteren Bearbeitung. Damit aber Daten übertragen werden können, werden zusätzlich die Koordinaten des Punktes, an dem der Anwender die Grafik angeklickt hat, ausgelesen und mit übertragen. Diese Informationen – die x- bzw. y-Koordinaten des Klickpunktes – werden in zwei weiteren Variablen abgelegt, die mit dem Namen der Grafik-Schaltfläche beginnen und mit »x« bzw. »y« enden. Diese Daten lassen sich für die Auswertung von in Echtzeit erzeugten Imagemaps von Grafiken verwenden, oder für Gewinnspiele, bei denen der Anwender einen Preis gewinnt, wenn er die richtige Stelle anklickt. Der Nachteil solcher Grafik-Schaltflächen ist, dass sie dem Anwender nicht dasselbe Feedback wie normale Schaltflächen geben und pflegeaufwändiger sind. Wollen Sie einen Button austauschen, müssen Sie die Grafik neu bearbeiten, statt wie sonst nur den Beschriftungstext zu ändern. Anderseits sind selbst gestaltete Schaltflächen meist hübscher als die grauen Standard-Schaltflächen und erhöhen das Surfvergnügen. Grafik-Schaltflächen geben auch eine bessere Kontrolle über das Layout, da sie der Browser im Gegensatz zu Standardschaltflächen mit der exakten Größe und Positionierung darstellt.

Rollover- und Textlink-Schaltflächen Bei der Gestaltung von Buttons sind Sie nicht an eine einzige Technik gebunden. Die nachfolgend beschriebene Technik ist die flexibelste Art, Submit- bzw. Reset-Schaltflächen zu erstellen, aber leider auch die am wenigsten kompatible. Es gibt zwei JavaScriptBefehle, die dasselbe leisten wie die standardmäßigen HTML-Schaltflächen: document.forms[0].reset() document.forms[0].submit()

Die beiden Funktionen reset() und submit() schicken ein Formular ab bzw. löschen dessen Inhalt. Die beiden Codefragmente adressieren das erste Formular auf einer Webseite: forms[0]. Mit diesen beiden Funktionen können Sie alles, was sich als Link gebrauchen lässt, zur Reset- bzw. Submit-Schaltfläche umfunktionieren. Angenommen, Sie

377

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

möchten dem ersten Formular in einem HTML-Dokument eine Submit-Schaltfläche hinzufügen, dann befolgen Sie die nachfolgenden Schritte: 1. Platzieren Sie das Objekt, das Ihre Submit-Schaltfläche werden soll, im Dokument. Das kann ein normaler Textlink, eine Rollover-Grafik usw. sein. 2. Statt diesem Objekt nun eine URL zuzuweisen, setzen Sie folgenden JavaScript-Code ein: document.forms[0].submit() Und das war's auch schon. Mit document.forms[0].reset() erhalten Sie eine ResetSchaltfläche. Wenn Sie mit JavaScript arbeiten, um Formulare zu senden, setzen Sie voraus, dass Ihr Adressatenkreis JavaScript-fähige Browser verwendet und JavaScript auch aktiviert hat. Wer diese Voraussetzungen nicht erfüllt, kann Ihr Formular nicht verwenden.

Weitere Formularelemente Neben Textfeldern, Bildfeldern und Submit-Schaltflächen gibt es noch weitere Formularelemente, die Sie auf Ihrer Eingabeseite verwenden können. Diese Elemente werden nachfolgend im Überblick dargestellt, auf die genauere Funktionsweise werden wir eingehen, wenn wir sie konkret verwenden. Im Wesentlichen handelt es sich um folgende Eingabeelemente, die sich je nach Typ der Anwendung als äußerst nützlich erweisen können: 쐽

KONTROLLKÄSTCHEN – Kontrollfelder, in UltraDev als Kontrollkästchen bezeichnet, definieren eine Gruppe von Merkmalen, die aus- bzw. abgewählt werden können. Man verwendet sie für eine Mehrfachauswahl von Attributen, die auf ein Objekt zutreffen (logische AND(UND)-Verknüpfung). Wird oft missbraucht, um einen logischen OR(ODER)-Zustand zu markieren: »Wählen Sie ja ODER nein«.

쐽

OPTIONSSCHALTER – Funktioniert im Prinzip ähnlich wie das Kontrollkästchen. Der Anwender wählt zwischen mehreren Attributen (Optionen), die auf ein Objekt zutreffen. Im Gegensatz zum Kontrollkästchen sollte zwischen den Attributen eine logische ODER-Beziehung bestehen. Haben zwei Optionsschalter den gleichen Namen, schließen sie sich gegenseitig aus, d.h., sie können nicht gleichzeitig aktiviert werden. Manchmal werden anstelle von Optionsschaltern Kontrollkästchen verwendet. Wenn jeder Optionsschalter anders benannt ist, funktioniert das zwar in den meisten Fällen, nur kann dann ein Optionsschalter, wenn er einmal gesetzt ist, nicht mehr deaktiviert werden, außer es gibt ein Reset-Schaltfläche.

쐽

LISTE/MENÜ – Liste/Menü ist eine etwas eigenartige Kombination von Elementen, da die einzelnen Elemente sich ganz anders verhalten. Im einen Fall erstellen Sie ein gewöhnliches Popup-Menü, aus dem sich eine Option von mehreren auswählen lässt. Im

378

Serververhalten Datensatz einfügen zuweisen

anderen Fall erstellen Sie ein Feld mit Scrollbalken, das eine Mehrfachauswahl zulässt. Meiner Meinung nach eignen sich Kontrollkästchen besser zur Mehrfachauswahl von Attributen. Sie beanspruchen zwar mehr Platz, sind aber übersichtlicher als Listen. 쐽

DATEIFELD – Mittlerweile lässt sich diese Funktion sogar nutzen, da sie von den neueren Browsern endlich unterstützt wird. Vielleicht kennen Sie diese Funktion schon von gewissen Websites, die auf ihren Webservern kostenlose Speicherung von Daten anbieten. Über diese Funktion kann eine Webseite eine komplette Datei zum Server zur weiteren Bearbeitung übertragen. Eine sinnvolle Verwendung dieses Features ist z.B., wenn Händler ihr Logo auf den Server laden können, um es zusammen mit ihrem Sortiment anzeigen zu lassen.

쐽

VERSTECKTES FELD – Versteckte Felder dienen der Übertragung von Daten, die der Anwender nicht sehen soll. Näheres hierzu finden Sie in Tag 6, »Einführung in dynamische Webanwendungen und Datenbankentwicklung«, wo es um die Übergabe von Variablen geht. Allerdings sollten Sie nie versteckte Felder benutzen, um sensible Daten zu übertragen. Ein Anwender kann eine lokale Kopie eines Formulars erstellen und die entsprechenden Felder nach Belieben editieren. Geldinstitute z.B. sollten nicht unbedingt den aktuellen Kontostand eines Kunden in einem versteckten Feld übertragen. Ein gewiefter Anwender könnte nämlich dieses Feld zu seinen Gunsten verändern und seinen Kontostand nach oben korrigieren.

쐽

SPRUNGMENÜ – Sprungmenüs sind streng genommen keine Formularelemente, sondern eine JavaScript-Funktion, die Sie auf jeder Seite einbauen können, auch wenn diese Seite kein Formular enthält, das zur Bearbeitung an einen Server geschickt wird. Sprungmenüs sind einfache Popup-Menüs, über die ein Besucher schnell andere Bereiche der Website anspringen kann.

11.3 Serververhalten DATENSATZ EINFÜGEN zuweisen Das Serververhalten DATENSATZ EINFÜGEN schreibt einen neuen Datensatz in eine Datenbank. Da unser Eingabeformular mittlerweile fertig gestellt ist, sollten wir es nun auch mit der Datenbank verkuppeln. Sollten Sie eine neue Seite für diese Übung angelegt haben, ist eine funktionierende Datenbankverbindung zwingende Voraussetzung für alles Weitere. Ferner müssen Sie überprüfen können, ob die Datensätze der Datenbank korrekt hinzugefügt wurden. Um das Formular mit der Datenbank zu verknüpfen, müssen Sie nichts weiter tun, als über die Palette SERVERVERHALTEN das Verhalten DATENSATZ EINFÜGEN zuweisen. Sie müssen in diesem Fall keine Datensatzgruppe definieren, weil ja auf dieser Seite keine dynamischen Daten dargestellt werden. Mit folgenden Schritten wird das Verhalten definiert:

379

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+). 3. Wählen Sie aus dem Popup-Menü das Verhalten DATENSATZ EINFÜGEN. Es öffnet sich das Dialogfenster DATENSATZ EINFÜGEN. Hier konfigurieren Sie, wo und wie der neue Datensatz abgespeichert werden soll. Ein korrekt konfiguriertes Serververhalten sehen Sie in Abb. 11.8.

Abbildung 11.8: Konfigurieren Sie das Verhalten Datensatz einfügen so, dass die Formulardaten in die richtige Tabelle und die richtigen Datenfelder geschrieben werden.

Damit das Serververhalten wunschgemäß funktioniert, müssen Sie alle Felder des Dialogfensters ausfüllen. UltraDev erkennt mit großer Zuverlässigkeit anhand der Daten aus beiden Objekten, welche Daten in welche Felder eingesetzt werden sollen, sodass hier für gewöhnlich wenig Handarbeit anfällt. Vergewissern Sie sich, dass alle Attribute des Verhaltens korrekt auf Ihre Anwendung abgestimmt sind: 쐽

VERBINDUNG – Die Datenbankverbindung, über die die neuen Daten in der Datenbank gespeichert werden sollen. Haben Sie noch keine Datenbankverbindung definiert, können Sie das nachholen, indem Sie den Button DEFINIEREN anklicken.

쐽

ZU AKTUALISIERENDE TABELLE – Wählen Sie hier die Tabelle in der Datenbank aus, in die die neuen Daten geschrieben werden sollen. Die Spalten dieser Tabellen sollten mit den Eingabefeldern des Formulars identisch sein, das die Daten überträgt. UltraDev kann nicht die Daten aus einem Formular auf mehrere unterschiedliche Tabellen verteilen, es sei denn, Sie arbeiten mit Ansichten.

쐽

FORMULAR – Hier wählen Sie das HTML-Formular aus, von dem die Anwenderdaten kommen. Wenn Sie Formulare eindeutig benennen, macht die Auswahl hier keine Probleme.

380

Serververhalten Datensatz einfügen zuweisen

쐽

FORMULARELEMENTE/SPALTE – Die Eingaben in diesem Feld sind die wichtigsten Informationen für eine korrekte Konfiguration des Verhaltens DATENSATZ EINFÜGEN. Hier legen Sie fest, aus welchem Formularfeld (links) Daten in welche Tabellenspalte (rechts) geschrieben werden. Wenn Sie das Fenster öffnen, nimmt UltraDev bereits ein paar Defaultzuordnungen »Formularfeld/Spalte« vor, indem es die Namen der jeweiligen Felder vergleicht. Dort, wo das Programm keine Zuordnung treffen kann, setzt es das Tag . Um ein Formularfeld einer Spalte von Hand zuzuordnen, markieren Sie das Formularelement im Listenfeld und wählen aus dem Popup-Menü SPALTE die entsprechende Spalte der Tabelle.

쐽

SPALTE/TYP – Rechts neben dem Popup-Menü SPALTE befindet sich ein weiteres Popup-Menü. Hier wählen Sie aus, um welche Art von Daten es sich handelt, die hier gespeichert werden sollen. Soll z.B. ein Datum gespeichert werden, wählen Sie »Date«. Da Ergebnisse von Kontrollfeldern meist als boolesche Werte (an/aus, falsch/wahr) gespeichert werden, können Sie hier festlegen, in welcher Form diese Zustände gespeichert werden sollen (Y/N, 1/0, -1/0).

쐽

ZU URL WECHSELN – Die URL, zu der der Anwender geleitet werden soll, nachdem ein Datensatz eingefügt worden ist. In diesem Beispiel wird der Anwender wieder zur Übersichtsseite zurückgeschickt. Wenn alles richtig funktioniert hat, sollte der neue Datensatz dann in der Übersicht aufgelistet werden.

Konfigurieren Sie das Verhalten DATENSATZ EINFÜGEN vollständig und machen Sie anschließend einen Probelauf. Öffnen Sie die neu erstellte Eingabeseite und geben Sie irgendwelche Daten ein. Klicken Sie abschließend auf die Submit-Schaltfläche. Der neue Eintrag sollte daraufhin in der Datenbank erscheinen. Falls es zu Fehlermeldungen kommt, überprüfen Sie, ob Sie die folgenden Schritte eingehalten haben: 1. Synchronisation von lokaler und entfernter Site. 2. Sie sollten zumindest das Formularfeld ausgefüllt haben, dessen Daten den Primärschlüssel darstellen. In meiner Beispielsdatenbank sind das Vorname und Nachname. 3. Für den Primärschlüssel einen eindeutigen Wert vergeben haben. Bei diesen Dingen scheint es sich zwar um Selbstverständlichkeiten zu handeln, doch passieren gerade hier immer wieder Fehler. Kommt es beim Eingeben eines Datensatzes zu Fehlern, zeigt der Interpreter eine entsprechende Meldung. Als ich versucht habe, mehrere Datensätze mit identischem Primärschlüssel in die Datenbank einzutragen, erhielt ich folgende Fehlermeldung: Microsoft OLE DB Provider for ODBC Drivers-Fehler '80004005' [TCX][MyODBC]Duplicate entry '' for key 1 /inetpub/webpub/buchultradev/TMP2iby988l5o.asp, Zeile 49

Damit wissen Sie alles, um Datensätze in Ihre Datenbank schreiben zu können. Bei der Gestaltung der Eingabeseite können Sie Ihrer Kreativität freien Lauf lassen.

381

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Später werden wir noch darauf zu sprechen kommen, dass Primärschlüssel gewöhnlich vom Datenbankserver automatisch erzeugt werden. Die Verantwortung für die Eindeutigkeit und »Einzigartigkeit« des Primärschlüssels liegt damit beim Programm und nicht beim Anwender – somit ist es höchst unwahrscheinlich, dass Sie je mit Fehlermeldungen wie der obigen konfrontiert werden.

11.4 Anzeige von Detailseiten und Löschen von Datensätzen Wie man neue Datensätze in die Datenbank schreibt, das wissen wir jetzt. Doch wie löscht man Datensätze wieder? Mit den Verhaltensweisen DATENSATZ EINFÜGEN und DATENSATZ LÖSCHEN haben wir volle Kontrolle über die Inhalte unserer Datenbank – und das alles über ein einfach per Maus zu bedienendes Interface. In den meisten Anwendungen wird das Löschen von Daten so gehandhabt, dass dem Anwender zuerst eine Übersichtsseite mit dem fraglichen Datensatz angezeigt wird, dann kann er sich entscheiden, ob er den Eintrag löschen will oder nicht. Im folgenden Abschnitt werden Sie lernen, wie man eine solche Übersichtsseite erstellt und mit einer Löschfunktion versieht – Info im Doppelpack also.

Eine Detailseite erstellen Als ersten Teil unserer Anwendung erstellen wir eine Detailseite. Sie unterscheidet sich im Prinzip nicht von der Übersichtsseite mit den wiederholten Bereichen, die wir schon angelegt haben. Der Unterschied ist, dass dieser Seite kein Verhalten BEREICH WIEDERHOLEN zugewiesen wird und nur die Datenfelder eines einzigen Datensatzes angezeigt werden. Die Funktionalität ist also nicht ganz dieselbe und mit unserem aktuellen Wissen über die Möglichkeiten von UltraDev nicht zu realisieren. Unser Hauptproblem: Wie teilen wir UltraDev mit, welchen Datensatz es auf der Detailseite ausgeben soll? Aber fangen wir mit dem Anfang an: Zuerst brauchen wir eine einfache Detailseite, am besten mit einem Tabellenraster aufgebaut. Design ist momentan Nebensache. Sie sind mittlerweile mit den Gestaltungswerkzeugen des Programms vertraut und können die Optik immer noch verbessern, sobald wir erst einmal eine funktionierende Detailseite erstellt haben. Als Nächstes müssen wir eine Datensatzgruppe definieren, die exakt die Daten beschreibt, die wir aus der Tabellen auslesen wollen. Bisher haben wir Datensatzgruppen immer auf Grundlage aller Felder in der Tabelle definiert. Dieses Mal wollen wir nur eine ganz bestimmte Information abrufen – einen einzelnen Datensatz.

382

Anzeige von Detailseiten und Löschen von Datensätzen

Am leichtesten lässt sich ein einzelner Datensatz abrufen, wenn wir einen Filter auf die Abfrage anwenden. Abb. 11.9 zeigt eine Abfrage, die als Filter das Feld vname verwendet und den URL-Parameter vname.

Abbildung 11.9: Filter ermöglichen die Auswahl von Datensätzen per URL-Parameter.

Was heißt das nun praktisch? Es bedeutet, dass nur dann ein Datensatz zurückgegeben wird, wenn der Inhalt des Feldes vname identisch ist mit dem Parameter vname, der in der URL näher bestimmt ist. Wie sich vielleicht noch erinnern, haben wir in Tag 6 über die verschiedenen Möglichkeiten der Variablenübergabe gesprochen. Eine mögliche Art der Übergabe ist es, dass man den Wert der Variablen an die URL anhängt. Eine URL, die den Wert John im Parameter vname übergibt, könnte sich z.B. so lesen: http://www.beispiel-url.com/ detailseite.asp?vname=John

Das ist die einfachste und zugleich meistverwendete Methode, um einen Wert an eine Detailseite zu übergeben. Es gibt jedoch noch andere Möglichkeiten, um Informationen an einen Datensatz oder ein anderes Serververhalten zu übergeben. Sie finden Sie im Dialogfenster DATENSATZGRUPPE im Popup-Menü unter FILTER: 쐽

URL-PARAMETER – Die Default-Methode der Variablenübergabe an ein Serververhalten. URL-Parameter werden übergeben, indem der Name der Variablen und ihr Wert an die URL angehängt werden.

쐽

FORMULARVARIABLE – Die Variable wird per Formular übertragen. Wenn Sie bei Formularen mit der POST-Methode arbeiten, müssen Sie diese Einstellung verwenden, um auf den Wert zugreifen zu können.

383

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

쐽

COOKIE – Wenn Cookies gesetzt und an die Serveranwendung zurückgeschickt werden, haben Sie über diese Einstellung Zugriff auf die Werte.

쐽

SITZUNGSVARIABLE – Setzen Sie eine Sitzungsvariable, steht sie, ähnlich wie Cookies, für die gesamte Dauer einer Anwendersitzung zur Verfügung. In Tag 12, »Komplexe Datenbankabfragen«, werden wir mit Sitzungsvariablen arbeiten, um ein Login-System zu programmieren.

쐽

ANWENDUNGSVARIABLE – Anwendungsvariablen stehen der gesamten Webanwendung zur Verfügung. Sie sind jedoch nicht für jedes Servermodell definiert.

쐽

EINGEGEBENER WERT – Ein Wert, der definiert wird, ehe die Anwendung abläuft.

Wie schon angedeutet, beherrscht nicht jedes Servermodell alle Arten der Variablenübergabe. Die beiden wichtigsten Methoden sind die Übergabe per URL-Parameter und Sitzungsvariable. Von diesen beiden Typen werden wir in den kommenden Beispielen ausgiebig Gebrauch machen. Doch zurück zu unserem Problem: Wie wähle ich einen bestimmten Eintrag in der Datenbank zur Anzeige auf der Detailseite aus? In der einfachen Version des Dialogfensters DATENSATZGRUPPE habe ich einen Filter definiert, der Datensätze anhand des Vornamens einer Person selektiert. Da Vornamen nun aber mehrfach vorkommen können, brauchen wir offensichtlich ein zuverlässigeres Auswahlkriterium. Am geschicktesten selektieren wir Datensätze natürlich über ihren Primärschlüssel, weil so sichergestellt ist, dass garantiert nur ein Datensatz zurückgegeben wird. Nun haben wir aber leider diese Tabelle mit einem zusammengesetzten Primärschlüssel angelegt. Wie können wir zwei Filterkriterien gleichzeitig setzen? Die Antwort ist einfach: Indem wir eine erweiterte Abfrage definieren. Um uns den Einstieg in erweiterte SQL-Abfragen zu erleichtern, definieren wir zunächst eine einfache Abfrage. Wenn Sie das noch nicht getan haben, holen Sie das bitte jetzt nach. (In Abb. 11.9 war eine korrekt konfigurierte einfache Abfrage zu sehen.) Haben Sie einen einfachen Filter gesetzt, doppelklicken Sie auf die Abfrage in der Palette SERVERVERHALTEN. Im nun geöffneten Dialogfenster klicken Sie auf ERWEITERT, um in den erweiterten Abfragemodus zu schalten. Hier können Sie den SQL-Code, den der Server verwendet, um die Seite zu erzeugen, direkt editieren. Der automatisch generierte Code der einfachen Abfrage liest sich folgendermaßen: SELECT * FROM personal3 WHERE vname = 'MMColParam'

Der Parameter vname ist also schon gesetzt, wir müssen also nur noch den entsprechenden Parameter für den Nachnamen, nname, anfügen. Der editierte SQL-Code sollte nach unserem Eingriff folgendermaßen aussehen: SELECT * FROM personal3 WHERE vname = 'MMColParam' AND nname = 'MMColParam2'

384

Anzeige von Detailseiten und Löschen von Datensätzen

Eine andere Möglichkeit, die SQL-Anweisung um das Kommando AND lastname = zu ergänzen, führt über das Feld DATENBANKELEMENTE des Dialogfensters. Suchen Sie die richtige Tabelle und klappen Sie sie aus. Markieren Sie dann die gewünschte Spalte (nname) und klicken Sie auf den Button WHERE. Damit wird an die SQL-Abfrage eine neue Bedingung angefügt. Dieses und weitere Themen werden wir in der morgigen Lektion besprechen. Nachdem wir unsere SQL-Abfrage definiert haben, müssen wir UltraDev noch mitteilen, was es mit dem Parameter MMColParam2 tun soll, den wir ergänzt haben. Dieser Wert und der bereits verwendete Wert MMColParam sind interne Variablen, die UltraDev und das Serverscripting-Modell verwenden. Sie könnten diese Namen beliebig verändern. Damit die Anwendung mit diesen Variablen arbeiten kann, müssen wir sie im Feld VARIdes Dialogfensters editieren. Da wir in der einfachen Abfrage schon einen Filter definiert hatten, ist eine Variable schon gesetzt. Um die zweite Variable hinzuzufügen, klicken Sie auf das Plussymbol (+). Danach klicken Sie nacheinander in die Spalten NAME, DEFAULT VALUE und RUN-TIME VALUE und geben die entsprechenden Werte für die Anwendung ein: ABLEN

쐽

NAME – Der Name, unter dem UltraDev die Variable anspricht. Sobald dieser Name definiert ist, können Sie damit direkt in der SQL-Abfrage arbeiten. Da wir im SQLCode die Bezeichnung MMColParam2 gewählt haben, müssen wir diesen Wert auch im Name-Feld einsetzen.

쐽

DEFAULT VALUE – Der Standardwert, den die Variable annimmt, wenn die Anwendung keinen Wert zurückgibt. Sie können in dieses Feld einen beliebigen Wert einsetzen. Sie könnten z.B. Ihrer Datenbank einen generischen Anwender hinzufügen, dessen Daten als Default-Werte angezeigt werden, wenn die Detailseite geöffnet wird.

쐽

RUN-TIME VALUE – Der Wert, der gesetzt wird, wenn die Anwendung auf dem Server läuft. Bei ASP-Anwendungen können Sie z.B. den Befehl Request.QueryString ("nname") dazu verwenden, um auf den Wert der Variablen »nname« zuzugreifen, der per URL übergeben wurde. In JSP würde die Anweisung request.getParameter("lastname") lauten, während ColdFusion-Entwickler hier nur use #lastname# schreiben müssen.

Abb. 11.10 zeigt eine vollständig konfigurierte erweiterte Abfrage, erstellt für das ASP-Servermodell. Falls Sie ein anderes Servermodell benutzen, müssen Sie den Code entsprechend den vorigen Erläuterungen abwandeln. Damit sind wir so gut wie fertig und können daran gehen, unsere Detailseite zu testen. Die Datensatzgruppe ist definiert, aber die Daten harren noch ihres Einsatzes. Dazu müssen wir die Datensatzgruppe in der Palette DATENBINDUNGEN aufklappen, die Platzhalter in unser Dokument ziehen und in den entsprechenden Feldern der Tabelle platzieren. Abb. 11.11 zeigt meine fertige Detailseite.

385

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Abbildung 11.10: Die erweiterte Abfrage bietet mehr Möglichkeiten, ist jedoch aufwändiger zu konfigurieren.

Abbildung 11.11: Der Lohn der Mühe: die fertige Detailseite!

Ist die Übersichtsseite fertig, können wir eine der heißeren Funktionen von UltraDev testen – die Live Data-Ansicht, wobei wir die Variablen mit dynamischen Werten speisen, die wir im URL-Feld übergeben: 1. Schalten Sie in die Live Data-Ansicht um (Menü ANSICHT > LIVE DATA). 2. Haben Sie Defaultwerte für die Variablen gesetzt, sollte dieser Datensatz sofort in der Dokumentansicht angezeigt werden. 3. Tragen Sie in das leere URL-Feld oben in der Dokumentansicht die verschiedenen URL-Parameter ein: vname=Robyn&nname=Ness. (Sie müssen natürlich die Namen und Variablen einsetzen, die Sie verwendet haben.) 4. Der entsprechende Datensatz wird auf der Detailseite angezeigt. 5. Versuchen Sie das auch mit anderen Datensätzen.

386

Anzeige von Detailseiten und Löschen von Datensätzen

In puncto Fehlerhandling dürfen Sie von UltraDev nicht zu viel erwarten. Das Programm erzeugt zwar funktionierenden Code, kann aber auch keine Wunder bewirken. Wenn Sie einen nicht vorhandenen Datensatz anfordern, gibt der Anwendungsserver eine Fehlermeldung aus. Das ist kein Schwachpunkt des Programms, denn es ist unmöglich, alle möglichen Fehlerquellen in der Anwendung bzw. in der Datenbank vorauszusehen und abzufangen. Um ein leistungsfähiges Fehlerhandling zu implementieren, bleibt nur der Weg über die manuelle Anpassung des Codes. Zum Glück ist das in den meisten Fällen nicht nötig, denn oft wird automatisch auf die Detailseite verlinkt.

Datensätze löschen Nachdem wir die Detailseite im Schweiße unseres Angesichtes fertig gestellt haben, können wir uns daran begeben, der Seite eine LÖSCHEN-Schaltfläche zu spendieren, mit dem wir den angezeigten Datensatz aus der Datenbank entfernen können. Die Erstellung dieser Schaltflächen ist ein Kinderspiel – ein paar Handgriffe, und wir können die Funktion testen. Das Serververhalten DATENSATZ LÖSCHEN setzt ein Formular voraus, das die Daten überträgt. Dieser Übertragungsprozess ist der Auslöser dafür, dass auf dem SQL-Server ein DELETE-Befehl ausgeführt wird. Zunächst müssen wir also auf der Detailseite ein Formular einfügen – es ist übrigens eine gute Angewohnheit, Formulare immer so zu benennen, dass aus ihrem Namen auch ihre Funktion hervorgeht. In dieses Formular müssen wir lediglich eine Schaltfläche einfügen. Beschriften Sie diese Schaltfläche noch mit »Löschen« und schon sind Sie einsatzbereit. Zuletzt müssen wir noch das Serververhalten DATENSATZ LÖSCHEN zuweisen. Klicken Sie in der Palette SERVERVERHALTEN auf das Plussymbol (+), und wählen Sie den entsprechenden Befehl. Konfigurieren Sie das Dialogfenster (zu sehen in Abb. 11.12) wie folgt: 쐽

VERBINDUNG – Die Datenbankverbindung, die das Verhalten benutzen soll. Definieren Sie hier dieselbe Verbindung wie in der Detailseite.

쐽

LÖSCHEN AUS TABELLE – Wählen Sie hier dieselbe Tabelle wie in der Detailseite. Die Tabelle, in der der Datensatz gelöscht wird.

쐽

DATENSATZ AUSWÄHLEN AUS – Hier wird es interessant. Diese Datensatzgruppe enthält den Eintrag, den wir löschen wollen. Auf unserer Detailseite ist der einzige Datensatz der Gruppe der, den wir löschen wollen. Wählen Sie auch hier dieselbe Datensatzgruppe wie auf der Detailseite.

쐽

SPALTE FÜR EINDEUTIGEN SCHLÜSSEL – Diese Spalte enthält den Primärschlüssel der Datenbank. Leider haben wir in unserer aktuellen Tabelle einen zusammengesetzten Primärschlüssel definiert – welche Spalte sollen wir also auswählen? Nun, in diesem

387

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Fall ist das gleichgültig. Die Datensatzgruppe, in der wir Einträge löschen, wurde so definiert, dass sie nur einen einzigen Wert zurückgibt, also ist es egal, was wir hier einstellen. Normalerweise wählen Sie hier die Spalte, die den Primärschlüssel enthält. Aktivieren Sie das Kontrollfeld NUMERISCH, falls die Spalte einen Zahlenwert enthält. 쐽

DURCH SENDEN LÖSCHEN – Wählen Sie hier das Formular aus, das den Datensatz löscht, nachdem es abgeschickt wurde. In unserem Fall ist es das gerade erstellte Formular mit de LÖSCHEN-Schaltfläche.

쐽

NACH DEM LÖSCHEN VON/ZU URL WECHSELN – Hier wählen Sie die URL aus, zu der der Anwender geschickt wird, nachdem er der auf der LÖSCHEN-Schaltfläche geklickt hat. Ich schicke den Anwender zur Übersichtsseite zurück, Sie könnten ihn aber auch auf eine Seite lenken, die ihm mitteilt, dass der Datensatz gelöscht wurde.

Abbildung 11.12: Erstellen Sie ein Formular, das einen Datensatz löscht, nachdem es übertragen wurde.

Haben Sie alle Einstellungen vorgenommen, klicken Sie auf OK. Lassen Sie sich nun wieder einen Datensatz in der Live Data-Ansicht durch das Setzen von Parametern im URLFeld anzeigen. Wenn Sie die Seite im Browser öffnen, sollte sich der Datensatz mit der LÖSCHEN-Schaltfläche entfernen lassen. Und das war's auch schon! Wollen Sie Serververhalten testen, die mit Formularen arbeiten, müssen Sie die Seite im Browser öffnen und nicht in der Live Data-Ansicht. Hier funktioniert nämlich das Verhalten scheinbar nicht.

Auf Detailseiten verlinken UltraDev automatisiert die Verlinkung mit einer Detailseite weit gehend (rein von Namen des Verhaltens her könnte man ja glauben, dass das Programm einem die Erstellung der Detailseite völlig abnimmt, aber dem ist nicht so). Zu Anschauungszwecken wollen wir nun unserer Übersichtsseite einen Link auf die Detailseite zufügen.

388

Anzeige von Detailseiten und Löschen von Datensätzen

Zu diesem Zweck habe ich die Tabelle um eine neue Spalte erweitert, die den Link enthalten soll. Danach sieht meine Tabelle in der Dokumentansicht (Live Data ausgeschaltet) aus wie in Abb. 11.13 gezeigt.

Abbildung 11.13: Erweitern Sie die Tabelle um einen Link zur Detailseite.

Wie Sie die Seite gestalten, bleibt natürlich Ihnen überlassen, hier geht es nur ums Prinzip. Wenn Sie wollen, müssen Sie nicht einmal ein neue Spalte anlegen. Sie können den Link auf die Detailseite genauso gut einem der dynamischen Platzhalter zuweisen. Wenn Sie ein neues HTML-Objekt für diesen Link erstellen, dann platzieren Sie zunächst die Grafik oder den Text im Dokument. Mit folgenden Schritten verlinken Sie auf die Detailseite: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+) und wählen Sie den Befehl ZU DETAILSEITE WECHSELN. 3. Konfigurieren Sie den Link wie in Abb. 11.14 zu sehen.

Abbildung 11.14: UltraDev automatisiert die Verlinkung auf eine Detailseite.

4. UltraDev fügt den Link automatisch in die Anwendung ein. 5. Müssen Sie mehrere Parameter übergeben, bearbeiten Sie den Sourcecode entsprechend. Folgende Parameter müssen Sie im Dialogfenster ZU DETAILSEITE WECHSELN einstellen: 쐽

LINK – Das Element, das den Link auf die Detailseite enthält. Haben Sie ein Objekt markiert, bevor Sie das Serververhalten aufgerufen haben, ist es hier schon gesetzt.

389

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

쐽

DETAILSEITE – Die Detailseite, die Sie erstellt haben.

쐽

URL-PARAMETER DURCHLAUFEN – Der Name des URL-Parameters, der an die Detailseite übergeben werden soll. Da die Datenbank, die ich für dieses Kapitel angelegt habe, einen zusammengesetzten Primärschlüssel verwendet (Vorname und Nachname), müssen an die Detailseite zwei Werte übergeben werden. Arbeiten Sie ebenfalls mit einem zusammengesetzten Primärschlüssel, dann setzen Sie jetzt nur einen dieser Parameter. Den zweiten ergänzen wir anschließend von Hand.

쐽

DATENSATZGRUPPE/SPALTE – Hier wählen Sie die Datensatzgruppe aus, die die Daten enthält, die auf der Detailseite angezeigt werden sollen, sowie das Feld, dessen Wert per URL übergeben werden soll. Ich übergebe aus Gründe der Konsistenz das Feld vname im URL-Parameter vname.

쐽

BESTEHENDE PARAMETER DURCHLAUFEN – Über diese Funktion können Sie alle bereits bestehenden URL-Parameter und sämtliche per Formular übertragenen Parameter an die Detailseite übergeben. In unserem Fall haben wir keine Verwendung für diese Einstellungen.

Haben Sie alle Einstellungen vorgenommen, klicken Sie auf OK. Bevor Sie den Link jedoch praktisch erproben können, müssen Sie den Code so verändern, dass auch der URL-Parameter nname und das Datenfeld nname an den die Detailseite übertragen werden. Hierzu müssen Sie das Dokument in der Codeansicht öffnen und nach dem Link zur Detailseite suchen. Wenn Sie mit dem ASP-Modell arbeiten, halten Sie innerhalb des -Tags nach einem Stück Code Ausschau, das in etwas wie folgt aufgebaut ist: "vname=" & Recordset1.Fields.Item("vname").Value

Dieses Stückchen ASP-Code verknüpft "vname=" mit dem Wert des Feldes "vname=" der aktuellen Datensatzgruppe. Um die URL um den Parameter "nname" zu erweitern, müssen Sie den Code um eine Anweisung nach dem Muster &nname=nname ergänzen. Die geänderte Anweisung liest sich dann wie folgt: "vname=" & Recordset1.Fields.Item("vname").Value & "nname=" & Recordset1.Fields.Item("nname").Value

Nun können wir unser Dokument testen. Arbeiten Sie mit JSP oder CFML, ist der Weg der gleiche. Suchen Sie den automatisch generierten Code in der Quellcodeansicht und ergänzen Sie den Link um die erforderlichen URL-Parameter. Wenn Sie öfter mit zusammengesetzten Primärschlüsseln arbeiten, dann stellt UltraDev Sie vor gewisse Probleme, da das Programm nur einfache Primärschlüssel unterstützt. Dieses Kapitel verfolgte die Absicht, Sie zu Übungszwecken mit dem SAF (schlimmsten aller Fälle) zu konfrontieren. In den folgenden Lektionen werden wir nur noch mit Datenbanken mit einfachen Primärschlüsseln arbeiten. Reichen die vordefinierten Funktionen von UltraDev für einen

390

Aktualisierungsseiten erstellen

bestimmten Zweck nicht aus, empfiehlt es sich als grundsätzliche Strategie, die gewünschte Funktionalität so weit wie möglich mit den »Bordmitteln« des Programms zu realisieren und fehlende Features von Hand nachzurüsten. Unserer Ausgabe- und Löschseiten sind hiermit fertig. Wenn Sie alle Übungen mitgemacht haben, dann haben Sie jetzt eine Seite, auf der Sie neue Datensätze eingeben können, eine, die alle vorhandenen Datensätze ausgeben kann (die, die wir gestern erstellt und heute verändert haben), sowie eine letzte Seite, die alle Details zu einem Datensatz anzeigt und eine Löschoption für diesen Datensatz bietet. Somit haben wir schon weit gehende Kontrolle über unseren Datenbestand, doch eine wichtige Funktion fehlt uns noch: die Möglichkeit, bereits vorhandene Datensätze zu aktualisieren. Statt einen Datensatz zuerst löschen und dann neu eingeben zu müssen, wäre es natürlich weit praktischer, wenn man diesen Datensatz einfach bearbeiten könnte.

11.5 Aktualisierungsseiten erstellen Bei der Erstellung von Aktualisierungsseiten können wir auf bereits bekannte Techniken zurückgreifen. Hinzu kommt allerdings eine neue Funktionalität: das direkte Laden von Daten in ein Formular, um sie dort zu bearbeiten und wieder an die Datenbank zurückzuübertragen. Zweckmäßigerweise bauen wir Aktualisierungsseiten unter Verwendung einer bereits erstellten Detailseite auf. Öffnen Sie Ihre Detailseite, sofern sie nicht schon geöffnet ist, und speichern Sie sie unter einem neuen Namen (update, aktualisieren o.ä.). Möchten Sie die Seite ganz neu anlegen, müssen Sie zunächst wieder eine erweiterte Abfrage erstellen, die identisch ist mit der Datensatzgruppe (Abfrage) der Detail-/Löschseite. Als Nächstes nehmen Sie nachstehende Änderungen am Löschformular vor: 1. Sofern noch nicht geschehen, verändern Sie das Formular dahingehend, dass es die gesamte Detailtabelle (in Zukunft: Aktualisierungstabelle) enthält. Am schnellsten geht das, indem Sie den HTML-Code direkt bearbeiten. 2. Ändern Sie die Beschriftung der LÖSCHEN-Schaltfläche in DATENSATZ AKTUALISIEREN o.ä. Die Funktion der Schaltfläche sollte aus der Beschriftung hervorgehen. 3. Löschen Sie alle definierten Serververhalten mit Ausnahme der Datensatzgruppe selbst. Andernfalls laufen Sie Gefahr, dass der Datensatz nicht aktualisiert, sondern gelöscht wird. 4. Nun fügen Sie ähnlich wie auf der Eingabeseite für jedes Datenfeld ein Texteingabefeld ins Formular ein. Benennen Sie die Eingabefelder analog den Datenfeldern in der Datenbank.

391

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Ist die halb Einfüge-, halb Detailseite soweit fertig, öffnen Sie die Palette SERVERVERHALTEN, klicken auf das Plussymbol (+), und weisen dem Dokument das Verhalten DATENSATZ AKTUALISIEREN zu. Das Dialogfenster DATENSATZ AKTUALISIEREN, zu sehen in Abb. 11.15, ist eine Mischung aus DETAILSEITE und DATENSATZ EINFÜGEN.

Abbildung 11.15: Das Dialogfenster Datensatz aktualisieren ist eine Mischung aus den Dialogfenstern Datensatz einfügen und Detailseite.

Konfigurieren Sie das Dialogfenster analog den beiden anderen Serververhalten, die wir bereits besprochen haben: 쐽

VERBINDUNG – Hier stellen Sie die Datenbankverbindung ein, über die die zu aktualisierende Datensatzgruppe adressiert werden kann.

쐽

ZU AKTUALISIERENDE TABELLE – Bedarf wohl keiner näheren Erklärung.

쐽

DATENSATZ AUSWÄHLEN AUS – Stellen Sie hier die Datensatzgruppe ein, deren Einträge aktualisiert werden sollen. Wie bei unserer Detailseite auch, haben wir nur eine Datensatzgruppe zur Auswahl.

쐽

SPALTE FÜR EINDEUTIGEN SCHLÜSSEL – Wählen Sie hier die Spalte der Tabelle aus, die als Primärschlüssel definiert wurde. In meinem Beispiel stellt sich wieder das Problem, dass UltraDev nur mit einfachen Primärschlüsseln umgehen kann. Das Programm handhabt dieses Problem so, dass die Datensatzgruppe einen Datensatz zurückgibt, den sie anhand eines der Felder des zusammengesetzten Primärschlüssels ausgibt. Da die Datensatzgruppe immer nur einen Datensatz enthalten kann, ist die Einstellung hier nicht so wichtig. Haben Sie Ihre Tabelle gleich mit einem einfachen Schlüssel angelegt, brauchen Sie diesen hier nur auszuwählen.

392

Aktualisierungsseiten erstellen

쐽

WERTE ABRUFEN AUS: FORMULAR – Das Formular, das nach der Übertragung die aktualisierten Daten enthält, die in die Datenbank zugeschrieben werden sollen.

쐽

FORMULARELEMENTE/SPALTEN – Hier weisen Sie den Formularfeldern die entsprechenden Spalten der Datenbank zu. Markieren Sie hierzu einen Eintrag in der Liste der Formularelemente und wählen Sie im Popup-Menü Spalte das Datenfeld aus, in die der Wert geschrieben werden soll.

쐽

ZU URL WECHSELN – Hier definieren Sie die Seite, auf die der Anwender geschickt werden soll, wenn er den Datensatz aktualisiert hat. Ich schicke den Anwender zurück zur Übersichtsseite, sodass er den aktualisierten Datensatz sofort sehen kann.

Haben Sie alle Einstellungen vorgenommen, schließen Sie das Dialogfenster durch Klick auf OK. Damit sind wir allerdings noch nicht am Ziel unserer Wünsche. Das Serververhalten kann lediglich einen Datensatz anhand der im Formular eingegebenen Werte aktualisieren. Was es leider nicht kann, ist die Daten des Datensatzes, der aktualisiert werden soll, gleich in die entsprechenden Formularfelder zu schreiben. Um das zu erreichen, müssen wir die Formularfelder zu den Daten der Datensatzgruppe in Beziehung setzen.

Das Erstellen von dynamischen Formularen Formularelemente an Daten einer Datenbank anzubinden ist nicht schwer. Grundsätzlich haben wir zu diesem Zweck zwei Methoden zur Auswahl. Die erste arbeitet mit einem speziellen Serververhalten, das uns eine Berührung mit dem Code weit gehend erspart. Die zweite erstellt die dynamische Bindung mithilfe des Eigenschafteninspektors. Ich persönlich verwende lieber letztere Technik, denn sie gibt nicht nur Zugriff auf die Formularelemente. (Denken Sie an die dynamisch gesetzten Ebenenattribute der gestrigen Lektion.) Wir werden aber beide Möglichkeiten durchspielen.

Dynamische Formulare mit Serververhalten erstellen Die automatisierte Anbindung von Formularfeldern an dynamische Daten geht ziemlich unkompliziert vor sich. Möchten Sie die Eingabefelder Ihres Formulars mit den entsprechenden Werten in Ihrer Datenbank verknüpfen, brauchen Sie nur folgende Schritte auszuführen: 1. Klicken Sie in der Palette SERVERVERHALTEN auf das Plussymbol (+). 2. Wählen Sie aus dem Popup-Menü DYNAMISCHE ELEMENTE > DYNAMISCHES TEXTFELD. 3. Es öffnet sich das in Abb. 11.16 gezeigte Dialogfenster. Wählen Sie im Popup-Menü TEXTFELD das Formularfeld aus, das dynamisch ausgefüllt werden soll.

393

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Abbildung 11.16: Dynamische Formularelemente mit fertigen Serververhalten.

4. Klicken Sie nun auf das Blitz-Icon rechts neben dem Popup-Menü WERT SETZEN AUF. Es öffnet sich ein weiteres Dialogfenster DYNAMISCHE DATEN. 5. Wählen Sie hier die Datensatzgruppe und das Datenfeld, dessen Wert ins Formular geschrieben werden soll. 6. Schließen Sie das Dialogfenster DYNAMISCHE DATEN mit Klick auf OK. 7. Schließen Sie das Dialogfenster DYNAMISCHES TEXTFELD mit Klick auf OK. 8. Wiederholen Sie obige Schritte für alle übrigen Formularfelder der Aktualisierungsseite. Haben Sie alle dynamische Elemente eingefügt, sollte Ihre fertige Formularseite in etwa so aussehen wie in Abb. 11.17 gezeigt.

Abbildung 11.17: Das fertige Aktualisierungsformular

394

Aktualisierungsseiten erstellen

Beim Einfügen der dynamischen Textfelder haben Sie sicher gesehen, dass UltraDev auch Kontrollfelder, Menüs und andere Formularelemente dynamisch erzeugen kann. Sie werden ganz ähnlich definiert wie die eben erstellten Textfelder. Wir werden diese Verhalten bei den folgenden Projekten noch kennen lernen.

Dynamische Formulare mit dem Eigenschafteninspektor erzeugen Obwohl sich dynamische Formulare mit den Serververhalten recht bequem erzeugen lassen, bevorzuge ich die Anbindung an dynamische Werte per Eigenschafteninspektor, da diese Methode besser zur üblichen Arbeitsweise des Programms passt. Wie wir gestern gesehen haben, lassen sich alle HTML-Attribute dynamisch an Werte in der Datenbank anbinden, das gilt natürlich auch für die Attribute von Formularelementen. Um per Eigenschafteninspektor Formularwerte dynamisch zu setzen, führen Sie die folgenden Schritte aus: 1. Markieren Sie ein Eingabefeld des Aktualisierungsformulars. 2. Öffnen Sie den Eigenschafteninspektor in der Attributansicht (unteres Icon am linken Palettenrand anklicken). 3. Klicken Sie auf das Plussymbol (+), um ein neues Attribut zu setzen. 4. Öffnen Sie das Popup-Menü in der ersten Spalte und wählen Sie »value« bzw. »Anfangswert«, wenn Sie mit einem mehrzeiligen Textfeld arbeiten, da wir ja den Wert des Formularelements dynamisch binden wollen. 5. Nun klicken Sie das Blitz-Icon ganz rechts in der Attributzeile an. Daraufhin öffnet sich das bereits bekannte Dialogfenster DYNAMISCHE DATEN. 6. Wählen Sie in diesem Fenster die Datensatzgruppe sowie das Datenfeld aus, dessen Inhalt ins Eingabefeld des Formulars geschrieben werden soll. 7. Klicken Sie abschließend auf OK. Im Anschluss an diese Aktion sollte sich das Eingabefeld im Eigenschafteninspektor wie in Abb. 11.18 darstellen. Zu guter Letzt können Sie die Aktualisierungsseite mit der Übersichtsseite verlinken. Das Verfahren ist das gleiche, wie es für die Detailseite beschrieben wurde. Da die Aktualisierungsseite dieselben Informationen enthält wie die Detailseite und dazu noch in editierbarer Form, könnten wir die Detailseite gleich durch die Aktualisierungsseite ersetzen. Unter ZU EINER DETAILSEITE VERLINKEN können Sie die erforderlichen Schritte nachlesen. Testen Sie die fertige Seite auf ihre Funktionalität. Ist alles gut gegangen, können Sie nun die Datensätze in Ihrer Datenbank auf den neuesten Stand bringen.

395

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Abbildung 11.18: Auch über den Eigenschafteninspektor lassen sich die Attribute eines Objekts dynamisch an eine Datenbank anbinden.

11.6 Fertige Musterseiten verwenden In den beiden vergangenen Tagen haben wir Übersichtsseiten, Detailseiten sowie Einfügeund Aktualisierungsseiten von Hand erstellt. Sie werden bemerkt haben, dass sich beim Schreiben des HTML-Codes viele Wiederholungen ergeben. Für einen schnellen Einstieg in die Erzeugung dynamischer Webseiten hat Macromedia die Objektpalette um einige neue Befehle erweitert, mit denen sich Musterseiten solcher Eingabeformulare im Nu anlegen lassen. Diese neue Funktionen sind zwar sehr zeitsparend, doch vielleicht machen Sie auch die Erfahrung, dass Sie lieber Ihr eigenes Design entwickeln. Ich persönlich mag es überhaupt nicht, wenn ich fertige Vorlagen an meine Vorstellungen anpassen soll. Geht es jedoch um die schnelle Erstellung einer einfachen Website mit Datenbankzugriff, können Sie mit diesen neuen Funktionen den Job in kürzester Zeit erledigen. Sollten Sie mit dem Gedanken spielen, diese automatisch erzeugten Seiten in irgendeiner Form zu erweitern oder zu verändern, ist es unabdingbar, dass Sie die Serververhalten, die wir heute besprochen haben, gut verstehen. Haben Sie diese Musterseiten einmal Ihrer Site hinzugefügt, müssen Sie den Code direkt bearbeiten, wenn Sie die Serververhalten modifizieren wollen. Nur die Seitenerstellung ist automatisiert, Anpassungen müssen Sie selbst vornehmen.

396

Fertige Musterseiten verwenden

Öffnen Sie die Unterpalette LIVE der Objektpalette. Wir werden uns von den neuen Befehlen folgende vornehmen: Master-Detailseitensatz, Einfügeformular und Aktualisierungsformular (Icons eins, drei und vier der Unterpalette). Wie alle Befehle in UltraDev sind diese neuen Funktionen sowohl über die Objektpalette als auch über das Menüsystem zugänglich. Sie finden die LiveObjekte unter dem Menü EINFÜGEN > LIVE-OBJEKTE, wenn Sie den ohnehin stets knappen Platz auf dem Bildschirm nicht durch die Objektpalette verringern möchten.

Master-Detailseitensatz einfügen Wollen Sie die bereits bekannten Übersichts- und Detailseiten mittels dieser Vorlagen erstellen, müssen Sie zunächst ein neues Dokument anlegen, das nichts enthält außer der Datensatzgruppe, die abgefragt werden soll. Öffnen Sie also jetzt ein neues Dokument und fügen Sie eine neue Datensatzgruppe hinzu. Verwenden Sie hierzu am besten die Personaldatenbank, mit der wir die letzten zwei Tage gearbeitet haben. Abb. 11.19 zeigt das Dialogfenster mit der definierten Datensatzgruppe. Klicken Sie nun auf das entsprechende Icon in der Objektpalette oder wählen Sie EINFÜGEN > LIVE-OBJEKTE > MASTER-DETAILSEITENSATZ. Es öffnet sich ein Dialogfenster, das Sie nach verschiedenen Informationen fragt wie z.B. den Datensätzen, die ausgegeben werden sollen (siehe Abb. 11.20). Folgende Einstellungen müssen Sie vornehmen:

Abbildung 11.19: Eine Datensatzgruppe wird dem neuen Dokument zugewiesen.

397

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Abbildung 11.20: Konfigurieren des Dialogfensters Master-Detailseitensatz einfügen mit den erforderlichen Angaben. 쐽

DATENSATZGRUPPE – Die für dieses Dokument definierte Datensatzgruppe.

쐽

FELDER IN DER MASTERSEITE – Mit den Plus- bzw. Minussymbolen können Sie der Ausgabeseite Spalten hinzufügen bzw. sie daraus löschen. Mit den Auf/Ab-Pfeilen können Sie außerdem die Reihenfolge der Spalten verändern.

쐽

ZEIGEN – Hier wählen Sie aus, ob Sie nur eine bestimmte Anzahl von Datensätzen anzeigen lassen oder alle auf einmal. Begrenzen Sie die Anzahl der Datensätze, wird automatisch eine Navigationsleiste eingefügt, damit sich der Anwender die übrigen Einträge anzeigen lassen kann. Navigationsleisten und ihre Funktionsweise ist Thema von Tag 14, »Komplexe Komponenten: Benutzeranmeldungen«.

쐽

VERKNÜPFEN MIT DETAIL VON – Wählen Sie hier aus, welches Element der Tabelle den Link auf die Detailseite erhalten soll.

쐽

EINDEUTIGEN SCHLÜSSEL ÜBERGEBEN – Wählen Sie hier die Spalte der Tabelle aus, die den Identifikationsschlüssel enthält. Dieser wird mit der URL übergeben, wenn der Anwender den Link anklickt. Achten Sie darauf, dass Sie bei der Wahl des Namens der Detailseite die richtige Extension verwenden (.asp, .jsp usw.). Andernfalls wird UltraDev die Seite ohne Erweiterung speichern und in der Codeansicht öffnen, weil es die Datei nicht zuordnen kann.

398

Fertige Musterseiten verwenden

쐽

NAME DER DETAILSEITE – Geben Sie hier einen Namen für die automatisch erzeugte Detailseite an. Mit Klick auf DURCHSUCHEN können Sie auch eine bereits angelegte Seite auswählen.

쐽

FELDER IN DER DETAILSEITE – Wie bei der Konfiguration der Übersichtsseite können Sie auch hier einstellen, welche Spalten in der Detailseite angezeigt werden sollen und in welcher Reihenfolge. Vermutlich werden Sie in der Detailseite mehr Felder haben als in der Übersichtsseite.

Haben Sie alle Einstellungen vorgenommen, klicken Sie auf OK, um sie zu sichern. Nun können Sie sich zurücklehnen und gemütlich abwarten, bis Ihnen UltraDev zwei neue Dokumente präsentiert: die Masterseite und die Detailseite, zu sehen in Abb. 11.21.

Abbildung 11.21: Master- und Detailseite werden innerhalb von Sekunden angelegt.

Wie bereits erwähnt, müssen Sie sämtliche Änderungen an diesen automatisch erzeugten Seiten von Hand vornehmen. Sind die Musterseiten einmal angelegt, müssen Sie direkt mit den Paletten SERVERVERHALTEN und DATENBINDUNGEN arbeiten. Wie Sie sehen, erstellt diese einfach zu bedienende Funktion Übersichts- und Detailseiten sehr schnell. Mit den beiden anderen Befehlen sind Einfüge- und Aktualisierungsseiten ebenfalls im Nu erzeugt.

Einfügeformulare Um ein Eingabeformular zu erzeugen, das neue Datensätze in die Tabelle einer Datenbank schreibt, legen Sie ein neues Dokument an und wählen den Befehl EINFÜGEFORMULAR FÜR DATENSÄTZE in der Unterpalette LIVE oder per Menü EINFÜGEN > LIVEOBJEKTE. Es wird das in Abb. 11.22 gezeigte Dialogfenster geöffnet.

399

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Abbildung 11.22: Wählen Sie die Felder sowie die Spaltenköpfe aus, die im Einfügeformular angezeigt werden sollen.

Um eine korrekte Verbindung zur Datenbank herzustellen, müssen Sie die folgenden Felder konfigurieren: 쐽

VERBINDUNG – Wählen Sie die gewünschte Datenbankverbindung aus.

쐽

IN TABELLE EINFÜGEN – Wählen Sie diejenige Tabelle in der Datenbank aus, in die die neuen Datensätze geschrieben werden sollen.

쐽

NACH DEM EINFÜGEN HIERHER GEHEN – Geben Sie hier den Namen der Datei an, die nach dem Einfügen des Datensatzes aufgerufen werden soll oder klicken Sie auf den Button Durchsuchen und wählen Sie die entsprechende Datei aus. Meistens wählt man hier die Übersichtsseite aus.

쐽

FORMULARFELDER – In diesem Bereich werden alle Felder aufgelistet, die später im Formular angezeigt werden: die Beschriftung der einzelnen Spalten, welche Art von Eingabefeld für die entsprechende Spalte im Formular verwendet werden soll sowie das Format, in dem der Feldinhalt an den Server übertragen wird. Mit den Plus- und Minus-Schaltflächen fügen Sie Felder hinzu bzw. löschen sie, mit den Auf/Ab-Pfeilen verändern Sie deren Reihenfolge. UltraDev setzt diese Werte automatisch, doch können sie jederzeit verändert werden. Um einen Wert zu ändern. markieren Sie die entsprechende Zeile und ändern die Einträge in den Feldern BESCHRIFTUNG, ANZEIGEN ALS, SENDEN ALS.

쐽

BESCHRIFTUNG – Das »Etikett«, das einem Eingabefeld im Formular vorangestellt wird.

쐽

ANZEIGEN ALS – Die Art des Formularfeldes, die für das ausgewählte Feld verwendet werden soll.

400

Fertige Musterseiten verwenden

쐽

SENDEN ALS – Das Format, in dem die Daten eines Feldes übertragen werden.

쐽

STANDARDWERT – Ein vorbelegter Wert, der in einem Formularfeld angezeigt werden soll. Wenn Sie das Blitzicon anklicken, können Sie den Standardwert aus dem Feld einer Datensatzgruppe wählen.

Haben Sie alle Felder entsprechend konfiguriert, klicken Sie auf OK. Nun müssen Sie nur noch einen Augenblick warten und UltraDev präsentiert Ihnen Ihr neues Einfügeformular, das mehr oder weniger so aussehen dürfte wie in Abb. 11.23 gezeigt.

Abbildung 11.23: Das fertige Formular: Kein Augenschmaus, aber es erfüllt seinen Zweck.

Aktualisierungsformular für Datensätze Das Aktualisierungsformular ähnelt von seiner Arbeitsweise und Konfiguration her dem Einfügeformular, doch müssen Sie, ähnlich wie bei der Master-Detailseite, zuerst eine Datensatzgruppe definieren, bevor Sie es der Seite hinzufügen können. Ich gehe im Folgenden davon aus, dass Sie immer noch in der gleichen Site arbeiten. Öffnen Sie ein neues Dokument und verwenden Sie dieselbe Datensatzgruppe, die Sie auch für die Master-Detailseite verwendet haben. Allerdings gibt es hier eine kleine Veränderung. Während Sie für die Master-Detailseite alle Datensätze ausgewählt haben, müssen Sie jetzt einen Filter definieren – Sie wollen schließlich nur einen Datensatz verändern und nicht alle! Aktivieren Sie im Dialogfenster DATENSATZGRUPPE die Filterfunktion, indem Sie ein Feld wählen und per URL übergeben. In der Personaldatenbank haben wir die Bild-URL als Identifikationsschlüssel verwendet. In Abb. 11.24 ist eine Abfrage definiert, die einen Datensatz auswählt, indem sie das Feld imageurl mit einem URL-Parameter vergleicht, der ebenfalls imageurl heißt.

401

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Haben Sie die Datensatzgruppe definiert, fügen Sie dem Dokument das Aktualisierungsformular hinzu, indem Sie auf das entsprechende Icon der Objektpalette klicken oder im Menü EINFÜGEN > LIVE-OBJEKTE wählen. Das zugehörige Dialogfenster ist in Abb. 11.25 zu sehen, seine Konfiguration ist weit gehend identisch mit oben vorgestelltem Fenster EINFÜGEFORMULAR FÜR DATENSÄTZE EINFÜGEN.

Abbildung 11.24: Den zu bearbeitenden Datensatz per Filter auswählen

Abbildung 11.25: Das Aktualisierungsformular wird genauso konfiguriert wie das Einfügeformular.

402

Fertige Musterseiten verwenden

In der Konfiguration gibt es ein paar kleinere Unterschiede, die nachfolgend besprochen werden: 쐽

ZU AKTUALISIERENDE TABELLE – Hier wählen Sie die Tabelle in der Datenbank aus, in die der aktualisierte Datensatz geschrieben wird.

쐽

DATENSATZ AUSWÄHLEN IN – Hier wählen Sie den gefilterten Datensatz aus, der seine Daten in das Formular schreibt.

쐽

SPALTE FÜR EINDEUTIGE SCHLÜSSEL – Selektieren Sie die Spalte, die den eindeutigen Schlüssel enthält. Hier müssen Sie dieselbe Spalte auswählen, die Sie als Filter für die Datensatzgruppe definiert haben. Aktivieren Sie das Kontrollfeld NUMERISCH, wenn es sich um einen Zahlenwert handelt.

쐽

STANDARDWERT – Im Eingabeformular war dieses Feld standardmäßig leer. Im Aktualisierungsformular wird der Standardwert auf den Datensatz gesetzt, der bearbeitet wird.

Haben Sie alle Einstellungen vorgenommen, klicken Sie auf OK. Daraufhin wird das Formular mit den zugehörigen Serververhalten erzeugt. Das Endergebnis ist in Abb. 11.26 zu sehen.

Abbildung 11.26: Das Aktualisierungsformular wird automatisch ins Dokument eingefügt.

Die endgültige Verknüpfung der Formularseiten Alles, was uns jetzt noch zu tun bleibt, ist, die Datenübersichts-(Master-)Seite mit der Aktualisierungsseite zu verknüpfen. Danach nennen Sie eine funktionierende datenbankgestützte Webanwendung Ihr Eigen. Zu diesem Zweck müssen wir die Masterseite leicht modifizieren und ihr ein weiteres Serververhalten hinzufügen.

403

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

Öffnen Sie als Erstes die Übersichtsseite und erweitern Sie Tabelle über Menü MODIFIZIEREN > TABELLE > SPALTE EINFÜGEN um eine zusätzliche Spalte. Setzen Sie in die neue Zelle Text ein, der als Link auf die Aktualisierungsseite dient, wie z.B. »Zum Bearbeiten hier klicken« o.ä., und markieren Sie den Text. Öffnen Sie nun die Palette SERVERVERHALTEN, um auf die Aktualisierungsseite zu verlinken: 1. Klicken Sie auf das Plussymbol (+) der Palette SERVERVERHALTEN. 2. Wählen Sie den Befehl ZU DETAILSEITE WECHSELN. 3. Geben Sie den Namen der Aktualisierungsseite ein, die aufgerufen werden soll. 4. Übergeben Sie den Identifikationsschlüssel als URL-Parameter. Der URL-Parameter ist derselbe, den Sie als Filter im Aktualisierungsformular definiert haben. 5. Andere Parameter müssen nicht übergeben werden. Klicken Sie abschließend auf OK, um das Verhalten dem Dokument hinzuzufügen. Abb. 11.27 zeigt das Dialogfenster ZU DETAILSEITE WECHSELN mit den korrekten Einstellungen für die Daten aus den vorhergehenden Beispielen.

Abbildung 11.27: Mit dem Verhalten Zu Detailseite gehen können Sie das Aktualisierungsformular kontrollieren.

Sie sollten nun – ohne ein einziges Mal die HTML-Werkzeuge gebraucht zu haben – über eine komplette Webanwendung verfügen, die Datensätze ausgeben, Detailseiten darstellen sowie Datensätze bearbeiten und neu eingeben kann. Sie können entweder diese vordefinierten Objekte verwenden oder Ihre eigenen Formulare erstellen – die Entscheidung liegt ganz bei Ihnen.

11.7 Zusammenfassung Aufbauend auf die gestrige Lektion, in der wir gelernt haben, wie man Übersichtsseiten erstellt, haben wir uns heute damit befasst, wie man Daten in ein Formular schreibt, Variablen zwischen Seiten übergibt, um sich Details zu einem Datensatz anzeigen zu lassen, und

404

Fragen und Antworten

wie man bestehende Datensätze aktualisiert. UltraDev stellt für diese verschiedenen Aufgaben vordefinierte Serververhalten zur Verfügung, was die Erstellung dynamischer Sites, die auf einer genau definierten Abfolge von Ein- bzw. Ausgabeseiten beruhen, ziemlich vereinfacht. Ferner haben wir auch eine der Schwachstellen des Programms kennen gelernt, denn UltraDev kann nicht mit zusammengesetzten Primärschlüsseln umgehen. Wenn Sie bereits vorhandene Datenbanken übernehmen müssen, kann das zu einem echten Problem werden. Ein möglicher Workaround (von dem wir heute auch ausführlich Gebrauch gemacht haben) besteht darin, Datensatzgruppen so zu definieren, dass zusammengesetzte Primärschlüssel immer nur einen Datensatz zurückgeben. Diese Datensatzgruppe kann mit dann mit den Lösch- bzw. Aktualisierungsverhalten von UltraDev verwendet werden, ohne dass man sich über das »Schlüsselproblem« weitere Gedanken machen muss. Beim Anlegen neuer Datenbanken sollte man jedoch diese Problematik im Hinterkopf behalten. Bei der Erstellung der heutigen Seiten stand die reine Funktionalität im Vordergrund, doch sei an dieser Stelle daran erinnert, dass Ihnen beim Schreiben dynamischer Anwendungen auch die ganze Palette von Gestaltungswerkzeugen, die das Programm zu bieten hat, zur Verfügung steht. Experimentieren Sie ein wenig herum, um die heute erstellten Seiten an Ihre persönlichen Vorstellungen anzupassen.

11.8 Fragen und Antworten F

Kann ich anstelle eines Senden-Buttons auch einen Textlink verwenden, um ein Formular zu übertragen? A

F

Ich habe verschiedene Formularelemente auf einer Seite eingefügt, doch wenn ich sie im Browser aufrufe, sehe ich gar nichts. In der Designansicht von UltraDev ist alles da. Woran kann das liegen? A

F

Ja, das geht. Verwenden Sie hierzu folgenden JavaScript-Befehl: javascript:document.forms[<meinformularindex>].submit(). Damit wird der Senden-Button überflüssig.

Sie haben das -Tag nicht gesetzt. Wenn es fehlt, stellen die meisten Browser gar nichts dar.

Warum kann UltraDev nicht mit zusammengesetzten Primärschlüsseln umgehen? A

Die Logik des Programms geht davon aus, dass ein paar bestimmte Grundvoraussetzungen erfüllt sind, damit sich der für dynamische Seiten erforderliche Code über einige leicht zu konfigurierende Dialogfenster auch von Nicht-Programmierern erzeugen lässt. Werden diese Bedingungen nicht erfüllt, bleibt nur die Handarbeit am Code oder ein Workaround. In den meisten Fällen lassen sich die durch die Programmstruktur von UltraDev bedingten Einschränkungen leicht umgehen.

405

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren

F

Wann werden wir die übrigen Formularelemente an eine Datenbank anbinden? A

Sehr bald. Viele Projekte, die wir uns in der letzten Woche vornehmen werden, werden uns mit den Grenzen von UltraDev bekannt machen. Wenn Sie es nicht erwarten können, können Sie natürlich jetzt schon mit diesen Elementen herumexperimentieren. Das Interface gleicht weit gehend demjenigen, das wir schon kennen, und daher sollte es nicht allzu schwierig sein, diese Elemente mit der Datensatzgruppe Ihres HTML-Dokuments zu verknüpfen.

11.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. Wie können Sie die Größe eines Formulars zu Gestaltungszwecken verändern? 2. Für welche Art von Anwendung sollten Sie Kontrollkästchen verwenden? 3. Wozu dienen Optionsschalter? 4. Wie können Sie dynamische Dokumente, wie z.B. Detailseiten, in der Entwurfsansicht testen? 5. Wie viele Primärschlüssel kann UltraDev verwenden? 6. Wie können Sie mit zusammengesetzten Primärschlüsseln arbeiten? 7. Welche Möglichkeit gibt es außer den Serververhalten noch, Formularelemente an eine Datenbank zu binden? 8. Wie können Sie schnell Master-Detailseiten sowie die zugehörigen Einfüge- und Aktualisierungsseiten erzeugen?

Übungen 1. Erzeugen Sie eine vollständige Datenbankanwendung, die Sie ganz nach Ihren Vorstellungen gestalten. Designfragen standen bis jetzt gegenüber der Funktionalität im Hintergrund. Es empfiehlt sich jedoch, sich seine Fingerfertigkeit im Umgang mit den Gestaltungswerkzeugen von UltraDev zu bewahren und sie in die Gestaltung dynamischer Sites einzubeziehen.

406

Workshop

2. Modifizieren Sie die Aktualisierungsseite so, dass sich damit auch Datensätze löschen lassen. Seien Sie jedoch vorsichtig, denn wenn Sie der bestehenden Aktualisierungsseite nur ein weiteres Serververhalten zuweisen, könnten die Folgen katastrophal sein.

407

Komplexe Datenbankabfragen

2 1

Komplexe Datenbankabfragen

Bisher haben Sie gesehen, welche Möglichkeiten UltraDev für einfache Abfragen bietet. Sie können Informationen aus der Datenbank abrufen und dann anzeigen. In der Regel sollte dieser einfache Abfragemodus für Ihre Site völlig ausreichend sein. Für komplexe Applikationen brauchen Sie jedoch die Leistungsstärke von SQL für die Verarbeitung Ihrer Programmlogik. Dieses Kapitel bietet Ihnen eine kurze SQL-Lehrstunde, in der Sie erfahren, wie Sie die Leistung Ihres Datenbankservers wirklich ausnutzen können. Heute geht es um die folgenden Themen: 쐽

Wie Sie mit SQL Datenbanktabellen einrichten

쐽

Verschiedene Techniken für die Entwicklung von SQL-Abfragen, die Funktionen übernehmen, welche weit über die Möglichkeiten von UltraDev hinausgehen

쐽

Wie Sie durch Zeigen und Klicken in UltraDev einen Weg durch komplexe Abfragen finden

12.1 Wozu brauchen wir SQL? In den vergangenen Kapiteln haben Sie die einfachen Abfragen und Serververhalten von UltraDev genutzt, um Site-Fragmente mit dynamischer Funktionalität zu entwickeln. Leider ist mit diesen eingebauten Verhalten nur eine begrenzte Flexibilität zu erzielen. Wenn Sie einem Benutzer beispielsweise ermöglichen, in einem Formular seinen Vor- und Nachnamen einzugeben, und die Datenbank nach diesen Namen durchsuchen wollen, ist das mit einer einfachen UltraDev-Abfrage nicht möglich. Einfache Abfragen wie die in Abbildung 12.1 gezeigte ermöglichen nur eine Auswahl von Daten, die auf einem einzigen dem Verhalten übergebenen Parameter basieren. Falls Sie innerhalb einer einfachen Abfrage mehrere Informationsabschnitte nutzen wollen, haben Sie Pech gehabt. Und das ist nur die Spitze des Eisbergs. Wenn Sie dagegen das SQL direkt verwenden, können Sie Datensätze nach mehreren Attributen auswählen, nach mehreren Attributen sortieren, mathematische und logische Funktionen für Feldwerte ausführen, Informationen zufällig anzeigen – und vieles andere mehr. Dieses Kapitel soll Ihnen ein praktisches Wissen über SQL verschaffen, sodass Sie wirklich komplexe Applikationen entwickeln können, ohne die Bequemlichkeit der UltraDevUmgebung verlassen zu müssen. Obwohl UltraDev die Möglichkeit bietet, ausschließlich durch verschiedene Mausklicks komplexe Abfragen anzulegen, werden Sie es einfacher finden, die Abfragen unmittelbar in die Applikation einzugeben, wenn Sie sich erst einmal daran gewöhnt haben, SQL manuell zu schreiben.

410

Wozu brauchen wir SQL?

Abbildung 12.1: Eine einfache Abfrage ist auf eine auf einem einzigen Eingabeparameter basierende Datenauswahl beschränkt.

Falls Ihnen der Begriff SQL neu ist: Er steht für Structured Query Language. SQL ist eine Sprache, die zur Abfrage relationaler Datenbanksysteme entwickelt wurde. Sie ist zum allgemein akzeptierten Standard geworden und wird in fast allen kommerziellen Datenbanksystemen verwendet. SQL findet sich ebenso in mehreren Open Source-Applikationen, wie beispielsweise MySQL, das Sie für die Beispiele in diesem Buch verwenden werden. Zunächst betrachten wir das SQL, mit dem eine Datenbank erstellt wird. Sie kennen die dafür erforderlichen SQL-Anweisungen bereits, aber wissen Sie auch, wie Sie sie selbst schreiben? Nachdem Sie die grundlegenden Werkzeuge für Datenbanken, Tabellen und andere Strukturen kennen gelernt haben, werden wir uns mit Abfragen beschäftigen. Stellen Sie sicher, dass Sie einen Datenbankserver installiert haben, bevor Sie mit diesem Kapitel fortfahren – Sie müssen die Befehle in Ihrer Serverkonsole eingeben, damit Sie sie nachvollziehen können. Falls Sie Access einsetzen, können Sie auch SQL verwenden, um eine Abfrage zu entwickeln. Legen Sie eine neue Abfrage an und wählen Sie im ANSICHTMenü den Eintrag SQL-ANSICHT. In das angezeigte Dialogfeld geben Sie das SQL direkt ein. Microsoft Access ist jedoch kein vollfunktionales SQL-System, deshalb kann es sein, dass manche Abfragen nicht funktionieren.

411

Komplexe Datenbankabfragen

12.2 Die Datenbankobjekte Bevor wir mit der Entwicklung von SQL beginnen können, müssen vier primäre Objekte definiert werden. Das erscheint Ihnen vielleicht trivial, wenn Sie die Arbeit mit Datenbanken gewohnt sind, aber wenn Ihnen das alles neu ist, kann es vielleicht zur Klärung der Dinge beitragen. In UltraDev haben Sie Zugriff auf vier externe Strukturen: 쐽

Datenbanken – Dies sind die Containerelemente, die beim Erstellen einer Verbindung definiert werden. Eine Datenbank als solche enthält keine Daten, sondern wiederum andere Elemente, die die eigentlichen Informationen aufnehmen.

쐽

Tabellen – Sie enthalten die eigentlichen Daten in der Datenbank. Die Informationen über die Datentypen, die in einer Tabelle gespeichert werden, werden beim Anlegen der Tabelle definiert. In einer Datenbank können mehrere Tabellen abgelegt und miteinander in eine Beziehung gebracht werden, um eine normalisierte Struktur darzustellen.

쐽

Ansichten – Ansichten stellen Sie sich am besten als virtuelle Tabellen vor. Wenn Sie eine bestimmte komplexe Abfrage immer wieder ausführen, könnte es einfacher sein, sie als Ansicht zu definieren. Eine Ansicht ist nichts weiter als eine Abfrage, die der Außenwelt in jeder Hinsicht wie eine Tabelle präsentiert wird. Immer wenn ein Zugriff auf diese Tabelle erfolgt, wird die SQL-Abfrage ausgeführt, mit der sie erstellt wurde, und die Daten werden zurückgegeben, als handelte es sich dabei um eine echte Tabelle.

쐽

Gespeicherte Prozeduren – Dies sind Programmroutinen, die auf dem externen Datenbankserver abgelegt sind. Wie eine Ansicht bietet eine gespeicherte Prozedur keine Möglichkeit, Daten zu speichern, sondern es handelt sich dabei um ein virtuelles Konstrukt. Gespeicherte Prozeduren können genutzt werden, um Daten zu verarbeiten und das Ergebnis direkt in UltraDev zurückzugeben, als handelte es sich bei den Daten um eine Standard-Datensatzgruppe. Leider unterstützen die verschiedenen Datenbankserver größtenteils unterschiedliche Programmiersprachen für die Entwicklung gespeicherter Prozeduren. Wenn Sie wirklich portabel bleiben wollen, sollten Sie so viel Code wie möglich in SQL schreiben. Das Datenbanksystem, das Sie in allen hier gezeigten Beispielen verwenden werden, unterstützt keine gespeicherten Prozeduren oder Ansichten. Diese beiden SQL-Elemente sind praktisch, aber selten wirklich notwendig. Beim Lesen der nächsten Kapitel können Sie die komplexen Abfragen, die Sie heute kennen lernen werden, natürlich jederzeit in Ansichten umwandeln.

412

Datenbanken und Tabellen anlegen

12.3 Datenbanken und Tabellen anlegen Der erste Schritt bei der Arbeit mit einem Datenbanksystem ist, die eigentliche Datenbank anzulegen, also den Container. Er nimmt alle Tabellen, Ansichten usw. für die gesamte Datensammlung auf. Wenn Sie also von einer Datenbank sprechen, dann beziehen Sie sich auf eine Datensammlung und nicht auf einzelne Datenfragmente. Um eine Datenbank anzulegen, brauchen Sie einen installierten SQL-Server und die Datenbank-Befehlszeile. Weitere Informationen darüber, wie Sie an diese Ausgangsposition gelangen, entnehmen Sie bitte der Dokumentation Ihres Servers. Wenn Sie ein visuell orientiertes Werkzeug verwenden, sollten Sie die äquivalenten Funktionen zu den folgenden Befehlen suchen: create database ;

Weil SQL-Anweisungen häufig sehr groß werden, erlauben die meisten Systeme, dass sie über mehrere Zeilen geschrieben werden und verwenden ein Abschlusszeichen, an dem sie erkennen, dass die Anweisung fertig zur Ausführung ist. Bei MySQL, das für die Beispiele in diesem Buch häufig verwendet wird, ist das Semikolon dieses Abschlusszeichen. Der Befehl create erzeugt eine völlig leere Datenbank. Nachdem eine Datenbank angelegt wurde, müssen Sie Ihrem Datenbankserver möglicherweise explizit mitteilen, dass Sie Ihre Datenbank benutzen wollen. Wie Sie das machen, ist von Ihrem System abhängig, etwa wie folgt: use ;

Wir beginnen mit einer einfachen Angestellten-Datenbank: mysql> create database employee; Query OK, 1 row affected (0.07 sec) mysql> use employee; Database changed mysql>

Um die soeben definierte Datenbank zu löschen, verwenden Sie den Befehl drop: drop database ;

Beachten Sie auch hier, dass die Datenbank die Hülle für alle Tabellen ist, die Daten enthalten können. Wenn Sie mit dem Befehl drop eine Datenbank löschen, löschen Sie damit auch alle darin enthaltenen Tabellen, Ansichten und anderen Strukturen, ebenso wie die darin enthaltenen Daten. Seien Sie also vorsichtig!

413

Komplexe Datenbankabfragen

Nachdem eine Datenbank angelegt wurde, müssen Sie die internen Tabellen einrichten, um die Daten aufzunehmen, die Sie speichern möchten. Zum Anlegen einer Tabelle verwenden Sie ebenfalls den Befehl create, um dem System mitzuteilen, welche Art von Daten Sie speichern wollen – wenn überhaupt. create table (<spalten...>, <spalten...>)

Angenommen, wir legen Tabellen für die Angestellten-Datenbank an, die eine Liste der Angestellten und eine Liste der Jobnamen enthalten: create table tblemployee ( employeeID int not null, titleID int, age int, salary float, firstname varchar(50), lastname varchar(50), primary key (employeeID) ); create table tbljobtitle ( titleID int not null, description varchar(250), lowersal float, uppersal float, primary key (titleID) );

Die Felder uppersal und lowersal geben Informationen über das Höchst- und das Mindestgehalt für eine bestimmte Jobbeschreibung an. Die Syntax create table ist zwar ohne weitere Erklärung verständlich, aber die Bedeutung der Felder ist vielleicht weniger offensichtlich. Der erste Wert in einer Felddefinition ist der Name des Feldes, wie beispielsweise employeeID oder titleID. Der zweite Wert gibt den Datentyp für dieses Feld an, gefolgt von speziellen Modifizierern.

Datentypen Jetzt betrachten wir einige der gebräuchlichen Datentypen, denen Sie in Ihren UltraDevProjekten immer wieder begegnen werden: 쐽

int – Ganze Zahlen

쐽

char(#) – Enthält eine bestimmte Anzahl von Zeichen. Dieser Datentyp belegt immer denselben Speicherplatz, unabhängig davon, wie viele Zeichen tatsächlich gespeichert werden.

414

Datenbanken und Tabellen anlegen

쐽

varchar(#) – Enthält eine variable Anzahl von Zeichen bis zu einer bestimmten Obergrenze. Anders als der Datentyp char belegt varchar nur so viel Speicherplatz, wie für die Daten wirklich benötigt wird.

쐽

float – Fließkommazahlen (oder Zahlen mit Dezimalstellen). Wird in der Regel für die Darstellung von Geldwerten oder die Ergebnisse von Fließkommaberechnungen verwendet.

쐽

data – Ganz einfach: Speichert das Datum. In einigen Datenbanksystemen stehen noch sehr viel mehr Datentypen zur Verfügung. Beispielsweise werden unter dem Namen tinyint sehr kleine ganze Zahlen unterstützt, oder es gibt Felder des Datentyps datetime, die das Datum und die Zeit speichern. Wenn Sie bereits mit Datenbanken gearbeitet haben, wollen Sie möglicherweise binäre Felder verwenden, um binäre Informationen – wie beispielsweise Fotos – in eine Datenbank einzubetten. Leider ist das in UltraDev momentan nicht möglich. Sie können jedoch die Namen von binären Dateien (wie beispielsweise Bilddateien) speichern und dann in UltraDev auf diese Dateien verweisen.

Neben den Felddefinitionen gibt es noch zwei Informationsabschnitte. Die erste Information ist das Modifizierer-Attribut not null. Durch das Anfügen von not null am Ende eines Feldnamens wird dem Datenbanksystem mitgeteilt, dass das Feld keinen Null-Wert enthalten darf, d.h., es muss irgendeine Information enthalten. Das ist nicht dasselbe wie eine leere Zeichenkette (»«), wobei es sich ja um Information handelt. Ein null-Wert bedeutet das völlige Fehlen von Daten. Die zweite Information für die Felddeklaration ist der Primärschlüssel. Wie Sie in Kapitel 6 erfahren haben, wird ein Primärschlüssel verwendet, um einen Informationsabschnitt in einer Tabelle eindeutig zu identifizieren. Dieses Feld (bzw. diese Felder) muss offensichtlich Daten enthalten, deshalb wird es in der Regel in der zugehörigen Tabellendefinition als not null deklariert. Viele Datenbanksysteme setzen voraus, dass alle im Primärschlüssel verwendeten Felder implizit als not null definiert sind. MySQL folgt diesem Ansatz nicht und erzwingt, den Primärschlüsselfeldern not null hinzuzufügen. Um Kompatibilität zwischen verschiedenen Datenbanksystemen zu bewahren, sollten Sie not null in Ihre Tabellendefinitionen aufnehmen. Ähnlich dem Befehl zum Löschen von Datenbanken verwenden Sie den folgenden Befehl, um eine Tabelle vollständig aus einer Datenbank zu entfernen: drop table

415

Komplexe Datenbankabfragen

Damit werden die Tabelle und alle darin enthaltenen Informationen aus der Datenbank gelöscht. Wir haben noch keine Daten in die Tabellen eingetragen – wenn Sie möchten, probieren Sie also den drop-Befehl jetzt aus.

12.4 Daten eintragen/ändern Die Eingabe von Daten in eine Datenbank ist relativ einfach – Sie verwenden dazu den Befehl insert. Es gibt zwei Möglichkeiten, Daten einzutragen – eine zum Einfügen eines partiellen Datensatzes und eine andere zum Einfügen eines fertigen Datensatzes in eine Tabelle: insert into [()] values <'wert1','wert2',...>)

Mit der ersten Variante des Befehls (d.h. mit Angabe einer Feldnamenliste) können Sie eine Liste mit durch Kommas voneinander getrennten Feldnamen und den zugehörigen Daten anlegen. Die zweite Variante setzt voraus, dass Sie alle Felder in einem Schritt ausfüllen und die Werte dabei in der Reihenfolge angeben, wie sie beim Anlegen der Tabelle definiert wurden. Die erste Form des INSERT-Befehls ist manchmal verwirrend, weil sie den Eindruck vermittelt, Sie könnten beliebige Daten zu beliebigen Zeitpunkten speichern. In der Realität müssen Sie natürlich die Regeln für den Eintrag von not null einhalten, die Sie beim Anlegen der Tabelle festgelegt haben. Darüber hinaus können Sie den INSERT-Befehl nicht mit zusätzlichen Feldnamen aufrufen, um Informationen zu ergänzen, die Sie beim ersten Mal nicht angegeben haben. Dazu müssen Sie entweder den partiellen Datensatz löschen und ihn mit den zusätzlichen Informationen neu anlegen, oder die Feldwerte mithilfe des UPDATE-Befehls ändern. Versuchen Sie jetzt, einige Datensätze in die beiden zuvor erstellten Tabellen einzufügen: insert insert insert insert insert insert insert insert insert insert

416

into into into into into into into into into into

tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee

values values values values values values values values values values

('1','2','35','24000.75','Maddy','Dogg'); ('2','4','21','1105.25','Peter','Paul'); ('3','2','22','10812.90','Mary','Ann'); ('4','3','68','300000.92','John','Ray'); ('5','3','52','150321.00','Klaus','Meine'); ('6','4','52','1000.00','Herman','Rarebell'); ('7','1','50','128312.92','Steve','Jobs'); ('8','3','27','200000.55','Robyn','Ness'); ('9','3','28','300001.19','Anne','Groves'); ('10','4','23','2435.12','Julie','Vujevich');

Daten eintragen/ändern

insert insert insert insert

into into into into

tbljobtitle tbljobtitle tbljobtitle tbljobtitle

values values values values

(1,'President/CEO','100000.00','250000.00'); (2,'Manager','10000.00','25000.00'); (3,'Programmer','300000.00','350000.00'); (4,'Designer','1000.00','5000.00');

Diese Daten tragen 10 Angestellte in die Angestellten-Datenbank ein und ordnen ihnen eine von vier Berufsbezeichnungen für ihre Position im Unternehmen zu. Später werden wir betrachten, wie wir gleichzeitig Daten aus beiden Tabellen abrufen. Eine erweiterte Funktion des INSERT-Befehls ist die Verwendung einer selectAnweisung (eine Abfrage), die den Teil values (<wert1...>) des INSERTBefehls ersetzt. Auf diese Weise können Sie Daten, die aus anderen Tabellen abgefragt werden, direkt in eine andere Tabelle einfügen. Weitere Informationen darüber finden Sie im Abschnitt über die select-Syntax. Nachdem Sie Daten in Ihr System eingetragen haben, können Sie sie mithilfe von zwei Befehlen ändern: update und delete.

Daten aktualisieren update macht genau das, was sein Name ausdrückt – es aktualisiert existierende Datensätze in der SQL-Datenbank. Das Format eines update-Befehls ist einfach und dennoch leis-

tungsfähig: update SET =, =,= [WHERE <suchausdruck>]

Für update müssen Sie einen Tabellennamen sowie die Namen der zu aktualisieren Felder und ihre neuen Werte angeben. Beispielsweise handelt es sich bei der folgenden Anweisung um eine partielle Aktualisierung, wobei in der Angestellten-Tabelle nur der Inhalt der Felder für den Nachnamen und das Alter geändert wird: update tblemployee set lastname='Rantherpeen',age='62'

Das ist ein Teil des update-Befehls, aber was fehlt? Es sollte offensichtlich sein, dass eine Möglichkeit fehlt, die Datensätze zu identifizieren, die aktualisiert werden sollen. Wenn Sie diesen Befehl auf dem Datenbankserver ausführen und dann die Ergebnisse anzeigen, sind Sie vielleicht überrascht: mysql> update tblemployee set lastname='Rantherpeen',age='62'; Query OK, 10 rows affected (0.13 sec) Rows matched: 10 Changed: 10 Warnings: 0 mysql> select * from tblemployee;

417

Komplexe Datenbankabfragen

+------------+---------+------+---------+-----------+-------------+ | employeeID | titleID | age | salary | firstname | lastname | +------------+---------+------+---------+-----------+-------------+ | 1 | 2 | 62 | 24000.8 | Maddy | Rantherpeen | | 2 | 4 | 62 | 1105.25 | Peter | Rantherpeen | | 3 | 2 | 62 | 10812.9 | Mary | Rantherpeen | | 4 | 3 | 62 | 300001 | John | Rantherpeen | | 5 | 3 | 62 | 150321 | Klaus | Rantherpeen | | 6 | 4 | 62 | 1000 | Herman | Rantherpeen | | 7 | 1 | 62 | 128313 | Steve | Rantherpeen | | 8 | 3 | 62 | 200001 | Robyn | Rantherpeen | | 9 | 3 | 62 | 300001 | Anne | Rantherpeen | | 10 | 4 | 62 | 2435.12 | Julie | Rantherpeen | +------------+---------+------+---------+-----------+-------------+ 10 rows in set (0.00 sec)

Das war wirksam – aber vielleicht nicht wie ursprünglich vorgesehen. Wenn Sie das Beispiel nachvollzogen haben, fügen Sie die Daten noch einmal neu ein, um diese fehlgeschlagene Datenaktualisierung schnell verschwinden zu lassen. Daraus sollten Sie lernen, dass SQL beim Fehlen einer where-Klausel davon ausgeht, dass Sie alle Datensätze ansprechen wollen. Dasselbe gilt für die Anweisungen delete und select, die Sie in ein paar Minuten kennen lernen werden. Die nächste Frage ist, wie Sie den Suchausdruck für die where-Klausel formulieren. Der Suchausdruck muss eine richtige oder falsche Bedingung ergeben, die angibt, ob ein Datensatz ausgewählt werden soll oder nicht. Zum Anlegen eines Suchausdrucks verwenden Sie normalerweise die boolesche Algebra: = <wert> –

Wählt Datensätze abhängig von einem direkten Vergleich mit einem Wert aus.

> <wert> –

Wählt Datensätze aus, deren Feldwert größer als ein vorgegebener Wert ist.

< <wert> –

Wählt Datensätze aus, deren Feldwert kleiner als ein vorgegebener Wert ist.

>= <wert> – Wählt Datensätze aus, deren Feldwert größer oder gleich

einem vorgegebenen Wert ist. <= <wert> – Wählt Datensätze aus, deren Feldwert kleiner oder gleich

einem vorgegebenen Wert ist. LIKE <wert> –Wählt Datensätze entsprechend einem einfachen SQL-Mus-

terschema aus. Das Zeichen % steht für eine beliebige Anzahl an Zeichen, während _ für genau ein Zeichen steht. Weitere Informationen über die Mustersuche finden Sie in Ihrer Datenbankdokumentation.

418

Daten eintragen/ändern

Die folgenden grundlegenden Ausdrücke können für komplexere Suchen kombiniert werden: NOT –

Ergibt true, wenn der Ausdruck false ergibt.

OR – Ergibt true, wenn einer der Ausdrücke true ergibt. AND – Ergibt true, wenn beide Ausdrücke true ergeben. () –

Mithilfe von Klammern kombinieren Sie Ausdrücke oder erzwingen eine andere Auswertungsreihenfolge.

Um das Ganze noch komplizierter zu machen, können Sie eine Vielzahl mathematischer und Zeichenketten-Funktionen von SQL anwenden, um Feldwerte innerhalb von Ausdrücken zu manipulieren – alles dynamisch. Wenn Sie beispielsweise die Felder a und b haben, könnten Sie einen Ausdruck konstruieren, der prüft, ob die Gesamtsumme der Feldwerte größer als 10 ist, indem Sie "a+b > 10" als Suchausdruck angeben. Jedes Datenbanksystem unterstützt unterschiedliche Funktionalitätsebenen, lesen Sie deshalb die genauen Spezifikationen in Ihrer Datenbankdokumentation nach. Wir werden heute einige der gebräuchlicheren Funktionen verwenden, aber möglicherweise stehen Ihnen sehr viel mehr zur Verfügung. Jetzt zurück zur Aktualisierung der Angestelltentabelle. Sie wissen jetzt, wie man einen WHERE-Suchausdruck formuliert. Welches SQL braucht man, um den Datensatz für »Mary Ann« mit einem neuen Nachnamen und einem neuen Alter zu versehen? Damit sollte es funktionieren: update tblemployee set lastname='Rantherpeen',age='62' where firstname='Mary' and lastname='Ann';

Mit den Daten aus der Angestelltentabelle hätten Sie den Suchausdruck auch so formulieren können, dass nur das Feld lastname auf den Wert »Ann« überprüft wird. Aber wie Sie in Kapitel 6 erfahren haben, sollten Sie sich nie auf den Nachnamen einer Person als eindeutigen Bezeichner verlassen. In einer Datenbank mit einigen Hunderttausend Angestellten würden damit sicherlich mehrere Übereinstimmungen gefunden. Der hier verwendete update-Befehl ist aber auch nicht besser. Wenn Sie in einem Produktionssystem einen einzigen Datensatz (und nicht eine Gruppe von Datensätzen) aktualisieren wollen, sollten Sie Ihren Suchausdruck unbedingt auf dem Primärschlüssel für die Tabelle basieren lassen. Nachdem Sie den Datensatz eingefügt haben, kann er in der Tabelle tblemployee angezeigt werden: mysql> update tblemployee set lastname='Rantherpeen',age='62' where firstname='Mary' and lastname='Ann';

419

Komplexe Datenbankabfragen

Query OK, 1 row affected (0.00 sec) Rows matched: 1 Changed: 1 Warnings: 0 mysql> select * from tblemployee; +------------+---------+------+---------+-----------+-------------+ | employeeID | titleID | age | salary | firstname | lastname | +------------+---------+------+---------+-----------+-------------+ | 1 | 2 | 35 | 24000.8 | Maddy | Dogg | | 2 | 4 | 21 | 1105.25 | Peter | Paul | | 3 | 2 | 62 | 10812.9 | Mary | Rantherpeen | | 4 | 3 | 68 | 300001 | John | Ray | | 5 | 3 | 52 | 150321 | Klaus | Meine | | 6 | 4 | 52 | 1000 | Herman | Rarebell | | 7 | 1 | 50 | 128313 | Steve | Jobs | | 8 | 3 | 27 | 200001 | Robyn | Ness | | 9 | 3 | 28 | 300001 | Anne | Groves | | 10 | 4 | 23 | 2435.12 | Julie | Vujevich | +------------+---------+------+---------+-----------+-------------+ 10 rows in set (0.00 sec)

Jetzt ist Marys Nachname Rantherpeen und sie ist 62 Jahre alt. Wenn man in Betracht zieht, dass sie zuvor 22 war, wird sie von meinen Änderungen nicht sehr begeistert sein.

Daten löschen Weil Sie die Suchausdrücke bereits kennen gelernt haben, sollte der delete-Befehl kein Problem für Sie darstellen. Viele der SQL-Befehle verwenden zur Auswahl von Datensätzen aus Datenbanktabellen dieselben Suchausdrücke. Mit dem delete-Befehl löschen Sie einen ganzen Datensatz, nicht nur einzelne Felder daraus. Sie brauchen nur den Namen eines Feldes und einen Suchausdruck angeben, um die zu löschenden Datensätze auszuwählen. delete from [WHERE <suchausdruck>]

Ähnlich update kann delete ohne WHERE-Klausel und Suchausdruck ausgeführt werden. Wie Sie zuvor jedoch gesehen haben, werden damit alle Datensätze einer Tabelle ausgewählt. Wenn in dem delete-Befehl alle Datensätze ausgewählt werden, werden sie alle gelöscht! Seien Sie also vorsichtig bei der Definition Ihrer Suchausdrücke für das Löschen, sonst stellen Sie irgendwann fest, dass Sie unbeabsichtigt Datensätze gelöscht haben, die Sie niemals löschen wollten. Es ist sinnvoll, den Suchausdruck vorab mithilfe eines select-Ausdrucks zu überprüfen, um sich davon zu überzeugen, was gelöscht wird, bevor das Löschen tatsächlich ausgeführt wird.

420

Datenbanktabellen abfragen

Damit haben Sie ausreichend viele Grundlagen, um mit Datenbankstrukturen und -Informationen zu arbeiten. Die eigentliche Leistungsstärke von SQL wurde damit noch nicht deutlich, aber dazu kommen wir gleich.

12.5 Datenbanktabellen abfragen Nachdem Sie Informationen in Ihren Datenbanktabellen abgelegt haben, werden Sie lernen, diese Daten abzufragen – und hier kommt die eigentliche Leistungsstärke von SQL zu Tage. SQL-Datenbanken sind relational. Das bedeutet, Sie können mehrere Tabellen anlegen und die darin enthaltenen Informationen verknüpfen. In den Beispieldateien hat jeder Angestellte eine Titel-ID (titleID), mit deren Hilfe den Angestellten Jobnamen zugeordnet werden. Durch die Kombination von Informationen aus unterschiedlichen Tabellen kann man wirklich leistungsfähige Abfragen formulieren, die in einfachen Datenbanksystemen mit flacher Dateistruktur nicht möglich wären. Alle Abfragen verwenden den select-Befehl, um Datensätze aus einer Tabelle oder – abhängig vom Suchausdruck – auch aus mehreren Tabellen auszuwählen. Ein vereinfachtes Modell der select-Syntax sieht wie folgt aus: select ,,... from ,,... [where <suchausdruck>] [ORDER BY ASC|DESC]

Wenn Sie alle Felder in einer oder mehreren Tabellen auswählen wollen, brauchen Sie nicht alle Felder aufzulisten. Statt dessen geben Sie als Abkürzung für alle Felder den Stern an, *. Die einfachste Abfrage (die Sie bereits kennen gelernt haben) wählt alle Datensätze aus einer einzelnen Tabelle aus: select * from mysql> select * from tbljobtitle; +---------+---------------+----------+----------+ | titleID | description | lowersal | uppersal | +---------+---------------+----------+----------+ | 1 | President/CEO | 100000 | 250000 | | 2 | Manager | 10000 | 25000 | | 3 | Programmer | 300000 | 350000 | | 4 | Designer | 1000 | 5000 | +---------+---------------+----------+----------+ 4 rows in set (0.01 sec)

421

Komplexe Datenbankabfragen

Versuchen Sie, alle Datensätze aus allen Tabellen auszuwählen (select * from tblemployee,tbljobtitle); das Ergebnis ist interessant. Statt eine Tabelle nach der anderen anzuzeigen, wird eine Kombination aus beiden Tabellen ausgegeben (das so genannte kartesische Produkt) – jedem Datensatz aus tblemployee wird ein Datensatz aus tbljobtitle zugeordnet.

Informationen sortieren Um Informationen aus der Basis eines der Felder zu sortieren, verwenden Sie order by in Kombination mit einem Ausdruck (häufig ein oder mehrere durch Kommas voneinander getrennte Feldnamen) und asc für aufsteigende oder desc für absteigende Reihenfolge: mysql> select * from tbljobtitle order by uppersal desc; +---------+---------------+----------+----------+ | titleID | description | lowersal | uppersal | +---------+---------------+----------+----------+ | 3 | Programmer | 300000 | 350000 | | 1 | President/CEO | 100000 | 250000 | | 2 | Manager | 10000 | 25000 | | 4 | Designer | 1000 | 5000 | +---------+---------------+----------+----------+ 4 rows in set (0.00 sec)

Diese Abfrage ist gut geeignet, um alle Informationen aus einer bestimmten Tabelle zu ermitteln, aber das ist nicht besonders aufregend. Um SQL wirklich sinnvoll einzusetzen, müssen wir Abfragen formulieren, die Daten aus verschiedenen Tabellen kombinieren.

Tabellen verknüpfen Um die Funktionsweise einer komplexen Abfrage zu beobachten, müssen wir Informationen aus mehreren Tabellen verknüpfen. Das bedeutet, dass wir eine Beziehung zwischen den verschiedenen Tabellen einrichten und die Informationen auf sinnvolle Weise kombinieren. Angenommen, wir wollen eine Liste mit den Namen der verschiedenen Angestellten und ihrem Jobtitel anzeigen. Weil der Jobtitel in einer anderen Tabelle als die restlichen Informationen abgelegt ist, müssen wir die Tabellen verknüpfen. Wir verwenden dazu das Feld titelid, das in beiden Tabellen vorhanden ist, und formulieren damit eine Abfrage, die genau macht, was wir wünschen: select firstname,lastname,description from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid; mysql> select firstname,lastname,description from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid;

422

Datenbanktabellen abfragen

+-----------+-------------+---------------+ | firstname | lastname | description | +-----------+-------------+---------------+ | Steve | Jobs | President/CEO | | Maddy | Dogg | Manager | | Mary | Rantherpeen | Manager | | John | Ray | Programmer | | Klaus | Meine | Programmer | | Robyn | Ness | Programmer | | Anne | Groves | Programmer | | Peter | Paul | Designer | | Herman | Rarebell | Designer | | Julie | Vujevich | Designer | +-----------+-------------+---------------+ 10 rows in set (0.00 sec)

In diesem Beispiel sehen Sie, dass es zwei Möglichkeiten gibt, auf Felder zuzugreifen: im erweiterten Format als ., oder einfach über den Feldnamen. Falls Sie mehrere Tabellen kombinieren, die denselben Feldnamen enthalten, müssen Sie dieses Format verwenden, um sicherzustellen, dass der SQL-Server die Felder korrekt zuordnen kann. Sie sollten sich diese Schreibweise für Ihre Abfragen angewöhnen, sodass Sie nie in eine Situation geraten, wo die Struktur Ihrer Tabellen die Konsistenz Ihrer Abfragen zerstört. In dieser Abfrage wird die Beziehung zwischen den Tabellen definiert als WHERE tblemployee.titleid=tbljobtitle.titleid

Der Suchausdruck ist jedoch nicht auf eine einzige Beziehung begrenzt – er kann beliebig viele der anderen Ausdrücke enthalten, die wir heute vorgestellt haben. Wie wäre es beispielsweise mit einer Abfrage, die alle Datensätze auswählt, in denen das Gehalt (salary) größer 25000$ ist? Versuchen Sie das Folgende: select firstname,lastname,description from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid AND tblemployee.salary>25000.00; mysql> select firstname,lastname,description from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid AND tblemployee.salary>25000.00;

423

Komplexe Datenbankabfragen

+-----------+----------+---------------+ | firstname | lastname | description | +-----------+----------+---------------+ | Steve | Jobs | President/CEO | | John | Ray | Programmer | | Klaus | Meine | Programmer | | Robyn | Ness | Programmer | | Anne | Groves | Programmer | +-----------+----------+---------------+ 5 rows in set (0.01 sec)

Es funktioniert, aber die Gehälter werden nicht angezeigt. Dies liegt am Entwurf – und war beabsichtigt, um Ihnen zu zeigen, dass eine Abfrage vielleicht nur ein paar Felder zurückgibt, der eigentliche Suchausdruck aber keinen Zugriff auf die Feldinformation hat. Wir wollen irgendwohin – aber wir wollen dort nicht enden. Wir versuchen, alle Angestellten zu finden, die mindestens 75 % der Gehaltsobergrenze erreichen, d.h. tblemployee .salary>=(.75*tbljobtitle.uppersal). mysql> select firstname,lastname,salary,uppersal from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid AND tblemployee.salary>=(.75*tbljobtitle.uppersal); +-----------+----------+---------+----------+ | firstname | lastname | salary | uppersal | +-----------+----------+---------+----------+ | Maddy | Dogg | 24000.8 | 25000 | | John | Ray | 300001 | 350000 | | Anne | Groves | 300001 | 350000 | +-----------+----------+---------+----------+ 3 rows in set (0.00 sec)

Wie Sie sehen, ist es ganz einfach, in einer Abfrage ein bisschen Mathematik einzusetzen, um mehr als nur einen Vergleich auf Gleichheit auszuführen.

Berechnungen in einer Abfrage Das letzte Beispiel hat gezeigt, wie man einen mathematischen Ausdruck in eine Abfrage aufnimmt, aber damit haben wir noch keine Möglichkeit, wirklich anzuzeigen, wie das Ergebnis der Berechnung aussieht. Wenn wir mit 75 % einer Gehaltsobergrenze vergleichen, wäre es ganz praktisch zu wissen, wie viel 75 % sind. Wir können die Abfrage leicht abwandeln, indem wir eine SQL-Variable einführen, die das Berechnungsergebnis zurückgibt, so als handelte es sich dabei um ein Feld in der Datenbank. Dieses virtuelle Feld hat das folgende Format: as ''

424

Datenbanktabellen abfragen

Angenommen, wir wollen jetzt den Prozentsatz der Gehaltsobergrenze anzeigen, den die einzelnen Angestellten erhalten. Die Berechnung ist ganz einfach: ((tblemployee.salary/tbljobtitle.uppersal)*100)

Um dies mit den restlichen Informationen über die Angestellten in einer Tabelle anzuzeigen, könnten Sie die folgende Abfrage formulieren: select firstname,lastname,salary,uppersal, round((tblemployee.salary/tbljobtitle.uppersal)*100) as 'percent' from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid;

Beachten Sie, dass ich auch die Funktion round verwendet habe, die für die Gehaltsberechnung eingesetzt wird. Diese Funktion rundet das Ergebnis der Berechnung auf eine ganze Zahl. Sie müssen diese Funktion nicht verwenden, aber sie macht die Ergebnisse viel lesbarer. mysql> select firstname,lastname,salary,uppersal, round((tblemployee.salary/tbljobtitle.uppersal)*100) as 'percent' from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid; +-----------+-------------+---------+----------+---------+ | firstname | lastname | salary | uppersal | percent | +-----------+-------------+---------+----------+---------+ | Steve | Jobs | 128313 | 250000 | 51 | | Maddy | Dogg | 24000.8 | 25000 | 96 | | Mary | Rantherpeen | 10812.9 | 25000 | 43 | | John | Ray | 300001 | 350000 | 86 | | Klaus | Meine | 150321 | 350000 | 43 | | Robyn | Ness | 200001 | 350000 | 57 | | Anne | Groves | 300001 | 350000 | 86 | | Peter | Paul | 1105.25 | 5000 | 22 | | Herman | Rarebell | 1000 | 5000 | 20 | | Julie | Vujevich | 2435.12 | 5000 | 49 | +-----------+-------------+---------+----------+---------+ 10 rows in set (0.01 sec)

Damit haben Sie plötzlich direkt in einer Abfrage Zugriff auf Daten, die zuvor überhaupt nicht existierten! In UltraDev enthält die von dieser Abfrage erzeugte Datensatzgruppe ein Prozentfeld, das nicht einmal in den eigentlichen Datentabellen enthalten ist.

425

Komplexe Datenbankabfragen

Werkzeuge zur Summenbildung Auch die Summenbildung ist in Abfragen sehr sinnvoll. Mithilfe von Funktionen zur Summenbildung ermitteln Sie ganz einfach Gesamtsummen für numerische Spalten oder zählen die Anzahl der Datensätze eines bestimmten Typs. Einige dieser Funktionen werden wir hier betrachten: max() – Der Maximalwert in einem bestimmten Feld. Wird verwendet, um den höchsten Wert zu ermitteln. Wenn Sie max beispielsweise auf ein Gehaltsfeld in der Angestellten-

Tabelle anwenden, gibt es das höchste Gehalt in der Gruppe zurück. mysql> select round(max(salary)) from tblemployee; +--------------------+ | round(max(salary)) | +--------------------+ | 300001 | +--------------------+ 1 row in set (0.02 sec)

In mehreren Beispielen, so auch in diesem, habe ich auf das Ergebnis die Funktion round angewendet, um eine übersichtlichere Antwort anzuzeigen.

min() – Ermittelt den Minimalwert in einem bestimmten Feld. Dies ist das Gegenteil der Funktion max. mysql> select round(min(salary)) from tblemployee; +--------------------+ | round(min(salary)) | +--------------------+ | 1000 | +--------------------+ 1 row in set (0.02 sec)

sum() – Addiert die Werte eines bestimmten Feldes. Beispielsweise könnte diese Funktion verwendet werden, um die Gesamtsumme der gezahlten Gehälter zu ermitteln: mysql> select round(sum(salary)) from tblemployee; +--------------------+ | round(sum(salary)) | +--------------------+ | 1117991 | +--------------------+ 1 row in set (0.01 sec)

426

Datenbanktabellen abfragen

count() – Zählt die Anzahl der Auftreten eines Wertes in einem bestimmten Feld. mysql> select count(salary) from tblemployee; +---------------+ | count(salary) | +---------------+ | 10 | +---------------+ 1 row in set (0.03 sec)

Auf den ersten Blick erkennen Sie vielleicht nicht den Sinn dieser Funktionen. Schließlich handelt es sich dabei nur um einen Zähler für die Datensätze, die von einer Abfrage zurückgegeben werden, und UltraDev stellt diese Zahl auch bereit, ohne dass Sie dafür eine separate Abfrage ausführen müssen. Sie können diese Summierungswerkzeuge jedoch mit der Funktion group by kombinieren, um Daten in Gruppen einzuteilen und dafür Summen zu bilden. Angenommen, wir wollen eine Liste erstellen, die Auskunft darüber gibt, wie viele Leute innerhalb der einzelnen Jobklassifikationen arbeiten. Zunächst würden Sie dafür vielleicht eine Abfrage wie die folgende erstellen: select description,count(tblemployee.titleID) as 'total_employed' from tbljobtitle,tblemployee where tbljobtitle.titleID=tblemployee.titleID

Wir hoffen, dass die beiden Tabellen damit verknüpft werden und auch die Spalte total_employed bereitgestellt wird, die auf dem Zähler (count) des Feldes titleID in der Tabelle tblemployee basiert. Leider hat der Datenbankserver keine Möglichkeit zu erkennen, wie er die verschiedenen Datensätze gruppieren kann, um sie zu zählen – also wird die Abfrage fehlschlagen. In MySQL erhalten Sie dafür eine Antwort wie beispielsweise ERROR 1140: Mixing of GROUP columns (MIN(),MAX(),COUNT()...) with no GROUP columns is illegal if there is no GROUP BY clause

Um dies zu vermeiden, müssen Sie eine group by-Klausel in die Abfrage einführen, die die zu gruppierenden Felder auflistet – in diesem Fall tblemployee.titleID. mysql> select description,count(tblemployee.titleID) as 'total_employed' from tbljobtitle,tblemployee where tbljobtitle.titleID=tblemployee.titleID group by (tbljobtitle.titleID);

427

Komplexe Datenbankabfragen

+---------------+----------------+ | description | total_employed | +---------------+----------------+ | President/CEO | 1 | | Manager | 2 | | Programmer | 4 | | Designer | 3 | +---------------+----------------+ 4 rows in set (0.03 sec)

Daraus erhalten wir wie von Zauberhand eine Tabelle aller Jobbezeichnungen, gefolgt von der Anzahl der Angestellten innerhalb der einzelnen Klassifikationen.

12.6 Andere komplexe Techniken Es gibt unzählige Bücher über SQL und seine Befehle. Diese Ausführlichkeit ist hier natürlich nicht möglich. Unser heutiges Ziel ist, Ihnen ausreichend viel Hintergrundwissen zu verschaffen, damit Sie Abfragen entwickeln und Ihrer Applikation eine komplexe Funktionalität zu geben, ohne Ihren eingebetteten Code manuell bearbeiten zu müssen. Bevor Sie erfahren, wie sich all dies in die UltraDev-Umgebung eingliedert, wollen wir einen Blick auf die weiteren Wunder der SQL-Welt werfen, die Sie noch erwarten. Dies sind einige der Funktionen, an denen Sie interessiert sein könnten, die aber momentan von MySQL nicht unterstützt werden. Sie sind zwar praktisch, aber normalerweise gibt es Lösungen, die dieselbe Funktionalität realisieren, ohne dass man auf ein kommerzielles (und teures) Datenbanksystem umsteigen muss.

Ansichten Wie bereits erwähnt, sind Ansichten im Wesentlichen virtuelle Tabellen, die auf Abfragen basieren. Nachdem eine Ansicht erstellt wurde, greifen Sie darauf wie auf eine Tabelle zu. Die Syntax zum Anlegen einer Ansicht ist einfach, aber Sie müssen dafür verstehen, wie man komplexe Abfragen entwickelt: create view [,,...] as <select-anweisung>

Die Feldnamen können angegeben werden, um neue Namen für bereits existierende Felder einzuführen. Werden sie weggelassen, übernimmt die Ansicht die Felder der existierenden Tabellen. Wie Sie später in diesem Buch noch sehen werden, hat UltraDev Probleme, auf identisch benannte Felder zuzugreifen, deshalb sollten Sie in diesem Fall auf Ansichten zurückgreifen, wenn Ihr Datenbanksystem diese unterstützt.

428

Andere komplexe Techniken

Wie Datenbanken und Tabellen löschen Sie auch Ansichten mit dem Befehl drop: drop view

Falls Sie an einem System interessiert sind, das Ansichten unterstützt, informieren Sie sich über PostgreSQL (http://www.pgsql.com/) oder eine kommerzielle Lösung wie beispielsweise Oracle oder SQL Server von Microsoft.

Gespeicherte Prozeduren Gespeicherte Prozeduren ermöglichen Ihnen, Applikationslogik direkt innerhalb Ihres Datenbankservers zu schreiben und sie als Abfragen auszuführen. Die Verwendung gespeicherter Prozeduren weist Vor- und Nachteile auf, und überraschenderweise sind sie austauschbar. Die meisten Datenbankserver ermöglichen Ihnen, mithilfe von SQL oder einer anderen Sprache gespeicherte Prozeduren zu schreiben. SQL eignet sich nicht zur Programmierung und kann nur genutzt werden, um Funktionen auszuführen, die auch in einer Abfrage ausgeführt werden können. Die eigentliche Leistung entsteht also dadurch, dass man die Prozeduren in der dem Datenbankserver eigenen Sprache schreibt. Weil diese Sprachen im Allgemeinen serverspezifisch sind, sind sie jedoch leider nicht unbedingt auf andere Systeme übertragbar. Ihr Code kann damit nur auf der SQL-Serverplattform ausgeführt werden, auf der er entwickelt wurde. Der Vorteil gespeicherter Prozeduren ist, dass es damit größtenteils überflüssig wird, benutzerdefinierten eingebetteten Code auf Ihren Webseiten bereitzustellen, um die Applikationslogik zu verarbeiten. Das bedeutet, wenn Sie Ihre Web-Applikation unter Verwendung gespeicherter Prozeduren entwickeln, können Sie sie auf jeder Server-Plattform (ASP, JSP usw.) unter Verwendung derselben Programmiertechniken ausführen, solange Sie dieselbe SQL-Serverplattform verwenden. Wie Sie sehen, können gespeicherte Prozeduren die Plattformabhängigkeit sowohl erhöhen als auch verringern. Welche Abhängigkeiten die wichtigeren sind, bleibt völlig Ihnen überlassen. In diesem Buch habe ich bei Bedarf den eingebetteten Servercode abgeändert – andernfalls hätte dieses Buch auch Datenbanksprachen zum Thema haben müssen. Ein sinnvoller Verwendungszweck gespeicherter Prozeduren ist die Verarbeitung sicherer Informationen. Bei der Implementierung von Routinen, für die ein sicherer Zugriff erforderlich ist, hält man die Applikationslogik am besten vom Webbrowser getrennt. Statt beispielsweise die Information für die Kreditkartenverarbeitung in ein Active-X-Steuerelement auf Ihrer Webseite einzubetten, ist es viel besser, sie durch eine gespeicherte Prozedur in einer Datenbank verarbeiten zu lassen.

429

Komplexe Datenbankabfragen

Unterabfragen Eine interessante Funktion von SQL (auf einigen Servern, nicht jedoch in MySQL) ist die Möglichkeit, select-Anweisungen in andere Anweisungen einzubetten. Beispielsweise haben Sie bereits gesehen, wie man das geringste Gehalt aus der Angestellten-Tabelle ermittelt: mysql> select min(salary) from tblemployee; +--------------------+ | min(salary) | +--------------------+ | 1000 | +--------------------+ 1 row in set (0.02 sec)

Nachdem Sie dieses geringste Gehalt ermittelt haben, sind Sie leider immer noch eine Abfrage davon entfernt, wer der arme Kerl ist: select * from tblemployee where salary='1000';

Mithilfe einer Unterabfrage formulieren Sie die Abfragen neu: select * from tblemployee where salary=(select min(salary) from tblemployee);

Die innere Abfrage wird als Erstes ausgeführt und in der übergeordneten Abfrage verwendet. Sie können die Abfragen über mehrere Ebenen einbetten, die jeweils Ergebnisse an die ihnen übergeordneten Ebenen zurückgeben. Die Komplexität dieser Abfragen bleibt völlig Ihnen überlassen. Unterabfragen sind mit Joins zu vergleichen, bieten aber die Möglichkeit, in einem Schritt zu erledigen, wofür andernfalls mehrere Schritte erforderlich wären.

12.7 Komplexe Abfragen und UltraDev Was genau sind komplexe Abfragen und wie führt man sie in UltraDev aus? Die Antwort auf die erste Frage ist einfach – alles, woran mehr als eine Tabelle beteiligt ist, ist in UltraDev eine komplexe Abfrage. Der einfache Abfragedialog erlaubt nur die Anzeige aus den Feldern einer einzigen Tabelle. Die Oberfläche für die Eingabe einer komplexen Abfrage ist einfach. Und hier werden Sie es vermutlich bequemer finden, das SQL manuell einzugeben, statt durch Zeigen und Klicken. Öffnen Sie UltraDev und eine Verbindung zu einer aktiven Datenbank, und fügen Sie dann Ihrem Dokument eine Datensatzgruppe hinzu:

430

Komplexe Abfragen und UltraDev

1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+) und wählen Sie DATENSATZGRUPPE (ABFRAGE). 3. Klicken Sie auf die Schaltfläche ERWEITERT, um den Dialog für die erweiterte Abfragekonfiguration anzuzeigen. Abbildung 12.2 zeigt den Dialog für die erweiterte Abfragekonfiguration.

Abbildung 12.2: Erweiterte Abfragen sind in UltraDev definiert als alles, wofür mehrere Tabellen oder spezielle Datenbankfunktionen benötigt werden.

Wenn Sie sich Schreibarbeit ersparen wollen, können Sie der Datenbankabfrage im Bereich DATENBANKELEMENTE Objekte hinzufügen. Es gibt drei Komponenten, mit denen Sie arbeiten können: 쐽

Tabellen

쐽

Ansichten

쐽

Gespeicherte Prozeduren

Jede davon kann erweitert werden, indem Sie links auf das Pluszeichen klicken, um die darunter abgelegten Elemente anzuzeigen. Beispielsweise enthalten die Kategorien TABELLEN und ANSICHTEN alle Tabellen und Ansichten der aktuellen Verbindung. GESPEICHERTE PROZEDUREN enthalten alle verfügbaren gespeicherten Prozeduren. Jede dieser Kategorien kann geöffnet werden, um zusätzliche Datenbankinformationen anzuzeigen, wie beispielsweise einzelne Felder.

431

Komplexe Datenbankabfragen

Um diese Elemente in eine Abfrage aufzunehmen, verwenden Sie die drei Schaltflächen rechts im Bereich DATENBANKELEMENTE. Durch Drücken einer dieser Schaltflächen fügen die Elemente das entsprechende SQL in das Abfragefenster ein, wenn die geeigneten Daten in der Datenbank ausgewählt sind. Jede der Schaltflächen kann für einen bestimmten Typ von Datenbankelementen verwendet werden: 쐽

SELECT – Fügt eine Tabelle, Ansicht, Spalte (Feldname) oder Prozedur in den Codeabschnitt SELECT oder FROM ein.

쐽

WHERE – Fügt einen Feldnamen in die WHERE-Klausel des SQL ein.

쐽

ORDER BY – Fügt einen Feldnamen in die ORDER BY-Klausel der Abfrage ein.

Wie Sie sehen, ist das nicht gerade das Niveau der Weltraumforschung. Der Abfrage-Editor ist auf die Entwicklung einer grundlegenden SQL-Abfrage beschränkt, die Sie manuell einrichten müssen. Wie ich bereits erwähnt habe, halte ich es für einfacher, das SQL direkt in die Applikation einzugeben, statt sich innerhalb der Anzeige mit den Datenbankelementen und den Schaltflächen SELECT, WHERE und ORDER BY einen Weg zu klicken.

12.8 Zusammenfassung In diesem Kapitel haben Sie erfahren, wie man Datenbanken, Tabellen und Abfragen in SQL einrichtet und wie man sie direkt in UltraDev eingibt, um ein sehr viel leistungsfähigeres System zu gestalten, als es mit den einfachen Abfragen möglich ist. SQL ist eine sehr flexible Sprache für relationale Datenbanken, die erlaubt, mit Daten so zu arbeiten, wie es in anderen Systemen nicht möglich ist. Die grundlegende Syntax ist extrem einfach zu verstehen und erlaubt sogar dem erfahrensten Programmierer, komplexe relationale Systeme zu entwickeln. MySQL bietet keine Unterstützung einiger der komplexeren Funktionsmerkmale von SQL, aber es ist ausreichend funktional für viele kleine bis mittelgroße Websites. Alle Projekte in diesem Buch wurden mit MySQL implementiert. Weitere Informationen über MySQL finden Sie auch in Anhang C im Schnellüberblick über die Funktionen.

432

Fragen und Antworten

12.9 Fragen und Antworten F

Wird MySQL irgendwann Ansichten und Unterabfragen unterstützen? A

F

Wie kann ich in SQL Datumswerte vergleichen? A

F

Sie verwenden dazu dieselben Vergleichsoperatoren wie für andere Datentypen (=, <, > usw.). Der SQL-Server übernimmt die eigentliche Arbeit für Sie.

Können mehr als zwei Tabellen verknüpft werden? A

F

Vielleicht. Beide Funktionen befinden sich auf der Wunschliste für die Software.

Natürlich. Ich habe die Beispiele auf eine einzige Tabellenverknüpfung beschränkt, weil nur beschränkt viel Platz zur Verfügung stand. Sie können in SQL auch ganz einfach drei, vier oder mehr Tabellen verknüpfen.

Kann ich Daten in einer Ansicht aktualisieren? A

Das ist von den Funktionsmerkmalen Ihres Datenbankservers abhängig. Viele Server bieten die Möglichkeit, die Daten aus Ansichten zu aktualisiere und weisen diese Aktualisierungen sogar zurück, wenn die aktualisierten Daten nicht mehr in der Ansicht enthalten sind.

12.10 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 legen Sie in SQL eine Datenbank an? 2. Warum ist der Satz »Daten in die Datenbank einfügen« syntaktisch falsch? 3. Was bedeutet das Zeichen * in einer select-Anweisung? 4. Wie verweisen Sie auf einen bestimmten Feldnamen in einer bestimmten Tabelle? 5. Was passiert, wenn Sie bei der Auswahl von Datensätzen keine WHERE-Klausel angeben?

433

Komplexe Datenbankabfragen

Übung Weil dieses Kapitel versucht hat, Ihnen die Flexibilität und die Leistungsstärke von SQL zu demonstrieren, sollten Sie hier nur ein paar der heute vorgestellten Techniken ausprobieren. Versuchen Sie, eine eigenen Filmdatenbank anzulegen, indem Sie die folgenden Tabellen einrichten: film – Filmtitel, Jahr usw. filmtyp – Kategorien (Horror, Thriller, Komödie usw.) schauspieler – Schauspieler in den Filmen, die Sie auf Video oder DVD haben Das Schwierigste beim Aufbau dieser Datenbankstruktur (und der unterstützenden Abfragen) ist die Verknüpfung der Schauspielertabelle (actor) mit der Filmtabelle (movie). In Kapitel 6, »Einführung in dynamische Webanwendungen und Datenbankentwicklung«, finden Sie weitere Informationen zur Normalisierung. Hinweis: Sie brauchen eine zweite Tabelle, um eine Film-ID und eine Schauspieler-ID zu verknüpfen.

434

Komplexe Komponenten: Kataloge und Suchen

3 1

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: 쐽

Anlegen und Testen eines Katalog-Datenbanksystems

쐽

Anlegen einer komplexen Oberfläche, die neue Serververhalten ausnutzt

쐽

Artikel nach Schlüsselwörtern in den zugehörigen Beschreibungen finden

쐽

Navigieren zwischen Detailbildschirmen, ohne zu einem Suchfenster zurückkehren zu müssen

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 OnlineInformationsverzeichnisse sehr gebräuchlich: 쐽

436

Katalogsuchen – Sucht nach einem Schlüsselwort und gibt nur die in Frage kommenden Datensätze zurück.

Ein Produktkatalog

쐽

Verwandte Elemente – Sucht nach Elementen, die als verwandt mit einem bestimmten Element gekennzeichnet sind.

쐽

Thumbnails/expandierte Bilder – Thumbnail- und expandierte Bilder für alle Produkte.

쐽

Beschränkte Suchergebnisse – Begrenzt die Anzahl der zurückgegebenen Ergebnisse und erlaubt dem Benutzer, den Katalog zu durchsuchen.

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 SQLTabellensyntax) wird daran anschließend beschrieben.

Katalogsuche

Suchergebnisse

Artikeldetails

Artikeldetails

Artikeldetails

Artikeldetails

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.

437

Komplexe Komponenten: Kataloge und Suchen

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 MasterTabelle 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.

438

Ein Produktkatalog

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. Produktkategorien CatID* CatName

Produkttabelle prodID* catID prodName prodDesc prodPrice prodSmPic prodLgPic

Verwandte Artikel prodID1* prodID2*

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:

439

Komplexe Komponenten: Kataloge und Suchen

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 DatenbankBackend 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.

440

Ein Produktkatalog

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');

441

Komplexe Komponenten: Kataloge und Suchen

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.

442

Ein Produktkatalog

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:

443

Komplexe Komponenten: Kataloge und Suchen

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.

444

Ein Produktkatalog

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 ProduktID 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

445

Komplexe Komponenten: Kataloge und Suchen

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.

446

Entwurf des Katalogs

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.

447

Komplexe Komponenten: Kataloge und Suchen

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.

448

Entwurf des Katalogs

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 -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 DataAnzeigemodus, 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.

449

Komplexe Komponenten: Kataloge und Suchen

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.

450

Entwurf des Katalogs

Ö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%'

451

Komplexe Komponenten: Kataloge und Suchen

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.

452

Entwurf des Katalogs

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,

453

Komplexe Komponenten: Kataloge und Suchen

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: 쐽

ZUM ERSTEN DATENSATZ VERSCHIEBEN – Geht innerhalb der vorliegenden Datensatzgruppe zum ersten Datensatz.

쐽

ZUM VORHERIGEN DATENSATZ VERSCHIEBEN – Geht zum vorhergehenden Datensatz in der Datensatzgruppe. Falls sich die Datensatzgruppe innerhalb einer Gruppe von Datensatzgruppen befindet, führt dieses Verhalten zur vorherigen Gruppe.

쐽

ZUM NÄCHSTEN DATENSATZ VERSCHIEBEN – Geht zum nächsten Datensatz oder einer Gruppe von Datensätzen in einer Datensatzgruppe.

쐽

ZUM LETZTEN DATENSATZ VERSCHIEBEN – Geht zum letzten Datensatz in einer Datensatzgruppe.

쐽

ZU BESTIMMTEM DATENSATZ VERSCHIEBEN – Geht zu einem bestimmten Datensatz in der Datensatzgruppe. 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. Das einzige, was Sie im VERSCHIEBEN ZU-Verhalten wirklich festlegen sollten, ist die Datensatzgruppe, die Sie durchlaufen. Es ist alles ganz einfach.

454

Entwurf des Katalogs

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

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.

455

Komplexe Komponenten: Kataloge und Suchen

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.

456

Entwurf des Katalogs

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.

457

Komplexe Komponenten: Kataloge und Suchen

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.

458

Entwurf des Katalogs

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.

459

Komplexe Komponenten: Kataloge und Suchen

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.

460

Automatisieren der Navigationsleiste

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

461

Komplexe Komponenten: Kataloge und Suchen

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.

462

Zusammenfassung

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.

463

Komplexe Komponenten: Kataloge und Suchen

13.5 Fragen und Antworten F

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

F

Wie kann ich die Schaltflächen NÄCHSTER und VORHERIGER nutzen, um die gesamte Datenbank statt einer Untermenge zu durchlaufen? A

F

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.

Wofür braucht man die BEREICH ANZEIGEN-Verhalten, außer für die Navigation? A

464

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.

Warum haben wir oben nicht die Option ZU BESTIMMTEM DATENSATZ verschieben verwendet? A

F

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.

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.

Workshop

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.

465

Komplexe Komponenten: Benutzeranmeldungen

4 1

Komplexe Komponenten: Benutzeranmeldungen

Bisher fehlte immer irgend etwas. Sie haben erfahren, wie man interaktive Sites und verschiedene andere datenbankgestützte Sites erstellt, aber es gibt ein Thema, das noch nicht angesprochen wurde – Benutzeranmeldungen. Wie oft waren Sie schon auf einer Website und wurden aufgefordert, ein Benutzerprofil anzulegen oder sich anzumelden, bevor Sie irgendwelche Funktionen nutzen konnten? Die Möglichkeit festzustellen, um wen es sich bei einem Benutzer handelt, wenn er sich auf einer Website bewegt, ist unabdingbar, um wirklich personalisierte interaktive Dienste anzubieten. UltraDev stellt ein eigenes Authentifizierungssystem bereit, aber um besser zu verstehen, wie und warum es funktioniert, konzentriert sich dieses Kapitel darauf, ein ähnliches System manuell anzulegen. Heute geht es um die folgenden Themen: 쐽

Welche Anmeldesysteme sind wofür geeignet und warum brauchen Sie sie?

쐽

Einrichten einer grundlegenden Anmeldefunktionalität, basierend auf einer existierenden Benutzerdatenbank

쐽

Sicherheitsaspekte, die bei der Entwicklung von Websites berücksichtigt werden sollten

14.1 Anmeldesysteme Es gibt mehrere Möglichkeiten, Anmeldesysteme für eine Website zu verwalten – abhängig davon, welche Zielsetzungen Ihre Site verfolgt. Wenn Sie eine sehr sichere Site brauchen, die alle Benutzer beobachtet, brauchen Sie eine Sitzungsüberwachung. Andernfalls kommen Sie möglicherweise auch mit einer der weniger sicheren Methoden zurecht.

HTTP-Authentifizierung Mithilfe der grundlegenden Authentifizierungsfunktionen des HTTP-Protokolls können Sie einen einfachen Dialog für die Eingabe des Benutzernamens und eines Kennworts anzeigen und die Information für Ihre Website abfragen. Diese Prozedur verwendet jedoch den standardmäßig vom Browser definierten Authentifizierungsdialog und bietet keinerlei Flexibilität, die Oberfläche selbst zu gestalten. In der Regel können Sie diese Form der Authentifizierung mithilfe der grundlegenden Konfigurationswerkzeuge Ihres Web-Servers einrichten, ohne dass irgendeine Interaktion in UltraDev erforderlich wäre. Ich verwende diesen Ansatz jedoch nur selten als hauptsächliche Authentifizierung auf einer Website. Statt dessen wird sie häufig eingesetzt, um begrenzten Zugriff auf bestimmte Bereiche einer Website bereitzustellen, wie beispielsweise Werkzeuge für die Administration. Weil die Funktionalität der Authentifizierung auf Serverebene bereitgestellt werden kann, müssen Sie an Ihrem existierenden Code keinerlei

468

Anmeldesysteme

Änderungen vornehmen, damit sie funktioniert. Sie teilen dem Server einfach mit, welches Verzeichnis geschützt werden soll und welche Benutzername/Kennwort-Kombinationen Zugriff auf dieses Verzeichnis erhalten sollen.

Web-basierte Anmeldung Eine Web-basierte Anmeldung bietet die größte Kontrolle darüber, wie die Benutzer Ihre Site nutzen können. Durch die Bereitstellung eines HTML-basierten Anmeldebildschirms kann das System einen guten Benutzer von einem bösen Benutzer unterscheiden und ihm abhängig von seinem Status erlauben, weiter mit dem System zu arbeiten. Nehmen Sie beispielsweise an, Sie wollen eine Site anlegen, auf der mehrere Benutzer auf einen bestimmten Bereich zugreifen können, wobei das System jedoch nicht zu unterscheiden braucht, um wen es sich bei diesen Benutzern handelt – es muss nur überprüfen, ob sich diese Benutzer am System angemeldet haben. In diesem besonderen Fall muss nur ein Bildschirm bereitgestellt werden, der ungültige Anmeldungen zurückweist und zugelassenen Benutzern den Zugang erlaubt. Darüber hinaus muss jede folgende, privilegierte Seite ebenfalls Code beinhalten, der überprüft, ob sich ein Benutzer korrekt angemeldet hat. Andernfalls könnten nicht berechtigte Benutzer einfach eine URL hinter dem Anmeldebildschirm erraten und auf die zugehörige Seite zugreifen – unabhängig von der Existenz des Anmeldebildschirms. Bei der zweiten Methode, HTML-basierte Anmeldungen zu verarbeiten, werden die Benutzerinformationen wie bei der ersten Methode ausgewertet. Statt dann jedoch einfach die Information »Ja, diese Person besitzt die Zugriffsberechtigung« an andere Webseiten weiterzugeben, sendet der Server einen Bezeichner, der die Person, die sich durch die Webseite bewegt, eindeutig identifiziert. Auf diese Weise können Sie eine Website entwickeln, die um den Benutzer herum aufgebaut wird und sich an den Benutzer anpasst, statt von dem Benutzer zu verlangen, die Website bei jedem Zugriff für seine Bedürfnisse neu zu konfigurieren. Betrachten wir das Beispiel eines Kaufhauses, wo Sie unter Verwendung Ihrer Kreditkarte Artikel aus einem Online-Katalog bestellen können. Für mich ist express.com die Verkörperung dieses Kaufhauses – eine E-Commerce-Site, wo fast jede DVD der Welt auf Lager ist. Wenn ich meinen regelmäßigen Besuch auf der Seite absolviere, dann will ich nicht jedes Mal die Liefer- oder Rechnungsinformationen neu eingeben. Statt dessen soll sich das System merken, wer ich bin – sodass ich einkaufen kann, ohne erst meine Kreditkarte suchen und Formulare ausfüllen zu müssen. Das System, das von express.com und anderen Sites eingesetzt wird, ermöglicht mir, einen Benutzernamen und ein Kennwort anzugeben, die meine Kontoinformationen zu jedem Zeitpunkt identifizieren. Und das ist sehr viel praktischer, als die Information immer wieder aufs Neue eingeben zu müssen.

469

Komplexe Komponenten: Benutzeranmeldungen

Diese Methode zur Verwaltung von Anmeldungen ist zwar sehr leistungsfähig, aber leider auch sehr schwierig zu implementieren – man muss die Informationen über den Benutzer verfolgen, während er angemeldet ist. Wenn Sie einen einfachen »Merken Sie sich mich«Dienst anbieten, wie es ihn bei express.com gibt, dann müssen Sie sich nicht darum kümmern, wie der Benutzer sich zwischen den verschiedenen Seiten bewegt. Sie fordern einfach den Benutzernamen und das Kennwort an, ermitteln die zugehörige Information aus der Datenbank und zeigen sie auf dem nächsten Bildschirm an. Das Problem dabei ist, dass Sie häufig wollen, dass sich die Benutzer anmelden, sobald sie auf die Site gelangen. Auf diese Weise können Sie auf Informationen über die Benutzer zugreifen (und gegebenenfalls Informationen speichern), während sie sich durch Ihre Site bewegen. Die Frage lautet offensichtlich, wo hier anzufangen ist. Die Antwort ist ganz und gar nicht einfach. Die erste Variation eines Anmeldesystems ist extrem einfach. Von dort aus bauen wir auf diesem System auf, bis wir etwas haben, was fast überall funktioniert. Weil es zwei Arten anmeldungsbasierter Systeme (sicher und nicht sicher) gibt, tun wir unser Bestes, auf unseren Websites so sicher wie möglich zu sein. Auf Sites beispielsweise, die Informationen aus einer Datenbank laden können, wird die sensible Information nur im Bedarfsfall benutzt. Auf Seiten, die keine gesteigerte Sicherheit benötigen, sind die Anmeldetechniken lockerer. Darüber hinaus verwenden wir eine kleine »selbst gemachte« Authentifizierung, ebenso wie die Verhalten, die UltraDev für die Benutzerauthentifizierung bereitstellt. Machen Sie sich keine Gedanken – Sie werden es verstehen, wenn Sie es erst einmal probiert haben. Zunächst betrachten wir, wie ein Authentifizierungssystem manuell angelegt werden kann.

14.2 Das SQL Das SQL, das Sie für ein System zur Benutzerauthentifizierung benötigen, ist trivial. Sie legen Ihre grundlegenden Benutzerinformationen in einer Tabelle ab und speichern zusätzliche Informationen in einer separaten Tabelle. Wenn Sie diese Struktur verwenden, brauchen Sie die Benutzerauthentifizierung nur einmal einzurichten und können sie unverändert an jeder anderen Stelle verwenden. Fangen wir an. Welche Informationen brauchen Sie in Ihrer Tabelle für die Benutzerauthentifizierung? Nur ein paar wenige Dinge: 쐽

Benutzer-ID

쐽

Benutzername

쐽

Kennwort

470

Das SQL

Der Benutzername und das Kennwort müssen nicht weiter beschrieben werden. Die Benutzer-ID wird benötigt, um einen einfachen Schlüssel bereitzustellen, mit dem festgestellt werden kann, ob ein Datensatz eindeutig ist. Sie könnten natürlich auch Benutzername und Kennwort kombinieren, um einen Primärschlüssel daraus zu bilden, aber wie Sie wissen, kommt UltraDev mit dieser Information nicht gut zurecht. Eine Tabelle, die diese Authentifizierung unterstützt, könnte wie folgt aussehen: create table tblUser ( userID varchar(50) not null, username varchar(50), password varchar(50), primary key (userID) )

Diese Tabelle weist ein kleines Problem auf, aber sie funktioniert so, wie sie hier gezeigt ist. Wo also liegt das Problem? Das Problem ist die Sicherheit. Wie oft haben Sie schon gehört, dass die Sicherheit einer Website verletzt wurde und Tausende von Kreditkartennummern der Benutzer im Web offen abgerufen werden können? Die Tabelle könnte auch wie folgt aussehen: create table tblUser ( userID varchar(50) not null, username varchar(50), password varchar(50), creditcard varchar(50), primary key (userID) )

Das Einfügen eines Feldes für die Kreditkartennummer könnte schon ein Hinweis auf das Problem sein. Das Speichern sensibler Daten in einer Datenbank ist immer ein potenzielles Risiko. Offensichtlich braucht man kein Kreditkartenfeld in der Tabelle, aber das Speichern des Kennworts in der Tabelle ist fast genau dasselbe. Wenn das Kennwort des Benutzers als Klartext in der Datenbank abgelegt und die Datenbank geknackt wird, könnte die in diesem Datensatz abgelegte Information offengelegt werden. Diese Information muss geschützt werden. Wenn Sie je ein Unternehmen angerufen haben, um sich nach Ihrem Kennwort zu erkundigen, und man dort in der Lage war, es für Sie nachzuschlagen, sollte das für Sie ein Warnsignal sein! Informationen, die zu Ihrem unverschlüsselten Kennwort gespeichert werden sollen, sollten höchstens eine Formulierung sein, die Sie an Ihr Kennwort erinnern. Kennwörter sollten niemals als Klartext abgelegt werden, wenn eine Applikation sicher sein soll. Das Konto eines Benutzers könnte zwar ausspioniert werden, wenn sein Kennwort erraten wird, aber die Datenbank bleibt sicher, falls die gesamte Tabelle mit den Anmeldeinformationen versehentlich sichtbar gemacht wird.

471

Komplexe Komponenten: Benutzeranmeldungen

Wie wird das Kennwortfeld geschützt? Es gibt zwei Methoden: entweder über eine im Datenbanksystem eingebaute Funktion oder durch die Entwicklung einer gespeicherten Prozedur auf dem Datenbankserver. MySQL unterstützt eine spezielle Funktion, die die Codierung von Kennwörtern und anderen sensiblen Informationen übernimmt. Die Funktion password verschlüsselt alle ihr übergebenen Informationen in etwas, was von einem Benutzer nicht wieder entschlüsselt werden kann. Für eine Produktions-Website ist es wahrscheinlich am besten, eine kommerziell anerkannte Verschlüsselung für das Kennwort einzusetzen. Für unsere Zwecke ist die Funktion password jedoch auf alle Fälle ausreichend. Eine Frage, die Ihnen vielleicht die ganze Zeit schon im Kopf herumspukt, ist: »Wie um alles in der Welt soll man prüfen, ob das vom Benutzer eingegebene Kennwort korrekt ist, wenn das Feld, mit dem es verglichen werden soll, verschlüsselt ist?« Die Antwort ist einfach. Bevor das Kennwortfeld mit dem vom Benutzer eingegebenen Wert verglichen wird, müssen Sie den eingegebenen Wert ebenfalls verschlüsseln. Sind die beiden Werte gleich, ist das Kennwort korrekt. Das Einfügen von Datensätzen in MySQL unter Verwendung der Funktion password ist nur ein wenig schwieriger als andere Informationstypen einzufügen. Um beispielsweise einen Datensatz für mich in die Tabelle einzutragen, führe ich den folgenden Befehl aus: insert into tblUser values (password('jray'+'mypass'),'jray', password('mypass'));

Die Funktion password nimmt als Argument die zu verschlüsselnde Zeichenkette entgegen. Beachten Sie, dass die Benutzer-ID auf eine verschlüsselte Version aus Name und Kennwort des Benutzers gesetzt wird. Dabei handelt es sich lediglich um meine Methode, dieses Feld zu implementieren – Sie können selbstverständlich jede andere Technik verwenden, vorausgesetzt, sie ergibt einen eindeutigen Wert. Es gibt zwei Möglichkeiten, die Datenbank nach einem Benutzer abzufragen, wenn die ID auf der Verschlüsselung von Benutzername und Kennwort basiert: mysql> select * from tblUser where userID=password('jray'+'mypass'); +------------------+----------+------------------+ | userID | username | password | +------------------+----------+------------------+ | 606717756665bce6 | jray | 3c7d536348b7ba98 | +------------------+----------+------------------+ 1 row in set (0.00 sec)

Die Verwendung der Definition von userID zur Auswahl des Benutzerdatensatzes ist unter einer Bedingung akzeptabel – der Benutzer darf sein Kennwort niemals ändern. Wenn der

472

Eine einfache Anmeldung

Benutzer sein Kennwort ändern darf und später versucht, auf sein Konto zuzugreifen, ist das Ergebnis eine leere Menge, weil die ID sich während der Lebensdauer des Datensatzes nicht ändern darf. Selbst wenn dieser Ansatz attraktiv erscheint (es muss nur eine einzige Bedingung überprüft werden), stellt er nicht die korrekte Vorgehensweise dar. Die richtige Methode, einen Datensatz auszuwählen, ist ein Vergleich sowohl des Benutzernamens als auch des Kennworts mit den Werten in der Tabelle: mysql> select * from tblUser where username='jray' and password=password('mypass'); +------------------+----------+------------------+ | userID | username | password | +------------------+----------+------------------+ | 606717756665bce6 | jray | 3c7d536348b7ba98 | +------------------+----------+------------------+ 1 row in set (0.15 sec)

Und genau so werden wir die Informationen in der Tabelle im restlichen Kapitel überprüfen. In den weiteren Kapiteln dieses Buchs wird die Funktion password im Code nicht mehr verwendet, um die Kompatibilität zwischen Datenbanksystemen und das einfache Debugging sicherzustellen. Sie können die Funktion nach Bedarf einsetzen.

14.3 Eine einfache Anmeldung Füllen Sie Ihre Datenbank mit ein paar Benutzerinformationen. Sie brauchen für den Anfang nur ein paar wenige Datensätze: insert into tblUser values (password('jraymypass'), ➥'jray',password('mypass')); insert into tblUser values (password('jackdpass2'), ➥'jackd',password('pass2')); insert into tblUser values (password('robynpass3'), ➥'robyn',password('pass3')); insert into tblUser values (password('maddypass4'), ➥'jray',password('pass4'));

Jetzt starten Sie UltraDev und richten einen Anmeldebildschirm ein: 1. Legen Sie ein neues Projekt an. 2. Richten Sie eine Verbindung zu der neuen Anmeldedatenbank (Login) ein.

473

Komplexe Komponenten: Benutzeranmeldungen

3. Erstellen Sie eine Standardanmeldeseite mit einem Formular für Benutzername und Kennwort. Abbildung 14.1 zeigt eine einfache Anmeldeseite mit zwei Feldern und einer SENDENSchaltfläche. Ich habe die beiden Felder als BENUTZERNAME und KENNWORT bezeichnet – Sie erkennen damit sicher, welchen Zweck sie erfüllen.

Abbildung 14.1: Ein einfacher Anmeldebildschirm

Verwenden Sie für das Kennwortfeld unbedingt den Feldtyp password. Damit wird keine echte Serversicherheit unterstützt, aber es dient zwei Aufgaben. Erstens schützt es das Kennwort bei der Eingabe. Zweitens beruhigen Sie die Benutzer damit. Durch Verwendung des password-Stils für ein Feld erkennt der Benutzer, dass Sie die Daten als sensibel betrachten. Mein Bildschirm wird durch den folgenden Code realisiert – wenn Sie möchten, übernehmen Sie ihn einfach: 1 2 3 4 7 11 14 15

➥ 5 Benutzername: 6

8 9 Kennwort: 10

12 13

16

474

Eine einfache Anmeldung

Die wesentlichen Inhalte des Formulars sehen Sie in den Zeilen 5 und 9. Dort werden der Benutzername und das Kennwort abgefragt. Das restliche Formular variiert abhängig davon, wie Sie Ihren Bildschirm gestaltet haben. Aber wie melden Sie sich irgendwo an? Es ist gut und schön, ein Anmeldeformular zu haben, aber es muss auch irgendetwas tun! Das von Ihnen angelegte Formular muss seine Daten zur Verarbeitung an eine Seite weitergeben. Für eine Änderung gibt es kein Serververhalten auf dieser Seite – sie soll einfach nur Daten an einen anderen Bereich des Programms weitergeben. Richten Sie Ihr Formular so ein, dass seine Aktion eine zweite Seite ist, verify.asp.

Verarbeitung der Anmeldeinformation Legen Sie Ihre neue Seite an, verify.asp (oder was Sie für Ihr Servermodell brauchen). In Kapitel 13 haben Sie erfahren, wie mit der Methode BEREICH ANZEIGEN eine Funktionalität implementiert werden kann, die weit über die Anzeige der Schaltflächen NÄCHSTER und VORHERIGER hinausgeht. Und genau diese werden wir heute nutzen, um die Anmeldung zu verarbeiten. Aus der gestrigen Sitzung wissen Sie, dass der Schlüssel zur Verwendung des Verhaltens BEREICH ANZEIGEN die Definition einer Datensatzgruppe ist und dass das Verhalten von den Ergebnissen der Datensatzgruppenabfrage abhängig gemacht wird. Um eine Datensatzgruppe für die Seite vorzubereiten, gehen Sie wie folgt vor: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+) und wählen Sie DATENSATZGRUPPE (ABFRAGE) aus. 3. Gehen Sie in den erweiterten Modus, indem Sie auf die Schaltfläche ERWEITERT klicken. 4. Fügen Sie die Variable varUser ein und verwenden Sie den Laufzeitwert 'Request("username")'. 5. Fügen Sie die Variable varPass ein und verwenden Sie den Laufzeitwert 'Request("password")'. 6. Anschließend fügen Sie die folgende SQL-Anweisung in das Dokument ein: SELECT * FROM tblUser WHERE username='varUser' AND password=password('varPass')

Wenn Sie Standardwerte für die beiden Variablen setzen, klicken Sie auf die Schaltfläche TESTEN, um zu überprüfen, ob die Abfrage funktioniert.

475

Komplexe Komponenten: Benutzeranmeldungen

Die endgültige Konfiguration sollte etwa aussehen wie in Abbildung 14.2 gezeigt. Und jetzt zum unterhaltsamen Teil – wir prüfen, ob die Anmeldeinformation korrekt war. Sie können sich vielleicht schon denken, wie wir das machen. Die Datensatzgruppe wurde so definiert, dass sie einen Datensatz ermittelt, der mit einem Benutzernamen und einem Kennwort übereinstimmt. Sind Benutzername oder Kennwort fehlerhaft, ist die Datensatzmenge leer.

Abbildung 14.2: Definieren Sie Ihre Abfrage für die Überprüfung der Anmeldung wie hier gezeigt.

Abbildung 14.3: Richten Sie innerhalb eines einzigen Formulars die Meldungen für die erfolgreiche und für die nicht erfolgreiche Anmeldung ein.

476

Eine einfache Anmeldung

Um Ihr Dokument verify.asp so einzurichten, dass es Ihnen mitteilt, ob eine Anmeldung gültig war, müssen Sie den Inhalt für Ihre gültigen und ungültigen Anmeldungen definieren. Sie definieren diese Inhaltsbereiche direkt in dem einzigen Überprüfungsdokument. Eine einfache Methode wäre, die beiden verschiedenen Szenarios in zwei Tabellen einzurichten. Abbildung 14.3 beispielsweise zeigt sowohl eine erfolgreiche als auch eine nicht erfolgreiche Anmeldung. Nachdem Sie jetzt zwei Inhaltsbereiche auf Ihrem Bildschirm haben, richten Sie die Seite so ein, dass nur der jeweils zutreffende Bereich angezeigt wird, wenn der Benutzer versucht sich anzumelden. Das ist ganz einfach, indem Sie das Verhalten BEREICH ANZEIGEN abhängig vom Status der Datensatzgruppe festlegen. Um die erfolgreiche Anmeldung anzuzeigen, gehen Sie wie folgt vor: 1. Wählen Sie die Tabelle aus, die die Erfolgsmeldung enthält. 2. Öffnen Sie die Palette SERVERVERHALTEN. 3. Klicken Sie auf das Plussymbol (+) und wählen Sie im Untermenü BEREICH ANZEIGEN die Option BEREICH ZEIGEN, WENN DATENSATZGRUPPE NICHT LEER IST. 4. Schließen Sie die zu überprüfende Datensatzgruppe. 5. Klicken Sie auf OK, nachdem Sie fertig sind. Abbildung 14.4 zeigt das Verhalten BEREICH ANZEIGEN. Abbildung 14.4: Die Meldung zur erfolgreichen Anmeldung soll nur dann angezeigt werden, wenn die Datensatzgruppe nicht leer ist.

Analog konfigurieren Sie die Meldung für die nicht erfolgreiche Anmeldung so, dass sie angezeigt wird, wenn die Datensatzgruppe leer ist. Weil die Datensatzgruppe nicht gleichzeitig leer und nicht leer sein kann, wird jeweils nur die geeignete Meldung angezeigt.

Testen Nun testen Sie das Anmeldesystem. Übertragen Sie den Anmeldungs- und den Überprüfungsbildschirm auf Ihren Applikationsserver und testen Sie sie. Dazu überprüfen Sie alle Eingabemöglichkeiten, die in dem Formular auftreten können:

477

Komplexe Komponenten: Benutzeranmeldungen

쐽

Ungültiger Benutzername und ungültiges Kennwort

쐽

Ungültiger Benutzername und gültiges Kennwort

쐽

Gültiger Benutzername und ungültiges Kennwort

쐽

Gültiger Benutzername und gültiges Kennwort

쐽

Leerer Benutzername und leeres Kennwort

Sie sollten für alle Ihre Applikationen Tests durchführen, um sicherzustellen, dass sie in jeder Situation wie vorgesehen arbeiten. Beim Ausprobieren der verschiedenen Kombinationen werden Sie bemerken, dass Sie eine Erfolgsmeldung erhalten, wenn die Felder leer gelassen werden. Wenn dies passiert, liegt es fast immer an den Variablen, für die Sie Standardwerte definiert haben. Die Standardwerte werden in der Entwurfsansicht LIVE-DATA nicht einfach verwendet – sie werden in den automatisch erzeugten Code übernommen. Setzen Sie die Standardwerte also auf einen nicht existierenden Benutzernamen bzw. ein nicht existierendes Kennwort, um das System vollständig zu sichern. Seien Sie beim Setzen der Standardwerte für eine Abfrage vorsichtig! Wenn Sie Standardwerte für Testzwecke setzen und vergessen, diese auch wieder zu löschen, haben Sie damit vielleicht eine Hintertür in Ihr System geschaffen, ohne es zu wissen. Bei einem Anmeldesystem führt die Verwendung gültiger Benutzernamen und Kennwörter als Standardvariablenwerte zu einer Situation, wo überhaupt kein Kennwort und auch kein Benutzername angegeben werden müssen, um Zugriff auf geschützte Seiten zu erhalten.

Verborgener Code Wie bereits in Kapitel 13 erwähnt, stellt das Verhalten BEREICH ANZEIGEN kein Sicherheitsrisiko dar, weil sie einen Bereich auf einer Seite nicht wirklich verbirgt oder unsichtbar macht. Statt nur bedingt alle Daten anzuzeigen, stellt man sich das Verhalten besser als BEREICH LÖSCHEN vor, der einen Bereich nicht löscht, wenn die entsprechende Bedingung erfüllt ist. In der zuvor erstellten Applikation sieht die Seite zur Anzeige einer Erfolgsmeldung etwa so aus: 1 2 3 4 5 6 7

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

478

Sitzungsverwaltung

8 9 10 11 12 13 14 15

Sie haben sich erfolgreich angemeldet!


Analog sieht das HTML für die nicht erfolgreiche Anmeldung wie folgt aus: 1 2 3 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 5 6 7
8 9 10 12 13

11 Ihre Anmeldeinformation ist fehlerhaft.

14 15

Beim Vergleich der beiden Seiten bemerken Sie, dass nur die Tabelle, die auf dem Bildschirm angezeigt werden soll, im HTML enthalten ist. Das bedeutet, Sie können sensible Informationen auf dem Bildschirm für die erfolgreiche Anmeldung eintragen, ohne sich Gedanken darum machen zu müssen, dass sie in der HTML-Quelle erscheinen könnten.

14.4 Sitzungsverwaltung Nachdem sich der Benutzer korrekt am System angemeldet hat, müssen seine Informationen verwaltet werden, während er sich auf den verschiedenen Seiten der Site bewegt. Es gibt zwei Möglichkeiten, die Identität eines Benutzers auf seinem Weg durch eine Website zu verwalten. Erstens kann die Benutzer-ID als Teil der URL zwischen den einzelnen Seiten übergeben oder in ein Formular eingebettet werden. Diese Form der Sitzungsverwaltung ist praktisch, weil dafür keine Cookies benötigt werden, um einen Benutzer zu verfolgen. Sie werden es erleben, dass sich früher oder später jemand beschweren wird, wenn Sie eine Site implementieren, wo die Sitzungsverwaltung mithilfe von Cookies vorgenommen wird.

479

Komplexe Komponenten: Benutzeranmeldungen

Der Nachteil bei diesem Ansatz ist, dass der Client den externen Computer ständig daran erinnert, wer er ist. Ohne die benutzerdefinierte Programmierung kann der Benutzer ein Lesezeichen auf eine Seite setzen, nachdem er sich am System angemeldet hat, und gelangt damit unmittelbar in den angemeldeten Status. (Das erscheint Ihnen vielleicht auf den ersten Blick als Vorteil.) Weil die Benutzer-ID, die zwischen Seiten übergeben wird, sich niemals ändert, gibt es keine Möglichkeit zu erkennen, ob sich der Benutzer tatsächlich neu am System angemeldet hat oder ob er nach einem früheren Versuch wieder zurückgekehrt ist. Dieses Situation könnte man möglicherweise umgehen, indem man eine weitere Tabelle in der Datenbank anlegt, die eine zufällige Sitzungs-ID enthält, welche der Benutzer-ID bei der Anmeldung zugeordnet wird. Diese Sitzungs-ID kann dann anstelle der BenutzerID zwischen den einzelnen Seiten übergeben werden. Nach einer bestimmten Zeit oder nach einem bestimmten Ereignis (wenn der Benutzer beispielsweise auf die Schaltfläche ABMELDEN klickt) kann diese Sitzungs-ID entfernt werden, sodass der Benutzer definitiv abgemeldet ist. Diese Komplexitätsebene bedarf einer zusätzlichen serverseitigen Programmierung, um die Sitzungs-ID zu entfernen. Es gibt eine alternative, weniger komplizierte Methode, mit derselben Situation zurechtzukommen. Wenn Sie Sitzungsinformationen in einem Cookie ablegen, übertragen Sie die schwierige Aufgabe, eine Sitzung zu beenden, dem Client-Computer. Wenn sich der Benutzer zum ersten Mal am System anmeldet, können Sie einen Cookie auf seinem Computer ablegen. Dieses Cookie nimmt die Benutzer-ID auf. UltraDev ermöglicht Ihnen, mit den Cookies wie mit Variablen zu kommunizieren. Diese Technik ist einfach in der Anwendung und leicht zu verwalten – bis auf ein paar kleinere Probleme. Erstens muss der Benutzer die Cookies zulassen, sonst ist das Programm unnütz. Zweitens muss die Programmierung außerhalb der UltraDev-Umgebung stattfinden. UltraDev bietet keine Unterstützung für das Setzen von Cookies als Serververhalten. Das letzte Problem ist, dass Cookies keinen echten Sicherheitsvorteil haben – obwohl sie größtenteils vor dem Benutzer verborgen sind, können sie von ihm gelesen und von erfahrenen Hackern auch verändert werden. Es ist kein größeres Problem, auf dem Client-Computer ein nie ablaufendes Cookie zu schaffen, das eine permanente Anmeldesitzung erlaubt. Die beste Lösung in dieser Situation ist es, das Cookie zu nutzen, um dort eine zufällig erzeugte Sitzungs-ID zu speichern, und einzelne Benutzer anhand dieser Sitzungs-ID zu erkennen. Nach einer bestimmten Zeit kann der Server diese Sitzungs-ID entfernen. Sobald das passiert, ist das Cookie wertlos geworden, unabhängig davon, ob es bereits abgelaufen ist oder nicht.

480

Sitzungsverwaltung

Es besteht letztlich kaum ein Unterschied zwischen der Verwendung von Cookies und der Informationsübergabe von URL zu URL. Cookies sind vom Standpunkt des Benutzers aus transparenter, aber sie sind weniger kompatibel als die Übergabe im URL-Parameter. Welche Technik verwenden wir also hier? Wir nutzen eine Kombination der Techniken, um den Status zu verwalten. Ich persönlich vermeide Cookies wo immer möglich. Die Gefahr, Kunden auf einer Website zu verlieren, weil sie keine Cookies zulassen, ist das Risiko nicht wert. Sicherlich gibt es Situationen, wo dies keine besondere Bedeutung hat, aber wenn Sie versuchen, so viele Benutzer wie möglich zu erreichen, sollten Sie so wenige Cookies wie möglich verwenden. Verstehen Sie mich nicht falsch – Cookies sind ein wunderbares Werkzeug! Sie können jedoch nicht davon ausgehen, dass alle Benutzer die von Ihnen gesetzten Cookies auch akzeptieren. Ich empfehle Ihnen nicht, Cookies für Sites zu verwenden, die sich an ein großes Publikum richten, aber sie sind äußerst wertvoll, wenn Sie steuern können, welche Benutzer auf die Site zugreifen. Ich verwende Cookies beispielsweise, um Statusinformationen in Intranets zu verwalten. Wenn Sie einmal erleben wollen, wie oft im Web Cookies verwendet werden, legen Sie in den Einstellungen Ihres Browsers fest, dass er Sie jedes Mal warnen soll, wenn ein Cookie gesetzt wird. Sie werden erstaunt sein!

Variablenübergabe Jetzt implementieren wir die Sitzungsverwaltung durch Übergabe von URL-Parametern. Dazu ist ein relativ geringer Aufwand erforderlich. Sie brauchen jedoch ein neues Serververhalten, damit Sie dieses Funktionsmerkmal auf der gesamten Site nutzen können. Öffnen Sie das UltraDev-Dokument Verify, das sowohl die gültigen als auch die ungültigen Bereiche enthält. Der Bereich, mit dem Sie arbeiten wollen, ist der gültige Bereich. Um der restlichen Site mitzuteilen, wer wir sind, müssen wir einen Hyperlink von diesem Bereich zur nächsten Seite einer gültigen Anmeldung setzen. Als Erstes legen Sie eine Platzhalterseite für die restliche Site an. Diese Seite braucht noch keinen Inhalt zu haben; es handelt sich nur um den Bereich, für den Sie nach einer gültigen Anmeldung einen Hyperlink einfügen. Ich nenne meine Seite online.asp – vielleicht wollen Sie ja meiner Namenskonvention folgen. Nachdem Sie die Seite hinzugefügt haben, gehen Sie zurück auf die Seite verify.asp. Hier legen Sie den Hyperlink für die Parameterübergabe an. Gehen Sie wie folgt vor, um auf das Dokument online.asp zu verweisen, wenn die Benutzer-ID übergeben wird:

481

Komplexe Komponenten: Benutzeranmeldungen

1. Fügen Sie ein neues Objekt oder eine Textmarke in den gültigen Bereich ein. Für dieses Objekt wird die Verknüpfung erstellt. 2. Markieren Sie das Objekt, und wählen Sie im Menü MODIFIZIEREN die Option LINK ERSTELLEN. 3. Wählen Sie die Datei online.asp, die Sie eben angelegt haben. Sie steht für die restliche Site. 4. Klicken Sie auf die Schaltfläche PARAMETER. Sie müssen der Link-Zeile einen dynamischen Parameter hinzufügen. 5. Fügen Sie einen neuen Parameter ein, mit dem die Benutzer-ID übergeben wird. Abbildung 14.5 zeigt, dass ich diesem Parameter den Namen userID gegeben habe. 6. Um den Wert für den Parameter zu setzen, klicken Sie auf das Icon mit dem Blitz im Feld WERT. 7. Wählen Sie das Feld userID aus der Datensatzgruppe und klicken Sie auf OK. 8. Ihr dynamischer URL-Parameter soll dem Link-Konfigurationsdialog hinzugefügt werden, wie in Abbildung 14.6 gezeigt.

Abbildung 14.5: Fügen Sie einen neuen Parameter ein, der die Benutzer-ID übergibt.

Abbildung 14.6: Der dynamische Parameter wird am Ende Ihres Links eingefügt.

Das sollte reichen. Wenn der Benutzer jetzt auf den Hyperlink klickt, um auf die restliche Site zuzugreifen, wird seine Benutzer-ID über den Hyperlink an die nächste Seite übergeben. Dieser Parameter kann auf der nächsten Seite verwendet werden, um Konteninformationen nachzuschlagen oder zu speichern usw.

482

Sitzungsverwaltung

Es gibt ein Serververhalten, das genau dafür ausgelegt ist, Hyperlinks zu anderen Seiten anzulegen, während alle existierenden URL- und Formularparameter übergeben werden. Für diesen ersten Link müssen wir die Parameterübergabe manuell definieren, weil der Wert noch nicht als URL-Parameter oder Formularelement existiert. Nun testen Sie die Seite. Wenn Sie sich mit einem gültigen Benutzernamen und Kennwort anmelden, enthält der Link auf die neue Site-Seite den URL-Parameter, den Sie übergeben wollen: http://192.168.0.150/login/online.asp?userID=606717756665bce6

Falls Sie eine weitere Bestätigung brauchen, dass dies funktioniert, fügen Sie eine neue Datenssatzgruppe auf der online-Seite ein, die eine Abfrage ausführt, um die restlichen Informationen (Benutzername/verschlüsseltes Kennwort) aus der Benutzertabelle abzurufen und auf der Webseite anzuzeigen. Sie kennen die Prozedur bereits: 1. Öffnen Sie das Dokument online.asp. 2. Öffnen Sie die Palette SERVERVERHALTEN. 3. Klicken Sie auf das Plussymbol (+) und wählen Sie im Popup-Menü den Eintrag DATENSATZGRUPPE (ABFRAGE). 4. Klicken Sie im erweiterten Modus des Definitionsfensters für die Datensatzgruppen auf EINFACH, um in die einfache Ansicht zurückzugelangen. 5. Wählen Sie die entsprechende Verbindung und Tabelle aus den Popup-Menüs. 6. Übernehmen Sie die Standardvorgaben für die anderen Optionen, außer für Filter. Setzen Sie einen Filter für die Abfrage, die die Benutzer-ID in der Datenbank mit der Benutzer-ID im URL-Parameter vergleicht. 7. Nachdem Ihre Datensatzgruppe vollständig ist (sie sollte ähnlich wie in Abbildung 14.7 aussehen), klicken Sie auf die Schaltfläche OK. Jetzt gehen Sie auf die Palette DATENBINDUNGEN und ziehen die Felder für Benutzernamen und Kennwort aus Ihrer Datensatzgruppe in die Entwurfsansicht. Testen Sie Ihr Dokument erneut und überprüfen Sie, ob die korrekte Benutzerinformation angezeigt wird. Die Seite scheint jetzt komplett zu sein, aber leider bleibt noch ein bisschen Arbeit zu tun. Einfache Arbeit, aber Arbeit. Es gibt ein ernsthaftes Problem in unserem System. Versuchen Sie sich ein bisschen auf den Seiten zu bewegen, und beobachten Sie, was passiert. Wenn Sie dem logischen Fluss durch Ihre Site folgen, werden Sie feststellen, dass alles perfekt funktioniert. Das ist jedoch völlig von der vorgesehenen Seitenlogik abhängig. Stellen Sie sich jetzt vor, Sie seien ein

483

Komplexe Komponenten: Benutzeranmeldungen

Hacker – folgt ein Hacker immer dem logischen Fluss, den Sie für Ihre Seite definiert haben? Natürlich nicht! Um das Problem zu erkennen, überspringen Sie den Anmeldebildschirm und laden Sie die Seite online.asp direkt in Ihren Browser.

Abbildung 14.7: Um die Anmeldeinformation zu überprüfen, legen Sie eine Datensatzgruppe an, um die Benutzerinformation abhängig von dem übergebenen URL-Parameter auszuwählen.

Sehen Sie jetzt, wo das Problem liegt? Sie haben auf die »sichere« Webseite zugegriffen, ohne auch nur irgendeine Anmeldeinformation einzugeben. Und genau das wollten wir doch nicht! Glücklicherweise wissen Sie bereits, wie man dieses Problem korrigiert – mithilfe des Serververhaltens BEREICH ANZEIGEN. Sie haben bereits eine Datensatzgruppe für die Seite definiert, die Sie in Ihrem Verhalten BEREICH ANZEIGEN verwenden können: 1. Markieren Sie die gesamte Webseite. 2. Öffnen Sie die Palette SERVERVERHALTEN. 3. Klicken Sie auf das Plussymbol (+), und wählen Sie das Menü BEREICH ANZEIGEN aus. Wählen Sie BEREICH ANZEIGEN, WENN DATENSATZGRUPPE NICHT LEER IST aus dem Untermenü. 4. Wählen Sie die erstellte Datensatzgruppe aus. 5. Klicken Sie auf OK, um die Konfiguration zu speichern.

484

Sitzungsverwaltung

Sie sollten nicht nur einfach den Seiteninhalt verbergen, sodass er nicht sichtbar ist, wenn der Benutzer nicht angemeldet ist, sondern vielleicht auch eine Warnmeldung ausgeben. Sie könnten der Seite beispielsweise den Bereich UNGÜLTIGER ZUGRIFF hinzufügen, der angezeigt wird, wenn die Datensatzgruppe leer ist. Auf diese Weise wird der Seiteninhalt korrekt angemeldeten Benutzern angezeigt, während Benutzer, die versucht haben, das Sicherheitssystem zu umgehen, nur eine Warnmeldung erhalten. Sie sollten das Verhalten BEREICH ANZEIGEN auf allen Seiten verwenden, die nicht der allgemeinen Öffentlichkeit angezeigt werden sollen. In einigen Fällen ist es egal, ob Leute auf datenbankgestützte Seiten zugreifen, ohne sich anzumelden, weil dort keine sensiblen Daten existieren. (Es gibt beispielsweise keine Möglichkeit, die Benutzer-ID ohne korrekte Anmeldung anzuzeigen.) Je weniger Informationen jedoch einem potentiellen Hacker zur Verfügung stehen, desto besser ist es.

Variablenübergabe – Fortsetzung Jetzt können Sie Ihre restlichen Seiten einrichten, sodass sie auch an den Kennwortdialog angeschlossen und dahinter verborgen werden. Die Technik, die Sie für die Verknüpfung der userID von einer Seite zur nächsten kennen gelernt haben, funktioniert für beliebige Seiten. Sie müssen nur daran denken, dass Sie diese Information zwischen den Seiten übertragen müssen. Wenn sie nicht übertragen wird, vergisst die Site, um wen es sich bei dem Benutzer handelt. Diese einfachen Schritte können an beliebiger Stelle angewendet werden, um eine bestimmte Variable (wie beispielsweise eine userID) zwischen Seiten zu übertragen: 1. Wählen Sie das Objekt aus, das für den Hyperlink verwendet werden soll. 2. Wählen Sie im Menü MODIFIZIEREN den Eintrag LINK ERSTELLEN. 3. Suchen Sie nach der Datei, mit der Sie eine Verknüpfung einrichten wollen, und wählen Sie sie aus. 4. Klicken Sie auf die Schaltfläche PARAMETER. 5. Fügen Sie den Namen des neuen Parameters ein, den Sie übertragen wollen. 6. Statt einen Wert für den Parameter bereitzustellen, klicken Sie auf das Blitzsymbol. 7. Wählen Sie das zu übertragende Feld aus den verfügbaren Datensatzgruppen aus. 8. Klicken Sie auf OK.

485

Komplexe Komponenten: Benutzeranmeldungen

Sie werden es nicht mögen. Nicht ein bisschen. Vielleicht werden Sie schreien. Hassen Sie mich nicht! Um die erforderliche Statusinformation zu verwalten, müssen Sie für jeden angelegten Hyperlink URL-Parameter übergeben. Wenn Sie beispielsweise eine Site-Übersicht haben, die Links zu 100 oder mehr Seiten auf Ihrer Site enthält, müssen Sie all diesen Hyperlinks die entsprechenden URL-Parameter hinzufügen. Das kann zu größerem Kopfzerbrechen führen, aber es ist die einzige Methode (außer der Verwendung von Cookies), die benötigten Daten zu übertragen. Machen Sie sich nicht zu viele Sorgen – wir probieren hier gerade die harte Methode aus. Betrachten Sie es als Lernprozess. Es gibt zwei Alternativen, die die Übertragung von URL-Parametern beschleunigen können. Die erste setzt voraus, dass Sie bereits eine URL mit einem dynamischen Parameter definiert haben, wie oben beschrieben, und dass Sie für alle Links im Dokument denselben Parameter definieren wollen. Hier sehen Sie die Tabelle Valid Login (Gültige Anmeldung), die ich unmittelbar nach der Anmeldung am Server anzeige: 1 2 3 11 12

4 Sie haben sich 5 erfolgreich angemeldet! 6 7 ">CONTINUE 8 9 10

Betrachten Sie den Code in der Nähe des Links CONTINUE – in Zeile 7 ist der HTML- (und ASP-Code-)Abschnitt, der den URL-Parameter überträgt: ?userID=<%=(rsUser.Fields.Item("userID").Value)%>

Wenn Sie denselben URL-Parameter ganz schnell all Ihren anderen Links (auf derselben Seite) hinzufügen wollen, dann machen Sie das einfach am Ende all Ihrer URLs.

486

Sitzungsverwaltung

Um sich das Leben ein bisschen leichter zu machen, verwenden Sie die Suchen-und-Ersetzen-Funktionen von UltraDev, um am Ende aller Links auf Ihren Seiten den URL-Parameter einzufügen. Sie müssen einen regulären Ausdruck definieren, der den Links entspricht, aber am besten machen Sie es manuell.

Auf eine Seite mit ergänzenden Themen wechseln Eine Alternative zur Übertragung von URL-Parametern zwischen Seiten ist die Verwendung eines Serververhaltens. Das ist nicht wirklich schneller als die Verwendung eines dynamischen Parameters für einen Link, wenn Sie nur einen einzigen Parameter übertragen. Praktisch wird es, wenn Sie mehrere Parameter übertragen müssen, beispielsweise wenn Sie ein Formular an eine Seite gesendet haben und dann alle Variablen an eine andere Seite weitergeben wollen. Dazu könnten Sie ein paar Dutzend dynamischer URLParameter für die Übertragung einrichten. Sie können aber auch das Serververhalten ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN einsetzen, das alle aktuell auf einer Seite existierenden Parameter sowie alle von einem Formular übergebenen Informationen überträgt. Im Wesentlichen können alle auf einer Webseite verfügbaren Daten mithilfe dieses Verhaltens an eine andere Seite übertragen werden. Um das Verhalten ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN nutzen zu können, wählen Sie das Objekt aus, das als Link dienen soll und dann in der Palette SERVERVERHALTEN den Eintrag ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN aus. Tragen Sie die Seite, zu der Sie den Link einrichten, ein oder wählen Sie sie aus, und geben Sie an, welche Parameter übertragen werden sollen. Sie können angeben, dass URL- und Formularparameter an die Seite mit den verwandten Themen übertragen werden sollen. Die URL-Parameter sind die Optionen, die in der URL-Zeile übergeben werden, wie beispielsweise http://www.myurlgoeshere.com/test.asp?name=John

Dabei wird der Parameter name mit dem Wert John übergeben. Der zweite Parametertyp, den Sie übergeben können, sind die Formularparameter. Dies sind die Variablen, die beim Senden eines Formulars erzeugt werden. Falls die Seite, auf der Sie sich befinden, nur das Ergebnis einer Formularübertragung ist, können Sie die gesendeten Informationen an eine andere Seite weitergeben, indem Sie auf diese Option klicken. Abbildung 14.8 zeigt die Definition des Serververhaltens ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN.

487

Komplexe Komponenten: Benutzeranmeldungen

Abbildung 14.8: Wählen Sie die Seite, der Sie bereits existierende Parameter übergeben wollen.

Sie sind vielleicht überrascht zu hören, dass wir noch keine Webseiten erstellt haben, die dieses Verhalten nutzen! Der offensichtlichste Verwendungszweck ist unmittelbar nach der Benutzeranmeldung, um die Benutzer-ID an alle nachfolgenden Seiten weiterzugeben. Leider existiert die Benutzer-ID an dieser Stelle noch nicht als URL- oder Formularparameter. Dies ist für Anfänger immer schwer zu verstehen. Beachten Sie, dass die Inhalte einer Datensatzgruppe nicht Teil der URL- oder Formularparameter sind. Sie stehen zwar zur Verarbeitung auf einer Seite zur Verfügung, so wie Formularoder URL-Parameter, aber es handelt sich dabei um etwas ganz anderes. Erst nachdem Sie die Benutzer-ID manuell an eine Seite übergeben haben, können Sie das Verhalten ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN nutzen, um den Wert an weitere Seiten weiterzugeben.

14.5 Cookies Zum Abschluss dieses Kapitels betrachten wir, wie mithilfe von Cookies Benutzerinformationen verwaltet werden. Das ist nicht gerade das bestintegrierte Funktionsmerkmal von UltraDev, deshalb erledigen wir alles, was möglich ist, in UltraDev, und verlassen es dort, wo es nötig wird. Bisher haben wir eine relativ einfache Methode kennen gelernt, Informationen über die aktuell angemeldeten Benutzer zu verwalten, aber dabei müssen sehr viele Daten über die URL übergeben werden. Die Verwendung von Cookies für dieselbe Aufgabenstellung erledigt dasselbe, ist einfacher und Sie können Cookies für jeweils ganze Projekte erstellen – nicht nur für eine einzige Seite. Wir werden jetzt einen komplexeren Verwendungszweck für Cookies betrachten – Sitzungsvariablen. Eine Sitzungsvariable ist kein Cookie, benötigt jedoch für ihre Arbeit ein Cookie. Eine Sitzungsvariable speichert abhängig von der in einem Cookie abgelegen Sitzungs-ID einen bestimmten Informationsabschnitt. Praktisch dabei ist, dass das Cookie, das auf dem Client-Computer gesetzt wurde, nur eine zufällig erzeugte Sitzungs-ID enthält – dies ist die einzige Information, die auf dem Client abgelegt ist. Die Sitzungs-ID wird ver-

488

Cookies

wendet, um andere Sitzungswerte zu identifizieren, die auf dem Server gespeichert sind. Das bedeutet, es entsteht kein Sicherheitsproblem, wenn Daten zwischen dem Server und dem Client übertragen werden. Wie wir bereits erwähnt haben, kann die Verwendung von Cookies leider die Benutzer stören oder einfach nicht funktionieren, wenn die Benutzer die Cookies auf ihren Computern deaktiviert haben. Abbildung 14.9 zeigt ein typisches Dialogfeld, das bei der Übertragung eines Cookies angezeigt wird.

Abbildung 14.9: Cookies können nerven.

Wenn Sie vorhaben, eine Cookie-gestützte Site anzulegen, sollten Sie irgendwo auf der Site eine Erklärung unterbringen, sodass die Benutzer verstehen, wie und warum sie verwendet werden. Ein häufiges Missverständnis der Benutzer ist, dass Cookies irgendwelche Arglistigkeiten enthalten könnten und genutzt werden, um ihre Kreditkartennummern, die Sozialversicherungsnummern ihrer Kinder oder detaillierte Pläne für den Einbruch in ihre Wohnungen auszuspionieren. In der Realität sind Cookies, wenn sie korrekt genutzt werden, ein fantastisches Werkzeug zur Entwicklung sicherer und leistungsfähiger Websites. Hier eine schöne, typische Cookie-Erklärung, die Sie verwenden können: Diese Site verwendet Cookies nur, um Ihre Benutzerinformation zu verwalten, während Sie sich durch die Seiten bewegen. Ein Cookie ist ein kleiner Informationsabschnitt, der normalerweise genutzt wird, um einen Benutzer zu identifizieren, wenn er die Site betritt. Niemals werden persönliche Informationen in einem Cookie gespeichert und es zeichnet auch keine Informationen über einen Benutzer auf, die aus irgendwelchen Gründen anderen Sites zur Verfügung gestellt werden. Um Ihren Browser für Cookies zu konfigurieren, gehen Sie wie folgt vor: Internet Explorer: Im IE 4.0 wählen Sie im Pulldown-Menü BEARBEITEN den Eintrag EINSTELLUNGEN. Falls Sie den IE 5.0 verwenden, greifen Sie über das Menü EXTRAS auf die Internetoptionen zu. Unter DATEIEN EMPFANGEN wählen Sie COOKIES.

489

Komplexe Komponenten: Benutzeranmeldungen

Neben BEIM EMPFANGEN VON COOKIES können Sie NIE NACHFRAGEN, FÜR JEDE SITE NACHFRAGEN oder FÜR JEDES COOKIE NACHFRAGEN auswählen. Damit steuern Sie, ob Ihr Browser Cookies akzeptiert und ob er sie über das Eintreffen von Cookies informiert. Netscape Navigator: Wählen Sie im Pulldown-Menü BEARBEITEN die Option EINSTELLUNGEN. Wählen Sie ERWEITERT und markieren Sie die zutreffende Cookie-Option.

Sitzungsvariablen setzen Falls Sie in Ihrer Applikation eine Sitzungsvariable setzen wollen, brauchen Sie eine geeignete Position dafür. Glücklicherweise wissen Sie bereits, wie dafür vorzugehen ist. Mithilfe des Verhaltens BEREICH ANZEIGEN haben Sie genau definiert, wo die Sitzungsvariable definiert werden kann. Hat sich der Benutzer korrekt angemeldet, können Sie eine Sitzungsvariable setzen, die die Benutzer-ID enthält. Diese Variable wiederum steht auf jeder Webseite innerhalb der Site zur Verfügung – ohne dass die Site Informationen zwischen den Seiten übertragen muss. Um beispielsweise eine Sitzungsvariable mit der Benutzer-ID zu setzen, nachdem sich ein Benutzer erfolgreich angemeldet hat, öffnen Sie die Seite, die Sie mit den Bereichen für die gültige und die ungültige Anmeldung angelegt haben. Öffnen Sie Ihren Quellcode und suchen Sie nach dem Abschnitt, der den Bereich für die gültige Anmeldung definiert: 1 <% If Not rsUser.EOF Or Not rsUser.BOF Then %> 2 3 4 12 13

5 6 Sie haben sich erfolgreich angemeldet! 7 8 "> 9 CONTINUE 10 11

14 <% End If ' end Not rsUser.EOF Or NOT rsUser.BOF %>


In der Definition des Anzeigebereichs in Zeile 1 hat UltraDev die Bedingungen festgelegt, unter denen die Sitzungsvariable gesetzt werden soll. Wenn Sie die Sitzungsvariable in diesem Bereich setzen, werden nur für gültige Benutzer Sitzungs-IDs erzeugt.

490

Cookies

Aber wie genau geht das? Einfach – Sie fügen den folgenden Code in den entsprechenden Bereich ein: <% Session("userID")= %>

Jetzt ersetzen Sie durch die Abfrage, die das Feld userID aus Ihrer Datenbank zurückgibt. Für mein Dokument mit der Datensatzgruppe rsUser, die das Feld userID zurückgibt, verwende ich den folgenden Befehl: 1 <% If Not rsUser.EOF Or Not rsUser.BOF Then %> 2 <% Session("userID")=rsUser.Fields.Item("userID").Value %> 3 4 5 12 13

6 7 Sie haben sich erfolgreich angemeldet! 8 9 "> 10 CONTINUE 11

14 <% End If ' end Not rsUser.EOF Or NOT rsUser.BOF %>


Die hier gezeigten Codebeispiele beziehen sich auf ASP-Serverplattformen. Weitere Informationen finden Sie im entsprechenden Anhang zum Setzen von Sitzungsvariablen in ColdFusion- und Java-Serverseiten. Falls Sie keine Sitzungsvariablen verwenden, erzielen Sie eine bessere Kompatibilität mit Browsern, in denen die Cookies deaktiviert sind, aber gleichzeitig wird die Programmierung Ihrer Sites komplizierter.

Sitzungsvariablen verwenden Nachdem eine Sitzungsvariable definiert wurde, können Sie sie überall in UltraDev verwenden – so wie eine Formularvariable oder einen URL-Parameter. Dazu brauchen Sie die Palette DATENBINDUNGEN (von der Sie noch nicht viel gesehen haben) und die folgenden einfachen Anleitungen: 1. Öffnen Sie die Palette DATENBINDUNGEN. 2. Klicken Sie auf das Plussymbol (+) und wählen Sie SITZUNGSVARIABLE. 3. Geben Sie den Namen der Variablen an, die Sie in der Zuweisung auf Ihrer Webseite verwendet haben, und klicken Sie auf OK, wie in Abbildung 14.10 gezeigt.

491

Komplexe Komponenten: Benutzeranmeldungen

Abbildung 14.10: Hier geben Sie den Namen der im Code definierten Sitzungsvariablen ein.

Das ist alles! Die im Code definierte Sitzungsvariable steht jetzt auf jeder Seite der Site zur Verfügung. Sie verwenden die Sitzungsvariable genau wie alle anderen gebundenen Daten. Die Sitzungsvariablen und die Datensatzgruppenwerte werden in separaten Quellen aufgelistet. Abbildung 14.11 zeigt die Palette DATENBINDUNGEN mit eingetragener Sitzungsvariablen.

Abbildung 14.11: Sitzungsvariablen erhalten einen eigenen Eintrag in der Palette Datenbindungen.

Sitzungsvariablen in Abfragen Sitzungsvariablen können in Abfragen verwendet werden, ähnlich wie normale Abfragevariablen (URL oder Formular). Statt jedoch die Sitzungsvariable mithilfe der Funktion Request('') einer UltraDev-Variablen zuzuweisen, verwenden Sie dazu die Funktion Session(''). Mit dieser Technik können Sie genau das tun, was Sie normalerweise auch mit URL-Parametern machen, aber statt alles an jede einzelne Seite übergeben zu müssen, wo die Parameter möglicherweise benötigt werden, stehen die Werte an jeder beliebigen Stelle zur Verfügung. Auch hier ist die Informationsweitergabe durch Sitzungsvariablen sicherer als die Verwendung von URL-Parametern. Statt Daten hin und her senden zu müssen, werden sie auf dem Server gespeichert, und die Client-Applikation speichert nur eine Sitzungs-ID, die die Werte auf dem Server identifiziert.

492

Das Authentifizierungssystem von UltraDev

In den Projekten in Woche 3 werden wir Sitzungsvariablen verwenden. Das ist sauberer und effizienter als die Übergabe von URL-Parametern. Wenn Sie statt dessen lieber Kompatibilität für alle Browser realisieren wollen, verwenden Sie URL-Parameter als Sitzungsverwaltungssystem auf Ihren Sites. Eine kurze Bemerkung zu Sitzungen: Sitzungsvariablen werden ausschließlich vom Server verwaltet und sind gültig, solange der Benutzer den Browser verwendet. Es wird zwar ein Cookie verwendet, um eine Sitzung zwischen verschiedenen Seiten zu verwalten, aber es handelt sich nur um ein temporäres Cookie, das niemals auf der Festplatte Ihres Computers gespeichert wird.

14.6 Das Authentifizierungssystem von UltraDev Dieses Kapitel hat Ihnen die Benutzerauthentifizierung und die Verwaltung des Benutzerstatus über verschiedene Webseiten hinweg vorgestellt. Die in UltraDev eingebauten Verhalten zur Benutzerauthentifizierung helfen, diesen Prozess zu automatisieren, aber Sie sollten verstehen, wie der zugrunde liegende Mechanismus funktioniert, um Vor- und Nachteile beurteilen zu können. Sie werden die hier beschriebenen Techniken und das Authentifizierungssystem von UltraDev noch häufig brauchen. UltraDev führt dieselben Aktionen aus, die Sie hier kennen gelernt haben, auch das Setzen einer Sitzungsvariablen – ohne den Code auch nur einmal bearbeiten zu müssen. Eines der Probleme bei dem Verhalten ist jedoch, dass es erzwingt, den Benutzernamen als Primärschlüssel für die Benutzertabelle zu verwenden. Das ist größtenteils kein Problem, aber damit verbietet sich, dass der Benutzer (oder ein Administrator) den Benutzernamen ändern. Während der Arbeit mit den Beispielen in der dritten Woche werden wir verschiedene Tabellen mit Benutzerinformationen genauer betrachten – von denen aus dem heute vorgestellten UserID-System bis zu einem hybriden Benutzer-ID/Benutzername-System und einem rein benutzernamenbasierten System. Sie werden die Benutzerauthentifizierung bis ins Detail kennen lernen. Beachten Sie jedoch unbedingt, dass die Parameterübergabe zur Verwaltung des Benutzerstatus die einzige Möglichkeit ist, eine Site anzulegen, die allen Benutzern zur Verfügung steht. Diese Form der Sitzungsverwaltung wird vom Authentifizierungssystem in UltraDev nicht unterstützt.

493

Komplexe Komponenten: Benutzeranmeldungen

14.7 Echte Sicherheit für Websites Wenn Sie eine Web-basierte Anmeldung für eine Site verwenden, übertragen Sie unweigerlich einen Benutzernamen und ein Kennwort im Klartext über das Internet. Das ist nicht unbedingt ratsam, wenn Sie sichere Operationen ausführen wollen. Um das Problem zu beheben, sollten Sie versuchen, einen sicheren, SSL-basierten (Secure Sockets Layer) Webserver zu verwenden. Wenn Sie einen sicheren Webserver einsetzen, um Ihre Anmeldeinformationen zu verarbeiten, werden alle Transaktionen zwischen dem Client und dem Server verschlüsselt, bevor sie stattfinden. Das bedeutet, eine Site mit einfachen Anmeldeschemata kann ohne zusätzlichen Programmieraufwand wesentlich sicherer werden. Leider gibt es keine perfekte Lösung für die Websicherheit. Eine Kombination aus sinnvoller Entwicklung und intelligentem Server-Einsatz bildet die beste Verteidigung gegenüber Hackern.

14.8 Zusammenfassung In diesem Kapitel ging es um eine der wichtigsten Funktionen auf Websites – Anmeldebildschirme. Durch Kombination von verborgenen Bereichen (Verhalten BEREICH ANZEIGEN, die nicht angezeigt werden) und Standardabfrage können Sie einen Anmeldemechanismus für Ihre Websites entwickeln. Das Verhalten BEREICH ANZEIGEN kann genutzt werden, um Informationen anzuzeigen bzw. zu verbergen, abhängig von den Ergebnissen einer Datensatzgruppen-Abfrage. Wie verwaltet das System die Benutzerinformationen, nachdem der Benutzer sich erfolgreich angemeldet hat? Das ist nicht so einfach, wie es scheinen mag! Damit das System sich merken kann, wer sich angemeldet hat, muss es Informationen zwischen den Seiten übergeben und die entsprechenden Benutzerinformationen in der Datenbank suchen. Das Serververhalten ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN kann genutzt werden, um existierende Parameter zwischen Seiten zu übertragen. Sitzungsvariablen sind eine andere Methode, Sitzungsinformationen zu verwalten, nachdem eine erfolgreiche Anmeldung stattgefunden hat. Sitzungsvariablen werden auf dem Server verwaltet und nicht bei jeder Anforderung erneut übertragen, wie es bei URL-Parametern der Fall ist. Sitzungsvariablen basieren auf einem Cookie mit der Sitzungs-ID, das auf der Client-Maschine gesetzt ist. Der Nachteil bei diesem Ansatz ist, dass der ClientComputer die Cookies aktivieren muss, damit das Programm funktioniert.

494

Fragen und Antworten

Hilfreich ist, dass die in UltraDev eingebauten Authentifizierungs-Verhalten viele der in diesem Kapitel vorgestellten Techniken automatisieren. Zur Entwicklung sicherer Sites, die sich wie vorgesehen verhalten, ist es jedoch außerordentlich wichtig, die zugrunde liegenden Techniken zu verstehen.

14.9 Fragen und Antworten F

Für welche Art von Websites sollten Anmeldungen implementiert werden? A

F

Woran erkenne ich, ob ich die Übergabe von URL-Parametern oder Sitzungsvariablen verwenden sollte? A

F

Zunächst müssen Sie die Benutzer Ihrer Site bestimmen. Wenn Sie wissen, wer auf Ihre Site zugreift, können Sie problemlos Sitzungsvariablen einsetzen. Wenn Sie jedoch ein möglichst großes Publikum erreichen wollen, sollten Sie die Übergabe von URL-Parametern bevorzugen.

Wie funktionieren Sitzungsvariablen, wenn die Information nicht in einem Cookie abgelegt wird? A

F

Anmeldungen können für unterschiedliche Websites sinnvoll sein, unabhängig davon, ob sie sensible Daten enthalten. Beispielsweise können Sie den angezeigten Web-Inhalt den jeweils angemeldeten Benutzern anpassen. Die Information wird dadurch vielleicht nicht vollständig gesichert, aber Sie haben eine Methode, die Site für einzelne Benutzer anzupassen, was eine sehr praktische Funktionalität ist, die Sie mithilfe eines Anmeldebildschirms ganz einfach realisieren können.

Sitzungsvariablen werden auf dem Server gespeichert. Man spricht sie über eine Sitzungs-ID an, die in einem Cookie auf der Client-Maschine abgelegt ist. Falls der Client keine Cookies akzeptiert, können Sie keine Sitzungsvariablen setzen.

Warum muss man Sitzungsvariablen verwalten oder URL-Parameter übergeben? A

Das Web ist eine statuslose Umgebung. Jeder Zugriff auf eine Website ist eigenständig und einzigartig. Wenn der Webserver nicht irgendwelche Informationen vom Client-Computer erhält, kann er nicht erkennen, um wen es sich bei dem Client handelt. Cookies und die Parameterübergabe sind die beiden Methoden, die erlauben, Informationen über einen Benutzer zu verwalten, der auf Ihre Site zugreift.

495

Komplexe Komponenten: Benutzeranmeldungen

14.10 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 nutzen Sie das Verhalten BEREICH ANZEIGEN, um Informationen zu verbergen? 2. Was sollen Anmeldesysteme sichern? 3. Wie schützen Sie Ihre Seiten, damit sie nicht ohne Angabe eines Benutzernamens und eines Kennworts eingesehen werden können? 4. Wozu verwendet man das Verhalten ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN? 5. Werden Datensatzgruppenvariablen mithilfe des Verhaltens ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN übergeben? 6. Woran kann es liegen, wenn ein Benutzer sich nicht durch eine auf Sitzungsvariablen basierende Site bewegen kann?

Übungen 1. Legen Sie ein eigenes Anmeldungssystem an, ähnlich dem heute vorgestellten. Ändern Sie dazu die Benutzerdatenbank nach Bedarf ab. Um es ein bisschen schwieriger zu machen, fügen Sie ein Benutzerprofil ein, sodass die Benutzer ihre Kennwörter beliebig ändern können. Das findet man häufig bei auf Anmeldungen basierenden Systemen. 2. Experimentieren Sie ein bisschen mit der Verwendung des Verhaltens BEREICH ANZEIGEN, und verbergen oder zeigen Sie den Inhalt der Website abhängig von den Anmeldeinformationen. Sie werden schnell feststellen, dass dieses Verhalten sehr einfach in der Anwendung ist und dennoch flexibler sein kann als man denkt. 3. Schreiben Sie das Anmeldungssystem aus Übung 1 um, sodass es den Benutzerstatus mithilfe von Cookies verwaltet. Versuchen Sie, sich an die Verwendung von Cookies auf Ihren Websites zu gewöhnen, wo immer das möglich ist – sie werden Ihre Entwicklungszeiten beschleunigen und die Wahrscheinlichkeit von Fehlern reduzieren, die entstehen, weil Statusinformationen nicht in URL-Parametern übergeben wurden.

496

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6 Tag 7

Tag 8 Tag 9 Tag 10 Tag 11 Tag 12 Tag 13 Tag 14

Tag 15 Tag 16 Tag 17 Tag 18 Tag 19 Tag 20 Tag 21

Die Programmumgebung von UltraDev Die WYSIWYG-Layoutwerkzeuge von UltraDev Websites planen und verwalten Websites in Bewegung – clientseitige Verhaltensweisen Wieder verwertbare Elemente und Erweiterungsmodule Einführung in dynamische Webanwendungen und Datenbankentwicklung Die unterstützten Skriptsprachen verstehen

Mac und Windows-PC für die Datenbankanbindung fit machen Einführung in die dynamischen Werkzeuge von UltraDev Datenbankgestützte Webseiten entwickeln Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren Komplexe Datenbankabfragen Komplexe Komponenten: Kataloge und Suchen Komplexe Komponenten: Benutzeranmeldungen

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren Komplexe Techniken: Datensammlung und Berichte Komplexe Techniken: Benutzerdaten verfolgen und verwenden Komplexe Techniken: Komplexe Abfragesysteme Komplexe Techniken: Lehren und Prüfen – online Komplexe Techniken: E-Commerce-Lösungen Dynamische Applikationen testen und einsetzen

31 69 117 147 187

W O C H E

221 251

275 305 337 365 409 435 467

501 529 561 599 633 669 707

W O C H E

W O C H E

Auf einen Blick Sie haben die letzte Woche dieses Buchs erreicht und sollten damit bereits Experte für die Serververhalten, Verbindungen, Datenbindungen und andere dynamische Elemente von UltraDev sein. Wir haben bisher jedoch noch keine kompletten Websites mit UltraDev erstellt. Diese letzte Woche ist einigen Sites gewidmet, die ohne größere Änderungen online gestellt werden könnten. In den nächsten sieben Tagen werden Sie Folgendes kreieren: 쐽

Banner-Ads in zufälliger Reihenfolge – Wie Sie sicher wissen, sind Banner-Anzeigen sehr gebräuchlich. Mithilfe von UltraDev und einer einfachen Datenbankstruktur können Sie Ihrem System ganz einfach zufällig ausgewählte Bilder hinzufügen.

쐽

Saisonabhängige Themenbilder – Ähnlich den Banner-Anzeigen können Sie auf Ihrer Site Bilder sogar abhängig vom Tag oder vom Datum austauschen. Statt eine immer gleich aussehende Site bereitzustellen, legen Sie eine an, die die Bilder abhängig von der Jahreszeit komplett austauscht.

쐽

Gästebücher – Erlauben Sie Ihren Anwendern, auf einer Webseite ihren Namen und einen Kommentar zu hinterlassen. Eine einfache UltraDev-Anwendung ermöglicht Ihnen, innerhalb von Minuten ein eigenes Online-Gästebuch zu implementieren.

쐽

Nachrichtenbretter – Durch eine Erweiterung des Gästebuchkonzepts entsteht ein vollständiges Nachrichtenbrettsystem, auf dem die Benutzer Nachrichten ablegen/ lesen, darauf antworten und eigene Nachrichten wieder löschen können.

쐽

Dynamische, benutzerdefinierte Inhaltsseiten – Viele Websites enthalten eine Funktionalität, die ihnen erlaubt auszuwählen, welcher Inhalt auf den Seiten angezeigt werden soll. UltraDev kann Ihnen sogar helfen, solche Anwendungen zu erstellen.

쐽

Online-Prüfungsanwendungen – Nachdem immer mehr Schulen und Organisationen die Möglichkeit von Online-Prüfungen bieten, ist es wichtig, schnell Online-Tests und Quiz-Anwendungen bereitstellen zu können. Mithilfe von UltraDev ist es ganz einfach, ein System zu erstellen, das dynamisch Tests erzeugt und sie sogar online auswertet.

쐽

Komplexe Abfragesysteme – Die Erstellung von Suchsystemen, die ungenaue Suchen erlauben, ist in UltraDev ein kleines Problem. Mithilfe der Leistungsfähigkeit Ihrer Datenbank und komplexen Abfragen können Sie Ihren Sites aber ganz einfach »Fuzzy-Suchen« hinzufügen.

쐽

E-Commerce-Sites – Schließlich werden Sie lernen, wie man die gebräuchlichsten Sites anlegt. Mithilfe von UltraDev können Sie auch ganz einfach benutzerdefinierte E-Commerce-Lösungen erstellen.

498

Jedes dieser Projekte kann mit anderen Projekten kombiniert oder nach Bedarf erweitert werden. Jeder Aspekt beim Anlegen einer Site wird abgedeckt, vom Anfang bis zum Ende. Am Ende der Woche erhalten Sie Informationen darüber, was schief gehen kann und wird, wenn Sie Websites in der UltraDev-Umgebung anlegen. Obwohl UltraDev eine ausgezeichnete Umgebung ist, können Dinge fehlschlagen. Wenn Sie wissen, was Sie erwartet, werden Sie nicht so schnell (oder nicht so sang- und klanglos) untergehen.

499

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

5 1

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

Sicher haben Sie auch schon Websites entwickelt, bevor Sie dieses Buch gekauft haben. Möglicherweise haben Sie bereits Situationen kennen gelernt, wo Sie dynamische Werkzeuge hätten einsetzen können, um die Funktionalität Ihrer Site zu verbessern, ihr ein attraktiveres Aussehen zu erteilen oder ihre kommerzielle Komponente zu unterstützen. Heute betrachten wir mehrere kleine UltraDev-Applikationen, die Sie nutzen können, um bereits existierende Abschnitte Ihrer jetzt »statischen« Sites zu ergänzen oder zu ersetzen. Ich habe versucht, Applikationen auszuwählen, die man nicht auf den ersten Blick als datenbankgestützt erkennen sollte, aber natürlich ist es möglich. Heute geht es um Folgendes: 쐽

Effiziente Verwendung und Weiterentwicklung der Projekte aus der zweiten Woche

쐽

Zufällig ausgewählte Banner-Anzeigen auf Ihrer Site anzeigen

쐽

Automatische Anpassung der Bilder auf Ihrer Site, abhängig von der Jahreszeit oder der Tageszeit

쐽

Ersetzen von E-Mail-Feed-back durch ein gefiltertes Online-Gästebuch

15.1 Der Umstieg vom Statischen zum Dynamischen Der schwierigste Part bei der Entwicklung dynamischer Webseiten ist, sich daran zu gewöhnen, Regeln zu brechen, die Sie bisher streng befolgt haben. Statt statische Links auf Ihren Seiten oder statische Objekte zu verwenden, haben Sie plötzlich die Möglichkeit, alle Seiten Ihrer Site jederzeit zu verändern, wenn ein Benutzer sie besucht. Die komplizierteren Online-Applikationen, wie beispielsweise E-Commerce und durchsuchbare Datenbanken, werden später in dieser Woche detailliert beschrieben, aber Sie werden feststellen, dass viele der interessantesten Websites ganz einfache dynamische Funktionen einsetzen. Wie oft waren Sie beispielsweise auf der Website von Dilbert? (Falls Sie jetzt sagen »Noch nie!«, dann frage ich mich, was Sie mit einem Computerbuch tun.) Viele Leute besuchen die Site täglich. Dasselbe trifft auf Sites wie beispielsweise MSN oder Computer-Sites wie beispielsweise versiontracker.com zu. Ich vermute, dass auch Sie bestimmte Websites mindestens einmal wöchentlich besuchen. Die Frage lautet also: »Warum besuchen Sie diese Sites so häufig?« Denken Sie doch einmal darüber nach. Die Antwort ist: Sie gehen immer wieder auf die Site zurück, weil sich ihr Inhalt ändert. Auf der Dilbert-Website wird jeden Tag ein neuer Dilbert-Comic veröffentlicht. Bei MSN finden Sie jeden Tag aktuelle Nachrichten. Die Bereitstellung neuen, aktuellen Inhalts ist eine ausgezeichnete Strategie, Ihre Site für Besucher attraktiv zu gestalten. Was aber tun, wenn Sie Ihre Site nicht täglich aktualisieren wollen? Sie könnten Ihren Besuchern dennoch dynamische Information und Bilder bereitstellen. Viele Sites halten in

502

Der Umstieg vom Statischen zum Dynamischen

ihren Datenbanken bereits vorverarbeiteten Inhalt bereit, der zu einer bestimmten Zeit oder zu einem bestimmten Datum angezeigt wird. Für eine Nachrichten-Site ist das nicht möglich (es sei denn, Sie glauben wirklich daran, dass die Medien die Nachrichten erfinden, bevor sie wirklich passieren), aber viele andere Inhaltstypen können erzeugt werden, bevor sie wirklich benötigt werden, wie beispielsweise Bilder, wöchentlich neue Rezepte oder monatliche Newsletters. Heute werden Sie ein paar kleine Projekte kennen lernen, die Sie auf Ihrer Website nutzen können, um die herkömmlichen statischen Elemente zu ersetzen. Dabei handelt es sich um gebräuchliche Module für Websites, die verwendet werden, um Sites zu ergänzen, die Sie bereits im Web haben. Hier ein kurzer Überblick, um was es gehen wird: 쐽

Zufällige Banner/Bilder – Banner sind auf vielen Sites gebräuchlich und bieten eine Möglichkeit, Werbung für andere Sites anzuzeigen. Immer wenn der Benutzer eine Website besucht, ändert sich das Bild auf der Seite. Diese Technik können Sie für Banner oder beliebige andere Bilder nutzen, die auf einer Seite angezeigt werden sollen.

쐽

Jahreszeitlich/tageszeitlich abhängige Bilder – Passen Sie Ihre Website gerne den unterschiedlichen Jahreszeiten an? Ändern Sie die Farben Ihrer Bilder abhängig von der Farbe der Blätter an den Bäumen? Auf diese Weise bringen Sie Abwechslung auf Ihre Site und neben einer anfänglichen Einrichtung der verschiedenen Grafiken sind keine weiteren Maßnahmen Ihrerseits erforderlich.

쐽

Gästebuch – Eine beliebte Funktion auf Websites ist ein Feed-back-Forum. Es ist ganz einfach, Ihre Site entsprechend zu ergänzen. Außerdem können Sie dem Gästebuch eine »praktische« Funktion hinzufügen, die Nachrichten ausfiltert, die »grob« sind oder eine Sprache enthalten, die Sie als ungeeignet empfinden.

Durch diese Mini-Projekte werden Sie erkennen, was alles möglich ist, und Sie sind bereit für die großen Projekte, die wir im weiteren Verlauf dieser Woche vorstellen werden. Anschließend können Sie Ihre bereits existierenden Sites daraufhin auswerten, ob eines dieser Funktionsmerkmale dafür geeignet ist. Bevor wir anfangen, will ich kurz darauf eingehen, was Sie in den nächsten Kapiteln dieses Buchs erwartet. Meine Philosophie ist einfach – Learning by Doing. UltraDev ist an sich einfach. Sie kennen bereits alle Funktionen und wissen, wie man über die Paletten SERVERVERHALTEN und DATENBINDUNGEN darauf zugreift. Die HTML-Layoutmöglichkeiten von UltraDev sind etwas komplizierter zu verstehen als die Werkzeuge zur dynamischen Datenbankverbindung. Deshalb ist die letzte Woche dieses Buchs Beispielen aus der Praxis gewidmet, die die Flexibilität und die vielen Möglichkeiten von UltraDev in Kombination mit einem SQL-Server demonstrieren. Alle Beispiele dieser letzten Woche sind mit dem MySQL-Server kompatibel, Sie können sie also ohne weiteren Aufwand jederzeit nachvollziehen.

503

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

Diese Kapitel werden in drei Abschnitten präsentiert: 1. Datenbankentwurf – Der wichtigste Teil jedes Projekts ist der Entwurf des Backends. Bestimmte Beschränkungen der UltraDev-Verhalten können durch eine entsprechende Formulierung der Abfragen kompensiert werden. Selbst wenn Sie bereits Erfahrungen mit Datenbanken mitbringen, werden Sie auf Probleme treffen, wenn Sie hier nicht genau aufpassen. 2. Site-Entwurf – Vor dem HTML und der Programmierung sollten Sie festlegen, wie die Site aussehen soll. Das dauert normalerweise nicht lang, sollte aber durchaus ernst genommen werden. Sie sollten mit der Codierung erst anfangen, nachdem Sie das gesamte Projekt durchdacht haben. Wenn Sie sich nicht vorab über die Struktur Gedanken machen, werden Sie irgendwann in einer Sackgasse enden. 3. Implementierung – Jedes Kapitel endet mit der Implementierung des Projekts – dem HTML-Entwurf und dem Einfügen von Serververhaltensweisen usw. Manchmal muss der Quellcode dafür manuell bearbeitet werden. Nachdem die Implementierung abgeschlossen ist, haben Sie eine voll funktionale Website, die auf einem Produktions-Server eingesetzt werden kann. Sie müssen Ihren eigenen Inhalt schaffen, aber das Gerüst steht. Ich glaube, der hier beschriebene Ansatz ist am besten dafür geeignet, Ihnen ein vollständiges Bild des Projektablaufs zu verschaffen. Sie können natürlich jederzeit etwas überspringen, aber ich empfehle Ihnen, jedes Kapitel zu lesen und nicht zwischen den Abschnitten zu springen, bevor Sie nicht wirklich alles verstanden haben. Manchmal werde ich Ihnen ein paar »Tricks« zeigen, also Dinge, die in UltraDev nicht vorgesehen waren. Merken Sie sich diese Dinge, um Ihre Vorstellungen in Ihrem UltraDev-Projekt verwirklichen zu können. Fangen wir an!

15.2 Banner-Anzeigen zufällig ausgeben Sie sind langweilig, aber beliebt. Banner-Anzeigen können für gutes Geld verkauft werden, wenn Ihre Site stark frequentiert ist. Sie haben gesehen, wie man dynamisch eine Bildfolge anzeigt, aber Sie haben noch kein Bild erstellt, das dynamisch ist. Mithilfe einer Tabelle mit mehreren Bildern sind Sie bereits auf dem richtigen Weg, aber sie übernimmt noch nicht den Austausch der Bilder, wenn die Seite wiederholt geladen wird.

504

Banner-Anzeigen zufällig ausgeben

Tabellendefinitionen Der Schlüssel zur Realisierung der abwechselnd angezeigten Bilder ist eine Abfrage, die bei jeder Ausführung ein anderes Bild zurückgibt. Das ist einfacher als Sie glauben, aber bevor Sie diese magische Abfrage definieren können, müssen Sie die Datenbank anlegen, die sie steuert. In jedem der Projekte setze ich voraus, dass Sie die Verbindung zu der Datenbank bereits eingerichtet haben, bevor ich mit der Übung beginne. Machen Sie das jetzt, falls Sie es noch nicht erledigt haben. Anschließend beginnen wir mit dem SQL. Um die Auswahl eines Bildes zufällig vorzunehmen, brauchen Sie zunächst mehrere Bilder. Diese Bilder werden in Ihrer Datenbanktabelle abgelegt. Darüber hinaus sind die meisten Banner Links auf andere Sites, deshalb brauchen Sie eine Methode, wie die Applikation einen Hyperlink für das angezeigte Bild setzen kann. Die Tabellendefinition muss nur diese beiden Felder berücksichtigen – und weil wir voraussetzen, dass Sie unterschiedliche Namen für die einzelnen Banner angeben, verwenden wir den Dateinamen als Primärschlüssel: create table tblBanner ( image varchar(80) not null, url varchar(80) not null, primary key (image) );

Wie Sie bereits erfahren haben, können wir nicht wirklich Bilder in einer Tabelle ablegen, aber wir können die Dateinamen dort speichern und diese dann in ein -Tag einfügen. Durch Einschließen des -Tags fügen wir einen Link ein, der aus dem Feld url gespeist wird. Abbildung 15.1 zeigt das Tabellenlayout für diese einfache Banner-Applikation. tblBanner image* url

Abbildung 15.1: Die Banner-Tabelle enthält Bildposition und Link-URL-Information.

Beispieldaten Ich werde in meinem System zunächst drei Banner verwenden, die ich als Beispiele angelegt habe – wie in Abbildung 15.2 gezeigt.

505

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

Abbildung 15.2: Ich habe ein paar Banner für meine Version des dynamischen Bildprogramms erstellt. Ich hoffe, Sie haben ein bisschen mehr Fantasie.

Für jedes dieser drei Banner habe ich ein Verzeichnis und einen Dateinamen, die angeben, wo auf dem Server es gespeichert ist, sowie eine URL, zu der der Benutzer gelangen soll, wenn er darauf klickt: 쐽

banners/fade.gif – http://fade.poisontooth.com/

쐽

banners/buddy.gif – http://buddy.poisontooth.com/

쐽

banners/detailing.gif – http://detailing.poisontooth.com/

Diese URLs existieren natürlich nicht, aber ich besitze den Domänennamen poisontooth. Statt einfach davon auszugehen, dass es sich bei einem beliebigen Beispiel um eine nicht-existente Domäne handelt (was heutzutage nahezu unmöglich ist), habe in vielen der Beispiele einfach meine eigene verwendet. Ich will schließlich nicht, dass die echte Firma »Tscharlie's Tattoos« unzählige E-Mails erhält, nur weil ich ohne es zu wissen ihre Adresse hier bereitstelle. Geben Sie ein paar Beispieldaten in Ihre Datenbanktabelle ein: insert into tblBanner values ➥('banners/fade.gif','http://fade.poisontooth.com/'); insert into tblBanner values ➥('banners/buddy.gif','http://buddy.poisontooth.com/'); insert into tblBanner values ➥('banners/detailing.gif', 'http://detailing.poisontooth.com/');

Die SQL-Abfrage Es gibt bereits Daten in der Banner-Tabelle, aber das erklärt noch nicht, wie wir ein beliebiges Bild auswählen können. Offensichtlich können wir alle Daten mit einer einfachen SELECT-Abfrage auswählen:

506

Banner-Anzeigen zufällig ausgeben

mysql> SELECT * FROM tblBanner; +-----------------------+-----------------------------------+ | image | url | +-----------------------+-----------------------------------+ | banners/fade.gif | http://fade.poisontooth.com/ | | banners/buddy.gif | http://buddy.poisontooth.com/ | | banners/detailing.gif | http://detailing.poisontooth.com/ | +-----------------------+-----------------------------------+ 3 rows in set (0.04 sec)

Leider wird die Information bei jeder Ausführung dieser Abfrage in derselben Reihenfolge angezeigt. Praktisch wäre es, wenn die Datensätze in unterschiedlicher Reihenfolge zurückgegeben würden. Durch Verwendung der ORDER BY-Klausel für die Suche in Kombination mit der MySQL-Funktion rand() bewirken Sie eine Rückgabe der Datensätze in zufälliger Reihenfolge: mysql> SELECT * FROM tblBanner ORDER BY RAND(); +-----------------------+-----------------------------------+ | image | url | +-----------------------+-----------------------------------+ | banners/detailing.gif | http://detailing.poisontooth.com/ | | banners/buddy.gif | http://buddy.poisontooth.com/ | | banners/fade.gif | http://fade.poisontooth.com/ | +-----------------------+-----------------------------------+

Das ist schon sehr viel besser. Es gibt aber noch ein Problem bei dieser Abfrage – es werden alle Datensätze zurückgegeben, nicht nur einer. Weil wir nur an der Anzeige eines einzigen Bildes interessiert sind, sind die restlichen zurückgegebenen Datensätze nicht relevant. Am besten begrenzt man die Anzahl der zurückgegebenen Ergebnisse, indem man am Ende der Abfrage die Anweisung LIMIT einfügt. Mit LIMIT 1 wird die Anzahl der zurückgegebenen Datensätze auf einen einzigen beschränkt: mysql> SELECT * FROM tblBanner ORDER BY RAND() LIMIT 1; +-----------------------+-----------------------------------+ | image | url | +-----------------------+-----------------------------------+ | banners/detailing.gif | http://detailing.poisontooth.com/ | +-----------------------+-----------------------------------+ 1 row in set (0.04 sec)

Das brauchen Sie nicht unbedingt. UltraDev verarbeitet Datensatzgruppen so, dass der einzige Datensatz, auf den Sie unmittelbaren Zugriff haben, der erste in der Datensatzgruppe zurückgegebene ist, es sei denn, Sie weisen das Programm explizit an, alle Datensätze in der Datenbank zu durchlaufen – und das ist genau, was Sie wollen.

507

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

So weit das SQL. Jetzt sollten wir den Plan für unsere Site anlegen. Dieses Projekt unterscheidet sich jedoch von den anderen, weil es Bilder bereitstellt, die auf jeder Seite der Site angezeigt werden können. Aus diesem Grund können wir die Planung der Site überspringen, weil es keine solche gibt.

Implementierung Um die in beliebiger Reihenfolge bereitgestellten Bilder zu implementieren, öffnen Sie ein neues Entwurfsdokument in UltraDev. Sie können dafür gegebenenfalls eine bereits existierende Datei verwenden. Um dem dynamischen Banner Leben einzuhauchen, brauchen wir drei in UltraDev entwickelte Elemente auf der Seite: 1. Eine Datensatzgruppe, die das anzuzeigende Bild enthält – Diese Datensatzgruppe stellt das Bild bereit, das wir anzeigen wollen. Weil das SQL bereits entwickelt wurde, sollte es kein Problem sein, die Abfrage in UltraDev zu realisieren. 2. Ein Bild, dessen Quelle mit dem Bildfeld der Datensatzgruppe verbunden ist. 3. Einen Link um das Bild herum, der auf das URL-Feld gesetzt wird. Zunächst fügen wir die Datensatzgruppe auf der Seite ein. Weil alle anderen Elemente von der Datensatzgruppe abhängig sind, ist es wenig sinnvoll, an anderer Stelle zu beginnen. Öffnen Sie die Palette SERVERVERHALTEN und klicken Sie auf das Plussymbol (+). Wählen Sie aus der Popup-Liste die Option DATENSATZGRUPPE (ABFRAGE). Weil diese Abfrage die Verwendung spezieller Funktionen bedingt, können Sie den einfachen Abfragemodus nicht für die Konfiguration einer zufälligen Rückgabereihenfolge verwenden. Klicken Sie auf die Schaltfläche ERWEITERT, um in den erweiterten Modus zu gelangen. Im erweiterten Abfrage-Definitionsmodus, den Sie in Abbildung 15.3 sehen, können Sie die Abfragen für diese Site manuell definieren. Ich arbeite aufgrund der gesteigerten Flexibilität normalerweise immer im erweiterten Modus. Wenn Sie sich daran gewöhnt haben, manuell Abfrageanweisungen einzugeben, werden Sie sicher genau so vorgehen. Konfigurieren Sie die erweiterte Abfrage wie zuvor: 1. Legen Sie die Abfrage rsBanner an. 2. Wählen Sie die aktuelle Verbindung aus, die Sie für das aktuelle Projekt verwenden. 3. Geben Sie Ihre Abfrage wie folgt ein: "SELECT * FROM tblBanner ORDER BY RAND() LIMIT 1;".

Klicken Sie auf die Schaltfläche TESTEN, um die Abfrage ein paar Mal auszuprobieren – Sie sollten kein bestimmtes Muster bei der Rückgabe der Datensätze erkennen können. Kein Computer kann wirklich zufällig arbeiten, aber das hier Gezeigte sollte für die meisten Aufgabenstellungen ausreichend sein. Wenn Sie nicht MySQL einsetzen, lesen Sie im Handbuch Ihres Datenbankservers nach, ob es eine entsprechende Zufallsfunktion gibt.

508

Banner-Anzeigen zufällig ausgeben

Abbildung 15.3: Wir definieren die Abfrage manuell im erweiterten Modus. Die Verwendung der Funktion Rand ist auf dem Bildschirm für die einfache Abfragekonfiguration nicht erlaubt.

Zufällige Ereignisse Wenn Sie feststellen, dass ein Datensatz mehrmals hintereinander zurückgegeben wird, bedeutet das nicht unbedingt, dass ein Fehler vorliegt. Es ist zwar unwahrscheinlich, dass sehr viele Wiederholungen auftreten, aber das Auftreten jedes einzelnen Ereignisses ist gleich wahrscheinlich. Wenn Sie also drei Bilder haben, dann besteht bei jeder zufälligen Auswahl die Wahrscheinlichkeit von 1:3, dass wieder dasselbe wie zuvor ausgewählt wird.

Jetzt sollen dem Dokument die Bilder hinzugefügt werden. Öffnen Sie die Objektpalette, und klicken Sie auf das Symbol BILD, oder wählen Sie im Menü EINFÜGEN die Option BILD. Sie werden aufgefordert, die einzufügende Datei anzugeben. Statt eine der erstellten Grafikdateien auszuwählen, klicken Sie auf die Option DATEINAMEN WÄHLEN AUS DATENQUELLEN. Der in Abbildung 15.4 gezeigte Bildschirm mit den Bindungen unter dem Eintrag DATENSATZGRUPPE (ABFRAGE) wird aufgerufen. Dort können Sie auch eines der Felder aus der Tabelle tblBanner zum SRC-Attribut des -Tags binden. Klicken Sie auf den Expansionspfeil neben der Datensatzgruppe rsBanner, um seine Felder anzuzeigen. Wählen Sie das Bildfeld aus und klicken Sie auf OK, um die Bindung zu vervollständigen. Weil UltraDev im Code nicht mit Bildnamen arbeitet, sehen Sie nur ein Symbol, das das Bild repräsentiert. Sie können jedoch im Menü ANSICHT die Option LIVE-DATA aktivie-

509

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

ren, um die Datenbank abzufragen und eines der zufällig ausgewählten Bilder anzuzeigen. Klicken Sie oben im Fenster ein paar Mal auf die Schaltfläche AKTUALISIEREN – bei jedem Klick wird ein neues Bild ausgewählt. Beachten Sie, dass die Auswahl zufällig erfolgt, deshalb kann ein Bild mehrmals erscheinen. Wenn die Abfrage korrekt definiert ist, sollten Sie etwas Ahnliches wie in Abbildung 15.5 sehen.

Abbildung 15.4: Binden Sie Ihr Bild zum image-Feld in Ihrer Datensatzgruppe rsBanner.

Abbildung 15.5: Jetzt sollten Sie ein Banner-Bild sehen. Klicken Sie auf die Schaltfläche Aktualisieren, um ein zufällig ausgewähltes neues Bild anzuzeigen.

Jetzt fügen Sie den Link vom Banner zu einer externen URL ein. Das ist dem Prozess ganz ähnlich, den Sie eben ausgeführt haben. Markieren Sie das gesamte Banner-Bild (das kön-

510

Banner-Anzeigen zufällig ausgeben

nen Sie gegebenenfalls auch im Live Data-Modus tun) und wählen Sie im MODIFIZIERENMenü die Option LINK ERSTELLEN. Auch jetzt werden Sie nach der Datei gefragt, zu der der Link führen soll. Wie bei der Bildquelle wählen Sie die Option DATEINAMEN WÄHLEN AUS DATENQUELLEN. Statt das Bildfeld wählen Sie jetzt das URL-Feld und klicken auf OK, wie in Abbildung 15.6 gezeigt. Auf diese Weise wird die URL aus der Datenbank zu dem Link gebunden. Damit haben Sie das grundlegende Banner-Programm fertiggestellt. Versuchen Sie, die Seite in Ihren Browser zu laden, und beobachten Sie, was passiert. Sie haben ein komplett zufallsgesteuertes Bild in Ihrem Dokument. Das ist nun kein offensichtlicher Verwendungszweck für UltraDev, aber durchaus sinnvoll.

Abbildung 15.6: Setzen Sie die Datenbindung auf das zweite URLFeld.

Die Reihenfolge der Datensatzgruppen ist bei jeder Abfrage der Datenbank zufällig. Das bedeutet jedoch nicht, dass Sie Ihr dynamisches Bild innerhalb einer Seite an beliebige Positionen kopieren können und dabei mehrere Auftreten zufallsgesteuert werden. Dazu müssen Sie mehrere Datensatzgruppen auf derselben Abfrage basierend definieren. Jede dieser Datensatzgruppen wiederum kann ein einziges zufallsgesteuertes Bild steuern. Dieses Projekt ist zwar einfach, aber es wurde für fast jede kommerzielle Site gefordert, die ich entwickelt habe. Normalerweise wird es durch ein separates CGI gesteuert – aber mit UltraDev können Sie die Funktionsweise mit der Bequemlichkeit einer Zeigen-und-Klicken-Oberfläche realisieren. Dem Projekt fehlt jedoch noch eine Funktionsweise – die Möglichkeit, sich zu merken, welches Bild ein Benutzer zuletzt gesehen hat, und dieses Bild beim

511

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

nächsten Besuch der Seite nicht zu laden. Sie könnten diese Funktion implementieren, indem Sie ein Cookie mit dem gewählten Dateinamen setzen und dann die Datensatzgruppe ausfiltern, in der der Bilddateiname ungleich dem Cookie-Wert ist. Das ist eine komplexe Funktion, die eine manuelle Bearbeitung des HTML-Codes erforderlich macht – mehr darüber erfahren Sie in Kapitel 17, »Komplexe Techniken: Benutzerdaten verfolgen und verwenden«.

15.3 Jahreszeitlich/tageszeitlich unterschiedliche Bilder Eine weitere beliebter Verwendungsweck dynamischer Bilder, den Sie auch Ihrer Website hinzufügen können, ist ein Bild, das sich entsprechend der Tageszeit oder Jahreszeit ändert. Das ist sehr praktisch, wenn Sie vordefinierten Inhalt verwenden, der automatisch aktualisiert wird, wenn ein bestimmtes Datum erreicht ist. Beispielsweise könnten Sie Ihre Web-Grafik abhängig von der Jahreszeit oder sogar abhängig vom Monat anzeigen, um den Eindruck zu erwirken, dass die Site ständig weiterentwickelt wird, selbst wenn Sie die Seiten überhaupt nicht betreuen müssen. Dieses Projekt ist dem Hinzufügen von Banner-Anzeigen ganz ähnlich, verwendet aber eine etwas abgeänderte Abfrage- und Tabellendefinition.

Tabellendefinition Wie im vorhergehenden Beispiel gezeigt, ist die Tabellendefinition für diese dynamischen Bilder ganz einfach. Sie speichern den Bilddateinamen zusammen mit einem Datum oder einer Zeit. Die Implementierung, die ich Ihnen hier vorstelle, basiert darauf, dass ein bestimmtes Bild zu einem bestimmten Datum angezeigt wird. Nachdem Sie diesen Abschnitt gelesen haben, können Sie die Datenbanktabellen abändern und die Anzeige des Bildes von dem Wochentag, der Woche, dem Monat oder verschiedenen anderen Optionen abhängig machen. Eine grundlegende auf einem Datum basierende Tabellendefinition könnte wie folgt aussehen: create table tblTimebasedImage ( image varchar (80) not null, activedate date, primary key (image) )

512

Jahreszeitlich/tageszeitlich unterschiedliche Bilder

Abbildung 15.7 zeigt das Tabellenlayout für eine einfache zeitbasierte Bild-Applikation.

Abbildung 15.7: Von der Zeit abhängig angezeigte Bilder werden mithilfe einer Tabelle realisiert, die der für die zufällig ausgewählten Bilder ganz ähnlich ist.

Das SQL MySQL stellt verschiedene Funktionen bereit, die Ihnen erlauben, die Daten abhängig von Datumswerten ganz schnell zu manipulieren. Sie können diese Funktionen kombinieren, um von Zeit und Datum abhängige Abfragen in den von Ihnen entwickelten Systemen zu realisieren: DAYOFWEEK() – Gibt einen numerischen Wert zurück, der den Wochentag darstellt. 1 = Sonntag, 2 = Montag usw. DAYOFYEAR() – Gibt den Tag des Jahres zurück. Beispielsweise ist der 1. Januar der

1. Tag des Jahres, während der 31. Dezember der 365. Tag ist. DAYNAME() – Der Name des Wochentags anstelle eines numerischen Werts. MONTHNAME() – Der Name des Monats für das vorgegebene Datum. WEEK(datum) – Erzeugt ein numerisches Ergebnis mit der Woche (1-52) des Jahres, in der das vorgegebene Datum liegt. CURDATE() – Das aktuelle Datum. CURTIME() – Die aktuelle Zeit. NOW() – Das aktuelle Datum und die aktuelle Zeit.

Eine vollständige Liste der von MySQL unterstützten Funktionen finden Sie in Anhang C, der eine schnelle MySQL-Funktionsreferenz enthält.

Um in diesem Beispiel Zeit zu sparen, verwenden wir dieselben Banner-Abbildungen wie zuvor – außer dass wir sie abhängig von der Zeit oder dem Jahr anzeigen, statt sie zufällig auszuwählen. Tragen Sie Beispieldaten in die Tabelle ein. Falls die Daten in diesem Beispiel bereits abgelaufen sind, tragen Sie aktuellere Daten ein, sodass sie noch wirksam sind. insert into tblTimebasedImage insert into tblTimebasedImage insert into tblTimebasedImage

values ('banners/fade.gif','2000-11-30'); values ('banners/buddy.gif','2001-02-28'); values ('banners/detailing.gif','2001-05-30');

513

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

Der Trick dabei ist, die Abfrage auszulösen. Offensichtlich muss man das aktuelle Datum kennen – das beispielsweise von CURDATE() oder NOW() zurückgegeben wird – aber Sie können nicht einfach das gespeicherte Datum und die Ergebnisse der Funktion NOW() vergleichen. Auf diese Weise würde der Datensatz nur dann zurückgegeben, wenn das betreffende Datum gerade das aktuelle Datum ist. Wir versuchen aber, ein System aufzubauen, das ein Bild auswählt, nachdem das Zieldatum vergangen ist. Dazu wählen Sie Datensätze in der Datenbank aus, die ein höheres als das aktuelle Datum haben: mysql> select * from tblTimebasedImage where activedate > CURDATE() ORDER BY activedate; +-----------------------+------------+ | image | activedate | +-----------------------+------------+ | banners/fade.gif | 2000-11-30 | | banners/buddy.gif | 2001-02-28 | | banners/detailing.gif | 2001-05-30 | +-----------------------+------------+ 3 rows in set (1.19 sec)

Die ORDER BY-Klausel ist erforderlich um sicherzustellen, dass sich das nächste Datum ganz oben in der Tabelle befindet. Wenn Sie diesen Wert weglassen, erhalten Sie die Ergebnisse, die eine Übereinstimmung in der Reihenfolge erzeugen, in der sie in die Tabelle eingetragen wurden. Ähnlich wie bei den zufällig ausgewählten Banner-Bildern sind Sie nur an dem ersten Ergebnis der Abfrage interessiert. Entweder Sie ignorieren die folgende Strategie und verwenden nur den ersten Datensatz in der Datensatzgruppe, oder Sie begrenzen die Abfrage mithilfe der LIMIT-Klausel: mysql> select * from tblTimebasedImage where activedate > CURDATE() ORDER BY activedate LIMIT 1; +------------------+------------+ | image | activedate | +------------------+------------+ | banners/fade.gif | 2000-11-30 | +------------------+------------+ 1 row in set (0.71 sec)

Damit erhalten Sie ein Bild, das zu einem bestimmten Datum aktiviert wird. Anschließend gehen Sie wie für das zufällig ausgewählte Banner-Bild vor, um es Ihrer Seite hinzuzufügen: 1. Fügen Sie eine rsTimebasedImage-Datensatzgruppe in Ihr Dokument ein, die die eben definierte Abfrage enthält. Abbildung 15.8 zeigt eine korrekt definierte Datensatzgruppe.

514

Jahreszeitlich/tageszeitlich unterschiedliche Bilder

2. Fügen Sie ein Bild auf der Seite ein, die zu dem Bildfeld Ihrer neuen Datensatzgruppe gebunden ist.

Abbildung 15.8: Definieren Sie eine komplexe Abfrage, ähnlich wie für das Banner-Bild.

Wie Sie sehen, ist das Ganze ein bisschen einfacher als mit dem zufällig ausgewählten Bild, weil wir es nur mit einem Feld in der Datenbank zu tun haben. Leider sind unsere beiden Beispiele zwar ganz nett, aber für sehr große Projekte sind sie nicht geeignet.

Mehrere Jahreszeit-/zeitbasierte Bilder Zeitbasierte Bilder sind so praktisch, weil Sie nicht darauf achten müssen, wann Änderungen stattfinden müssen. Sie gehen abends ins Bett, werden von Aliens entführt und unverletzt auf der internationalen Weltraumstation abgesetzt. In der Zwischenzeit muss sich Ihr Server um Ihre Site kümmern. Das Problem bei den bisher definierten, von der Jahreszeit abhängigen Bildern ist, dass das Ganze für ein einziges Bild funktioniert. Alle Bilder in der Tabelle tblTimebasedImage werden als Variationen derselben Grafik betrachtet. Ideal wäre ein themenbasiertes System, wobei unterschiedliche Bilder in einer Tabelle abgelegt und einer Gruppe von Datumswerten zugeordnet werden könnten. Die einzige Methode, wie Sie dies für das aktuelle System bewerkstelligen können, ist die Einrichtung einer neuen Tabelle für jedes Bild. Wir brauchen also unbedingt eine neue Technik.

515

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

Dazu definieren Sie die bereits existierende Tabelle um und fügen eine neue Tabelle ein: create table tblTimebasedImage ( image varchar (80) not null, name varchar(80) not null, themeID varchar(80) not null, primary key (image,name,themeID) )

Die neue Definition von tblTimebasedImage beinhaltet eine Themen-ID, die in der zweiten Tabelle definiert wird, sowie einen Namen. Das Feld name identifiziert ein Bild anhand eines abstrakten Namens statt, und nicht anhand eines Dateinamens. Auf diese Weise können Sie ein Bild beispielsweise namens HauptTitel für ein beliebiges Thema verwenden, auch wenn der tatsächliche Dateiname der verschiedenen Themen variiert. create table tblTheme ( themeID varchar(80) not null, activedate date, primary key (themeID) )

Die Thementabelle ordnet einem Aktivierungsdatum eine Themen-ID (ThemeID) zu. Beispielsweise könnten Sie das Thema Weihnachten einfügen, das dem Datum 12/25/20XX zugeordnet wird. Abbildung 15.9 zeigt das neue Datenbankschema. tblTimebasedImage image* name* themeID*

tblTheme themeID* activedate

Abbildung 15.9: Das neue zeitbasierte Schema verwendet zwei Tabellen – eine für die Bilder und eine für die einem Aktivierungsdatum zugeordneten Themen.

Das SQL Am besten verstehen Sie, wie ein System funktioniert, indem Sie Beispieldaten anlegen und die Abfragen ausprobieren: insert insert insert insert

into into into into

tblTimebasedImage tblTimebasedImage tblTimebasedImage tblTimebasedImage

insert insert insert insert

into into into into

tblTheme tblTheme tblTheme tblTheme

516

values values values values

values values values values

('mainimage1.jpg','header','Sommer'); ('mainimage23.jpg','header','Winter'); ('mainimage65.jpg','header','Herbst'); ('mainimage2.jpg','header','Fruehling');

('Sommer','2000-06-21'); ('Winter','2000-12-21'); ('Herbst','2000-09-21'); ('Fruehling','2000-03-21');

Jahreszeitlich/tageszeitlich unterschiedliche Bilder

Diese Datenmengen gelten für vier verschiedene Themen (Sommer, Winter, Herbst und Frühling) sowie vier verschiedene Titelgrafiken. Dieses System ist besser als die vorhergehende Tabellenstruktur, weil es Ihnen erlaubt, unterschiedliche Bilder innerhalb derselben Tabelle zu speichern (auch neben der Titelgrafik). Um dieses neue Layout nutzen zu können, ändern Sie das zuvor gezeigte SQL so ab, dass es die beiden Tabellen in Verbindung bringt und ein Bild nach seinem abstrakten Namen auswählt: SELECT * FROM tblTimebasedImage where activedate > CURDATE() ORDER BY activedate LIMIT 1;

Daraus wird SELECT * FROM tblTimebasedImage,tblTheme WHERE tblTimebasedImage.themeID=tblTheme.themeID AND tblTheme.activedate > CURDATE() AND tblTimebasedImage.name='header' ORDER BY tblTheme.activedate LIMIT 1;

Weil Sie noch nicht viel Erfahrung mit komplexen Abfragen besitzen, wollen wir diese zerlegen und erklären, was sie genau bewirkt. tblTimebasedImage.themeID=tblTheme.themeID – Bringt die beiden Tabellen (die Bildtabelle und die Thementabelle) abhängig von der themeID in eine Verbindung. tblTheme.activedate > CURDATE() – Vergleicht das aktuelle Datum mit dem Aktivie-

rungsdatum in der Tabelle tblTheme. tblTimebasedImage.name='header' – Wählt das Bild nicht nur basierend auf dem activedate, sondern auch auf dem abstrakten Namen für jedes der Felder aus.

Um dieses überarbeitete System nutzen zu können, aktualisieren Sie Ihre Datenbank und ersetzen Ihre Abfragen. Sie müssen immer noch für jedes der anzuzeigenden Bilder eine neue Abfrage definieren. Das ist jedoch eine Verbesserung im Vergleich zum ursprünglichen System, weil Sie dort für jedes zeitabhängige Bild, das Sie einfügen wollten, eine neue Tabelle anlegen mussten. Wie bereits erwähnt, bietet UltraDev momentan nicht die Möglichkeit, Bilder oder andere binäre Objekte direkt in der Datenbank zu speichern. Das wird sich in Zukunft jedoch hoffentlich ändern, damit Sie Applikationen entwickeln können, die Ihnen erlauben, neue Site-Bilder usw. direkt in die Datenbank hochzuladen. Das ist jetzt auch schon möglich, aber dafür ist eine benutzerdefinierte Programmierung erforderlich, um die Daten entgegennehmen, in einer Datei speichern und dann aus der Datenbank darauf verweisen zu können.

517

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

15.4 Feed-back von Ihren Benutzern entgegennehmen Das letzte Mini-Projekt für heute ist ein Gästebuch. Die Vorteile bei der Bereitstellung eines Gästebuchs für Ihre Benutzer ist, dass sie nicht den Eindruck haben, ihr Feed-back gehe »ins Nichts«. Wie oft haben Sie schon eine Website besucht und auf einen Link geklickt, um einen Kommentar zu hinterlassen, und es hat sich einfach nur Ihr E-MailProgramm geöffnet, damit Sie eine Nachricht an eine namen- und gesichtslose Person hinterlassen können, die Ihnen nie eine Antwort schicken wird. Ein Gästebuch erlaubt dem Benutzer, einen Kommentar auf einer Website zu hinterlassen – etwas, was nicht so einfach ignoriert werden kann. Ich bin sicher, Sie haben sich schon Gedanken darüber gemacht, welche Nachrichten ein Benutzer in einem Gästebuch hinterlassen kann – und das ist durchaus gerechtfertigt. Häufig nutzen unfreundliche Zeitgenossen ein öffentliches Forum, um ihre Unreife zu demonstrieren. Eine unangemessene Sprache, eingebettete Bilder und unangebrachte HTML-Tags im Klartext usw. – es gibt unzählige potenzielle Probleme. Bleibt zu hoffen, dass unser Gästebuch einige dieser Ungezogenheiten kompensieren kann.

Die Tabellendefinition Der Inhalt der Gästebuch-Tabelle bleibt völlig Ihnen überlassen. Wie viel Information wollen Sie speichern? Das Beispiel-Gästebuch in diesem Kapitel speichert einen Benutzernamen, eine E-Mail-Adresse und einen Kommentar. Eine entsprechende Tabelle könnte wie folgt definiert werden: create table tblcomment ( messageID int auto_increment not null, name varchar(50), email varchar(80), message varchar(250), primary key (messageID) );

Hier verwenden Sie zum ersten Mal den Typ auto_increment für die messageID. Diese Funktion inkrementiert das Feld automatisch, wenn ein neuer Datensatz eingetragen wird. Sie brauchen sich keine Gedanken darüber zu machen, diese Nummer manuell erstellen zu müssen. Leider ist das von Datenbank zu Datenbank verschieden, und für Ihr System verhält es sich vermutlich anders. Wenn Sie nicht MySQL einsetzen, könnten Sie auch die eigentliche Nachricht als Primärschlüssel verwenden, weil es sehr unwahrscheinlich ist, dass mehrere Personen genau dieselbe Nachricht hinterlassen. Weil es kaum andere Informationen gibt, die wir speichern müssen, oder die sich auf die Kommentar-Datenbank beziehen, kann die endgültige Datenstruktur wie in Abbildung 15.10 aussehen:

518

Feed-back von Ihren Benutzern entgegennehmen

tblComment messageID name email message

Abbildung 15.10: In der Kommentar-Tabelle werden eine Nachricht und beliebige andere Felder abgelegt.

Das SQL Das SQL zur Auswahl und zur Anzeige der verfügbaren Kommentare im Gästebuch sollte klar sein: SELECT * FROM tblcomment;

Es könnte eine Datensatzgruppe definiert werden, die alle Nachrichten enthält, und dann auf die Felder ein wiederholter Bereich angewendet werden, um eine Liste aller Nachrichten anzulegen. Damit werden jedoch einige Probleme nicht gelöst – insbesondere die Reihenfolge, in der die Nachrichten angezeigt werden, sowie die Tatsache, dass eine Nachricht nicht immer so gestaltet ist, als dass wir sie anzeigen möchten. Am besten demonstrieren wir das Ganze, indem wir Daten in die Kommentar-Tabelle einfügen. Um höflich zu bleiben, werde ich einige wohlwollende Kommentare in die Datenbank einfügen und dann zeigen, wie man sie ausfiltert. Sie sollten den Filter so abändern, dass wirklich derbe Einträge ausgefiltert werden, wenn Sie das System auf Ihrem Server einsetzen. insert into tblcomment values ('','John Ray','

[email protected]', 'Die ultimative Website! Mehr kann man nicht verlangen!'); insert into tblcomment values ('','Robyn Nest','[email protected]', 'So ein Quatsch!'); insert into tblcomment values ('','Bad Dude','[email protected]', 'Vergessen Sie diese Site! Besuchen Sie ');

Von diesen Beispielnachrichten sollte nur die erste angezeigt werden. Die zweite Nachricht ist hier moderat, aber es könnte noch schlimmer kommen. Und die dritte Nachricht enthält einen Link auf eine andere Site – und wir wollen keine Nachrichten anzeigen, in die der Benutzer sein eigenes HTML eingebettet hat. Um die Nachrichten zu filtern, verwenden Sie eine partielle Übereinstimmung in der Abfrage, um alle Wörter zu blockieren, die nicht erscheinen sollen.

519

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

Führen Sie beispielsweise folgende Abfrage für die Beispieldaten aus: mysql> SELECT * FROM tblcomment WHERE message NOT LIKE "%QUATSCH%" \ G *************************** 1. row *************************** messageID: 1 name: John Ray email: [email protected] message: Die ultimative Website! Mehr kann man nicht verlangen! *************************** 2. row *************************** messageID: 3 name: Bad Dude email: [email protected] message: Vergessen Sie diese Site! Besuchen Sie 2 rows in set (0.01 sec)

Diese Nachricht ist nach der Klausel WHERE message NOT LIKE "%QUATSCH%" gefiltert. Diese Abfrage filtert abhängig von dem Muster im message-Feld. In diesem Fall ist das Muster das Wort »Quatsch«, wobei vorher und nachher beliebige Zeichen stehen dürfen, dargestellt durch das Prozentsymbol. Sie können beliebig viele dieser Bedingungen kombinieren. Um beispielsweise einen Filter anzulegen, der die Wörter »Mist«, »Dreck« und »Runkelrüben« ausschließt, schreiben Sie Folgendes: SELECT * FROM tblcomment WHERE message NOT LIKE "%MIST%" AND message NOT LIKE "%DRECK%" AND message NOT LIKE "%RUNKELRÜBEN%".

Wie Sie sehen, muss die Abfrage einfach nur durch die neuen Bedingungen ergänzt werden. Weil wir alle Nachrichten ausfiltern wollen, die ein HTML-Tag enthalten, sollte die ursprüngliche Abfrage wie folgt umgeschrieben werden: mysql> select * from tblcomment WHERE message NOT LIKE "%QUATSCH%" AND message NOT LIKE "%<%>%" \ G *************************** 1. row *************************** messageID: 1 name: John Ray email: [email protected] message: Die ultimative Website! Mehr kann man nicht verlangen! 1 row in set (0.07 sec)

Genau danach haben wir gesucht. Die Nachricht mit dem enthaltenen HTML wurde nach einem Muster ausgefiltert, das <> enthält, mit beliebigen Zeichen dazwischen und links und rechts. In einem letzten Schritt könnten Sie am Ende der Abfrage ORDER BY messageID DESC einfügen, sodass die neueste Nachricht als erste angezeigt wird.

520

Das HTML

Die hier definierte Abfrage filtert alles aus, was irgendwie an ein HTML-Tag erinnert, nämlich alles, was ein <, gefolgt von einem >, enthält. Sie können nicht jedes HTML-Tag als Muster definieren, aber Sie könnten einige derjenigen explizit angeben, die Sie ausfiltern wollen, wie beispielsweise oder . Jetzt wollen wir das HTML anlegen, um das Gästebuch online bereitzustellen.

15.5 Das HTML Ähnlich den beiden ersten Projekten in diesem Beispiel werden wir den Plan der Site hier überspringen, weil das Gästebuch nur eine einzige Seite einnimmt. Diese Seite enthält ein kurzes Formular, mit dem die Benutzer Kommentare übertragen können, sowie direkt darunter die eigentlichen Kommentare. Zunächst richten Sie das Formular für die Eingabe neuer Kommentare ein. Öffnen Sie die Objektpalette und gehen Sie zu den Formularelementen. Wie für jede Seite, die ein Formular enthält, müssen Sie als Erstes das eigentliche Formularobjekt einfügen – ohne das Formular-Tag erscheinen die enthaltenen Elemente nicht. Das Dokument sieht in der Entwurfsaussicht gut aus, aber in Ihrem Webbrowser wird es nicht angezeigt. Fügen Sie also ein neues Formular in Ihr Dokument ein und geben Sie ihm den Namen frmComment – Sie speichern den Inhalt dieses Formulars in der Gästebuch-Datenbank. Wenn Sie nicht mehr wissen, wie man einem Formular einen Namen zuweist, gehen Sie wie folgt vor: 1. Öffnen Sie die Eigenschaftenpalette. 2. Klicken Sie unten in der Entwurfsansicht auf das Formular-Tag, um das Formular zu markieren. 3. Setzen Sie den Formularnamen auf frmComment. Anschließend fügen Sie die benötigten Elemente in das Formular ein. Dazu könnten Sie zunächst eine Tabelle einfügen, um das Layout des Formulars zu strukturieren. Sie benötigen drei Felder mit den folgenden Namen: 쐽

Name

쐽

E-Mail

쐽

Kommentar

Diese Namen fügen Sie Ihrem Dokument mithilfe des Textfeldobjekts im Formularabschnitt der Objektpalette hinzu. Die Felder name (Name) und email (E-Mail) sind normale Textfelder (der Standardfeldtyp, den UltraDev einfügt), während Sie das message-Feld

521

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

(Kommentar) so anpassen müssen, dass es mehrere Zeilen unterstützt. Markieren Sie das message-Feld in der Entwurfsansicht und öffnen Sie den Eigenschafteninspektor. Markieren Sie das Optionsfeld Mehrzeilig, um den Feldtyp zu ändern. Das mehrzeilige Textfeld hat eigentlich nichts mit dem einzeiligen und dem Kennwortfeld zu tun. Es handelt sich dabei um ein völlig anderes Formularobjekt, das als Textbereich bezeichnet wird und mehrere Eingabezeilen entgegennehmen kann. Schließlich fügen Sie dem Formular eine SENDEN-Schaltfläche hinzu. Durch Anklicken dieser Schaltfläche wird der neue Kommentar in der Datenbank gespeichert. Abbildung 15.11 zeigt die endgültige Version des Formulars.

Abbildung 15.11: Ein Beispiel für ein Kommentarformular; Sie können natürlich auch ein beliebiges anderes Layout verwenden.

Der letzte Schritt, mit dem das Formular funktional gemacht wird, ist das Hinzufügen des Serververhaltens DATENSATZ EINFÜGEN. Damit wird der Datenbank der neue Kommentar hinzugefügt: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie DATENSATZ EINFÜGEN. 3. Geben Sie die für dieses Projekt definierte Verbindung an. 4. Wählen Sie für IN TABELLE EINFÜGEN die Tabelle tblcomment.

522

Das HTML

5. Wählen Sie im Bereich WERTE ABRUFEN AUS: das Formular frmComment. 6. Die einzelnen Formularelemente sollten mit den Feldern in der Datenbank übereinstimmen. Falls sie nicht übereinstimmen, markieren Sie eines der Formularelemente und wählen Sie dann die Datenbankspalte aus, mit der es übereinstimmen soll, sowie ihren Datentyp. 7. Nachdem Sie mit dem Einfügen fertig sind, gehen Sie auf die Seite zurück. Ich habe meine Seite als guestbook.asp abgespeichert. Abbildung 15.12 zeigt das entsprechend definierte Verhalten.

Abbildung 15.12: Die Formularelemente müssen mit den Datenbankfeldern übereinstimmen.

Jetzt müssen Sie nur noch eine Datensatzgruppe einfügen, um die vorhandenen Kommentare anzuzeigen. Weil wir das SQL bereits definiert haben, muss es nur noch in das System eingetragen werden: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf die Schaltfläche mit dem Plussymbol (+) und wählen Sie DATENSATZGRUPPE (ABFRAGE). 3. Klicken Sie auf die Schaltfläche ERWEITERT, um in den erweiterten Modus zu gelangen, falls das noch nicht geschehen ist. 4. Wählen Sie Ihre Datenbankverbindung. 5. Geben Sie der neuen Datensatzgruppe den Namen rsComment. 6. Fügen Sie das folgende SQL in das Abfragefenster ein: SELECT * FROM tblcomment WHERE message NOT LIKE '%QUATSCH%' AND message NOT LIKE '%<>%' ORDER BY messageID DESC.

7. Klicken Sie auf OK. Haben Sie einen Unterschied bemerkt? Der Code hat sich geändert. Statt %<%>% verwenden wir %<>%. Wenn Sie nicht ASP verwenden, können Sie die ursprüngliche Abfrage ohne

523

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

diese Änderung einfügen. Das Problem dabei ist, dass <% und %> einen eingebetteten ASPBefehl kennzeichnen. Wenn Sie also die Abfrage unverändert eingeben, wird das System verwirrt – und letztlich wird es das in das Dokument eingefügte Serververhalten zerstören. Nachdem Sie dieses veränderte Verhalten eingefügt haben, bearbeiten Sie den Code manuell, sodass die Abfrage korrigiert wird. Sie können das % nicht dort einfügen, wo es hingehört, weil UltraDev/ASP erkennt, dass es sich dabei um ein ASP-Tag handelt. Statt dessen speichern Sie es in einer separaten Variablen und fügen diese Variable dann in die Abfrage ein. Öffnen Sie Ihr Dokument, und suchen Sie nach einem Code-Abschnitt ähnlich dem folgenden: <% set rsComment = Server.CreateObject("ADODB.Recordset") rsComment.ActiveConnection = MM_connChapter15_STRING rsComment.Source = "select * from tblcomment WHERE message NOT LIKE '%QUATSCH%' AND message NOT LIKE '%<>%' ORDER BY messageID DESC" rsComment.CursorType = 0 rsComment.CursorLocation = 2 rsComment.LockType = 3 rsComment.Open rsComment_numRows = 0 %>

Wenn Sie Probleme haben, Code in Ihrem Dokument zu finden, verwenden Sie die Funktion SUCHEN im BEARBEITEN-Menü.

In diesem Abschnitt legen Sie die Datensatzgruppe an und definieren die Abfrage. Ändern Sie diesen Code so ab, dass er eine neue Variable pc enthält, die manuell mit der Abfrage verknüpft wird: <% set rsComment = Server.CreateObject("ADODB.Recordset") rsComment.ActiveConnection = MM_connChapter15_STRING pc="%" rsComment.Source = "select * from tblcomment WHERE message NOT LIKE '%QUATSCH%' AND message NOT LIKE '%<"+pc+">%' ORDER BY messageID DESC" rsComment.CursorType = 0 rsComment.CursorLocation = 2 rsComment.LockType = 3 rsComment.Open rsComment_numRows = 0 %>

524

Das HTML

In einigen Projekten müssen Sie ab und zu manuell eine Funktion einfügen – machen Sie sich also damit vertraut, wie Sie Ihre Wege durch den UltraDev-Code finden. Manchmal ist es die einzige Möglichkeit, ein Projekt zum Laufen zu bringen. Schließen Sie die HTML-Ansicht, nachdem Sie Ihre Änderungen vorgenommen haben; das ist alles, was Sie außerhalb der UltraDev-Oberfläche erledigen müssen. Jetzt definieren Sie ein Layout für die Kommentarliste. Ich verwende dafür nur eine zweizeilige Tabelle – eine Zeile enthält den Kommentar, die andere den Namen des Autors. Die E-Mail-Adresse wird (in meiner Version) nur für den Administrator gespeichert und im Gästebuch nicht angezeigt. Öffnen Sie das Fenster DATENBINDUNGEN und expandieren Sie die Datensatzgruppe rsComment. Das Fenster DATENBINDUNGEN sieht aus wie in Abbildung 15.13 gezeigt.

Abbildung 15.13: Ihr Fenster für die Datenbindungen sollte wie hier gezeigt aussehen.

Ziehen Sie die Felder für die Nachricht und den Namen aus dem Fenster für die Datenbindung in Ihr Layout. Damit wird der erste Datensatz der definierten Datensatzgruppe angezeigt, aber was ist mit den anderen? Um mehrere Datensätze anzuzeigen, brauchen Sie das Serververhalten BEREICH WIEDERHOLEN:

1. Markieren Sie den Bereich, der wiederholt werden soll (die Felder für Name und Nachricht). 2. Öffnen Sie die Palette SERVERVERHALTEN. 3. Klicken Sie auf das Plussymbol (+), und wählen Sie BEREICH WIEDERHOLEN. 4. Wählen Sie im Konfigurationsdialog für BEREICH WIEDERHOLEN, den Sie in Abbildung 15.14 sehen, die Datensatzgruppe rsComment aus.

525

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

5. Geben Sie die maximale Anzahl der Nachrichten ein (Wiederholungen), die Sie anzeigen wollen. 6. Klicken Sie auf OK.

Abbildung 15.14: Geben Sie an, wie viele Datensätze angezeigt werden sollen.

Damit haben Sie alle Projekte Ihres ersten Projekttags erfolgreich abgeschlossen. Abbildung 15.15 zeigt den letzten Dokumententwurf. Testen Sie das System – versuchen Sie, ein paar Kommentare in die Datenbank einzutragen. Experimentieren Sie ein bisschen mit den Filteroptionen. Dazu sollten Sie jetzt Wörter wählen, die Sie in einem realen System auch ausfiltern würden.

Abbildung 15.15: Der endgültige Entwurf des Gästebuchs

526

Zusammenfassung

15.6 Zusammenfassung Die heutigen Projekte haben ein paar einfache, schnelle Codeabschnitte vorgestellt, die Sie existierenden, statischen Websites hinzufügen können, um sie attraktiver zu machen und eine gesteigerte Funktionalität zu bieten. Diese Dinge sind Ihnen vielleicht nicht neu, aber das Kapitel hat Ihnen Informationen darüber bereitgestellt, wie sie realisiert werden – was für den Anfänger nicht unbedingt als einfach erachtet wird. Die Verwendung von SQL-Funktionen erhöht die Funktionalität, die Sie mit UltraDev besitzen. UltraDev ist in seiner aktuellen Version ein Werkzeug, das es Ihnen ermöglicht, Informationen in einer Datenbank anzuzeigen und sie einzufügen. Nicht mehr und nicht weniger. Es bleibt Ihnen überlassen, die Vorteile Ihrer UltraDev-Umgebung mit den Vorteilen Ihres Datenbankservers zu kombinieren. Leider mussten Sie auch erfahren, dass UltraDev Schwächen hat. Die manuelle Bearbeitung des Codes nach der Definition einer komplexen Abfrage kommt nicht selten vor, aber normalerweise ist sie nicht schwierig. Merken Sie sich, wo UltraDev seinen Code für den Datenbankzugriff ablegt, um Probleme schneller erkennen und korrigieren zu können. Die restlichen Tage dieser Woche beschäftigen sich mit der Definition und Implementierung vollständiger Web-Applikationen. Manchmal müssen Sie sich dabei die Hände ein bisschen schmutzig machen, aber ich werde mich bemühen, das Ganze auf ein Minimum zu reduzieren.

15.7 Fragen und Antworten F

Können Banner-Bilder so eingerichtet werden, dass sie nicht zweimal hintereinander dasselbe Bild anzeigen? A

F

Mithilfe von Cookies kann sich ein Browser merken, welches Bild er zuletzt gesehen hat (und es dem Server mitteilen). Weitere Informationen über Cookies finden Sie in Kapitel 17, »Komplexe Techniken: Benutzerdaten verfolgen und verwenden«.

Wie können zeitbasierte Bilder für mehrere Jahre genutzt werden? A

In dem erstellten Beispiel laufen die Themen nach einem bestimmten Datum ab und können nicht wiederverwendet werden. Wie im Kapitel beschrieben, stellt MySQL Funktionen bereit, um Daten abhängig vom Monat oder Tag eines Jahres zu vergleichen. Jede dieser Funktionen kann für mehrere Jahre eingesetzt werden.

527

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren

F

Muss ich die Abfrage %<%>% auch für andere Serverplattformen als ASP abändern? A

F

ASP kennzeichnet mithilfe von <%> eingebetteten Code – deshalb das Problem in UltraDev. Falls Sie eine eingebettete Sprache verwenden, die ihre Tags anders kennzeichnet, sollten Sie dieses Problem nicht haben.

Kann ich mein Gästebuch zu einem vollfunktionalen Nachrichtensystem ausbauen? A

Warten Sie bis morgen – da werden wir genau das tun!

15.8 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. Was bewirkt %? 2. Warum erscheinen zufällig ausgewählte Bilder mehrfach hintereinander? 3. Warum muss eine separate Variable, die % enthält, in den Code eingefügt werden? 4. Warum ist es nicht wichtig, wenn für die Applikation mit dem zufällig ausgewählten Banner-Bild und für das zeitbasierte Bild mehrere Bilder zurückgegeben werden? 5. Was bewirkt die Funktion RAND() in MySQL?

Übungen 1. Überlegen Sie, ob Sie für das Banner-Programm Cookies einsetzen können, sodass nicht zweimal hintereinander dasselbe Bild erscheint – nachdem Sie Kapitel 17 gelesen haben. 2. Ändern Sie die Abfrage für die jahreszeitlichen Themen ab, sodass die Bildauswahl auf dem Tag im Jahr basiert. Auf diese Weise können Sie spezielle Datumswerte (Neujahr usw.) sowie bestimmte Jahreszeiten (Frühling, Sommer, Herbst) angeben. 3. Fügen Sie mit dem Wissen aus Kapitel 10 die Möglichkeit ein, sich durch mehrere Kommentar-Bildschirme zu bewegen.

528

Komplexe Techniken: Datensammlung und Berichte

6 1

Komplexe Techniken: Datensammlung und Berichte

Bisher haben Sie gelernt, wie Daten in Datenbanken eingegeben und Abfragen dazu genutzt werden, diese wieder anzuzeigen – aber die beiden Prozesse wurden kaum integriert. Wenn eine Website dynamische Daten anzeigt, gibt es in der Regel auch ein Backend für diese Website, wo die gespeicherten Daten aktualisiert werden. Dieses Kapitel legt ein Nachrichten-Board-System an, das die Techniken zum Sammeln von Daten und zur Berichterstellung nutzt. Damit werden fast alle Funktionsmerkmale von UltraDev in einer einzigen Applikation kombiniert. Die Themen der heutigen Lektion: 쐽

Entwurf eines völlig neuen Web-Bulletin-Board-Systems – mit Datenbankunterstützung

쐽

Implementierung eines benutzerbasierten Datensatzsystems ohne die Anforderung, eine separate Benutzerdatenbank zu führen

쐽

Bereitstellung moderierter Veröffentlichungen

쐽

Anlegen eines Systems, das einfach erweitert und wieder verwendet werden kann

16.1 Eingaben und Ausgaben: Übersicht über das Nachrichtensystem Eine der gebräuchlichsten Web-Applikationen, die es gibt, sind die Nachrichten-Boards. Das sind Foren, in denen Benutzer Nachrichten austauschen können. Vor einigen Jahren habe ich ein Nachrichten-Board-Programm (in C geschrieben) für mehr als 2.000 DM verkauft. Glücklicherweise kann es heute in UltraDev in ein bis zwei Stunden entwickelt werden. Dieses Kapitel kombiniert viele der Standardverhalten von UltraDev, die Sie bisher kennen gelernt haben. Das Ergebnis ist eine Nachrichten-Applikation, die zahlreiche Funktionsmerkmale der kommerziellen Pakete anbietet – und Sie können sie ganz alleine entwickeln. Damit bieten Sie Benutzern und Administratoren insbesondere die folgenden Möglichkeiten: 쐽

Absetzen von Nachrichten ohne Anmeldeprozedur

쐽

Absetzen der beliebten Nachrichtensymbole in jeder Nachricht

쐽

Löschen der Nachrichten auf dem Server

쐽

Moderieren von Nachrichtenforen

쐽

Nachrichten durchsuchen und sortieren

530

Eingaben und Ausgaben: Übersicht über das Nachrichtensystem

Definition der Sitemap Wie für jedes Projekt sollten Sie als Erstes einen Plan für Ihre Site anlegen. Die Sitemap definiert alle Bildschirme, die wir anlegen müssen, und beschreibt die grundlegende Kommunikation zwischen den Bildschirmen. Für unser Nachrichten-Board-System brauchen wir relativ wenige Bildschirme. Das endgültige Produkt bietet eine umfassende Funktionalität, aber wir kommen mit ein paar wenigen Bildschirmen aus, weil der Inhalt die Änderungen darstellt. Und das brauchen wir: 1. Nachrichtenliste – Eine Liste aller Nachrichten, die im System abgelegt wurden. Dieser Bildschirm kann eine integrierte Suchfunktion enthalten, ebenso wie Spaltenüberschriften, nach denen durch Anklicken sortiert werden kann. Statt die Bildschirme für jedes dieser Funktionsmerkmale (Sortieren/Suchen) voneinander zu trennen, verwenden wir eine einzige Anzeige mit mehreren Serververhalten. 2. Nachrichtenanzeige – Wenn ein Benutzer eine Nachricht gefunden hat, die er anzeigen will, öffnet er diese in einem Anzeigefenster. Eines der einzigartigen Funktionsmerkmale dieses Bulletin-Board-Systems ist, dass es auch die Antworten auf die angezeigte Nachricht anzeigt. Wenn der Benutzer Besitzer einer Nachricht ist, kann er sie löschen, nachdem er sie gelesen hat. 3. Nachrichteneingabe – Die letzte Komponente dieser Site ist der Nachrichteneingabe gewidmet. Es gibt zwei Möglichkeiten, den Bildschirm für die Nachrichteneingabe zu erreichen – über den Bildschirm für die Nachrichtenanzeige, sodass Antworten formuliert werden können, sowie von der Hauptnachrichtenliste aus. Das ist alles, was wir für ein vollfunktionales System brauchen. Je mehr Sie mit UltraDev arbeiten, desto mehr erkennen Sie, dass sehr viel in sehr wenig Dateien erledigt werden kann. Abbildung 16.1 zeigt die Sitemap für unser Nachrichten-Board.

Master-Nachrichtenliste

Nachricht anzeigen

Nachricht erstellen

Abbildung 16.1: Die Sitemap für das Nachrichtensystem ist bemerkenswert einfach.

531

Komplexe Techniken: Datensammlung und Berichte

Nachdem die Sitemap entwickelt wurde, legen Sie das Backend für das System an. Achten Sie dabei auf die Funktionsmerkmale, die Sie realisieren wollen, weil sie sehr wichtig für die Struktur der eigentlichen Datenbank sind.

Anlegen des SQL Das SQL für dieses System ist wirklich sehr einfach. Während des Entwurfsprozesses fallen jedoch einige wichtige Entscheidungen an. Zunächst überlegen wir, welche Informationen für bestimmte Anforderungen abgelegt werden müssen: 쐽

Nachrichtenthema

쐽

Nachrichtenbildsymbol

쐽

Nachrichtenautor

쐽

Nachrichtenrumpf

Ganz einfach! Wir beginnen mit einer genauso einfachen Tabellendefinition: create table message ( subject varchar(80), iconURL varchar(80), author varchar(80), body text )

Wir haben noch keinen Primärschlüssel definiert, weil die Tabelle kein Feld enthält, das ohne Weiteres als eindeutiger Kennzeichner verwendet werden könnte. Leider kann MySQL nur 512 Byte in einem varchar speichern, somit wäre die Länge der Nachricht sehr beschränkt. Ein alternativer Ansatz ist die Verwendung eines Blob – eines binären Objekts. Ein binäres Objekt kann mehrere Gigabyte groß werden – mehr als genug für eine kurze Nachricht. Einige Datenbankserver unterstützen den Feldtyp memo. MySQL bietet den Feldtyp text, der so viel wie ein entsprechendes Blob aufnehmen kann. Wenn ein Blob einen weniger eingeschränkten Gültigkeitsbereich hat, warum verwendet man dann nicht immer Blobs? Die Verarbeitung von Blobs ist nicht ganz einfach, wenn Sie vorhaben, Schnittstellen zur Außenwelt zu schaffen. Wenn Sie beispielsweise mit dem Datenbanktreiber myODBC aus MS Access eine Verbindung zu einer MySQL-Datenbank einrichten, können Sie nicht auf die Daten in der Tabelle zugreifen. Stellen Sie sicher, dass Sie mit Ihren Daten überall arbeiten können, wo das erforderlich ist. Glücklicherweise haben wir den Typ text, der ausgezeichnet funktioniert!

532

Eingaben und Ausgaben: Übersicht über das Nachrichtensystem

Jetzt wollen wir das Problem betrachten, wenn kein Primärschlüssel vorhanden ist – wie beispielsweise eine Nachrichten-ID. Um ein System zu implementieren, in dem wir alle Antworten auf eine bestimmte Nachricht anzeigen können, brauchen wir außerdem ein zweites Feld, das ebenfalls eine Nachrichten-ID enthält. Wie? Zwei Nachrichten-IDs? Wozu um alles in der Welt soll das gut sein? Für unser Nachrichten-Board-System brauchen wir zwei Nachrichten-IDs. Die erste ID ist der eindeutige Bezeichner für die Nachricht, die zweite ID wird auf den Wert einer übergeordneten Nachricht gesetzt. Wenn Sie beispielsweise auf eine Nachricht mit der ID 325 antworten, hat die neue Nachricht die parentID 325. Wenn die übergeordnete Nachricht angezeigt wird, werden außerdem alle anderen Nachrichten, die eine parentID haben, die gleich der ID der übergeordneten Nachricht ist, in der Liste der Antworten angezeigt. Die Definition unserer Nachrichtentabelle sieht damit jetzt so aus: create table message ID parentID subject iconURL author body primary key (ID) )

( int not null auto_increment, int, varchar(80), varchar(80), varchar(80), varchar(250),

Legen Sie diese Tabelle noch nicht auf Ihrem Server an! Sie muss noch ein bisschen abgeändert werden!

Die ID dieser Nachricht ist etwas Neues für uns – statt einer normalen ganzen Zahl handelt es sich um eine auto_increment-Ganzzahl. Das nimmt uns Einiges an Programmierarbeit für dieses System ab. Wir können nicht davon ausgehen, dass ein Benutzer eine eindeutige ID eingibt. Statt das jedoch programmtechnisch in ASP/JSP/CFML zu lösen, erzeugt der SQL-Server für jede neue Nachricht, die dem System hinzugefügt wird, automatisch eine neue Nummer. Coole Sache, was? Damit haben wir schon das Meiste geschafft auf dem Weg zu einem vollständigen Modell für das Datenbanksystem, aber noch nicht alles. Eines der Funktionsmerkmale dieses Systems ist, dass der Benutzer die Möglichkeit haben soll, eine Nachricht zu löschen, die er selbst abgesetzt hat. Weil ich dieses Buch schreibe, mache ich alles so, wie ich es für richtig halte – das ist die eigentliche Befriedigung beim Schreiben. Ich will nicht auf eine Website gehen und versuchen, an einer Diskussion teilzunehmen, um dann feststellen zu müssen, dass ich mich zuvor langwierig registrieren muss, um überhaupt eine Nachricht absetzen zu können.

533

Komplexe Techniken: Datensammlung und Berichte

Wo ist das Problem? Es gibt absolut keinen Grund, jemanden zu einer Registrierung zu zwingen, der an einer Diskussion teilnehmen will! Damit zwingt man nämlich den Benutzer nicht, korrekte Informationen einzutragen, sondern verlangsamt ihn nur. Ich will meine Gedanken veröffentlichen und dabei meinen Weg gehen. Deshalb werden wir auch dieses Nachrichten-Board auf meine Weise entwickeln – kein langer Registrierungsprozess, um Nachrichten absetzen zu können! Sie dürfen es natürlich jederzeit abändern, um genau Ihre Vorstellungen zu verwirklichen. Meine bevorzugte Technik, wie ich dem Benutzer die Möglichkeit verschaffe, Nachrichten zu löschen (oder sie zu bearbeiten), ist die Speicherung eines einfachen Kennworts zusammen mit jeder Nachricht. Wenn die Nachricht angezeigt wird, wird unten im Fenster ein kleines Formular mit Kennwortfeld und einer Löschen-Schaltfläche angezeigt. Geben Sie einfach das Kennwort für die Nachricht ein und klicken Sie auf die LöschenSchaltfläche. Ratz-fatz – weg ist sie! Damit brauchen wir ein weiteres Feld in der Tabelle – ein Kennwortfeld. Wir sind noch nicht ganz fertig. Der Datenbank muss noch eine weitere Funktionalität hinzugefügt werden, damit unser Nachrichten-Board moderiert werden kann. Für diejenigen unter Ihnen, die nicht genau wissen, was ein moderiertes Nachrichten-Board ist: Es ermöglicht einem Administrator, auszuwählen, welche Nachrichten angezeigt werden und welche nicht. Um dies in unserem System zu implementieren, führen wir einfach ein verborgenes Feld mit einem booleschen Wert in das Datenbankmodell ein. Wenn eine Nachricht angezeigt werden soll, wird der Wert des verborgenen Felds auf False (0) gesetzt. Andernfalls wird er auf True (1) gesetzt. Diese letzte Information führt uns zu folgender Tabellendefinition: create table message ( ID int not null auto_increment, parentID int, subject varchar(80), iconURL varchar(80), author varchar(80), body varchar(250), password varchar(50), hidden int, primary key (ID) )

Das ist alles. Abbildung 16.2 zeigt die endgültige Datenbankdefinition. Sie fragen sich jetzt vielleicht, wie eine Tabelle aus einer einzigen Tabelle bestehen kann. Das ist wirklich alles, was wir brauchen. Das gesamte Nachrichten-Board basiert auf einer einzigen Daten-Entität – der Nachricht.

534

Die Hauptlistenansicht

Message ID* parentID subject iconURL author body password hidden

Abbildung 16.2: Die Datenbank für das Nachrichten-Board ist relativ einfach.

Im letzten Schritt füllen Sie die Nachrichtendatenbank mit ein paar Testnachrichten. Später werden Sie feststellen, dass es viel einfacher ist, Datensätze über die Oberfläche zum Schreiben der Nachrichten einzutragen, weil diese die IDs automatisch verwaltet. Momentan ist es aber am einfachsten, ein paar Nachrichten mit der ID 0 in das System einzufügen. Hier die Datensätze, die ich dafür verwende: insert into message values ('','0','Testnachricht','icon1.jpg','John Ray', 'Dies ist ein Test des Nachrichtensystems','smugguy','0'); insert into message values ('','0','Willkommen beim Nachrichten-Board', 'icon3.jpg','Administrator','Willkommen beim neuen Nachrichtensystem!',' ➥adminmessage','0'); insert into message values ('','0','Cool gemacht!', 'icon1.jpg','John Ray','Gute Arbeit, Jungs, tolles System!','smugguy','0');

Ich werde diese Datensätze mehrfach in das System eintragen, sodass die Datenbank ein bisschen voller wird. Wie ist das möglich? Müssen die Datensätze nicht eindeutig sein? Ja, müssen sie! Für die Definition der MySQL-Datenbank wurde die auto_increment-Funktion verwendet. Weil unser ID-Feld auf auto_increment gesetzt ist, wird bei jedem Eintrag einer neuen Nachricht eine neue ID erzeugt. Selbst wenn die INSERT-Anweisungen Ihnen identisch erscheinen, trägt das System automatisch einen neuen Wert in das ID-Feld ein, wenn ein neuer Datensatz eingefügt wird.

16.2 Die Hauptlistenansicht Alle Teile der Site können aus einfachen Komponenten zusammengesetzt werden – setzen Sie nur die Bausteine an die richtige Stelle und lassen Sie dabei Ihre Finger gekreuzt. Das Fingerkreuzen mag in manchen Situationen helfen, aber Sie sollten sich nicht darauf verlassen, insbesondere bei Problemen außerhalb der UltraDevUmgebung. Probleme, die durch Fingerkreuzen nicht gelöst werden können, sind nicht selten ein Fall für eine höhere Instanz.

535

Komplexe Techniken: Datensammlung und Berichte

Wie bei jeder Site, die Sie einrichten, müssen Sie als Erstes ein neues UltraDev-Projekt anlegen und eine geeignete Verbindung zu Ihrer Datenbank herstellen. Ich habe ein paar Icon-Dateien angelegt, icon1.jpg, icon2.jpg usw. und sie auf dem Server abgelegt. Jetzt können wir anfangen. Zunächst legen wir die Seite mit der Hauptlistenansicht an. Dies ist die Hauptseite der Site und alle Benutzer der Web-Applikation sollen zuerst hierhin gelangen. Versuchen Sie, das Ganze so einfach wie möglich zu gestalten. Wenn Sie Tausende von Nachrichten anbieten wollen, sollten Sie die Ladezeiten so kurz wie möglich halten. Berücksichtigen Sie außerdem die Funktionen, die diese Seite unterstützen soll: 쐽

Sortieren – Stellt Spaltenüberschriften bereit, die angeklickt werden, um die Daten nach der betreffenden Spalte zu sortieren.

쐽

Nachrichten schreiben – Legt einen Link zum Schreiben neuer Nachrichten an.

쐽

Navigation in der Nachrichtenliste – Richtet die Links VORHERIGER und NÄCHSTER für die Nachrichtenliste ein.

쐽

Suchen – Es sollte ein einfaches Suchformular für die Suche nach Schlüsselwörtern bereitgestellt werden.

쐽

Eine Nachrichtenliste – Das Format der eigentlichen Nachrichtenliste!

Weil ich Ihnen diese Funktionsmerkmale am Anfang des Kapitels versprochen habe, sollte ich nun auch damit beginnen. Abbildung 16.3 zeigt ein einfaches Layout für meinen Bildschirm mit der Nachrichtenliste. Jetzt legen wir eine Datensatzgruppe an, die alle Nachrichten auflistet. Weil wir die Funktionalität nach und nach einfügen, müssen wir immer wieder zu der DatensatzgruppenAbfrage zurück und sie entsprechend anpassen.

Die Nachrichtenliste anlegen Als erstes wollen wir die Nachrichtenliste auf dem Bildschirm anzeigen. Dazu legen wir eine Datensatzgruppe an, die die für die Nachrichtenliste benötigten Felder enthält. Außerdem brauchen Sie einen Filter, der Datensätze ermittelt, deren verborgene Felder gleich Null sind. Wir wollen dem Administrator die Möglichkeit geben, das Nachrichten-Board zu moderieren. Ist das verborgene Feld für eine Nachricht auf 1 gesetzt, wollen wir es nicht anzeigen. Wir sollten also nur die Nachrichten auswählen, für die das verborgene Feld gleich 0 ist. Meine erste Datensatzgruppen-Definition sehen Sie in Abbildung 16.4.

536

Die Hauptlistenansicht

Abbildung 16.3: Entwerfen Sie Ihren Bildschirm mit der Nachrichtenliste so, dass alle für die Site benötigten Elemente bereitgestellt werden.

Abbildung 16.4: Legen Sie Ihre eigene Datensatzgruppe ähnlich der hier gezeigten an.

Jetzt legen Sie Ihre Nachrichtenliste wie folgt an: 1. Öffnen Sie die Palette DATENBINDUNGEN. 2. Erweitern Sie Ihre Datensatzgruppen-Ansicht, sodass Sie die verfügbaren Felder sehen. 3. Ziehen Sie die Felder an die entsprechende Position auf dem Entwurfsbildschirm. 4. Fügen Sie für das Feld iconURL ein neues Bild ein, wo das Symbol auf Ihrem Bildschirm erscheinen soll.

537

Komplexe Techniken: Datensammlung und Berichte

5. Statt einen Dateinamen für das Symbolbild auszuwählen, klicken Sie auf die Schaltfläche DATEINAMEN WÄHLEN AUS DATENQUELLEN und wählen in der Datensatzgruppe das Feld iconURL. 6. Schließlich markieren Sie alle Felder und das Bild auf dem Bildschirm und fügen das Serververhalten BEREICH WIEDERHOLEN ein. Wählen Sie dabei eine sinnvolle Anzahl an Wiederholungen – 600 Nachrichtenüberschriften auf einer einzigen Seite könnten etwas zu viel des Guten sein. Nachdem Sie Ihre Liste entworfen haben, gehen Sie in den Live Data-Ansichtsmodus. Wenn Sie meinem grundlegenden Entwurf gefolgt sind, sehen sie jetzt etwas wie in Abbildung 16.5 gezeigt.

Abbildung 16.5: Die Nachrichtenliste ist fast fertig.

Jetzt werde ich meinem Bildschirm einen Kennzeichner hinzufügen, der anzeigt, wie viele Nachrichten vorhanden sind, und was die erste und die letzte Nachricht sind. Dazu ziehen Sie die Einträge [total records], [first record index] und [last record index] von Ihrer Datensatzgruppe in die Entwurfsansicht an die Stelle, wo sie auf dem Bildschirm erscheinen sollen. Im nächsten Schritt verankern Sie die Links NÄCHSTE NACHRICHTEN und VORHERIGE NACHRICHTEN und weisen ihnen Funktionalität zu. Sie kennen diesen Prozess bereits, er sollte Ihnen deshalb keinerlei Schwierigkeiten bereiten. 1. Markieren Sie das Objekt oder den Text, das bzw. der den Link zu den nächsten Datensätzen darstellen soll.

538

Die Hauptlistenansicht

2. Wählen Sie das Serververhalten ZUM NÄCHSTEN DATENSATZ VERSCHIEBEN und fügen Sie sie Ihrem Projekt hinzu. Sie brauchen für dieses Verhalten nur die richtige Datensatzgruppe auszuwählen, und weil wir nur eine einzige Datensatzgruppe haben, sollte das kein Problem sein. Abbildung 16.6 zeigt die Konfiguration für den Link NÄCHSTE NACHRICHTEN. 3. Wiederholen Sie diese beiden Schritte mit dem Link VORHERIGE NACHRICHTEN und dem Serververhalten ZUM VORHERIGEN DATENSATZ VERSCHIEBEN. Abbildung 16.6: Wählen Sie Ihren Link und die Datensatzgruppe aus, um die Navigationsfunktionen für die Nachrichtenliste zu realisieren.

Nachdem Sie diese Ergänzungen vorgenommen haben, testen Sie Ihre Seite. Jetzt sollte es möglich sein, sich zwischen den Bildschirmen aller verfügbaren Nachrichten zu bewegen. Um das Projekt benutzerfreundlicher zu machen, sollten Sie die Links VORHERIGE NACHund NÄCHSTE NACHRICHTEN entfernen, wenn es nicht sinnvoll ist, sie anzuklicken. Wenn Sie die erste Nachricht anzeigen, gibt es keine vorhergehenden Nachrichten. Wenn Sie die letzte Nachricht anzeigen, gibt es keine weiteren Nachrichten. RICHTEN

Wenn Sie eine ältere Version von UltraDev verwenden, werden Sie mit dem folgenden Abschnitt Probleme haben. In früheren Versionen war das Verhalten BEREICH ANZEIGEN das Verhalten BEREICH VERBERGEN. Um die Projekte in diesem Buch mit der Verhaltensweise BEREICH VERBERGEN zu realisieren, kehren Sie einfach die Bedingungen um, unter denen ein Bereich angezeigt wird, um das Verhalten »Verbergen« nachzuempfinden. Beispielsweise ist das Anzeigen eines Bereichs, wenn es sich um den letzten Datensatz handelt, dasselbe wie das Verbergen eines Bereichs, wenn er nicht der letzte Datensatz ist. Verbergen Sie diese beiden Bereiche mit dem Serververhalten BEREICH ANZEIGEN wie folgt: 1. Markieren Sie den Link NÄCHSTE NACHRICHTEN. 2. Klicken Sie auf das Pluszeichen (+) und wählen Sie das Serververhalten BEREICH ANZEIGEN. 3. Wählen Sie die Option BEREICH ZEIGEN, WENN NICHT LETZTER DATENSATZ. UltraDev fragt nach der Datensatzgruppe, auf der die Bedingung basieren soll, wie in Abbildung 16.7 gezeigt.

539

Komplexe Techniken: Datensammlung und Berichte

4. Wiederholen Sie diesen Prozess für den Link VORHERIGE NACHRICHTEN – jetzt aber mit der Option BEREICH ZEIGEN, WENN NICHT ERSTER DATENSATZ für das Verhalten. Abbildung 16.7: Verbergen Sie die Links Nächste Nachrichten und Vorherige Nachrichten, falls sie auf nichts verweisen.

Während wir uns mit dem Verbergen und Anzeigen von Bereichen beschäftigen, wollen wir zwei weitere bedingte Bereiche für Ihren Dokumententwurf ansprechen. Der erste Bereich, der verborgen werden soll, ist die eigentliche Nachrichtenliste! Falls keine Nachrichten zur Verfügung stehen, braucht man die Nachrichtenüberschriften auch nicht anzuzeigen. Wenden Sie das Verhalten BEREICH ANZEIGEN, wenn die Datensatzgruppe nicht leer ist. Auf diese Weise werden die Spaltenüberschriften nur dann angezeigt, wenn eine oder mehr Nachrichten aufzulisten sind. Der zweite Bereich, der angezeigt werden soll, ist etwas weniger offensichtlich, weil Sie ihn noch nicht angelegt haben. Wenn es keine Nachrichten gibt, dann sollte man das dem Benutzer mitteilen, damit er nicht schon auf dem ersten Bildschirm verunsichert wird. Fügen Sie die Meldung »Es stehen keine Nachrichten zur Verfügung« in den Inhaltsbereich des Bildschirms ein – aber außerhalb des wiederholten Bereichs (verborgene Bereiche dürfen wiederholte Bereiche nicht überlappen). Wenden Sie auf diese Meldung die Verhaltensweise BEREICH ANZEIGEN an, mit der Bedingung, dass er angezeigt wird, wenn Sie die Option WENN DATENSATZGRUPPE LEER IST ausgewählt haben.

Sortieren der Nachrichtenliste O.K., weiter geht's. Wir wollen dem System Sortiermöglichkeiten hinzufügen. Das ist ein wenig anders als alles, was wir bisher gemacht haben. Wir brauchen einen Link auf jede der Spaltenüberschriften auf der Seite und übergeben einen Parameter, der die Datensatzgruppe angibt und ihr mitteilt, wonach sie sortiert werden soll. (Falls Sie das noch nicht verstanden haben, machen Sie sich keine Gedanken, das kommt noch.) Beispielsweise haben wir drei Überschriften, nach denen wir sortieren wollen:

540

Die Hauptlistenansicht

쐽

ID

쐽

Autor

쐽

Thema

Diese Überschriften entsprechen den drei Feldern der Datenbank. Zufälligerweise haben diese Felder denselben Namen wie die Überschriften. Was ist mit den Links, die wir anlegen müssen? Sie sind ganz einfach – Sie ändern den Dateinamen index.asp so, wie Sie die Seite anzeigen wollen: index.asp?sortby=ID index.asp?sortby=Autor index.asp?sortby=Thema

Richten Sie diese Links jetzt in Ihrem Dokument ein. Wählen Sie die verschiedenen Spaltenüberschriften und verwenden Sie die Eigenschaftenpalette, um den Link zur entsprechenden Überschrift in der Liste einzurichten. Nachdem die Links angelegt wurden, kann der Benutzer die einzelnen Spaltenüberschriften anklicken. Dieser Klick sendet die Variable sortby an die Seite mit der Nachrichtenliste zurück und setzt sie auf die Spalte, nach der sortiert werden soll. Leider weiß die Seite mit der Nachrichtenliste nicht, wie man irgend etwas sortiert. Wie müssen die Datensatzgruppe ein wenig abändern! Um der Seite die Möglichkeit zu geben, eine Sortieroperation durchzuführen, nehmen Sie die folgenden Änderungen an der Datensatzgruppe vor:

Abbildung 16.8: Fügen Sie die ORDER BYInformation ein, dann kann Ihre Site sortieren!

541

Komplexe Techniken: Datensammlung und Berichte

1. Öffnen Sie die Datensatzgruppe und wechseln Sie in den erweiterten Modus. 2. Fügen Sie der Abfrage eine neue Variable hinzu, varSortby. Ihr Anfangswert sollte ID sein, der Laufzeitwert sollte Request('sortby') sein. 3. Ändern Sie die ORDER BY-Klausel der SQL-Anweisung so ab, dass sie nach der Variablen varSortby sortiert (d.h. ORDER BY 'varSortby'). 4. Jetzt sollte Ihre Datensatzgruppen-Definition aussehen wie in Abbildung 16.8 gezeigt. Wenn Sie Ihre Links korrekt definiert haben, sollte alles funktionieren. Klicken Sie auf die Links, um die zugehörigen sortby-Parameter in die Datensatzgruppe einzufügen, sodass die Datensatzliste nach dieser Spalte sortiert wird.

Parameter für die Verhaltensweise ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN Leider gibt es bei dieser Technik ein Problem. Sie funktioniert für die grundlegende Nachrichtenliste, aber versuchen Sie jetzt, auf eine zweite Seite mit Nachrichten zu gehen und klicken Sie die Überschrift an, nach der sortiert werden soll. Sie sehen, dass die Nachrichtenliste nach dem Überschriftsfeld sortiert sind, aber bei den angezeigten Nachrichten handelt es sich um die Nachrichten von der ersten Seite. Alle Parameter, die steuern, welche Datensätze angezeigt werden, gehen durch die verwendeten direkten Links verloren. Wie können Sie dieses Problem umgehen? Sie verwenden eine etwas abgeänderte Variante des Serververhaltens ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN. Gehen Sie wie folgt vor, um Links anzulegen, die in jeder Situation korrekt funktionieren, nicht nur in der grundlegenden Nachrichtenliste. 1. Wählen Sie das Objekt oder den Text aus, das bzw. der zu einem Sortierlink werden soll. 2. Fügen Sie die Verhaltensweise ZU SEITE MIT ERGÄNZENDEN THEMEN WECHSELN ein, und lassen Sie den Link auf die Seite zurückzeigen, von der er kommt. 3. Übergeben Sie sowohl URL- als auch Formularparameter zusammen mit dem Link. 4. Wiederholen Sie diese Prozedur für alle Links. Nachdem Sie der Seite die Verhaltensweisen hinzugefügt haben, bearbeiten Sie den Code direkt. Im aktuellen Status geben die Links nur die bereits existierenden Parameter weiter. Sie müssen die Möglichkeit nutzen, den sortby-Parameter in der URL-Zeile zu übergeben. Öffnen Sie den Quellcode und suchen Sie nach Ihren Links. Sie sehen in etwa wie folgt aus: ">Thema

542

Die Hauptlistenansicht

Schreiben Sie unbedingt das Ampersand-Zeichen (&) zwischen sortby=Thema und <%= MM_keepBoth %>. Wenn Sie dieses Symbol vergessen, entstehen unvorhersehbare Ergebnisse. Damit funktionieren die Links. Das ist natürlich nicht perfekt, weil es nicht vollständig in der UltraDev-Umgebung automatisiert werden kann. Es demonstriert jedoch, dass Sie die Beschränkungen von UltraDev umgehen können, indem Sie so viel Code wie möglich innerhalb der Oberfläche erstellen und dann gegebenenfalls manuelle Änderungen vornehmen. Wenn Sie in der UltraDev-Umgebung bleiben wollen, um die Änderungen an Ihren Links vorzunehmen, rufen Sie den Eigenschafteninspektor auf und fügen dem Link den zusätzlichen Code hinzu. Damit haben wir die Sortiermöglichkeit bereitgestellt. Jetzt wollen wir die Möglichkeit schaffen, bestimmte Nachrichten zu suchen und eine Liste nur derjenigen Nachrichten zu erstellen, die ein bestimmtes Schlüsselwort enthalten.

Durchsuchen der Nachrichtenliste In der letzten Woche haben Sie bereits die Suchfunktion für das Katalogsystem kennen gelernt. Hier machen wir genau dasselbe. Es muss nur eine Entscheidung getroffen werden, bevor wir die Suchfunktion implementieren können: Wonach genau suchen wir? Sollen wir das Autor-Feld durchsuchen? Oder das Thema-Feld? Oder den eigentlichen Nachrichtenrumpf? Diese Entscheidung bleibt Ihnen überlassen, aber der Vollständigkeit halber wollen wir hier alle Möglichkeiten einbeziehen. Auf einer Produktions-Website sollten Sie die Geschwindigkeit komplexer Suchen überprüfen, bevor Sie sie anbieten. Das Durchsuchen des Nachrichtentexts für Tausende von Nachrichten kann dauern – auch auf schnellen Computern. Um alle Felder zu durchsuchen, brauchen wir mehr Logik in der Datensatzgruppe, die wir immer weiter verfeinert haben. Wenn Sie sich an das Kapitel über die Kataloge erinnern, wissen Sie, dass wir ein Schlüsselwort mithilfe der LIKE-Syntax mit einem Feld vergleichen können: WHERE suchfeld LIKE '%varSuchbegriff%'.

543

Komplexe Techniken: Datensammlung und Berichte

Das fügen wir jetzt der Definition unserer Datensatzgruppe für die Seite hinzu. Öffnen Sie die Palette SERVERVERHALTEN und doppelklicken Sie auf DATENSATZGRUPPE (ABFRAGE) für die Seite. Wechseln Sie dafür gegebenenfalls zuvor in den erweiterten Modus. Die aktuelle Abfrage sollte etwa wie folgt aussehen: SELECT ID, Thema, iconURL, Autor FROM message WHERE hidden = MMColParam ORDER BY 'varSortby'

Beachten Sie, dass es in der SQL-Anweisung bereits eine WHERE-Klausel gibt. Wir können diese Bedingung nicht einfach löschen und eine neue einfügen, aber wir können sie ergänzen, indem wir die Abfrage neu formulieren, sodass sie wie folgt aussieht: SELECT ID, Thema, iconURL, Autor FROM message WHERE hidden = MMColParam AND (Thema LIKE '%varSuchbegriff%' OR author LIKE '%varSuchbegriff%' OR body LIKE '%varSuchbegriff%') ORDER BY 'varSortby'

Bevor Sie die Abfrage schließen, definieren Sie die Variable varSuchbegriff: 1. Klicken Sie im Variablenbereich auf das Plussymbol (+), um eine neue Zeile in die Variablenliste einzufügen. 2. Setzen Sie den Variablennamen auf varSuchbegriff. 3. Setzen Sie den Standardwert auf %. Damit wird sichergestellt, dass alle Ergebnisse angezeigt werden, falls kein Suchbegriff angegeben wird. 4. Setzen Sie den LAUFZEITWERT auf Request(Suchbegriff). Abbildung 16.9 zeigt die endgültige Abfragekonfiguration. Der letzte Schritt, um die Suchfunktion in Ihrem Code zu verankern, ist sicherzustellen, dass das Eingabefeld für das Suchformular gleich Suchbegriff ist. (Das ist für die Konfiguration des Laufzeitwerts erforderlich, den wir eben gesetzt haben, Request(Suchbegriff)). Die Formularaktion muss so gesetzt werden, dass sie auf dieselbe Seite zurückverweist. Wie die Sortierfunktion wird auch die Suchfunktion innerhalb des eingebetteten Codes auf einer einzigen Seite implementiert. Sie könnten die Suchfunktion auch auf einer anderen Seite anlegen, aber diese Suche wäre dann schwieriger zu verwalten. Ich versuche, so viel zusammenhängende Funktionalität wie möglich im Code einer einzigen Seite unterzubringen. Glückwunsch! Damit haben Sie den schwierigsten Teil dieses Kapitels hinter sich gebracht. Neben ein paar Links, die noch angelegt werden müssen, ist die Nachrichtenlistenansicht fertig. Jetzt werden wir Nachrichten lesen und schließlich Nachrichten schreiben. Diese beiden letzten Abschnitte sind aber wesentlich einfacher als der Aufbau der Nachrichtenliste.

544

Nachrichten lesen

Abbildung 16.9: Ändern Sie die Datensatzgruppe ein letztes Mal ab, um die Suchmöglichkeit zu implementieren.

16.3 Nachrichten lesen Es ist zwar möglich, das Lesen der Nachrichten innerhalb desselben Dokuments zu realisieren wie die Nachrichtenliste, aber in einem neuen Dokument ist es einfacher zu implementieren. Damit Sie sich alles gut merken können, geben Sie diesem Dokument den Namen message (mit einer für Ihre Serverplattform geeigneten Dateinamenerweiterung). Bevor Sie Ihre Ansicht zum Lesen von Nachrichten entwerfen, fügen wir einen Link auf die Nachrichtenlistenansicht ein, sodass die Benutzer auf den Link klicken können, um eine Nachricht anzuzeigen. Wählen Sie jetzt den Text aus, auf den der Benutzer klicken soll, um die vollständige Nachricht zu sehen. Die Themenzeile ist gut dafür geeignet. Erzeugen Sie den Link mithilfe des Serververhaltens ZU DETAILSEITE WECHSELN: 1. Wählen Sie den Text oder das Objekt aus, der bzw. das auf das Fenster zum Lesen von Nachrichten verweist. 2. Fügen Sie das Serververhalten ZU DETAILSEITE WECHSELN ein. 3. Konfigurieren Sie die Verhaltensweise wie in Abbildung 16.10 gezeigt, sodass sie eine URL-Parameter-ID übergibt, die auf das ID-Feld in der Datensatzgruppe auf der neuen Seite message.asp verweist. 4. Übergeben Sie existierende URL- und Formularparameter. 5. Klicken Sie auf OK, nachdem Sie fertig sind.

545

Komplexe Techniken: Datensammlung und Berichte

Abbildung 16.10: Übergeben Sie die Nachrichten-ID der neuen Nachrichtenseite.

Es gibt noch etwas zu erledigen, bevor Sie den Bildschirm für die Nachrichtenanzeige anlegen – fügen Sie ein paar Antworten ein. Sie wissen, dass die Nachrichtendatenbank für jeden Eintrag eine Nachrichten-ID sowie die ID einer übergeordneten Nachricht enthält. Die ID der übergeordneten Nachricht (parentID) ist die Nachrichten-ID der Nachricht, auf die geantwortet wurde. Wenn ein Benutzer beispielsweise auf die Nachricht mit der ID 15 antwortet, wird diese ID zur parentID der neuen Nachricht. Wir wollen das System so einrichten, dass wenn diese hypothetische Nachricht 15 angezeigt wird, auch alle zugehörigen Antworten angezeigt werden. Jetzt tragen wir ein paar Antworten in die Datenbank ein: insert into message values ('','2','Eine Antwort!','icon1.jpg','John Ray', 'Dies ist ein Test des Nachrichtensystems','smugguy','0'); insert into message values ('','2','Mir gefällt's hier nicht','icon3.jpg', 'Administrator','Willkommen beim neuen Nachrichtensystem!','adminmessage','0'); insert into message values ('','2','Hier ist es alles andere als cool!','icon1.jpg', 'John Ray','Gut gemacht, Jungs! Tolles System!','smugguy','0');

Diese Datensätze haben die parentID 2, d.h., es handelt sich um Antworten auf die Nachricht 2. Jetzt können wir die Seite für die Anzeige der Nachrichten entwickeln. Wir müssen drei Funktionen dafür vorsehen: 1. Eine Liste der Antworten auf die aktuell angezeigte Nachricht anzeigen. 2. Die eigentliche Nachricht anzeigen. 3. Ein kleines Formular mit Kennworteingabe und Löschen-Schaltfläche bereitstellen, in das der Benutzer das Kennwort für eine Nachricht eingibt und diese ggf. löschen kann. Abbildung 16.11 zeigt einen grundlegenden Entwurf für den Bildschirm mit der Nachrichtenanzeige. Sie können dabei natürlich so detailliert oder so einfach wie gewünscht vorgehen.

546

Nachrichten lesen

Abbildung 16.11: Der Bildschirm für die Nachrichtenansicht muss drei funktionale Komponenten enthalten, die wir zuvor für die Site definiert haben.

Die Datensatzgruppen laden Für die Seite mit der Nachrichtenanzeige müssen zwei Datensatzgruppen definiert werden: eine Datensatzgruppe, die die eigentliche Nachricht enthält, und die andere mit einer Liste aller verfügbarer Antworten auf diese Nachricht. Diese Definition ist wirklich einfach, und Sie können sie in einigen wenigen Minuten erledigen. Als Erstes definieren wird die Datensatzgruppe, das die anzuzeigende Nachricht enthält: 1. Fügen Sie dem Dokument das Verhalten DATENSATZGRUPPE (ABFRAGE) hinzu. 2. Wenn Sie sich nicht im einfachen Modus befinden, klicken Sie jetzt im Fenster für die Definition der Datensatzgruppe auf die Schaltfläche EINFACH. 3. Geben Sie Ihre Verbindung und Ihre Tabelle an. (Dieses Projekt besteht nur aus einer Tabelle, seien Sie also vorsichtig!) (Das war natürlich ein Scherz!) 4. Markieren Sie alle Felder. 5. Setzen Sie einen Filter für die Abfrage. Die ID sollte gleich der URL-Parameter-ID sein, die in der zuvor definierten Verhaltensweise ZU DETAILSEITE WECHSELN übergeben wurde. Das war's! Die vollständige Datensatzgruppe für die anzuzeigende Nachricht sehen Sie in Abbildung 16.12.

547

Komplexe Techniken: Datensammlung und Berichte

Abbildung 16.12: Stellen Sie sicher, dass Sie einen auf der Nachrichten-ID basierenden Filter einrichten.

Die zweite Datensatzgruppe (die alle Antworten auf die angezeigte Nachricht enthält) ist fast identisch mit der eben angelegten Datensatzgruppe. Fügen Sie dafür eine weitere Datensatzgruppe in Ihr Dokument ein. Jetzt muss der Filter jedoch etwas abgeändert werden. Weil wir alle Nachrichten auswählen wollen, deren parentID gleich der NachrichtenID ist (als URL-Parameter übergeben), sollte der Filter dies berücksichtigen. Abbildung 16.13 zeigt die Datensatzgruppe für die Antworten.

Abbildung 16.13: Für die zweite Abfrage muss nur der Filter geändert werden.

548

Nachrichten lesen

Seitenentwurf Es ist ganz einfach, diese Seite anzulegen – Sie wissen ja jetzt schon, wie man Komponenten aus den definierten Datensatzgruppen in die Entwurfsansicht zieht. Beachten Sie jedoch, dass Sie die Datensatzgruppe rsMessage (für die Nachrichten), nicht die Datensatzgruppe rsReply (für die Antworten) verwenden müssen. Die Verwaltung der Antwortanzeige ist etwas komplizierter, aber auch nichts Neues. Ich verwende für meine Seite einen einfachen wiederholten Bereich, der den Namen des Autors sowie das Thema für jede der Antworten angibt. 1. Ziehen Sie das Thema und den Autornamen in eine neue Zeile im Antwortbereich der Nachrichtenanzeige. Stellen Sie sicher, dass Sie die Antworten-Datensatzgruppe (rsReply) verwenden. 2. Wählen Sie in der Entwurfsansicht das Thema und den Namen aus. 3. Öffnen Sie die Palette SERVERVERHALTEN. 4. Klicken Sie auf das Plussymbol (+), und fügen Sie dem Dokument einen wiederholten Bereich hinzu. Der Bereich soll alle verfügbaren Datensätze wiederholen. Achten Sie bei der Definition des wiederholten Bereichs unbedingt darauf, die richtige Datensatzgruppe auszuwählen. Wenn Sie die Datensatzgruppe auswählen, die die anzuzeigende Nachricht enthält, kann das Programm nicht korrekt ausgeführt werden und die Fehlersuche gestaltet sich schwierig. Falls alles nach Plan gelaufen ist, sollte der Anzeigebildschirm fast fertig sein. Wechseln Sie in den Live Data-Modus und geben Sie in der URL-Zeile die ID=2 ein, um zu sehen, ob sowohl die Nachrichtenliste als auch die Antwortenliste angezeigt wird. Jetzt wollen wir die Antwortenliste fertig stellen. Weil die Antworten einzeln aufgelistet werden, sollte es möglich sein, sie anzuklicken und zu einer Seite zu wechseln, die die gesamte Nachricht enthält, ähnlich wie es für die Hauptnachrichtenliste realisiert wurde. 1. Markieren Sie den Text aus der Antwortüberschrift (vielleicht Thema, Autor oder beides), den der Benutzer anklickt, um die ganze Antwort anzuzeigen. 2. Fügen Sie das Serververhalten ZU DETAILSEITE WECHSELN ein. 3. Konfigurieren Sie die Verhaltensweise wie in Abbildung 16.14 gezeigt, sodass sie eine URL-Parameter-ID übergibt, die auf das ID-Feld in der Antwort-Datensatzgruppe gesetzt ist. Sie sollte zur Anzeige an die ursprüngliche Nachrichtenseite zurückgegeben werden. 4. Klicken Sie auf OK, wenn Sie fertig sind.

549

Komplexe Techniken: Datensammlung und Berichte

Abbildung 16.14: Übergeben Sie die ID der Antworten zurück auf die Nachrichtenseite.

Für die Anzeige von Antworten sollten Sie nicht den existierenden URL- oder Formularparameter übergeben. Wenn Sie das tun, führt das zu mehreren ID=Parametern für eine einzige URL. Das kann den Server verwirren und unerwartete Ergebnisse verursachen. Damit sollten Sie in der Lage sein, auf den Link einer der Antworten zu klicken, um sie anzuzeigen.

Nachrichten löschen Der letzte Schritt zur Realisierung der Funktionalität dieser Seite ist, das Löschen von Nachrichten zu implementieren. Hoffentlich haben Sie beim Entwurf Ihres Bildschirms diese Funktion berücksichtigt und ein Kennwortfeld sowie eine LÖSCHEN-Schaltfläche eingefügt. Geben Sie Ihrem Formular einen Namen, den man sich leicht merken kann, beispielsweise password. Das gewünschte Verhalten dieser Funktion ist, dass wenn ein Benutzer eine Nachricht löschen will, die von ihm selbst abgesetzt wurde, er das zugehörige Kennwort eingibt, auf die Löschen-Schaltfläche klickt und die Nachricht sofort aus der Datenbank entfernt wird. Sie wissen vielleicht noch, dass es ein Serververhalten gibt, das genau diesen Prozess größtenteils automatisieren kann. Öffnen Sie die Palette SERVERVERHALTEN und fügen Sie dem Dokument die Verhaltensweise DATENSATZ LÖSCHEN hinzu. Konfigurieren Sie das Verhalten wie folgt: 1. VERBINDUNG – Die Datenbankverbindung für das Nachrichten-Board. 2. LÖSCHEN AUS TABELLE – Die Nachricht wird aus der Hauptnachrichtentabelle entfernt. 3. DATENSATZ AUSWÄHLEN AUS – Die Datensatzgruppe für die anzuzeigende Nachricht. 4. SPALTE FÜR EINDEUTIGEN SCHLÜSSEL – Der Schlüssel für das Nachrichtenfeld; sollte auf die ID gesetzt werden.

550

Nachrichten lesen

5. DURCH SENDEN LÖSCHEN – Das Löschen-Formular, das Sie angelegt haben. 6. NACH DEM LÖSCHEN VON, ZU URL WECHSELN – Bringt den Benutzer zurück zur Hauptnachrichtenliste. In meiner Implementierung ist dies index.asp. Nachdem Sie das Verhalten Löschen fertiggestellt haben, klicken Sie auf OK. Damit sind Sie fast fertig – etwas fehlt noch. Wann prüft die Applikation, ob das Kennwort richtig eingegeben wurde? Leider überhaupt nicht! Diesen Code müssen Sie dem Dokument manuell hinzufügen. Öffnen Sie Ihren Quellcode und suchen Sie nach der SQL-Anweisung DELETE. Auf der ASP-Plattform sieht das ungefähr so aus: ' Die SQL-Anweisung delete erstellen MM_editQuery = "delete from " & MM_editName & " where " & MM_tableColumn & " = " & MM_recordId

Bearbeiten Sie diesen Code, um das Kennwort zu überprüfen, das von dem Formular übergeben wird: ' Die SQL-Anweisung delete erstellen MM_editQuery = "delete from " & MM_editName & " where " & MM_tableColumn & " = " & MM_recordId & Request.Form("password") & "'"

Diese Änderung des ASP-Codes fügt dem auf dem Server ausgeführten SQL AND password= Request.Form(password) hinzu. Damit ist die Funktion delete implementiert – aber erst nach einigen Anpassungen des Codes. Wenn Sie den Code nicht manuell bearbeiten wollen, gibt es eine alternative Methode, dieses Funktionsmerkmal ausschließlich mit Serververhalten von UltraDev zu implementieren. Statt den eingebetteten Code zu verändern, könnten Sie dem Dokument eine dritte Datensatzgruppe hinzufügen. Diese Datensatzgruppe führt das SQL aus: SELECT * FROM message WHERE ID='varID' AND password='varPassword'

Die Datensatzgruppe muss im erweiterten Modus erstellt werden, wobei varID auf den Laufzeitwert von Request("ID") und varPassword auf Request("password") gesetzt werden müssen. Nachdem diese Datensatzgruppe erzeugt wurde, können Sie dieselbe Verhaltensweise DATENSATZ LÖSCHEN verwenden, die Sie bereits eingerichtet haben, aber Sie wählen den Datensatz jetzt aus dieser Datensatzgruppe. Die eigentliche Datensatzgruppe existiert nicht (weil sie mit keinen Datensätzen übereinstimmt), bevor nicht das Kennwort erfolgreich übertragen wurde. Sobald das Kennwort gesendet wird, wird außerdem die Verhaltensweise DATENSATZ LÖSCHEN für diese Datensatzgruppe aufgerufen. Das erscheint auf den ersten Blick etwas seltsam, aber es ist machbar!

551

Komplexe Techniken: Datensammlung und Berichte

Ehrlich gesagt, der zweite Ansatz ist vorzuziehen, weil hier die gesamte Entwicklung innerhalb der UltraDev-Umgebung passiert. Seine Implementierung dauert jedoch länger, und wenn Sie vorhaben, alles so schnell wie möglich zum Laufen zu bringen, ist die manuelle Bearbeitung des Codes definitiv die schnellste Methode.

Der Anzeigebildschirm Von der Funktionalität her ist der Anzeigebildschirm für die Nachrichten fertig – aber es gibt zwei lose Enden, um die wir uns noch kümmern müssen, bevor wir das Fenster zum Erstellen von Nachrichten anlegen. Zunächst brauchen wir eine Möglichkeit, auf eine Nachricht zu antworten, und zweitens sollte es einen Link zurück zu der Hauptnachrichtenliste geben. Nur einer der beiden Links ist außergewöhnlich – der Link zum Antwortbildschirm. In diesem Link müssen wir die Nachrichten-ID der Nachricht übergeben, die wir gerade lesen. Sie wird als parentID der neuen Nachricht abgelegt – um damit anzuzeigen, dass es sich um eine Antwort handelt. Fügen Sie jetzt einen Antwort-Link in Ihre Nachrichtenanzeige ein, und gehen Sie nach den folgenden Schritten vor. Ich setze voraus, dass die Seite zum Erstellen der Nachrichten Compose heißt. Passen Sie die Namen nach Bedarf an und berücksichtigen Sie diese Änderungen auch in der folgenden Prozedur! 1. Markieren Sie den Text oder das Objekt, der bzw. das auf die Antwortfunktion verweisen soll. 2. Wählen Sie im MODIFIZIEREN-Menü die Option LINK ERSTELLEN. 3. Wählen Sie die Seite zum Erstellen der Nachricht aus oder geben Sie sie manuell in das URL-Feld ein. 4. Klicken Sie auf die Schaltfläche PARAMETER, um die Datensatzgruppen und Datenbankfelder anzuzeigen. 5. Fügen Sie den neuen Parameter ID in die Parameterliste ein. 6. Klicken Sie auf das Blitzsymbol im Wertefeld, um einen dynamischen Wert für den Parameter ID festzulegen. 7. Wählen Sie aus der Datensatzgruppe für die Hauptnachrichten (nicht aus der Datensatzgruppe für die Antworten) das ID-Feld aus. 8. Klicken Sie auf OK, um die Dialogfelder zu verlassen. Jetzt fügen Sie noch einen normalen Link (ohne dynamische Parameter) zurück zur Hauptnachrichtenliste ein. Damit bieten Sie dem Benutzer die Möglichkeit zurückzukehren, was sehr wichtig ist, wenn der Zweig der Site, in der Sie arbeiten, eine Sackgasse ist.

552

Der Bildschirm zum Erstellen von Nachrichten

Die endgültige Version des Bildschirms für die Nachrichtenanzeige sehen Sie in Abbildung 16.15.

Abbildung 16.15: Dem Anzeigebildschirm wurden alle erforderlichen Funktionsmerkmale hinzugefügt.

16.4 Der Bildschirm zum Erstellen von Nachrichten Das letzte Teil des Puzzles ist der Bildschirm zum Erstellen von Nachrichten – und gleichzeitig das einfachste. Es handelt sich dabei um ein Formular, in das der Benutzer seine Nachricht eingibt, um sie an den Server zu senden. Wir brauchen die folgenden Felder: 1. ParentID – Dieser Wert wird als URL-Parameter-ID übergeben. Wir müssen ein verborgenes Feld anlegen, das auf diesen Wert gesetzt wird. 2. Subject – Das Thema der Nachricht. 3. IconURL – Der Dateiname/die URL des Symbols, das zusammen mit der Nachricht angezeigt werden soll. Für den Bildschirm für das Erstellen von Nachrichten werde ich einfach mehrere Optionsfelder anlegen, mit denen der Wert von iconURL ausgewählt werden kann. 4. Author – Der Name des Nachrichtenverfassers. 5. Body – Der Inhalt der Nachricht. 6. Password – Ein Kennwort, bei dessen Angabe die Nachricht gelöscht werden kann.

553

Komplexe Techniken: Datensammlung und Berichte

7. Hidden – Wir verwenden ein verborgenes Feld, um den Wert des Feldes hidden abzulegen. Wenn Sie wollen, dass die Nachrichten unmittelbar nach dem Absetzen angezeigt werden, setzen Sie dieses Feld auf 0, andernfalls auf 1. Beim Anlegen des Formulars sollten Sie alles so einfach wie möglich halten, indem Sie Ihren HTML-Feldern dieselben Namen wie den Datenbankfeldern geben. Stellen Sie auch einen Namen für das eigentliche Formular bereit. Auf diese Weise wird es ganz einfach, Dinge zu vergleichen. Wenn Sie dies für ein Sicherheitsrisiko halten, können Sie die Namen selbstverständlich auch ändern. Abbildung 16.16 zeigt den Entwurf für meine Seite, compose.asp.

Abbildung 16.16: Das Formular zum Erstellen von Nachrichten

Die Bilder für die Optionsfelder sind möglicherweise der einzige verwirrende Faktor bei diesem Entwurf. Hier die Tabelle mit diesen Informationen über meine Seite:

554

Der Bildschirm zum Erstellen von Nachrichten



Einfach nur mehrere Optionsfelder, die alle den Namen URLicon haben (um eine logische ODER-Bedingung zwischen den Optionen zu realisieren), wobei das value-Attribut des Bildes so gesetzt wird, dass es in der Nachrichtenliste angezeigt wird.

Verborgene Felder hinzufügen Sie brauchen zwei verborgene Felder auf Ihrem Formular. Das erste, hidden (ein passender Name für ein verborgenes Feld, oder?), kann manuell in das HTML eingefügt werden, oder Sie verwenden das Formularelement VERSTECKTES FELD und den Eigenschafteninspektor, um es einzurichten, etwa wie folgt:

Das zweite verborgene Feld (parentID) ist etwas komplizierter zu konfigurieren (aber nur ein bisschen). Um dem Dokument dieses Feld hinzuzufügen, müssen Sie eine neue Datenbindung für eine Anforderungsvariable einfügen. Öffnen Sie die Palette DATENBINDUNGEN und gehen wie folgt vor: 1. Klicken Sie auf die Schaltfläche mit dem Plussymbol auf der Palette DATENBINDUNGEN. 2. Wählen Sie ANFORDERUNGSVARIABLE. 3. Geben Sie ID in den Konfigurationsbildschirm für die Bindung der Anforderungsvariablen ein. Dies ist der URL-Parameter, auf den wir zugreifen müssen. Damit haben Sie direkten Zugriff auf den ID-Parameter, der der Seite übergeben wird. Sie können dies nutzen, um das zweite verborgene Feld zu definieren: 1. Fügen Sie dem Dokument ein weiteres verborgenes Feld hinzu. 2. Markieren Sie es und öffnen Sie die Eigenschaftenpalette. 3. Gehen Sie in der Eigenschaftenpalette auf die Registerkarte ATTRIBUTE.

555

Komplexe Techniken: Datensammlung und Berichte

4. Klicken Sie auf die Schaltfläche mit dem Plussymbol (+), um ein neues Attribut einzufügen. 5. Setzen Sie das Attribut auf value. 6. Klicken Sie auf den Wert des value-Felds und auf den Blitz, um es zu der Anforderungsvariablen zu binden. 7. Wählen Sie die ID-Bindung. Die Attributansicht der Eigenschaftenpalette für dieses verborgene Feld sollte aussehen wie in Abbildung 16.17 gezeigt. Abbildung 16.17: Die Bindungen für Ihr verborgenes Feld sollten wie hier gezeigt aussehen.

Das ist alles! Das Formular ist fertig, um für die Verhaltensweise DATENSATZ EINFÜGEN genutzt zu werden. Nur noch ein paar Minuten!

Speichern der Nachricht Um die Nachricht zu speichern, fügen Sie sie als Datensatz in die Datenbank ein. Für das Formular wurde bereits alles konfiguriert, aber es muss noch ein letztes Serververhalten eingefügt werden. Öffnen Sie die Palette SERVERVERHALTEN und fügen Sie die Verhaltensweise DATENSATZ EINFÜGEN in das Dokument ein. Wählen Sie die Verbindung und die zu aktualisierende Tabelle. Im Abschnitt WERTE ABRUFEN AUS der Konfiguration wählen Sie das Formular aus, das zusammen mit der neuen Nachricht gesendet wird, und vergleichen dann die Formularelemente mit dem Spaltennamen und dem Datentyp. Als letzten Schritt setzen Sie NACH DEM EINFÜGEN HIERHER GEHEN auf die Hauptnachrichtenanzeige. Abbildung 16.18 zeigt die vollständige Konfiguration für die Verhaltensweise DATENSATZ EINFÜGEN. Als letzten Schritt gehen Sie zur Hauptnachrichtenliste zurück und fügen einen Link zum Bildschirm für das Erstellen der Nachrichten ein, sodass die Nachrichten auch geschrieben werden können, ohne dass der Benutzer auf eine bereits existierende Nachricht antworten muss. Dazu verwenden Sie einen ganz einfachen Link, dem keine Parameter übergeben werden müssen. Das war's. Wir sind fertig! Damit haben Sie ein vollfunktionales Nachrichten-Board.

556

Zusammenfassung

Abbildung 16.18: Jetzt fügen Sie noch die Möglichkeit ein, Datensätze in die Datenbank einzufügen.

16.5 Zusammenfassung Wir haben heute eine Menge Stoff behandelt und eine relativ komplexe Applikation entwickelt. Dazu wurden viele der verfügbaren Serververhalten für die Nachrichtenliste und die Anzeigebildschirme verwendet. Hoffentlich haben Sie jetzt eine bessere Vorstellung davon, wie die Serververhalten kombiniert werden können und wie sie zusammenarbeiten, um komplexe Webprogramme zu erstellen. Ich habe heute einen anderen Ansatz verwendet, aber dennoch wurde eine wichtige Einschränkung von UltraDev gezeigt. Es ist nicht möglich, mehrere Attribute zu kombinieren, um einen Datensatz zum Löschen auszuwählen. In einem früheren Kapitel habe ich eine speziell entworfene Datensatzgruppe verwendet, um nur die Datensätze auszuwählen, die gelöscht werden sollen. In diesem Fall ist es sich nicht erforderlich, sich über das Problem mit den Mehrfachattributen Gedanken zu machen, deshalb habe ich den SQL-Code direkt bearbeitet. Falls in UltraDev ein Problem auftaucht, überlegen Sie, ob eine Kombination anderer Serververhalten Ihnen helfen kann. Falls nicht, müssen Sie den Quellcode manuell bearbeiten.

16.6 Fragen und Antworten F

Warum ist das Suchen so langsam? A

Wenn Sie über mehrere unterschiedliche Felder in mehreren unterschiedlichen Datensätzen suchen, kann die Suche eine Weile dauern. Sie können ein PopupMenü bereitstellen, in dem das Feld ausgewählt wird, das durchsucht werden soll.

557

Komplexe Techniken: Datensammlung und Berichte

F

Wie moderiert der Moderator? A

F

Wie behebe ich am besten das Problem, Datensätze basierend auf zwei Parametern löschen zu müssen? A

F

Der Moderator aktualisiert die Datensätze in der Datenbank und schaltet hidden auf 0 oder 1, abhängig davon, ob er einen Datensatz anzeigen oder verbergen will.

Bisher wurden in diesem Buch zwei Techniken vorgestellt. Wenn Sie Programmierer sind und sich mit der Bearbeitung von Code auskennen, sollten Sie diesen Ansatz wählen – andernfalls definieren Sie eine weitere Datensatzgruppe, um die Datenmenge zu begrenzen, die die Verhaltensweise Datensatz Löschen verarbeiten kann.

Wie kann ich die Site erweitern? A

Es gibt viel Raum für Verbesserungen – Datumsangaben für Nachrichten, Bearbeitung von Nachrichten – all diese Funktionsmerkmale können Sie mit Ihrem jetzigen Wissen bereits realisieren.

16.7 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. Wofür wird das Feld parentID verwendet? 2. Worin liegt das Problem mit dem Datentyp blob? 3. Warum sollten Sie nicht alle Parameter im Verhalten ZU DETAILSEITE WECHSELN übergeben, wenn sie auf die Antwortliste angewendet werden? 4. Worauf müssen Sie auf Seiten mit mehreren Datensatzgruppen achten? 5. Worin liegt das Problem bei der Verwendung des Feld namens Hidden als verborgenes Feld auf dem Formular?

558

Workshop

Übungen 1. Ändern Sie das System so ab, dass es mehr Informationen über die Nachrichten aufzeichnet – beispielsweise ein Datum und ein Thema. Auf diese Weise könnten Sie basierend auf dem Thema eigene Nachrichten-Boards einrichten. 2. Ermöglichen Sie Bearbeitungen für die Nachrichten in dem System. Dazu könnten Sie einen vierten Bildschirm anlegen. Verwenden Sie das Kennwortfeld um festzustellen, ob der Benutzer die Erlaubnis besitzt, Nachrichten zu bearbeiten. 3. Stellen Sie eine administrative Oberfläche für die Software bereit. Dies könnte genutzt werden, um das Attribut hidden für Nachrichten umzuschalten oder störende Nachrichten zu entfernen. Momentan muss dies direkt in der Datenbank vorgenommen werden – nicht die benutzerfreundlichste Methode, die Dinge zu handhaben.

559

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

7 1

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Wenn ein Benutzer Daten in ein Formular auf einer Website eingibt, dann dient das nicht immer nur einer Online-Umfrage oder zum Ausfüllen eines Auftragsformulars – es könnte sich vielmehr auch um Informationen handeln, die der Benutzer für sich selbst speichern will. Beispielsweise ist es möglich, eine Website anzulegen, auf der die Benutzer eigene Homepages anlegen können, indem sie ein paar Formulare ausfüllen. Nur zu oft geht man fälschlicherweise davon aus, dass es ausschließlich dem Marketing dient, wenn eine Website Daten sammelt. Dieses Kapitel zeigt Ihnen, wie Sie Websites anlegen, die Informationen von einem Benutzer entgegennehmen und seine Browsing-Umgebung entsprechend anpassen. Gewissermaßen bieten Sie den Benutzern die Möglichkeit, ihre eigene, angepasste Version der Website anzulegen. Die Themen des heutigen Tages: 쐽

Anmeldung eines Benutzers am System und Anlegen eines neuen Kontos mit seinen Einstellungen

쐽

Setzen eines Cookies, sodass sich das sich das System merken kann, um wen es sich bei den Besuchen des Benutzers handelt

쐽

Abändern des Erscheinungsbilds einer Website, sodass sie auf den Benutzer abgestimmt wird, der sie gerade besucht

17.1 Benutzerdefinierte Websites Haben Sie schon einmal eine Website besucht, auf der es die Möglichkeit gab, die Site nach Ihren eigenen Vorstellungen abzuändern? Das ist eine extrem beliebte Technik, die bei korrekter Anwendung einem Benutzer unglaublich viel Kontrolle über die Umgebung einer Site bietet. Wenn Sie eine Website haben, die mehrere Dienste anbietet (verschiedene Nachrichtentypen, Einkaufsmöglichkeiten usw.), gewinnen Sie wiederholte Besucher, wenn Sie ihnen auf einer Seite genau das zeigen, was sie sehen wollen. Beispielsweise besuche ich zwei- bis dreimal in der Woche eine bekannte DVD-Site im Internet. Anfangs war ich gezwungen, ihre wöchentlichen Angebote anzuzeigen, bevor ich den Abschnitt Neuerscheinungen erreichte, um zu finden, wonach ich suchte. Ich überlegte, dass es viel besser wäre, wenn ich auf die Homepage käme und sofort sähe, was ich suchte. Glücklicherweise wurde dieses Funktionsmerkmal bei einer Überarbeitung der Site eingebaut. Statt mich jetzt durch mehrere Seiten klicken zu müssen, die mich nicht interessieren, erscheint das für mich wirklich Interessante, sobald ich die erste Seite lade. In diesem Kapitel erfahren Sie, wie Sie genau dieses Verhalten auf Ihrer Website unterstützen. Später können Sie es auf beliebige Sites anwenden, um sie attraktiver zu machen.

562

Benutzerdefinierte Websites

Als Erstes sollten Sie sich fragen: »Welche Komponenten der Site sollen vom Benutzer angepasst werden können?« Es gibt unterschiedliche Ebenen, die Sie dem Betrachter bieten können, abhängig vom Typ Ihrer Site. Wie Sie bereits erfahren haben, können Sie beispielsweise beliebige Tag-Attribute auf einer Site zu einem dynamischen Element machen, indem Sie das Objekt im Dokument markieren und den Eigenschafteninspektor öffnen. Von der standardmäßigen benutzerfreundlichen Ansicht der Palette wechseln Sie zur Attributliste, indem Sie auf die zweite Registerkarte auf der linken Seite der Tabelle klicken. Dieser Teil der Palette, den Sie in Abbildung 17.1 sehen, ermöglicht Ihnen, einem Tag schnell und einfach Attribute zuzuweisen, die beim Laden der Seite aus einer Datenbank abgerufen werden.

Abbildung 17.1: Alle Tag-Attribute können dynamisch gesetzt werden.

Alles, was Sie in einem Tag manuell setzen können, kann auch dynamisch aus der Datenbank gesetzt werden: 쐽

Farbe

쐽

Bilder

쐽

Text

쐽

Schriften

Sie können eine Site einrichten, die ihr gesamtes Look&Feel aus einer externen Datenbank lädt – ohne überhaupt etwas codieren zu müssen.

563

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Sie sollten einen Nachteil in Betracht ziehen, wenn Sie eine dynamische Site entwerfen – die Site als solche kann keinerlei dynamische Elemente enthalten. Wenn Sie beispielsweise das HTML speichern, um eine ganze Tabelle in einem Datensatz einer Datenbank abzulegen, können Sie den Spieß nicht umdrehen und diesem HTML dynamische Tags hinzufügen – die Tags werden nicht rekursiv interpretiert. Der Extremfall einer durch den Benutzer anpassbaren Website erlaubt dem Benutzer nicht nur die Tag-Attribute, sondern auch den Inhalt der Site zu ändern. Dies ist gebräuchlich auf Portalsites, die abhängig von den Auswahlen des Benutzers speziell auf ihn ausgelegte Nachrichten anzeigen. Das heutige Kapitel versucht, diesem Ansatz zu folgen und eine völlig anpassbare Portalsite anzulegen, wo der Benutzer steuert, welche Informationen angezeigt werden.

Der Plan der konfigurierbaren Website Überraschenderweise wird ein Großteil der Arbeit auf dieser Site vom Datenbankserver und ein paar einfachen Abfragen erledigt. Die Entwicklung der Oberfläche, über die der Benutzer seine Software anpassen kann, dauert vermutlich länger, als den eigentlichen Portal-Bildschirm zu entwickeln. Um die Site nutzen zu können, durchläuft ein Benutzer in seinem Browser einige Registrierungsschritte, in denen er seine Einstellungen für die Website festlegt. Nach der Registrierung wird auf seinem Computer ein Cookie gespeichert, das dafür sorgt, dass der Benutzer nach der Rückkehr auf die Site wieder genau das vorfindet, was er eingestellt hat – jederzeit. Eine grundlegende Sitemap für das Registrierungssystem und das Portal sehen Sie in Abbildung 17.2. Einige von Ihnen werden Websites erstellen wollen, die diese Dienste anbieten sollen, ohne sich mit einem Anmeldesystem herumschlagen zu müssen. Das ist zwar möglich, indem das Registrierungssystem weggelassen wird (es würde nur ein Cookie verwendet, um den Benutzer zu identifizieren), aber der Benutzer verliert damit die Möglichkeit, auf seine Seite zurückzugehen und die Einstellungen zu ändern. Wenn der Benutzer an einem anderen Computer arbeitet, gelangt er ebenfalls nicht zu seinen vorhergehenden Einstellungen zurück. Aber warum können wir nicht all diese Dinge in Cookies ablegen, statt uns mit einer Datenbank herumzuschlagen? Um diese Frage wirklich beantworten zu können, müssen Sie sich überlegen, wie viele Elemente auf Ihrer Site Sie dynamisch machen wollen. Eines? Zwei? Zehn? Fünfhundert? Wann muss der Benutzer aufhören, seine Umgebung anzupassen? Durch die Verwendung von Cookies für die Konfigurationsdaten beschränken Sie die Anzahl der Daten, die dynamisch manipuliert werden können. Cookies sind am besten dazu geeignet, kleine Datenmengen zu speichern, wie beispielsweise Benutzer-IDs. Außer-

564

Benutzerdefinierte Websites

dem müssen Sie bei jedem Einfügen eines neuen Elements den Code ändern, der dieses Element unterstützt, oder ein etwas komplexeres, generischeres Cookie-Konfigurationsprogramm entwickeln, bevor Sie anfangen. Verstehen Sie mich nicht falsch – wenn Sie einen oder zwei Werte ablegen wollen, dann stellen Cookies eine ausgezeichnete Lösung dar; wenn Sie dagegen alle Werte für die Konfiguration einer ganzen Website darin ablegen wollen, könnte das problematisch sein.v Abkürzung für Benutzer mit Cookies

Registrierung

Anmeldung

Inhalt

Registrierungseinstellungen

Abbildung 17.2: Der größte Teil der Site besteht aus dem Registrierungsabschnitt.

Ein ausschließlich auf Cookies ausgelegter Ansatz zwingt einen Benutzer außerdem, seine Einstellungen erneut zu registrieren, wenn er in einem anderen Browser oder an einem anderen Computer arbeitet, was nicht besonders benutzerfreundlich ist. Eine Datenbank, die über eine einzige Benutzer-ID angesprochen wird, die in einem Cookie abgelegt wurde, bietet sehr viel mehr Flexibilität und ein erweiterbares System. Auf dem Rechner des Clients wird nur ein einziger Wert abgelegt – dieser Wert kann jedoch beliebig vielen Datenbankeinträgen zugeordnet werden, die Sie für eine perfekte Site brauchen. Die Verwendung von Cookies zum Speichern von Benutzer-IDs ist ausgezeichnet dafür geeignet, Dinge wie beispielsweise die Einstellungen für eine Website zu verwalten – aber sie ist nicht für Sites mit gesichertem Zugriff geeignet. Das Witzige an dem heutigen Thema ist, dass die resultierende Site nicht vollständig gesichert sein muss. Es werden keine privaten Informationen gespeichert, und auch sonst nichts, womit der Benutzer nichts zu tun haben sollte. Wäre dies der Fall, könnten wir eine mehr auf dem Zufall basierende Methode verwenden, eine Benutzer-ID einzurichten, als die Datenbank eine automatische Nummerierung für uns vornehmen zu lassen. Sichere Cookies enthalten normalerweise verschlüsselte Informationen, die nur für sehr kurze Zeitintervalle gültig sind.

565

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

17.2 Tabellendefinitionen Die Tabellendefinitionen für die Site sind sehr interessant. Wir beginnen mit der einfachsten – der Tabelle für die Benutzerinformationen.

Benutzerauthentifizierung und Voreinstellungen Benutzer brauchen eine Möglichkeit, sich am System anzumelden und ihre Einstellungen festzulegen. Das wird durch eine einfache Benutzertabelle realisiert, die die Benutzer-IDs automatisch erzeugt und sie zusammen mit Benutzernamen und Kennwörtern ablegt: create table tblUserInfo ( userID int not null auto_increment, username varchar(50) not null, password varchar(50) not null, primary key (userID) )

Die zweite Tabelle bezieht sich ebenfalls auf den Benutzer, ist aber wesentlich komplexer als eine Tabelle mit reinen Benutzerinformationen. Im ersten Ansatz könnte man sich vielleicht vorstellen, eine Tabelle für die Einstellungen eines Benutzers enthält für jede Funktion, für die ein dynamischer Wert festgelegt werden kann, ein Feld. Das würde sicherlich funktionieren, bietet aber nicht die von uns gewünschte Funktionalität. Statt dessen brauchen wir einen Ansatz, der es ermöglicht, zusätzliche Optionen im System bereitzustellen, ohne dass wir ständig neue Felder erstellen müssen. Aus welchen Werten besteht nun eine dynamische Option? Überlegen wir, was wir für die Tabelle mit den Einstellungen brauchen: 1. Die Funktionalität, für die wir eine Einstellung speichern (Seitenfarbe, Bildposition usw.) 2. Die Benutzer-ID der Person, die das Funktionsmerkmal festlegt 3. Den Funktionswert – das ist der zugehörige dynamische Wert Ein Beispiel für ein solches Funktionsmerkmal ist die Hintergrundfarbe der Webseite. Um die Funktionalität speichern zu können, brauchen wir eine Liste der Funktions-IDs, die mit der Weiterentwicklung der Site auch anwachsen kann. Die anderen Felder sind selbsterklärend. Die Benutzer-ID gibt die Person an, die die Einstellung speichern will, und der Funktionswert enthält die dynamischen Daten (wie beispielsweise eine Farbe #FFBBFF).

566

Tabellendefinitionen

Dieser Ansatz für das System bietet zwar die höchste Flexibilität, stellt aber auch die höchste Belastung für den Server dar. Statt alle Einstellungen in einer einzigen Abfrage zurückgeben zu können, muss jede Einstellung durch eine separate Abfrage abgerufen werden. Fass Ihr Server und die Site keine Probleme mit dem erhöhten Datenbankverkehr haben, verwenden Sie diese Methode. Andernfalls sollten Sie vielleicht eine flache Tabellenstruktur verwenden, um die Feldwerte abzulegen. Anhand dieser Information können wir die folgende Tabellenstruktur für die Benutzereinstellungen einrichten: create table tblPreference ( featureID int not null, userID varchar(50) not null, optionValue text, primary key (featureID,userID) )

Funktionen und Optionen Als Nächstes stellen wir eine Master-Tabelle mit den Funktionsmerkmalen bereit, aus denen der Benutzer auswählen kann. Das muss nicht unbedingt durch eine Datenbanktabelle gestützt werden, aber dieser Ansatz macht dem Administrator das Leben sehr viel leichter. Wenn Sie 100 oder mehr Optionen haben, können Sie sie nicht mehr verwalten, indem Sie sie auf einem Stück Papier aufschreiben. Statt dessen verwenden Sie eine weitere Tabelle in der Datenbank, um die Optionen und die entsprechenden Funktions-IDs zu verwalten. create table tblOption ( featureID int not null, optionName varchar(50) not null, optionValue text, primary key (featureID,optionName) )

Erstellen Sie die Datenbanktabellen erst, nachdem wir am Ende dieses Abschnitts die endgültige Datendefinition vorliegen haben. In der Zwischenzeit werden noch einige wesentliche Änderungen vorgenommen. An dieser Stelle ein paar Erklärungen. Statt über die Feldwerte zu sprechen, wollen wir einige potenzielle Werte betrachten:

567

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

featureID: optionName: optionValue:

1 Blue #0000FF

featureID: optionName: optionValue:

1 Red #FF0000

featureID: optionName: optionValue:

1 Green #00FF00

featureID: optionName: optionValue:

1 Yellow #FFFF00

Dies sind offensichtlich Farbnamen und der entsprechende HTML-codierte Wert. Sie werden über die Funktions-ID (featureID) angesprochen. Funktion 1 beispielsweise könnte die Hintergrundfarbe der Webseite sein – das bleibt völlig Ihnen überlassen. Anhand dieser Struktur können Sie dynamisch die Liste der Einstellungen für den Benutzer erstellen. Damit ersparen Sie sich zur Entwurfsphase etwas Schreibarbeit und bleiben flexibel, sodass Sie Ihrer Datenbank schnell neue Optionen hinzufügen können und diese unmittelbar auf der Webseite angezeigt werden. Selbst mit der Optionstabelle müssen Sie die Funktionen irgendwie verwalten, für die die Optionen angelegt werden. Momentan werden sie nur durch eine einzige Funktions-ID identifiziert, und Sie werden schnell die Übersicht verlieren, wenn Sie keine Tabelle oder eine andere Möglichkeit haben, die Information zu speichern. Das ist zwar für die eigentliche Web-Applikation nicht nötig, aber Sie sollten sich dennoch eine Tabelle in der Datenbank Ihrer Web-Applikation anlegen, um die Werte zu speichern. Nun haben wir die Datenbankstruktur – aber was wollen wir darin ablegen? Für diese Applikation brauchen wir nur ein paar Optionen, die der Benutzer auswählen kann. Aber wie sollen diese Optionen aussehen? Antworten Sie nicht zu schnell. Die Optionen, die wir hier wählen, steuern die Entwicklung der Website. Wir wollen, dass der Benutzer auswählen kann, welche Daten er auf dem Bildschirm sieht. Darüber hinaus bieten wir ihm die Möglichkeit, die Position der Seite festzulegen, die die Informationen enthält. Aber wie ist das möglich? Ganz einfach – wir verwenden dazu Techniken ähnlich denen, die Sie in Kapitel 10, »Datenbankgestützte Webseiten entwickeln«, kennen gelernt haben. Ebenen bieten höchste Flexibilität, die wir nutzen können, um sehr komplexe Sites anzulegen, die komplett durch die Einstellungen des Benutzers gesteuert werden.

568

Tabellendefinitionen

Welche Funktionen wollen wir einem Benutzer für diese Site anbieten? 쐽

Änderung der Hintergrundfarbe für die Site

쐽

Festlegen der Hintergrundfarbe für die Inhaltsbereiche

쐽

Auswahl der Inhaltsbereiche der Site

쐽

Auswahl der Position der Inhaltsbereiche

Die beiden ersten Punkte sind selbsterklärend – Sie ändern einfach dynamisch einige der Farb-Tags im Dokument. Die anderen sind (scheinbar) nicht so einfach. Es gibt mehrere Inhaltsbereiche, aus denen ein Benutzer auswählen kann, um sie auf seiner Seite anzuzeigen, wenn er die Site besucht. Diese Inhaltsbereiche sind in einzelne Ebenen aufgeteilt, die die variablen Informationen enthalten. Die wichtigste Entscheidung betrifft die Implementierung der Ebenen, die vorhanden sein müssen, um dem Benutzer die Wahl zu bieten, jederzeit jeden beliebigen Inhalt zu präsentieren. Die beiden folgenden Ansätze führen zu einer Lösung des Problems: 쐽

Sie fügen der Site mehrere statische Ebenen hinzu und implementieren die Einstellungen des Benutzers, um ihre jeweilige Position und Sichtbarkeit zu ändern. Jede Seite enthält alle Informationen, die angezeigt werden könnten, und wird den vom Benutzer vorgenommenen dynamischen Einstellungen angepasst.

쐽

Sie verwenden Ebeneninhalt, der auch aus einer Datenbank geladen wird, beispielsweise ein beliebiges Attribut.

Offensichtlich ist die zu bevorzugende Technik, alles in der Datenbank abzulegen. Damit verfügen Sie über eine zentrale Position, von der aus Aktualisierungen des Seiteninhalts vorgenommen werden können. Nach dem ersten Ansatz müsste die Seite ständig bearbeitet werden, um neuen Inhalt zu präsentieren. Ich denke, es ist höchst unwahrscheinlich, dass Nachrichtenseiten wie beispielsweise MSN ständig einen HTML-Editor geöffnet haben und darauf warten, dass ein Artikel zu verfassen ist.

Eine optimierte Struktur Leider haben wir ein Problem mit der Datenbankstruktur, die wir zuvor entworfen haben. Angenommen, auf dem Bildschirm befinden sich vier Inhaltsbereiche, aber es gibt sechs mögliche Inhalte, die in diesen Bereichen angezeigt werden können. Um den gesamten Inhalt in allen Bereichen zur Verfügung zu stellen, geben wir insgesamt 24 Einträge in die Optionstabelle ein. Diese Wiederholung der Daten wird sehr schnell zum Albtraum, wenn die Informationen aktualisiert werden müssen.

569

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Um dieses Redundanzproblem zu beheben, kürzen oder ändern wir die Optionstabelle wie folgt: create table tblFeatureOption ( featureID int not null, optionID int not null, primary key (featureID,optionID) )

Statt einem Optionsnamen und dem Wert eine Funktions-ID zuzuordnen, wird ihnen eine Options-ID zugewiesen. Schließlich brauchen wir noch eine letzte Tabelle, die die Informationen aufnimmt, die wir soeben aus der ehemaligen Optionstabelle entfernt haben. Sie werden in einer neuen Optionstabelle angeordnet: create table tblOption ( optionID int not null, optionName varchar(50), optionValue text, primary key (optionID) )

Jetzt kann eine Option mehreren Funktionen zugeordnet werden, ohne die eigentliche Information zu wiederholen. Das erfordert zwar mehr Arbeit für die Abfragen, aber das Endergebnis ist auf lange Sicht besser zu verwalten. Damit sind wir jedoch gezwungen, die Tabelle mit den Einstellungen noch einmal zu überprüfen. Weil die Optionen jetzt über eine Options-ID angesprochen werden, kann diese jetzt anstelle des Optionswert gespeichert werden: create table tblPreference ( featureID int not null, userID int not null, optionID int not null, primary key (featureID,userID) )

Abbildung 17.3 zeigt die endgültige Definition der Datenbanktabelle. Im letzten vorbereitenden Schritt legen wir einige Site-Funktionen und -Optionen fest. Zuerst die Optionen. Die Farben, die ich zuvor aufgelistet habe, sollten ausreichend sein, um die verschiedenen Farbelemente für die Seite zu demonstrieren, deshalb werden sie dem System hinzugefügt: insert insert insert insert

570

into into into into

tblOption tblOption tblOption tblOption

values values values values

(1,'Blue','#0000FF'); (2,'Red','#FF0000'); (3,'Green','#00FF00'); (4,'Yellow','#FFFF00');

Tabellendefinitionen

tblUserInfo userID* username password

tblPreference featureID userID* optionID

tblOption

tblFeatureOption

optionID* optionName optionValue

featureID* optionID*

Abbildung 17.3: Die endgültige Definition der Datenbank setzt sich aus vier Tabellen zusammen.

Auch Schwarz und Weiß sind vielleicht ganz praktisch: insert into tblOption values (5,'White','#FFFFFF'); insert into tblOption values (6,'Black','#000000');

Jetzt wollen wir ermöglichen, die Position der Ebenen zu verändern, die den Inhalt aufnehmen sollen, deshalb fügen wir der Liste der verfügbaren Optionen einige Koordinaten hinzu: insert insert insert insert

into into into into

tblOption tblOption tblOption tblOption

values values values values

(7,'Top Left','left: 45px; top: 38px'); (8,'Top Right','left: 336px; top: 38px'); (9,'Bottom Left','left: 45px; top: 325px'); (10,'Bottom Right','left: 336px; top: 325px');

Die hier der Datenbank hinzugefügten Positionskoordinaten habe ich nicht einfach erfunden. Statt dessen habe ich eine Seite mit vier rechteckigen Ebenen entworfen, die entsprechend dimensioniert sind, und dann ihre Positionsinformation kopiert und in die Datenbank eingetragen.

Bereitstellen der verfügbaren Optionen Schließlich brauchen wir Inhalt für das System. Sie können für diesen Teil des Projekts eigene Datensätze verwenden, aber auch das, was ich hier bereitstelle: insert into tblOption values (11,'Lokales Wetter', '

Cleveland-Wetter

Heiß und feucht, mit einer gewissen Wahrscheinlichkeit für einen Hurrikan oder ein Erdbeben.

Keine Überlebenschance');

571

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

insert into tblOption values (12,'Web Links', '

Hot Links

Wenn Sie ein paar der besten Sites im Web suchen, dann sehen Sie hier nach!

CNN
MacNN
MacCentral'); insert into tblOption values (13,'US News', '

Top Stories

Riesige Monster sind in Redmond eingefallen und übernehmen die Weltherrschaft. Die Anführer werden als "Gates" bezeichnet und fürchten sich nur vor Fenstern'); insert into tblOption values (14,'Local News','

Lokalnachrichten

Lokalredakteur fällt ins Koma, während er Reality-TV um 11 sieht'); insert into tblOption values (15,'TV-Shows','

Was läuft im Fernsehen

Heute gibt es einen Bericht über die Präsidentschaftswahl 2001 in Atlantis. Viele favorisieren den jüngsten Kandidaten, Mr.Teedles, der versprochen hat, eine Form von Unterwassverviehherden zu entwickeln.');

Dies sind offensichtlich keine realistischen Inhalte, aber sie sollten ausreichen, um den Zweck dieser Site zu demonstrieren. Beachten Sie, dass diese Optionsdatensätze Inhalt mit HTML enthalten. Das scheint auf den ersten Blick recht seltsam, aber es ist kein Problem, HTML in Ihrer Datenbank abzulegen. Er wird genauso dargestellt wie statische HTMLSeiten, nachdem er aus der Datenbank geladen und dann in Ihr Dokument eingefügt wurde. Nachdem die Optionen in die Datenbank eingetragen wurden, legen Sie ein paar Einträge für tblFeatureOption an – diese verknüpfen die Optionen mit einer bestimmten Funktion (bzw. mehreren Funktionen). Für unsere Beispiel-Site gibt es 10 Funktionen, die der Benutzer anpassen kann: 1 – Hintergrundfarbe für die Seite 2 – Hintergrundfarbe für den Inhaltsbereich 3-6 – Inhalt für den Inhaltsbereich (für jeden der vier Inhaltsbereiche) 7-10 – Position der Inhaltsbereiche (für jeden der vier Inhaltsbereiche) Verknüpfen Sie diese Funktionen mit den entsprechenden Optionen für diese Datenbankeinträge. Zuerst der Seitenhintergrund. Sie verknüpfen die Farboptionen mit der Funktions-ID 1, die wir für die Hintergrundfarbe der Seite verwenden.

572

Tabellendefinitionen

insert insert insert insert insert insert

into into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values values

(1,1); (1,2); (1,3); (1,4); (1,5); (1,6);

Jetzt kommt der Hintergrund der Inhaltsbereiche. Ähnlich dem Seitenhintergrund wird dabei die Funktions-ID 2 denselben verfügbaren Farboptionen zugeordnet. insert insert insert insert insert insert

into into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values values

(2,1); (2,2); (2,3); (2,4); (2,5); (2,6);

Und jetzt wird es lustig – mit dem Inhalt der Inhaltsbereiche. Es wurden vier Inhaltsbereiche definiert (Funktions-IDs 3 bis 6). Jeder dieser Bereiche sollte die fünf definierten Inhaltsbereiche aufnehmen können (Options-IDs 11 bis 15). Verknüpfen Sie die Optionen für diese Funktionen mit diesen Einträgen: insert insert insert insert insert

into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values

(3,11); (3,12); (3,13); (3,14); (3,15);

insert insert insert insert insert

into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values

(4,11); (4,12); (4,13); (4,14); (4,15);

insert insert insert insert insert

into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values

(5,11); (5,12); (5,13); (5,14); (5,15);

insert insert insert insert insert

into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values

(6,11); (6,12); (6,13); (6,14); (6,15);

573

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Außerdem müssen vier Inhaltspositionen gesetzt werden. Jeder der Inhaltsbereiche kann an einer von vier Positionen angezeigt werden. Damit müssen für alle möglichen Positionen jedes Inhaltsbereichs den verfügbaren Options-IDs neue Funktions-IDs zugeordnet werden: insert insert insert insert

into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values

(7,7); (7,8); (7,9); (7,10);

insert insert insert insert

into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values

(8,7); (8,8); (8,9); (8,10);

insert insert insert insert

into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values

(9,7); (9,8); (9,9); (9,10);

insert insert insert insert

into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values

(10,7); (10,8); (10,9); (10,10);

Bevor Sie sich den Kopf darüber zerbrechen, was da gerade passiert ist, stellen Sie sich das Ganze anhand eines Inhaltsbereichs vor. Für einen einzelnen Bereich gibt es sowohl eine Positionsfunktion als auch eine Inhaltsfunktion. Diese Funktion wird mit mehreren Optionen verknüpft. Wenn wir dem System einen weiteren Inhaltsbereich hinzufügen, muss er auch eine eigene Funktions-ID haben, die seinen Inhalt und seine Position beschreibt, weil er völlig unabhängig vom ersten ist. Bei vier Inhaltsbereichen hat also jeder davon eine Positions-Funktions-ID und eine Inhalts-FunktionsID, die mit den entsprechenden Optionen in der Datenbank verknüpft werden müssen.

Standardeinstellungen Der letzte Schritt bei der Vorbereitung der Datenbank ist die Einrichtung einer generischen Benutzer-ID, die als Standard-Benutzer-ID für alle verfügbaren Einstellungsabfragen verwendet wird. Auf diese Weise können die Benutzer die Site unter Verwendung der Standardeinstellungen betrachten, bevor sie eigene Einstellungen gesetzt haben.

574

Die Registrierung und das Anmeldungssystem

Als Erstes richten Sie ein generisches Benutzerkonto ein. Dieses Konto wird nie geändert und es erfolgt nie eine Anmeldung dafür – es dient nur als Platzhalter für die Benutzer-ID 0: insert into tblUserInfo values (0,'guest','wirstdunieerraten');

Anschließend fügen Sie einige Standardwerte ein, die die Benutzer-ID 0 mit einer Option verknüpfen – für jede der 10 verfügbaren Funktionen: insert insert insert insert insert insert insert insert insert insert

into into into into into into into into into into

tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference

values values values values values values values values values values

(1,0,5); (2,0,5); (3,0,11); (4,0,12); (5,0,13); (6,0,14); (7,0,7); (8,0,8); (9,0,9); (10,0,10);

Um eine Einstellung aus der Einstellungstabelle auszuwählen, verknüpfen wir die Einstellungstabelle mit der Optionstabelle. Das folgende SQL dient als Grundlage für alle Abfragen der Einstellungsdatenbank: SELECT tblOption.optionValue FROM tblPreference,tblOption WHERE tblPreference.featureID='' AND tblPreference.optionID=tblOption.optionID AND tblPreference.userID=''

Jetzt können wir die eigentliche Site aufbauen. Für die fertige Site müssen drei Komponenten bereitgestellt werden – das Anmeldungssystem, die Einstellungen und die Inhaltsseite. Sie werden überrascht sein, dass die Anmeldungsseiten der eigentliche Schlüssel für die Site sind und dass ihre Erstellung auch am längsten dauert. Der zweitschwierigste Teil ist die Festlegung der Einstellungen. Es ist vielleicht nicht ganz einfach, aber letztlich mit einigen Serververhalten erledigt. Richten Sie Ihre Datenbankverbindung in einem neuen UltraDev-Projekt ein, bevor Sie weiterarbeiten.

17.3 Die Registrierung und das Anmeldungssystem Für das Anmeldungssystem dieser Site brauchen wir vier verschiedene Seiten – zwei für den Anmeldungsprozess und zwei für die Benutzerregistrierung. Nach dem Registrierungsprozess kann der Benutzer die Site unter Verwendung der Standardeinstellungen anzeigen oder seine eigenen festlegen. Für die vier Seiten zur Einrichtung des Benutzerkontos brauchen wir die folgenden Funktionen: 쐽

register – Fordert den Benutzer auf, einen Benutzernamen für sein Konto anzugeben. Jedes Konto muss einen eindeutigen Benutzernamen haben, deshalb sollten wir ihn daraufhin überprüfen, bevor wir die Benutzerkonteninformation speichern.

575

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

쐽

register2 – Diese Seite nimmt die Ausgabe der ersten Registrierungsseite entgegen, prüft, ob der Benutzername bereits registriert ist, und fragt, falls es sich um einen gültigen Namen handelt, nach einem Kennwort für das Konto.

쐽

login – Nimmt den Benutzernamen und ein Kennwort für ein existierendes Benutzerkonto entgegen.

쐽

login2 – Überprüft den Benutzernamen und das Kennwort. Handelt es sich um eine gültige Eingabe, wird auf dem Computer des Benutzers ein Cookie gesetzt und der Benutzer wird mit der Inhaltsseite verbunden.

Jetzt müssen auf einigen dieser Seiten noch kleine Anpassungen vorgenommen werden, aber größtenteils sind der Entwurf und die Implementierung ganz einfach.

Die Registrierungsseiten Als Erstes stellen wir die Registrierungsseite fertig. Sie nimmt einen möglichen Benutzernamen entgegen, mit dem die Tabelle UserInfo der Seite register2 abgefragt wird. Auf dieser Seite gibt es kein Serververhalten. Wir fangen mit der ersten Seite der Site an. Sie soll ein Feld und eine SENDEN-Schaltfläche enthalten, um die Daten an die nächste Seite senden zu können. Fügen Sie Ihrer Seite ein Formularobjekt hinzu und anschließend die benötigten Formularelemente. Geben Sie dem Texteingabefeld den Namen username, und setzen Sie die Formularaktion auf register2.asp (verwenden Sie dafür die für Ihre Serverplattform geeignete Dateinamenerweiterung) – damit werden die Daten aus dem Formular an die zweite Seite weitergegeben, die die Verarbeitung übernimmt. Ihr Formular sollte etwa wie in Abbildung 17.4 gezeigt aussehen.

Abbildung 17.4: Das erste Formular nimmt nur einen Benutzernamen entgegen, der überprüft wird.

576

Die Registrierung und das Anmeldungssystem

Jetzt zum zweiten Teil des Registrierungsprozesses – wir legen register2.asp an. Ähnlich der ersten Seite besteht dieses Dokument aus einem Formular mit einem einzigen (sichtbaren) Feld und einer SENDEN-Schaltfläche. Anders als das erste Formular muss es jedoch wirklich Arbeit leisten. Zunächst legen wir ein Formular auf der Seite an, das ein Feld namens password und eine SENDEN-Schaltfläche enthält. Sie brauchen keine Formularaktion festzulegen, aber geben Sie dem Formular der Klarheit halber den Namen registerName. Außerdem sollten Sie ein verborgenes Feld mit einem dynamischen Wert einfügen, das den Benutzernamen enthält. Weil der Benutzername von der ersten Seite übergeben wurde, müssen wir dem UltraDev-Projekt eine neue ANFORDERUNGSVARIABLE-Datenbindung hinzufügen – damit können wir direkt mit dem Benutzernamenfeld zusammenarbeiten, das von der ersten Seite übertragen wurde: 1. Öffnen Sie die Palette DATENBINDUNGEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie in der Liste den Eintrag ANFORDERUNGSVARIABLE. 3. Konfigurieren Sie die Anforderungsvariable mit dem Typ ANFORDERUNG und dem Namen username. Abbildung 17.5 zeigt den Konfigurationsdialog ANFORDERUNGSVARIABLE. Jetzt fügen Sie dem System ein verborgenes Feld hinzu. Stellen Sie sicher, dass Ihre Einfügemarke innerhalb Ihres Formulars platziert ist, und fügen Sie dann das verborgene Feld ein. Öffnen Sie den Eigenschafteninspektor für das Feld und setzen Sie seinen Namen auf username. Um den Benutzernamenwert zu diesem verborgenen Feld zu binden, markieren Sie es und öffnen Sie den Eigenschaftendialog. 1. Wechseln Sie innerhalb der Eigenschaftenpalette in die Attributansicht. 2. Fügen Sie ein neues Wertattribut hinzu, indem Sie auf das Plussymbol (+) klicken. 3. Klicken Sie auf das Blitzsymbol rechts vom Feld WERT. 4. Wählen Sie im Dialogfeld für die Datenbindung die Anforderungsvariable username aus.

Abbildung 17.5: Setzen Sie den Namen der Anforderungsvariablen auf username.

577

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Wir stellen das Formular fertig, indem wir dem System das Serververhalten DATENSATZ EINFÜGEN hinzufügen. Die folgenden Schritte fügen die vollständige Registrierung in die Tabelle userInfo ein: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie das Verhalten DATENSATZ EINFÜGEN. 3. Wählen Sie die Verbindung für das aktuelle Projekt und die Tabelle tblUserInfo, in die die Aktualisierungen eingetragen werden sollen. 4. Stellen Sie sicher, dass alle Felder aus dem HTML-Formular mit den Feldern der Datenbank übereinstimmen. 5. Konfigurieren Sie das Verhalten so, dass nach der Registrierung die Seite login.asp ausgeführt wird. Das Verhalten sollte jetzt ähnlich dem in Abbildung 17.6 gezeigten Konfigurationsbildschirm aussehen.

Abbildung 17.6: Fügen Sie den Benutzernamen und das Kennwort in die Tabelle UserInfo ein.

Um den Registrierungsprozess abzuschließen, müssen wir die Bedingung berücksichtigen, dass ein Benutzer auf der ersten Seite möglicherweise einen Namen eingegeben hat, der in der Benutzerdatenbank bereits existiert. Um diesen Status zu erkennen, führen wir eine einfache Abfrage für die Datenbank aus, die alle Datensätze auswählt, deren Benutzernamenfeld in tblUserInfo gleich der Anforderungsvariablen username ist. Öffnen Sie die Palette SERVERVERHALTEN und fügen Sie eine neue Datensatzgruppe ein. Falls Sie dabei in den erweiterten Modus gelangen, klicken Sie auf die Schaltfläche EINFACH, um in den einfachen Abfragemodus zu wechseln. Hier entwerfen Sie eine einfache Datensatzgruppe namens rsUsername, die alle Datensatzgruppen-Variablen in tblUserInfo auswählt, die abhängig von dem Datenbankfeld für den Benutzernamen gefiltert werden, das gleich der Formularvariablen username ist. Abbildung 17.7 zeigt die fertige Datensatzgruppe.

578

Die Registrierung und das Anmeldungssystem

Abbildung 17.7: Definieren Sie eine einfache Abfrage, um die Datensätze entsprechend dem Benutzernamen aus dem ersten Formular auszuwählen.

Basierend auf dieser Datensatzgruppe können wir das Registrierungsformular verbergen, falls der Benutzername bereits existiert – oder, um in der UltraDev-Terminologie zu bleiben: den Bereich anzeigen, falls die Datensatzgruppe nicht existiert. Mit der Überprüfung, ob in der Datensatzgruppe Daten enthalten sind, stellen wir fest, ob es in der Datenbank bereits wirklich einen identischen Benutzernamen gibt: 1. Markieren Sie in der Dokumententwurfsansicht das gesamte Formular. 2. Öffnen Sie die Palette SERVERVERHALTEN. 3. Klicken Sie auf das Plussymbol (+), und wählen Sie im Untermenü BEREICH ANZEIGEN den EINTRAG ZEIGEN, WENN DATENSATZGRUPPE LEER IST. 4. Wählen Sie die Datensatzgruppe rsUsername aus. Jetzt brauchen wir nur noch einen weiteren Bereich im Dokument, der angezeigt wird, falls der Benutzername existiert. Dabei kann es sich um eine einfache Meldung handeln, die darauf hinweist, dass ein ungültiger Benutzername eingegeben wurde, in Kombination mit einem Link zurück auf die erste Registrierungsseite. Gehen Sie vor wie oben gezeigt, um das Registrierungsformular für diesen neuen Bereich anzuzeigen, wobei der Bereich nur angezeigt wird, WENN DIE DATENSATZGRUPPE NICHT LEER IST. Die Bedingung »nicht leer« zeigt an, dass der Benutzername zuvor bereits verwendet wurde. Damit sind die Registrierungsseiten fertig. Jetzt wollen wir uns mit dem Anmeldeprozess beschäftigen. Abbildung 17.8 zeigt den endgültigen Entwurf für den zweiten Registrierungsbildschirm.

579

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Abbildung 17.8: Der endgültige Registrierungsbildschirm sollte etwa so aussehen.

Die Anmeldeseiten Der erste Anmeldebildschirm (login.asp) ist wie der erste Registrierungsbildschirm nur ein Formular mit einem Feld für den Benutzernamen und das Kennwort, das Daten an den zweiten Anmeldebildschirm (login2.asp) weitergibt, wo die eigentliche Verarbeitung stattfindet. Legen Sie dieses Formular jetzt an. Verwenden Sie gegebenenfalls die Datei register.asp als Vorlage für dieses Dokument, und nehmen Sie die folgenden Änderungen vor: 1. Fügen Sie ein Kennwortfeld hinzu. 2. Die Aktion für das Formular sollte die Daten an login2.asp senden (oder an eine äquivalente Datei auf Ihrem Server). Abbildung 17.9 zeigt ein Beispiel für einen fertigen Anmeldebildschirm. Der zweite Anmeldebildschirm verwendet das Verhalten BEREICH ANZEIGEN sowie eine Datensatzgruppe, um Meldungen für eine gültige und eine ungültige Anmeldung anzuzeigen – ähnlich dem zweiten Registrierungsbildschirm. Legen Sie diesen Bildschirm jetzt an. Fügen Sie dem Dokument zwei Bereiche mit zwei unterschiedlichen Meldungen hinzu: Danke für die Anmeldung am System. Klicken Sie hier, um auf die nächste Seite zu gelangen.

580

Die Registrierung und das Anmeldungssystem

Abbildung 17.9: Das erste Anmeldeformular sollte ähnlich wie der erste Registrierungsbildschirm entworfen werden, wobei hier aber ein Kennwortfeld bereitgestellt wird.

Der Benutzername oder das Kennwort sind fehlerhaft. Klicken Sie hier, um die Eingabe zu wiederholen. Die erste Meldung sollte zum Bildschirm content.asp führen, den wir im nächsten Abschnitt dieses Kapitels erstellen, während die zweite Meldung zum ersten Anmeldebildschirm zurückführt. Um diese Dokumente zu verbergen bzw. anzuzeigen, definieren wir eine Datensatzgruppe, um die Benutzerinformation auszuwählen, die registriert wurde, indem wir einen Filter abhängig von der Eingabe des Benutzernamens und des Kennworts auf dem Anmeldeformular setzen. Falls sich die Datensatzgruppe als leer erweist, wurden Benutzer oder Kennwort fehlerhaft eingegeben. Fügen Sie diese Datensatzgruppe jetzt ein: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie DATENSATZGRUPPE (ABFRAGE). 3. Wechseln Sie in die erweiterte Ansicht, falls sie sich noch nicht dort befinden. 4. Wählen Sie eine geeignete Verbindung für dieses Projekt. 5. Fügen Sie das SQL ein: SELECT * FROM tblUserInfo WHERE username='varUsername' AND password='varPassword'.

6. Klicken Sie auf das Plussymbol (+), und fügen Sie eine neue UltraDev-Variable in die Abfrage ein, varUsername.

581

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

7. Setzen Sie den Standardwert für die Variable auf einen nicht existierenden Benutzernamen und den Laufzeitwert auf "Request("username")". 8. Wiederholen Sie die Schritte 6 und 7 für die Variable varPassword – und achten Sie dabei darauf, wirklich varPassword anstelle von varUsername anzugeben. 9. Klicken Sie auf OK. Die endgültige Definition für die Datensatzgruppe sehen Sie in Abbildung 17.10. Nachdem Sie die Datensatzgruppe definiert haben, ist die Vervollständigung der Seite ähnlich dem Prozess für die Registrierungsseite. Definieren Sie im Dokument zwei Bereiche, die abhängig davon angezeigt werden, ob die Anmeldung korrekt war oder nicht. Bei einer fehlerhaften Anmeldung soll dem Benutzer eine Möglichkeit bereitgestellt werden, zum Anmeldebildschirm zurückzugelangen, damit er seine Eingaben korrigieren kann. Wählen Sie aus, wo auf dem Bildschirm diese Meldung und ein entsprechender Link erscheinen sollen, und fügen Sie dem Dokument das Serververhalten BEREICH ANZEIGEN hinzu. Dieses Serververhalten sollte ausgewählt werden, damit der Inhalt angezeigt wird, wenn die neue rsUserInfo-Datensatzgruppe nicht leer ist.

Abbildung 17.10: Definieren Sie eine erweiterte Abfrage, um Datensätze abhängig von dem angegebenen Benutzernamen und dem Kennwort auszuwählen.

Der Text und der Link für die gültige Anmeldung werden ganz ähnlich eingerichtet. Wählen Sie diese Information aus und wenden Sie ein weiteres Serververhalten BEREICH ANZEIGEN an, mit der Bedingung, dass der Bereich angezeigt wird, falls die Datensatzgruppe nicht leer ist. Den endgültigen Entwurf des login2-Bildschirms sehen Sie in Abbildung 17.11.

582

Die Registrierung und das Anmeldungssystem

Abbildung 17.11: Der endgültige Entwurf für den zweiten Anmeldebildschirm soll Meldungen für gültige und fehlerhafte Anmeldungen enthalten.

Nachdem Sie diese Serververhalten eingefügt haben, ist das Dokument so gut wie fertig. Wir müssen jedoch noch eine winzige Ergänzung vornehmen. Weil wir ein Cookie setzen müssen, wäre es sinnvoll, die Cookie-Information direkt in das Dokument zu schreiben, und zwar an derselben Position, an der der Bereich GÜLTIGE ANMELDUNG angezeigt wird. Leider ist das nicht möglich. Ein Cookie muss gesetzt werden, bevor irgendetwas anderes an den Browser geschickt wird, weil sonst ein Fehler auftritt. Eine mögliche Lösung wäre, der Inhaltsseite die Benutzer-ID des in der Datensatzgruppe ausgewählten Datensatzes zu übergeben. Das ist jedoch keine besonders gute Idee – sie ermöglicht einem Benutzer, die ID eines anderen zu übernehmen, indem er einfach die Benutzer-ID in der URL-Zeile ändert. Selbst wenn diese Site keine erhöhte Sicherheit benötigt, wollen wir das vermeiden. Wir wählen einen anderen Ansatz – wir setzen eine Sitzungs-ID für diese Seite und dann das Cookie auf die Sitzungs-ID, wenn der Benutzer auf die Inhaltsseite geht. Das ist eine einfache Lösung für unser Problem. Suchen Sie den Code für die gültige Anmeldung – er sollte in etwa wie folgt aussehen: 1 2 3 4 5 6 7

<% If Not rsUserInfo.EOF Or Not rsUserInfo.BOF Then %>

583

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

8 9 10

Glückwunsch, Sie haben sich erfolgreich angemeldet! Um ins System zu gelangen, klicken Sie bitte hier.

<% End If ' end Not rsUserInfo.EOF Or NOT rsUserInfo.BOF %>


Fügen Sie in diesen Bereich (zwischen den Zeilen 1 und 2) die Sitzungsvariable tempUserID ein, und setzen Sie sie auf das Benutzer-ID-Feld aus der Datensatzgruppe rsUserInfo. Dazu verwenden Sie beispielsweise den folgenden Code: <% Session("tempUserID")=(rsUserInfo.Fields.Item("userID").Value) %>

Der Code für eine gültige Anmeldung sieht dann schließlich wie folgt aus: 1 2 3 4 5 6 7 8 9 10 11

<% If Not rsUserInfo.EOF Or Not rsUserInfo.BOF Then %> <% Session("tempUserID")=(rsUserInfo.Fields.Item("userID").Value) %>

Glückwunsch, Sie haben sich erfolgreich angemeldet! Um ins System zu gelangen, klicken Sie bitte hier.

<% End If ' end Not rsUserInfo.EOF Or NOT rsUserInfo.BOF %>


Der Code für die Sitzungsvariable wird in Zeile 2 des obigen Codebeispiels gesetzt. Damit ist die Anmeldeseite fertig. Wir können nun die eigentliche Inhaltsseite anlegen. Weil wir bereits einen temporären Benutzer mit Einstellungen angelegt haben, können wir diesen Bildschirm diesen temporären Einstellungen gemäß entwerfen – und das Projekt dann mit den Werten für die Einstellungen fertig stellen.

17.4 Der Inhaltsbildschirm Jetzt wollen wir den Inhaltsbildschirm einrichten – hier wird festgelegt, was der Benutzer sieht, nachdem er sich am System angemeldet hat, oder ob ein Cookie auf seiner Maschine gesetzt wird. Im Wesentlichen handelt es sich dabei um nichts weiter als mehrere Abfragen, die in den HTML-Code eingebettet werden. Eigentlich ist es ganz einfach, diesen Bildschirm zu erstellen. Wir brauchen dazu jedoch einigen benutzerdefinierten Code, bevor wir mit der Entwicklung der Abfragen beginnen können. Im vorigen Abschnitt haben wir dem Benutzer ermöglicht, sich anzumelden und ein neues Konto einzurichten. Anschließend haben wir abhängig von der Sitzungs-ID eine Sitzungsvariable eingerichtet. Bevor wir irgendetwas auf dieser Seite unternehmen können, müssen wir ein Cookie setzen, das die Benutzer-ID für zukünftige Besuche registriert. Außerdem müssen wir den Benutzer umleiten, wenn noch kein Cookie für ihn gesetzt wurde.

584

Der Inhaltsbildschirm

Wie stellt man sich das vor? Der Pseudocode könnte wie folgt aussehen: if (session("tempUserID") existiert) then set cookie("UserID")=session("tempUserID") set strUserID=session("tempUserID") end if if (cookie("UserID") existiert nicht) then auf die Seite login.asp umleiten else set strUserID=Cookie("UserID") end if

Dies können wir jetzt in ASP-Code übersetzen, den wir der Seite hinzufügen: 1 <% If (not (Session("tempUserID")="")) Then 2 Response.Cookies("UserID")=Session("tempUserID") 3 Response.Cookies("UserID").Expires=#12/31/2030# 4 strUserID=Session("tempUserID") 5 End If 6 If (Request.Cookies("UserID")="") Then 7 Response.Redirect("login.asp") 8 Else 9 strUserID=Request.Cookies("UserID") 10 End If 11 %>

Leider hat UltraDev in der Entwicklungsumgebung keine Vorkehrungen für Cookies getroffen. Sie müssen diesen Code manuell bereitstellen, wenn Sie einen Cookie oder eine Sitzungsvariable setzen wollen. Dieser Code übernimmt die meiste Arbeit auf dieser Site. Im Wesentlichen garantiert er uns, dass die Variable strUserID gesetzt ist, wenn wir auf die Webseite gelangen (Zeile 2), oder dass der Benutzer auf den Anmeldebildschirm umgeleitet wird (Zeilen 6 bis 7). Das Ablaufdatum des Cookies wird auf 12/31/2030 gesetzt (Zeile 30), was für die meisten Applikationen ausreichend sein sollte. Nachdem Sie diesen Code in die grundlegende Seite eingetragen haben, erstellen Sie vier Ebenen, die den Inhalt für die Webseite aufnehmen. Wenden Sie nicht zu viel Zeit für den Entwurf der Seite auf, weil letztlich ohnehin alles von der Datenbank gesteuert wird. Abbildung 17.12 zeigt, wie eine für diese Zwecke geeignete Seite aussehen könnte.

585

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Abbildung 17.12: So könnte eine einfache Beispielseite mit vier Bereichen aussehen – machen Sie sich jedoch nicht zu viele Gedanken über die Ausrichtung der Dinge.

Und jetzt kommt das Vergnügen – die Entwicklung der Abfragen für alle Einstellungen, die der Benutzer vornehmen kann. Das ist nicht schwierig, aber müßig. Um das Ganze zu vereinfachen, nummerieren wir die Datensätze, die angelegt werden müssen, weil sie je einer Funktions-ID entsprechen: 쐽

rsPageColor

쐽

rsContentColor

쐽

rsRegion1Content

쐽

rsRegion2Content

쐽

rsRegion3Content

쐽

rsRegion4Content

쐽

rsRegion1Location

쐽

rsRegion2Location

쐽

rsRegion3Location

쐽

rsRegion4Location

586

Der Inhaltsbildschirm

Wir richten jetzt eine dieser Datensatzgruppen ein. Die anderen Datensatzgruppen können Sie nach diesem Muster selbst anlegen. Dies ist eine komplexe Abfrage, die die von uns angelegte Variable strUserID direkt im Code verwendet. Die Datensatzgruppen für die einzelnen Funktionen unterscheiden sich nur in Hinblick auf Funktions-ID und Datensatzgruppennamen. Öffnen Sie die Palette SERVERVERHALTEN und fügen Sie dem Dokument eine neue Datensatzgruppe hinzu. Gehen Sie durch Anklicken der Schaltfläche ERWEITERT in den erweiterten Modus. Geben Sie der Datensatzgruppe einen der unterstützten Funktion entsprechenden Namen. Geben Sie dieses SQL in die Datensatzgruppe ein: SELECT tblOption.optionValue FROM tblPreference,tblOption WHERE tblPreference.featureID='1' AND tblPreference.optionID=tblOption.optionID AND (tblPreference.userID='varUserID' OR tblPreference.userID=0) ORDER BY tblPreference.userID DESC

Beachten Sie, dass dies nicht genau die Abfrage ist, die wir am Kapitelanfang definiert haben. Die folgenden Ergänzungen wurden vorgenommen: tblPreference.userID='varUserID' OR tblPreference.userID=0

Damit werden die Einstellungen für die aktuelle Benutzer-ID sowie die Einstellungen für die Benutzer-ID 0 (die wir bereits in die Einstellungstabelle eingetragen haben), ausgewählt. Weil wir nicht wissen, ob ein Benutzer überhaupt Einstellungen vornehmen wird, müssen wir irgendetwas verwenden, um die Seite überhaupt anzeigen zu können. Durch Auswahl beider Datensätze haben wir für jede Funktion garantiert immer einen Wert. Möglicherweise werden mehrere Werte zurückgegeben, aber wir verwenden keinen wiederholten Bereich, deshalb wird jeweils nur der erste Datensatz aus der Datensatzgruppe angezeigt. Aber woher wissen wir, welcher Datensatz der erste ist? Dazu verwenden wir den folgenden Code: ORDER BY tblPreference.userID DESC

Damit werden die Datensätze nach der Benutzer-ID in absteigender Reihenfolge sortiert. Weil ein Benutzer garantiert eine Benutzer-ID größer 0 hat, geht der zugehörige Datensatz den Einstellungen aus dem Datensatz für den Benutzer 0 immer voraus – wenn es den Benutzer also gibt, ist er der erste in der Datensatzgruppe. Die restliche Abfrage ist relativ einfach. Die Funktions-ID wird ausgewählt: featureID='1'

Die Benutzer-ID wird mit der varUserID verglichen, um den Einstellungswert für den Benutzer auszuwählen, der die Site besucht: tblPreference.userID='varUserID'

587

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Die Variable varUserID muss übrigens noch definiert werden. Klicken Sie auf die Schaltfläche mit dem Plussymbol (+) in der erweiterten Abfrageansicht, um eine neue UltraDevVariable einzufügen. Setzen Sie ihren Namen auf varUserID, den Standardwert auf 0 und den Laufzeitwert auf strUserID. Zur Erinnerung: Der Wert strUserID wurde am Seitenanfang gesetzt, als wir das Cookie userID ausgewertet und gesetzt haben. Abbildung 17.13 zeigt die endgültige Definition der Datensatzgruppe.

Abbildung 17.13: Die Definition der Datensatzgruppe rsPageColor sollte aussehen wie hier gezeigt.

Nachdem Sie die erste Datensatzgruppe angelegt haben, gehen Sie für die anderen neun Datensatzgruppen ähnlich vor. Nachdem Sie fertig sind, sollte Ihre Datenbindungspalette ähnlich aussehen wie in Abbildung 17.14 gezeigt. Datensatzgruppen werden mithilfe von BEARBEITEN > KOPIEREN kopiert. Auf diese Weise können Sie das Erstellen mehrerer ähnlicher Datensatzgruppen wesentlich beschleunigen. Nachdem Sie alle 10 Datensatzgruppen angelegt haben, ordnen Sie den Objekten Attribute zu. Das erste Attribut ist die Hintergrundfarbe der Webseite. Markieren Sie in Ihrer HTML-Ansicht das Body-Tag und öffnen Sie die Eigenschaftenpalette. Gehen Sie in der Eigenschaftenpalette in die Attributansicht, indem Sie auf die Registerkarte unten links klicken. Fügen Sie das Attribut bgcolor ein, falls dieses noch nicht existiert – und dann gehen Sie in das linke Wertefeld und klicken auf das Blitzsymbol, um es

588

Der Inhaltsbildschirm

zu einem dynamischen Attribut zu binden. UltraDev fordert Sie auf, eine Datensatzgruppe anzugeben – verwenden Sie rsPageColor und dann optionValue, wie in Abbildung 17.15 gezeigt.

Abbildung 17.14: Ihr fertiges Dokument enthält insgesamt 10 Datensatzgruppen.

Abbildung 17.15: Wählen Sie optionValue aus derselben Datensatzgruppe.

Das hätten wir also geschafft. Jetzt müssen die anderen Attribute festgelegt werden. Das ist ein bisschen einfacher, weil wir sie dem Dokument manuell hinzufügen können, statt Bindungen zu Attributen herzustellen. Wenn Sie das HTML betrachten, sehen Sie, dass die Hintergrundfarbe für den Seitenrumpf durch die folgende Zeile eingefügt wird: <%=(rsPageColor.Fields.Item("optionValue").Value)%>

Bereich 1 ist wie folgt beschrieben:

589

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Der Inhalt: <%=(rsRegion1Content.Fields.Item("optionValue").Value)%>

Die Position: <%=(rsRegion1Location.Fields.Item("optionValue").Value)%>

Alle anderen Bereichsattribute können nach demselben Muster definiert werden (natürlich mit einer anderen Nummer). Anhand dieser Information können wir eine Vorlage für alle Ebenen anlegen – fügen Sie diese Codeabschnitte einfach wie folgt in die Ebenendefinition ein:

; background-color: <%=(rsContentColor.Fields.Item("optionValue").Value)%>; layer-background-color: <%=(rsContentColor.Fields.Item("optionValue").Value)%>; border: 1px none #000000"><%=(rsRegion1Content.Fields.Item("optionValue").Value)%>

Weil alle wichtigen Attribute der Ebene in der Datenbank definiert werden, können Sie diese Definition einfach dreimal kopieren und einfügen – und dabei jeweils die Bereichsnummer ändern. Der zweite Bereich sieht beispielsweise wie folgt aus:

; background-color: <%=(rsContentColor.Fields.Item("optionValue").Value)%>; layer-background-color: <%=(rsContentColor.Fields.Item("optionValue").Value)%>; border: 1px none #000000"><%=(rsRegion2Content.Fields.Item("optionValue").Value)%>

Damit können Sie ohne weitere Probleme erkennen, wie die beiden nächsten Bereiche aussehen sollten. Jeder dieser Bereiche kann an beliebiger Stelle des Inhaltsbereichs im HTML-Dokument angelegt werden. Sie können sie manuell eingeben – die Alternative ist, die Nutzung des sehr beschränkten Platzes der Attributansicht für eine Ebene zu nutzen, um alle dynamischen Attribute zu setzen. Wissen Sie was? Die Inhaltsseite ist fertig! Jetzt fehlt aber noch etwas – ein Link auf die Konfigurationsseite. Fügen Sie unten auf der Seite den Link EINSTELLUNGEN ein, der auf die Seite preferences.asp führt. Damit sollten Sie in der Lage sein, den Registrierungsprozess zu durchlaufen und die Inhaltsseite anzuzeigen (mit den Standardeinstellungen für die Benutzer-ID 0). Abbildung 17.16 zeigt die letzte Ansicht. Sie könnten sie noch etwas verschönern, aber grundsätzlich funktioniert sie! Bevor Sie weitermachen, öffnen Sie den Quellcode des Dokuments und stellen sicher, dass sich die benutzerdefinierte Programmierung zum Setzen des Cookies immer noch am Dokumentanfang befindet. Andernfalls schneiden Sie sie aus und fügen sie an der richtigen Stelle wieder ein, sodass sie sich oberhalb des gesamten von UltraDev erstellten Codes befindet.

590

Die Einstellungen

Damit sind wir beim letzten Teil der Seite – den Einstellungen.

Abbildung 17.16: Die Inhaltsseite ist nicht besonders attraktiv, aber sie funktioniert.

17.5 Die Einstellungen Der erste Bildschirm für die Einstellungen setzt noch keine Attribute, sondern stellt die Links auf die Seite bereit, auf der die Einstellungen vorgenommen werden. Diese Links müssen eine ID an eine zweite Seite weitergeben, preferences2.asp, die angibt, was der Benutzer setzen will. Beispielsweise wird für die Seitenhintergrundfarbe der folgende Link bereitgestellt: preferences2.asp?featureID=1

Damit wird der URL-Parameter featureID mit dem Wert 1 an die Seite preferences2.asp übergeben. Richten Sie jetzt Ihre Linkliste ein. Abbildung 17.17 zeigt eine Beispielseite mit den verfügbaren Einstellungen. Stellen Sie sicher, dass alle Ihre Links korrekt angelegt sind, bevor Sie weitermachen. Die zweite Einstellungenseite ist die letzte Seite für dieses Dokument, und Sie sollten sicherstellen, dass alles funktioniert, bevor wir sie entwerfen.

591

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

Abbildung 17.17: Die Funktionen werden zusammen mit einem Link auf die zweite Einstellungenseite aufgelistet.

In dieser Applikation müssen wir die Funktions-ID manuell der zweiten Einstellungenseite übergeben. Wenn es in der Datenbank eine Tabelle gäbe, in der Funktionsname und ID aufgelistet sind, könnten wir die Tabelle mit den Links manuell erstellen. Darüber können Sie jedoch später nachdenken. Darüber hinaus ist die Methode, mit der wir die Links setzen, sehr schnell. Wenn Sie jedoch lieber in der UltraDev-Umgebung bleiben wollen, verwenden Sie MODIFIZIEREN > LINK ERSTELLEN und klicken dann auf die Schaltfläche PARAMETER, um den Parameter featureID zu setzen. Jetzt kommen wir zum letzten Bildschirm. Legen Sie das neue Dokument preferences2.asp an. Diese Seite enthält ein sehr einfaches Formular mit einem daten-

bankgestützten Popup-Menü, zwei verborgenen Feldern mit der Benutzer-ID und der Funktions-ID und einer SENDEN-Schaltfläche. Um das Popup-Menü zu erstellen, brauchen wir eine Abfrage, die alle für die der Seite übergebenen Funktions-ID verfügbaren Optionen zu ermitteln: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), und fügen Sie das neue Verhalten DATENSATZGRUPPE (ABFRAGE) ein. 3. Wechseln Sie in den erweiterten Abfragemodus. 4. Geben Sie der Datensatzgruppe den Namen rsFeatureOptions, und setzen Sie die Projektverbindung.

592

Die Einstellungen

5. Verwenden Sie das folgende SQL: SELECT tblOption.optionID,tblOption.optionName FROM tblFeatureOption,tblOption WHERE tblFeatureOption.optionID =tblOption.optionID AND tblFeatureOption.featureID='varFeatureID'

6. Fügen Sie die neue UltraDev-Variable varFeatureID ein, die auf den Laufzeitwert "Request("featureID")" gesetzt wird. 7. Klicken Sie auf OK. Jetzt fügen Sie der Seite das Formularobjekt hinzu. In diesem Formular fügen Sie ein neues Listen/Menü-Objekt ein – daraus machen wir die dynamisch erstellte Popup-Liste der verfügbaren Optionen. Geben Sie diesem Popup-Menü den Namen optionID. Um das Popup-Menü zu einer dynamischen Abfrage zu binden, könnten wir das Serververhalten DYNAMISCHE ELEMENTE in das Dokument einfügen oder eine alternative Methode zum Anlegen einer Datenbindung verwenden. Dies ist zwar nicht so benutzerfreundlich wie die Methode, die wir in den meisten anderen Projekten verwendet haben, aber Sie werden sich immer mehr an diese Technik gewöhnen. Sie spart Zeit und Sie brauchen dazu den Komfort der UltraDev-Oberfläche nicht zu verlassen. Markieren Sie in der Entwurfsansicht das Popup-Menü und gehen Sie in die Datenbindungenpalette. Wählen Sie das Feld OptionName aus der Datensatzgruppe und betrachten Sie das Popup-Menü, das jetzt unten in der Palette DATENBINDUNGEN erscheint – wählen Sie ELEMENTBEZ. und klicken Sie auf die Schaltfläche BINDEN. Damit binden Sie das Feld optionName zu den Namen der Einträge im Popup-Menü. Dasselbe können Sie für die Options-ID wiederholen. Wählen Sie für die Bindung jedoch ELEMENTWERT. Abbildung 17.18 zeigt die Palette DATENBINDUNGEN, nachdem diese Einstellungen vorgenommen wurden.

Abbildung 17.18: Einträge können direkt von der Datenbindungenpalette aus zu Attributen gebunden werden.

Um die beiden verborgenen Felder zu setzen, verwenden wir dieselbe Technik, nach der wir den Datenbindungen das userID-Cookie und die featureID-Anforderungsvariable hinzugefügt haben:

593

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

1. Öffnen Sie die Palette DATENBINDUNGEN. 2. Klicken Sie auf das Pluszeichen (+), und wählen Sie ANFORDERUNGSVARIABLE. 3. Geben Sie userID ein und klicken Sie auf OK. Wiederholen Sie diesen Prozess für die Anforderungsvariable featureID. Jetzt sollten beide Variablen in der DATENBINDUNGEN-Ansicht erscheinen. Jetzt fügen Sie dem Dokument die beiden verborgenen Felder hinzu. Geben Sie dem einen den Namen featureID, dem anderen userID. Binden Sie den Wert dieser Felder zu der Anforderungsvariablen featureID und zum Cookie userID und gehen Sie dabei nach derselben Technik vor, nach der wir das Popup-Menü zu der Datensatzgruppe gebunden haben. Markieren Sie in der Entwurfsansicht das Tag für das entsprechende verborgene Feld und klicken Sie auf den zugehörigen Eintrag im Fenster DATENBINDUNGEN. Wählen Sie input.value als Bindung und klicken Sie auf BINDEN. Schließlich fügen Sie dem Formular noch eine SENDEN-Schaltfläche hinzu, mit deren Hilfe die Einstellungen gespeichert werden. Jetzt müssen Sie nur noch die Daten in der Einstellungsdatenbank speichern. Fügen Sie das Verhalten DATENSATZ EINFÜGEN ein: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie das Verhalten DATENSATZ EINFÜGEN. 3. Setzen Sie die Verbindung auf die Datenquelle Ihres Projekts. 4. Wählen Sie tblPreference für die Tabelle, in der die Aktualisierung vorgenommen werden soll (IN TABELLE EINFÜGEN). 5. Wählen Sie das auf der Seite definierte Formular, und ordnen Sie die Elemente aus dem Formular den Spalten der Datenbank zu. 6. Nachdem Sie mit dem Einfügen fertig sind, gehen Sie auf content.asp, sodass der Benutzer seine Änderungen unmittelbar sieht. Abbildung 17.19 zeigt die vollständige Aktion DATENSATZ EINFÜGEN. Moment! Was passiert, wenn der Benutzer bereits eine Einstellung für die Seite vorgenommen hat? Das System erzeugt einen Fehler, wenn der Benutzer bereits eine Einstellung für eine der Funktionen vorgenommen hat und dann versucht, sie zu überschreiben. Wenn Sie möchten, können Sie eine Aktualisierungsmöglichkeit in das System einfügen. Ein einfacherer Ansatz wäre, eine existierende Einstellung zu löschen, bevor eine neue eingefügt wird.

594

Die Einstellungen

Abbildung 17.19: Fügen Sie die Einstellungen in die Einstellungsdatenbank ein.

Suchen Sie in Ihrem Dokument den Code, der für das Einfügen zuständig ist: ' Einfügen ausführen Set MM_editCmd = Server.CreateObject("ADODB.Command") MM_editCmd.ActiveConnection = MM_editConnection MM_editCmd.CommandText = MM_editQuery MM_editCmd.Execute

Unmittelbar vor diesem Code fügen Sie Folgendes ein: ' SQL fertigstellen und ausführen Set deleteRec = Server.CreateObject("ADODB.Command") deleteRec.ActiveConnection = MM_editConnection deleteRec.CommandText = "delete from tblPreference where userID='" & Request("userID") & "' AND featureID='" & Request("featureID") & "'" deleteRec.Execute

Dieser ASP-Block richtet eine Verbindung zu der Datenbank ein und löscht gegebenenfalls einen bereits existierenden Parameterdatensatz. Damit sollte das System vollfunktional sein. Probieren Sie es aus und setzen Sie ein paar Einstellungen. Verlassen Sie Ihren Browser, starten Sie ihn neu und laden Sie die Inhaltsseite. Alle Ihre Einstellungen werden ohne weitere Maßnahmen geladen. Die Technik, mit der ich einen Datensatz lösche, bevor ich versuche, einen neuen einzufügen, wird nur verwendet, weil die hier verwendeten Daten trivial sind. Handelte es sich dagegen um ein System, in dem die Informationen extrem wichtig sind, würden Sie das Verhalten DATENSATZ AKTUALISIEREN verwenden oder die neue Einstellung manuell in einen temporären Datensatz einfügen und ihn nach dem Speichern an die richtige Stelle verschieben. Wenn das Programm in seiner jetzigen Version zwischen den Befehlen delete und insert abstürzt, verliert der Benutzer alle vorherigen Einstellungen. Das ist jedoch sehr unwahrscheinlich.

595

Komplexe Techniken: Benutzerdaten verfolgen und verwenden

17.6 Zusammenfassung Dieses Kapitel hat mehr ein Konzept als ein wirklich vollständiges Nachrichtenportal vorgestellt. Mithilfe von Cookies können Sie Ihre Sites für die Benutzer so einstellen, dass sie eine Umgebung erhalten, in der sie sich zu Hause fühlen und wo sie alle Informationen und Funktionen haben, die sie benötigen. Gleichzeitig können Sie die Einstellungen daraufhin auswerten, was die Benutzer an Ihrer Seite mögen und wie sie es gerne anzeigen. Offensichtlich gibt es noch Verbesserungsmöglichkeiten, aber hier war vor allem das Gesamtkonzept wichtig. Die Bereichspositionen beispielsweise sind momentan auf vier Einstellungen beschränkt, wobei die Inhaltsbereiche nur übereinander gestapelt werden können. Hier könnten Sie ganz einfach ein sehr viel interessanteres Layout anlegen. Darüber hinaus sollten Sie jetzt überlegen, wie Sie in anderen Projekten vorgehen, um sich einzelne Benutzer zu merken und dynamisch darauf zu reagieren.

17.7 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«.

Fragen und Antworten F

Warum können nicht alle Einstellungen gleichzeitig gesetzt werden? A

F

Wozu kann die Steuerung der Ebenenpositionen sinnvoll sein? A

F

Wir haben in diesem Kapitel zwar mehr eine Technologiedemonstration präsentiert als alles andere, aber die dynamischen Positionen könnten genutzt werden, um dem Benutzer unterschiedliche Bildschirmlayouts für seine Informationen zu präsentieren.

Was passiert, wenn ein Benutzer versucht, von einem anderen Computer als dem mit dem Cookie aus auf die Site zuzugreifen? A

596

Das ist meiner Meinung nach das größte Problem mit der Site. Aufgrund der Erweiterbarkeit des Systems eignet sich die Tabellenstruktur nicht, alle Attribute auf einer einzigen Seite anzuzeigen. Hätten wir ein System angelegt, das alle Benutzereinstellungen in einem einzigen Tabelleneintrag ablegt, könnten Sie eine Seite aufbauen, die alle Attribute gleichzeitig setzt.

Die Site zwingt den Benutzer, sich erneut anzumelden. Damit wird ein neues Cookie mit der Benutzer-ID im Browser des Benutzers gesetzt.

Workshop

F

Was passiert, wenn der Benutzer die Cookies deaktiviert hat? A

Wenn der Benutzer die Cookies deaktiviert hat, kann kein Zugriff auf die Site erfolgen. Das Cookie wird vor der Anzeige des Seiteninhalts überprüft. Falls es nicht existiert, wird der Browser zum Anmeldebildschirm umgeleitet.

Quiz 1. Welche Sitzungsvariable wird für dieses Projekt verwendet? 2. Wie fügen Sie eine Cookie-Datenbindung ein? 3. Warum sind Ebenen für benutzerdefinierbare Seiten so praktisch? 4. Wie lange merkt sich der Server die Einstellungen des Benutzers? 5. Warum werden die Einstellungen des Benutzers nicht alle in einer einzigen großen Tabelle gespeichert?

Übungen 1. Aktualisieren Sie den Bildschirm für die Auswahl der Einstellungen, sodass die aktuell ausgewählte Funktionsoption im Popup-Menü angezeigt wird, wenn der Benutzer es aufruft. 2. Fügen Sie eine zusätzliche Funktionstabelle ein, die die Funktions-IDs mit einer Beschreibung dieser Funktion vergleicht. Auf diese Weise können Sie einen dynamisch erstellten Einstellungsbildschirm einfügen – statt der momentan verwendeten statischen Tabellenversion. 3. Ändern Sie eine Ihrer existierenden Sites so ab, dass sie die heute beschriebenen Funktionsmerkmale verwendet. Beispielsweise könnten Sie das Nachrichtensystem so abändern, dass es sich merkt, welche Nachrichten Ihre eigenen sind, oder wie Ihr Name und Ihre E-Mail-Adresse lauten. 4. Nachdem Sie Kapitel 18 gelesen haben, sollten Sie noch einmal in dieses Kapitel zurückkehren und versuchen, das Anmelde- und Registrierungssystem mithilfe des Benutzer-Authentifizierungssystems von UltraDev neu zu implementieren.

597

Komplexe Techniken: Komplexe Abfragesysteme

8 1

Komplexe Techniken: Komplexe Abfragesysteme

Viele der schwierigsten Aufgaben auf Ihren Websites werden einfacher, wenn Sie Ihrem SQL-Server die Arbeit überlassen. Die Möglichkeiten Ihres Datenbankservers erlauben Ihnen, wesentlich komplexere Applikationen zu entwickeln. In diesem Kapitel lernen Sie eine solche Applikation kennen, wo die Abfrage eine scheinbar unlösbare Aufgabe ganz einfach macht. Die Themen des heutigen Tages: 쐽

Alternative Denkansätze zur Problemlösung. Ein Umweg ist manchmal besser als der direkte Weg.

쐽

Eine Technik für die Implementierung einer »Fuzzy«-Suche, die Ihnen ermöglicht, eine Abfrage für den Benutzer zu formulieren, die nicht »exakt« ist, wenn er beispielsweise nicht genau weiß, wonach er sucht.

쐽

Die Entwicklung von Websites, wo der Benutzer ein Kriterium eingeben kann, um nicht ganz (aber auch) korrekte Übereinstimmungen zu finden.

쐽

Praxisnahe Erfahrungen mit dem Authentifizierungssystem von UltraDev.

18.1 Komplexe Suchen Bei der Entwicklung von Websites, die Benutzerinformationen sammeln, werden Sie feststellen, dass es unabdingbar ist, Suchfunktionen für die Datenbank bereitzustellen. SQL stellt per se ein ausgezeichnetes System für die Abfrage von Tabellen dar. Aber was passiert, wenn der Benutzer das System außerhalb einer direkten SQL-Abfrage nach Parametern abfragen will? Und noch schlimmer: Was passiert, wenn die Suche mit einigen der Einträge, aber nicht mit allen übereinstimmen muss? Angenommen, wir durchsuchen eine Gebrauchtwagendatenbank. Der Benutzer sucht nach einem blauen Kabrio, aber er würde es auch in violett nehmen – und wenn es keines in violett gibt, dann würde er auch schwarz nehmen. Diese Art Logik ist in einer Suche, die nicht speziell für den abfragenden Benutzer geschrieben wurde, sehr schwierig darzustellen. Wie also kann ein System entwickelt werden, das solche »Abstufungen« einer Antwort zulässt? Betrachten wir dazu unterschiedliche Situationen – wobei eine davon die Komplexität sogar noch steigert. Ich fange beim einfachsten Fall an, sodass Sie während der Beschreibung hoffentlich erkennen, worauf ich hinauswill. Sie können das Ganze gegebenenfalls in MySQL nachvollziehen. Als erstes untersuchen wir die Situation, in der Sie versuchen, eine Zahl in einer Tabelle zu finden, die möglichst nahe an der von Ihnen eingegebenen Zahl liegt. Eine Beispieltabelle könnte wie folgt aussehen:

600

Komplexe Suchen

create table tblNumber ( a int );

Jetzt fügen wir Beispieldaten ein: insert insert insert insert insert insert insert insert insert insert

into into into into into into into into into into

tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber

values values values values values values values values values values

(5); (6); (1); (15); (9); (8); (21); (500); (10); (50);

Nun brauchen wir eine Zahl, nach der wir suchen wollen. Denken Sie sich einfach eine Zahl zwischen 1 und 500 aus. Angenommen, wir suchen nach Datensätzen, die der Zahl 6 so nahe wie möglich kommen. Die erste Abfrage, die wir ausprobieren, verwendet eine direkte Auswahl: mysql> select * from tblNumber where a=6; +------+ | a | +------+ | 6 | +------+ 1 row in set (0.05 sec)

Das ist nicht sehr effizient für die Suche nach Zahlen, die nahe an 6 liegen. Wie können wir es also bewerkstelligen? Wir könnten die Auswahl durch eine Bedingung ergänzen, um Zahlen zu finden, die neben der 6 liegen: mysql> select * from tblNumber where a=6 or a=5 or a=7; +------+ | a | +------+ | 5 | | 6 | +------+ 2 rows in set (0.02 sec)

Dies ist ein besserer Ansatz – aber auch noch nicht perfekt. Die Suche ist immer noch darauf beschränkt, was direkt in der Abfrage angegeben werden kann. Wir könnten das Ganze ein bisschen verbessern, indem wir die Auswahl auf die Zahlen erweitern, die um 6 herum liegen, aber damit lösen wir das eigentliche Problem immer noch nicht.

601

Komplexe Techniken: Komplexe Abfragesysteme

Wir sollten einen anderen Denkansatz wagen. Die WHERE-Klausel der Abfrage setzt eine Bedingung, die die Suche auf die vorgegebenen Parameter beschränkt, aber wie können wir feststellen, wie sehr ein Benutzer seine Suche beschränken will? Sucht er nach einer Zahl im Bereich 6 +/-5, oder 6 +/-500? Durch die Konzentration auf die Auswahl der Daten haben wir eine ganz einfache Lösung übersehen. Der korrekte Ansatz wäre, die Beziehung zwischen 6 und allen anderen Zahlen in der Tabelle zu betrachten. Nehmen wir beispielsweise die Zahl 7. In welcher Beziehung steht sie zu der 6? Sie liegt eine Stelle von der 6 entfernt. Wie nahe liegt 6 an der Zahl 10? Sie liegt vier Stellen von 10 entfernt. Die Antwort auf alle unsere Probleme ist die Subtraktion. Durch Subtrahieren der Werte in der Tabelle von dem angegebenen Wert richten wir eine Beziehung zwischen einer vorgegebenen Zahl und den Einträgen in einer Tabelle ein. Das ist praktisch, aber wie genau wollen wir dieses Wissen in einer Abfrage darstellen? Es ist nicht ganz so schwierig, wie Sie es sich vielleicht vorstellen. Sie müssen nur erkennen, dass alle Zahlen in einer bestimmten Beziehung zu der vorgegebenen Zahl stehen – wobei es nur Unterschiede darin gibt, wie eng diese Beziehung ist. Verstehen Sie das System bereits? Es ist keine Frage, wie wir die Auswahl der Datensätze beschränken, sondern wie wir beschränken, wie die ausgewählten Datensätze angezeigt werden. Der Teil der Abfrage, der die eigentliche Arbeit übernimmt, wird vollständig von einer benutzerdefinierten ORDER BY-Klausel gesteuert, die der Abfrage hinzugefügt wird. Skizzieren wir einen ersten neuen Ansatz für die Abfrage: mysql> SELECT *,(6-a) as 'difference' FROM tblNumber ORDER BY difference; +------+------------+ | a | difference | +------+------------+ | 500 | -494 | | 50 | -44 | | 21 | -15 | | 15 | -9 | | 10 | -4 | | 9 | -3 | | 8 | -2 | | 6 | 0 | | 5 | 1 | | 1 | 5 | +------+------------+ 10 rows in set (0.04 sec)

Diese Abfrage definiert eine variable Differenz, die den Ausdruck (6-a) enthält. Diese Auswertung erfolgt für jeden der Datensätze in der Datenbank – die Ergebnisse werden nach diesem Parameter sortiert. Das Problem dabei ist, dass Zahlen kleiner der angegebenen Zahl ein positives Ergebnis erzeugen, während die größeren Werte negative Ergebnisse produzieren. Das funktioniert also nicht. Nach diesem Ergebnis sind die Zahlen 1 und 9

602

Komplexe Suchen

der Zahl 6 gleich ähnlich. In der Realität liegt 9 näher bei 6 als 1. Die negativen und positiven Abstände müssen also gleich behandelt werden. Wir müssen für die Abfrage also die Funktion ABS verwenden, um den Absolutwert zu berechnen. Der Absolutwert einer negativen Zahl ist das positive Gegenstück. Nachdem wir der Abfrage die Funktion hinzugefügt haben, erhalten wir Folgendes: mysql> SELECT *,ABS(6-a) as 'difference' FROM tblNumber ORDER BY difference; +------+------------+ | a | difference | +------+------------+ | 6 | 0 | | 5 | 1 | | 8 | 2 | | 9 | 3 | | 10 | 4 | | 1 | 5 | | 15 | 9 | | 21 | 15 | | 50 | 44 | | 500 | 494 | +------+------------+ 10 rows in set (0.05 sec)

Das ist schon besser. Die Ergebnisliste zeigt, wie nahe die Zahlen aus der Tabelle der Zahl 6 sind. Je weiter unten ein Wert liegt, desto weiter ist er von unserer vorgegebenen Zahl entfernt. Aber wie nutzen wir das in der Praxis – normalerweise fordern wir den Benutzer nicht auf, eine Zahl auszuwählen! Das lässt sich einfach erklären – der Benutzer wählt zwar in der Regel eine nicht-numerische Antwort aus einem Popup-Menü o.Ä. aus, aber diese Antwort könnte durch eine Zahl dargestellt werden. Wählen Sie beispielsweise die Rauchgewohnheiten Ihres bevorzugten Reisebegleiters aus: 1. Nichtraucher 2. Gelegenheitsraucher 3. Raucher 4. Kann vor lauter Rauch nicht mehr aus den Fenstern sehen Hier werden die möglichen Auswahlmöglichkeiten numerisch in eine Relation zueinander gesetzt. Die Abfrage einer Datenbank kann, um mögliche Übereinstimmungen zu Ihren bevorzugten Rauchgewohnheiten zu finden, diese Werte übernehmen und die oben beschriebene Technik nutzen, um ähnliche Antworten in einer Ergebnisliste anzuzeigen. Auf diese Weise können Sie Menschen finden, die mit Ihren Vorstellungen »in etwa« übereinstimmen, aber nicht unbedingt dieselben Gewohnheiten wie Sie haben müssen. Die Welt ist nicht schwarz und weiß – und Ihre Abfragen sollten das berücksichtigen.

603

Komplexe Techniken: Komplexe Abfragesysteme

Das hilft uns jedoch immer noch nicht wirklich weiter, wenn mehrere Fragen beantwortet werden müssen – und darauf wollen wir letztlich hinaus. Das System muss erweitert werden, sodass Sie mehrere Antworten daraufhin auswerten können, in welcher Relation sie zu anderen Antworten stehen. Für diese Aufgabe verwenden wir eine etwas erweiterte Tabelle, die zwei Werte aufnimmt, um die beiden Antworten darzustellen, die miteinander verglichen werden: create table tblTwoNumber ( a int, b int );

Tragen Sie Werte in die Tabelle ein: INSERT INSERT INSERT INSERT INSERT INSERT INSERT INSERT INSERT INSERT

INTO INTO INTO INTO INTO INTO INTO INTO INTO INTO

tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber

VALUES VALUES VALUES VALUES VALUES VALUES VALUES VALUES VALUES VALUES

(2,5); (10,5); (9,1); (15,50); (1,2); (20,5); (2,5); (11,2); (3,7); (6,6);

Wählen Sie zwei Zahlen aus, für die eine möglichst genaue Übereinstimmung gefunden werden soll. Ich habe für a und b die Werte 8 und 12 ausgewählt. Wenn wir dieselbe Prozedur wie für einzelne Antworten verwenden, erhalten wir zwei Ergebnislisten, die die Rangfolge der anderen Datensätze in Relation zu den ausgewählten Zahlen zeigen: mysql> SELECT *,ABS(8-a) as 'difference' FROM tblTwoNumber ORDER BY difference; +------+------+------------+ | a | b | difference | +------+------+------------+ | 9 | 1 | 1 | | 10 | 5 | 2 | | 6 | 6 | 2 | | 11 | 2 | 3 | | 3 | 7 | 5 | | 2 | 5 | 6 | | 2 | 5 | 6 | | 15 | 50 | 7 | | 1 | 2 | 7 | | 20 | 5 | 12 | +------+------+------------+ 10 rows in set (0.02 sec)

604

Komplexe Suchen

und mysql> SELECT *,ABS(12-b) as 'difference' FROM tblTwoNumber ORDER BY difference; +------+------+------------+ | a | b | difference | +------+------+------------+ | 3 | 7 | 5 | | 6 | 6 | 6 | | 2 | 5 | 7 | | 10 | 5 | 7 | | 20 | 5 | 7 | | 2 | 5 | 7 | | 1 | 2 | 10 | | 11 | 2 | 10 | | 9 | 1 | 11 | | 15 | 50 | 38 | +------+------+------------+ 10 rows in set (0.01 sec)

Beachten Sie, dass die Auflistung der ausgewählten Übereinstimmungen bei der Betrachtung des Feldes »a« sehr viel anders aussieht als bei der Betrachtung von »b«. Daran erkennen Sie das Problem, mit dem wir es zu tun haben. Wie können Sie bei der Ausführung der Abfrage beide Variablen berücksichtigen? Kein Problem – wir ändern die Abfrage einfach ab, sodass sie nach dem kombinierten Fehler (oder der Distanz der ursprünglichen Zahlen) in den beiden Abfragen sortiert: mysql> SELECT *,(ABS(8-a)+ABS(12-b)) as 'difference' FROM tblTwoNumber ORDER BY difference; +------+------+------------+ | a | b | difference | +------+------+------------+ | 6 | 6 | 8 | | 10 | 5 | 9 | | 3 | 7 | 10 | | 9 | 1 | 12 | | 2 | 5 | 13 | | 2 | 5 | 13 | | 11 | 2 | 13 | | 1 | 2 | 17 | | 20 | 5 | 19 | | 15 | 50 | 45 | +------+------+------------+ 10 rows in set (0.00 sec)

Durch die Addition der beiden Absolutwerte erhalten wir einen Maßstab dafür, wie weit die verschiedenen Datensätze von den beiden ausgewählten Zahlen entfernt liegen.

605

Komplexe Techniken: Komplexe Abfragesysteme

Dieses Modell kann erweitert werden, um beliebig viele Werte zu überprüfen – dazu gehen wir nach demselben Muster vor und verwenden die kombinierten Differenzen zwischen den gewünschten Werten und den tatsächlichen Werten.

Schwellenwerte Warten Sie... Sie wollen nicht wirklich alles anzeigen, das auch nur im Entferntesten Ähnlichkeit mit den gewünschten Werten hat. Diese Abfragen unterscheiden sich von den bisher für Suchen verwendeten Abfragen, weil sie alle Datensätze in der durchsuchten Tabelle zurückgeben. Deshalb sollten Sie eine Begrenzung für die Anzahl der angezeigten Datensätze einfügen. Die Datensätze am Ende der Liste haben für den Benutzer vermutlich nur noch wenig Bedeutung. Es gibt zwei Möglichkeiten, die beschränken, was der Benutzer bei der Ausführung der Abfrage sieht – entweder eine Beschränkung der zurückgegebenen Datensätze oder die Formulierung einer Obergrenze für die Ergebnisse. Die Beschränkung der Ergebnisse auf eine bestimmte Anzahl an Datensätzen ist normalerweise ein guter Ansatz, aber der Benutzer hat auf diese Weise wenig Kontrolle darüber, was er sieht. Angenommen, Sie wollen eine Top-10-Liste für den Benutzer anlegen, sodass er die ersten 10 Übereinstimmungen erhält. Leider macht das wenig Sinn für den Benutzer, wenn die ersten 50 Datensätze perfekte Übereinstimmungen darstellen. Ihm fehlen dann 40 Ergebnisse, die seine Abfrage genauso gut erfüllt haben wie die ersten 10. Die Beschränkung der Ergebnisse auf einen Wertebereich ist dennoch häufig mehr als ausreichend für die Aufgabenstellung und kann durch das UltraDev-Verhalten WIEDERHOLTER BEREICH einfach realisiert werden. Ein komplexerer Ansatz, die angezeigten Ergebnisse zu beschränken, ist die Vorgabe eines Schwellwerts für die Suche, wie beispielsweise eine Obergrenze für den Fehlerbetrag, der für die zurückgegebenen Datensätze vorhanden sein darf. Angenommen, wir suchen nach einem kombinierten Fehler kleiner 20, dann könnten wir die letzte Abfrage mithilfe einer WHERE-Klausel wie folgt abändern: mysql> SELECT *,(ABS(8-a)+ABS(12-b)) as 'difference' FROM tblTwoNumber WHERE (ABS(8-a)+ABS(12-b))<20 ORDER BY difference; +------+------+------------+ | a | b | difference | +------+------+------------+ | 6 | 6 | 8 | | 10 | 5 | 9 | | 3 | 7 | 10 | | 9 | 1 | 12 | | 2 | 5 | 13 | | 2 | 5 | 13 |

606

Komplexe Suchen

| 11 | 2 | 13 | | 1 | 2 | 17 | | 20 | 5 | 19 | +------+------+------------+ 9 rows in set (0.00 sec)

Die Redundanz der Differenzberechnung in den Klauseln ORDER BY und WHERE ist in MySQL zwingend erforderlich. Ihr Datenbankserver bietet möglicherweise eine effizientere Methode, die Abfrage auszuführen, wobei der Fehlerwert nicht zweimal berechnet wird. Durch die Vorgabe eines Schwellenwerts wird die Anzahl der dem Benutzer angezeigten Ergebnisse nicht beschränkt – statt dessen wird damit eine bestimmte Qualität der Antworten erzwungen. Wenn Sie dem Benutzer erlauben, einen Schwellenwert anzugeben, wollen Sie die Auswahl sicherlich benutzerfreundlich gestalten. Die Aufforderung »Geben Sie einen Schwellenwert ein« ist dabei nicht besonders nett. Eine Lösung für die Praxis würde beispielsweise einen Prozentsatz der erlaubten Fehler verwenden, den der Benutzer festlegen kann. Damit stellt sich jedoch die Frage, wie der Fehlerbetrag als Prozentwert dargestellt werden kann. Für jede der Fragen zur Definition Ihrer Abfrage addieren Sie den Maximalfehlerbetrag zwischen der ersten und der letzten Antwort. Angenommen, wir haben die beiden folgenden Fragen: Wie mögen Sie Ihren Toast? 1. Golden 2. Braun 3. Dunkelbraun 4. Verbrannt und Essen Sie Eier? 1. Nie 2. Einmal in der Woche 3. Täglich Wir haben zwei Fragen, wobei es auf die erste vier mögliche Antworten gibt, auf die zweite drei.

607

Komplexe Techniken: Komplexe Abfragesysteme

Dieses gesamte Abfragesystem basiert darauf, dass Antworten bereitgestellt werden, die von einem Ende des Spektrums zum anderen reichen. Auf diese Weise können wir abschätzen, wie weit entfernt von einer gewünschten Antwort wir uns befinden. Außerdem erhalten die Antwortlisten damit eine strenge Reihenfolge. Jeder möglichen Option muss ein Wert folgen, der nur eine leichte Änderung gegenüber der naheliegendsten Variante darstellt. Für die Toastliste können wir beispielsweise nicht »Verbrannt« als Nummer 2 darstellen. Damit würde impliziert, dass verbrannter Toast naheliegend zu goldenem Toast ist – und das ist definitiv nicht der Fall. Das Worst-Case-Szenario für die erste Frage ist, dass der Benutzer eine Übereinstimmung für die erste Antwort »Golden« sucht, die mit der Antwort »Verbrannt« verglichen wird. Der Abstand zwischen diesen beiden Optionen beträgt 3 – das ist der maximale Fehlerbetrag, der in der ersten Frage möglich ist. Für die zweite Aufgabenstellung ist der maximale Fehlerbetrag ebenfalls die Differenz zwischen der ersten und der letzten Antwort – also 2. Durch die Kombination der beiden erhalten wir insgesamt einen möglichen Fehler von 5 – 100% Fehler ist 5, 50% Fehler ist 2,5, 0% ist 0 usw. Nachdem wir diese Werte berechnet haben, können Sie dem Benutzer ein Popup-Menü bereitstellen, das einen Prozentwert und einen zugehörigen Schwellenwert anbietet – womit die Anzahl der zurückgegebenen Werte bestimmt werden kann. Wenn Sie sich fragen, ob Sie eine prozentuale Übereinstimmung statt eines prozentualen Fehlers angeben können: natürlich! Durch die Invertierung der Werte erhalten Sie genau, wonach Sie suchen. Wenn wir beispielsweise für das oben beschriebene Szenario eine Übereinstimmung von 100 % fordern, dann geben Sie den Schwellenwert 0 an. Wenn Sie dagegen 0 % Zuverlässigkeit brauchen, verwenden Sie als Schwellenwert den Maximalbetrag möglicher Fehler – in diesem Fall 5.

Gewichtung von Antworten Ein weiteres praktisches Werkzeug für unser Abfragesystem ist eine Methode zur Gewichtung von Antworten – also ob sie eine größere Bedeutung besitzen als andere. Damit wird den Antworten auf eine Frage eine höhere Bedeutung zugeordnet als den Antworten auf andere Fragen oder anderen Optionen innerhalb einer Antwort. Angenommen, wir haben eine Frage, die nach jemandem sucht, der in Ihrer Nähe wohnt:

608

Die Sitemap

Wo wohnen Sie? 1. Ohio 2. Kalifornien 3. Jupiter Diese Werte stehen in keiner engen Beziehung zueinander, aber wir haben keine anderen Optionen. Statt sie sequentiell zu nummerieren, können wir eine »Strafe« für alles andere als die direkte Übereinstimmung einführen, indem wir die Optionen einfach neu nummerieren: 1.

Ohio

10.

Kalifornien

3000. Jupiter Diese Nummerierung drückt die Beziehung zwischen den Orten aus. Ohio und Kalifornien sind zwar weit voneinander entfernt, aber der Jupiter liegt irgendwo im Weltraum. Anhand dieser Nummerierung würde für eine Suche nach jemandem, der in Ohio oder Kalifornien wohnt, ziemlich sicher die Antwort »Jupiter« ganz unten in der Antwortliste erscheinen. Das Abfragesystem, das wir auf den letzten Seiten entwickelt haben, kann auch mit sehr viel Fantasie nicht als der Weisheit letzter Schluss in Bezug auf Suchtechnologien betrachtet werden. Es handelt sich dabei nur um eine Vorlage und einen Ausgangspunkt für die Entwicklung eigener komplexer Abfragesysteme. Sie können jedoch zusätzliche Bedingungen und andere Funktionen in das SQL einfügen, um Ihren Anforderungen gerecht zu werden. Sie wollen schließlich, dass Ihr Datenbankserver so viel Arbeit wie möglich für Sie erledigt. Je mehr benutzerdefinierte Programmierung Sie vermeiden können, desto besser. Aber wie können wir das alles in einer Site nutzen? Wir entwickeln hier eine »Reisebegleiter«-Site, um anderen zu helfen, Reisebegleiter und Autobesitzer in einer fiktiven Stadt zusammenzubringen.

18.2 Die Sitemap In unserem heutigen Projekt wollen wir eine Site entwickeln, die unser zuvor entwickeltes komplexes Abfragesystem nutzt, um Menschen als Reisepartner zusammenzubringen. Wir werden dafür ein sehr einfaches Layout verwenden – ein Anmeldungs- und Registrierungssystem sowie einen Abfrage/Ergebnisbildschirm.

609

Komplexe Techniken: Komplexe Abfragesysteme

Die Bildschirme für die Anmeldung und die Registrierung sind denen aus dem Projekt in Kapitel 17 sehr ähnlich, außer dass sie ein für die Benutzer-Authentifizierung eingebautes Serververhalten verwenden. Außerdem hat der Benutzer die Möglichkeit, seine Einstellungen jederzeit zurückzusetzen. Die restliche Site besteht aus einem Bildschirm für die Abfrage und einem für die Anzeige der übereinstimmenden Ergebnisse. Abbildung 18.1 zeigt eine Darstellung der Sitemap.

Registrierung

Anmeldung

Profil registrieren

Suche

Ergebnisse

Abbildung 18.1: Dieses Kapitel demonstriert die Konzepte einer Fuzzy-Suchmaschine.

18.3 Die Tabellendefinitionen Die Tabellen für diese Site sind wirklich einfach. Ein Großteil der benötigten Informationen wird in einer einzigen Tabelle abgelegt. Eine zweite Tabelle bringt die Antworten auf die Frage in eine Beziehung zu den Werten, mit denen der Fehler zwischen den verschiedenen Profilen berechnet wird. Für dieses Projekt wurde mehr Theorie besprochen als für die anderen, deshalb werden wir weniger Zeit für seine Entwicklung benötigen. Als Erstes brauchen wir eine Tabelle mit Benutzerinformationen (UserInfo) – ähnlich denen, die wir bereits verwendet haben. Diese Tabelle enthält den Benutzernamen, das Kennwort und alle Einstellungen. Aber welche Einstellungen gibt es?

610

Die Tabellendefinitionen

Die Tabelle UserInfo Die Einstellungen eines Benutzers werden in einem Profil implementiert, das die anderen Benutzer durchsuchen können, und das er nutzen kann, um das Suchsystem zu »füttern«, sodass er nicht alle Optionen manuell eingeben muss. Um die Einstellungen einzurichten, müssen wir festlegen, wie viele Fragen es geben soll. Die Benutzertabelle enthält für jede Frage ein Feld – dieses Feld enthält eine Antwort-ID, mit deren Hilfe der Wert für diese Antwort gesucht wird. Angenommen, wir haben für die Abfragen fünf Fragen. Außerdem nehmen wir die E-Mail-Adresse des Benutzers auf, sodass andere Menschen Kontakt zu möglichen Übereinstimmungen (also den Reisebegleitungen) aufnehmen können. create table tblUserInfo ( userID int not null auto_increment, username varchar(50) not null, password varchar(50) not null, email varchar(200), fullname varchar(200), q1Response int, q2Response int, q3Response int, q4Response int, q5Response int, primary key (userID) );

Gestern haben wir die Einstellungen des Benutzers in einer separaten Tabelle vorgehalten, sodass sie für zukünftige Anforderungen besser erweitert werden können. Das ist praktisch, wenn Sie Wert darauf legen, dass Ihr System einfach erweitert werden kann, aber UltraDev ist nicht in der Lage, eine benutzerfreundliche Bedienung zu realisieren. Weil jeweils nur ein einziger Datensatz gleichzeitig eingefügt werden kann, ist die einzige Methode, alle Einstellungen auf einem Bildschirm gleichzeitig anzuzeigen bzw. zu setzen, sie alle in einen einzigen Datensatz aufzunehmen. In dem heutigen Projekt wird das eingebaute Serververhalten BENUTZERAUTHENTIFIZIERUNG von UltraDev verwendet. Dieses Verhalten implementiert das Feld mit dem Benutzernamen als Primärschlüssel und bietet anderweitig nur sehr wenig Flexibilität. Ich bevorzuge das bisher verwendete Benutzer-ID-Schema, weil es ermöglicht, Systeme zu entwickeln, in denen der Benutzer seinen Namen ändern kann (da es sich dabei nicht um den Primärschlüssel handelt). Weil wir aber in diesem Projekt den Benutzer zwingen werden, einen eindeutigen Benutzernamen zu wählen, können wir davon ausgehen, dass das Benutzernamenfeld in der Datenbank eindeutig ist, sodass wir das Authentifizierungssystem für unsere existierende Tabellendefinition verwenden können.

611

Komplexe Techniken: Komplexe Abfragesysteme

Wenn Sie ein System entwickeln wollen, in dem der Benutzer seinen Namen ändern kann, sind die eingebauten Authentifizierungs-Verhalten nicht geeignet. Sie müssen ein eigenes System einrichten, wie in Kapitel 17 beschrieben. Das gilt auch für die Benutzer von UltraDev 1.0, die keinen Zugriff auf die neuen Authentifizierungsverhalten haben.

Die Optionstabelle Damit das Suchformular anhand der Benutzereinstellungen mit Standardwerten gefüllt werden kann, müssen wir mehr als nur den Wert der von ihm ausgewählten Antwort speichern. Deshalb brauchen wir eine zweite Tabelle, in der alle Informationen über eine Antwort (ihren Titel, ihren Wert und ihre ID) abgelegt werden. Die Antwort-ID wird in den Benutzereinstellungen gespeichert und verweist zurück auf die Optionen. Die Tabelle könnte wie folgt aussehen: create table tblOption ( optionID int, optionName varchar(200), optionValue int, primary key (optionID) );

Leider funktioniert das nicht in Kombination mit der UserInfo-Tabelle, die wir eingerichtet haben. Das liegt daran, dass wir mehrere Optionen zu mehreren Feldern in der Tabelle tblUserInfo in Relation bringen müssen. Diese n:n-Beziehung ist in unserem System nicht möglich. Um es zu umgehen, legen wir eine separate Optionstabelle für jede der Fragen an – dann kann jede Frage in einer separaten Tabelle zugeordnet werden und das Problem ist gelöst. Wir können die Optionstabelle also wie folgt kürzen: create table tblOption1 ( optionName1 varchar(200), optionValue1 int not null, primary key (optionValue1) );

Legen Sie vier weitere Versionen der Tabelle an, tblOption2 bis tblOption5, wobei auch die Felder entsprechend nummeriert werden müssen. Wir nutzen diese Tabellen, um dynamisch Popup-Menüs für die einzelnen Fragen der Abfrage zu erzeugen. Alle Felder der fünf Optionstabellen müssen eindeutig benannt werden (optionName1 usw.), damit sie von den Feldern der anderen Optionstabellen unterschieden werden können. Gegen Ende des Projekts werden Sie alle fünf Tabellen gleichzeitig abfragen und brauchen deshalb Zugriff auf alle fünf Werte der Optionsnamen.

612

Die Tabellendefinitionen

Abbildung 18.2 zeigt die endgültige Datenbankstruktur. tblOption1 optionID1* optionValue1 tblUserInfo userID username password email fullname q1Response q2 Response q3 Response q4 Response q5 Response

tblOption2 optionID2* optionValue2 tblOption3 optionID3* optionValue3 tblOption4 optionID4* optionValue4 tblOption5 optionID5* optionValue5

Abbildung 18.2: Mithilfe von zwei Tabellen werden Informationen gesammelt und Werte in eine Rangfolge gebracht.

Beispieldaten einfügen Im nächsten Schritt werden die Optionen und die Beispieldaten eingerichtet. Bevor die Optionsdaten gespeichert werden können, müssen wir die Fragen definieren, die mit diesen Optionen beantwortet werden. Diese Site sucht Mitfahrgelegenheiten und Reisbegleitungen, deshalb versuchen wir, plausible Fragen und Optionen bereitzustellen. Auf einer echten Site wäre die Liste mit den Fragen und Optionen natürlich sehr viel umfangreicher, aber für unsere Zwecke soll es ausreichend sein: 1. In welche Richtung wollen Sie reisen? 1. 315 Süd 2. 670 Süd 3. 270 Südwest 10. 315 Nord 11. 670 Nord 12. 270 Nordost

613

Komplexe Techniken: Komplexe Abfragesysteme

Beachten Sie, dass dazwischen Nummern übersprungen wurden. Auf diese Weise können die Fragen gewichtet werden, weil die Reiseroute relativ wichtig ist. 2. Darf Ihr Begleiter rauchen? 1. Nichtraucher 2. Leichter Raucher 3. Normaler Raucher 4. Füll das Auto mit Rauch! 3. Welche Transportmittel bevorzugen Sie? 1. Motorrad mit Beiwagen 2. Kombi 3. Sportwagen 4. Van 4. Wann wollen Sie das Ziel erreichen? 1. 8:00 2. 8:30 3. 9:00 4. 9:30 5. Wann wollen Sie wieder nach Hause fahren? 1. 16:00 2. 16:30 3. 17:00 4. 17:30 Das sind keine besonders interessanten Fragestellungen, aber sie sind ausreichend. Fügen Sie jetzt Optionen in die Optionstabelle ein. Jede Option sollte einer bestimmten Frage zugeordnet werden und eine eindeutige Options-ID besitzen, ebenso wie den numerischen Wert, anhand dessen berechnet wird, wie genau diese Antwort »trifft«. INSERT INSERT INSERT INSERT

614

INTO INTO INTO INTO

tblOption1 tblOption1 tblOption1 tblOption1

VALUES VALUES VALUES VALUES

('315 ('670 ('270 ('315

Süd',1); Süd',2); Südwest',3); Nord',10);

Die Tabellendefinitionen

INSERT INTO tblOption1 VALUES ('670 Nord',11); INSERT INTO tblOption1 VALUES ('270 Nordost',12); INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tblOption2 tblOption2 tblOption2 tblOption2

VALUES VALUES VALUES VALUES

('Nichtraucher',1); ('Leichter Raucher',2); ('Normaler Raucher',3); ('Füllt das Auto mit Rauch!',4);

INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tblOption3 tblOption3 tblOption3 tblOption3

VALUES VALUES VALUES VALUES

('Motorrad mit Beiwagen',1); ('Kombi',2); ('Sportwagen',3); ('Van',4);

INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tblOption4 tblOption4 tblOption4 tblOption4

VALUES VALUES VALUES VALUES

('8:00',1); ('8:30',2); ('9:00',3); ('9:30',4);

INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tblOption5 tblOption5 tblOption5 tblOption5

VALUES VALUES VALUES VALUES

('16:00',1); ('16:30',2); ('17:00',3); ('17:30',4);

Jetzt tragen wir ein paar entsprechende Datensätze in die Benutzertabelle ein: INSERT INTO tblUserInfo VALUES ('','jray','johnpass','[email protected]', 'John Ray',2,3,1,1,2); INSERT INTO tblUserInfo VALUES ('','eking','hairy','[email protected]', 'Elvis King',1,4,4,3,3); INSERT INTO tblUserInfo VALUES ('','ptoe','remote','[email protected]', 'Paul Toenail',3,1,1,1,2); INSERT INTO tblUserInfo VALUES ('','jlamp','monitor','[email protected]', 'Jeff Lamppost',2,2,3,1,3); INSERT INTO tblUserInfo VALUES ('','tchee','recliner','[email protected]', 'Tuffy Cheese',11,3,2,1,2); INSERT INTO tblUserInfo VALUES ➥('','mcliff','pomeranian','[email protected]', 'Marty Cliffton',12,3,4,1,2); INSERT INTO tblUserInfo VALUES ('','graey','kitty','[email protected]', 'Graeyling Smetana',10,3,4,3,2); INSERT INTO tblUserInfo VALUES ('','jvuj','johnpass','[email protected]', 'Jules Vuje',2,4,2,1,1); INSERT INTO tblUserInfo VALUES ('','lhans','computer','[email protected]', 'Leftie Hans',1,2,4,4,2); INSERT INTO tblUserInfo VALUES ('','jbow','dasboot','[email protected]', 'Jim Bow',12,1,2,3,2);

Das ist ein guter Ausgangspunkt und wir haben alles, was wir brauchen, um das System aufzubauen und zu testen.

615

Komplexe Techniken: Komplexe Abfragesysteme

18.4 Das Anmeldesystem Das Anmeldesystem ist nahezu identisch mit dem System, das wir gestern entwickelt haben. Vier Bildschirme sammeln die Systemdaten, speichern sie und erlauben dem Benutzer dann, sich anzumelden, indem eine Sitzungsvariable erzeugt wird. Ein weiterer Bildschirm, update, erlaubt dem Benutzer, sein Profil zu aktualisieren.

Registrierung und Ausgangsprofil Ein Besucher, der die Site zum ersten Mal besucht, will sich beim System registrieren und sein Profil einrichten – deshalb soll er als Erstes zur Registrierung gelangen. Der Bildschirm für die Registrierung verhält sich ganz ähnlich dem gestern gezeigten – er besteht aus einem kleinen Formular, das den Benutzer auffordert, einen neuen Benutzernamen einzugeben, und das diesen zur Verarbeitung weitergibt. In diesem Kapitel verwenden wir jedoch die eingebauten Authentifizierungsmethoden. Falls Sie Kapitel 17 nicht gelesen haben – im ersten Schritt haben wir sichergestellt, dass der zu registrierende Benutzername eindeutig war. Falls er nicht eindeutig ist, muss der Benutzer aufgefordert werden, einen anderen Benutzernamen einzugeben. Dieser gesamte Prozess wird jetzt durch ein Serververhalten automatisiert. Zunächst entwerfen wir ein Registrierungsformular, das Felder für den Benutzernamen, das Kennwort und die E-Mail-Adresse enthält – die grundlegenden Informationen, die Sie sammeln wollen. Weil das Benutzerprofil Daten enthalten soll, bevor ihm eine Suche ermöglicht wird, werden als Nächstes fünf verborgene Felder angelegt, die dieses Standardprofil aufnehmen. Diese Felder werden mit q1Response bis q5Response benannt und enthalten den Standardwert 1 (oder welchen Optionswert Sie als Standardwert vorgeben wollen). Es handelt sich dabei nicht um dynamische Felder; es sind nur fünf im Code festgeschriebene Felder, die einen einzigen Wert enthalten. Abbildung 18.3 zeigt das vollständige Dokument register.asp. Schließlich brauchen Sie noch zwei Serververhalten für die Registrierungsseite, um sicherzustellen, dass der Benutzername eindeutig ist, und dann die Registrierungsinformation in die Tabelle tblUserInfo einzutragen. Überraschenderweise fordert UltraDev, dass Sie das Verhalten DATENSATZ EINFÜGEN hinzufügen, bevor Sie das Verhalten zur Überprüfung des Benutzernamens einfügen.

616

Das Anmeldesystem

Abbildung 18.3: Die erste Registrierungsseite überprüft den Benutzernamen und speichert die Registrierungsinformation, falls sie korrekt war.

Jetzt fügen wir das Einfügen-Verhalten hinzu: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), um ein neues DATENSATZ EINFÜGEN-Verhalten einzufügen. 3. Wählen Sie die entsprechende Verbindung und stimmen Sie die Formularelemente mit den Feldern in tblUserInfo ab, wie in Abbildung 18.4 gezeigt.

Abbildung 18.4: Stellen Sie sicher, dass die Felder aus der Registrierungsseite mit den Feldern der Tabelle tblUserInfo übereinstimmen.

617

Komplexe Techniken: Komplexe Abfragesysteme

4. Nachdem Sie Werte eingefügt haben, konfigurieren Sie das Verhalten, um den Benutzer zur Anmeldeseite (login.asp) weiterzuleiten. Im letzten Schritt für diese Seite wird das Verhalten NEUEN BENUTZERNAMEN ÜBERPRÜeingefügt, um sicherzustellen, dass ein neuer Benutzername in die Datenbank eingetragen wird: FEN

1. Öffnen Sie die Palette SERVERVERHALTEN, falls diese noch nicht geöffnet ist. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie im Untermenü BENUTZERAUTHENTIFIZIERUNG den Eintrag NEUEN BENUTZERNAMEN ÜBERPRÜFEN. 3. Konfigurieren Sie das Verhalten nach Aufforderung so, dass es das Feld mit dem Benutzernamen auf Eindeutigkeit überprüft. 4. Falls der Benutzername bereits existiert, soll das Verhalten auf eine Seite führen, die dem Benutzer eine Fehlermeldung anzeigt, wie beispielsweise duplicate.asp. Ihr Dialog sollte jetzt etwa aussehen wie in Abbildung 18.5 gezeigt. 5. Klicken Sie auf OK, nachdem Sie fertig sind. Abbildung 18.5: Das Feld Benutzername sollte auf Eindeutigkeit überprüft werden. Ist es nicht eindeutig, soll der Benutzer zu duplicate.asp umgeleitet werden.

Wie im Beispiel aus Kapitel 17 bereits gezeigt, müssen wir jetzt noch die Meldung bereitstellen, die den Benutzer informiert, falls der gewählte Benutzername bereits im System existiert. Weil die UltraDev-Verhalten den Benutzer automatisch auf eine neue Seite umleiten, falls ein Duplikat vorhanden ist, brauchen Sie nur eine entsprechende Meldung auf der Seite duplicate.asp sowie einen Link zurück zum Registrierungsbildschirm bereitzustellen, sodass der Benutzer einen erneuten Versuch unternehmen kann. Abbildung 18.6 zeigt ein Beispiel dafür, wie Ihr Bildschirm BEREITS VORHANDENER BENUTZERNAME aussehen könnte.

618

Anmeldebildschirme

Abbildung 18.6: Informieren Sie den Benutzer, falls er einen Namen auswählt, der im System bereits vorhanden ist.

18.5 Anmeldebildschirme Ähnlich dem Registrierungsprozess sind auch für die Anmeldung am System zwei Bildschirme erforderlich – einer, der die Benutzerinformationen sammelt und überprüft, und ein weiterer, der eine Meldung anzeigt, falls eine fehlerhafte Anmeldung vorgenommen wurde. Wie gestern bereits gezeigt, verwenden wir eine Sitzungsvariable, die den Benutzer »begleitet«, nachdem er sich angemeldet hat. Wir wollen diese Variable jedoch nicht manuell setzen! Das Authentifizierungssystem von UltraDev setzt intern eine Sitzungsvariable mit dem aktuellen Benutzernamen des Benutzers – wir können diese Variable benutzen, statt den Code zu bearbeiten! Die UltraDev-Verhalten für die Benutzerauthentifizierung speichern den Benutzernamen einer Person mit gültiger Anmeldung in einer Sitzungsvariablen. Das Speichern der Benutzer-ID wäre sinnvoller, weil man damit einem Benutzer erlauben kann, später seinen Anmeldenamen zu ändern (Primärschlüssel können nicht geändert werden!) Weil wir unter der Annahme arbeiten, dass alle Benutzernamen eindeutig sind, gibt es kein Problem. Der erste Anmeldebildschirm (login.asp) macht genau dasselbe wie der erste Registrierungsbildschirm. Er sammelt Informationen (in diesem Fall den Benutzernamen und das Kennwort) und analysiert diese Daten mithilfe eines Serververhaltens. Anschließend leitet er den Benutzer abhängig von dem Ergebnis der Eingabe entsprechend weiter. Entwerfen Sie die Anmeldeseite ganz nach Belieben. Die einzige Bedingung ist, dass sie Felder für den Benutzernamen und ein Kennwort sowie eine SENDEN-Schaltfläche bereitstellt. Abbildung 18.7 zeigt ein Beispiel für diesen Bildschirm.

619

Komplexe Techniken: Komplexe Abfragesysteme

Abbildung 18.7: Der Anmeldebildschirm sollte Felder für den Benutzernamen und das Kennwort enthalten, deren Inhalt vom Verhalten Benutzerauthentifizierung verarbeitet wird.

Nachdem Sie das Formular fertig haben, öffnen Sie die Palette SERVERVERHALTEN und fügen das Verhalten BENUTZER ANMELDEN ein, um die Überprüfung des Benutzernamens und des Kennworts vorzunehmen. 1. Klicken Sie in der Palette SERVERVERHALTEN auf die Schaltfläche mit dem Plussymbol (+). 2. Wählen Sie im Untermenü BENUTZERAUTHENTIFIZIERUNG den Eintrag BENUTZER ANMELDEN. 3. Wählen Sie das Formular aus, das die Anmeldeinformation übergibt, ebenso wie die Felder für den Benutzernamen und das Kennwort im Formular. 4. Legen Sie die Datenbankverbindung fest und wählen Sie die Tabelle tblUserInfo sowie die Spalten username/password aus dieser Datenbanktabelle. 5. Bei einer erfolgreichen Anmeldung soll der Benutzer auf die Seite search.asp weitergeleitet werden, sodass er anfangen kann, das System zu durchsuchen. Wenn Sie möchten, können Sie die Option ZUM VORHERIGEN URL GEHEN (FALLS VORHANDEN) verwenden. 6. Falls eine Anmeldung fehlschlägt, wird der Benutzer auf die Seite badlogin.asp weitergeleitet.

620

Anmeldebildschirme

7. Stellen Sie sicher, dass der Zugriff durch einen Benutzernamen und ein Kennwort geschützt wird. 8. Nachdem Sie fertig sind, sollte Ihr Formular für die Benutzeranmeldung ähnlich wie in Abbildung 18.8 gezeigt aussehen. Klicken Sie auf OK, wenn Sie mit Ihrer Arbeit zufrieden sind.

Abbildung 18.8: Wählen Sie die Felder username/password

sowohl aus dem Anmeldeformular als auch aus der Datenbank.

Wie bei dem Registrierungssystem können Sie jetzt Ihre Seite badlogin.asp anlegen, auf die der Benutzer gelangt, wenn er nicht die richtigen Informationen eingegeben hat. Sie könnten beispielsweise auch Links auf die Anmelde- und Registrierungsseiten für diesen Bildschirm bereitstellen. Ein Beispiel für die Seite badlogin.asp sehen Sie in Abbildung 18.9.

Abbildung 18.9: Die zweite Seite des Anmeldesystems sollte eine Fehlermeldung für eine ungültige Kombination aus Benutzername und Kennwort anzeigen.

621

Komplexe Techniken: Komplexe Abfragesysteme

Damit sind wir mit den Anmelde- und Registrierungssystemen fertig. Jetzt geht es mit dem wirklich Spannenden weiter – der Entwicklung der Seite für die Profilverwaltung und die Suchmaschine.

18.6 Die Seite für die Profilaktualisierung Die Seite für die Profilaktualisierung ist die schwierigste Seite des heutigen Projekts – nicht weil die Entwicklung so schwierig ist oder weil sie so komplexe Verhalten benötigt, sondern weil die Codierung so müßig ist. Dieses Seite ermöglicht dem Benutzer, die Informationen in seinem Profil zu aktualisieren – Kennwort, E-Mail-Adresse und die Antworten auf die fünf Fragen. Wir richten zunächst ein Formular mit den fünf Fragen und fünf entsprechenden PopupMenüs, q1Response bis q5Response, ein – ebenso wie Felder für die Aktualisierung der E-Mail-Adresse und des Kennworts. Schließlich fügen wir noch eine SENDEN-Schaltfläche ein, womit der Benutzer die Änderungen speichern kann, die er an seinem Profil vorgenommen hat. Alle Felder müssen zu den Daten in der Datenbank gebunden werden – und hier wird es aufwändig. Zur Steuerung der Seite sind insgesamt sechs Datensatzgruppen erforderlich. Die erste Datensatzgruppe holt die Benutzerinformationen aus der Tabelle tblUserInfo. Sie wird benötigt, um die Felder für die E-Mail-Adresse und das Kennwort auszufüllen. Definieren Sie diese Abfrage, rsUserInfo, jetzt. Sie können sie als einfache Abfrage anlegen, die alle Felder in tblUserInfo auswählt – basierend auf einem Filter, wobei die Sitzungsvariable MM_Username gleich dem Benutzernamenfeld in der Datenbank sein muss. Die Sitzungsvariable MM_Username wird automatisch gesetzt, wenn der Benutzer das Serververhalten ANMELDUNG erfolgreich abgeschlossen hat. Sie können sie wie selbst angelegte Sitzungsvariablen nutzen. Jetzt binden Sie die E-Mail-Adresse zu dem Formularfeld für die E-Mail-Adresse, wobei Sie dieselbe Technik anwenden wie bereits beschrieben. Markieren Sie in der Entwurfsansicht die E-Mail-Adresse und wählen Sie dann in der Datensatzgruppe rsUserInfo das E-Mail-Feld. Setzen Sie den Bindetyp unten im Fenster für die Datenbindung auf input.value und klicken Sie auf die Schaltfläche BINDEN. Wenn Sie die alternative Methode zum Binden von Attributen vorziehen (nämlich über die Eigenschaftenpalette), verwenden Sie diese. Wiederholen Sie diese Prozedur für das Kennwortfeld. Jetzt erstellen Sie fünf Datensatzgruppen, die die Optionen für die fünf Fragen enthalten. Definieren Sie diese Datensatzgruppen, rsOption1 bis rsOption5, als einfache Abfragen, die alles aus der Tabelle laden. Die Implementierung sollte nur ein paar Minuten dauern.

622

Die Seite für die Profilaktualisierung

Nachdem Sie die fünf Options-Datensatzgruppen erstellt haben, müssen Sie sie zu den fünf Popup-Menüs im Dokumententwurfsfenster binden. Gehen Sie dabei nach Ihrer bevorzugten Bindemethode vor und binden Sie die Elementbeschriftung des Menüs zum Feld OptionName# und das Elementwertattribut des Menüs zum Feld OptionValue# in der Abfrage. Wiederholen Sie diese Prozedur für alle fünf Popup-Menüs. Als Ergebnis erhalten Sie fünf dynamische Menüs, die zu den entsprechenden Optionstabellen in der Datenbank gebunden sind. Abbildung 18.10 zeigt das Fenster für die korrekte Datenbindung von rsOption1 zu dem Popup-Menü.

Abbildung 18.10: Ihre Optionsdatensätze müssen zu den Popup-Menüs gebunden werden.

Nachdem Sie die Bindungen für die Popup-Menüs angelegt haben, geht es von Neuem los. Um die Einträge anzuzeigen, die der Benutzer ausgewählt hat, müssen Sie das Elementauswahlattribut jedes der Optionsmenüs zum entsprechenden Antwortfeld in der Datensatzgruppe rsUserInfo binden. Beispielsweise sollte das Elementauswahlattribut des Popup-Menüs zum Feld q1Response in rsUserInfo gebunden werden usw. Damit wird sichergestellt, dass die Einträge, die der Benutzer in seinem Profil vorgenommen hat, als Standardauswahl in der Datenbank angezeigt werden. Im letzten Schritt zur Einrichtung der Seite fügen Sie das Serververhalten zur Aktualisierung des Benutzerprofils ein, die erfolgt, nachdem er auf die Schaltfläche SENDEN geklickt hat. Fügen Sie dieses Verhalten der Seite profile.asp hinzu: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), um das Verhalten DATENSATZ AKTUALISIEREN einzufügen. 3. Wählen Sie Ihren Verbindungstyp aus. 4. Geben Sie tblUserInfo als die zu aktualisierende Tabelle an. 5. Legen Sie den Benutzernamen als den eindeutigen Spaltenschlüssel fest. Unsere Standard-Datenbanktabellen verwenden zwar die Benutzer-ID als eindeutige Spalte, aber das hier verwendete Benutzerauthentifizierungssystem geht von eindeutigen Benutzernamen aus.

623

Komplexe Techniken: Komplexe Abfragesysteme

6. Stellen Sie sicher, dass im Abschnitt WERTE ABRUFEN AUS alle Werte übereinstimmen. 7. Setzen Sie den Wert für die URL, die nachfolgend aufgesucht werden soll, auf search.asp. 8. Klicken Sie auf OK. Gut gemacht! Damit haben Sie die aufwändigste Seite für heute fertig! Meinen endgültigen Entwurf für die Profilseite sehen Sie in Abbildung 18.11.

Abbildung 18.11: Eine einfache Seite, die aber unzählige Datensatzgruppen unterstützt.

Als letzten Teil der Site müssen Sie noch die Suchseite und das Ergebnisformular erstellen. Die Suchseite wird angelegt wie die Profilseite, aber ohne die zusätzlichen Felder für E-Mail, Kennwort und Benutzer-ID. Um sich Arbeit zu ersparen, legen Sie eine Kopie des Dokuments profile.asp an und legen diese unter dem Namen search.asp ab – damit haben Sie die Grundlage für die erste Suchseite.

624

Die Such- und Ergebnisseiten

18.7 Die Such- und Ergebnisseiten Die Such- und Ergebnisseiten sind ganz einfach einzurichten – insbesondere, weil Sie schon so viel Arbeit auf der Profilseite geleistet haben. Legen Sie eine Kopie der Profilseite an, und speichern Sie sie unter dem Namen search.asp. Öffnen Sie diese neue Seite in der Entwurfsansicht. Weil Sie für die Suchseite die meisten Verhalten benötigten, die bereits auf der Profilseite implementiert wurden, brauchen wir nur die bereits existierende Seite entsprechend anzupassen. Zunächst bereinigen Sie das Formular, sodass es nur noch die fünf Fragen und ihre Antworten enthält. Sie brauchen die verborgenen Felder für E-Mail-Adresse, Benutzername und Kennwort nicht mehr. Anschließend öffnen Sie die Palette SERVERVERHALTEN und wählen das Verhalten DATENSATZ AKTUALISIEREN aus. Klicken Sie auf die Schaltfläche mit dem Minussymbol (-), um sie aus dem Projekt zu entfernen. Im Formular sollen keine verborgenen Felder mehr vorhanden sein – wenn Sie also noch welche sehen, hat UltraDev etwas vergessen – entfernen Sie sie einfach manuell. Am besten verhindern Sie, dass sich UltraDev »verwirrt« fühlt, wenn Serververhalten entfernt werden, indem Sie alles, was möglich ist, aus den Paletten DATENBINDUNGEN und SERVERVERHALTEN entfernen, bevor Sie das Dokument manuell bearbeiten. Und selbst dann wird es noch ein paar Ausreißer geben, die Ihrer speziellen Aufmerksamkeit bedürfen. Jetzt markieren Sie das Formular im Dokument und setzen seine Aktion auf searchresults.asp. Außerdem können Sie einen Link wie beispielsweise AKTUALISIEREN SIE IHR PROFIL auf der Seite anlegen, der den Benutzer zu profile.asp führt, sodass er einfach auf seine Profilinformation zugreifen kann – weil die Sitzungsvariable MM_Username die Person identifiziert, die die Site verwendet, müssen der Seite keine weiteren Werte übergeben werden. Abbildung 18.12 zeigt die endgültige Suchseite. Nehmen Sie den letzten Bildschirm des Projekts in Angriff, searchresults.asp, indem Sie ein grundlegendes Layout für Ihre Ergebnisse entwickeln. Ich will beispielsweise alle Ergebnisse in einer Tabellenansicht anzeigen, deshalb habe ich eine Tabelle mit den folgenden Spalten angelegt: 쐽

Name

쐽

E-Mail

쐽

Route

쐽

Rauchgewohnheiten

쐽

Transportmittel

쐽

Abfahrt morgens

쐽

Abfahrt abends

625

Komplexe Techniken: Komplexe Abfragesysteme

Abbildung 18.12: Der Suchbildschirm ist einfach nur eine abgespeckte Version der Seite für die Verwaltung des Benutzerprofils.

Außerdem habe ich eine zweite Zeile der Tabelle leer gelassen, sodass ich die Suchergebnisse einfügen kann. Nur eine einzige Abfrage in diesem Dokument kann die Suche vornehmen, aber sie ist wirklich elegant! Erinnern Sie sich an das grundlegende Suchmuster, das wir heute entwickelt haben? Wir wollen die Absolutwerte der Differenzen zwischen der gesuchten Antwort und der tatsächlichen Antwort kombinieren. Das SQL für die Abfrage sieht wie folgt aus: SELECT *,abs('varQ1'-tblOption1.OptionValue1)+abs('varQ2'➥tblOption2.OptionValue2)+ abs('varQ3'-tblOption3.OptionValue3)+abs('varQ4'-tblOption4.OptionValue4)+ abs('varQ5'-tblOption5.OptionValue5) as 'difference' FROM tblUserInfo,tblOption1,tblOption2,tblOption3,tblOption4,tblOption5 WHERE tblUserInfo.q1Response=tblOption1.OptionValue1 AND tblUserInfo.q2Response=tblOption2.OptionValue2 AND tblUserInfo.q3Response=tblOption3.OptionValue3 AND tblUserInfo.q4Response=tblOption4.OptionValue4 AND tblUserInfo.q5Response=tblOption5.OptionValue5 ORDER BY difference

Beachten Sie, dass eine WHERE-Klausel angelegt wurde, um die Antworten für alle UserInfo-Datensätze mit den entsprechenden Datensätzen in jeder der Optionstabellen zu ver-

626

Die Such- und Ergebnisseiten

gleichen. Das ist zwingend erforderlich, damit wir das OptionName-Feld aus den tblOption-Tabellen nutzen können, um die Antwort anzuzeigen, die der Benutzer bei der Befragung gegeben hat. Legen Sie die erweiterte Abfrage rsResults an, die dieses SQL beinhaltet. Außerdem müssen Sie die UltraDev-Variablen varQ1 bis varQ5 definieren und auf die Laufzeitwerte Request("q1Response") bis Request("q5Response") setzen. Überprüfen Sie unbedingt, ob die Abfrage korrekt definiert wurde, bevor Sie auf OK klicken. Klicken Sie auf die Schaltfläche TESTEN, um sicherzustellen, dass die Abfrage funktioniert. Der Grund für diese Sicherheitsmaßnahmen ist, dass diese Abfrage nach ihrer Eingabe in UltraDev nicht mehr bearbeitet werden kann. Ältere Versionen von UltraDev (und auch die allerneueste) haben Probleme bei der Bearbeitung bestimmter Abfragen. Vorausgesetzt, Ihre Version von UltraDev hat kein Problem mit der Abfrage, öffnen Sie das Fenster DATENBINDUNGEN und ziehen die gewünschten Felder in Ihre Entwurfsansicht. Falls Sie alle dynamischen manuell in das Dokument einfügen müssen, ist das nicht ganz so schwierig, wie es sich anhört – nur ein bisschen aufwändiger, als Sie vielleicht hoffen. Beispielsweise sehen Sie hier die Felder, die ich eingefügt haben, und den ASP-Code, den Sie brauchen, um sie anzuzeigen: 쐽

Name <%=(rsResults.Fields.Item("fullname").Value)%>

쐽

E-Mail <%=(rsResults.Fields.Item("email").Value)%>

쐽

Route <%=(rsResults.Fields.Item("optionName1").Value)%>

쐽

Rauchgewohnheiten <%=(rsResults.Fields.Item("optionName2").Value)%>

쐽

Transportmittel <%=(rsResults.Fields.Item("optionName3").Value)%>

쐽

Abfahrt morgens <%=(rsResults.Fields.Item("optionName4").Value)%>

쐽

Abfahrt abends <%=(rsResults.Fields.Item("optionName5").Value)%>

627

Komplexe Techniken: Komplexe Abfragesysteme

Abbildung 18.13: Die Abfrage wird zerstört, wenn Sie versuchen, sie nach der Definition zu bearbeiten.

Um sie manuell einzugeben, wechseln Sie einfach von der Entwurfsansicht in die Codeansicht und geben alles ein, was zwischen den ASP-Tags <% und %> steht. Das ist alles! Nachdem Sie diesen Code in Ihr Dokument eingegeben haben, erscheinen sie als Serververhalten DYNAMISCHER TEXT. Auf diese Weise können Sie damit arbeiten, als wären sie dem Entwurf automatisch hinzugefügt worden. Sie können sie an die entsprechenden Positionen in der Tabelle ziehen, um die endgültige Ansicht Ihrer Ergebnisse zu betrachten. Hoffentlich ist dieses Verschieben der Felder ausreichend und Sie müssen keine weiteren manuellen Aktionen vornehmen. Jedenfalls wissen Sie, was auf Sie zukommt! Der letzte Schritt beim Anlegen des Bildschirms ist, die Zeile der dynamischen Daten auszuwählen, die Sie in das Dokument eingefügt haben, und das Serververhalten BEREICH WIEDERHOLEN hinzuzufügen, sodass mehrere Übereinstimmungen gezeigt werden. Wenn Sie wollen, können Sie alle Datensätze oder nur eine bestimmte Anzahl von Datensätzen anzeigen. Die Beschränkung der Antworten auf einen bestimmten Fehlerschwellenwert bleibt dem Leser als Übung überlassen, aber die Technik wurde bereits vorgestellt und ist nicht allzu kompliziert. Gehen Sie jetzt auf Ihre Website und testen Sie ihre Funktionalität. Wenn alles korrekt funktioniert, erhalten Sie eine Ergebnisliste wie in Abbildung 18.14 gezeigt. Damit ist Ihre Site fertig. Ein Schnelltest, der zeigt, dass alles funktioniert, ist, zu überprüfen, ob das Profil, unter dem Sie sich angemeldet haben, oben in den Suchergebnissen erscheint.

628

Schützen Sie Ihre Seiten

Abbildung 18.14: Ihre dynamischen Suchergebnisse sollten wie hier gezeigt aussehen.

18.8 Schützen Sie Ihre Seiten In einem letzten Schritt für Ihre Site könnten Sie die Seiten search.asp, searchresults.asp und profile.asp schützen. Schließlich sollten diese niemandem zur Verfügung stehen, der sich nicht beim System angemeldet hat. Weil es sich aber um keine Hochsicherheits-Website handelt, halten Sie das möglicherweise nicht für notwendig. Der Prozess ist jedoch ganz einfach. 1. Öffnen Sie eine Seite, die Sie schützen wollen, wie beispielsweise profile.asp. 2. Öffnen Sie die Palette SERVERVERHALTEN. 3. Klicken Sie auf das Plussymbol (+), und wählen Sie im Untermenü BENUTZERAUTHENTIFIZIERUNG den Eintrag ZUGRIFF AUF DIE SEITE BESCHRÄNKEN. 4. Konfigurieren Sie das Verhalten wie in Abbildung 18.15 gezeigt, um den Zugriff abhängig von Benutzername und Kennwort zu beschränken. 5. Falls der Zugriff verweigert wird, leiten Sie den Benutzer auf die Seite login.asp weiter. 6. Klicken Sie auf OK, nachdem Sie fertig sind. 7. Wiederholen Sie diesen Prozess für alle Seiten, die Sie schützen wollen. Wenn ein Benutzer versucht, auf eine geschützte Seite zuzugreifen, bevor er sich angemeldet hat, wird er unmittelbar auf die Seite login.asp weitergeleitet. Einfach, aber effektiv.

629

Komplexe Techniken: Komplexe Abfragesysteme

Abbildung 18.15: Schränken Sie den Zugriff für Seiten ein, die nicht berechtigte Benutzer nicht sehen sollen.

18.9 Zusammenfassung Dieses Kapitel hat eines der leistungsfähigsten Werkzeuge vorgestellt, die Ihnen zur Verfügung stehen – das Authentifizierungssystem von UltraDev und Ihren Datenbankserver! Die Authentifizierungs-Verhalten von UltraDev beschleunigen die Entwicklung geschützter Seiten ganz wesentlich, während die Datenbank kleine Wunder möglich macht, indem komplexe SQL-Abfragen entwickelt werden. Das hier entwickelte Abfragesystem ist praktisch, aber dennoch beschränkt, weil es alle Abfragen gleich gewichtet. Sie können den heute vorgestellten Prozess verfeinern, indem Sie den einzelnen Abfrageelementen Gewichtungen zuordnen. Außerdem können traditionelle Suchelemente verwendet werden, um die Datensatzgruppe auf Werte zu beschränken, die genaue Übereinstimmungen aufweisen. Statt beispielsweise alle Datensätze zu vergleichen, könnten Sie die Abfrage in der WHERE-Klausel abändern. Wenn Leute genaue Übereinstimmungen in Hinblick auf die Rauchgewohnheiten fordern, könnten diese aus der Absolutwertberechnung in den WHERE-Abschnitt des SQL verschoben werden. Ich hoffe, Sie haben in diesem Kapitel neue Ideen gesammelt, um eigene Suchen entwickeln zu können. Zu leicht glaubt man, dass alle Abfragen nur Datensätze finden können, die abhängig von den in WHERE verwendeten Attributen gefiltert werden. Durch den Ausbruch aus dem traditionellen Abfragemuster ergeben sich Manipulationen Ihrer WebsiteDaten, die ein ganzes Universum komplexer Abfragen eröffnen.

18.10 Fragen und Antworten F

Wie viele Fragen kann diese Abfrage verarbeiten? A

630

Sie könnten dieser Datensatzgruppe beliebig viele Fragen hinzufügen, die Ihr SQL-Server in einer einzigen Abfrage verarbeiten kann. Leider hat UltraDev immer wieder Probleme mit langen Abfragen. Die hier verwendete Abfrage hat beim ersten Versuch Probleme im SQL-Eingabefeld bereitet. Bleibt zu hoffen, dass das in zukünftigen Versionen von UltraDev nicht mehr der Fall sein wird.

Workshop

F

Für welche Arten von Applikationen kann dies genutzt werden? A

F

Für alle. Dieses Kapitel hat die Suchtechnik genutzt, um Menschen miteinander zu vergleichen, aber Sie können sie wirklich für die unterschiedlichsten Situationen einsetzen. Beispielsweise könnten Sie Attributrangfolgen für Produkte in einem Einkaufskatalog bereitstellen, die abgefragt werden können. Überall wo eine Suche möglich ist, können Sie auch diese Techniken nutzen.

Muss ich immer separate Optionstabellen anlegen? A

Diese Tabellen werden nur benötigt, weil wir die Namen der Optionen anzeigen wollten, die die Benutzer ausgewählt haben. Falls diese Information nicht wichtig ist, können wir einfach auch nur die Tabelle tblUserInfo verwenden.

18.11 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. Was ist der Absolutwert? 2. Warum addieren wir die Absolutwerte? 3. Wie können Abfrageelemente gewichtet werden? 4. Was ist ein Schwellenwert? 5. Warum ist es wichtig, die Master-Suchabfrage gleich beim ersten Mal völlig korrekt zu formulieren?

Übungen 1. Fügen Sie der Suche einen Schwellenwert hinzu. Dazu müssen Sie den in der Abfrage möglichen Gesamtfehlerbetrag berechnen. 2. Korrigieren Sie die Suche, sodass die Ergebnisse Ihren eigenen Datensatz nicht mehr enthalten. Dazu müssen Sie in die WHERE-Klausel Ihrer Suchabfrage eine Bedingung einfügen.

631

Komplexe Techniken: Komplexe Abfragesysteme

3. Falls Sie ein Abenteurer sind, können Sie noch komplexere Suchmöglichkeiten einführen, indem Sie mithilfe von UNIONs mehrere SELECT-Anweisungen kombinieren. Auf diese Weise können Sie den Fehler in Kategorien einordnen und die Ergebnisse dieser Abfragen dann durch JOIN verknüpfen. Das könnte sinnvoller sein, als alle Fehler innerhalb einer einzigen Abfrage zu kombinieren. 4. Um mehr Erfahrung mit dem Authentifizierungssystem zu sammeln, bearbeiten Sie das Projekt aus Kapitel 17, sodass es statt der manuell entwickelten Methode die eingebauten Verhalten benutzt.

632

Komplexe Techniken: Lehren und Prüfen – online

9 1

Komplexe Techniken: Lehren und Prüfen – online

Eines der am hitzigsten diskutierten Themen an den Schulen auf dem Land ist das Fernstudium – wo es Klassen gibt, in denen Kinder und Erwachsene unterrichtet werden, ohne in einem gemeinsamen Klassenzimmer sitzen zu müssen. Das World Wide Web ist ein ausgezeichnetes Medium, dieses Fernstudium möglichst vielen Benutzern zur Verfügung zu stellen. Dieses Kapitel beschreibt die Entwicklung eines Online-Prüfungsforums, das ganz einfach auf viele Einsatzgebiete in akademischen und nicht-akademischen Einrichtungen ausgelegt werden kann. Heute geht es um die folgenden Themen: 쐽

Wie man ein umfassendes Umfrage-/Prüfungssystem anlegt

쐽

Wie man die Zusammenarbeit von UltraDev mit mehreren verschiedenen Datenbanktabellen steuert

쐽

Wie man SQL nutzt, um die Prüfungen in Echtzeit zu bewerten – sobald die Antworten gesendet werden

19.1 Umfrage- und Prüfungssysteme Ich habe Stunden damit verbracht, Online-Prüfungssysteme für die Ohio State University einzurichten. Dabei werden normalerweise nur ein paar HTML-Formulare angelegt, die die Antworten der Studenten per E-Mail an den Professor schicken, oder die Ergebnisse speichern, sodass der Professor sie später bewerten kann. Diese HTML-Formulare immer wieder anzulegen, kann müßig sein und irgendwie auch sinnlos. Besser erledigt man diese Aufgabe, indem man ein erweiterbares System einrichtet, in dem das HTML von den gestellten Fragen getrennt angelegt wird. Das System, das Sie heute entwickeln werden, übernimmt genau diese Aufgabe – es zeichnet mehrere Fragen und die Antworten auf und gibt die Fragen an die Studenten weiter. Um auf die Site zuzugreifen, melden sich die Studenten am System an und bearbeiten die Fragen. Wenn sie fertig sind, kann der Administrator statistische Werte für die verschiedenen Studenten anzeigen.

Die Sitemap Die Entwicklung dieses Systems bedarf verschiedener Vorüberlegungen. Anders als bei einigen der bisher entwickelten Applikationen ist ein Teil der Kommunikation nicht auf den ersten Blick erkennbar. Auch hier listen wir die verschiedenen Funktionsmerkmale auf, die für das System realisiert werden müssen:

634

Umfrage- und Prüfungssysteme

쐽

Mehrere zufällig angezeigte Fragen

쐽

Mehrere zufällig angezeigte Antworten

쐽

Ein Anmeldebildschirm zur Authentifizierung der Benutzer

쐽

Unmittelbare Bewertung der korrekten Antworten

쐽

Ein administratives Backend zur Anzeige der Bewertungen für die Studenten

Betrachten wir die Sitemap. Offensichtlich brauchen wir Bildschirme für die Anmeldung und für die Fragen, ebenso wie einen Bildschirm für die Administration, um nach einem Benutzer suchen und seine Ergebnisdaten anzeigen zu können. Wir brauchen also fünf oder sechs Bildschirme, aber ein Großteil der Funktionalität dieses Programms konzentriert sich auf den Bildschirm mit den Fragen. Interessant wird das Ganze durch die Bereitstellung mehrerer Fragen und mehrerer Antworten. Das bedeutet, es kann eine beliebige Anzahl von Fragen geben, und jede Frage kann beliebig viele Antworten haben. Diese Informationen werden auf einem einzigen Bildschirm angezeigt. Viele der mir bekannten Online-Prüfungssysteme haben für einzelne Fragen separate Seiten entwickelt – keine Angst, das wird für unser System nicht nötig sein! Abbildung 19.1 zeigt die Sitemap für das hier entwickelte Prüfungssystem. BENUTZER

ADMINISTRATOREN

anzeigen Anmeldung

Anmeldungen verarbeiten

Prüfung

Abbildung 19.1: Die Sitemap für die Prüfung besteht aus vier Abschnitten.

635

Komplexe Techniken: Lehren und Prüfen – online

Das SQL Das SQL, das wir für diesen Abschnitt brauchen, umfasst nur ein paar Formulare, aber Sie müssen sicherstellen, dass die Tabellen so entwickelt werden, dass keine Beschränkungen entstehen. Als Erstes brauchen wir eine Tabelle für den Benutzernamen und das Kennwort – sie ist für die Anmeldungen am System zuständig. Wir werden uns hier nicht mit der Entwicklung eines Anmeldebildschirms aufhalten, weil wir voraussetzen, dass der Administrator die Benutzer einträgt, die Zugriff auf das System haben sollen. Jetzt betrachten wir diese Tabelle – weil wir uns hier ganz auf das Authentifizierungssystem von UltraDev verlassen, wird sie etwas anders aussehen als frühere Benutzertabellen. Außerdem können wir Zugriffsebenen für die administrative Steuerung einführen. create table user ( username varchar(50) not null, password varchar(50), userlevel varchar(50), primary key (username) );

Wie bereits erwähnt, trifft das Authentifizierungssystem von UltraDev keine Vorkehrungen für die Verwendung eines beliebigen Feldes (wie beispielsweise die Benutzer-ID) zur Identifizierung eines Benutzers. Durch die Implementierung von Benutzernamen müssen wir manuell auf Duplikate prüfen (oder die UltraDev-Verhalten verwenden). Zuvor haben wir automatisch inkrementierte Benutzer-IDs verwendet, sodass wir uns keine Gedanken über Duplikate machen mussten. Jetzt legen wir die Tabelle mit den Fragen an – sie enthält alle Fragen, die der Administrator stellen will. Leider müssen für jede Frage mehrere Antworten bereitgestellt werden. Nach dem ersten Blick sind Sie vielleicht versucht, ein Tabellenlayout wie das folgende zu erstellen, aber tun Sie es nicht! create table question ( questionID int not null auto_increment, questionTitle varchar(50), questionText varchar(250), answer1 varchar(50), answer2 varchar(50), answer3 varchar(50), etc...

636

Umfrage- und Prüfungssysteme

Das funktioniert offensichtlich nicht. Statt einer einzigen Tabelle braucht man zwei Tabellen für die Fragen. Eine Tabelle enthält die eigentliche Frage, die andere enthält die Antworten auf Frage. Um die beiden Tabellen zu verknüpfen, enthält die Antwortentabelle eine Frage-ID für jede der Antworten. Weil wir eine Online-Bewertung implementieren wollen, muss das System auch wissen, wann eine Antwort korrekt ist. Um dieses Funktionsmerkmal zu implementieren, tragen Sie die ID der korrekten Antwort in das Fragefeld ein. Wir können die Fragentabelle wie folgt definieren, aber auch das funktioniert noch nicht wirklich. create table question ( questionID int not null auto_increment, questionTitle varchar(50), questionText varchar(250), answerID int, primary key (questionID) )

Diese Tabelle enthält alle Fragen und ihre IDs. Die Antworten können in einer Tabelle wie der folgenden abgelegt werden: create table answer ( answerID int not null auto_increment, questionID int, answerText varchar(80), primary key (answerID) )

Betrachten wir die beiden Tabellen noch einmal – vielleicht haben Sie bemerkt, dass es problematisch sein könnte, die Daten in die Tabellen einzugeben. Weil Sie die Frage-ID nicht kennen, wenn Sie eine Antwort eingeben, und die Antwort-ID nicht, wenn Sie die Frage eingeben, ist es schwierig, alles synchron zu halten. Um dieses Problem zu umgehen, machen Sie aus der Frage-ID ein Feld, das nicht automatisch inkrementiert wird. Sie müssen die Frage-IDs manuell verwalten, aber auf diese Weise können Sie zuerst die Fragen und dann die Antworten eingeben. Weil es weniger Fragen als Antworten gibt, ist es einfacher, die Frage-ID mit einem manuell erzeugten Wert zu definieren. Die endgültige Fragentabelle könnte also wie folgt aussehen: create table question ( questionID int not null, questionTitle varchar(50), questionText varchar(250), answerID int, primary key (questionID) )

637

Komplexe Techniken: Lehren und Prüfen – online

Wenn Sie eine Tabellendefinition eingegeben haben und diese später ändern wollen, verwenden Sie dazu die SQL-Funktion ALTER TABLE. Es ist jedoch nicht möglich, den Primärschlüssel zu ändern, ohne die gesamte Tabelle zu verwerfen. Jetzt tragen wir einige Beispieldaten ein. Wir werden zuerst die Antworten eintragen, damit wir eine Antwort-ID haben, die wir in die Fragentabelle eintragen können. Hier einige einfache Antwortdaten, die in die Datenbank eingetragen werden können: insert insert insert insert insert insert insert insert insert insert insert insert

into into into into into into into into into into into into

answer answer answer answer answer answer answer answer answer answer answer answer

values values values values values values values values values values values values

('',1,'G4 Cube'); ('',1,'G4 MP Tower'); ('',1,'Ruby iMac'); ('',1,'Pentium III'); ('',2,'Äpfel'); ('',2,'Birnen'); ('',2,'Weintrauben'); ('',2,'Zitronen'); ('',3,'Playstation 2'); ('',3,'Nintendo 64'); ('',3,'Dreamcast'); ('',3,'X-Box');

Die Fragentabelle kann mit einigen Beispielfragen gefüllt werden: insert into question values (1,'Der beste Computer', 'Es gibt nur einen Computer, der 2000 herauskam und sein Geld wirklich wert war. Welcher Computer ist das?',1); insert into question values (2,'Eine saure Frucht', 'Wenn Sie eine Party haben und frisches Obst anbieten wollen, welches Obst würden Sie dann nicht bereitstellen?',8); insert into question values (3,'Videospielkonsolen', 'Welche Videokonsole ist nicht auf dem Videospielmarkt 2000-2001 zu finden?',12);

Beachten Sie in den Beispieldaten, dass es nur drei Fragen und vier verschiedene Antworten pro Frage gibt. Das System kann beliebig viele Fragen und Antworten verarbeiten. Für jede der Fragen können beliebig viele Antworten bereitgestellt werden. Und Sie können ganz einfach von Multiple-Choice-Fragen auf Richtig/Falsch-Fragen umsteigen. Außerdem basieren die Fragen und Antworten auf Ihren Einstellungen. Jetzt ein paar Benutzer. Wir tragen Benutzer in die Benutzerdatenbank ein, die sich am System anmelden und an dem Quiz teilnehmen können:

638

Umfrage- und Prüfungssysteme

insert into user values ('jray','johnpass','schüler'); insert into user values ('vuj','snaffle','schüler'); insert into user values ('doorknob','thedoor','lehrer');

Damit haben wir alles, was wir für das Programm brauchen! Wir haben die Datenbank eingerichtet, sodass der Benutzer sich anmelden kann, und das Programm listet Fragen sowie mögliche Antworten auf. Das ist alles. Anmeldung... Fragen... Antworten... Fehlt irgend etwas? Ja! Überlegen Sie doch selbst! Die Applikation kann Anmeldungen überprüfen und Fragen stellen, aber was passiert mit den vom Benutzer gegebenen Antworten? Wir haben eine der wichtigsten Komponenten des Programms vergessen – das Speichern der Benutzerantworten. Ohne diese Information wird es sehr schwierig sein zu beurteilen, wie die Benutzer das Quiz bearbeitet haben. Die Tabelle für die Antworten des Benutzers ist ganz einfach – wir brauchen nur den Benutzernamen und die ID der Antwort, die der Benutzer für eine bestimmte Frage ausgewählt hat, aufzuzeichnen. create table response ( username varchar(50) not null, answerID int not null, questionID int not null, primary key (username,questionID) )

Eine der schwierigsten Aufgaben in diesem Projekt ist, die Anzahl der korrekten Antworten eines Benutzers zu berechnen. Bevor wir die eigentlichen Seiten anlegen, wollen wir genau überlegen, wie dieser Prozess realisiert werden kann. Sie sollten vor der Implementierung Ihrer Seiten immer ganz genau verstehen, was auf der Site passieren soll. Wir tragen jetzt Informationen in die Antwortentabelle ein: insert into response values ('jray',1,1); insert into response values ('jray',2,7); insert into response values ('jray',3,12);

Diese Beispieldaten setzen voraus, dass der Benutzer mit der ID 1 alle drei Fragen beantwortet hat – zwei davon richtig und eine falsch. Wie können wir feststellen, wie viele der vom Benutzer gegebenen Antworten korrekt sind? Dazu verwenden wir ein bisschen intelligentes SQL, das ist alles: select * from response,question where response.username='jray' AND response.answerID=question.answerID AND response.questionID=question.questionID;

Diese Anweisung gibt bei der Ausführung mehrere Datensätze zurück, die alle korrekten Antworten des Benutzers enthalten.

639

Komplexe Techniken: Lehren und Prüfen – online

Ein Beispiel: mysql> select * from response,question where response.username='jray' AND response.answerID=question.answerID AND response.questionID=question.questionID \ G *************************** 1. row *************************** username: jray answerID: 1 questionID: 1 questionID: 1 questionTitle: Der beste Computer questionText: Es gibt nur einen Computer, der 2000 herauskam und sein Geld ➥wirklich wert war. Welcher Computer ist das? answerID: 1 *************************** 2. row *************************** username: jray answerID: 12 questionID: 3 questionID: 3 questionTitle: Videospielkonsolen questionText: Welche Videokonsole ist nicht auf dem Videospielmarkt 2000-2001 zu ➥finden? answerID: 12 2 rows in set (0.04 sec)

Um die fehlerhaften Antworten in der Datenbank nachzuschlagen, kehren Sie die Testbedingung "response.answerID=question.answerID" einfach um. Die neue Abfrage für falsche Antworten sieht also wie folgt aus: mysql> select * from response,question where response.username='jray' AND response.answerID!=question.answerID AND ➥response.questionID=question.questionID \ G *************************** 1. row *************************** username: jray answerID: 7 questionID: 2 questionID: 2 questionTitle: Eine saure Frucht questionText: Wenn Sie eine Party haben und frisches Obst anbieten wollen, welches ➥Obst würden Sie dann nicht bereitstellen? answerID: 8 1 row in set (0.00 sec)

Diese beiden SQL-Abschnitte bieten in Kombination mit dem UltraDev-Parameter [total records] die Möglichkeit, die Gesamtzahl der richtigen Antworten anzuzeigen, und worum es sich dabei gehandelt hat. Dasselbe ist für die falschen Antworten möglich.

640

Der Anmeldebildschirm

Damit haben wir alles, um anfangen zu können. Der restliche Prozess wird innerhalb der UltraDev-Applikation realisiert. Abbildung 19.2 zeigt den endgültigen Entwurf unserer UltraDev-Datenbank. user username* password

Response answer answerID* questionID answerText

username* answerID* questionID*

question questionID* questionTitle questionText answerID

Abbildung 19.2: Wir brauchen für diese Applikation Antworten, Ergebnisse und Fragen.

Jetzt können wir mit der Entwicklung beginnen! Richten Sie die erforderlichen Datenbank- und Serververbindungen ein.

19.2 Der Anmeldebildschirm Wie bereits erwähnt, ist der Prüfungsbildschirm der erste Bildschirm für die Kommunikation mit dem Benutzer. Es handelt sich dabei aber nicht um den ersten Bildschirm, den wir entwickeln müssen. Um die Information speichern zu können, die der Benutzer auf der Website eingibt, muss das System wissen, um wen es sich bei dem Benutzer handelt. Dieses System muss abgesichert werden, deshalb erstellen wir das Anmeldesystem mithilfe der Authentifizierungs-Routinen von Macromedia und der Sitzungsvariablen MM_Username, die Sie aus früheren Kapiteln kennen. An diesem Anmeldebildschirm ist nichts Besonderes. Wir müssen nur nach dem Benutzernamen und dem Kennwort fragen. Entwickeln Sie einen grundlegenden Anmeldebildschirm. Geben Sie dabei den Feldern für den Benutzernamen und das Kennwort geeignete Namen, ebenso wie dem Formular, in dem sie enthalten sind. Weil es sich um die erste Seite handelt, die der Benutzer besuchen muss, werde ich mein Dokument unter dem Namen index.asp ablegen. Abbildung 19.3 zeigt ein Beispiel für einen solchen Anmeldebildschirm.

641

Komplexe Techniken: Lehren und Prüfen – online

Abbildung 19.3: Der Anmeldebildschirm braucht keine besonderen Eigenschaften aufzuweisen.

Die eigentliche Leistung der Authentifizierung kommt zutage, wenn Sie das Serververhalten BENUTZER ANMELDEN einfügen, um ein Benutzerkonto zu überprüfen. Damit wird überprüft, ob die eingegebene Benutzername/Kennwort-Kombination gültig ist. Abhängig von dem Ergebnis wird der Browser auf eine andere Seite weitergeleitet: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie im Untermenü BENUTZERAUTHENTIFIZIERUNG den Eintrag BENUTZER ANMELDEN. 3. Wählen Sie das Formular sowie die Felder für den Benutzernamen und das Kennwort. 4. Wählen Sie Ihre Datenbankverbindung und die Tabelle sowie die darin enthaltenen Felder, die mit den Feldern in Ihrem Formular verglichen werden sollen. 5. Falls die Anmeldung erfolgreich ist, leiten Sie den Benutzer auf quiz.asp weiter. Andernfalls soll er auf einen Fehler-Bildschirm gelangen, wie beispielsweise badlogin.asp. 6. Schränken Sie den Zugriff abhängig von Benutzername, Kennwort und Zugriffsebene ein. 7. Wählen Sie das Feld userlevel als das Datenbankfeld, aus dem Sie die Zugriffsebene des Benutzers abrufen. Die endgültige Konfiguration sollte aussehen wie in Abbildung 19.4 gezeigt. Nachdem Sie das Serververhalten wie in Abbildung 19.4 gezeigt definiert haben, können wir die Seite badlogin.asp anlegen, um Fehlermeldungen anzuzeigen, falls der Benutzername oder das Kennwort fehlerhaft eingegeben wurden.

642

Der Anmeldebildschirm

Abbildung 19.4: Vergleichen Sie die Felder mit dem Benutzernamen und dem Kennwort von Ihrem Anmeldeformular mit den Datenbankfeldern, um ein funktionierendes Authentifizierungssystem aufzubauen.

Die Seite badlogin.asp muss nichts Besonderes enthalten – einzig eine Meldung mit einem Link zurück zum Anmeldebildschirm, sodass der Benutzer einen erneuten Versuch unternehmen kann. Abhängig von Ihrer Applikation könnten Sie beispielsweise auch eine Warnmeldung für unberechtigte Benutzer ausgeben. Ein Beispiel für diesen Bildschirm sehen Sie in Abbildung 19.5.

Abbildung 19.5: Zeigen Sie dem Benutzer eine Fehlermeldung an und stellen Sie ihm einen Link zurück zum Anmeldebildschirm bereit.

643

Komplexe Techniken: Lehren und Prüfen – online

Das ist alles, was wir für die Anmeldeseiten brauchen. Bevor wir weiterarbeiten, müssen wir die Sitzungsvariable in die Datenbindungen aufnehmen, sodass wir von jeder Position auf der Site aus auf den aktuellen Benutzernamen zugreifen können: 1. Öffnen Sie die Palette DATENBINDUNGEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie SITZUNGSVARIABLE. 3. Geben Sie den Namen der Sitzungsvariablen für die Macromedia-Authentifizierung ein, MM_Username, wie in Abbildung 19.6 gezeigt. 4. Klicken Sie auf OK.

Abbildung 19.6: Geben Sie den Namen der Sitzungsvariablen ein, die verfolgt werden soll.

Sie können eine Sitzungsvariable überall auf einer Site definieren und von überall aus darauf zugreifen. Die Sitzungsvariable bleibt aktiv, bis der Benutzer eine neue Browser-Sitzung initiiert (wobei der Browser beendet und neu gestartet wird). Natürlich muss der Benutzer Cookies zulassen, damit diese Site funktioniert – andernfalls kann die Site nicht feststellen, wer sich angemeldet hat.

19.3 Das Quiz-Formular Das Quiz-Formular für das Programm ist am schwierigsten zu implementieren – und offensichtlich die wichtigste Komponente. Bevor wir damit anfangen, wollen wir darüber nachdenken, was wir eigentlich brauchen und wie wir es realisieren wollen. Diese Seite ist einigen der zuvor erstellten Seiten ganz ähnlich. Was also muss die Seite quiz.asp können? Sie muss die folgenden Funktionsmerkmale aufweisen: 쐽

644

Verwaltung der Anmeldeinformationen für den Benutzer – Wir haben getestet, ob ein Benutzer auf eine Website zugreifen darf, aber wir müssen das für die gesamte Site realisieren. Das ist die letzte Funktionalität, die wir der Seite hinzufügen wollen – aber die wichtigste. Wenn der Benutzer in der Lage wäre, ohne Benutzernamen und Kennwort auf die Seite zuzugreifen, könnte er die Fragen vorab ansehen und schummeln.

Das Quiz-Formular

쐽

Fragen stellen – was klar sein dürfte. Der Zweck dieser Site ist, ein Online-Quiz zu realisieren, aber es gibt einige Dinge, die etwas verwirrend sind. Beispielsweise können auf eine Frage beliebig viele Antworten bereitgestellt werden – die alle angezeigt werden müssen. Außerdem müssen die Antworten gespeichert werden.

쐽

Beenden des Quiz – Was passiert, wenn der Benutzer die letzte Frage erreicht hat? Wir wechseln ja nicht einfach zwischen den Datensätzen vor und zurück. Das System muss in der Lage sein zu erkennen, wann das Quiz zuende ist, und entsprechend reagieren.

Wie können wir diese Anforderungen bewältigen? Überlegen wir, wie die Quiz-Seite arbeiten soll, bevor wir sie implementieren. Der wichtigste Teil des Quiz ist, die Fragen zu stellen – wie machen wir das? Wir legen ein grundlegendes Katalogsystem an, das anstelle von Produkten Fragen enthält. Sie erinnern sich an die bereits entwickelten Katalogsysteme – aber hier werden wir erzwingen, dass der Katalog in einer bestimmten Reihenfolge betrachtet werden muss. Das Fragesystem ist sozusagen eine abgespeckte Version des Katalogsystems – keine Suchen, kein Browsing usw. Die Fragen für jede Seite werden abhängig von der angezeigten Frage-ID erzeugt. Dafür verwenden wir einfach ein datenbankgestütztes Popup-Menü. Die Navigation durch die Fragen ist erlaubt, aber nur in einer Richtung. Es gibt noch einen Aspekt, der vielleicht nicht ganz so offensichtlich ist: die Beantwortung der Fragen. Auf den meisten Seiten wurde die Information als statische Daten angezeigt. Die Site hat absolut nichts dynamisches. Im Fall des Quiz werden die Daten, die für jede der Fragen angezeigt werden, als Teil eines dynamischen Formulars erzeugt. Das Formular besteht aus dem Popup-Menü, das die Antworten zu der Frage enthält, und einer SENDEN-Schaltfläche. Wenn ein Formular gesendet wird, muss das System die Antwort für die Auswertung durch den Administrator in einer Datenbank ablegen. Schließlich verwenden wir verborgene Bereiche (letztlich ein manuell erstelltes »Bereich verstecken«-Verhalten), um einige Funktionsmerkmale des Quiz-Bildschirms zu implementieren. Beispielsweise wird der Benutzer am Ende des Quiz durch einen verborgenen Bereich benachrichtigt (der verborgen bleibt, bis der Benutzer den letzten Datensatz erreicht hat). Gleichzeitig muss die ganze Seite verborgen bleiben, wenn sich der Benutzer nicht korrekt am System angemeldet hat. Jetzt wollen wir den Quiz-Bildschirm anlegen. Wir werden nicht die gesamte Funktionalität in einem Durchgang realisieren – hier legen wir zunächst einen grundlegenden Bildschirmentwurf an. Abbildung 19.7 zeigt meinen ersten Bildschirm für quiz.asp. Der erste Schritt zur Verankerung des Quiz-Bildschirms ist, ihn mit der Datenbank zu verbinden. Wir müssen eine Datensatzgruppe für die Seite entwickeln. Und das ist hier ganz einfach, weil es sich um eine simple Abfrage handelt: "SELECT * FROM question". Richten Sie Ihre Datensatzgruppe als einfache Abfrage ein, wie in Abbildung 19.8 gezeigt.

645

Komplexe Techniken: Lehren und Prüfen – online

Abbildung 19.7: Jetzt richten Sie die Grundlage für Ihren Quiz-Bildschirm ein.

Abbildung 19.8: Die Fragen-Datensatzgruppe ist eine einfache Abfrage aller Fragen-Datensätze.

Ziehen Sie den Fragen-Titel in einen allgemeinen Überschriftsbereich (er soll den Namen der Frage enthalten – Sie könnten dieses Feld später auch nutzen, um abgewandelte Quizaufgaben zu einem bestimmten Thema zu stellen, statt alle Fragen in der Datenbank zu durchlaufen). Anschließend fügen Sie auch den Fragetext in das Dokument ein. Dies ist einer der wenigen Fälle, in denen wir keinen wiederholten Bereich verwenden, um die verschiedenen Fragen aus der Datenbank anzuzeigen. Wenn die Datensatzgruppe definiert wurde und die Datensatzfelder in das Dokument eingefügt sind, verweisen sie auf den aktuellen Datensatz in der Datenbank. Weil nur jeweils eine Frage auf dem Bildschirm angezeigt werden kann, ist das alles, was wir brauchen.

646

Das Quiz-Formular

Fragen überspringen Wir brauchen jedoch das Verhalten ZUM NÄCHSTEN DATENSATZ VERSCHIEBEN. Auf diese Weise kann ein Benutzer Fragen überspringen, die er nicht beantworten will. Statt eine übersprungene Antwort in der Datenbank abzulegen, können wir dem Benutzer die Möglichkeit bieten, auf eine Frage keine Antwort zu geben. Um diese Funktionalität zu realisieren, gehen Sie wie folgt vor: 1. Legen Sie den Link FRAGE ÜBERSPRINGEN in Ihrem Dokument an. 2. Markieren Sie den Link. 3. Öffnen Sie die Palette SERVERVERHALTEN. 4. Klicken Sie auf das Plussymbol (+), und fügen Sie das Verhalten ZUM NÄCHSTEN DATENSATZ VERSCHIEBEN in das Dokument ein. 5. Wählen Sie den Link und die entsprechende Datensatzgruppe, wie in Abbildung 19.9 gezeigt. Ich habe es schon ein paar Mal erwähnt, aber für den Fall, dass Sie es vergessen haben: Sie müssen dem Dokument ein Formular hinzufügen. Legen Sie das Formular an, um die SENDEN-Schaltfläche für die Antworten und die PopupMenüs, ebenfalls für die Antworten, verwalten zu können. Ich habe mein Formular unter dem Namen saveResponse abgelegt, weil das seine Aufgabe sein wird – die Antworten zu speichern.

Abbildung 19.9: Sehen Sie die Möglichkeit vor, eine Frage zu überspringen.

Dynamische Antworten Im nächsten Schritt beim Einrichten des Quiz-Bildschirms legen Sie das Popup-Menü mit den Antworten an. Dazu müssen Sie eine erweiterte Abfrage erstellen, die auf der Antworttabelle der Datenbank basiert. Leider müssen Sie einen Teil davon manuell erledigen. Das SQL für die Antwort, die wir benötigen, könnte wie folgt aussehen: SELECT * FROM answer WHERE questionID=

647

Komplexe Techniken: Lehren und Prüfen – online

Um diese Funktionalität einzurichten, gehen Sie wie folgt vor: 1. Ziehen Sie die Frage-ID (questionID) aus Ihrer existierenden Frage-Datensatzgruppe (question) in die Entwurfsansicht. Damit erhalten Sie den ASP-Code für den Verweis auf die Frage-ID der aktuell angezeigten Frage. 2. Fügen Sie dem Dokument eine neue Datensatzgruppe hinzu. Dazu arbeiten Sie im einfachen Modus. 3. Richten Sie die Datensatzgruppe mit einer einfachen Abfrage der Antworttabelle ein – "SELECT * FROM answer". Nachdem Sie die Datensatzgruppe angelegt haben, richten Sie ein Popup-Menü ein, das von dieser Datensatzgruppe abgeleitet ist. Es ist sehr wichtig, dass Sie das jetzt tun, sodass Sie die Datensatzgruppe später nicht verändern müssen: 1. Fügen Sie an beliebiger Stelle ein Popup-Formularelement (Sprungmenü) in das Dokument ein. Dieses Element nimmt alle Antworten aus der Antwortentabelle auf. 2. Öffnen Sie die Palette SERVERVERHALTEN. 3. Klicken Sie auf das Plussymbol (+), und wählen Sie im Menü DYNAMISCHE ELEMENTE den Eintrag DYNAMISCHE LISTE/MENÜ. 4. Setzen Sie die Datensatzgruppe auf die Antwort-Datensatzgruppe, die momentan alle Antworten aus der Datenbank enthält. 5. Dem Menüfeld sollte das Popup-Menü des Formulars zugeordnet werden, das Sie dem System hinzugefügt haben. 6. Die Beschriftungen sollen aus dem Feld answerText geladen werden. 7. Die Werte für die Elemente im Popup-Feld sollten auf das Feld answerID gesetzt werden. Klicken Sie auf OK, nachdem Sie das Verhalten vollständig konfiguriert haben, wie in Abbildung 19.10 gezeigt.

Abbildung 19.10: Konfigurieren Sie das Popup-Menü so, dass es dynamisch aus der AntwortenDatensatzgruppe erzeugt wird.

648

Das Quiz-Formular

Jetzt müssen Sie wieder manuell eingreifen. Öffnen Sie den Quellcode und suchen Sie nach diesem Codeabschnitt: <% set rsQuestion = Server.CreateObject("ADODB.Recordset") rsQuestion.ActiveConnection = MM_connChapter19_STRING rsAnswer.Source = "SELECT * FROM answer" rsAnswer.CursorType = 0 rsAnswer.CursorLocation = 2 rsAnswer.LockType = 3 rsAnswer.Open rsAnswer_numRows = 0 %>

Damit wird die Datensatzgruppe erstellt, die wir brauchen, um das Popup-Menü zu erstellen. Wir müssen das SQL so abändern, dass es die Bedingung beinhaltet, nach der Frage-ID (questionID) der aktuell angezeigten Frage zu suchen. Wenn Sie das Feld questionID von der Haupt-Frage-Datensatzgruppe in die Entwurfsansicht ziehen, finden Sie den Code, der die questionID auf Ihrer Seite darstellt. Für meine Webseite sieht das wie folgt aus: <%= rsQuestion.Fields.Item("questionID").Value %>

Wir suchen genau den Wert rsQuestion.Fields.Item ("questionID").Value. Kopieren Sie diesen Wert und entfernen Sie das APS-Tag, aus dem Sie ihn erhalten haben. Bearbeiten Sie den Code der Datensatzgruppe wie folgt: <% set rsQuestion = Server.CreateObject("ADODB.Recordset") rsQuestion.ActiveConnection = MM_connChapter19_STRING rsAnswer.Source = "SELECT * FROM answer WHERE questionID='" & rsQuestion.Fields.Item("questionID").Value & "'" rsAnswer.CursorType = 0 rsAnswer.CursorLocation = 2 rsAnswer.LockType = 3 rsAnswer.Open rsAnswer_numRows = 0 %>

Mit der zusätzlichen Bedingung im Code wählt die Datensatzgruppe jetzt nur die Antworten aus, die für die vorliegende Frage zutreffen. Leider gibt es mit dieser Datensatzgruppe immer noch ein Problem – sie wird erstellt, bevor der Wert questionID zur Verfügung steht. Wenn Sie diesen Codeblock in dem Programm lassen, wo er sich gegenwärtig befindet, wird er nicht korrekt funktionieren. Statt dessen müssen Sie ihn im ASP-Code ganz nach unten verschieben – unmittelbar oberhalb des HTML. Wenn der Code an das Ende der anderen ASP-Prozeduren verschoben wird, steht der Wert von questionID zur Verfügung und kann genutzt werden.

649

Komplexe Techniken: Lehren und Prüfen – online

Bei der Bearbeitung des serverseitig eingebetteten Codes kann nichts Schlimmes passieren, aber manchmal gibt es Nebeneffekte. Nachdem Sie den Code manuell bearbeitet haben, sollten Sie nicht erwarten, dass es weiterhin möglich sein wird, ihn über die Standarddialoge für die Konfiguration der Serververhalten bearbeiten zu können. Wenn Sie darüber hinaus eine geänderte Datensatzgruppe (oder ein anderes Verhalten) öffnen, ist es sehr wahrscheinlich, dass Sie den hinzugefügten Code zerstören. Außerdem kann zusätzlicher Code verhindern, dass Serververhalten korrekt entfernt werden. Als Vorsichtsmaßnahme sollten Sie Ihre Webseite sichern, bevor Sie eines der Verhalten manuell ändern. Gut, dass ich es gesagt habe, nicht wahr? Damit ist die Seite so weit, dass wir schon einmal ihre Funktionalität prüfen können. Momentan sollten drei Funktionen möglich sein: 쐽

Durchlaufen der verfügbaren Fragen

쐽

Anzeige der geeigneten Antworten für die einzelnen Fragen

쐽

Überspringen einer Frage

Testen Sie diese Funktionen, bevor Sie weiterarbeiten. Falls irgend etwas nicht funktioniert, überprüfen Sie die bisher vorgenommenen Entwicklungsschritte und stellen Sie sicher, dass Sie alles korrekt nachvollzogen haben. Wenn Sie eine zusätzliche Funktionalität einfügen, bevor Sie etwaige Fehler korrigiert haben, kann das beim Debugging des Systems später zu Problemen führen.

Speichern der Antwort Der wichtigste Teil des Quiz-Systems ist, die Antwort des Benutzers wieder in der Datenbank zu speichern. Damit beschäftigen wir uns als Nächstes. Nachdem wir es geschafft haben, entwickeln wir die Bildschirme für den Administrator, was etwas lockerer ist, weil sie nicht so »kritisch« für die Applikation sind. Wie also speichern wir die Antwort? Das Formular ist bereits eingerichtet, aber die Daten stehen noch nicht komplett zur Verfügung. Um Ihre Erinnerung aufzufrischen, hier die Struktur der Antwortentabelle: create table response ( username varchar(50) not null, answerID int not null, questionID int not null, primary key (username,questionID) )

650

Das Quiz-Formular

Bevor Werte in die Tabelle eingetragen werden können, muss sie als Datensatzgruppe definiert werden. Machen Sie das jetzt. Richten Sie einen einfache Abfrage ein, rsResponse, die alle Felder in der Antwortentabelle abruft, wie in Abbildung 19.11 gezeigt. Wir werden diese Datensatzgruppe jetzt nicht abfragen, aber wir brauchen es für das EINFÜGEN-Verhalten.

Abbildung 19.11: Die Antwort-Datensatzgruppe muss definiert werden, damit die Einfügen-Aktion genutzt werden kann.

Das Formular, das wir hier angelegt haben, enthält die Frage-ID (questionID), aber was ist mit dem Benutzernamen (username) und der Antwort-ID (answerID)? Es gibt zwei Möglichkeiten, der Antwort diese Werte hinzuzufügen – entweder durch einen Zugriff auf die Antwort-ID (answerID), wie Sie es bereits kennen, und direktes Hinzufügen zur EINFÜGEN-Anweisung, oder mithilfe eines verborgenen Feldes. Analog könnte die Sitzungsvariable, die den Benutzernamen (username) enthält, der EINFÜGEN-Anweisung direkt hinzugefügt werden. Weil Sie bereits wissen, wie das geht, überlassen wir Ihnen dies als Übung. Damit es in unserem Projekt weitergeht, wollen wir diese Werte jetzt im existierenden Formular in verborgenen Feldern ablegen. Fügen Sie Ihrem Dokument zwei verborgene Felder hinzu, questionID und username. Anschließend stellen Sie die Werte für diese Felder bereit. Dazu bearbeiten Sie die Feldattribute so, wie wir es bisher immer gemacht haben, oder Sie fügen die Felder direkt in das HTML ein: "> ">

Damit werden alle Feldvariablen gefüllt, die wir für das Antwortformular brauchen. Jetzt können wir das Serververhalten DATENSATZ EINFÜGEN anlegen:

651

Komplexe Techniken: Lehren und Prüfen – online

1. Öffnen Sie den Dialog SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie DATENSATZ EINFÜGEN. 3. Wählen Sie die Datensatzgruppe Response und ordnen Sie die einzelnen Formularfelder den Tabellenfeldern zu, wie in Abbildung 19.12 gezeigt. Das Feld NACH DEM EINFÜGEN HIERHER GEHEN lassen Sie einfach leer.

Abbildung 19.12: Legen Sie das Verhalten an, das der Datenbank die Antwort hinzufügt.

Jetzt kommt der Trick. Das Verhalten DATENSATZ EINFÜGEN hat ein Funktionsmerkmal, das wir in unseren Code nicht übernehmen wollen. Indem wir das Feld NACH DEM EINFÜGEN HIERHER GEHEN beim Einfügen eines Datensatzes nicht ausfüllen, teilen wir UltraDev mit, den Benutzer auf die Quiz-Seite zurück zu bringen. Leider gelangt man damit auch zurück zum ersten Datensatz – die aktuelle Datensatznummer wird nicht beibehalten. Um dieses Problem zu umgehen, muss der eingebettete Quellcode bearbeitet werden, um diese Funktionalität zu deaktivieren. Das Problem ist, nicht zum neuen Datensatz zu gehen, wenn das Formular gesendet wird. Die Lösung für dieses Dilemma liegt in der Betrachtung des Links FRAGE ÜBERSPRINGEN, der bereits im Dokument enthalten ist: ">FRAGE ÜBERSPRINGEN

Wenn wir anstelle der aktuellen Formularaktion den Code <%=MM_moveNext%> verwenden, geht die Seite zum nächsten Datensatz weiter, ähnlich wie der Link FRAGE ÜBERSPRINGEN. Bearbeiten Sie den Anfang Ihres Formulars wie hier gezeigt:

652

Das Quiz-Formular

Falls Sie das HTML nicht manuell bearbeiten wollen, markieren Sie das Formular, öffnen die Eigenschaftenpalette und ändern die Aktion des Formulars auf <%=MM_moveNext%>. Testen Sie die Seite erneut; jetzt sollte sich das Programm verhalten wie erwartet. Frühere UltraDev-Versionen hätten versucht, den Browser umzuleiten, wenn das Feld NACH DEM EINFÜGEN HIERHER GEHEN nicht ausgefüllt wird. – was normalerweise in einer Fehlermeldung resultiert. Um das in UltraDev 1.0 zu umgehen, musste der Code manuell bearbeitet und die von UltraDev eingefügten Umleitungsanweisungen entfernt werden.

Korrekte Antworten bewerten (optional) Während der Benutzer den Test bearbeitet, wird eine Tabelle mit Informationen zu seinen Antworten angelegt. Diese Antworten könnten jederzeit ausgewertet werden, um festzustellen, wie viele richtige Antworten der Benutzer gegeben hat. Für den Benutzer kann diese Bewertung ganz informativ sein – abhängig davon, wie Sie die Online-Prüfungen betrachten. Wenn Sie Ihrer Prüfungsseite diese Information hinzufügen wollen, dann sollten Sie diesen Abschnitt lesen. Andernfalls blättern Sie weiter zum nächsten Kapitel. Das in diesem Kapitel entwickelte SQL zeigt eine Liste der korrekten Antworten des Benutzers an: select * from response,question where response.username='jray' AND response.answerID=question.answerID AND response.questionID=question.questionID;

Diesen Code haben wir bereits. Mithilfe dieses SQL und der Sitzungsvariablen MM_Username können wir auf der Seite quiz.asp eine Echtzeit-Bewertung anzeigen: Fügen Sie dem System eine neue Datensatzgruppe hinzu, um das Ganze anzukurbeln: 1. Öffnen Sie die Palette SERVERVERHALTEN, und legen Sie eine neue Datensatzgruppe an. 2. Gehen Sie in den erweiterten Abfragemodus. 3. Definieren Sie die neue Datensatzgruppe rsCorrect, die alle gültigen Benutzerantworten enthält. 4. Geben Sie den folgenden Code in die SQL-Definition ein: select

* from response,question where response.username='varUsername' AND response.answerID=question.answerID AND response. questionID=question.questionID

653

Komplexe Techniken: Lehren und Prüfen – online

5. Fügen Sie die neue UltraDev-Variable varUsername ein und geben Sie ihr den Laufzeitwert Session("MM_Username"). 6. Klicken Sie auf OK. Abbildung 19.13 zeigt die vollständige Datensatzgruppe.

Abbildung 19.13: Definieren Sie diese erweiterte Abfrage, um die Anzahl der korrekten Antworten für den aktuellen Benutzer zu berechnen.

In einer perfekten Welt wären wir fertig, sobald wir das Feld [total records] aus der neuen Datensatzgruppe in die Entwurfsansicht verschoben hätten, aber wir leben leider nicht in einer perfekten Welt. Wie wir aus Erfahrungen der Vergangenheit wissen, ist UltraDev nicht perfekt. Es ist ziemlich gut – aber eben nicht perfekt. Als wir den Code in UltraDev manuell an eine andere Position verschoben haben, haben wir es damit richtig verwirrt. Die neue Datensatzgruppe, die wir hinzugefügt haben, wurde unten in dem eingebetteten Code definiert, während es Funktionen unterstützt, die in der Mitte definiert werden. Wir müssen nur noch den problematischen Codeblock finden und ihn an die richtige Position verschieben. Öffnen Sie den Quellcode für Ihr Dokument und suchen Sie nach dem folgenden Block: 1 2 3 4 5 6

% Dim rsCorrect__varUsername rsCorrect__varUsername = "jray" if (Session("MM_Username") <> "") then rsCorrect__varUsername = Session("MM_Username") %>

654

Das Quiz-Formular

7 <% 8 set rsCorrect = Server.CreateObject("ADODB.Recordset") 9 rsCorrect.ActiveConnection = MM_connChapter19_STRING 10 rsCorrect.Source = "SELECT * FROM response,question 11 WHERE response.username='" + Replace(rsCorrect__varUsername, "'", "''") ➥+ "' 12 AND response.answerID=question.answerID 13 AND response.questionID=question.questionID" 14 rsCorrect.CursorType = 0 15 rsCorrect.CursorLocation = 2 16 rsCorrect.LockType = 3 17 rsCorrect.Open() 18 rsCorrect_numRows = 0 19 %>

Diesen Code finden Sie in der Nähe des Anfangs des HTML-Rumpfs für Ihre Seite. Er definiert die Datensatzgruppe rsCorrect, die Sie zuvor erstellt haben. 1 <% 2 set rsQuestion = Server.CreateObject("ADODB.Recordset") 3 rsQuestion.ActiveConnection = MM_connChapter19_STRING 4 rsQuestion.Source = "SELECT * FROM question" 5 rsQuestion.CursorType = 0 6 rsQuestion.CursorLocation = 2 7 rsQuestion.LockType = 3 8 rsQuestion.Open() 9 rsQuestion_numRows = 0 10 %> 11 <% 12 set rsResponse = Server.CreateObject("ADODB.Recordset") 13 rsResponse.ActiveConnection = MM_connChapter19_STRING 14 rsResponse.Source = "SELECT * FROM response" 15 rsResponse.CursorType = 0 16 rsResponse.CursorLocation = 2 17 rsResponse.LockType = 3 18 rsResponse.Open() 19 rsResponse_numRows = 0 20 %> <% 21 Dim rsCorrect__varUsername 22 rsCorrect__varUsername = "jray" 23 if (Session("MM_Username") <> "") then 24 rsCorrect__varUsername = Session("MM_Username") 25 %> 26 <% 27 set rsCorrect = Server.CreateObject("ADODB.Recordset") 28 rsCorrect.ActiveConnection = MM_connChapter19_STRING 29 rsCorrect.Source = "SELECT * FROM response,question

655

Komplexe Techniken: Lehren und Prüfen – online

30 31 32 33 34 35 36 37 38

WHERE response.username='" + Replace(rsCorrect__varUsername, "'", "''") ➥+ "' AND response.answerID=question.answerID AND response.questionID=question.questionID" rsCorrect.CursorType = 0 rsCorrect.CursorLocation = 2 rsCorrect.LockType = 3 rsCorrect.Open() rsCorrect_numRows = 0 %>

Die hier gezeigten Datensatzmengen sind question (1-10), response (12-20) und die neu erstellte Datensatzgruppen correct response (20-38). Wenn Sie in dem Kapitel Dinge übersprungen haben, befinden sich Ihre Definitionen vielleicht nicht an derselben Stelle, aber Sie sollten sie dennoch finden. Damit sind wir fertig. Fügen Sie ein [Total Records]-Feld in Ihre Entwurfsansicht ein – das ist der Zähler der vom Benutzer richtig eingegebenen Antworten. Glückwunsch! Damit haben Sie eine der verzwicktesten Komponenten des Systems implementiert.

Das Quiz beenden Das System ist jetzt so weit implementiert, dass der Benutzer den Test bis zur letzten Frage bearbeiten kann. Leider bleibt ihm nach der Beantwortung der letzten Frage keine andere Möglichkeit, als sie zu beantworten (was nicht möglich ist, weil er bereits eine Antwort auf diese Frage eingegeben hat). Um das Quiz zu beenden, brauchen wir ein leicht abgeändertes BEREICH VERBERGENVerhalten. Außerdem müssen wir dem Dokument eine weitere Datensatzgruppe hinzufügen. Diese Datensatzgruppe enthält alle vom Benutzer gegebenen Antworten – wenn wir diese Zahl mit der Gesamtzahl der Datensätze vergleichen, können wir feststellen, ob der Benutzer alle Fragen beantwortet hat. Jetzt fügen wir dem Dokument diese Datensatzgruppe hinzu. Ich verspreche Ihnen, dass dies die letzte Datensatzgruppe für diese Seite ist! Fügen Sie die Datensatzgruppe wie folgt ein: 1. Fügen Sie ein neues DATENSATZGRUPPE-Serververhalten ein. 2. Gehen Sie gegebenenfalls in den einfachen Modus. 3. Legen Sie die neue Datensatzgruppe unter dem Namen rsResponseAll ab, weil es alle Antworten aufnimmt. 4. Konfigurieren Sie die Abfrage so, dass in der Antwortentabelle der Datenbank alles ausgewählt wird.

656

Das Quiz-Formular

5. Filtern Sie die Abfrage abhängig von der Spalte für den Benutzernamen, der gleich der Sitzungsvariable MM_Username ist. 6. Klicken Sie auf OK. Diese Datensatzgruppen-Definition sehen Sie in Abbildung 19.14. Ihre Definition sollte vergleichbar aussehen.

Abbildung 19.14: Definieren Sie Ihre Datensatzgruppe wie hier gezeigt.

Auch hier hat UltraDev dieses Serververhalten im Dokument an der falschen Stelle angeordnet. Wenn Sie den letzten optionalen Abschnitt gelesen haben, wissen Sie, dass dies passiert ist, weil wir den Code manuell bearbeitet und damit UltraDev verwirrt haben – falls Sie es nicht gelesen haben, wissen Sie es jetzt. Suchen Sie in Ihrem HTML-Quellcode nach dem Bereich, der Ihre neue Datensatzgruppe definiert: 1 2 3 4 5 6 7 8 9

<% Dim rsResponseAll__MMColParam rsResponseAll__MMColParam = "0" if (Session("MM_Username") <> "") then rsResponseAll__MMColParam = Session("MM_Username") %> <% set rsResponseAll = Server.CreateObject("ADODB.Recordset") rsResponseAll.ActiveConnection = MM_connChapter19_STRING rsResponseAll.Source = "SELECT * FROM response

657

Komplexe Techniken: Lehren und Prüfen – online

10 11 12 13 14 15 16

WHERE username = '" + Replace(rsResponseAll__MMColParam, "'", "''") + "'" rsResponseAll.CursorType = 0 rsResponseAll.CursorLocation = 2 rsResponseAll.LockType = 3 rsResponseAll.Open() rsResponseAll_numRows = 0 %>

Sehr wahrscheinlich befindet sich dieser Code relativ weit am Anfang Ihres HTML. Markieren Sie diesen Codeabschnitt (inklusive der öffnenden und schließenden Tags) und verschieben Sie ihn an den Anfang Ihres Dokuments – zu den anderen DatensatzgruppenDefinitionen. Ihr Code sollte anschließend wie folgt aussehen: 1 <% 2 set rsQuestion = Server.CreateObject("ADODB.Recordset") 3 rsQuestion.ActiveConnection = MM_connChapter19_STRING 4 rsQuestion.Source = "SELECT * FROM question" 5 rsQuestion.CursorType = 0 6 rsQuestion.CursorLocation = 2 7 rsQuestion.LockType = 3 8 rsQuestion.Open() 9 rsQuestion_numRows = 0 10 %> 11 <% 12 set rsResponse = Server.CreateObject("ADODB.Recordset") 13 rsResponse.ActiveConnection = MM_connChapter19_STRING 14 rsResponse.Source = "SELECT * FROM response" 15 rsResponse.CursorType = 0 16 rsResponse.CursorLocation = 2 17 rsResponse.LockType = 3 18 rsResponse.Open() 19 rsResponse_numRows = 0 20 %> <% 21 Dim rsCorrect__varUsername 22 rsCorrect__varUsername = "jray" 23 if (Session("MM_Username") <> "") then 24 rsCorrect__varUsername = Session("MM_Username") 25 %> 26 <% 27 set rsCorrect = Server.CreateObject("ADODB.Recordset") 28 rsCorrect.ActiveConnection = MM_connChapter19_STRING 29 rsCorrect.Source = "SELECT * FROM response,question 30 WHERE response.username='" + Replace(rsCorrect__varUsername, "'", "''") ➥+ "' 31 AND response.answerID=question.answerID 32 AND response.questionID=question.questionID" 33 rsCorrect.CursorType = 0

658

Das Quiz-Formular

34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

rsCorrect.CursorLocation = 2 rsCorrect.LockType = 3 rsCorrect.Open() rsCorrect_numRows = 0 %> <% Dim rsResponseAll__MMColParam rsResponseAll__MMColParam = "0" if (Session("MM_Username") <> "") then rsResponseAll__MMColParam = Session("MM_Username") %> <% set rsResponseAll = Server.CreateObject("ADODB.Recordset") rsResponseAll.ActiveConnection = MM_connChapter19_STRING rsResponseAll.Source = "SELECT * FROM response WHERE username = '" + Replace(rsResponseAll__MMColParam, "'", "''") + "'" rsResponseAll.CursorType = 0 rsResponseAll.CursorLocation = 2 rsResponseAll.LockType = 3 rsResponseAll.Open() rsResponseAll_numRows = 0 %>

Darin ist die optionale Datensatzgruppe enthalten, die die Anzahl der richtigen Antworten im Dokument anzeigt. In Ihrem Quellcode fehlt möglicherweise diese letzte Datensatzgruppen-Definition, wenn Sie den Abschnitt übersprungen haben, in dem die Ausgabe der Anzahl korrekter Antworten implementiert wurde. Bevor wir den verborgenen Bereich für das Beenden des Quiz fertig stellen können, sind zwei weitere Schritte erforderlich. Öffnen Sie die Frage-Datensatzgruppe in der Palette DATENBINDUNGEN, und ziehen Sie das Feld [Total Records] in Ihr Dokument. Genau so gehen Sie für dasselbe Feld in Ihrer neuen Datensatzgruppe vor. Testen Sie die Applikation, um sicherzustellen, dass die beiden Zahlen korrekt ermittelt werden – die eine sollte die Gesamtzahl der Fragen darstellen, während die andere die Gesamtzahl der eingegebenen Antworten repräsentiert. UltraDev fügt einen speziellen Code ein, um die Gesamtzahl der Datensätze in der Datensatzgruppe zu berechnen. Wenn Sie diese Elemente in Ihrem Dokument verwenden, ist sichergestellt, dass der unterstützende Code erstellt wird. Wenn im Testlauf alles korrekt zu sein scheint, fügen Sie einen letzten verborgenen Bereich ein. Weil es kein Serververhalten gibt, das die von uns benötigte Aktion realisiert, fügen Sie dieses Verhalten manuell ein. Wir wollen die Variablen vergleichen, die die Gesamtzahl der Datensätze in der Datensatzgruppe Question und in der Datensatzgruppe All Responses vergleichen: rsQuestion_total bzw. rsResponseAll_total.

659

Komplexe Techniken: Lehren und Prüfen – online

Möglicherweise müssen Sie variable IDs anpassen, wenn Sie Ihre Datensatzgruppe unter einem anderen Namen abgelegt haben. Mithilfe der dynamischen Total Record-Elemente, die Sie dem Dokument hinzugefügt haben, sollten Sie in der Lage sein herauszufinden, wie diese Namen aussehen sollten. Sind diese beiden Werte nicht gleich, sollte das Quiz angezeigt werden. Sind sie gleich, sollte das Dokument dem Benutzer die Meldung »Ihr Test ist beendet« anzeigen. Dazu stellen Sie einfach eine If-Then-Anweisung um den Code, den Sie verbergen wollen: <% If rsResponseAll_total <> rsQuestion_total Then %> … <% End If %>

Damit wird geprüft, ob die Anzahl der Antworten gleich der Anzahl der Fragen ist. Sind sie ungleich, wird das Quiz angezeigt. Sind sie gleich, ist das Quiz abgeschlossen und das HTML zwischen den If- und den End If-Anweisungen wird verborgen. Analog könnte der Code für die Meldung an den Benutzer die folgende Bedingung verwenden: <% If rsResponseAll_total = rsQuestion_total Then %> Glückwunsch! Sie haben das Quiz abgeschlossen! <% End If %>

Offensichtlich können Sie in diese Bereiche beliebige Dinge einsetzen. Stellen Sie den HTML-Code für diesen Abschnitt des Quiz fertig und Sie sind fertig! Das ist ein komplizierter Bildschirm, aber Sie haben es geschafft! Bei der Realisierung dieser letzten Funktionalität haben wir dem Quellcode eine recht praktische Funktion hinzugefügt. Weil das Quiz nicht abgeschlossen ist, bis die Anzahl der Antworten gleich der Anzahl der Fragen ist, kann der Benutzer immer auf die Seite zurückgehen und die Fragen vervollständigen, die er zuvor übersprungen hat. Er kann jedoch nicht eine neue Antwort auf eine Frage übergeben, die er bereits beantwortet hat. Durch die Verwendung von questionID und username als Primärschlüssel wird sichergestellt, dass für jeden Benutzer im System jeweils nur eine Antwort vorhanden sein kann.

660

Administrativer Zugriff

Das Quiz schützen Um den Quiz-Bildschirm zu schützen, wenden Sie das Serververhalten ZUGRIFF AUF SEITE BESCHRÄNKEN an. Öffnen Sie die Palette SERVERVERHALTEN, und gehen Sie wie folgt vor, um den Zugriff auf Ihre Seite zu beschränken: 1. Klicken Sie auf der Palette SERVERVERHALTEN auf das Plussymbol (+), und wählen Sie im Menü BENUTZERAUTHENTIFIZIERUNG den Eintrag ZUGRIFF AUF SEITE BESCHRÄNKEN. 2. Schränken Sie den Zugriff abhängig von Benutzername, Kennwort und Zugriffsebene ein. 3. Definieren Sie zwei Zugriffsebenen, Schüler und Lehrer, indem Sie auf die Schaltfläche DEFINIEREN klicken und mit dem Plussymbol (+) neue Ebenen einfügen. 4. Beschränken Sie den Zugriff auf die Ebenen Schüler und Lehrer – d.h. jeder kann an dem Quiz teilnehmen, auch jemand mit Lehrer-Zugriff. 5. Falls der Zugriff verweigert wird, soll der Benutzer zurück auf die Anmeldeseite gelangen. Das ist in diesem Fall index.asp. 6. Nachdem wir fertig sind, sollte das Verhalten wie in Abbildung 19.15 gezeigt konfiguriert sein. Klicken Sie auf OK, um die Definition abzuschließen. Abbildung 19.15: Beschränken Sie den Zugriff auf die Seite abhängig von dem Benutzernamen, dem Kennwort und der Zugriffsebene.

Um einen einfachen Zugriff auf den Administrationsabschnitt zu bieten, könnten Sie einen Admin-Link im Dokument quiz.asp anlegen, der zu dem administrativen Abschnitt führt, den Sie gleich anlegen werden (admin1.asp) – andernfalls müssten die Administratoren die URL manuell eingeben.

19.4 Administrativer Zugriff Wir schließen das Kapitel mit der Implementierung einer Administrationsoberfläche ab, die dem Prüfungs-Administrator ermöglichen soll, die Ergebnisse der Prüfungsteilnehmer einfach einzusehen. Das dauert nur eine Sekunde (oder eine Stunde, abhängig von der Genauigkeit Ihrer Uhr).

661

Komplexe Techniken: Lehren und Prüfen – online

Als erstes entwickeln Sie einen Bildschirm mit einem einfachen Formular, in das Sie den Namen des Benutzers eingeben, dessen Ergebnisse eingesehen werden sollen. Sie brauchen dazu nur ein einziges Feld, username, und eine SENDEN-Schaltfläche, das ist alles. Diese Seite verwendet keine Serververhalten. Abbildung 19.16 zeigt einen Beispiel-Bildschirm für die Realisierung dieser Funktion.

Abbildung 19.16: Der erste Bildschirm der Administratoroberfläche ist relativ einfach.

Ich habe das Feld für den Benutzernamen in meiner Version als username bezeichnet – wenn Sie das Beispiel genau nachvollziehen wollen, sollten Sie das auch tun. Die Aktion des Formulars wird auf die zweite administrative Seite gesetzt, admin2.asp.

Der Ergebnis-Bildschirm Nachdem Sie die erste administrative Seite fertiggestellt haben, legen Sie die zweite Seite an. Verwenden Sie dafür unbedingt den Namen, auf den Sie in der Aktion der ersten Seite verwiesen haben. Bevor Sie diesen Bildschirm entwerfen können, müssen Sie zwei Datensatzgruppen anlegen. Diese Abfragen erzeugen Listen der richtigen Benutzerantworten und der falschen Benutzerantworten. Wir haben bereits eine Abfrage, die diese Aufgabe erledigt: select * from response,question where response.username='varUsername' AND response.answerID=question.answerID AND response.questionID=question.questionID;

Das SQL für falsche Antworten ist ganz ähnlich; nur der Vergleich zwischen response.answerID und question.answerID muss abgeändert werden:

662

Administrativer Zugriff

select * from response,question where response.username='varUsername' AND response.answered!=question.answerID AND response.questionID=question.questionID;

Entwerfen Sie jetzt die Datensatzgruppen rsCorrect und rsIncorrect: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+) und wählen Sie das Verhalten DATENSATZGRUPPE (ABFRAGE). 3. Gehen Sie gegebenenfalls in den erweiterten Abfragemodus. 4. Fügen Sie den Datensatzgruppennamen und die Abfrage für die erste Datensatzgruppe ein, rsCorrect. Sie die UltraDev-Variable varUsername mit dem Laufzeitwert Request("username") – vorausgesetzt, username ist der Name des Felds, das Sie von

5. Definieren

dem ersten administrativen Formular aus übergeben haben. 6. Klicken Sie auf OK. 7. Wiederholen Sie diesen Prozess für die Datensatzgruppe rsIncorrect. Abbildung 19.17 zeigt die Abfragedefinition für die Datensatzgruppe mit den korrekten Antworten.

Abbildung 19.17: Definieren Sie beide Datensatzgruppen für diese Seite dieser Vorgabe entsprechend.

663

Komplexe Techniken: Lehren und Prüfen – online

Jetzt können Sie unter Verwendung der beiden definierten Datensatzgruppen Ihre Ergebnisseite entwerfen. Das Feld [Total Records] kann genutzt werden, um die Gesamtzahl der richtigen Antworten anzuzeigen, oder die Gesamtzahl der falschen Antworten (abhängig davon, ob Sie sie aus der Datensatzgruppe rsCorrect oder rsIncorrect eingefügt haben). Es wäre sinnvoll, die Titel der Fragen anzuzeigen, die der Benutzer richtig oder falsch beantwortet hat. Diese Funktion fügen Sie Ihrer Seite hinzu, indem Sie die entsprechenden Felder in Ihre Dokumententwurfsansicht verschieben und dann das Serververhalten BEREICH WIEDERHOLEN auf die Felder anwenden. Mein Bildschirm für den administrativen Überblick sieht wie in Abbildung 19.18 gezeigt aus.

Abbildung 19.18: Fügen Sie die gewünschten Funktionen und Informationen in den Bildschirm für den administrativen Überblick ein.

Im letzten Schritt schützen Sie die administrativen Bildschirme admin1.asp und admin2.asp so, wie Sie die Datei quiz.asp geschützt haben: 1. Öffnen Sie die Palette SERVERVERHALTEN. 2. Klicken Sie auf das Plussymbol (+), und wählen Sie im Menü BENUTZERAUTHENTIFIZIERUNG den Eintrag ZUGRIFF AUF SEITE BESCHRÄNKEN. 3. Schränken Sie den Zugriff abhängig von Benutzername, Kennwort und Zugriffsebene ein. 4. Beschränken Sie den Zugriff auf die Ebene Lehrer. Damit wird verhindert, dass Studenten die Ergebnisse und Antworten einsehen können. 5. Falls der Zugriff verweigert wird, soll der Benutzer zurück auf die Anmeldeseite gelangen. Das ist in diesem Fall index.asp. 6. Nachdem Sie fertig sind, klicken Sie auf OK.

664

Zusammenfassung

Das ist alles. Das Projekt für dieses Kapitel ist fertig. Sie haben ausreichend viel Erfahrung, um aus diesem Beispiel ein vollfunktionales Prüfungssystem zu machen – oder es so zu belassen, wie es ist.

19.5 Zusammenfassung In dem heutigen Projekt haben wir eine Applikation mit Funktionsmerkmalen angelegt, die Sie zuvor noch nie in UltraDev-Applikationen gesehen haben. Beispielsweise wurde das Verhalten NACH DEM EINFÜGEN HIERHER GEHEN umgangen, nachdem Daten eingefügt wurden. Dies ist nur eine der vielen Änderungen, die wir an dem heute vorgestellten Code vorgenommen haben. Leider hatten diese Änderungen auch ihren Preis. Durch das Hinzufügen von benutzerdefiniertem Code und die Abänderung des automatisch erzeugten Codes haben wir UltraDev verwirrt und es konnte die Seite nicht mehr korrekt verwalten. Nachdem wir den Code manuell geändert hatten, fügte UltraDev Verhalten an der falschen Position ein und wir mussten die Dinge immer wieder an die richtige Stelle schieben. Schließlich kann UltraDev nicht Gedanken lesen und hat sein Bestes getan. Selbst mit den heute aufgetretenen Problemen ist es seinen Konkurrenten immer noch um Lichtjahre voraus. Zuletzt möchte ich noch anmerken, dass das heutige Projekt zwar ein funktionierendes System darstellt, aber dennoch beliebig erweiterbar ist. Eine vollständige Prüfungs-Site könnte vor der Prüfung Lehrmaterial anzeigen usw. Erweitern Sie das Projekt nach Ihren Vorstellungen.

19.6 Fragen und Antworten F

Die Sicherheit des Quiz... wie sicher ist es? A

F

In Hinblick auf die korrekte Verarbeitung der Fragen ist es sicher, aber es hat das Problem, dass ein Benutzer seine Identität vortäuschen kann, indem er den Benutzernamen im Formular ändert. Wenn die Sicherheit für Sie wichtig ist, sollten Sie das verborgene Feld, das mit diesem Wert übergeben wird, ersetzen, sodass er ausschließlich über die Sitzungsvariable MM_Username verwaltet wird.

Was ist der Unterschied zwischen der Funktion NACH DEM EINFÜGEN HIERHER GEHEN und dem Überspringen der Seitenumleitung? A

Wenn wir nur auf die Seite umleiten, auf der wir uns beim Einfügen-Verhalten befanden, würden wir zurück zum Anfang der Fragen gelangen. Durch Umleitung zu einer URL wird der aktuelle Datensatzgruppen-Offset nicht mit übergeben und das Quiz würde von vorne beginnen.

665

Komplexe Techniken: Lehren und Prüfen – online

F

Was passiert, wenn der Benutzer eine Frage beantwortet, die er bereits beantwortet hat? A

F

Das System erzeugt einen Fehler, weil für jeden Benutzer nur ein einziger Datensatz existieren kann. Im Abschnitt »Übungen« finden Sie einen Hinweis, wie dieses Problem behoben werden könnte.

Können in einer einzigen Datenbank mehrere Prüfungen aufbewahrt werden? A

Ja, natürlich. Wenn Sie das Fragenthema als Attribut der Hauptabfrage für die Fragen verwendet haben, könnten Sie die Themen des Quiz beschränken. Sie könnten die Datenbank auch erweitern, sodass ein zusätzliches Kategoriefeld als Attribut zur Auswahl von Fragen verwendet werden kann.

19.7 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 haben wir das Verhalten NACH DEM EINFÜGEN HIERHER GEHEN umgangen, das in dem Verhalten DATENSATZ EINFÜGEN enthalten ist? 2. Wie wird die Sicherheit des Administrationsabschnitts realisiert? 3. Warum mussten Sie in diesem Kapitel Code manuell verschieben? 4. Wie haben wir einen Bereich ohne das Verhalten BEREICH VERBERGEN verborgen? 5. Es gibt kein Serververhalten, um einen Bereich zu verbergen, wenn das Quiz beendet ist – wie haben wir es dann geschafft?

Übungen 1. Das Programm schlägt in seinem aktuellen Zustand fehl, wenn der Benutzer versucht, eine Antwort mehrmals zu beantworten. Optimal bearbeitet man diese Situation, indem man nur Fragen anzeigt, zu denen es keine entsprechenden Benutzerantworten gibt. Ändern Sie Ihr SQL so ab, dass es auf diese Weise funktioniert. 2. Fügen Sie dem Frage- und Antwortabschnitt ein administratives Frontend hinzu. Dazu legen Sie ein paar einfache Eingabeseiten an und verknüpfen sie – was ein benutzerfreundlicheres System für die Leute darstellt, die die Tests durchführen.

666

Workshop

3. Korrigieren Sie das Sicherheitsproblem dahingehend, dass der Benutzername von dem Quiz-Formular aus geändert werden kann. Dazu verwenden Sie die Sitzungsvariable Session("MM_username") direkt, wenn die Daten für eine bestimmte Frage gespeichert werden.

667

Komplexe Techniken: E-Commerce-Lösungen

0 2

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: 쐽

Wie die Einkaufswagen einzelner Benutzer verwaltet werden. Wie können Sie ein paar Tausend Benutzer und ihre einzelnen Aufträge verwalten?

쐽

Wie man einen interaktiven Einkaufswagen anlegt, der erlaubt, Artikel hineinzulegen oder herauszunehmen.

쐽

Wie man gespeicherte Benutzerprofile abfragt, um automatisch Liefer-/Rechnungsinformationen abzurufen, nachdem der Auftrag ausgeführt ist.

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.

670

Einfach komplex

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.

671

Komplexe Techniken: E-Commerce-Lösungen

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.

672

Einfach komplex

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: 쐽

Eine Suchseite, auf der Sie den richtigen Artikel suchen

쐽

Eine Ergebnisseite zur Anzeige der Artikel in dem Katalog

쐽

Detailseiten, die größere Bilder und eine vollständige Produktbeschreibung anzeigen

Dieser Liste müssen wir auch hinzufügen: 쐽

Eine Anmeldeseite

쐽

Einen Bildschirm für die Benutzerregistrierung

쐽

Fehler-Bildschirme für beides

쐽

Einen Bildschirm für die Durchführung des Kaufs

쐽

Sammlung von Rechnungsinformationen

673

Komplexe Techniken: E-Commerce-Lösungen

쐽

Verschiedene andere Bestätigungsbildschirme

쐽

Alle möglichen weiteren Bildschirme, die für die Prozedur erforderlich sind

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.

SUCHE

KATALOGEINTRÄGE

ARTIKELDETAILS EINKAUFSWAGEN

ANMELDUNG

AUFTRAGSERTEILUNG

REGISTRIERUNG

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.

674

Die Tabellendefinitionen

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 MasterTabelle 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) );

675

Komplexe Techniken: E-Commerce-Lösungen

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

676

Die Tabellendefinitionen

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.

677

Komplexe Techniken: E-Commerce-Lösungen

Sie können jederzeit andere Informationen in die Auftragstabelle oder in die Benutzerinformationstabelle eintragen. Daten wie beispielsweise die E-MailAdresse, 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.

678

Die Tabellendefinitionen

Füllen der Kategorien: insert into tblCategory values (1,'Schuhe'); insert into tblCategory values (2,'T-Shirts'); tblProduct prodID* catID prodName prodDesc prodPrice prodSmPic prodLgPic

tblRelated prodID1* prodID2*

tblCart cartID prodID username orderID

tblUserInfo username* password address1 address2 city state zip

tblOrderInfo orderID* username billaddress1 billaddress2 billcity billstate billzip shipaddress1 shipaddress2 shipcity shipstate shipzip paymethod payaccount payexpire

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

679

Komplexe Techniken: E-Commerce-Lösungen

insert

insert

insert

insert

insert

bestem Tragekomfort',25.15,'catalogimages/M004sm.jpg', ➥'catalogimages/M004lg.jpg'); into tblProduct values ('M005',1,'Angebot Lederschuhe', 'Falls Sie sparen wollen – diese Schuhe sind preiswert',6.95,'catalogimages/M005sm.jpg', 'catalogimages/M005lg.jpg'); into tblProduct values ('M006',1,'Schwarze Lederschuhe Damen', 'Diese Lederschuhe bieten höchsten Tragekomfort', 76.99,'catalogimages/M006sm.jpg', 'catalogimages/M006lg.jpg'); 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'); 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'); 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.

680

Das Katalogsystem

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: 쐽

Das Suchfeld für die Produktbeschreibung sollte als Textfeld implementiert werden.

쐽

Das Kategoriefeld verwendet eine Popup-Liste mit Einträgen, die dynamisch aus tblCategory geladen werden.

쐽

Das Preisfeld wird nach allem durchsucht, was kleiner einem vorgegebenen Wert ist. Um das Ganze für den Benutzer möglichst einfach zu gestalten, implementieren Sie für dieses Feld ein Popup-Menü mit sinnvollen Geldbeträgen.

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 (+).

681

Komplexe Techniken: E-Commerce-Lösungen

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.

682

Das Katalogsystem

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.

683

Komplexe Techniken: E-Commerce-Lösungen

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.

684

Das Katalogsystem

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.

685

Komplexe Techniken: E-Commerce-Lösungen

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.

686

Das Authentifizierungssystem für den Benutzer

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: 쐽

register – Sammelt alle Informationen, die wir brauchen, um einen Benutzer zu re-

gistrieren. 쐽

duplicate – Falls der angegebene Benutzername ungültig ist, soll eine Fehlermel-

dung angezeigt werden, und der Benutzer soll die Möglichkeit einer erneuten Anmeldung erhalten. 쐽

login – Nimmt den Benutzernamen und das Kennwort für ein gültiges Benutzerkonto auf und überprüft sie.

쐽

badlogin – Falls der Benutzer fehlerhafte Anmeldeinformationen eingibt, soll er die

Möglichkeit erhalten, die Eingabe zu wiederholen. 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 ver-

687

Komplexe Techniken: E-Commerce-Lösungen

arbeiten. Entwerfen Sie die Registrierungsseite, sodass sie alle für ein grundlegendes Benutzerprofil erforderlichen Informationen sammelt, insbesondere 쐽

Benutzername

쐽

Kennwort

쐽

Adresse1

쐽

Adresse2

쐽

Stadt

쐽

Staat

쐽

PLZ

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.

688

Das Authentifizierungssystem für den Benutzer

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.

689

Komplexe Techniken: E-Commerce-Lösungen

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.

690

Der Einkaufswagen

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.

691

Komplexe Techniken: E-Commerce-Lösungen

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 SENDENSchaltfläche anlegen. Das resultierende Formular könnte beispielsweise wie folgt aussehen: ">

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.

692

Der Einkaufswagen

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:

693

Komplexe Techniken: E-Commerce-Lösungen

<% If Session("MM_Username")<>"" Then %>

">

<% 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 %> Log into the system <% 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 EinkaufswagenSeiten 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 Hauptauftragsseite – hier wird aufgelistet, was der Benutzer im Einkaufswagen hat, und er kann Artikel daraus entfernen oder seinen Einkauf fortsetzen.

쐽

Die sekundäre Auftragsseite – wenn der Benutzer beschlossen hat, dass sein Auftrag jetzt fertig für die Übergabe ist, gibt er auf dieser Seite die Informationen zum Versand, zur Rechnungsstellung usw. ein.

쐽

Die Fertig-Seite – nachdem alles fertig ist, müssen wir dem Benutzer eine Seite anzeigen, die ihn darüber informiert. Dazu brauchen wir eine einzige Textzeile und keinerlei Serververhaltensweisen. Kein Problem!

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

694

Das Auftragssystem

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.

695

Komplexe Techniken: E-Commerce-Lösungen

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 EinkaufswagenAnzeige.

696

Das Auftragssystem

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: 쐽 쐽

VERBINDUNG – Die Datenbankverbindung, die Sie verwenden. LÖSCHEN AUS TABELLE – tblCart – Sie wollen Artikel aus dem Einkaufswagen entfer-

nen. 쐽

DATENSATZGRUPPE AUSWÄHLEN AUS – Die Datensatzgruppe rsCart enthält alle Artikel, die sich momentan im Einkaufswagen befinden.

쐽

SPALTE FÜR EINDEUTIGEN SCHLÜSSEL – cartID (numerisch) – Dieser Wert ist nicht wirklich wichtig, weil die Datensatzgruppe, aus der wir etwas löschen wollen, UltraDev bereits auf einen einzigen Datensatz beschränkt.

697

Komplexe Techniken: E-Commerce-Lösungen

쐽

NACH DEM LÖSCHEN VON, ZU URL WECHSELN – Lassen Sie dieses Feld leer. Wir wollen nach dem Löschen eines Artikels wieder auf denselben Bildschirm zurückgelangen.

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: ">

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

698

Das Auftragssystem

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),

699

Komplexe Techniken: E-Commerce-Lösungen

billcity billstate billzip shipaddress1 shipaddress2 shipcity shipstate shipzip paymethod payaccount payexpire primary key

varchar(100), varchar(20), varchar(15), varchar(100), varchar(100), varchar(100), varchar(20), varchar(15), varchar(50), varchar(50), varchar(15), (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. 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.

700

Das Auftragssystem

Abbildung 20.13: L