Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 2 - Einführung

1. Die Abschnitte

2. Das große Ajax-Tutorial!

Früher gab es dazu mal eine ziemlich oberflächige Wischi-Waschi-Anleitung, die ich mittlerweile entfernt habe, da sie doch ziemlicher Müll war. In diesem Tutorial dagegen habe ich mir mal richtig Mühe gegeben und alle Details genau erläutert. Warum das im Kapitel DOM-Manipulation auftaucht? Ganz einfach, Ajax ist gar nichts ohne das.

Daher sollten auch alle Anfänger, die direkt hier gelandet sind, sich zuerst mal die Theorie zu Ajax und der DOM-Manipulation zu Gemüte führen. Die Dinge, die ich dort erkläre, werde ich hier definitiv nicht mehr wiederholen. Das setze ich als Grundwissen voraus. Zusätzlich benötigt ihr für dieses Tutorial das entsprechende System, also Webserver, MySQL und PHP, sowie die entsprechenden Grundkenntnisse in den benötigten Sprachen PHP, SQL und natürlich JavaScript.

3. Ein ganz wichtiger Tipp!

Bevor ihr mit diesem Tutorial anfangt, solltet ihr euch vorher auf jeden Fall den Firebug installieren. Das ist eine wunderbare Erweiterung für den Firefox. Denn da gibt es unter den Optionen die Möglichkeit, sich alles anzusehen, was über Ajax läuft ("Show XMLHttpRequest"). Und zwar unter dem Punkt "Konsole".

4. Das Ziel

Wir wollen diesmal die Werte eines Formulars komplett dynamisch und zur Laufzeit verarbeiten. Das bezieht sich sowohl auf die eigentlichen Inhalte, als auch auf die in den entsprechenden select-Feldern. Dabei wird das Formular nicht ein einziges mal(!) abgesendet. Alles läuft per JavaScript und Ajax im Hintergrund ab.

Das Thema

Anhand einer kleinen Datenbank wollen wir uns eine Internet-Agentur suchen. Das geschieht nach gewissen Kriterien wie dem Knowhow oder dem jeweiligen Stundensatz. Dabei werden wir auch die einzelnen select-Felder so anpassen, dass sie anhand der jeweiligen Ergebnisse nur die entsprechende Anzahl von möglichen Einträgen haben.

Die Vorgehensweise

... wirkt hier und da ein wenig suboptimal. Und das ist sie auch. Ich mache das aber trotzdem, um euch die grundlegenden Dinge zu zeigen, damit ihr euch mit den verschiedenen Techniken und Möglichkeiten vertraut machen könnt und die Unterschiede kennen lernt.

5. Die Daten

Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Folgende Dateien müssen vorhanden sein.

Dateien

6. Der Code

Da wir uns hier hauptsächlich mit JavaScript beschäftigen wollen, habe ich mir bei der Datenbank und den entsprechenden SQL-Abfragen keine sonderliche Mühe gebe. Das gilt natürlich auch für den PHP-Code, der sicherlich verbesserungswürdig ist. Darum ist das auch ziemlich schnell von mir zusammengehauen worden. Seid also bitte ein wenig nachsichtig. Wer sich die Mühe machen will, um das zu optimieren, bitteschön. Und wenn die Person dann auch so freundlich wäre, mir das zukommen zu lassen, so wäre ich sehr dankbar dafür.

Die Datenbank

... könnt ihr euch mit der Datei dump.sql einrichten. Dann sind bereits alle benötigten Daten vorhanden. Wer keine Berechtigung zum Löschen und Erstellen von Datenbank hat, sollte bitte die entsprechenden Zeilen auskommentieren oder löschen. Aber das ist ja wohl selbstverständlich. Und wie das geschieht, solltet ihr ja schon wissen, da dies zwar ein Anfängertutorial ist, aber für Fortgeschrittene. Für wen das zu hoch ist, der sollte vielleicht erst mal hier vorbeischauen.

Der PHP-Code

... ist schon komplett vorhanden. Ihr braucht euch also nicht um die Abfragen, deren Auswertung und die Generierung der XML-Datei kümmern. Das habe ich für euch schon gemacht (aber wie schon gesagt, nicht besonders sauber). Im Laufe dieses Tutorials werde ich nur auf die wichtigen Dinge eingehen. Vergesst nur bitte nicht, dort die Zugangsdaten zur eurer Datenbank einzutragen!

Die formular.htm

... beinhaltet bereits alle benötigten Einträge aus der Datenbank, obwohl man die eigentlich per PHP hätte abfragen müssen. Da es hier aber primär um JavaScript geht, habe ich sowohl das Array als auch die select-Felder einfach mal hart in die Datei reingeschrieben, um den PHP-Anteil in diesem Tutorial auf das absolut notwendige Minimum zu reduzieren.

7. Die Datenbank und die formular.htm

... solltet ihr euch zuerst mal anschauen. Dann werdet ihr sehr schnell erkennen, dass hier alles über die jeweiligen Primärschlüssel der einzelnen Datenbankfelder gesteuert wird. Denn nur die (mit Ausnahme gewisser Zusatzinformationen) holen wir uns bei den Ajax-Anfragen.

weiter zum nächsten Abschnitt