Studienarbeit Medien und Informationswesen

Design, Entwurf und Implementierung einerKFZ-Sonderausstattungsabfrage als Webseite

bearbeitet durch Mario Schmidt, MI8, Matrikelnummer: 163932erstellt im Sommersemester 2005 an der Hochschule Offenburg

betreut durch Prof. Dr. Volker Sänger

Inhaltsverzeichnis

Abbildungsverzeichnis 4

Listings 5

Tabellenverzeichnis 6

1. Allgemeines 71.1. Aufgabenbeschreibung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.2. Vorkenntnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.2.1. HTML, CSS & Co. . . . . . . . . . . . . . . . . . . . . . . . . . . 71.2.2. PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81.2.3. MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81.2.4. Apache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81.2.5. Adobe Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2. Planung 92.1. Datenbankplanung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.2. Webseiten-Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.3. Entwicklungsumgebung . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.1. Entwicklungswebserver . . . . . . . . . . . . . . . . . . . . . . . . . 132.3.2. Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3. Implementierung 163.1. MySQL Datenbankaufbau . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3.1.1. Erstellung des Datenbestands . . . . . . . . . . . . . . . . . . . . . 173.2. XHTML Seitenbeschreibung . . . . . . . . . . . . . . . . . . . . . . . . . . 183.3. PHP Programmierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.3.1. Dateiordnung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223.3.2. Datenbankklasse . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233.3.3. Datenverarbeitungsklasse . . . . . . . . . . . . . . . . . . . . . . . 243.3.4. Mailklasse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273.3.5. Sonstige Programmierung . . . . . . . . . . . . . . . . . . . . . . . 29

Inhaltsverzeichnis 2

4. Ergebnis 354.1. Betatest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354.2. Das fertige Produkt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.3. Schlußbetrachtung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364.4. Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

A. Anhang 38A.1. Inhalte der CD-ROM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38A.2. Informationen zur benutzten Software . . . . . . . . . . . . . . . . . . . . . 38

Literaturverzeichnis 39

Inhaltsverzeichnis 3

Abbildungsverzeichnis

2.1. erster Entwurf des ER-Schemas . . . . . . . . . . . . . . . . . . . . . . . . 92.2. zweiter Entwurf des ER-Schemas . . . . . . . . . . . . . . . . . . . . . . . 102.3. endgültiges ER-Schema . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.4. Datenbanktabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.5. unfertiges Designbeispiel 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.6. unfertiges Designbeispiel 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 132.7. Homesite HTML-Editor mit geöffneter Datei . . . . . . . . . . . . . . . . . 15

3.1. unterschiedliche Darstellung in vier gängigen Browsern . . . . . . . . . . . . 213.2. Darstellung ´mit und ohne CSS . . . . . . . . . . . . . . . . . . . . . . . . 22

Abbildungsverzeichnis 4

Listings

2.1. Konfiguration von Virtual Hosts bei Apache . . . . . . . . . . . . . . . . . . 143.1. Anlegen einer neuen Datenbank . . . . . . . . . . . . . . . . . . . . . . . . 163.2. Anlegen der Tabelle Sonderausstattungen . . . . . . . . . . . . . . . . . . . 163.3. Anlegen der Tabelle Polsterung . . . . . . . . . . . . . . . . . . . . . . . . 173.4. Anlegen der Tabelle Lackierung . . . . . . . . . . . . . . . . . . . . . . . . 173.5. Dokumententyp einer XHTML-Datei . . . . . . . . . . . . . . . . . . . . . 183.6. Blockelemente einer XHTML-Datei . . . . . . . . . . . . . . . . . . . . . . 183.7. CascadingStyleSheet-Datei . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.8. Erstellung eines Datenbankobjekts . . . . . . . . . . . . . . . . . . . . . . . 233.9. Verarbeitung der SQL-Ergebnisse . . . . . . . . . . . . . . . . . . . . . . . 233.10. falsche Eingaben prüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243.11. SQL-Code generieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253.12. HTML-Code für die Ausgabe generieren . . . . . . . . . . . . . . . . . . . . 263.13. Die Methoden der Klasse: sendmail . . . . . . . . . . . . . . . . . . . . . 273.14. allgemeine Logik zum Inkludieren von Dateien . . . . . . . . . . . . . . . . 293.15. Anlegen eines data_handler-Objekts . . . . . . . . . . . . . . . . . . . . . 303.16. Fehlerüberprüfung der Eingaben . . . . . . . . . . . . . . . . . . . . . . . . 313.17. Absenden der Datenbankanfrage . . . . . . . . . . . . . . . . . . . . . . . . 313.18. Ausgabe der Ergebnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323.19. Mail über das Kontaktformular verschicken . . . . . . . . . . . . . . . . . . 33

Listings 5

Tabellenverzeichnis

3.1. Darstellung und Benutzbarkeit in verschiedenen Browsern . . . . . . . . . . 21

Tabellenverzeichnis 6

1. Allgemeines

Als Einführung wird eine allgemeine Aufgabenbeschreibung und die dazugehörige Ausgangs-situation beschrieben. Welche Kenntnisse bestehen schon, was soll mit der Arbeit vertieftbeziehungsweise erlernt werden.

1.1. AufgabenbeschreibungZiel der Arbeit ist es, eine Sonderausstattungsabfrage für Mercedes-Benz Fahrzeuge derBaureihe W126 als Webseite zu erstellen. Diese soll datenbankbasierend sein.

Viele Liebhaber dieser Baureihe möchten nach dem (Gebraucht-)Kauf gerne den damaligenAuslieferungszustand ihres Fahrzeuges wissen. Welche Sonderausstattungsmerkmale wurdenzusätzlich zur Serienausstattung vom Erstbesitzer bestellt. Hier gibt es zwei Möglichkeiten.Man kann sich bei Mercedes die Datenkarte ausdrucken lassen oder man erwirbt eine sogenannte EPC-CD1 bei Mercedes. Gibt man nach Installation der CD im Programm eineFahrgestellnummer ein, bekommt man die Sonderausstattungscodes, mit denen der Wagendas Werk verlassen hat, zurück. Leider sind dies nur die reinen (dreistelligen) Zahlencodes,nicht mehr.

Genau hier setzt diese Studienarbeit an. Die Liebhaber fragen meist in einschlägigen Forenim Internet nach, was diese Codes bedeuten. Wieder andere suchen per Hand die Aufschlüsse-lungen der Codes und antworten. Genau dieser Schritt soll automatisiert werden. Die Codeswerden in ein Formular eingegeben und zurück kommt die Beschreibung.

1.2. Vorkenntnisse

1.2.1. HTML, CSS & Co.Sehr gute Grundkenntnisse in HTML 4.012 und CSS 23, sowie fundierte Grundkenntnisse inJavaScript sind vorhanden. Die Webseite soll XHTML 1.04 konform mit dem DokumenttypTransitional erstellt werden. Dies stellt die erste Lernstufe dar. Parallel zur Entwicklungwird der offizielle W3C HTML-Validator[7] benutzt, um die Seiten auf Fehler zu überprüfen.Ebenso werden die CSS-Dateien mit dem offiziellen W3C CSS-Validator[6] überprüft.

1„Electronic Parts Catalog-CD“2HyperText Markup Language 4.013Cascading Style Sheets 24eXtensible HyperText Markup Language 1.0

1. Allgemeines 7

1.2.2. PHPPHP5-Grundkenntnisse sind vorhanden. Bisher beschränkte es sich allerdings darauf, vorhan-dene Skripte für die eigenen Bedürfnisse anzupassen. Die strukturierte Programmierung sollnun anhand dieser Arbeit erlernt werden.

1.2.3. MySQLDie Kenntnisse im Bereich relationale Datenbanken beschränken sich auf das Wissen aus derVorlesung „Datenbanken“ und dem dazugehörigen „Labor: Datenbanken“. Mit dieser Arbeitsoll der praktische Umgang mit der relationalen Datenbank MySQL erlernt werden. Sie bietetsich an, da PHP von Haus aus sehr viele Funktionen mit sich bringt, die speziell für die Arbeitmit MySQL geschaffen wurden.

1.2.4. ApacheIm Umgang mit Webservern sind keine Kenntnisse vorhanden. Um angenehm entwickeln zukönnen soll ein Apache Webserver aufgesetzt und konfiguriert werden. Der Zielserver für dieVeröffentlichung wird ebenfalls ein Apache Webserver sein.

1.2.5. Adobe PhotoshopSehr gute Adobe Photoshop Kenntnisse sind vorhanden. Mittels Photoshop wird das Lay-out und Design der Webseite erstellt, welches danach mit XHTML (vgl. Abschnitt 1.2.1)umgesetzt wird.

