Datenbanken mittels JavaScript nutzen

SELFHTML aktuell Artikel JavaScript
	Datenbanken mittels JavaScript nutzen
	Dr. Martin Hug Zusammenfassung Das Problem Die Lösung Vorgehensweise Schlussbemerkung

Dr. Martin Hug

E-Mail:	hug@sinnergie.de
Homepage-URL:	http://www.sinnergie.de/

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

Oftmals wäre es wünschenswert, mittels Javascript auf Datenbank-Daten zugreifen zu können. Da Javascript jedoch keine Möglichkeit bietet, lesend auf Dateien oder Datenbanken zuzugreifen, gibt es scheinbar keine Möglichkeit, grössere Datenmengen in dieser Skriptsprache strukturiert zur Verfügung zu stellen.

Wie es dennoch funktioniert, zeigt dieser Artikel.

Das Problem

Oft wäre es wünschenswert auf Daten einer Datenbank mittels Javascript zugreifen zu können.

So sind zum Beispiel Anwendungen denkbar in denen aufgrund von 'Mouse-Effekten' (beim Überfahren mit der Maus oder beim Anklicken) verschiedene Grafiken oder Texte eingeblendet werden. Diese Grafiken und Texte ließen sich mit Hilfe einer Datenbank zentral speichern und problemlos abrufen.

Solche Anwendungen sind mit Hilfe von Skriptsprachen wie z.B. PERL oder PHP allein nicht zu realisieren.
Bei jeder Änderung eines Objektes auf dem Bildschirm muss bei 'klassischen' Skriptsprachen zunächst ein Prozess auf dem Server gestartet werden, der die Änderungen die sich zuvor im Client-Browser ergaben, verarbeitet. Anschließend wird ein HTML-Dokument erzeugt und an den Browser zurückgesandt. Direkte, schnelle Reaktionen innerhalb des Browsers sind daher mit PHP oder PERL nicht machbar.

Javascript hingegen läuft ausschließlich auf dem Rechner des Clients ab. Bilder z.B. können aufgrund von Benutzereingaben sehr schnell geändert, vergrössert oder verschoben werden. Man hat Zugriff auf alle Objekte die sich im aktuellen HTML-Dokument befinden. Die Kehrseite der Medaille ist jedoch, dass Javascript keine Verbindung zum Server herstellen kann. Ein Zugriff auf Datenbanken (die ja auf dem Server liegen) ist somit nicht möglich.

Oft befindet sich der Programmierer daher in einem Dilemma: Die erwünschte, schnelle Kommunikation mit dem User kann nur mit Javascript realisiert werden, Datenbanken als Quelle scheiden dann jedoch aus.

Es ist dennoch möglich, Datenbanken einzusetzen, und die darin enthaltenen Daten in Javascript zu nutzen. Lediglich ein kleiner Umweg ist dabei zu gehen.

Die Lösung

Mittels einer serverseitig arbeitenden Skriptsprache wie zum Beispiel PHP oder PERL wird auf die Datenbank zugegriffen und anhand der darin enthaltenen Information Javascript-Code erzeugt. Dieser steuert den Browser des Users.

Das prinzipielle Vorgehen soll im folgenden kurz dargestellt werden:

Zunächst wird die Datenbank entsprechend der jeweiligen Bedürfnisse erstellt.
Nun wird mittels PHP oder PERL ein Datenbankzugriff programmiert. Auf die genaue Syntax von Datenbank-Anbindung und -Abfrage soll an dieser Stelle nicht weiter eingegangen werden.
Wir gehen im folgenden davon aus, dass die Daten in der jeweils verwendeten Skriptsprache nun in Form von Variablen zur Verfügung stehen.
Nun kommt der entscheidende Schritt: Wir generieren anhand der PHP / PERL-Variablen den Javascript-Code. Um die Struktur der 'echten' Datenbank in Javascript nachzuvollziehen, verwenden wir mehrdimensionale Javascript-Arrays, welche sich mit relativ einfachen Mitteln erzeugen und nutzen lassen. Wie man dabei im einzelnen vorgeht wird weiter unten im Kapitel Vorgehensweise beschrieben.
Steht uns ein mehrdimensionales Array mit allen Daten der Datenbank zur Verfügung, ist es ein leichtes, systematisch mittels Schleifen (if, while...) Daten aus diesem Array abzurufen und zu nutzen.

Vorgehensweise

