vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 11

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:

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.

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

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 Datenbank- Backend 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 <FONT>-Tag die Größe von <INPUT>-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.

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 <FORM>-Tag vor das öffnende <FORM>-Tag, das schließende </FORM>-Tag hinter das schließende </TABLE>-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 <html>
2 <head>
3 <title>Eingabe-Formular</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5 </head>
6
7 <body bgcolor="#FFFFFF">
8 <p>Neue Mitarbeiterdaten eingeben</p>
9 <form method="post" action="" name="dateneingabe">
10 <table width="100%" border="1" cellspacing="0" cellpadding="2">
11 <tr>
12 <td width="20%">Vorname</td>
13 <td width="80%>&nbsp;</td>
14 </tr>
15 <tr>
16 <td width="20%">Nachname</td>
17 <td width="80%">&nbsp;</td>
18 </tr>
19 <tr>
20 <td width="20%">Alter</td>
21 <td width="80%">&nbsp;</td>
22 </tr>
23 <tr>
24 <td width="20">Telephon</td>
25 <td width="80%">&nbsp;</td>
26 </tr>
27 <tr>
28 <td width="20%">Beschreibung</td>
29 <td width="80%">&nbsp;<td>
30 </tr>
31 <tr>
32 <td width="20%">Bild-URL</td>
33 <td width="80%">&nbsp;</td>
34 </tr>
35 </table>
36</form>
37</body>
38</html>

Listing 11.1: Ein einfaches HTML-Eingabeformular

Abbildung 11.2:  Fügen Sie auf der linken Seite der Tabellen Zeilenköpfe ein.

Achten Sie darauf, dass die <FORM>-Tags die <TABLE>-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 <FORM>-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).

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.

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:

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:

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.

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.

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.

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.

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 Grafik- Schaltflä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. Grafik- Schaltflä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 Submit- Schaltflä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 Feed- back 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 JavaScript- Befehle, 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 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 Reset- Schaltflä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:

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:

  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:

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.

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.

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:

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'

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 Variablen des 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:

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.

Abbildung 11.10:  Die erweiterte Abfrage bietet mehr Möglichkeiten, ist jedoch aufwändiger zu konfigurieren.

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.

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.

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:

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

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:

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

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:

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.

    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

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.

Abbildung 11.18:  Auch über den Eigenschafteninspektor lassen sich die Attribute eines Objekts dynamisch an eine Datenbank anbinden.

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.

11.6 Fertige Musterseiten verwenden

In den beiden vergangenen Tagen haben wir Übersichtsseiten, Detailseiten sowie Einfüge- und 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.

Ö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 Live-Objekte 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.

Abbildung 11.20:  Konfigurieren des Dialogfensters Master-Detailseitensatz einfügen mit den erforderlichen Angaben.

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.

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 > Live-Objekte. Es wird das in Abb. 11.22 gezeigte Dialogfenster geöffnet.

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:

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.

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.

In der Konfiguration gibt es ein paar kleinere Unterschiede, die nachfolgend besprochen werden:

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.

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

Frage:
Kann ich anstelle eines Senden-Buttons auch einen Textlink verwenden, um ein Formular zu übertragen?

Antwort:
Ja, das geht. Verwenden Sie hierzu folgenden JavaScript-Befehl: javascript:document.forms[<meinformularindex>].submit(). Damit wird der Senden-Button überflüssig.

Frage:
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?

Antwort:
Sie haben das <FORM>-Tag nicht gesetzt. Wenn es fehlt, stellen die meisten Browser gar nichts dar.

Frage:
Warum kann UltraDev nicht mit zusammengesetzten Primärschlüsseln umgehen?

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

Frage:
Wann werden wir die übrigen Formularelemente an eine Datenbank anbinden?

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



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


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