Ausgabe von Datenbanken

4. Die Lehre von Ausgabe von mehrdimensionalen Arrays und Rekonvertierung

Einleitung

Die Ausgabe von Datenwerten aus einer Datenbank mit Jascript ist so vielfältig möglich, dass hier nur ein Teilbereich angeschnitten werden kann. Der Sternenhimmelstuermer nimmt als Grundlage die Beispieldemonstration aus der letzten Lektion und passt die dann an.

Der Grundcode wurde in der letzten Abhandlung bis ins Detail erläutert. Der Sternenhimmelstuermer erklärt das nicht nochmal, da die Abhandlungen eben modular aufgebaut sind...

Änderungen werden hingegen natürlich erläutert.

Was meint der Sternenhimmelstuermer mit Rekonvertierung? In der letzten Lektion wurde erläutert, wie man mit einer vier Zeilen langen Batch leicht textbasierte Datenbanken wie *.txt, *.csv usw. mit unterschiedlichen Separatoren (Komma, Semikolon, Doppelpunkt, Leerzeichen) in ein Array konvertiert.

Das Gegenteil, also den Export eines Arrays in eine texbasierte Datenbank mit unterschiedlichen Separatoren führt man dann natürlich mit Javascript durch. Das ist nützlich, wenn die Originaldatei verlorengeht oder man eben ein umfassendes Array geschrieben hat und die Werte mit einem Programm benutzen oder auswerten will.

Inhaltsangabe
Rekonvertierung durch Ausgabe aller Datensätze in Textärea
ein wenig schöner in der Form der Ausgabe: Im div Container
Ausgabe des Arrays in einer E-Mail

Rekonvertierung durch Ausgabe aller Datensätze in Textärea

Ziel dieses Kapitals ist die Ausgabe aller Datenwerte eines Arrays in datenbankkonformer Schreiweise, als Seperator nehmen wir ein Semikolon und als Ziel erstmal eine Textärea
Ausgabe der gesamten Datenbank (Array) in einer Textärea. Hier die lauffähige Demo.

<html>
<head>
    <meta name="generator" content="HTML Studio">
    <title>Datenbankabfrage Demo</title>
    <meta name="author" content="Sternenhimmelstuermer">
    <meta name="description" content="datenbank">

    <SCRIPT LANGUAGE="JavaScript"></SCRIPT>
   </head>
   <body>
<center>
<FORM NAME="datenbankForm">
<div>Ein Kleiner Datenbanktest<div>
<br>
<br>
<div>Druecken Sie den Ergebnisbutton. Alle Daten werden gedruckt.</div>
<P>
<INPUT TYPE="BUTTON" onClick="db()" VALUE="Ergebnis">
Antwortfeld: <textarea name="Antwort" id=Antwort cols="40" rows="10"></textarea></P>
</FORM></center>
</body>
</html>

Erklärung des Codes

function db() {
var ergebnis = ""
    for (var i=0;i<3;i++) {
    ergebnis+= datenbank[i] + "\n"
    }
    document.datenbankForm.Antwort.value = ergebnis
}