5rekursives Akronym für „PHP: Hypertext Preprocessor“, ursprünglich „Personal Home Page Tools“

1. Allgemeines 8

2. Planung

In diesem Kapitel wird zuerst die Datenbankplanung dokumentiert. Danach wird gezeigt,wie das (Web-)Design entstand, um dann noch kurz auf die zur Implementierung genutzteEntwicklungsumgebung einzugehen.

2.1. DatenbankplanungAm Anfang eines jeden datenbankbasierenden Projekts steht die Planung der eigentlichenDatenbankstruktur. Von ihr hängt der weitere Verlauf der Implementierung, sowie die Kom-plexität direkt ab. Die Datenbankplanung ist somit einer der wichtigsten Schritte.

Dazu wird als erstes ein ER-Schema1 erstellt, um die Verknüpfungen der einzelnen Entitiesuntereinander überblicken zu können. Im ersten Entwurf werden eher zu viel, als zu wenigInformationen eingebracht. Man verringert so die Gefahr, wichtige Details auszulassen unddiese zu übersehen. Das erste ER-Schema zu diesem Projekt sieht wie in Abbildung 2.1 aus.

Abbildung 2.1.: erster Entwurf des ER-Schemas

Von diesem ER-Schema ausgehend kann man nun im Ausschlußverfahren die unnötigenBestandteile herauskürzen. Im ersten Entwurf ist im Prinzip fast jeder Bestandteil eines Autos

1Entity-Relationship Schema

2. Planung 9

beinhaltet. Man hätte damit eine Datenbank zum Speichern von Autos, mit den dazugehöri-gen Sonderausstattungsmerkmalen, entwerfen können. Durch Diskussion und Blick auf deneigentlichen Sinn der Anwendung, wird das ER-Schema in Abbildung 2.2 entwickelt.

Abbildung 2.2.: zweiter Entwurf des ER-Schemas

Man erkennt, dass hier einiges verfeinert wurde. Bei der weiteren Diskussion des zwei-ten Entwurfs stellt sich heraus, dass zu viel Gewicht auf den Preis gelegt wird. Es wäreein vielfach höherer Programmieraufwand geworden dieses Schema zu implementieren. Dadas Hauptaugenmerk aber auf Sonderausstattungsmerkmalen liegt, muss hier also nochmalsnachgebessert werden. Statt mit einzelnen Tabellen für den Preis zu rechnen, werden Felderfür den Minimal- und den Maximalpreis eines Sonderausstattungsmerkmals eingeführt, sowieein Zusatzinfofeld, in dem weiterführende Informationen zum Preis oder auch des ganzenSonderausstattungsmerkmals gespeichert werden. So entsteht nochmals ein deutlich verein-fachtes ER-Schema welches in Abbildung 2.3 dargestellt wird.

Aus diesem ER-Schema entstehen die Tabellen, die später in der Datenbank implementiertwerden. Nachdem die Felder klar sind, müssen sinnvolle Spaltentypen gewählt werden.

• code wird mit dem Spaltentyp SMALLINT UNSIGNED ZEROFILL definiert, da hier po-sitive Zahlen größer als 255 gebraucht werden. Falls ein Code ohne führende Null ein-gegeben wird, so wird sie automatisch eingefügt, um wieder einen dreistelligen Codezu bekommen.

2. Planung 10

Abbildung 2.3.: endgültiges ER-Schema

• beschreibung und zusatzinfo wird mit dem Spaltentyp TEXT definiert, da hier Textevariabler Länge gespeichert werden.

• bild und farbe werden mit dem Spaltentyp VARCHAR() definiert, da hier nur kurzeZeichenfolgen gespeichert werden. Für bild sind maximal 200 Zeichen vorgesehen,da hier URLs2 zu den Bildern des jeweiligen Sonderausstattungsmerkmals gespeichertwerden. Für farbe werden maximal 30 Zeichen vorgesehen, da hier kurze Farbnamender Lackierungen und Polster gespeichert werden.

• polsterart und lackart werden mit dem Spaltentyp SET(„“) definiert, da hierbestimmte Worte gespeichert werden. Für polsterart sind die Worte Stoff, MB-Tex,Amaretta, Leder und Velour vorgesehen. Für lackart sind die Worte Serien- undSonderlackierungen und Metallic Lackierungen vorgesehen.

• minPreis und maxPreis werden mit dem Spaltentyp MEDIUMINT UNSIGNED definiert,da hier Preise gespeichert werden. Es werden nur positive Werte benötigt. Eingegebenwerden Pfennigbeträge3, die vor der Ausgabe umgerechnet werden. Würde man FLOATals Spaltentyp benutzen, bekäme man unter Umständen bei Rechenoperationen falscheWerte durch Rundungsfehler.

2Uniform Resource Locator3Zu Bauzeiten des W126 gab es noch die Deutsche Mark. Die Werte sollen hier absichtlich erhalten bleiben

und werden somit nicht in Euro umgerecht. Besser wäre es später eine Euroumrechnungsfunktion zuschreiben, die auf die Originalpreise zugreift.

2. Planung 11

Diese Tabellen sind in Abbildung 2.4 schematisch dargestellt.

Abbildung 2.4.: Datenbanktabellen

2.2. Webseiten-DesignDas eigentliche Design wird im Programm Adobe Photoshop entworfen (vgl. Abschnitt 1.2.5).Das Design soll einfach, schlicht und vor allem benutzerfreundlich gehalten werden. Genausosoll es aber auch modern und frisch erscheinen.

Es besteht anfangs die Frage, ob die Anwendung ein eigenes Browserfenster ausfüllen solloder nicht. Da die Anwendung aber relativ klein ist, wird sie so aufgebaut, dass man sie einer-seits normal im Browser aufrufen kann und andererseits auch in einem Popupfenster benutzenkann. Es werden mehrere Designs ausprobiert und sich am Ende für eines entschieden.

Zwei anfängliche Designbeispiele zeigen die beiden Abbildungen 2.5 und 2.6.

Abbildung 2.5.: unfertiges Designbeispiel 1

2. Planung 12

Abbildung 2.6.: unfertiges Designbeispiel 2

2.3. EntwicklungsumgebungIm Folgenden wird die Entwicklungsumgebung, in der diese Studienarbeit erstellt wird, näherbetrachtet. Entwickelt wird auf einem Apple Rechner, der unter Mac OSX4 10.3.8 läuft. DaMac OSX auf Unix basiert hat das den entscheidenden Vorteil, auf der selben Grundplattformentwickeln zu können, auf der das Programm später laufen soll. Desweiteren hat man so denVorteil direkt „auf dem Server“ arbeiten zu können. Folglich muss man nicht nach jedererfolgten Änderung in einem Skript, dieses einzeln auf den Server laden, um es zu testen.Einfaches Speichern und Neuladen reicht aus.

2.3.1. EntwicklungswebserverMac OSX hat von Hause aus einen vorinstallierten Apache5 Webserver. Auf dem Entwick-lungswebserver läuft Version 1.3.33, welche bis dato die aktuellste Version darstellt. Um dieEntwicklung zu erleichtern, müssen als erstes PHP (Version 4.3.6) und MySQL (Version4.1.11-standard) installiert werden. Auf der Homepage6 des Schweizers Marc Liyanage kön-nen sehr einfach zu installierende PHP Packages für Mac OSX gefunden werden. MySQLPackages können auf der offiziellen MySQL Homepage7 heruntergeladen werden. Aufgrundder sehr guten Anleitung auf Marc Liyanages Homepage[5] stellte auch diese Installation keinProblem dar.

Nachdem PHP und MySQL installiert sind, soll sicher gestellt werden, dass es möglich ist,mehrere Webprojekte nebeneinander und störungsfrei auf dem Server zu entwickeln und zutesten. Es werden mehrere sogenannte virtuelle Hosts konfiguriert. Dazu musste die Konfigu-rationsdatei httpd.conf des Webservers angepasst werden. Ein Beispiel für das Hinzufügen

4Betriebssystem der Firma Apple5http://www.apache.org6http://www.entropy.ch7http://dev.mysql.com/downloads/mysql/4.1.html

2. Planung 13

eines virtuellen Host ist im Listing 2.1 zu sehen.

Listing 2.1: Konfiguration von Virtual Hosts bei Apache1 <VirtualHost 127.0.0.1 >2 ServerName dev1.dd3 DocumentRoot /Library/WebServer/dev1.dd4 ServerAdmin mario@skapunk.de5 </VirtualHost >