In diesem Kapitel wird erläutert, wie man ein mehrdimensionales Javascript-Array aus den Daten einer Datenbank erstellt und anschliessend als Quelle nutzt. Als bekannt wird dabei vorausgesetzt:

Wie man eine Datenbank programmiert,
Wie man mittels PERL bzw. PHP darauf zugreift und Daten extrahiert.

Als Ausgangspunkt für weitere Informationenen zu diesen vorausgesetzten Gebieten können Sie das SELFHTML-Linkverzeichnis verwenden:
Link-Verzeichnis: Datenbankanbindung
Link-Verzeichnis: CGI und Perl
Link-Verzeichnis: PHP

a) Javascript-Dateien/Code erzeugen

Um Javascript in einem HTML-Dokument nutzen zu können gibt es prinzipiell zwei Möglichkeiten:

Entweder: man schreibt die Befehle innerhalb von <script>...</script> - Tags in den Kopf (Head) einer Datei.

Javascript im Head der Datei:

<script language="JavaScript" type="text/javascript">
<!-- Javascript-Anweisungen -->
</script>

Wir können diese Möglichkeit dazu nutzen, dynamisch erzeugten Javascript-Code serverseitig direkt an diese Stelle zu schreiben. Dazu müssen wir lediglich das HTML-Dokument ebenfalls dynamisch erzeugen, was - zumindest mit PHP - kein Problem darstellt.
Der Vorteil dieser Methode liegt darin, dass bei jedem Aufruf der HTML-Datei erneut auf die Datenbank zugegriffen wird und somit die Javascript-Daten stets aktuell sind.

Oder: man bindet eine externe Datei (*.js) im Head ein.

Javascript in externer Datei:

<script language="JavaScript" type="text/javascript" src="datenbank.js"></script>

Wählen wir diese Methode, so sieht die Vorgehensweise etwas anders aus:
Bei jeder Änderung der Datenbank (aber nur dann!) müssen wir lokal (d.h. 'daheim' auf der Festplatte) oder auf dem Server eine neue Kopie unserer Datenbank-Datei (z.B. datenbank.js) erzeugen und diese auf dem Server ablegen. Das HTML-Dokument greift nun auf dieses Dokument zu. Diese Methode empfiehlt sich wenn die Daten der Datenbank nur selten geändert werden. Der Vorteil liegt darin, dass sich diese Datei lokal (und somit z.B. aus einer Access-DB) erzeugen lässt.

Wenig Sinn hingegen macht es, diese *.js-Datei dynamisch bei jedem Zugriff neu zu erzeugen. Der nächste User der unser HTML-Dokument anfordert, würde die alte Datei überschreiben.

b) Daten aus PHP / PERL nach Javascript 'exportieren'

Alle Javascript-Befehle, die unsere spätere *.js-Datei benötigt müssen von PHP / PERL in diese Datei (oder im Falle der direkten Einbindung in das HTML-Dokument) geschrieben werden.
Zu diesem Zweck erzeugen wir in PHP / PERL eine string-Variable, mit dem Namen $code (im Folgenden wird PHP-Syntax verwendet):

$code= "function datenbank_erzeugen() { for ... usw."} // Eine Javascript Funktion

In der Variable $code wird nun genau der Text gespeichert, der später als Javascript-Code interpretiert werden soll. Dabei wird diese Variable mit immer mehr Text gefüllt (sozusagen 'fortgeschrieben'), der einfach an das Ende des bereits vorhandene Textes angehängt wird. Auf diese Weise ist es möglich, zunächst alle später benötigten Javascript-Funktionen zu schreiben. Dazu ist noch keine Datenbank nötig.

In einem zweiten Schritt werden aus der Datenbank die Javascript-Funktionsaufrufe samt der Argumente erzeugt. Diese werden ans Ende des Textes geschrieben.

Hier folgt eine schematische Darstellung der Vorgehensweise.

Javascript-Code, der als "string" in PHP erzeugt wurde:

// Dieser Teil ist noch ohne Datenbank zu erzeugen

var zaehler=0;
haus = new Array();          // Array initialisieren
function datenbank_erzeugen(objekt, hoehe, bauzeit, preis, standort )  // Eine Javascript-Funktion
{
 haus[zaehler]= new Array(3);
 haus[zaehler][0]=objekt;
 haus[zaehler][1]=hoehe;
 haus[zaehler][2]=bauzeit;
 haus[zaehler][3]=preis;
 haus[zaehler][4]=standort;
zaehler++;
}

