3 Die WHTML-Tags mit Beispielen

3.1 Dateien einbinden mit <WDINCLUDE>
3.2 Datenbanktabellen abfragen mit <WDQUERY>
3.3 Datenbanktabellen aktualisieren mit <WDUPDATE>
3.4 Code-Beispiele

3.1 <WDINCLUDE>

Das Tag <WDINCLUDE> ermöglicht das Einbinden einer externen HTML-Datei. Es muss der komplette Pfad dieser einzufügenden Datei angegeben werden. Diese Technik eignet sich besonders für das Einbinden von Seitenköpfen bzw. Seitenfüßen. Es kann ein Seitenkopf als Vorlage erstellt werden, der dann in jeder WHTML-Seite des Projektes mittels <WDINCLUDE> eingefügt werden kann.

3.2 <WDQUERY>

Mit <WDQUERY> werden SQL-Abfragen an den Datenbankserver gesendet. Die Antwort der Datenbank wird direkt an der Stelle in die WHTML-Seite geschrieben, an der auch das <WDUQUERY> Tag steht. Wenn etwas bei der Datenbankabfrage nicht funktioniert hat, so wird an dieser Stelle eine Fehlermeldung ausgegeben. Falls das SQL-Statement keinen Wert zurückgibt, wird z.B. folgende Fehlermeldung ausgegeben: ERROR:java.sql.SQL Exception: no results returned.

3.3 <WDUPDATE>

<WDUPDATE> wird benutzt, um UPDATE-Kommandos an den Datenbankserver zu senden. Im Gegensatz zu <WDQUERY> liefert <WDUPDATE> keine Werte zurück. Für viele SQL-Statements ist dies auch so gewünscht.

Die beiden Tags <WDQUERY> und <WDUPDATE> sind sehr mächtig. Mit ihnen ist es möglich, komplexe Anwenderschnittstellen zur Datenbank zu entwerfen. Hierbei können die Möglichkeiten von HTML (Formulare, Tabellen ect.) voll ausgenutzt werden. So kann einem Anwender eine Form der Abfragenerstellung ermöglicht werden, die keiner SQL-Kenntnisse bedarf.

3.4 Code-Beispiele

Im folgenden möchten wir einige Beispiele zu den oben genannten WHTML-Tags geben.

WDINCLUDE

Wir erstellen zunächst eine WHTML-Datei, die wir kopf.whtml nennen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine tolle WHTML-Seite</title>
</head>
<body>
<p align="center">Dies ist der Kopf meiner Seite</p>

Nun erstellen wir noch eine WHTML-Datei: fuss.whtml:

<hr>
<p align="center">Dies ist der Fuß meiner Seite</p>
</body>
</html>

Jetzt kommt noch die Beispieldatei, die wir bsp.whtml nennen:

<WDINCLUDE>/test/kopf.whtml</WDINCLUDE>
Dies ist der Rumpf meiner WHTML Seite :-)
<WDINLCUDE>/test/fuss.whtml</WDINCLUDE>

Wenn die Seite bsp.whtml (über den Friesen) mit dem Browser aufgerufen wird, hat diese folgenden Aufbau:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine tolle WHTML-Seite</title>
</head>
<body>
<p align="center">Dies ist der Kopf meiner Seite</p>
<WDINCLUDE>/test/kopf.whtml</WDINCLUDE>
  Dies ist der Rumpf meiner WHTML Seite :-)
<WDINLCUDE>/test/fuss.whtml</WDINCLUDE>
<hr>
<p align="center">Dies ist der Fuß meiner Seite</p>
</body>
</html>

WDQUERY

Eine einfache Datenbankabfrage:

In diesem Beispiel möchten wir eine WHTML-Seite erstellen, die es ermöglicht, Daten aus einer Datenbanktabelle zu lesen und diese dann in Form einer HTML-Tabelle auszugeben.
Nehmen wir an, dass in der Datenbank folgende Tabelle existiert:

Name der Tabelle: books

ISBN Title Author
0123456789 L.AConfidential James Ellroy
0321654987 Post Office Charles Bukowski
0987654321 The Man with the golden Arm Nelson Algren

Nun bauen wir uns eine WHTML-Seite, die diese Tabelle ausliest:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Datenbankabfrage</title>
</head>
<body>
  <table border="1">
    <tr>
    <th>ISBN</th><th>Titel</th><th>Author</th></tr>
    <WDQUERY>
      select '<tr><td>', isbn, '</td><td>', title, '</td><td>',
      author, '</td></tr>' from books
    </WDQUERY>
  </table>
</body></html>

Wenn wir diese WHTML-Seite nun mit einem Browser über den Friesen aufrufen, erstellt der Friese eine Tabelle, wie sie oben zu sehen ist.

Jetzt möchten wir dieses Beispiel noch ein wenig ausbauen, indem wir eine neue WHTML-Seite erstellen. Diese neue Seite dient dazu, einen Datensatz zu der bestehenden Tabelle hinzuzufügen. Der Benutzer gibt die Daten in einem Formular ein, submittet es und die aufgerufene WHTML-Seite fügt dann ein neuen Datensatz hinzu.