Zusätzlich müssen die angelegten virtuellen Hosts in der hosts-Datei des Rechners einge-tragen werden und auf die IP 127.0.0.18 gesetzt werden. Ein Nameserver im Internet würdedie Top-Level-Domain .dd nicht finden und einen Fehler ausgeben. Gibt man nun im Browserhttp://dev1.dd ein, wird man auf das entsprechende Verzeichnis geleitet und kann Dateienaufrufen, wie auf einem Webserver im Internet auch.

Um später Änderungen direkt in der Datenbank vornehmen zu können, wird noch dasProgramm phpMyAdmin9 in der Version 2.6.2 installiert. Damit ist es möglich, Datenbankenüber ein Webinterface direkt zu manipulieren. Es können auch, wie von der Konsole gewohnt,SQL-Befehle eingegeben werden.

2.3.2. EditorAls Editor für den HTML und PHP Code fällt die Entscheidung auf Homesite10 der FirmaMarcomedia. Er besticht vor allen durch seine Schnelligkeit im Umgang mit allerlei Textda-teien und bringt auch keine unnötige WYSIWYG11 Oberfläche mit sich. Da man den Codevon Hand schreiben muss, kann die W3C Konformität (vgl. Abschnitt 1.2.1) deutlich leichtererreicht und kontrolliert werden.

8Loopback Device oder localhost, gemeint ist der eigene Rechner9http://www.phpmyadmin.net

10http://www.macromedia.com/software/homesite/11WhatYouSeeIsWhatYouGet

2. Planung 14

Abbildung 2.7.: Homesite HTML-Editor mit geöffneter Datei

2. Planung 15

3. Implementierung

In diesem Kapitel wird die Vorgehensweise der Implementierung beschrieben. Hier werdenCodebeispiele gezeigt, die die Umsetzung näher erläutern und damit das Projekt wesentlichdokumentieren.

3.1. MySQL DatenbankaufbauIn Kapitel 2.1 wird die Planung der Datenbankstruktur erläutert. Die aus dem erarbeitetenER-Schema entstandenen Tabellen werden nun in einer Datenbank angelegt. Dazu wird eineneue Datenbank erstellt. Sie heisst w126sa. Der Einfachkeit halber werden die Befehle mitphpMyAdmin durchgeführt.

Listing 3.1: Anlegen einer neuen Datenbank1 CREATE DATABASE ’w126sa ’;

Als nächstes werden die einzelnen Tabellen, wie sie im Abschnitt 2.1 beschrieben werden,angelegt. Den Tabellennamen wird ein Präfix „sa_“ vorrangestellt. Dies geschieht aus demGrund, um später alle zur Anwendung gehörenden Tabellen leichter aufzufinden. Spätestenswenn die Möglichkeit besteht, dass in einer Datenbank mehrere Anwendungen Tabellen anle-gen muss man sich darüber Gedanken machen, wie man diese später unterscheiden kann. Willman also zum Beispiel die Anwendung später entfernen, so müssen nur diejenigen Spaltengelöscht werden, die das Präfix enthalten. Daraus folgt, dass natürlich jede Anwendung auchein eigenes und eindeutiges Präfix benutzt.

Listing 3.2: Anlegen der Tabelle Sonderausstattungen1 CREATE TABLE ’sa_sonderausstattung ’(2 ’code’ SMALLINT (3) UNSIGNED ZEROFILL NOT NULL ,3 ’beschreibung ’ TEXT NOT NULL ,4 ’bild’ VARCHAR (200) NOT NULL ,5 ’minPreis ’ MEDIUMINT UNSIGNED NOT NULL ,6 ’maxPreis ’ MEDIUMINT UNSIGNED NOT NULL ,7 ’zusatzinfo ’ TEXT NOT NULL ,8 PRIMARY KEY(’code’)9 );

Die beiden Tabellen für Polsterung und Lackart werden analog dazu angelegt. Die SQL-Befehle sind im Listing 3.3 und 3.4 zu sehen. Nach dem alle drei Tabellen angelegt sind,müssen als nächstes verwertbare Daten in die Spalten gefüllt werden. Anhand vorhandener Ori-

3. Implementierung 16

ginalpreislisten von Mercedes werden CSV-Dateien1 erstellt, die wiederum mit phpMyAdminimportiert werden.

Listing 3.3: Anlegen der Tabelle Polsterung1 CREATE TABLE ’sa_polster ’(2 ’code’ SMALLINT (3) UNSIGNED ZEROFILL NOT NULL ,3 ’farbe’ VARCHAR (30) NOT NULL ,4 ’polsterart ’

SET(’Stoff’,’MB-Tex’,’Amaretta ’,’Leder’,’Velours ’)NOT NULL ,

5 ’bild’ VARCHAR (200) NOT NULL ,6 ’minPreis ’ MEDIUMINT UNSIGNED NOT NULL ,7 ’maxPreis ’ MEDIUMINT UNSIGNED NOT NULL ,8 ’zusatzinfo ’ TEXT NOT NULL ,9 PRIMARY KEY(’code’)

10 );

Listing 3.4: Anlegen der Tabelle Lackierung1 CREATE TABLE ’sa_lack ’(2 ’code’ SMALLINT (3) UNSIGNED ZEROFILL NOT NULL ,3 ’farbe’ VARCHAR (30) NOT NULL ,4 ’lackart ’ SET(’Serien - und

Sonderlackierung ’,’Metalliclackierung ’) NOTNULL ,

5 ’bild’ VARCHAR (200) NOT NULL ,6 ’minPreis ’ MEDIUMINT UNSIGNED NOT NULL ,7 ’maxPreis ’ MEDIUMINT UNSIGNED NOT NULL ,8 ’zusatzinfo ’ TEXT NOT NULL ,9 PRIMARY KEY(’code’)

10 );

3.1.1. Erstellung des DatenbestandsEin großer Teil der Arbeit bestand auch darin, die angelegte Datenbank mit Daten zu füllen.Diese Daten sind überall verstreut im Internet zu finden. Eine relativ komplette Auflistungder damaligen Preislisten ist auf der Webseite von Ingo Licha2 zu finden. Die Listen wurdenkomplett in einer Tabelle zusammengefügt um danach Dubletten zu entfernen. Ebenso wurdesomit der Minimal- und Maximalpreis der verschiedenen Ausstattungsmerkmale ermittelt.

Die Bilder stammen zum großen Teil von Martin Makolskis Webseite3. Hier sind ein paarschöne Auflistungen zum Thema Lacke und Polster zu finden. Die Originalprospektfotos

1CSV steht für Character Separated Values. Es handelt sich um tabellarisch strukturierte Daten diedurch ein spezielles Zeichen getrennt werden. Solche Dateien können in jedem beliebigen Texteditorerstellt werden.

2Die Webseite von Ingo Licha ist zu finden unter http://www.meinbenz.de3Martin Makolskis Webseite findet man unter http://www.mercedes500.de

3. Implementierung 17

stammen wiederum von Ingo Lischas Seite. Die restlichen Bilder stammen entweder aus demInternet oder aus dem eigenen Fotobestand, der bei verschiedenen Treffen entstand.

3.2. XHTML SeitenbeschreibungJede korrekte XHTML-Datei muss über einen richtig definierten Dokumententyp definiertsein. Dies geschieht ganz am Anfang der jeweiligen XHTML-Datei.

Listing 3.5: Dokumententyp einer XHTML-Datei1 <!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0

Transitional //EN""http ://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd">

2 <html xmlns="http ://www.w3.org /1999/ xhtml">3 <head profile="http :// gmpg.org/xfn/1">4 <title>W126 Sonderausstattungsabfrage - Online SA-Codes

abfragen </title >5 <meta http -equiv="Content -Type" content="text/html;

charset=UTF -8" />

Am Ende sieht man noch die Zeichencodierung, welche im diesem Fall als UTF-84 angege-ben ist. Falls das Encoding nicht seitens des Servers erledigt wird, kann man so sicher gehen,dass Sonderzeichen auch in anderen Ländern richtig übertragen werden. Die Verwendung ineinem Meta-Tag5 sichert die Abwärtskompatibilität in älteren Browsern, die mit XML6 Datennicht richtig umgehen können.

Danach wird die Grundstruktur des Designs in XHTML übertragen. Das Design bestehtaus einem Headerbereich. Die Navigation befindet sich links darunter. Der Contentbereichfüllt den Rest des Platzes auf. Wo früher bei solchen Designs mit Tabellen hantiert wurde,wird das gesamte Layout nun mittels CSS positioniert. In der XHTML-Datei werden nur nochdie einzelnen Bereiche als sogenannte Blockelemente notiert. Soviel zu Theorie. In der Praxissieht es so aus, dass leider die vielen verschiedenen Browser die CSS-Standards des W3Cmehr oder weniger gut beherrschen.

