Multimediakurs Leinfelder: Inhalt / Modul 9: "Client-Server-Interaktion/ 9.3.2d online-Darstellung von Detailergebnissen aus Datenbankabfragen

(© copyright)     Letzte Änderungen:20.03.2011


Modul 9.3.2d: Serverseitige Aspekte von Client-Server-Interaktionen: Darstellung und Editieren von Datenbanksätzen via Web, QueryStrings und DB-generierte on-the-fly-Seiten

Modul 9-Start

9.1: Einleitung und Generelles |
9.2: Web-Email-Feedback | Formulare | Formularverwendung und -aktionen
9.3: Serverkkonfigurierung, plugins und cgis | Datenbanksatzerstellung via Web |
Datenbanksuche via Web |Suchergebnisanzeige im Web | Datensatzeditierung via Web
vorformulierte Datenbankabfragen und db-basierte Webseiten |
Webseiten mit SSI, ASP, JSP, PHP, XML |
9.4: Zusammenfassung

9.3.2c: html-Online-Darstellung einer editierbaren Detailseite zu einer Datenbankabfrage.

Webanzeige | Sourcecode mit Datenbanktags | Vorformulierte Abfragen und on-the-fly-Seiten

Dieses Kapitel schließt direkt an das vorhergehende an, welches Sie deshalb zuvor durcharbeiten sollten

Wir wollen nun noch erläutern, wie wir editierbare Detailergebnisseiten erstellen. Nehmen wir an, wir klicken auf den Link beim ersten gefundenen Datensatz im Beispiel der vorhergehenden Seite.

