- home.hs

KERSTIN HUPPENBAUER
Einsatz der Kartographie in einem e-Shop
Diplomarbeit
Durchgeführt bei der Kümmerly + Frey AG, Zollikofen-Bern
Unter der Leitung von Prof. Hans Kern
Von Januar-Mai 2001
1
Inhalt
Einleitung ......................................................................................................................... 3
Ausgangslage und Ziel ................................................................................................. 3
Grundzüge der Anwendung ......................................................................................... 3
Eingesetzte Techniken.................................................................................................. 3
Kartographie..................................................................................................................... 5
Shop ................................................................................................................................. 7
Information....................................................................................................................... 9
Informationen zu einer Region ................................................................................... 10
Postkartenversand ...................................................................................................... 10
Literaturverzeichnis ........................................................................................................ 11
2
Einleitung
Ausgangslage und Ziel
Bei der Kümmerly + Frey AG ist ein e-Shop im Aufbau, welcher Produkte anbietet, die
sich auf einen eingeschränkten geographischen Raum beziehen.
Ziel der Diplomarbeit ist eine Erweiterung des Shops, die die geographische Suche und
Darstellung der Artikel ermöglicht.
Grundzüge der Anwendung
Die Anwendung gliedert sich in die Bereiche Kartographie, Shop und Information.
Im Kartographieteil lässt sich über die Volltextsuche oder Übersichtskarte ein
Kartenausschnitt wählen, der über Zoom- oder Navigationsfunktionen genauer
bestimmt werden kann. Zu diesem Kartenausschnitt lassen sich alle vorhandenen
Artikel, abhängig von den gewählten Artikelgruppen, im Shop anzeigen und bestellen.
Der Informationsbereich ist zunächst in den Shop integriert und bezieht sich lediglich
auf die Regionen der angezeigten Artikel, kann in Zukunft aber weiter ausgebaut
werden.
Als Erweiterung der Anwendung wurde eine Benutzerregistrierung sowie eine Funktion
zur Ausgabe des Webinhalts in der vom Benutzer gewählten Sprache realisiert. Lässt
sich der Benutzer mit einem Benutzernamen und Passwort registrieren, so hat er auch
nach einer Unterbrechung der Netzwerkverbindung Zugriff auf seinen in einer früheren
Sitzung gefüllten, aber noch nicht bestellten Warenkorb. Gibt er bei der Anmeldung
zusätzlich seine Daten an, wird aus diesen Daten automatisch das Bestellformular
generiert, so dass sie nicht bei jeder Bestellung erneut eingegeben werden müssen.
Eingesetzte Techniken
Der Grundgerüst einer Webseite bilden die HTML-Befehle zum Markieren der
Elemente. Da mit HTML alleine aber nur statische Webseiten erstellt werden können,
sind weitere Skriptsprachen wie JavaScript und PHP notwendig.
Im Mittelpunkt der Anwendung steht die Karte, die vom Benutzer erzeugt und durch
Interaktionen verändert werden kann, und über die alle Artikel einer Region ermittelt
werden können.
Die Anzeige der Karte erfolgt durch die MapGuide LiteView Extension, einer
Komponente von MapGuide der Firma Autodesk. Karten, die zuvor mit MapGuide
Author erstellt wurden, wandelt die LiteView Extension in ein für das Internet
geeignetes Rasterformat (PNG) um. Die Rasterbilder können mit HTML in die
3
Webseite eingebunden werden. Durch Angabe der Eckkoordinaten wird der gewünschte
Kartenausschnitt angezeigt.
Das Herzstück der Anwendung stellt die Datenbank dar, durch deren Einsatz sich
dynamische Webanwendungen auf einfache Weise realisieren lassen. Der Webserver
bezieht aus der Datenbank seine aktuellen Informationen für den Inhalt der Webseite, so
dass Änderungen nur an dieser Stelle vorgenommen werden müssen.
Eine Datenbank ist eine strukturierte Sammlung von Daten, die mit einer speziellen
Sprache bearbeitet werden kann. Die Struktur der Daten und die Beziehungen
dazwischen werden in einem Datenmodell festgelegt. Dabei hat sich das auf E. F. Codd
zurückgehende relationale Datenmodell durchgesetzt, in dem die Daten in Form von
Tabellen organisiert werden.
Zur Erzeugung, Bearbeitung und Verwaltung der Daten wird ausserdem eine Software
in Form eines Datenbank-Management-Systems benötigt. Hier wurde auf MySQL
zurückgegriffen, das sich durch Geschwindigkeit, Stabilität und einfache Handhabung
auszeichnet und somit für den Einsatz im Internet anbietet.
Die Daten können mit der standardisierten Sprache SQL (Structured Query Language)
bearbeitet werden. MySQL, das SQL als Abfragesprache benutzt, unterstützt
weitgehend diesen Standard. SQL bietet Befehle zum Definieren und Manipulieren
(abfragen, einfügen, verändern und löschen) von Daten.
Mit der Sprache PHP werden aus dem Datenbankinhalt die HTML-Seiten dynamisch
generiert. PHP ist eine serverseitige, in HTML eingebettete, plattformunabhängige
Skriptsprache zur Erstellung dynamischer Webseiten.
Die Syntax von PHP ähnelt der von C, Java und Perl. Dabei zeichnet sich PHP durch
den riesigen Funktionsumfang (über 1200 Funktionen aus nahezu allen
Anwendungsbereichen) aus. Ein Schwerpunkt liegt in der Datenbankanbindung, wobei
MySQL besonders gut unterstützt wird.
Der PHP-Code wird direkt in den HTML-Code eingebunden und vom Webserver beim
Aufruf der Seite in HTML-Code umgewandelt. So bleibt der eigentliche Code dem
Browser und damit dem Besucher der Seite verborgen. Damit der Webserver den PHPCode erkennen und ausführen kann, haben die Dateien die Dateiendung *.php.
Ausserdem ist ein PHP-Interpreter erforderlich. Unter Windows wird PHP als CGISkript konfiguriert, unter UNIX kann es auch als Servermodul eingesetzt werden.
Da sich PHP durch die freie Verfügbarkeit im Internet ständig weiterentwickelt, sei für
aktuelle Informationen auf die offizielle PHP-Homepage http://www.php.net verwiesen.
Hier steht auch die aktuelle Version zum kostenlosen Download zur Verfügung.
Ausserdem findet man dort das offizielle Handbuch und neben Tutorien weitere
Informationen für den erfolgreichen Einsatz von PHP.
4
Kartographie
Beim Start der Anwendung öffnet sich die Homepage mit den Funktionalitäten des
Kartographieteils. Dieser besteht aus dem Kartenausschnitt, der über die Eingabe eines
Ortes oder einer Postleitzahl oder durch Klicken in die Übersichtskarte bestimmt
werden kann, und durch einen Rahmen in der Übersichtskarte gekennzeichnet wird.
Durch Anklicken der Interaktionsbutton werden die Funktionen zum Zoomen und
Navigieren innerhalb des Kartenausschnitts ausgeführt. Ausserdem können die Artikel
zu einem Punkt des Kartenausschnitts abgefragt werden, über einen Link läßt sich der
Shop betreten. Daneben hat der Benutzer die Möglichkeit, eine Sprache zu wählen, sich
für den Shop zu registrieren und sich mit seinem Benutzernamen und Passwort
einzuloggen.
Abb. 1: Anzeige des Kartenausschnitts
Für die Anzeige des in der Volltextsuche eingegebenen Ortes kann der Benutzer
zusätzlich eine Zoomstufe wählen (Region, Kanton, Bezirk, Stadt). Durch einen Klick
auf den Button mit dem Umriss der Schweiz wird der Kartenausschnitt ins
Kartenfenster geladen und in der Übersichtskarte durch einen Rahmen markiert.
Ausserdem wird die gewählte Zoomstufe im Interaktionsfenster angezeigt, indem der
entsprechende Balken gekennzeichnet wird.
Dies erfolgt mittels JavaScript Methoden, durch die auf die Objekte der Webseite
zugegriffen werden kann.
5
Die Koordinaten des Ortes werden durch eine Datenbankabfrage ermittelt. Enthält die
Ergebnisliste genau einen Eintrag, war die Eingabe des Benutzers eindeutig, so dass
sich anhand der Koordinaten und der gewählten Zoomstufe die Parameter für die
Anzeige des Kartenausschnitts durch die MapGuide LiteView Extension berechnen
lassen. Enthält die Ergebnisliste dagegen mehrere Einträge, weil mehrere Orte den
gleichen Ortsnamen oder die gleiche Postleitzahl haben, so wird das Textfeld durch eine
Auswahlliste mit den vorhandenen Orten und deren Postleitzahl ersetzt, aus der der
Benutzer einen Eintrag wählen kann. Durch einen erneuten Klick auf den Button wird
der Kartenausschnitt ins Kartenfenster geladen.
Auf diese Weise ist hier eine Suchfunktion integriert. Gibt der Benutzer nur die
Anfangsbuchstaben eines Ortsnamens oder die Anfangsziffern einer Postleitzahl ein, so
bekommt er eine Auswahl aller Orte die mit diesen Buchstaben beginnen oder deren
Postleitzahl mit diesen Ziffern beginnt.
Der Rahmen zur Kennzeichnung des Kartenausschnitts in der Übersichtskarte wird
mithilfe der PHP-Graphikfunktionen dynamisch erzeugt. Dazu wird eine spezielle
Graphikbibliothek benötigt, die hinzugeladen werden kann, sofern PHP nicht mit dieser
Bibliothek übersetzt wurde. Die Definition des Rahmens erfolgt in einem weiteren
Skript, das als Quelle eines HTML-<IMG>-Tags aufgerufen wird. Dieses Skript darf
nur Bilddaten liefern.
Neben der Volltextsuche kann ein Kartenausschnitt auch durch Anklicken eines Punktes
in der Übersichtskarte erzeugt werden. Hierbei werden die Bildschirmkoordinaten des
angeklickten Punktes in Landeskoordinaten umgerechnet, anhand derer und der
vorgebenen Zoomstufe die Parameter für den Kartenausschnitt ermittelt werden. Die
übrigen Schritte zur Darstellung des Kartenausschnitts entsprechen denen über die
Volltextsuche.
Das Interaktionsfenster befindet sich rechts vom Kartenfenster. Wurde ein
Kartenausschnitt ins Kartenfenster geladen, kann dieser durch die Zoom- oder
Navigationsfunktionen genauer bestimmt werden. Daneben lassen sich über eine Info
die darin enthaltenen Artikel anzeigen sowie der Shop zur Auswahl und Bestellung der
Artikel betreten.
Die Funktionen für die Interaktion können in zwei Gruppen eingeteilt werden. In
Aktionen, die sich direkt auf den Kartenausschnitt auswirken, sobald der Benutzer auf
den dafür vorgesehenen Button klickt (Navigation, Zoom, Unzoom) und in Aktionen,
bei denen der Benutzer durch Klicken in die Karte einen Punkt wählen muss, auf den
sich die Aktion auswirkt (Zoomin, Zoomout, Center, Info). Bei diesen Aktionen muss
der Button durch Anklicken zunächst aktiviert werden und bleibt so lange aktiv, bis ein
anderer Button angeklickt oder ein neuer Kartenausschnitt ins Kartenfenster geladen
wird. Der Benutzer erkennt den aktivierten Button an dessen aktiviertem Bild. Klickt er
nun in die Karte, so wird die zugehörige Aktion auf diesen Punkt angewendet.
6
Der Unterschied zwischen Zoomin/Zoomout und Zoom besteht darin, dass bei
Zoomin/Zoomout auf einen frei wählbaren Punkt in der nächsten Zoomstufe gezoomt
wird, während bei Zoom auf den Mittelpunkt in einer frei wählbaren Zoomstufe
gezoomt wird. Unzoom stellt den Ausgangszustand des Kartenausschnitts wieder her.
Shop
Nach der Bestimmung eines Kartenausschnitts im Kartographieteil lassen sich im Shop
alle Artikel zu diesem Ausschnitt ermitteln.
Ebenso lassen sich nach Eingabe eines Ortes in der Volltextsuche durch Anklicken des
Landkartensymbols alle Artikel zu diesem Ort bestimmen.
Für die Ermittlung der Artikel kann der Benutzer zunächst die Artikelgruppen wählen,
und falls sich die Artikelsuche auf einen Ort bezieht, zusätzlich den Radius, innerhalb
dessen gesucht werden soll, angeben. Die Anzeige der Artikelgruppen wird aus dem
Datenbankinhalt generiert, so dass die Auswahl auch bei neu hinzukommenden
Artikelgruppen immer aktuell ist. Ausserdem lässt sich bestimmen ob nur Artikel, die
komplett innerhalb des Suchbereichs liegen, angezeigt werden sollen oder auch solche,
die über diesen Bereich hinausgehen.
Die Anzeige der gefundenen Artikel besteht aus dem Titel, dem Preis sowie einem
Symbol zur Kennzeichnung der Artikelgruppe. Daneben ist ein Infobutton für
Informationen der dazugehörigen Regionen zu finden. Über ein Textfeld und einen Pfeil
lässt sich die gewünschte Anzahl an Artikeln in den Warenkorb legen. Der Titel ist mit
einer Artikelinfo verlinkt.
Die Artikelinfo besteht aus dem Artikelcover, der Artikelbeschreibung, der Möglichkeit
den Artikel in den Warenkorb zu legen, sowie der Kennzeichnung des Artikels in einer
Übersichtskarte durch einen Rahmen. Der Rahmen ist mit einem kleinen
Kartenausschnitt verlinkt, der das vom Artikel abgedeckte Gebiet darstellt.
7
Abb. 2: Anzeige der gefundenen Artikel und einer Artikelinfo
Innerhalb des Shopbereichs kommt dem Warenkorb eine zentrale Bedeutung zu. Artikel
können vorgemerkt und schliesslich auch bestellt werden, indem sie in den Warenkorb
gelegt werden. Daneben stehen dem Benutzer Funktionen zur Bearbeitung des
Warenkorbs zur Verfügung, indem einzelne Artikel oder der gesamte Warenkorb
wieder gelöscht, die Anzahl der Artikel geändert und schliesslich die Bestellung
aufgegeben werden kann.
Eine Warenkorbübersicht (Anzahl der Artikel und Gesamtpreis) neben der Artikelliste
geben dem Benutzer jederzeit einen Überblick über seinen aktuellen Warenkorb. Sobald
der Benutzer einen neuen Artikel in den Warenkorb legt, wird die Übersicht aktualisiert.
Durch einen Klick auf das Warenkorbsymbol innerhalb der Übersicht öffnet sich ein
neues Fenster mit dem detaillierten Warenkorbinhalt.
8
Abb. 3: Warenkorb der Shopanwendung
Das Textfeld, in das die Artikelanzahl eingetragen ist, kann vom Benutzer editiert
werden. Durch Anklicken des Buttons „neu“ wird die neue Anzahl übernommen. Ein
Artikel wird gelöscht, indem die Artikelanzahl auf 0 gesetzt wird. Ausserdem lässt sich
der gesamte Warenkorb durch einen Klick löschen.
Durch Anklicken des Links „zur Kasse gehen“ wird die Bestellung eingeleitet. Sind in
der Datenbank die dafür benötigten Benutzerdaten bereits gespeichert, wird aus diesen
Daten das Bestellformular generiert. Mit dem Aufgeben der Bestellung erhält der
Kunde zur Bestätigung eine automatisch generierte E-Mail mit den Daten der
Bestellung. Ausserdem wird der Shopbetreiber über den Eingang der Bestellung
ebenfalls per E-Mail informiert.
Information
Die Information stellt den dritten Teil der Webanwendung nach Kartographie und Shop
dar. Hier findet der Benutzer Informationen zu den Regionen, die von den einzelnen
Artikeln abgedeckt werden. Als Zusatz besteht die Möglichkeit, eine digitale Postkarte
aus einer dieser Tourismusregionen zu versenden.
Der Informationsteil stellt einen Zusatz der Anwendung dar, über den der Benutzer zum
Kauf der Artikel angeregt und an die Webseite gebunden werden soll.
Durch einen Klick auf den Info-Button in der Artikelliste gelangt der Benutzer zum
Informationsteil. Bezieht sich der Artikel nur auf eine Region, werden die
Informationen direkt im darunterliegenden Fenster angezeigt. Werden dagegen mehrere
9
Regionen durch den Artikel abgedeckt, so kann der Benutzer zunächst eine Region
wählen, zu der er Informationen wünscht, oder aus der er eine Postkarte versenden will.
Abb. 4: Informationen zu einer Region
Informationen zu einer Region
Die Regionen eines Artikels werden ermittelt, indem zu jedem Ort des Artikels die
zugehörige Region bestimmt wird.
Die Informationen zu dieser Region stammen aus einer Textdatei, deren Inhalt mithilfe
einer PHP-Funktion ausgegeben wird. Änderungen können in dieser Datei
vorgenommen werden, wodurch immer die aktuellsten Informationen angezeigt werden.
Für die Anfangsphase besteht die Information aus einem Link zur Tourismusseite der
Region, soll in Zukunft aber weiter ausgebaut werden.
Postkartenversand
Von der Regionsinfo aus führt ein Link zum Postkartenversand. Dort stehen mehrere
Bilder aus der Region zur Auswahl. Die Bilder lassen sich durch einen Klick auf das
gewünschte Bild vergrössern. Das Bild lässt sich als Postkarte verschicken, indem der
Benutzer den dazugehörigen Radiobutton markiert, seinen Namen und seine E-Mail
Adresse sowie den Namen und die E-Mail Adresse des Empfängers in die dafür
vorgesehenen Textfelder einträgt. Schliesslich gibt er die Nachricht, die mit der
Postkarte verschickt werden soll, in das mehrzeilige Textfeld ein.
Die Vorschau zeigt Bild und Nachricht der Postkarte so an, wie sie auch der Empfänger
sehen würde. Über den Löschen-Button lassen sich alle Einträge wieder löschen.
10
Abb. 5: Postkartenversand
In der Vorschau hat der Benutzer die Wahl, ob die Postkarte so verschickt werden soll,
oder ob noch Änderungen vorgenommen werden sollen.
Soll die Postkarte verschickt werden, werden zunächst die Angaben des Benutzers auf
Vollständigkeit überprüft. Die Daten für die Postkarte werden in der Datenbank
gespeichert und der Empfänger erhält eine E-Mail, in welcher ihm der Link mitgeteilt
wird, über den er seine Postkarte vom Server abrufen kann. Dazu hat er sieben Tage
Zeit, anschliessend wird die Postkarte vom Server entfernt, indem die zugehörigen
Daten aus der Datenbank gelöscht werden. Für den Benutzer wird im Browserfenster
angezeigt, dass die Postkarte erfolgreich versandt wurde.
Literaturverzeichnis
AUTODESK, 2000: MapGuide Benutzerhandbuch.
AUTODESK, 2000: MapGuide LiteView Extension Developer’s Guide.
GAMPERL, Johannes & Wolfgang NEFZGER 1999: JavaScript-Praxisbuch. Poing.
KOCH, Stefan 1999: JavaScript. Einführung, Programmierung, Referenz. Heidelberg.
KRAUSE, Jörg 2000: PHP Grundlagen und Lösungen. München.
LERDORF, Rasmus 2000: PHP kurz & gut. Köln.
MINTERT, Stefan 1996: JavaScript. Grundlagen und Einführung. Bonn.
STOLL, Rolf D. & Gudrun A. LEIERER 2000: PHP 4 & MySQL. Düsseldorf.
11
YARGER, Randy & George REESE, Tim KING 2000: MySQL & mSQL. Köln.
Quellen aus dem Internet
AUTODESK MAPGUIDE: http://www.mapguide.com
DYNAMIC WEBPAGES: http://www.dynamic-webpages.de
KÖHNTOPP, Kristian: PHP FAQ. http://www.koehntopp.de/php
MÜNZ, Stefan: Selfhtml. http://www.teamone.de/selfhtml
MYSQL: http://www.mysql.com
PHP-HOMEPAGE: http://www.php.net
PHP-CENTER: http://www.php-center.de
REEG, Christoph: Datenbank, MySQL und PHP.
http://ffm.junetz.de/members/reeg/DSP/
STEPKEN, Guido: MySQL-Datenbankhandbuch. http://www2.little-idiot.de/mysql/
WASSERMANN, Alfred: Dynamische Webseiten-Generierung.
http://www.php-center.de/tutorial/
12