In der Umsetzung werden dann die Blockelemente wie in Listing 3.6 beschrieben. Mansieht, dass hier keinerlei Angabe zur Position oder Formatierung angegeben werden. Diesesind komplett in der CascadingStyleSheet-Datei enthalten, die in Listing 3.7 (mit Kürzungen)zu sehen ist.

Listing 3.6: Blockelemente einer XHTML-Datei1 <body>2 <div id="header">3 <div id="headerimg">4 <div id="pagetitle">5 <!-- Header -Bereich -->

4populäre Kodierung für Unicode-Zeichen5Meta-Tags sind HTML-Elemente einer Webseite, welche Metadaten über diese Webseite enthalten.6XML ist die Abkürzung für Extensible Markup Language.

3. Implementierung 18

6 </div>7 </div>8 </div>9 <div id="wrapper">

10 <div id="navigation">11 <!-- Navigationsbereich -->12 </div>13 <div id="contentwrapper">14 <div id="content">15 <!-- Content -Bereich -->16 </div>17 </div>18 </div>19 </body>

Listing 3.7: CascadingStyleSheet-Datei1 /* Allgemeine CSS */2

3 body {4 margin: 0; font -family: Arial , Helvetica , Verdana ,

sans -serif; font -size: 12px; background -color: #fff;text -align: left;

5 }6

7 [...]8

9 /* Layout */10

11 #header {12 padding: 0; margin: auto auto; height: 75px; width: 100%;

background: url("img/bg/header_bg.jpg") no-repeat topcenter; position: fixed; z-index: 3;

13 }14

15 [...]16

17 #navigation {18 background: #FFFFFF; width: 110px; min -height: 200px; top:

75px; margin: 0; padding: 5px 0px 5px 5px; font -size:10px; position: fixed;

19 }20

21 #navigation ul{22 margin: 0px; padding: 0px;23 }24

3. Implementierung 19

25 [...]26

27 #contentwrapper {28 position: absolute; top: 75px; left: auto;

right: auto; width: 500px;29 }30

31 #content {32 background: #fff; padding: 5px 5px 5px 5px; position:

absolute; right: 0px; width: 370px;33 }34

35 [...]

Als sehr guter Browser zur Entwicklung hat sich Mozilla Firefox7 herausgestellt. Er lässtsich mittels Plugins zusätzlich für die Webentwicklung anpassen. Da auf Grund der starkenStellung von Microsoft Windows, deren hauseigener Browser Internet Explorer oft benutztwird, wird speziell auch dort auf eine korrekte Darstellung geachtet. Genau hier lag auchein Hauptteil der Arbeit. Leider hat der Microsoft Internet Explorer eine sehr fehlerhafteImplementierung von CSS2, weshalb man immer wieder Code ändern und anpassen muss,damit ein Layout funktioniert. Man steckt erfahrungsgemäß in etwa die doppelte Zeit in dieEntwicklung hinein um Workarounds für diese Bugs zu finden. Ein paar Beispiele, die bei derEntwicklung dieser Studienarbeit als Bugs im Internet Explorer aufgetreten sind.

• Text der kleiner als 11 Pixel groß ist, kann nicht fett dargestellt werden.

• Breiten- und Höhenangaben werden nicht mit Paddingangaben verrechnet, sondernaddiert. Dadurch erschwert sich die Positionierung erheblich.

• Gepunktete Linien (border-style: dotted;) werden falsch dargestellt, wie border-style:dashed;.

• position: fixed; wird nicht unterstützt (Windows).

• a:hover; wird vom Internet Explorer 5.2 (Macintosh) und 5.5 (Windows) nicht rich-tig interpretiert. Fährt man über einen Link erscheínt kein Handcursor. Benutzt mancursor: hand; funktioniert es wieder. Laut W3C gibt es aber in den CSS-Spezifikationenkeine solche Option und die Dokumente validieren so nicht mehr.

Um aber auf den meisten gängigen Browsern die Benutzbarkeit der Anwendung sicherzu-stellen, wird sie mit verschiedenen Browsern getestet und bewertet. Tabelle 3.1 gibt nähereAuskunft über die Darstellung in den verschiedenen Browsern. In Abbildung 3.1 sieht mandie unterschiedliche Darstellung in vier gängigen Browsern.

7Mozilla Firefox ist ein aus der Mozilla-Suite hervorgegangener Standalone-Browser. Download unter fol-gendem URL: http://www.mozilla-europe.org/de/products/firefox/

3. Implementierung 20

Tabelle 3.1.: Darstellung und Benutzbarkeit in verschiedenen Browsern

Darstellung in % Benutzbarkeit in %Gecko (Mozilla, Firefox, etc.) 1.0.4 100 100Internet Explorer 6 80 100Opera 8 90 100Safari 1.2 100 100

Abbildung 3.1.: unterschiedliche Darstellung in vier gängigen Browsern

3. Implementierung 21

Benutzer nicht CSS-fähiger Browser können dank der sauberen Trennung zwischen Layoutund Inhalt dennoch die Seite nutzen. Benutzt jemand beispielsweise Lynx8 als Browser siehter nur den reinen Text. Hier zeigt sich wie klar eine Seite strukturiert ist um sie auf solchenBrowsern anzuzeigen. Tabellenlayouts oder Frames bereiten hier bei der Navigation im Text-browser arge Probleme. In Abbildung 3.2 sieht man die unterschiedliche Darstellung mit undohne CSS.

Abbildung 3.2.: Darstellung ´mit und ohne CSS

3.3. PHP ProgrammierungIn diesem Abschnitt werden die erstellten Klassen und sonstige Programmierlogik genauererklärt. Es werden keine Quellcodes komplett gelistet, da diese auch auf der beiliegendenCD-ROM zu finden sind. Sollte es dem Verständnis dienen, werden natürlich kurze Auszügeaus den Quellcodes eingebunden.

3.3.1. DateiordnungKomplette HTML-Seiten und CSS-Dateien werden alle im Root-Verzeichnis des Webserversgespeichert. Alle Dateien die inkludiert werden oder zur Anwendung gehören, wie z.B. Klas-sendateien, werden im Unterverzeichnis /inc gespeichert. Dort sind sie durch ein Präfixvoneinander zu unterscheiden. „class.“ steht allen Klassendateien vor. Sie beinhalten fastaussschließlich PHP-Code. „inc.“ steht für normale Dateien, die durch andere Dateien in-kludiert werden. Sie beinhalten meist Teilstücke einer HTML-Seite und PHP-Code. „tpl.“steht vor allen Dateien, die als Template benutzt werden. Sie enthalten nur HTML-Code,der teilweise mit Platzhaltern versehen ist, damit später per Suchen und Ersetzen Inhalteeingefügt werden können.

Die Bilder befinden sich im Unterordner img. Dort sind sie wiederum aufgeteilt in dieUnterordner bg (für Hintergrundbilder der Seite im allgemeinen), lacke (für alle Bilder derverschiedenen Lacke), polster (für alle Bilder der verschiedenen Polster) und sa (für alleBilder der verschiedenen Sonderausstattungen).

8Lynx ist ein textbasierter Browser, der keine Grafiken anzeigt. Er wird meist auf Terminals benutzt und istauf vielen Unixsystemen direkt verfügbar.

3. Implementierung 22

3.3.2. DatenbankklasseDie Datenbankklasse ist für alle Verbindungen und Abfragen mit der Datenbank zustän-dig. Als Variablen des entstehenden Objekts werden eine Objektreferenz, der Benutzername,das Passwort, die Serveradresse und der Datenbankname gesetzt. Die Konstruktormethode9

mysql füllt diese Variablen bei der Erstellung mit den entsprechenden Werten. So ist sicher-gestellt, dass die Zugangsdaten mit Instanzierung eines neuen Objekts vorhanden sind. Siehaben den selben Namen wie die Klasse.

Listing 3.8: Erstellung eines Datenbankobjekts1 /* Datenbankdaten */2

3 $user = "username"; // Benutzername4 $pass = "password"; // Passwort5 $server = "localhost"; // Datenbankserver6 $db = "w126sa"; // Datenbankname7

8 include("class.mysql.php"); // Datenbankklasse includen9

10 $dbconnection = new mysql($user , $pass , $server , $db); //Konstruktor wird direkt mit den Werten aufgerufen

