vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 10

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:

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.

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',
'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 ***************************
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.

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.

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 reellen 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 Feld-Tags 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.

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).

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-Data- Ansicht 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-Data-Ansicht 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.

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 Vor- und 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:

  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 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 <BR>-Tag am Ende jeder Zeile.

Dieses Beispiel funktioniert nicht anders, nur war der wiederholte Bereich eine Tabellenzeile: <TR><TD>...</TD></TR>. 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.

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.
  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.

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)%>

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 <IMAGE>-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.

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.

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,
xloc     int,
yloc     int,
primary key     (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.
  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.

  1. 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.
  2. 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.

Abbildung 10.14:  Die endgültige Dokumentansicht für ein vollkommen datenbankgesteuertes Layout

Abbildung 10.15:  Die Live Data-Ansicht 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 <html>
2 <head>
3 <title>Untitled Document</title>
4 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
5 </head>
6 <body bgcolor="#FFFFFF ">
7
8 <div id="Ray" style="position:absolute;width:150px;height:150px;
9 z-index:1;left:300px;top:10px;width:170px;height:158px;left:217px;
10 top:3px;background-color:#FFFF99;layer-background-color:#FFFF99;
11 border:1px none #000000">
12 John&nbsp;Ray<br>
13 99
14 <br>
15 555-555-5555
16 <br>
17 Ein famoses Haus<br>
18 <img src="bilder/JohnRay.jpg" width="88" height="105">
19 </div>
20
21 <div id="Ness" style="position:absolute;width:150px;height:150px;
22 z-index:1;left:0px;top:180px;width:170px;height:158px;left:217px;
23 top:3px;background-color:#FFFF99;layer-background-color:#FFFF99;
24 border:1px none #000000">
25 Robyn&nbsp;Ness<br>
26 62
27 <br>
28 555-555-1234
29 <br>
30 Ein nettes Frauenzimmer<br>
31 <img src="bilder/RobynNess.jpg" width="88" height="105">
32 </div>
33
34 <div id="Groves" style="position:absolute;width:150px;height:150px;
35 z-index:1;left:450px;top:180px;width:170px;height:158px;left:217px;
36 top:3px;background-color:#FFFF99;layer-background-color:#FFFF99;
37 border:1px none #000000">
38 Anne&nbsp;Groves<br>
39 12
40 <br>
41 230-555-1234
42 <br>
43 Typischer ColdFusion-Freak<br>
44 <img src="bilder/AnneGroves.jpg" width="88" height="105">
45 </div>
46
47 <div id="Jeebers" style="position:absolute;width:150px;height:150px;
48 z-index:1;left:70px;top:350px;width:170px;height:158px;left:217px;
49 top:3px;background-color:#FFFF99;layer-background-color:#FFFF99;
50 border:1px none #000000">
51 Paul&nbsp;Jeebers<br>
52 12
53 <br>
54 430-555-4444
55 <br>
56 Ein Ex-Knacki<br>
57 <img src="bilder/PaulJeebers.jpg" width="88" height="105">
58 </div>
59
60 <div id="Dairyfay" style="position:absolute;width:150px;height:150px;
61 z-index:1;left:380px;top:350px;width:170px;height:158px;left:217px;
62 top:3px;background-color:#FFFF99;layer-background-color:#FFFF99;
63 border:1px none #000000">
64 Jack&nbsp;Dairyfay<br>
65 62
66 <br>
67 555-555-7123
68 <br>
69 Ein Mathe-Genie<br>
70 <img src="bilder/JackDairyfay.jpg" width="88" height="105">
71 </div>
72 <br>
73 </body>
74 </html>

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.

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.
  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.

10.8 Fragen und Antworten

Frage:
Muss ich bei der Gestaltung einer Site in der Live Data-Vorschau arbeiten?

Antwort:
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.

Frage:
Welche Attribute können mit dynamischen Daten verknüpft werden?

Antwort:
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.

Frage:
Welche Art von Daten kann ich in einer Datenbank speichern?

Antwort:
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.

Frage:
Was mache ich, wenn sich der von UltraDev erzeugte Code »aufhängt"?

Antwort:
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?
  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.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


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