Das ist also der rudimantär veränderte Codeteanteil in der Funktion im Haedbereich. Ausgelöst wird die Funktion durch Anklicken des Ergebnisbutton im Body : <INPUT TYPE="BUTTON" onClick="db()" VALUE="Ergebnis">.
ergebnis = "" ist die leere Variable, die durch Schleifendurchläfe mit Inhalt gefüllt wird. Wir lassen die Schleife von 0 bis drei viermal durchlaufen for (var i=0;i<3;i++) {. Da könnte auch: for (var i=0;i<datenbank.length;i++) { drinstehen, was der Länge des Arrays des Arrays entspricht.

ergebnis+= datenbank[i] + "\n" ist die die wichtigste Zeile. Hier bestimmen wir Das bei jedem Durchlauf die Variable Ergebnis ergebnis um einen Datensatz erweitert wird(+):

Die Erweiterung ist immer ein Datensatz datenbank[i] , also der komplette Inhalt des äußeren Arrays. datenbank[0] - datenbank[4] . Dabei beinhaltet das Array datenbank[0] z. B. die Datensätze datenbank[0][0] Meyer, datenbank[0][1] Uwe, datenbank[0][2] Berlin, und datenbank[0][3] die Telefonnummer. Das war jetzt nur Wiederholung...

Wozu + "\n" ?

Ist eigentlich völlig unnötig! Bei jedem Zeilendurchlauf wird eine neue Zeile ausgegeben und \n erzwingt einen Zeilenumbruch, den wir eigentlich nicht brauchen. Sie sollten den Schalter aber kennen!

Der Separator ist ein Komma. Aber woher kommt der Separator her. Der steht bereits im Array datenbank[0] ! So, jetzt spielen wi mal ein wenig an der Ausgabe herum, um einen anderen Separator zu setzen:

ergebnis+= datenbank[i][0] + ";" + datenbank[i][1] + ";" + datenbank[i][2] + ";" + datenbank[i][3] + "\n"

Das würde dann die einzelnen Werte ausgeben. Jetzt machen Sie das mal spaßeshalber ohne den Schalter \n. Der Internetexplorer so wie der Firefox setzen am Ende der Telefonnummer automatisch einen Zeileneinschub und die letzten zwei Zahlen landen dann am Anfang der nächsten Zeile, obwohl noch jede Menge Platz ist.

Damit wäre eine Ausgabe als Datenbank zerstört. Natürlich könnte da auch ein Leerzeichen oder Doppelpunkt als Separator stehen.

Der Separator - das Semikolon - wird wie ganz normaler Text behandelt und deshalb in Anführungszeichen gesetzt. Die Reihenfolge der Datenbankwerte ist egal.

Hey, damit ist fast alles erklärt!

document.datenbankForm.Antwort.value = ergebnis

Das ist nur noch der Pfad zur Textaerea mit der ID bzw. Namen Antwort, dessen Wert unsere Variable ergebnis nach vier Schleifendurchläufe annimmt.

Jetzt kommt ein Sprung zum Body:

Antwortfeld: <textarea name="Antwort" id=Antwort cols="40" rows="10"></textarea></P>

Das ist eine einfache Textarea mit zehn Reihen und 40 Zeichen in der Breite. Antwort ist wieder ID und Name. Javascript funktioniert bei sämtlichen Ausgabeformen gleich: Sie haben einen Bereich in einem Dokument mit einer ID, Adressieren diesen Bereich und geben den Inhalt, der meistens in einer Variablen steht.

ein wenig schöner in der Form der Ausgabe: Tabelle im Div-Container

Der Sternenhimmelstuermer steht auf Ausgabe im selben Textdokument. Alles andere wirkt unseriös (Popup mit document.write-Methode) oder billig (Alert-Methode). Also gilt es in der gültigen Form eine Tabelle einzufügen - was relativ schwer ist.

Es wird hier nur eine Methode vorgestellt, obwohl es mit InnerHTML klappt, aber diese Methode ist nicht zu empfehlen, da Tabellen nach diesen komischen Javascriptmodellen (DOM) im wahrsten Sinne eine Klasse für sich darstellen:

Demo

<html>
<head>
    <meta name="generator" content="HTML Studio">
    <title>Datenbankabfrage Demo</title>
    <meta name="author" content="Sternenhimmelstuermer">
    <meta name="description" content="datenbank">

    <SCRIPT LANGUAGE="JavaScript"></SCRIPT>
   </head>
   <body>
<center>
<FORM NAME="datenbankForm">
<div>Ein Kleiner Datenbanktest<div>
<br>
<br>
<div>Druecken Sie den Ergebnisbutton.Alle Daten werden gedruckt.</div>
<INPUT TYPE="BUTTON" onClick="db()" VALUE="Ergebnis">
Antwortfeld: <div ID="Antwort">Hier steht die Antwort</div>
</FORM></center>
</body>
</html>

Fangen wir mal im Body an: Da steht ein DIV-Container mit einer ID Antwort und als Text ein Platzhalter: <div ID="Antwort">Hier steht die Antwort</div>

Das ist jetzt nichts neues von der Syntax. Wir haben einen Container und ein DIV-Element ist ein wenig flexibler in der Aufnahme von Objekten wie Tabellen. Über den Button wird wieder unsere Datenbankfunktion db() aufgerufen.

{
    node = document.getElementById("Antwort");
    node.appendChild(Tabellenausgabe());
}

Am Anfang wird wieder definiert: Wir ziehen uns mit node in Kombination mit getElementByID also den DIV-Container. node ist dabei so eine Art Hilfe, um "Knotenpunkte" im HTML-Dokument anzusprechen.

Diese Knotenpunkte haben unter anderen appendchild als Tochterobjekt (append child heißt "hinzugefügtes Kind" übersett), was mit der Funktion Tabellenausgabe() neu verknüpft wird. Einfach gesagt: Wir ziehen uns einen bestehenden Container aus dem Body des HTML-Dokumentes (als Kindobjek)t und füllen ihn mit der erstellten Tabelle (createElement)) als Ergebnis, die wir in der darauffolgenden folgenden Kind-Funktion erstellen. Dann wird das Kind als Familienmitglied hinzugefügt und im Container angezeigt. Drücken Sie mehrmals den Ergebnisbutton vergrößert sich die Familie in der Ausgabe.

node.appendChild(Tabellenausgabe()); ist also die Geburt des Kindes in der Tochterfunktion Tabellenausgabe()

function Tabellenausgabe() {
var Tabelle     = document.createElement("table");
var Tbody = document.createElement("Tbody");

Wir kreieren innerhalb des Containers eine Tabelle mit einem Body. Das muss der Funktion mal wieder gesagt werden, die als dumme/-er Tochter/Sohn nur eine Hülle ohne Inhalt ist, die wie üblich gefüllt wird.

for (var i=0;i<3;i++) {

Die For-Schleife bleibt genauso simple und wurde mehrmals erklärt...

Reihe = document.createElement("tr");
        Zelle = document.createElement("td");
        ZellenInhalt = document.createTextNode(datenbank[i][0] + ";" + datenbank[i][1] + ";" + datenbank[i][2] + ";" + datenbank[i][3]);
        Zelle.appendChild(ZellenInhalt);
        Reihe.appendChild(Zelle);
        Tbody.appendChild(Reihe);
    }

Jetzt wird Stück für Stück der Tabelle zusammengesetzt. Für eine Reihe wird die Variable Reihe vegeben: <tr>...für eine Zelle <td>...,dann den Zelleninhalt mit demselben Text, den wir zuvor im letzten Kapitel als ergebnis+ deklariert hatten - ziemlich einfach also. Die Schleife läuft also für 0-3 durch...
Das war die erste Hälfte.

Wozu jetzt nochmal dieser append-Teil? Append heißt "Hinzufügen" und darum geht es jetzt: Dem createElement ("table"), also der Tabelle wird im neu geschaffenen Körper die Reihe, Zelle und Zelleninhalt zugeordnet.

}
     Tabelle.appendChild(Tbody);
        Tabelle.setAttribute("border",1);
    Tabelle.style.bordercolor = 'black';
    Tabelle.style.backgroundColor = 'yellow';
    return Tabelle;

Dann werden dem Body des Kindobjektes noch schnell einige Attribute bzw. der Style zugeordnet. Anmerkung: Nur mit der Tabelle.style.backgroundColor = 'yellow'; -Methode wird zur Zeit Internet Explorer und Firefox und Chrome eine Farbe zugeordnet. Bei der Farbvergabe mit Attribute scheitert der Internetexplorer kläglich und die Tabelle bleibt farblos - Deshalb immer mit Browsern überprüfen..

Nachdem das Layout vergeben wurde, wird mit return Tabelle das Tochterobjekt an das Elternobjekt vererbt und damit die Daten im DIV-Container hinzugefügt.

Da steht nun die Tabelle.

Die ganze Ausgabe können Sie natürlich nach Lust und Laune über mehrere Zellen oder Reihen verteilen, wie Sie es im Beispiellink ohne weitere Erklärungen nachvollziehen können - einfach mal in den Quellcode schauen...

Mit VB-Script geht das ehrlich gesagt leichter, aber das ist Geschmackssache.

Ja, der Programmieraufwand ist erstmal ein wenig höher, aber bei mehreren Datensätzen lohnt sich das ohne Zweifel!

Ausgabe des Arrays in einer E-Mail

Nun, eigentlich schade, dass man Arrays nicht Abfragen kann und danach Datensätze versenden kann. Nein, geht natürlich, wenn man den passenden Pfad parat hat. Diesmal fand der Autor bei Self-Html einen Lösungsansatz, der für unsere Verhältnisse angepasst werden muss. Qichtig war dabei nur ein Pfad...

Schauen Sie sich erstmal die Demo an.

Danach gibt es den Quellcode:

<html>
<head>
    <meta name="generator" content="HTML Studio">
    <title>Datenbankabfrage Demo</title>
    <meta name="author" content="Sternenhimmelstuermer">
    <meta name="description" content="datenbank">

    <SCRIPT LANGUAGE="JavaScript"></SCRIPT>
   </head>
   <body>
<center>
<FORM NAME="datenbankForm">
<br>
<br>
<div>Druecken Sie den Ergebnisbutton.Alle Daten werden gedruckt und eine email mit Daten im Body geöffnet.</div>
<P>
<INPUT TYPE="BUTTON" onClick="db()" VALUE="Ergebnis">
Antwortfeld: <textarea name="Antwort" id=Antwort cols="40" rows="10"></textarea></P>
</FORM></center>
</body>
</html>

Der blaue Teil ist die Datenbank, der grüne Teil wurde im ersten Kapitel ausführlich erklärt und der rote Teil wird jetzt erklärt.
Wir haben also die Variable ergebnis, die sämtliche Datenbankinhalte enthält. Das ist eigentlich schon fast zu viel an Daten für die folgende Methode, die eigentlich für einzelne Werte einer Datenbank konzipiert ist:

betreffzeile="Betrefftext";
   text=" Der Inhalt der Datenbank ist:" + ergebnis + " Ende mit einzelner Ausgabe: " + datenbank[0][0] ;
   location.href="mailto:meine@adresse.de?subject="+betreffzeile+"&body="+text;
}