11

12 $dbconnection ->dbconnect (); // Verbindung wird hergestellt

Die Methode dbconnect stellt die Verbindung zur Datenbank her und wählt dann eine Da-tenbank aus. Sie erwartet keine weiteren Argumente und bezieht ihre Informationen aus denVariablen des Objekts. Tritt ein Fehler auf, wird eine Fehlermeldung, die die MySQL Fehler-beschreibung beinhaltet, ausgegeben. Ansonsten wird die Referenz der Datenbankverbindungin die Variable des Objekts gespeicherrt und true zurückgegeben.

Die Methode dbquery stellt Anfragen an die Datenbank. Als Argumente erwartet sieSQL Code in einem String und die Referenz der Datenbankverbindung. Tritt ein Fehler beider Anfrage auf, so wird dieser mitsamt der MySQL-Fehlerbeschreibung ausgegeben. Ist dieAnfrage erfolgreich, wird ein mehrdimensionales Array gebildet. Es ist auf erster Ebene übereinen Index ansprechbar. In zweiter Ebene werden die Ergebnisse der Anfrage als assoziativesArray gespeichert. Dieses Array wird am Ende zurückgegeben.

Listing 3.9: Verarbeitung der SQL-Ergebnisse1 $count = 0; // Zaehlervariable fuer Datenarray2 $data = array (); // Datenarray3 while ( $row = mysql_fetch_assoc($results)){ // Zeilen

auslesen4 $data[$count] = $row; // jede Zeile in den (assoz.) Array

schreiben5 $count ++;

9Die Konstruktormethode wird mit der Erstellung eines neuen Objektes einer Klasse aufgerufen. Sie wirdalso mindestens einmal innerhalb der Lebensdauer eines Objekts ausgeführt.

3. Implementierung 23

6 }7 mysql_free_result($results); // Ergebnisse freigeben8 return $data; // assoz. Array zurueckgeben

3.3.3. DatenverarbeitungsklasseDie Klasse data_handler ist für alle Manipulationen an den Daten zuständig, die über dieSQL-Anfrage zurückgegeben werden. In ihr werden als Variablen, die vom Benutzer gesende-ten Eingaben für Sonderausstattungscodes, Lackcode und Polstercode, sowie die Informationob eine ausführliche Ausgabe gewünscht ist, gespeichert. Dies geschieht, wie auch schon beider Klasse mysql, mit Instanzierung eines neuen Objekts und des automatischen Aufrufs derKonstruktormethode data_handler.

Die Methode codeCheck erwartet einen String als Argument, welcher die vom Benutzereingegebenen Codes beinhaltet. Diese werden auf Richtigkeit überprüft. Eingegeben werdendürfen nur dreistellige Zahlenkombinationen. Die Eingaben werden um überflüssige Leerzei-chen erleichtert und am Separator getrennt. Anschließend wird über einen regulären Ausdruckdie Richtigkeit der einzelnen Codes geprüft. Falls zudem mehr als ein Sonderausstattungscodeeingegeben wird, werden diese aufsteigend sortiert, bevor das Array mit den einzelnen Codeszurückgegeben wird.

Listing 3.10: falsche Eingaben prüfen1 $data = trim($this ->$string); // ueberfluessige Leerzeichen am

Anfang und Ende entfernen2 $sa_array = explode(" ", $data); // Eingabestring an

Leerzeichen trennen3

4 for($i=0; $i<count($sa_array); $i++){5 if(! preg_match("/^\d{3}$/", $sa_array[$i]) && ($sa_array [0]

!= "")){ // Test auf 3-stellige Zahlen oder ob Array leerist

6 return FALSE; // falls fehlerhafte Zahl gefunden ->Abbruch

7 break;8 }9 }

10

11 if(count($sa_array) > 1){ // Falls mehr als ein SA-Code imArray

12 sort($sa_array); // Array sortieren13 }14 return $sa_array;

Die Methode generateSql generiert den benötigten SQL-Code für die Methode dbqueryund erwartet drei Argumente. Das Array aus der Methode codeCheck, die Spalten die aus-gewählt werden und die Angabe, aus welcher Tabelle diese Spalten gelesen werden. Der

3. Implementierung 24

vorhandene Teil des SQL-Codes wird Schritt für Schritt komplettiert. Zuerst werden die über-gebenen Spalten angehängt. Danach wird geprüft ob eine ausführliche Abfrage gewünschtist und bei Bedarf weitere Spalten angehängt. Diese Spalten sind bei jeder ausführlichen Infogleich und müssen daher nicht übergeben werden. Als nächstes wird die auszuwählende Tabel-le angefügt. Jetzt werden die Elemente aus dem Array eingefügt. Es kann vorkommen, dassdas übergebene Array leer ist, weshalb dies auch nochmals geprüft wird. In der anschließen-den for-Schleife werden die Elemente der Reihe nach angehängt. Danach wird der SQL-Codeals String zurückgegeben.

Listing 3.11: SQL-Code generieren1 $sql = "SELECT code" . $select; // SQL beginnen und $select

anhaengen2 $full = ", bild , minPreis , maxPreis , zusatzinfo"; // string

fuer vollinfo bei allen Tabellen3 // SQL Full oder Light - Unterscheidung4 ($this ->vollinfo == "on") ? $sql .= $full : $sql .= ""; // bei

Vollinfo string anhaengen sonst nichts ("")5 $sql .= " FROM " .$from ." WHERE "; // SQL from mit

Tabellenname $from und where Bedingung beginnen6 $anzahl = count($array); // Anzahl der Codes im Array zaehlen7

8 if(!isset($array [0][0])){9 // echo ("Array ist leer!<br />"); // debug

10 return false;11 }12

13 /* Array durchlaufen , mit normaler for -Schleife daUnterscheidung noetig , ob eines oder mehrere vorhanden */

14 for($i = 1; $i <= $anzahl; $i++){15 if($i > 1){ // falls mehr als ein Element (SA Code)

vorhanden16 $sql .= " OR"; // $sql um "_OR" erweitern17 }18 $sql .= " code = ".$array[$i -1]; // Bedingung an $sql

anfuegen19 }20 return $sql;

In der Methode generateTable wird der Ausgabecode generiert. Es handelt sich hierbeium eine Tabelle, die aus verschiedenen Templatedateien10 erstellt wird. Die Methode erwartetzwei Parameter. Zuerst einen Array mit den Ergebnissen aus der Datenbankabfrage unddanach einen Teil des Names des gewünschten Templates. Der komplette Dateiname wirdals erstes in der Methode generiert. Auch hier erfolgt wieder eine Unterscheidung zwischen

10Templatedateien sind Dateien die immer wieder verwendet werden können und nach außen hin gleichaussehen, sich jedoch im Inhalt unterscheiden. Deshalb stehen dort oft Platzhalter für die Inhalte, diedann vor der Ausgabe ausgetauscht werden.

3. Implementierung 25

kurzer und ausführlicher Ausgabe der Ergebnisse, da hierfür das entsprechende Templategeladen werden muss. Nachdem das Template in eine Variable eingelesen wird, werden dieInhalte für die kurze Ausgabe durch Suchen und Ersetzen der Platzhalter eingefügt. Es folgteine Abfrage nach ausführlicher Ausgabe. Falls diese zutrifft, werden auch die restlichenWerte ersetzt. Am Ende wird die fehlende Ummantelung der Tabelle hinzugefügt und diekomplette Tabelle zurückgegeben.

Listing 3.12: HTML-Code für die Ausgabe generieren1 $html = ""; // Variable fuer den HTML Code2 // Dateifile zum includen zusammenstricken (Unterscheidung:

Vollinfo/ Kurzinfo)3 $filename = "inc/tpl.$tpl";4 ($this ->vollinfo == "on") ? $filename .= "_full.php" :

$filename .= ".php";5

6 $rowtemplate = file_get_contents($filename); // Template inVariable einlesen

7

8 foreach($array as $sa){9 if($tpl == "sa_codes"){ // SA -spezifische Inhalte einfuegen

10 $row = str_replace("%code%", $sa[’code’], $rowtemplate);11 $row = str_replace("%beschreibung%",

htmlentities($sa[’beschreibung ’]), $row);12 }13 if($tpl == "lack"){ // Lack -spezifische Inhalte einfuegen14 $row = str_replace("%code%", $sa[’code’], $rowtemplate);15 $row = str_replace("%farbe%", htmlentities($sa[’farbe’]),

$row);16 $row = str_replace("%lackart%",

htmlentities($sa[’lackart ’]), $row);17 }18 if($tpl == "polster"){ // Polster -spezifische Inhalte

einfuegen19 $row = str_replace("%code%", $sa[’code’], $rowtemplate);20 $row = str_replace("%farbe%", htmlentities($sa[’farbe’]),

$row);21 $row = str_replace("%polsterart%",

htmlentities($sa[’polsterart ’]), $row);22 }23 if($this ->vollinfo == "on"){ // falls Vollinfo gewuenscht

ist weitere Inhalte einfuegen24 $imgsize = getimagesize(".$sa[bild]"); // Bildgroesse

auslesen25 $row = str_replace("%bildgroesse%", $imgsize [3], $row);

// Bildgroesse einfuegen26 $row = str_replace("%bild%", $sa[’bild’], $row); //

3. Implementierung 26

Bildpfad einfuegen27 $row = str_replace("%minpreis%",

number_format (($sa[’minPreis ’]/100) , 2, ’,’, ’.’),$row); // Minimalpreis einfuegen

28 $row = str_replace("%maxpreis%",number_format (($sa[’maxPreis ’]/100) , 2, ’,’, ’.’),$row); // Maximalpreis einfuegen

29 if($sa[’zusatzinfo ’] == ""){ // Falls ZusatzinfoStringleer ist

30 $row = str_replace("%zusatzinfo%", "-", $row); // "-"einfuegen

31 }else{32 $row = str_replace("%zusatzinfo%",

htmlentities($sa[’zusatzinfo ’]), $row); // Zusatzinfoeinfuegen

33 }34 }35 $html .= $row;36 }37 // fertige Tabelle generieren38 $table = ’<table width ="100%" border ="0">’;39 $table .= $html . "</table >";40 return $table;