In der Gästelisteoriginaldatenbank der Paläontologie München ergäbe sich folgendes (wir stellen nur einen Teil der Detailseite dar. Wie Sie sehen, ist die Originaleingabeseite komplexer als in unserem Beispiel - es sind deutlich mehr Datenbankfelder angelegt. Die Namen habe ich aus Datenschutzgründen wieder unkenntlich gemacht.

Hinweis: das Popup-Menu "Hauptbetreuung durch" wird ebenfalls durch eine vernetzte Datenbank generiert. Es erscheinen dort alle im Managementdatenbanksystem der Paläontologie München eingetragene Mitarbeiter. Es müssen also nicht aufwändig alle Mitarbeiter von Hand in der html-Seite voreingetragen werden (siehe untenstehende Erläuterung).

Nachfolgendes Beispiel besteht nur aus einen Screenshot, kann also nicht editiert werden!

Der Code für das entsprechende html-Templat für diese Seite sieht folgendermaßen aus:

Wiederum gebe ich Erläuterungen wie in den Vorbeispielen. Prinzipiell ist die Seite einer Seite zur Neuerstellung eines Datensatzes ähnlich, nur dass nun die Ergebnisse eines vorhandenen Datensatzes zusätzlich als values der Eingabefelder eingelesen werden und beim Abschicken eben kein neuer Datensatz creiert wird, sondern der alte editiert wird (bzw. mit einem Löschknopf auch gelöscht werden kann). Ich markiere deshalb nur entsprechenden CDML-Code. Mit Ihrem Vorwissen sollten Sie den Code nun gut selbst nachvollziehen können. Nur in Rot angegebener Code wird extra erläutert. Schauen Sie sich zumindest die farbigen Bereiche näher an.

<HTML>
<HEAD>
<TITLE>Gaesteliste - Record Detail</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><FORM ACTION="http://www.webservername.de:591/FMPro" METHOD="POST">
<P><INPUT TYPE="hidden" NAME="
-DB" VALUE="Gaesteliste">
<INPUT TYPE="hidden" NAME="
-Lay" VALUE="detail">
<INPUT TYPE="hidden" NAME="
-Format" VALUE="record_detail_reply.htm">
<INPUT TYPE="hidden" NAME="-Error" VALUE="
record_detail_error.htm">

<!-- nachfolgende Marke bedeutet, dass auf das vorherige Suchergebnis bezug genommen werden soll -->

<INPUT TYPE="hidden" NAME="-recid" VALUE="[fmp-currentrecid]"><BR>
</P>

<CENTER><TABLE BORDER=0>
<TR>
<TD ALIGN=center>
<P><IMG SRC="imgs/stpl_bnl.gif" WIDTH=89 HEIGHT=35 ALIGN=bottom></P>
</TD>
<TD ALIGN=center>
<P><FONT SIZE="+3"><B>Details des Aufenthalts</B></FONT></P>
</TD>
</B></FONT><TD ALIGN=center>
<P><IMG SRC="imgs/stpl_bnr.gif" WIDTH=89 HEIGHT=35 ALIGN=bottom></P>
</TD>
</TR>
</TABLE>
<IMG SRC="imgs/stpl_bar.gif" WIDTH=520 HEIGHT=12 ALIGN=bottom></CENTER>

<P><TABLE BORDER=0 WIDTH="100%">
<TR>
<TD WIDTH="33%">
<P ALIGN=right><FONT SIZE="+1"><B>Datenbank-Name:</B></FONT></P>
</TD>
</B></FONT><TD>
<P>Gaesteliste</P>
</TD>
</TR>
</TABLE>
</P>

<CENTER><IMG SRC="imgs/stpl_bar.gif" WIDTH=520 HEIGHT=12 ALIGN=bottom></CENTER>

<P><TABLE BORDER=0 CELLSPACING=4 CELLPADDING=4 WIDTH="100%">
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right><B>Gastdaten</B>:</P>
</TD>
<TD VALIGN=top>
<P></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Anrede:</P>
</TD>
<TD VALIGN=top>
<!-- Nachfolgend der Code für das Popup-Menu-Anrede. Die Popup-Einträge werden aus einer Datenbankliste namens Sex generiert (diese ist in der Datenbank Gästeliste angelegt).-->

<P><SELECT NAME='Anrede' SIZE=1> [FMP-OPTION: Anrede, LIST=sex] </SELECT></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Titel:</P>
</TD>
<TD VALIGN=top>
<P><SELECT NAME="Titel">
<option VALUE="">
[FMP-OPTION: Titel, list=Titel]
</SELECT><BR>
</P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Gastvorname:</P>
</TD>
<TD VALIGN=top>
<!-- nachfolgend das Einlesen des Inhalts des Datenbankfelds Gastvorname in das Textfeld mit gleichnamigem Namen-->

<P><INPUT TYPE=text NAME=Gastvorname VALUE="[FMP-Field: Gastvorname]" SIZE=30></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Gastnachname:</P>
</TD>
<TD VALIGN=top>
<P><INPUT TYPE=text NAME=Gastnachname VALUE="
[FMP-Field: Gastnachname]" SIZE=30></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Heimatinstitution:</P>
</TD>
<TD VALIGN=top>
<P><INPUT TYPE=text NAME=Institution VALUE="
[FMP-Field: Institution]" SIZE=65></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Strasse_Nr:</P>
</TD>
<TD VALIGN=top>
<P><INPUT TYPE=text NAME="Strasse_Nr" VALUE="
[FMP-Field: Strasse_Nr]" SIZE=65></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Postleitzahl:</P>
</TD>
<TD VALIGN=top>
<P><INPUT TYPE=text NAME=Postleitzahl VALUE="
[FMP-Field: Postleitzahl]" SIZE=21></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Ort:</P>
</TD>
<TD VALIGN=top>
<P><INPUT TYPE=text NAME=Ort VALUE="
[FMP-Field: Ort]" SIZE=21></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Land:</P>
</TD>
<TD VALIGN=top>
<P><INPUT TYPE=text NAME=Land VALUE="
[FMP-Field: Land]" SIZE=21></P>
</TD>
</TR>
<TR>
<TD WIDTH="33%">
<P ALIGN=right>Email</P>
</TD>
<TD>
<P><INPUT TYPE=text NAME=Email VALUE="
[FMP-Field: Email]" SIZE=21></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Einladungsart:</P>
</TD>
<TD VALIGN=top>
<P><SELECT NAME='eingeladen' SIZE=1 >
<option value="">
[FMP-OPTION: eingeladen, LIST=eingeladen]</SELECT></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">

<!-- Nachfolgend eine if-Anweisung zur optionalen Darstellung. Falls das Feld eingeladen den Wert nein enthält, soll die Zeile eingeladen durch auf der Webseite nicht dargestellt werden, andernfalls schon. Vergleichbares darunter gleich nochmals, falls nein wird das Feld einladender dargestellt, der Wert dafür wird von der Datenbank abgerufen. Die Liste Einladender ist in der Datenbank Gästeliste definiert, und zwar durch Import aus einer anderen Datenbank (ist in untenstehendem Code nicht zu sehen). -->

<P ALIGN=right>[FMP-IF: eingeladen.cn.nein]
[FMP-ELSE]
<P ALIGN=right>Eingeladen durch:
[/FMP-IF]</P>
</TD>
<TD VALIGN=top>
<P>[FMP-IF: eingeladen.cn.nein]
[FMP-ELSE]
<SELECT NAME='einladender' SIZE=1 > [FMP-OPTION: einladender, LIST=einladender] </SELECT>
[/FMP-IF]</P>
</TD>
</TR>
<TR>
<TD WIDTH="33%">
<P ALIGN=right>Gast folgender Institution am PalMuc</P>
</TD>
<TD>
<!-- nachfolgend ein etwas komplexer Code, um die Werte für Checkbox (Markierfelder) einzulesen und ändern zu können. Auf nähere Erläuterung verzichte ich hier. Nur soviel: der Code ist deshalb so kompliziert, da ja Mehrfacheintrag möglich sein muss.-->

<P>[FMP-VALUELIST: palmucinst, LIST=palmucinst]
<INPUT TYPE="checkbox" NAME="palmucinst" VALUE=
"[FMP-ValueListItem]"[FMP-ValueListChecked]>[FMP-VALUELISTITEM: Always, HTML]
[/FMP-VALUELIST]</P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Hauptbetreuung am Palmuc durch:</P>

<P></P>
</TD>
<TD VALIGN=top>
<P><SELECT NAME="Gast_von">
<option value="">
[FMP-OPTION: Gast_von, LIST=einladender] </SELECT><BR>
</P>
</TD>
</TR>
<TR>
<TD WIDTH="33%">
<P ALIGN=right>Anlass des Gastaufenthaltes:</P>
</TD>
<TD>
<P><INPUT TYPE=text NAME=Grund VALUE="
[FMP-Field: Grund]" SIZE=66></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>ggf. sonstiges:</P>

<P></P>
</TD>
<TD VALIGN=top>
<P><TEXTAREA NAME=sonstiges ROWS=4 COLS=63 WRAP=virtual>
[FMP-Field: sonstiges]</TEXTAREA></P>

<P></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Ankunftstag:</P>

<P></P>
</TD>
<TD VALIGN=top>
<P><INPUT TYPE=text NAME=Ankunftstag VALUE="
[FMP-Field: Ankunftstag]" SIZE=30></P>

<P></P>
</TD>
</TR>
<TR>
<TD VALIGN=top WIDTH="33%">
<P ALIGN=right>Abreisetag:</P>

<P></P>
</TD>
<TD VALIGN=top>
<P><INPUT TYPE=text NAME=Abreisetag VALUE="
[FMP-Field: Abreisetag]" SIZE=30></P>

<P></P>
</TD>
</TR>
</TABLE>
</P>

<CENTER><IMG SRC="imgs/stpl_bar.gif" WIDTH=520 HEIGHT=12 ALIGN=bottom><BR>

<!-- nachfolgend noch die jeweiligen CDML-Anweisungen fürs Editieren und fürs Löschen des Datensatzes.-->

<INPUT TYPE="Submit" NAME="-Delete" VALUE="Eintrag l&ouml;schen"><SPACER TYPE=horizontal SIZE=15><INPUT TYPE="submit" NAME="-Edit" VALUE="&Auml;nderungen &uuml;bernehmen">
<SPACER TYPE=horizontal SIZE=15> <INPUT TYPE=reset VALUE="Zur&uuml;cksetzen"></CENTER>

<P>Press the <B>Back</B> button in your browser.
</FORM></P>

<P></P>
</BODY>
</HTML>


Herzlichen Glückwunsch, Sie sind durch! Nun haben Sie doch Bekanntschaft mit fast allen wichtigen CDML-Tags gemacht. Wenn Sie sich bei http://www.filemaker.com eine Testversion von FilemakerPro holen, können Sie ja mal selbst experimentieren.

Readonly-Seiten:

Wenn wir übrigens eine read-only-Dateiseite gemacht hätten, wäre es viel einfacher gewesen. Die Hidden-Befehle oben wären gleich geblieben, ansonsten hätten Sie einfach immer den Platzhalter [FMP-Field: Feldname] in den html-Code geschrieben (also ohne Verwendung von Formularen), z.B. in folgender Weise:

<p> Vorname: [FMP-Field: gastvorname] </p>

usw. Alternativ können Sie (immer unter Angabe der hidden-Felder, da ansonsten Filemaker nicht weiß, um welche Datenbank es sich handelt) beliebige Seiten mit Elementen aus der Datenbank bauen können, z.B.

<p>Vom [FMP-Field: Ankunftstag]bis [FMP-Field: Abreisetag]besuchte uns [FMP-Field: Anrede] [FMP-Field: Titel][FMP-Field: gastvorname][FMP-Field: gastnachname]am Museum ....</p>

Dies ergäbe etwa einen Satz wie:
Vom 1.12.2001 bis 22.2.2002 besuchte uns Herr Prof. Dr. Hans Müller am Museum ...

Nun wissen Sie, wie wir z.B. die Webseiten unserer Mitarbeiter gestalten. Es können auch Bilder, die sich in der Datenbank befinden, mit auf die Webseiten eingelesen werden.


Vordefinierte Suchabfragen bzw. Aufruf von on-the-fly generierten Webseiten.

Anstatt den Benutzer erst Angaben in Formulare machen zu lassen und ihm dann ein gewünschtes Ergebnis zu liefern, können datenbankgenerierte Seiten auch durch Klick auf einen Link generiert werden. Dieser Link beinhaltet einen sog. Query-String

So können zum Beispiel die Ergebnislisten von Suchabfragen direkt dargestellt werden.

Beispiel 1: Alle Institutseinträge in der Geobio-Datenbank auf einen Klick

alle in der Geobiolink-Datenbank eingetragene Institute:

Der Code sieht folgendermaßen aus:

<a href="http://141.84.51.67/geolinksdbwww/FMPro?-db=geobiolinkbase&-format=such_ergebnisse.htm&-lay=Detail&-sortfield=sitetitle&-sortorder=ascend&-op=eq&category=Institutes&-max=20&-reciid=10&-find=Start+Search" target="extra">Institute</a>

Der Code ist eigentlich zumindest nachvollziehbar: im Ordner geolinksdbwww des angegebenen Servers soll eine Seite such_ergebnisse.htm aufgerufen werden, die via FMPro generiert ist. Dazu soll auf die Filemakerdatenbank Geobiolinkbase zugegriffen werden, das Layout Detail dort aufgerufen werden. Im Feld mit Namen category soll nach dem Begriff Institutes gesucht werden, dies soll identisch sein (eq). Max sollen 20 Einträge auf der Seite such_ergebnisse angezeigt werden, diese sollen nach dem Feld mit Namen sitetitle sortiert sein. Das Ganze soll dann noch im Fenster extra angezeigt werden.

Beispiel 2: Alle Riffeinträge in der Geobiodatenbank auf einen Klick

Diese Riffeinträge finden Sie hier.

Code dazu (nur URL). Vgl. Sie mit oben, das PRinzip ist gleich.

http://141.84.51.67/geolinksdbwww/FMPro?-db=geobiolinkbase&-format=such_ergebnisse.htm&-lay=Detail&-sortfield=sitetitle&-sortorder=ascend&-op=cn&category=Reefs&-max=20&-reciid=10&-find=Start+Search

Beispiel 3: die Literaturliste des Kursleiters auf einen Klick

Die datenbankgenerierte Seite der Publikationen des Kursleiters kann z.B. durch folgenden Link direkt aufgerufen werden: Leinfelders Literaturliste.

Der Code hierzu sieht folgendermaßen aus:

http://141.84.51.67/palmucmanag/literaturemuc/FMPro?-db=LiteraturMuc&-format=search_results.htm&-lay=Eingabe&-sortfield=Autoren&-sortorder=ascend&-sortfield=Jahr&sortorder=ascend&-op=eq&Autoren=Leinfelder&-find=Start+Search

HIer wurde nun auch noch eine Error-Seite angegeben für den Fall, dass etwas nicht funktioniert.

Beispiel 4: Die Literaturliste des Kursleiters zum Arbeitsbereich Iberien auf einen Klick

HIer wird nun sowohl nach Leinfelder als auch nach Iberien abgefragt. Die Abfrage könnte noch verkompliziert werden

http://141.84.51.67/palmucmanag/literaturemuc/FMPro?-db=LiteraturMuc&-format=search_results.htm&-lay=Eingabe&-sortfield=Autoren&-sortorder=ascend&-sortfield=Jahr&sortorder=ascend&-op=eq&Autoren=Leinfelder&-op=cn&Arbeitsregion=Iberia&-lop=and&-find=Start+Search

Beispiel 4: Abfrage für andere Autoren

Die oben abgefragte Literaturdatenbank listet Zitate für alle WissenschaftlerINNEN der Paläontologie München auf (zumindest ab 2000). Deshalb kann sie auch nach anderen Autoren abgefragt werden. Nachfolgend ein Beispiel für Schmid. Da Schmid und Leinfelder häufig Coautoren sind, entfallen Mehrfacheinträge.

http://141.84.51.67/palmucmanag/literaturemuc/FMPro?-db=LiteraturMuc&-format=search_results.htm&-lay=Eingabe&-sortfield=Autoren&-sortorder=ascend&-sortfield=Jahr&sortorder=ascend&-op=eq&Autoren=Schmid&-find=Start+Search

Beispiel 5: Direktes Aufrufen einer datenbankgenerierten Detailseite:

Aber Sie können nicht nur Suchergebniss-Listen aufrufen, sondern auch gleich auf eine datenbankgenerierte Detailseite zugreifen.

Hier die aus relationalen Datenbanken zusammengestellte, on-the-fly generierte Webseite des Kursleiters (entsprechend für alle anderen MitarbeiterINNEN der Paläontologie München).

http://141.84.51.67/palmucmanag/website/FMPro?-db=webpage&-format=record_detail.htm&-lay=webpage&-op=cn&name=Leinfelder&-find=Start+Search

vergleichbar hier für Dr. Schmid

http://141.84.51.67/palmucmanag/website/FMPro?-db=webpage&-format=record_detail.htm&-lay=webpage&-op=cn&name=Schmid&-find=Start+Search

http://141.84.51.10:591/palmucmanag/website/FMPro?-DB=webpage&-Lay=webpage&-format=record_detail.htm&-error=search_error.htm&sortfield=Jahr?-sortorder=ascend&-sortfield=name&-sortorder=ascend&-op=cn&name=Schmid&-Find=Start+Search

Tipp: wenn Sie Schwierigkeiten haben, derartigen get-code von Hand zu erstellen, ändern Sie Ihre Datenbankabfragen von der Methode post vorübergehend nach get. Beim Aufruf einer Suchabfrage aus der Formularsuchseite heraus sehen Sie dann den Aufruf im get -Format. Sie können diesen aus der Adressleiste des Browsers kopieren und weiterverwenden. Setzen Sie aber danach Ihre Versandmethode wieder auf post.

HINWEIS: die obigen on-the-fly generierten Seiten sind wegen Rekonfigurierung der Webseiten der Paläontologie München nicht mehr verfügbar.


Damit haben wir genügend Datenbankanbinderei geübt. Nochmals sei erwähnt, dass diese Art der Web-Anbindung nur für Filemaker-Datenbanken funktioniert. Für die Klassiker der Anbindungssprachen ODBC und SQL ergeben sich Unterschiede, das Prinzip ist jedoch ähnlich (aber leider sind die Sprachen deutlich komplexer). FileMaker versteht auch ODBC (sowie in der nächsten Version SQL).

Zunehmend werden Datenbanken aber mit speziellen serverseitigen Skriptsprachen abgefragt, die neben der Anbindung von Datenbanken noch weiteres können. Hier sind insbesondere asp und php zu nennen. Wir werden im nachfolgenden Ausblick ganz kurz darauf eingehen, aber das Prinzip von serverseitigen Skriptsprachen an der viel einfacheren SSI-Syntax erklären (SSI kann allerdings keine Datenbanken abfragen). Darüberhinaus gewinnt XML zunehmend an Bedeutung, es ist eine sog. Formatauszeichnungssprache, mit der man ebenfalls Datenbanken anbinden kann. Auch hierzu ein paar Kurzerläuterungen im nachfolgenden Ausblick.

Nächste Seite: Client-Server-Interaktion: Ausblick


>> Modul 9.3.3: Ausblick: serverseitige Skriptsprachen zur Datenbankabfrage und sonstigem

<< Modul 9.3.2c: DB-Suchergebnisse via Web