Wir benötigen also als erstes eine HTML-Seite mit einem Formular und einem Submit-Knopf, der eine weitere (die eigentliche) WHTML Seite aufruft:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Datenbankabfrage</title>
</head>
<body>
<form action="/test/seite2.whtml">
  <table border="1">
    <tr>
    <td>ISBN</td><td><input name="isbn" size="30"></td></tr>
    <tr>
    <td>Titel</td><td><input name="title" size="30"></td></tr>
    <tr>
    <td>Author</td><td><input name="author" size="30"></td></tr>
    <tr>
    <td colspan="2"><input type="submit"></td></tr>
  </table>
</form>
</body>
</html>

Im FORM-Tag der obigen Seite wird nun die folgende Seite aufgerufen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert-Anweisung</title>
</head>
<body>
<WDQUERY>
  insert into books values ('[$isbn$]','[$title$]','[$author$]');
</WDQUERY>
</body></html>

Wenn Sie diese Seiten aufrufen, werden Sie wahrscheinlich diese oder eine ähnliche Fehlermeldung bekommen:

ERROR:java.sql.SQLException: no results returned Fehler bei der Datenbankabfrage! Bitte überprüfen Sie Ihre Eingaben.

Da die Abfrage keine Werte zurückgibt, tritt ein Fehler auf. Die Abfrage wird jedoch trotzdem ausgeführt, es werden nur keine Werte zurückgegeben. Für Abfragen (wie z.B. insert) gibt es ein eigenes Tag: WDUPDATE Tauschen sie also einfach <WDQUERY> gegen das <WDUPDATE>-Tag aus.

WDUPDATE

In einem Datenbanksystem müssen existierende Daten geändert werden können. Wir wollen in diesem Beispiel eine Anwenderschnittstelle entwerfen, die alle Datensätze einer Tabelle anzeigt. Die einzelnen Datensätze können dann ausgewählt und geändert oder gelöscht werden.

Unsere erste Seite, die wir list.whtml nennen, listet alle Datensätze einer Tabelle auf (in unserem Beispiel die Datensätze der Tabelle books). Zusätzlich erhält jeder Datensatz einen Button, mit dem das Ändern bzw. Löschen von Datensätzen veranlasst wird.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bearbeiten 1</title>
</head>
<body>
<table border="1">
  <tr>
  <th>Ändern</th><th>ISBN</th><th>Title</th><th>Author</th></tr>
  <WDQUERY>
    select '<tr><form action="/test/edit.whtml">
    <td><input name="oid" type="submit" value="',oid,'">
    </td></form>',
    '<td>', isbn, '</td>',
    '<td>', title, '</td>',
    '<td>', author, '</td></tr>' from books
  </WDQUERY>
</table>
</body>
</html>

Es folgt die Seite edit.whtml, die es dem Anwender erlaubt, einzelne Felder des Datensatzes zu ändern oder zu löschen.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bearbeiten 2</title>
</head>
<body>
<!-
<WDQUERY>
  select isbn, title, author from books where oid=[$oid$]
</WDQUERY>
-->
<form action="/test/edsave.whtml">
  <table border="1">
    <tr>
    <td>ISBN</td><td><input name="isbn" value=[$isbn$]></td></tr>
    <tr>
    <td>Title</td><td><input name="title" value=[$title$]></td></tr>
    <tr>
    <td>Author</td><td><input name="author" value=[$author$]></td></tr>
  </table>
<input type="hidden" name="oid" value=[$oid$]>
<input type="submit" value="Speichern">
</form>
<a href="/test/del.whtml?oid=[$oid$]">Löschen</a>
</body>
</html>

Durch die WDQUERY-Anweisung kennt der Friese die Variablen [$isbn$] [$title$] und [$author$]. Die Variable [$oid$] wurde von der vorherigen Seite list.whtml übergeben (das URL-Feld des Browsers sieht z.B. so aus: www.der-friese.de/test/edit.whtml?oid=54945).

Nun kann man die Seite list.whtml im Browser aufrufen. Von dort aus kann man sich einen Datensatz aussuchen (über die jeweiligen Submit-Buttons), den man ändern oder löschen möchte. Dadurch wird die Seite edit.whtml aufgerufen. Hier kann der Anwender nun die einzelnen Felder des Datensatzes ändern und mit einem Klick auf den Button "Speichern" die Änderungen abspeichern.

Es wird die Seite edsave.whtml geladen:

<html>
<head>
<meta http-equiv=refresh content="0;url=/test/list.whtml">
</head>
<body>
<WDUPDATE>
  update books set
  isbn='[$isbn$]', title='[$title$]', author='[$author$]'
  where oid=[$oid$]
</WDUPDATE>
</body>
</html>

An dieser Stelle benutzen wir nun zum ersten Mal WDUPDATE. Die Variablen [$isbn$] [$title$] [$author$] und [$oid$] werden von dem Formular der vorherigen Seite übergeben.

Das Meta-Tag im head der Seite dient dazu, dass die Seite direkt nach dem Aufruf eine andere Seite lädt: list.whtml. Dies deshalb, da es ja keine Information für den Benutzer auf der aktuellen Seite gibt.

Zurück zu der Seite edit.whtml: An dieser Stelle ist es ebenso möglich, den aktuellen Datensatz zu löschen. Hier der Quelltext von del.whtml:

<html>
<body>
<WDUPDATE>
  delete from books where oid=[$oid$]
</WDUPDATE>
</body>
</html>