3.3.4. MailklasseDie Klasse sendmail ist für das Kontaktformular geschrieben und hat mit der eigentlichenAufgabenstellung nichts zu tun. Der Vollständigkeit halber sei sie aber hier auch aufgeführtund erläutert.

Mit der Erstellung eines neuen sendmail-Objekts werden die vom Benutzer eingegebenenDaten in den Variablen des Objekts gespeichert und die Mail grundlegend vorbereitet. Dabeiwird aus dem Konstruktor die Methode toggleRecipient aufgerufen. Der Empfänger derMail wird aus einem Zahlenwert ermittelt. Der Zahlenwert kann wie im vorliegenden Fall auseiner Auswahlliste abgesendet werden oder ganz normal, als z.B. ein Wert aus einem versteck-ten Eingabefeld. Hier wird wert auf Flexibilität gelegt. In der Funktion wird die Betreffzeileder Mail über den Zahlenwert im Originalobjekt gesetzt. Danach wird die richtige Empfänge-radresse anhand des Zahlenwerts zurückgesendet. Zurück in der Methode sendmail werdenzusätzliche Kopfzeilen der eMail generiert. Die Methode checkAdress überprüft die eigege-bene eMail-Adresse auf Gültigkeit. Mittels eines regulären Ausdrucks wird geprüft, ob eineeMail-Adresse zumindest syntaktisch korrekt eingegeben wurde. Ist die Adresse korrekt, sokann die eMail anschliessend mit der Methode sendNow verschickt werden.

Listing 3.13: Die Methoden der Klasse: sendmail1 function sendmail ($from , $name , $subject , $message){2 $this ->from = $from; // Absenderemailadresse speichern

3. Implementierung 27

3 $this ->message = $message; // Nachricht speichern4 $this ->to = $this ->toggleRecipient($subject); // Empfaenger

und Betreff einfuegen5 // Extra Headerinformationen generieren6 $this ->xtra = "From: $this ->from ($this ->name)\r\n";7 $this ->xtra .= "Content -Type: text/plain\r\n";8 $this ->xtra .= "Content -Transfer -Encoding: 8bit\r\n";9 $this ->xtra .= "X-Mailer: PHP ". phpversion ();

10 }11

12 function toggleRecipient ($subjectnumber){13 // Empfaengeradressen und Betreffzeilen definieren14 $mailadressen = array(’mario@skapunk.de’,

’mario@skapunk.de’, ’mario@skapunk.de’,’mario@skapunk.de’);

15 $betreffzeilen = array(’Allgemein Anfrage ’,16 ’Hilfe zur Webseite benötigt ’,17 ’Verbesserungsvorschlag ’,18 ’Fehlende Codes gefunden ’);19 $this ->subject = $betreffzeilen[$subjectnumber ]; //

Betreffzeile speichern20 return $mailadressen[$subjectnumber ]; // Empfaengeradresse

zurueckgeben21 }22

23 function checkAdress ($mailadress){24 // Empfaengeradressen und Betreffzeilen definieren25 $checkemail = eregi( "^" . // Beginn der Zeichenkette26 "[a-z0 -9]+([_\.-][a-z0 -9]+)*". //user: ein oder mehr

Zeichen + Zahlen , Unterstrich Punkt oder Minuszusaetzlich so oft wie sie vorkommen erlaubt (auch keinmal)

27 "@". //@ Zeichen28 "([a-z0 -9]+([\. -][a-z0 -9]+) *)+". // Domain: faengt mit

Buchstaben oder Zahl an. Dann kann selbiges pluszusaetzlich Punkt und Minus kommen.

29 "\.([a-z]{2}| aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|nato|net|org|pro)" . //sld ,tld

30 "$", $_POST[’email’]); // $ == Ende der Zeichenkette31

32 if (! $checkemail){33 return FALSE; // eMailadresse nicht korrekt34 exit;35 }36 return TRUE; // eMailadresse korrekt

3. Implementierung 28

37 }38

39 function sendNow (){40 // fertige Mail verschicken41 if(!mail($this ->to, $this ->subject , $this ->message ,

$this ->xtra)){42 return FALSE;43 exit;44 }45 return TRUE;46 }

3.3.5. Sonstige ProgrammierungIn diesem Abschnitt wird näher auf die Programmlogik ausserhalb der Klassen eingegangen.Es wird kurz erklärt, wie die Klassen benutzt werden, um die Anwendung lauffähig zu machen.

Allgemeine Logik zur Inkludierung von Dateien

Es werden verschiedene Dateien nur in bestimmten Fällen gebraucht. Die Datenbankklassenbeispielsweise werden nur auf den Seiten eingebunden, auf denen auch wirklich ein Daten-bankzugriff erforderlich ist. Am Beispiel der Datei index.php (also die Datei, die als erstesbeim Aufrufen der Webseite angezeigt wird) lässt sich das deutlich zeigen. Im Contentbereichfindet sich eine switch-Anweisung, die den entsprechenden Fall abfragt. Es wird geprüft obdie Variable action existiert und ob sie einen bestimmten Wert enthält. Trifft das zu, soheisst das gleichzeitig, dass eine Anfrage über das Formular abgesendet wurde und es werdendie benötigten Klassen inkludiert. Danach wird noch die Datei inc.abfrage.php einge-bunden, welche die Suchergebnisse im Contentbereich platziert. Wurde noch kein Formularabgeschickt, z.B. wenn die Seite das erste Mal aufgerufen wird, so tritt der default-Fallein. Hier wird die Datei inc.form.php inkludiert welche im Contentbereich das Formulareinblendet.

Listing 3.14: allgemeine Logik zum Inkludieren von Dateien1 <div id="content">2 <?php3 switch(TRUE){4 case(isset($_POST[’action ’]) && $_POST[’action ’] ==

’anfrage ’); // Abfrage gestartet5 include("inc/inc.dbdata.php");6 include("inc/class.data_handler.php");7 include("inc/inc.abfrage.php");8 break;9 default; // Abfrageformular anzeigen

10 include("inc/inc.form.php");11 }

3. Implementierung 29

12 ?>13 </div >

Ausgabe der Suchergebnisse

Wie im oberen Abschnitt erwähnt, ist die Datei inc.abfrage.php für die Ausgabe derSuchergebnisse zuständig. Diese Datei wird nach Absenden des Formulars aufgerufen und hatsomit die Eigaben des Benutzers in den Umgebungsvariablen zur Verfügung. Diese werdennun der Reihe nach behandelt.

Da die Fehlerbehandlung der Übersicht wegen auch in dieser Datei abläuft (und zwarbevor die Abfragen an die Datenbank gesendet werden), wird zu Beginn eine Fehlervariabledefiniert und auf den Wert 0 (entspricht FALSE) gesetzt. Ebenso werden zwei Variablen mitTextinhalten gefüllt, die ausgegeben werden, wenn gar kein Ergebnis oder nur ein Teilergebnisgefunden wird. Bevor jetzt ein neues data_handler-Objekt angelegt wird, muss noch dasFeld zur ausführlichen Ausgabe überprüft werden. Wird es im Formular nicht angewählt, sosteht auch keine Information darüber in den Umgebungsvariablen. Wird es angewählt, sosteht der Feldname (vollinfo) als auch der Status (on) zur Verfügung.

