Open Source im professionellen Einsatz
Linux-Magazin 08/2010
676

Anfänglicher Leerstand

Die Funktion »createElement()« legt dazu zunächst ein leeres Div-Element an, Zeile 19 füllt es mit dem Inhalt von »code«. Anschließend fügt »appendChild()« den Inhalt dem beim Laden der Seite leeren Div »inputarea« hinzu. »appendChild()« überschreibt bestehenden Code nicht, also lassen sich beliebig viele Zeilen mit Suchparametern hinzufügen. Der enthaltene »add_input()«-Eventhandler (siehe Listing 3) fügt, wie schon erwähnt, bei der Auswahl eines Suchfelds die zweite Spalte für die Eingabe eines Wertparameters hinzu. Leider funktioniert dies nicht im Konqueror, da dessen Script-Engine die dynamisch hinzugefügten Eventhandler ignoriert.

Listing 3: Feld von
Suchparametern

01 var input_code=[
02   '',
03   '<select class="result" name="type">
04      <option value="0">Obst</option>
05      <option value="1">Gemüse</option>
06    </select><br/>',
07   '<input class="result" type="text"
08           name="color"><br/>',
09   '<input class="result" type="text"
10           name="taste"><br/>',
11   '<select class="result" name="size">
12       <option value="0">klein</option>
13       <option value="1">mittel</option>
14       <option value="2">groß</option>
15     </select><br/>' ];
16 
17 function add_input(n, e) {
18   document.getElementById('input_search' + n).
19      innerHTML = "n = " + input_code[e.value];
20 }

Über den Zeilenzähler »n« findet »add_input()« das richtige Div-Element »input_searchn«. »e« liefert eine Referenz auf das linke Dropdown-Feld, »e.value« also den dort beim Mausklick ausgewählten numerischen Wert. Diesem entsprechend konsultiert »add_input()« die Codetabelle im Array »input_code[]«. Passend zum in der linken Spalte gewählten Suchfeld steht dort der HTML-Code für das rechte Eingabefeld-Suchfeld - entweder ein weiteres Dropdown- oder ein Texteingabefeld. Auch das »name«-Attribut des Eingabefelds passt dabei zum links gewählten Feldnamen. Das dynamisch zusammenklickbare Suchformular ist nun fertig - Zeit für die Suchfunktion auf der Basis von Public SQL.

Anders als bei zum Server geschickten Formularen, wo sich die Daten automatisch in den »POST«-Headern oder »GET«-Parametern wiederfinden, muss sie die Programmlogik bei einem Client-seitig durchgehend offenem Formular erst aus dem DOM-Tree auslesen.

Beerenauslese

Das Attribut »document.Formularname.elements« wie in Zeile 7 aus Listing 4 gibt die Liste der Eingabeelemente im Formular zurück - leider inklusive Buttons, die gar keine Daten enthalten. Dazu kommt, dass nur die Eingabefelder der rechten Spalte relevant sind: Mit dem Wertepaar aus »name« und »value« enthalten sie alles, was die Datenbankabfrage benötigt. Daher hat der HTML-Code im Array »input_code« in Listing 3 vorgesorgt und mit dem Klassenattribut »result« ein Filterkriterium bereitgestellt.

Listing 4: SQL-Abfrage
konstruieren

01 function execute_search(){
02   var element;
03   var sql;
04   var firstloop = true;
05 
06   sql = "SELECT * FROM plants WHERE ";
07   for (e in document.form.elements) {
08     element = document.form.elements[e];
09     if (element) {
10       if (element.className == 'result') {
11         if (!firstloop) sql += " AND ";
12         firstloop = false;
13         sql += element.name + " = '" +
14                element.value + "'";
15       }
16     }
17   }
18   sql += " ORDER BY type, size, name";
19   publicSQL.query(sql, "show_result");
20 }

Nun fällt es der For-Schleife in den Zeilen 7 bis 16 in der Funktion »execute_search« leicht, die gewünschten Daten über das Attribut »element.className« auszusieben. Im Internet Explorer enthält die Liste der Formularelemente »document.form.elements« leere Einträge - warum weiß wohl nur Microsoft. Dort ist es also nötig, vorher abzufragen, ob »elements[e]« überhaupt gesetzt ist (Zeile 9). Aus »element.name« und »element.value« aller Elemente der Klasse »result« baut die Schleife von Zeile 7 bis 16 die »WHERE«-Klausel für das SQL-Statement zusammen. Bei einer bloß lesbaren Datenbank, deren Daten zudem Client-seitig vorliegen, stellt SQL-Injection zum Glück keine Bedrohung dar.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 4 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Browser-Turbo

    Die Ajax-Technologie reichert dröge Webapplikationen mit dynamischen Elementen an. Das gelingt bereits so gut, dass Benutzer sie auf dem Desktop kaum noch von anderen Programmen unterscheiden. Ein kleines Perl-Skript demonstriert die Technik.

  • Meteor

    Javascript sowohl im Browser als auch auf dem Server: Das Webframework Meteor verspricht Anwendungen aus einem Guss, die sich dank vieler fertiger Pakete rasch programmieren lassen.

  • E-Commerce-APIs

    Gutgehende Onlineshops sind selten und das Ergebnis langer Arbeit. Wer gerade erst beginnt Waren zu verticken, tut gut daran, bei einem großen Shoppingportal unterzuschlüpfen. Über APIs lassen sich eigene Warenwirtschafts- oder Buchhaltungsprogramme anbinden.

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • HTML-5-DRM

    Im Rahmen von HTML 5 erhalten Webbrowser die Fähigkeit, Inhalte zu verschlüsseln. Das Sicherheitsfeature hat sich nun zum Politikum entwickelt, denn die Anbieter von digitalen Inhalten möchten es für Digital Rights Management (DRM) verwenden. Hier ein freier Blick auf die Technik.

comments powered by Disqus

Ausgabe 08/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.