//  Funktionsaufrufe, diese werden anhand der Datenbank generiert

datenbank_erzeugen('Hochhaus', '150 m', '3,5 Jahre', '5,7 Mio DM', 'Frankfurt')
datenbank_erzeugen('Wohnhaus', '17 m', '1,2 Jahre', '1,7 Mio DM', 'Berlin')

Erläuterung:

Der erste Teil des Codes stellt Variablendefinitionen und eine Funktion (datenbank_erzeugen()) dar. Die Funktion erwartet eine Reihe von Parametern und erstellt anhand dieser Parameter eine zweidimensionales Array (haus). Zur Unterscheidung der Arrays bei mehrmaligem Aufruf läuft eine Zählvariable (zaehler) mit die bei jedem Aufruf erhöht wird. Dieser Code kann von PHP ohne Änderungen in das Dokument geschrieben werden.

Der interessantere Teil folgt nun: Die Funktion wird zweimal aufgerufen und übergibt verschiedene Argumente (Hochhaus, 150 m....).
Auf diese Weise wird ein zweidimensionales Array erzeugt (haus[0][0-4]).

So ist zum Beispiel in dem Element haus[0][0] der Name 'Hochhaus' gespeichert, in der Variablen haus[0][3] der Preis des Hauses (5,7 Millionen DM). Es ist leicht ersichtlich, dass man nun z.B. in Schleifen leicht den Namen (oder eine ID) eines Bildes abfragen kann. Ist dieser gefunden, kann man sehr einfach seinen Preis angeben. Der Fantasie sind dabei keine Grenzen gesetzt.

Eine Besonderheit soll dabei noch erwähnt werden: Javascript kennt Funktionsaufrufe mit variabler Anzahl von Argumenten. Konzipiert man nun die Javscript-Funktion so, dass sie eine variable Anzahl an Argumenten erwartet, lässt sich später die Datenbank um weitere Spalten ergänzen, ohne dass es zu Fehlern kommt. Die Anzahl der übergebenen Argumente findet sich dabei in der Variablen datenbank_erzeugen.arguments.length. Sie lässt sich in Schleifen verwenden.

Wie erhalten wir nun aber den für das gelungene Erzeugen des Arrays so wichtigen Funktionsaufruf
(datenbank_erzeugen('Hochhaus', '150 m', '3,5 Jahre', '5,7 Mio DM','Frankfurt'))?

Angenommen unsere Datenbanktabelle 'Haus' hat den folgenden Aufbau:

ID	Name	Höhe [m]	Bauzeit [J]	Preis [Mio DM]	Standort
`1`	`Hochhaus`	`150`	`3,5`	`5,7`	`Frankfurt`
`1`	`Wohnhaus`	`17`	`1,2`	`1,7`	`Berlin`

Dann sieht unser Vorgehen folgendermassen aus:

Abfragen einer Zeile der Datenbank.
Erzeugen eines Arrays (z.B. $hausdaten) aus der Datenbank-Zeile (in PHP z.B über mysql_fetch_array oder odbc_fetch_into möglich)
Erzeugen bzw. Fortschreiben unserer String-Variable:
$code .="datenbank_erzeugen('$hausdaten[0]',$hausdaten[1],$hausdaten[2],$hausdaten[3],$hausdaten[4]";
Wenn alle Datensätze abgefragt sind: Das Ende des Javascript-Codes schreiben: $code .="}";
Schreiben des PHP-Strings als Javascript-Text: fputs($handle,$code)

Schlussbemerkung

Die in diesem Artikel beschrieben Vorgehensweise kann aufgrund der Vielzahl möglicher Einsatzgebiete naturgemäß nur schematisch erfolgen. Auch ist es im Hinblick auf die Lesbarkeit und Länge des Artikels nicht möglich, jedes Detail eines solchen Projektes ausführlich zu erläutern. Dennoch sollte es mit der vorgestellten Methode einem erfahrenen Programmierer möglich sein, Datenbanken auch über Javascript ansprechbar zu machen. Wir selbst haben in unserer Web-Agentur www.sinnergie.de diese Möglichkeit schon mit Erfolg und zu aller Zufriedenheit bei grösseren Projekten genutzt. Wir verwendeten diese Möglichkeit der Datenabfrage zum Beispiel um Seiten dynamisch zu erzeugen, optisch orientierte Produktkonfiguratoren zu betreiben oder auch Seiten zu individualisieren.

Viel Spass beim Austesten der Möglichkeiten,

Martin Hug