Listing 3.15: Anlegen eines data_handler-Objekts1 error = 0; // Fehlervariable auf FALSE setzen2 // Templatedateien in String einlesen3 $keinErgebnis =

file_get_contents("inc/tpl.kein_ergebnis.php");4 $teilergebnis = file_get_contents("inc/tpl.teilergebnis.php");5

6 // leeres Feld ’vollinfo ’ abfangen7 if(isset($_POST[’vollinfo ’]) && $_POST[’vollinfo ’]== "on"){

// pruefen auf Existenz der Variable und Inhalt8 $vollinfo = $_POST[’vollinfo ’];9 }else{

10 $vollinfo = "off";11 }12

13 $anfrage = new data_handler($_POST[’sacodes ’],$_POST[’lackcode ’], $_POST[’polstercode ’], $vollinfo); //neues Objekt fuer SA-Codes

Jetzt werden die Eingaben durch die Methode codeCheck, welche im Abschnitt 3.3.3erklärt wird, auf Fehler überprüft. Das Ergebnis dieser Überprüfung wird in eine Variable desObjekts geschrieben, welche gleich danach auf Richtigkeit überprüft wird. Tritt ein Fehlerauf, wird direkt eine Nachricht ausgegeben und die Fehlervariable auf 1 (also TRUE) gesetzt.Sind Sa-Code-, Lack- und Polstereingaben überprüft, wird die Fehlervariable abgefragt. Istdiese im Verlauf der Verarbeitung auf 1 gesetzt worden, so wird das Skript abgebrochen.

Anmerkung: Leere Eingaben sind ausdrücklich erlaubt, da es sein kann, dass ein Benutzerz.B. nur einen Lackcode abfragen möchte, wobei die restlichen Felder leer bleiben. Aus diesem

3. Implementierung 30

Grund wird am Anfang ein Hinweis für eine Teilausgabe vorbereitet, der durchaus gewolltsein kann.

Listing 3.16: Fehlerüberprüfung der Eingaben1 // Empfangene Daten auf fehlerhafte Eingaben ueberpruefen2

3 $anfrage ->sa_codes = $anfrage ->codeCheck(’sa_codes ’); //SA -Codes checken

4 // echo(" Inhalt sacodes: $sacodes <br />");5

6 if(!$anfrage ->sa_codes){ // im Fehlerfall Meldung ausgeben und$error auf 1 setzen damit das Skript abgebrochen wird

7 echo("<h2 class=\"error\">Achtung </h2><p><strong >SA-Codesfehlerhaft .</strong > Bitte &uuml;berpr&uuml;fen Sie IhreEingaben!</p>");

8 $error = 1;9 }

10

11 [...]12