Die erste Zeile ist wieder eine Variable für den Betreffstext. Natürlich könnte man hier bereits eine Datenbangangabe verbraten - in der Art:

betreffzeile= "Guten Tag Herr" + datenbank[0][0] ;

Man könnte natürlich vorher wieder eine Variable schaffen, in der die Nachnamen abgelegt sind...

text=" Der Inhalt der Datenbank ist:" + ergebnis + " Ende mit einzelner Ausgabe: " + datenbank[0][0] ;

Dasselbe in grün - Verzeihung rot: Der Text unserer E-Mail wird wieder in einer Variablen verpackt: Das ist jetzt wirklich Anfängerwissen, aber in diesem Fall haben wir eben zwei Variablen hereingepackt. Einmal die Datensätze insgesamt und als Bonus eben einen Wert aus der Datenbank einzeln.

location.href="mailto:meine@adresse.de?subject="+betreffzeile+"&body="+text;

Das ganze als location.href zu deklarieren und dann Adresseingabe, Nachrichtentitel und Body als Variablen zu deklarieren, ist genial. Dadurch kann man auch als Javascriptlaie schnell zum Ziel kommen... Ist eigentlich nicht weiter erklärungsbedürftig, da die schreibweise - wenn man Sie als Vorlage hat - eigentlich simpel ist.

Es wird nur eine E-Mail generiert mit Überschrift, Text und Adresse.

Mit Phonegap können Sie z. B. so Daten aus einer App exportieren. Verstanden, was Sie damit für Möglichkeiten auch unter Phone 7 oder 8 haben?

Intuitive Programmierer sind eben oftmals überlegen, weil Sie nur die Möglichkeiten und nicht die Schranken sehen...-:) Egal, damit ist jetzt wirklich fast alles über Arrays gesagt...

Impressum
Datenschutz