- home.hs
Werbung
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