13 if($error){14 echo("<br /><br /><h2 >Hinweis </h2><p>Bitte gehen Sie

zur&uuml;ck und korrigieren Sie Ihre Eingaben!</p>");15 return false;16 }

Als nächstes wird der benötigte SQL-Code generiert und die Anfrage an die Datenbankgesendet. Falls keine Eingaben gemacht wurden, so wird auch keine Anfrage gesendet. DasAbsenden einer leeren Anfrage wäre unnötig.

Listing 3.17: Absenden der Datenbankanfrage1 /$sql = $anfrage ->generateSql($anfrage ->sa_codes , ’,

beschreibung ’, ’sa_sonderausstattung ’);2 if(!$sql == ""){ // falls kein SQL Code generiert wurde weil

keine Eingabe erfolgte keinen Query absenden3 $sa_codes = $dbconnection ->dbquery($sql ,

$dbconnection ->conn);4 }5 // weitere folgen ...6 [...]

Es fehlt nun noch die endgültige Ausgabe der Suchergebnisse. Erneut wird über eineswitch-Anweisung zwischen den einzelnen Fällen unterschieden. Erstens könnte kein Ergeb-nis gefunden werden, so sind die Variablen leer und es wird eine dementsprechende Feh-lermeldung ausgegeben. Zweitens könnte nur ein Teilergebnis dargestellt werden. Hier wirdgeprüft, in welchen Fällen ein Ergebnis vorliegt und diese werden dann über die MethodegenerateTable der Klasse data_handler ausgegeben. Zudem wird der Hinweis auf das

3. Implementierung 31

Teilergebnis ausgegeben. Und der dritte Fall, falls für alle Eingaben ein Ergebnis gefundenwird, werden diese der Reihe nach ausgegeben.

Listing 3.18: Ausgabe der Ergebnisse1 switch(TRUE){2 case(empty($sa_codes) && empty($lack) && empty($polster));

// alle Variablen sind leer3 print $keinErgebnis;4 break;5 case(empty($sa_codes) || empty($lack) || empty($polster));

// einige Variablen waren leer6 // die Gefundenen werden ausgegeben7 if(!empty($lack)){8 echo("<br /><h2 >Lackierung </h2><br />");9 print $anfrage ->generateTable($lack , ’lack’);

10 }11 if(!empty($polster)){12 echo("<br /><h2 >Polsterung </h2><br />");13 print $anfrage ->generateTable($polster , ’polster ’);14 }15 if(!empty($sa_codes)){16 echo("<br /><h2 >Sonderausstattungen </h2><br />");17 print $anfrage ->generateTable($sa_codes , ’sa_codes ’);18 }19 print $teilergebnis;20 break;21 default; // zu allen Variablen ein Ergebnis gefunden22 echo("<br /><h2 >Lackierung </h2><br />");23 print $anfrage ->generateTable($lack , ’lack’);24 echo("<br /><h2 >Polsterung </h2><br />");25 print $anfrage ->generateTable($polster , ’polster ’);26 echo("<br /><h2 >Sonderausstattungen </h2><br />");27 print $anfrage ->generateTable($sa_codes , ’sa_codes ’);28 }

Absenden des Kontaktformulars

Wie schon bei der Datei index.php wird hier über eine switch-Anweisung überprüft, obdas Formular abgesendet wurde oder nicht. Ist dies nicht der Fall, wird das Formular in-kludiert und angezeigt. Ist das Formular abgesendet worden, wird zuerst geprüft, ob alleFelder des Formulars ausgefüllt sind oder nicht, bevor dann, falls dies zutrifft, die Klasseclass.sendmail.php inkludiert wird. Danach wird ein neues Objekt angelegt und mit denWerten aus den Umgebungsvariablen gefüllt. Es muss noch geprüft werden, ob die eingege-bene eMail-Adresse syntaktisch korrekt ist, was über die Methode checkAdress geschieht.Wird eine falsche Adresse erkannt, bricht das Skript mit einer Fehlermeldung ab. Ist die Adres-se korrekt, wird versucht die eMail zu verschicken, was bei Erfolg eine Bestätigung hervorruft.

3. Implementierung 32

Sollte es Probleme beim Mailversand geben, wird eine Fehlermeldung ausgegeben.

Listing 3.19: Mail über das Kontaktformular verschicken1 switch(TRUE){2 case(isset($_POST[’action ’]) && $_POST[’action ’] ==

’kontakt ’); // Abfrage gestartet3 // Fehlerbehandlung4 if($_POST[’email’] == "" || $_POST[’name’] == "" ||

$_POST[’nachricht ’] == ""){5 echo("<h2 class=\"error\">Achtung </h2><p><strong >Bitte

alle Felder ausf&uuml;llen.</strong > Es wurden nichtin allen Feldern Angaben gemacht. Bitte&uuml;berpr&uuml;fen Sie Ihre Eingaben!</p>");

6 break;7 }8 include("inc/class.sendmail.php"); // sendmail Klasse

inkluden9 // Mailobjekt wird angelegt

10 $mail = new sendmail($_POST[’email’], $_POST[’name’],$_POST[’betreff ’], $_POST[’nachricht ’]);

11 if(!$mail ->checkAdress($mail ->from)){ // eMailadresseueberpruefen

12 ?>13 <h2 class="error">Achtung </h2 >14 <p><strong >Falsche eMailadresse .</strong > Es wurde eine

eMailadresse mit falschem Format angegeben. Bitte&uuml;berpr&uuml;fen Sie Ihre Eingaben!</p>

15 <?php16 break;17 }18 if($mail ->sendNow ()){ //Mail verschicken geglueckt19 ?>20 <h2>Nachricht abgeschickt </h2>21 <p>Ihre Nachricht wurde soeben versendet. Ich versuche

sie m&ouml;glichst bald zu beantworten .</p>22 <p>Sollte wider erwarten keine Antwort erfolgen , so kann

es sein , dass die eMail beim Versand in den Weitendes Internets verloren gegangen ist. Bitte schickenSie einfach eine erneute Anfrage.</p>

23 <?php24 }else{25 ?>26 <h2 class="error">Nachricht nicht abgeschickt </h2 >27 <p><strong >Es ist ein Fehler aufgetreten .</strong > Die

eMail konnte leider nicht verschickt werden. Bitteversuchen Sie es sp&auml;ter erneut.</p>

28 <?php

3. Implementierung 33

29 return false;30 }31 break;32 default; // Abfrageformular anzeigen33 include("inc/inc.kontakt.php");34 }

3. Implementierung 34

4. Ergebnis

Im letzten Kapitel wird kurz auf das fertige Produkt eingegangen, um dann in der Schlußbe-trachtung die gesetzten und erfüllten Ziele zu betrachten.

4.1. BetatestKurz nach Vollendung der Programmierarbeit habe ich die Seite öffentlich im W126-Forumvorgestellt1, mit der Bitte an die User, die Seite zu testen und mir eventuelle Verbesserungs-vorschläge mitzuteilen. Das Feedback war mehr als positiv. Fehler in der Programmierungsind hierbei keine in Erscheinung getreten. Der Datenbestand war noch nicht ganz vollstän-dig oder leicht fehlerhaft. Bei so einer Menge an Daten war das durchaus zu erwarten undes konnten somit noch einige Fehler ausgemerzt werden und neue Sonderausstattungscodeshinzugefügt werden.

Beispiele für Änderungen nach dem Betatest:

• Der Farbcode 618 (Mimosengelb) wurde um die Zusatzinformation „Ab 07/81 wardiese Lackierung nicht mehr bestellbar.“ ergänzt.

• Der SA-Code 260 (Typenkennzeichen auf Heckdeckel, Wegfall) wurde mit Beschrei-bung und Bild ergänzt.

• Der SA-Code 630 (ECE-Warndreieck) wurde hinzugefügt.

• Der SA-Code 823 (Zusatzteile Abgasreinigung für Schweiz-Ausführung bei KAT-Ausrüstung.)wurde hinzugefügt.

• Der Lackcode 923 (Lapisblau) wurde um die Zusatzinformation „Lieferbar von 10/79bis 05/84.“ ergänzt.

• Der SA-Code 823 (Zusatzteile Abgasreinigung für Schweiz-Ausführung bei KAT-Ausrüstung.)wurde hinzugefügt.

• Der SA-Code 823 (Zusatzteile Abgasreinigung für Schweiz-Ausführung bei KAT-Ausrüstung.)wurde hinzugefügt.

• Der SA-Code 823 (Zusatzteile Abgasreinigung für Schweiz-Ausführung bei KAT-Ausrüstung.)wurde hinzugefügt.

1Das genaue Thema findet sich unter folgendem Link: http://f11.parsimony.net/forum16936/messages/125726.htm

4. Ergebnis 35

4.2. Das fertige ProduktDas fertige Produkt dieser Studienarbeit kann man in Abbildung 3.1 betrachten. In jedem dergetesteten Browser funktioniert die geschriebene Applikation ohne Einschränkungen. LeichteUnterschiede im Design sind auf die verschiedenen Rendering-Engines2 der Browser zurück-zuführen. Da auf XHTML-konformen Code geachtet wurde, müssten die Browserherstel-ler auf eine korrekte Implementierung wertlegen. Die Anwendung kann unter der Adressehttp://w126.xmariox.com/sa/ ausprobiert werden.

4.3. SchlußbetrachtungEs wurden konkret folgende Ziele zu Beginn der Arbeit festgelegt:

• Die Seiten sollen valides XHTML 1.0 mit dem Dokumententyp Transitional sein.

• Ebenso sollen die CSS-Dateien mit dem Validator des W3C validieren.

• PHP Code soll weitestgehend objektorientiert geschrieben sein.

• Die Daten werden in einer MySQL Datenbank gespeichert.

Hinzu kamen während der Arbeit, teils aus Interesse, teils der Vollständigkeit halber, fol-gende Ziele:

• Ein Apache-Webserver soll als Entwicklungsserver dienen und durch Virtual Hosts er-reichbar sein.

• Um die Webseite komplett zu machen, soll eine Kontaktmöglichkeit für Benutzer ge-schaffen werden. Hierbei fiel zusätzlicher Programmieraufwand für eine Mailfunktionan.

Wie man aus der vorangegangenen Lektüre dieser Dokumentation entnehmen kann, sindalle oben erwähnten Ziele erfüllt worden. Dabei waren besonders das Anlegen der richtigenMySQL-Tabellen ein wichtiger Schritt und Lerneffekt. Ebenso die für mich völlig neue, objek-torientierte Art zu programmieren war anfangs gar nicht so einfach zu meistern. Die Theoriein die Praxis umzusetzen, hört sich manchmal leichter an, als es wirklich ist. Gerade hier ha-be ich einen enormen Schritt nach vorne gemacht und mein Wissen erweitert. Mir fiel dabeibesonders auf, dass sehr viel Aufwand im Abfangen von Fehlern, z.B. durch falsche Eingabeneines Benutzers, steckt. Die eigentliche Logik entsteht für konforme Eingaben recht schnell,doch alle Fehler abzufangen und dazu eine entsprechende Meldung auszugeben, macht einigesan Mühe.

Mit der vorliegenden Endversion der Anwendung bin ich sehr zufrieden. Sie erfüllt allemeine Kriterien und Erwartungen, die anfangs aufgestellt wurden. Der Betatest (siehe 4.1)hat zudem gezeigt, dass die Anwendung recht einfach zu pflegen ist.

2Jeder Browser besitzt eine Rendering-Engine, um die HTML- bzw. CSS-Textdateien formatiert am Bild-schirm auszugeben.

4. Ergebnis 36

4.4. AusblickDie Anwendung wird auch in Zukunft produktiv eingesetzt, was gleichzeitig bedeutet, dass sieauch weiterentwickelt werden soll. Das betrifft einerseits die Inhalte der Datenbank, die unterMithilfe von verschiedenen Forenmitgliedern durch neue oder verbesserte Sonderausstattungs-codes und Fotos erweitert werden soll und andererseits die Programmlogik. Hier bietet es sichspeziell an, eine Adminoberfläche zu programmieren, über die man die Datenbank bequemverwalten kann. So entfällt der Schritt über PHPmyAdmin.

4. Ergebnis 37

A. Anhang

A.1. Inhalte der CD-ROMDie beiliegende CD-ROM ist in die folgenden Bereiche untergliedert:

• /datenbank_dump/: SQL-Dump der Datenbank.

• /design_daten/: Photoshop- und Illustratordateien mit Designentwürfen.

• /dokumentation/: Dokumentation und Zeitplan im PDF-Format

• /webroot/: Kopie des Wurzelverzeichnisses von http://w126.xmariox.com/sa/.Hier sind alle PHP-Skripte und HTML-Dateien enthalten.

Eine Datei namens read_me.txt im Stammverzeichnis enthält zusätzliche Informationen.

A.2. Informationen zur benutzten Software• HTML- und Texteditor: Macromedia Homesite

• Bildbearbeitungsprogramm: Adobe Photoshop

• Vektorbearbeitungsprogramm: Adobe Illustrator

• ER-Schemata: DIA

• Datenbank: PHPmyAdmin

• Dokumentation: LATEX (MiKTeX und TeXnicCenter)

A. Anhang 38

Literaturverzeichnis

[1] diverse Autoren. PHP FAQ der IRC-Channels #php und #php.de. http://www.php-q.net/.

[2] diverse Autoren. PHP FAQ der Newsgroups de.comp.lang.php.*. http://www.php-faq.de/.

[3] diverse Autoren. Wikipedia - Die freie Enzyklopädie. http://de.wikipedia.org/.

[4] Paul Dubois. MySQL - Entwicklung, Implementierung und Referenz. Markt & Technik,2000.

[5] Marc Liyanage. Mysql Database Server. http://www.entropy.ch/software/macosx/mysql/.

[6] The W3C Validator Team. W3C CSS Validator. http://jigsaw.w3.org/css-validator/.

[7] The W3C Validator Team. W3C HTML Validator. http://validator.w3.org/.

Literaturverzeichnis 39