Skript: EWA - Fachbereich Informatik

Transcription

Entwicklung webbasierter Anwendungen
WS 2007/08
c Dr.
Ute Blechschmidt-Trapp
Darmstadt, 4. Oktober 2007
Version 2.0
Inhaltsverzeichnis
1 Installationshinweise
6
2 Einleitung
7
3 Webengineering
3.1
10
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
3.1.1
Besonderheiten von Webanwendungen
. . . . . . . . . . . . . . . . . . .
10
3.1.2
Kategorien von Webanwendungen . . . . . . . . . . . . . . . . . . . . . .
13
3.2
Planung
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
14
3.3
Internationalisierung und Lokalisierung . . . . . . . . . . . . . . . . . . . . . . .
21
3.3.1
Internationalisierung
3.3.2
Lokalisierung
3.4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
Usability - Bedienbarkeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
3.4.1
Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
3.4.2
Ärgerliche Eigenschaften einer Seite . . . . . . . . . . . . . . . . . . . . .
24
3.5
Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
3.6
Barrierefreiheit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
3.6.1
Zielgruppe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
3.6.2
Analyse guter Seiten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
3.6.3
Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
Links zum Thema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
33
3.7
4 Grundlagen
4.1
4.2
4.3
34
Historie
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Protokolle
34
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
4.2.1
TCP/IP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
4.2.2
HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
Links zum Thema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
38
5 HTML und Co
39
5.1
SGML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
39
5.2
HTML Hyper Text Markup Language . . . . . . . . . . . . . . . . . . . . . . . .
39
5.2.1
Documententyp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
5.2.2
XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
41
5.3
5.4
Maÿnahmen für Barrierefreiheit
. . . . . . . . . . . . . . . . . . . . . . . . . . .
45
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
46
5.3.1
Blinde Menschen
5.3.2
Flash, JavaScript und Ajax
. . . . . . . . . . . . . . . . . . . . . . . . .
47
Links zum Thema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
47
6 CSS
48
6.1
Versionen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
6.2
Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
2
Inhaltsverzeichnis
6.2.1
Einbinden eines Styles
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
6.2.2
Selektoren und Grundsyntax . . . . . . . . . . . . . . . . . . . . . . . . .
50
6.2.3
Referenz und Validierung . . . . . . . . . . . . . . . . . . . . . . . . . . .
51
6.2.4
Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
52
6.3
Vorgehensweise zur Umsetzung eines Layouts . . . . . . . . . . . . . . . . . . . .
53
6.4
CSS und Barrierefreiheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
54
6.5
Tipps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
55
6.5.1
Einheiten
55
6.5.2
Problem: Gleichlange Spalten
. . . . . . . . . . . . . . . . . . . . . . . .
55
6.5.3
Hintergrund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
57
6.6
Struktur einer CSS Datei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
57
6.7
Druckansicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
58
6.8
Testen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
58
6.9
Links zum Thema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
58
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7 PHP
7.1
7.2
59
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
59
7.1.1
Allgemein
Konguration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
59
7.1.2
Einbinden von PHP Befehlen
. . . . . . . . . . . . . . . . . . . . . . . .
59
7.1.3
Kommentare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
60
7.1.4
Coding Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
60
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
7.2.1
PHP - die Sprache
Sprachbesonderheiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
61
7.2.2
Variablen und Konstanten
. . . . . . . . . . . . . . . . . . . . . . . . . .
61
7.2.3
Einbinden (include) von Dateien . . . . . . . . . . . . . . . . . . . . . . .
62
7.2.4
Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
62
7.2.5
Stringmwandlung in HTML-Code . . . . . . . . . . . . . . . . . . . . . .
64
7.2.6
Anzeigen der Systeminformationen
. . . . . . . . . . . . . . . . . . . . .
64
7.2.7
Dateiverarbeitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
7.2.8
File Upload
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
7.2.9
Zufall
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
7.2.10 Kontrollstrukturen und Schleifen
. . . . . . . . . . . . . . . . . . . . . .
7.2.11 Abbrechen und Fortsetzen von Anweisungssequenzen
66
. . . . . . . . . . . . . . . . . . . . .
66
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
67
7.2.12 Ausnahmen und Fehlerbehandlung
7.2.13 Klassen
7.2.14 Iteratoren
7.3
3
65
. . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
7.2.15 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
70
Formularverarbeitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
71
7.3.1
Get versus Post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
71
7.3.2
Globale Arrays
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
71
7.3.3
Angrie
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
71
7.3.4
Validierung
7.3.5
Sicherheit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
72
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
7.4
Datenbanken
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
7.5
Automatisches Testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
77
7.6
URL Manipulation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
78
7.7
Links zum Thema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
78
c Dr.
Ute Blechschmidt-Trapp, EWA WS 2007/08
Inhaltsverzeichnis
8 JavaScript - ECMAScript
8.1
8.2
Einführung
80
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
8.1.1
Besonderheiten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
80
8.1.2
Befehle, Schleifen, Kommentare, . . . . . . . . . . . . . . . . . . . . . . . .
81
8.1.3
Ein- und Ausgabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
82
8.1.4
try, catch und Fehlerbehandlung . . . . . . . . . . . . . . . . . . . . . . .
82
8.1.5
Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
82
8.1.6
Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
83
8.1.7
OO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
83
8.1.8
Sicherheit
84
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
84
8.2.1
Validierung von Formularen
Ein erster Versuch
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
84
8.2.2
Reguläre Ausdrücke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
84
8.2.3
Ein zweiter Versuch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
85
8.3
Ajax: Asynchrones JavaScript und XML
. . . . . . . . . . . . . . . . . . . . . .
87
8.4
Tipps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
88
8.5
Links zum Thema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
88
9 Cookies und Sessions
9.1
Cookies
89
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
9.1.1
Cookies serverseitig . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
9.1.2
Cookies clientseitig . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
9.2
Alternativen zu Cookies
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
90
9.3
Sessions
9.4
Sicherheit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
90
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
91
9.5
Links zum Thema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
92
10 Authentizierung
93
10.1 HTTP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
10.2 LDAP
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
10.3 Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
10.4 Session . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
93
A Anhang
94
A.1
HTML-Attribute
A.2
Formularereignisse
A.3
Reguläre Ausdrücke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Listings
4
80
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
94
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
c Dr.
Inhaltsverzeichnis
Zusammenfassung
Die Vorlesung behandelt die Grundlagen von Webprojekten mit Fokus auf PHP, einer weit
verbreiteten, serverseitigen Entwicklungssprache. Das vorliegende Skript ist ein Arbeitsskript.
Sie nden Fragen und Aufgaben im Skript, mit denen Sie Ihr Wissen testen können und Ihre
Kenntnisse über die reinen Vorlesungsinhalte hinaus erweitern können. Am Ende eines jeden
Kapitels nden Sie Links zum jeweiligen Thema.
Anstelle einer geschlechtsneutralen Sprache werden männliche und weibliche Formen im
Wechsel verwendet, selbstverständlich sind damit immer beide Geschlechter gemeint.
Falls Sie Anregungen oder Korrekturvorschläge haben, mailen Sie mir diese bitte zu:
[email protected].
Lösungsvorschläge zu den Aufgaben können Sie mir ebenfalls mailen, ein
Feedback garantiere ich Ihnen.
Viel Spaÿ,
Ute Blechschmidt-Trapp
5
c Dr.
1 Installationshinweise
Besorgen Sie sich folgende Software, sofern Sie nicht nur im Multimedia-Labor arbeiten möchten:
•
•
Webserver xampp
Entwicklungsumgebung elipse: Folgen Sie den Download- und Installationsanweisungen
unter Getting Started with Eclipse PHP Development Tools (PDT) .
•
Automatische Dokumentation des Quellcodes: PHPDoc. Installationsanweisungen können
Sie unter Using PHPEclipse : Installation : Installing the phpDocumentor nachschlagen.
•
•
Gutes Modellierungstool für Datenbanken: DB-Designer.
UML-Modellierungswerkzeug mit automatischer Erzeugung von PHP-Code: ArgoUML.
Konguration des Webservers: Synchronisieren Sie das Dokumentenverzeichnis des Webservers mit der Ablage Ihrer Projektdateien. Dazu müssen Sie die Datei http.conf unter xampp/apache/conf wie folgt abändern:
DocumentRoot "D:\EWA"
und etwas weiter unten
<Directory "D:\VideoOne">
mit
AllowOverride All
Erstellen Sie dann eine Datei .htaccess (Windows lässt Sie diese nicht einfach erstellen, sie
müssen entweder eine aus einem anderen Verzeichnis kopieren oder über die Dos-Shell eine
anlegen) und schreiben Sie in diese beispielsweise (vergessen Sie nicht .; zu Beginn):
php_value include_path ".;D:/EWA/classes"
6
2 Einleitung
Abbildung 2.1: Webanwendung
In dieser Veranstaltung geht es um Webanwendungen. Bei Webanwendungen gibt es immer
einen Client und einen Server und die beiden Programme unterhalten sich über ein TCP/IPbasiertes Protokoll, meist HTTP. Anhand einer einfachen Suchabfrage möchte ich die wesentlichen Begrie und Technologien dieser Veranstaltung, wie sie in Abbildung 2.1 gruppiert sind,
einführen.
Wenn Sie für Ihr Studium Material suchen, werden Sie eine Suchmaschine nutzen. Sie starten
also Ihren Browser und geben in die Adressleiste beispielsweise www.google.de ein. Der Browser
baut über das Protokoll HTTP eine Verbindung zum Computer mit dem Namen www.google.de
auf. Auf diesem Computer läuft ein Programm, ein Webserver (z.B. Apache oder IIS), der diese
Anfrage entgegennimmt und verarbeitet. Der Webserver führt hierzu ein anderes Skript oder ein
anderes Programm, das beispielsweise in PHP geschrieben ist, aus. Dieses Programm führt die
eigentliche Suche durch und erzeugt HTML-Code. HTML ist eine Auszeichnungssprache, die
Daten mit den sie beschreibenden Eigenschaften (Auszeichnung) enthält. Der Browser erhält
diesen HTML-Code als ASCII Code und zeigt die Daten an. Wie die Daten dargestellt werden
(groÿ, klein, schwarz, weiÿ, neben- oder übereinander), deniert ein Verweis auf eine CSS-Datei.
Dieser Verweis ist in dem übermittelten HTML-Code enthalten und wird vom Browser ebenfalls
vom Webserver angefordert.
Einige Webanwendungen verwenden auch Programme, die innerhalb des Browsers ausgeführt
werden. Die übermittelte HTML-Seite kann z.B. einen Verweis auf eine JavaScript-Datei enthalten. Diese wird vom Browser nachgeladen und der Programmcode wird auf dem Client bei
Eintreten eines Ereignisses, wie z.B. das Laden der Seite oder das Klicken einen Knopfes ausgeführt. Auf diese Weise lässt sich ein einfacher Taschenrechner umsetzen. Die Funktionen werden
in JavaScript codiert und der Browser führt den Code aus. JavaScript kann dazu verwendet
werden, Eingabefehler direkt zu melden, ohne dass eine Verbindung zum Webserver hergestellt
werden muss. Mit JavaScript lässt sich auch die Darstellung von HTML-Code verändern, Daten können versteckt werden. Es ist auch möglich, neue Daten in den HTML-Code einzufügen.
Wesentlich ist, JavaScript wird vom Browser ausgeführt.
7
2 Einleitung
Abbildung 2.2: Prinzipieller Ablauf einer Ajax-Anwendung im Vergleich zu einer klassischen
Webanwendung
Neuere Browser stellen JavaScript ein Objekt zur Verfügung, das sogar die Kommunikation zwischen JavaScript und dem Webserver ermöglicht, diese Anwendungen laufen unter dem
Stichwort Ajax oder Web 2.0. Auf diese Weise können neue Anfragen an den Webserver gestellt
werden, der Daten zurückliefert, die von JavaScript an entsprechender Stelle im HTML-Code
eingefügt und vom Browser angezeigt werden. Es ist also nicht notwendig, eine ganze Seite
anzufordern, sondern es kann beispielsweise der Wert einer einzelnen Zelle einer Tabellenkalkulation angefordert werden. Auf diese Weise verwischt der Unterschied zwischen eher behäbigen
Web- und direkt agierenden Desktopanwendungen. Abbildung 2.2 zeigt den Ablauf einer AjaxAnwendung im Vergleich zu einer klassischen Webanwendung.
Die bisher eingeführten Begrie sind das Basisvokabular von Webanwendungen:
XML
eXtensible Markup Language, standardisierte erweiterbare Auszeichnungssprache zur
strukturierten Beschreibung von Informationen in Dokumenten.
HTML
HyperText Markup Language, hierarchische klar festgelegte und nicht erweiterbare
Auszeichnungssprache für Hypertexte.
XHTML
eXtensible HyperText Markup Language, verbindet die Vorteile von HTML mit
denen von XML (siehe hierzu auch ).
CSS
Cascading Style Sheets, deniert das Aussehen, die Formatierung einer Website.
HTTP
HyperText Transfer Protocol.
SOAP
Simple Object Access Protocol , Basis für Webservices.
8
c Dr.
2 Einleitung
JavaScript
Scriptsprache, die im Webbrowser ausgeführt wird - serverseitiges JavaScript stirbt
aus. Zusätzliche Scriptsprachen für den Internet Explorer: VBScript, JScript.
Flash, Quicktime, Silverlight
Webbrowser
Verbreitete Plugins, die Animationen interpretieren/ausführen.
Meist Apache oder IIS, Server, der auf Port 80 lauscht und HTTP-Anfragen
beantwortet
Client
Meist ein Webbrowser, der HTML für Menschen lesbar anzeigt, diese Daten anhand
CSS Anweisungen formatiert, Plugins, Applets und JavaScript ausführt.
PHP
mächtige Skriptsprache, die auf dem Server ausgeführt wird und dynamische Webseiten
erstellt. Alternativen sind z.B. Asp.Net, Java Server Pages, Java, Ruby oder Perl.
Frameworks
Für jede server- und clientseitige Programmiersprache gibt es zahlreiche Frame-
works, die die Entwicklung vereinfachen, wie z. B.
Java-Umfeld Javer Server Faces, Struts, Spring oder Grails.
PHP Zend, Symfony oder Cake
Ruby Ruby on Rails
JavaScript jQuery, Prototype oder Dojo.
9
c Dr.
3 Webengineering
3.1 Motivation
Beispiel 3.1
Aus einer Web-Filmdatenbank sollen Benutzer Informationen über Filme und
die daran beteiligten Personen abrufen können (siehe z.B. www.imdb.org). Dabei enthalten Filmeinträge unter anderem Details zum Filmgenre und der Besetzung, Zitate und Verweise auf
Trailer und den Soundtrack. An Filmen beteiligte Personen sind die Regisseurin, die Produzentin, die Drehbuchautorin, die Komponistin und die Schauspieler. Die Filmdatenbankbenutzerinnen sollen Informationen auf Auührungsorte und Zeiten abrufen können. Registrierte
Benutzer (identiziert durch eine Email-Adresse und ein Passwort) sollen Kommentare zu Filmen eintragen können, Filme und andere Kommentare bewerten, Filmlisten zusammenstellen
und online Karten für Filmvorführungen bestellen. Registrierten Benutzern werden personalisierte Filmempfehlungen und -nachrichten angeboten. Ausführliche Dokumente nden Sie unter
Übung Webengineering LTU München
Wenn Sie an einem Webprojekt mitarbeiten, wird dies üblicherweise keine einfache Homepagebastelei sein, sondern Sie werden eine umfangreiche anspruchsvolle Anwendung entwickeln
oder fehlende Elemente in ein vorhandenes System, wie z.B. ein Content-Management System
einbauen. In jedem Falle, steht zu Beginn eines jeden Webprojekts wie zu Beginn eines jeden
Softwareprojekts eine Spezikation und Planung des gesamten Projekts inklusive Einführung
und Wartung. Es würde den Rahmen dieser Veranstaltung sprengen, alle Einzelheiten des Webengineerings zu diskutieren, aber aufbauend auf Ihren Kenntnissen des Softwareengineerings
möchte ich hier auf Besonderheiten von webbasierten Systemen eingehen, Unterschiede zwischen
einzelnen Systemen betrachten und einige Entwicklungsmethoden vorstellen. Welche Methode
Sie bei welchem Problem anwenden, wird von Ihren Vorlieben, der Umgebung, in der Sie entwickeln (Team, bisherigen Vorgehensweisen, . . . ) und natürlich von der Aufgabenstellung selbst
abhängen.
3.1.1 Besonderheiten von Webanwendungen
Vielleicht sind Sie versucht, folgenden Aussagen zuzustimmen
•
Für eine Webanwendung erstelle ich nur einige HTML-Seiten, am besten mit Frontpage
oder Dreamweaver, fertig.
•
So eine Webanwendung habe ich doch ruck zuck zusammengestrickt, etwas HTML und
das war's, wozu brauche ich eine umfangreiche Planung?
•
Im Web geht es nur um Inhalt und Design, echte Anwendungen gibt es so nicht.
Wenn dem so ist, wie kann es dann zu solchen Pannen kommen:
FAZ 25.02.2005:
Virtuelle Stellenbörse der Bundesagentur für Arbeit nutzlos und teuer -
Unternehmen weichen auf andere Vermittlungsstellen aus.
heise online 13.12.2005:
Computersystem der Börse Tokio erneut im Zwielicht (Ansstelle
einer Aktie für 610.000 Yen (4200 Euro) bot er 610.000 Aktien für jeweils 1 Yen an.)
10
3.1 Motivation
heise online 02.06.2006:
Die Bundesregierung schätzt den Schaden, der durch die fehlerhaft
von der Firma T-Systems programmierte (webbasierten) Software A2LL bei der Bearbeitung
des Arbeitslosengeld II (ALG II) entstanden ist, auf 28 Millionen Euro.
FOCUS 16.1.07:
Polizei-Protokolle stehen im Internet. Das Polizeipräsidium Südhessen hat
versehentlich Einsatzprotokolle mit Namen und Daten kontrollierter Bürger online gestellt.
Ein Polizeibeamter hatte versehentlich auf den falschen Knopf gedrückt und somit waren die
Protokolle nicht wie geplant im Intranet, sondern im Internet publiziert.
Fazit
Natürlich behaupte ich nicht, dass diese Groÿprojekte ohne ordentliche Planung durch-
geführt wurden. Aber sie machen deutlich, dass Webanwendungen komplex und ihre Probleme
vielfältig sind.
Auf die Besonderheiten von webbasierten Anwendungen werden wir nun eingehen, was ist
bei Webanwendungen wichtig? Welchen Problemen müssen Sie sich bei nahezu jeder Webanwendung stellen?
Anforderungsanalyse
Ein Hauptproblem besteht darin, dass die Funktionalität zu keinem Zeitpunkt eindeutig spezizierbar ist. Es gibt wenige Konstanten im System. Aber, sowohl Inhalte als auch Strukturen
und Dienste können hinzugkommen oder wegfallen. Neue Benutzergruppen mit unterschiedlichen Rechten und Sichten können hinzukommen. Eine Webanwendung ist selten fertig. Dennoch
sind Kernfunktionen zu denieren und zu implementieren, die Struktur ist eben so oen zu halten, dass Veränderungen möglich sind.
Benutzerinnen
Bei ebay sind mehrere Millionen Benutzer online, in anderen Anwendungen vielleicht nur fünf.
Die Benutzer sind in der Regel unbekannt und können vor Benutzung der Applikation kein Training erhalten, die Benutzung muss intuitiv sein. Egal wieviele Benutzer das System nutzen, eine
einigermaÿen erfolgreiche Seite hat viele verschiedene Benutzer. Verschiedene Benutzergruppen
können sich im Design und der Sprache auswirken. Umfasst meine Zielgruppe alte und junge
Leute, so muss dies berücksichtigt werden. Alte Leute können in der Regel nicht so gut auf
kleine Links klicken, tun sich mit kleinen Schriften, kontrastarmen Farben, etc. schwer. Junge
Leute stehen oft auf neue Technologien, einer coolen Sprache, kontrastreiche Farben, etc. Aber
es gibt auch Benutzergruppen mit verschiedenen Rechten: Einige können bestimmte Inhalte
editieren, bekommen bestimmte Inhalte/Dienste angezeigt, die anderen versteckt bleiben.
Online
Alles was Sie entwickeln und freischalten, ist direkt bei allen zu sehen, auch Fehler gehen online.
Sieht eine Benutzerin zu viele Fehlermeldungen, ist der Dienst oft nicht verfügbar, wird sie die
Seite vermutlich nicht mehr besuchen. Sie kann auch nicht darüber informiert werden, dass
ein Fehler behoben ist, da sie in der Regel anonym ist. Dauert das Laden einer Seite zu lang,
verabschieden sich ebenfalls viele Besucher umgehend.
11
c Dr.
3.1 Motivation
Verschiedene und neue Technologien
Allein in dieser Vorlesung werden Sie vier verschiedene Syntaxen kennenlernen (HTML, CSS,
JavaScript, PHP). Aber es gibt noch viele weitere Sprachen Asp.Net, Java Server Pages, Java,
Ruby oder Perl, darauf aufbauende Architekturen und Frameworks und weitere Technologien
wie z.B. Webservices. Es ist sicher deutlich einfacher, eine Anwendung mit nur einer Entwicklungsumgebung und einer Sprache zu entwickeln, als Syntax und Funktionalität verschiedener
Sprachen ideal zu nutzen. W3C und die Endgerätehersteller schlafen nicht. Auch wenn wir viele
Technologien gerne früher hätten, gibt es neue Standards und neue Endgeräte am laufenden
Band. Die Applikation wird eventuell nicht nur über einen Browser der neuen Generation mit
1280x1024 Punkten Auösung betrachtet, sonder von alten Browsern mit geringerer Auösung
oder von ganz anderen Geräten wie UMTS Handys, PDAs oder von Screenreadern vorgelesen. Das Web ist erst 25 Jahre alt und hat sich schon sehr stark verändert. Es ist aus dem
Leben vieler nicht mehr wegzudenken und mit diesem Bedarfsmotor wird auch die Technik
vorangetrieben.
Interdisziplinär
Eine normale Desktopanwendung wird üblicherweise aus einem Team von Softwarearchitekten
und -entwicklern, Testern, einer Dokumentationsabteilung, die auch Übersetzungsdienste leistet, und eventuell Datenbankspezialisten entwickelt. Bei der Spezikation oder auch Einführung
vor Ort kommen häug Berater zum Einsatz, die über ein ausgeprägtes Domänenwissen verfügen. Usability-Experten denieren Richtlinien für Dialoge, Designer denieren die Corporate
Identity. Im Web kommen zusätzlich Multimedia-Experten, IT-Spezialisten für Netzwerk und
Webserver, Experten für Informationsgewinnung, auch KI-Leute und Autoren (international)
für den Inhalt dazu. Usability ist auch nicht einmalig zu denieren, sondern eine Expertin sollte
das Team vervollständigen. Diese sollte auch über didaktische Fähigkeiten verfügen oder brauchen wir dafür noch jemanden? Viele Köche verderben bekanntlich den Brei, aber für eine gute
Seite wird man nicht darauf verzichten können. Unterschiedliche Disziplinen bringen oft Kommunikationsprobleme und unterschiedliche Werkzeuge mit sich, die dennoch zusammenspielen
müssen.
International
Die Anwendung wird vielleicht von verschiedenen Nationalitäten und Kulturen benutzt. Dies
kann bedeutet, dass Texte nicht nur übersetzt, sondern Inhalte und Layout gegebenenfalls auch
kulturell anzupassen sind. Die Seite ist 24/7 im Einsatz, Updates sind gut zu planen.
Sicherheit und Privatsphäre
Sicherheit, Bezahlen über das Netz? Die Kreditkarteninformationen preisgeben? Wer hat hier
keine Hemmschwelle? Kann ich dem Anbieter vertrauen. Mittlerweile nden viele Zahlungsvorgänge über das Netz statt und Sicherheit ist dabei ein groÿes Thema. Privatsphäre: Wer kennt
nicht die Einträge Lieschen Müller, Hauptstr. 7, 10000 Berlin. Auch die E-Mail-Adresse wird
ungern herausgegeben, da die Angst vor zusätzlichen Spam-Mails leider berechtigt ist. Auf der
anderen Seite sind Unternehmen daran interessiert, ihre Kunden zu kennen Stichwort Customer Relationship Management CRM (Kundenbeziehungsmanagement) um ihre Produkte
und das zugehörige Marketing anzupassen. Nutzer möchten dagegen lieber nicht zuviel von sich
12
c Dr.
3.1 Motivation
Preis geben und eine gute Anwendung fragt auch nur die tatsächlich notwendigen Informationen
ab.
Kurze Entwicklungszeiten
Webprojekte haben häug nur eine Laufzeit von drei bis sechs Monaten. Die Entwicklung von
umfangreichen Seiten wird oft unterschätzt, der Konkurrenzdruck ist groÿ.
Dokumentenorientiert
Klassischerweise bestehen Websites aus Dokumenten, viele Anwendungen sind daher dokumentenorientiert. Es gibt natürlich auch andere Anwendungen, die Ajax oder Webdienste nutzen
und die Tendenz zu desktopähnlichen Anwendungen ist da. Dennoch besteht die Groÿzahl von
Webpräsentation aus dem Transferieren von HTML-Dokumenten, insbesondere Content Management Systeme basieren darauf. Es sind immer ganze Dokumente an den Client zu senden. Die
Dokumente enthalten unterschiedliche Medien, wie Texte, Bilder, Videos, Tabellen oder Animationen. Eine didaktische Aufbereitung sowie die Berücksichtigung von Usability-Kriterien
sind wichtig. Es ist insbesondere auf die Aktualität der Dokumente zu achten. Eine Website
besteht schnell aus einigen Hundert oder gar Tausend Dokumenten. Die Implementation einer
guten Navigation ist eine groÿe Herausforderung. Wie können bei einer so groÿen Anzahl von
Dokumenten sehr unterschiedliche Nutzer (unterschiedliches Vorwissen, Denkstrukturen, Interessen und Ziele) mit möglichst wenigen Klicks zum Ziel geführt werden? Die Benutzer können
sehr unterschiedliche Wege gehen, um auf eine bestimmte Seite zu gelangen, sie stoÿen auf Ihre
Seite auch nicht notwendigerweise über die Startseite (vielleicht wurden sie über eine Suchmaschine oder einen Link eines anderen Anbieters auf Sie aufmerksam, vielleicht sogar nur über
den Cache einer Suchmaschine und damit über eine ältere Version). Auch kann die Applikation
jederzeit verlassen werden. Da keine dauerhafte Verbindung zwischen Webclient und Webserver
besteht, bekommt dies die Applikation nicht mit.
Personalisierung
Insbesondere angemeldete Benutzer freuen sich über eine personalisierte Erscheinung und individuellen Inhalt, eine auf sie zugeschnittene Navigation. Das kann die eigene Aufgabenliste,
neue Artikel der angegebenen Themenliste, etc sein.
3.1.2 Kategorien von Webanwendungen
Es gibt nicht DIE Anwendung, sondern mit den technischen Möglichkeiten, haben sich auch
die Anwendungen verändert. Man unterscheidet die folgenden Kategorien.
Dokumentenzentriert:
Interaktiv:
statische Seiten, Beispiel: Firmenpräsentation.
HTML-Seiten mit Formularen und serverseitigem CGI, Beispiel: Fahrplanauskunft.
Transaktional:
mit schreibendem Zugri auf eine Datenbank, Beispiel: Online-Banking.
Workowbasiert:
Häug unter Verwendung von Webservices, Beispiele: Versorgungsketten-
management, Chat, Wiki.
Portalorientiert:
Zugri auf unterschiedliche Subsysteme durch Single Sign On, Beispiele:
Entwickler-, Mitarbeiter-, Geschäftskunden-, Lieferanten-, Endkundenportale.
13
c Dr.
3.2 Planung
Ubiquitär:
Personalisierte, ortsabhängige, endgeräteabhängig Anwendungen, Beispiele: Sind
im Kommen.
Semantisches Web:
Durch geeignete Ontologien verbesserte individuelle Wissensdarstellung,
Wissensmanagement, Beispiele: Sind im Kommen.
Web 2.0:
oder auch Web 3.0 mit Ajax & Co, Beispiele: YouTube oder Google Docs & Spreads-
heets.
Es handelt sich nicht um eine strenge Klassizierung, d.h. es gibt beispielsweise Anwendungen, die dokumentenzentriert und transaktional sind. Bevor man eine Webapplikation entwickelt, sollte man sich überlegen, um welche Art von Anwendung es sich handelt und diese mit
den entsprechenden Technologien angehen.
Aufgabe 3.1
Was versteht man unter einem Portal? Was sind besondere Eigenschaften eines
Portals? Erforschen Sie unterschiedliche Portaltypen und charaktierisieren Sie diese.
Aufgabe 3.2
•
•
•
Beschreiben Sie Ihre Anforderungen an Sicherheit und Privatsphäre für
Online-Banking
Online-Belegsystem der Hochschule
Videothek
Aufgabe 3.3
Finden Sie personalisierte Seiten und beschreiben Sie worin die Personalisierung
besteht.
Aufgabe 3.4
Identizieren Sie typische Benutzergruppen der Hochschulseite und charakterie-
sieren Sie diese bzgl. typischer Aufgaben, Rechte etc.
3.2 Planung
Viele Webprojekte werden als einmaliges Projekt bearbeitet. Die Entwicklung erfolgt ad hoc,
der Code ist quick and dirty. Wiederverwendung beschränkt sich auf Copy&Paste. Die Dokumentation beschränkt sich auf Kommentare im Code. Entwurfsentscheidungen sind oft nicht
nachvollziehbar.
Auf den ersten Blick scheint dieses Vorgehen kostengünstig. Sie führen jedoch oft zu schweren
und damit kostenintensiven Problemen bei Betrieb und Wartung: Nachträgliche Änderungen
wirken sich oft an mehreren Stellen aus. Fehler sind nur aufwändig zu nden. Zuverlässigkeit
und Skalierbarkeit sind nicht ausreichend gewährleistet.
Denition 3.1
Web Engineering ist die Anwendung systematischer und quantizierbarer An-
sätze (Konzepte, Methoden, Techniken, Werkzeuge), um Anforderungsbeschreibung, Entwurf,
Implementierung, Test, Betrieb und Wartung qualitativ hochwertiger Webanwendungen kosteneektiv durchführen zu können. Web Engineering bedeutet auch die wissenschaftliche Disziplin,
die sich mit der Erforschung dieser Ansätze beschäftigt.
Ein methodisches Vorgehen führt zu weniger Fehlern im Code, einer besseren Wartbarkeit,
Dokumentation und häug zu wiederverwendbaren Komponenten (wie z.B. für Login, Navigation, Datenbankzugri, Formularvalidierung).
Sie kennen ein methodischen Vorgehen aus der klassischen Softwareentwicklung, nutzen Sie
Ihre Kenntnisse auch für Webanwendungen. Lesen Sie in diesem Abschnitt, was Sie bei Webanwendungen zusätzlich beachten sollten.
Prinzipiell lassen sich folgende Phasen unterscheiden:
14
c Dr.
3.2 Planung
Phase 1:
Strategie und Konzept⇒ Strategische Positionierung der Webaktivität und Priori-
sierung von Konzepten.
Phase 2:
Anforderungsanalyse
⇒
Spezikation
der
Funktionalität,
abzubildenden
Ge-
schäftsprozesse, zu integrierenden Drittsysteme, Priorisierung von Anforderungen
Phase 3:
Entwurf
⇒
Architektur, Datenmodell, Hypertext, Klassendiagramm, Navigation,
Layout
Phase 4:
Phase 5:
Implementierung
(Test)Betrieb
⇒
⇒
Prototyp oder Endsystem
Wartung, Weiterentwicklung, Qualitätssicherung
Diese Phasen werden zum Teil, notfalls auch alle, mehrfach durchlaufen. Folgendes Vorgehen
empehlt sich, auch bei kleineren Projekten: Fangen Sie mit einem Brainstorming nach Auftragseingang an oder auch direkt mit dem Auftraggeber. Diese Ideen gruppieren Sie, machen Sie
sich an eine erste Priorisierung. Anschlieÿend dokumentieren Sie Ihre Gedanken zu folgenden
Fragen:
•
Welche Ziele werden mit der Anwendung verfolgt? Betrachten Sie Seiten mit ähnlichen
Inhalten, übernehmen Sie gute Ideen. Finden Sie Mängel. Beschreiben Sie den Mehrwert
Ihrer Seite.
•
Welchen Nutzen soll die Webanwendung im Vergleich zu bisherigen Anwendungen haben?
Wozu machen wir das? Woran müssen wir uns am Ende messen lassen?
•
Welche Geschäftsprozesse gibt es momentan (sichten Sie alle zur Verfügung stehenden
Dokumente), welche sollen integriert, welche ersetzt werden? Suchen Sie hierzu immer
wieder das Gespräch mit Mitarbeitern, die aktive Teilnehmer dieser Geschäftsprozesse
sind, sie sind ihre eigentlichen Kunden.
•
Was sind die möglichen Benutzer(gruppen)? Versuchen Sie diese zu charakterisieren (Alter, Erfahrung, technisches Verständnis , Aufgaben, Rechte, Sprache, Kultur, . . . ). Warum
kommen die Benutzer auf Ihre Seite?
•
Welcher Inhalt und welche Funktionen werden von welchen Benutzern benötigt? Woher
kommt der Inhalt?
•
•
•
Wer soll den Inhalt pegen? Welche Werkzeuge/Kenntnisse haben die Autoren?
Welche Marketingstrategien gibt es? Wie sieht das Corporate Identity aus?
Gibt es rechtliche Grundlagen/Einschränkungen (z.B. Impressum, Datenschutz, Copyright, . . . )?
•
Welche Anforderungen in Bezug auf Inhalt, Navigation, Systemumgebung, Benutzerinteraktion und Transaktionen gibt es?
•
Gliedern Sie den Inhalt, wieviele Gliederungsebenen brauchen Sie? Gibt es Querverweise
oder parallele Hierarchien, dies ist sinnvoll, um den Denkstrukturen und Interessen der
unterschiedlichen Benutzergruppen zu begegnen. Berücksichtigen Sie dabei das Hinzufügen neuer Gliederungspunkte auf jeder Ebene.
•
Welche Navigationsstrukturen wollen Sie anbieten (guided tour, Index, Sitemap, alternative Sichtweisen auf die gesamte Seite)?
•
•
•
Überlegen Sie sich Szenarien zur Benutzung der Seite.
Wie sehen mögliche Testfälle aus, was ist Qualität?
Welche Schnittstellen zu anderen System sind zu berücksichtigen (lesender/schreibender
Zugri )?
•
15
Welche Risiken sind zu erwarten?
c Dr.
3.2 Planung
•
•
Wie sieht es mit der Skalierbarkeit aus?
Auf welchen Servern soll die Applikation laufen?
Zusätzlich sind Verfügbarkeit, Zuverlässigkeit, Usability, Bedienbarkeit, Verständlichkeit, Erlernbarkeit, Performance, Änderbarkeit und Übertragbarkeit zu berücksichtigen.
Dokumentieren Sie Ihre Ergebnisse mit Hilfe von Anwendungsfällen und Aktivitätsdiagrammen. Leiten Sie aus dieser Analyse und den damit verbundenen Anforderungen Ihre Architektur inklusive der Subsysteme, ein Datenmodell, ein Klassendiagramm, ein Hypertext/Navigationsmodell und ein Präsentationsmodell ab.
Planen Sie verschiedene Iterationen. Testen Sie Bibliotheken automatisch und Prototypen
mit möglichen Benutzern. Lassen Sie das Feedback der Benutzer in weitere Anforderungen etc.
einieÿen, überarbeiten Sie die bisher erstellten Dokumente gegebenenfalls. Implementieren Sie
Methoden zur Qualitätssicherung. Verwenden Sie ein System zur Versionsverwaltung.
Abbildung 3.1: Dimensionen einer Webanwendung
Sie sollten bei der Planung in verschiedenen Dimensionen denken (siehe Abbildung 3.1):
1. Dimension Hypermedia-Ebenen: Inhalt, Hypertext (Verknüpfungen), Darstellung (Sichtweisen)
2. Dimension Entwicklungsphasen: Analyse, Design, Implementation
3. Dimension Aspekte: Struktur, Verhalten
Was bedeutet das beispielsweise in der xz-Ebene?
•
•
(Darstellung, Struktur): Zusammensetzung der Benutzerelemente,
(Darstellung, Verhalten): Reaktionen zu Eingabe, Ereignisse oder sonstiger Interaktion
und Synchronisation zwischen Benutzerelementen.
•
•
•
•
16
(Hypertext, Struktur): Logische Zusammensetzung der Seiten und Navigationsstruktur,
(Hypertext, Verhalten): Laufzeitverhalten des Hypertextes.
(Inhalt, Struktur): Domänenabhängige Datenstruktur,
(Inhalt, Verhalten): Domänenabhängige Applikationslogik.
c Dr.
3.2 Planung
Abbildung 3.2: Entwicklungswerkzeuge nach ihren Methoden und in zeitlicher Abfolge (Quelle:
Nora Koch, Uni München)
Für gröÿere Projekte oder einfach nur, wenn Sie damit Geld verdienen wollen, sollten Sie
Modellierungswerkzeuge und Methoden gezielt einsetzen. Bei der Modellierung von Webanwendungen gibt es viele Werkzeuge. Abbildung 3.2 stellt diese im Überblick dar. Je nachdem,
welche Art von Anwendung Sie planen, sollten Sie sich für das eine oder andere Werkzeug entscheiden. Workowbasierte Anwendungen erfordern eine andere Herangehensweise als Portale.
Wenn Sie schon Erfahrung in UML haben, ist es sicher sinnvoll, eine darauf basierende Methode
wie beispielsweise UWE UWE oder webML zu wählen. Während auch klassische UML Werkzeuge mit Anwendungsfall- und Aktivitätsdiagrammen zur Spezikation der Anforderungen
genutzt werden können, ist die Darstellung der Navigationsstrukturen und Präsentationsmodelle schwierig. Diese werden daher in UWE ergänzt. Neben den OO geprägten Modellierungen
(UWE, OOHDM, OOH) gibt es auch Modelle, die von der Hypermediaentwicklung (WSDM,
HDM) oder der datenorientierten Sichtweise (webML, HERA) abgeleitet wurden. Abbildung
3.3 zeigt Ihnen exemplarisch die einzelnen Entwicklungsphasen in WebML und WSDM.
Nutzen der Webmodellierung
Generell dient die Webmodellierung zur Reduktion der Kom-
plexität, Dokumentation der Entwurfsentscheidungen (oft gibt es Alternativen und am Ende
weiÿ niemand mehr, warum man sich so entschieden hat), Vereinfachte, lesbare und visuelle
Darstellung (Bilder sagen oft mehr), Grundlage zur Kommunikation im Projekt (zwischen den
vielen verschiedenen Teammitgliedern, aber auch immer wieder mit dem Kunden), Trennung
der Aspekte Inhalt, Geschäftslogik, Hypertext und Präsentation.
Zu Beispiel 3.1 können Sie unter Übung Webengineering LTU München Musterlösungen
bezüglich des Webengineerings herunterladen. Daraus sind die folgenden Graphiken extrahiert,
die meiner Meinung nach, Ablauf, Navigation und Datensicht sehr gut illustrieren.
Aufgabe 3.5
Nennen Sie drei Gründe, die für eine iterative Entwicklung von webbasierten
Anwendungen sprechen.
17
c Dr.
3.2 Planung
Abbildung 3.3: Entwicklungsphasen in WebML und WSDM
Aufgabe 3.6
Schreiben Sie eine Spezikation und einen Entwurf für die Aufgabenstellung aus
Beispiel 3.1.
18
c Dr.
3.2 Planung
Abbildung 3.4: Ablauf: Ticketkauf
Abbildung 3.5: Datensicht: Filmdatenbank
19
c Dr.
3.2 Planung
Abbildung 3.6: Navigation: Startseite
Abbildung 3.7: Navigation: Filme kommentieren
20
c Dr.
3.3 Internationalisierung und Lokalisierung
3.3 Internationalisierung und Lokalisierung
Im vergangenen Abschnitt haben Sie sich mit Fragen des Web Engineerings allgemein beschäftigt. Die folgenden Unterkapitel diskutieren ausgewählte Fragestellungen der Webentwicklung,
die auch schon in der Planungsphase zu berücksichtigen sind. Los geht es mit der Möglichkeit,
für internationale Benutzer zu entwickeln.
3.3.1 Internationalisierung
Ziel der Inernationalisierung ist es, eine Website so zu gestalten, dass verschiedene Sprachen und
kulturelle Einüsse ohne zusätzlichen Programmieraufwand eingebaut werden können. Stellen
Sie sich hierzu vor, Sie müssten die Seite einer groÿen deutschen Firma für den chinesischen
Markt frei schalten. Die wortwörtliche Übersetzung des Inhaltes wäre vermutlich schnell erledigt, aber Sie müssen auch unterschiedliche Datums- und Zeitformate, Maÿeinheiten, Währungen, Zahlungs- und Liefermethoden, Rechtsvorschriften, Zeichencodierung (Unterstützen
Datenbank und Formulare Unicode, passt die Zeichengröÿe zum Design vgl. hierzu Abbildung 3.8 wird noch richtig sortiert?), Schreibrichtung (z.B. rechts nach links im arabischen
Raum), . . . berücksichtigen. Neben diesen technischen Aufgaben warten auf Sie auch kulturelle
Besonderheiten, wie die Bedeutung von Farben, Bilder oder ethnische Grundsätze, das ganze
Marketing muss anpassbar sein. Ihre Implementation sollte möglichst exibel sein. Isolieren Sie
alle sprachlichen und kulturspezischen Elemente Ihrer Seite.
Hinweis: In der Literatur wird für Internationalisierung auch häug die Abkürzung I18N
verwendet.
Abbildung 3.8: Internationalisierung: Problem Länge des Übersetzungstextes
3.3.2 Lokalisierung
Lokalisierung bezieht sich auf die Angleichung eines Produkts, einer Anwendung oder eines
Dokuments, um der Sprache, den kulturellen oder anderen Anforderungen eines bestimmten
Zielmarktes (ein lokaler Schauplatz) zu entsprechen. Die Internationalisierung stellt die technischen Möglichkeiten zur Lokalisation bereit. Noch einmal, mit Lokalisierung ist nicht die
einfache Übersetzung in eine andere Sprache gemeint, sondern die Seite sollte der Benutzerin
den Eindruck vermitteln, sie sei für ihr Land entwickelt. Märkte und Bedürfnisse sind Bestandteile einer Kultur, so wie die Marketingstrategien an verschiedene Kulturen angepasst werden,
sollte dies auch mit der Website passieren.
Aufgabe 3.7
Vergleichen Sie die Seiten von IBM für USA www.ibm.com/us/en und Deutsch-
land www.ibm.com/de/de. Wird auf kulturelle Unterschiede eingegangen?
21
c Dr.
3.4 Usability - Bedienbarkeit
Wie bereits in Abschnitt 3.1.1 erwähnt, ist die Benutzeroberäche für jede Webanwendung individuell zu gestalten. Dennoch gibt es allgemeine Elemente, die auf jeder Seite mehr oder weniger
vertreten sind. Um diese momentan verbreiteten und akzeptierten Dokumentenelemente geht
es. Es ist sinnvoll, sich an einem verbreiteten Layout zu orientieren, da sich die Benutzerinnen
so leichter zurecht nden. Es folgt eine benutzerzentrierte Sichtweise.
Viele Internetbenutzer suchen entweder nach Information wo nde ich einen guten kosten-
losen HTML-Editor? oder müssen eine Aufgabe erledigen (Banküberweisung, Kauf ). Wie in
einem groÿen Kaufhaus werden Sie entweder der vorhandenen Ausschilderung (Navigation) folgen oder einen Mitarbeiter fragen (Suchfunktion). Ihre Website sollte beiden Benutzertypen
gerecht werden.
Eine Website muss intuitiv bedienbar sein, Benutzer müssen auf einen Blick den Wert Ihrer
Seite erkennen, denn oft landen sie auf Ihrer Seite über eine Suchmaschine und innerhalb von
Sekunden entscheidet sich, ob die Benutzerin bei Ihnen bleibt oder den nächsten Suchtreer
verfolgt. Ihre Seite sollte ansprechend, klar strukturiert sein und Besucher müssen auf einen
Blick erkennen, was Ihre Seite bietet. Die Benutzerin sollte nicht lange denken oder zögern
müssen. Links sollten klar erkennbar sein, besuchte Links sollten markiert sein. Verzichten Sie
auf Blabla in Ihren Seiten, kürzen Sie Ihre Texte, bis nichts mehr weg darf. Denn Lesen am
Bildschirm ermüdet deutlich mehr und ist bis zu 25% langsamer, als das Lesen eines Buches
oder einer Zeitschrift.
Aufgabe 3.8
Analysieren Sie zehn Seiten Ihrer Wahl, was nden Sie an den Seiten gut, was
schlecht?
Viele Leser scannen Seiten: Sie lesen sie nicht von oben nach unten durch, sondern sind auf
der Suche nach passendem Inhalt oder einem geeigneten Link. Ein klares Seitenlayout hilft der
Orientierung auf Ihrer Seite. Sorgen Sie dafür, dass folgende Elemente beim Scannen erkannt
werden:
Logo und Kurzbeschreibung
Logo
und
aussagekräftiger
Spruch,
der
prägnant
den
(Mehr)wert Ihrer Seite beschreibt.
Hilfsmittel
Kleine Helfer, die oft gebraucht werden, aber nicht in die inhaltliche Hierarchie
einsortiert werden sollen, z.B. Warenkorb, mein Konto oder das Impressum.
Hauptnavigation Die Hauptnavigation Ihrer Seite.
Zweitnavigation und/oder lokale Navigation Die Zweit- und gegebenenfalls Drittnavigation, welche Informationen kann ich von der aktuellen Seite erreichen?
Seitentitel
Der Titel der aktuell angezeigten Seite, der so auch in der Navigationshierarchie
zu nden ist. Dieser sollte klar erkennbar sein.
Wo bin ich?
Durch aufgeklappte Menüs oder Tabs oder auch die zunehmend verbreitetere
Breadcrumb Zeile (Hauptmenue > Untermenue > Knoten).
Suche Eine Suchfunktion.
Textuelle Darstellung des Menues
Diese bendet sich oft am Seitenende, also unten.
Abbildung 3.9 zeigt die angegebenen Elemente, wie sie typischerweise auf Seiten zu nden
sind. Oft bendet sich die Hauptnavigation auch mit der Zweitnavigation zusammen auf der
linken Seite.
22
c Dr.
Abbildung 3.9: Typische Elemente einer Seite zur besseren Orientierung
Aufgabe 3.9
Analysieren Sie Ihre in Aufgabe 3.8 betrachteten Seiten noch einmal mit Blick
auf auf die eben genannte Liste. Vergleichen Sie Ihre Beobachtungen mit der diesbezüglich gut
gestalteten Seite von amazon.com.
3.4.1 Tests
Wenn Sie eine erste Version Ihres Internetauftritts haben aufgrund der iterativen Entwicklung
sollte das auch schon zu Projektbeginn der Fall sein dann suchen Sie sich Testpersonen
oder professionelle Tester. Mit einem Screenrekorder können Sie die Aktionen der Testpersonen
sowie deren Kommentare aufnehmen. Wenn möglich, suchen Sie sich typische Benutzer. Aber
Ihr Bekanntenkreis ndet es vielleicht auch mal lustig, Ihre Seite zu testen. Gehen Sie dabei
wie folgt vor (im Praktikum können Sie etwas abkürzen, aber schlieÿen Sie sich auch hier mit
anderen Gruppen kurz und fordern Sie Feedback ein):
1. Erklären Sie kurz den Zweck des Testens und dass die Testperson nichts falsch machen
kann. Fordern Sie die Testperson auf, ihre Gedanken generell laut zu formulieren, so dass
Sie jedes Zögern zu interpretieren wissen.
2. Weisen Sie darauf hin, dass die Session aufgenommen wird und von wem das Material
angesehen wird.
3. Stellen Sie einige Fragen, wofür das Internet verwendet wird.
4. Starten Sie Ihre Seite, fragen Sie nach dem ersten Eindruck. Reagieren Sie auf etwaige
Fragezeichen aufgrund der Mimik der Testperson, fragen Sie nach, was ist unklar?
5. Fragen Sie, was die Benutzerin zuerst klicken würde.
6. Versuchen Sie mit der Testperson eine echte Aufgabenstellung zu nden, beispielsweise
die Suche nach einem Buch, zu einem bestimmten Gebiet.
7. Lassen Sie die Testperson Ihre Aufgabe erledigen bis sie erfüllt ist oder genervt aufgibt.
Versuchen Sie weitere Aufgaben zu nden.
Werten Sie insbesondere die Fragezeichen aus und korrigieren Sie Ihre Darstellung entsprechend. Die Tests werden die echten Schwachstellen Ihrer Seite oenbaren. Wiederholen Sie die
Tests während Ihrer Entwicklungsiterationen.
23
c Dr.
3.4.2 Ärgerliche Eigenschaften einer Seite
Unter Consumers' Pet Peeves about Commercial Web Sites wird regelmäÿig eine Umfrage
publiziert, was die Benutzer am meisten ärgert und dazu veranlasst, die jeweilige Seite nicht
mehr zu besuchen.
1. Neue Fenster mit Werbung (Pop-up ads): 93,1%.
2. Installation von Zusatzsoftware zum Betrachten der Seite: 89%.
3. Fehlerhafte Verweise:86.0%.
4. Zugang ausschlieÿlich für registrierte Benutzer:83%.
5. Langsam zu ladende Seiten:83.0%.
6. Veralteter Inhalt:82.4%.
7. Verwirrende Navigation:84%.
8. Ineziente Suchfunktion:80.3%.
9. Kontakt über Webformular ausschlieÿlich:75%.
10. Zurück des Browsers deaktiviert:76%.
11. Überladene Seiten, unnötige Splashs etc.:69%.
24
c Dr.
3.5 Navigation
3.5 Navigation
Die Navigation einer Seite ist essentiell. Gut strukturierte Seiten mit klaren Links führen die
Benutzerin an ihr Ziel. Bevor Sie die ersten Seiten erstellen, sollten Vernetzung der Seiten klar
sein. Abbildung 3.10 zeigt, wie Inhalte prinzipiell angeordnet sein können.
Abbildung 3.10: Typische Informationsstrukturen
Auistung
Unverknüpfte Informationsobjekte gleicher Ebene. Diese nden Sie beispielweise in
Form einer Hotlist, einer Linkliste oder beim Index.
Sequenz Folge von verknüpften Informationen, z.B. bei einem Bestelldialog.
Monohierarchie Hierarchische Verknüpfung mit genau einem Pfad zu einem Objekt. Es gibt
keine Zyklen. Häuge Darstellung mit 2, 3 oder mehr Ebenen, als Repräsentation des
gesamten Hypernetzes oder auch nur der Sitemap.
Polyhierarchie
Netz
Im Unterschied zur Monohierarchie kann es verschiedene Pfade zu einem Ob-
jekt geben. Diese Struktur kommt häug vor.
Zusammenhängender, gerichteter Graph mit beliebigen Zyklen. Diese Struktur ist eher
selten.
Sie haben mehrere Möglichkeiten, die Inhalte einer Seite abzulegen. Sie können eine Datenbank, eine XML-Datei oder auch das Dateisystem verwenden. Insbesondere bei der Datenbank
und XML-Datei müssen Sie sich natürlich über das Schema Gedanken machen. Dies sollte auch
die Umsetzung eines geschlossenen Bereichs beinhalten.
Hierarchische Navigationsstrukturen werden in relationale Datenbanken üblicherweise rekursiv dargestellt. Eine wesentlich ezientere Methode bieten verschachtelte Bäume, sogenannte
nested sets, die ich nun kurz einführen möchte, da diese Datenhaltung in der Veranstaltung
Datenbanken üblicherweise nicht gelehrt wird. Diese verschachtelten Bäume sind deutlich effektiver als ein rekursives Datenmodell, WENN vorwiegend lesend zugegrien wird und die
Baumstruktur sich nicht ständig ändert. Gedanklich müssen Sie von der üblichen Baumstruktur in ein Megendiagramm umschalten, siehe Abbildung 3.11.
Jeder Knoten erhält neben seines Namens oder einer anderen Identikation noch die Einträge
links und rechts. Diese beiden zusätzlichen Werte denieren das ineinander Enthaltensein. Sie
nummerieren dabei wie folgt: Der Wurzelknoten A erhält für links die 1, der nächste enthaltene
Knoten, also B für links die nächste Zahl, also die 2, der nächste enthaltene ist C, also für
links die 3, der nächste enthaltene ist D, also für links die 4. D enthält keinen weiteren Knoten
25
c Dr.
3.5 Navigation
Abbildung 3.11: Analogon verschachtelte Bäume: Mengen
und erhält für rechts die nächste Zahl, also die 5. C ist damit abgeschlossen und erhält für
rechts die nächste Zahl, also die 6 usw. Auf diese Weise ergibt sich ein vorgegebener Pfad wie
in Abbildung 3.12 veranschaulicht.
Abbildung 3.12: Verschachtelte Bäume: Vorgegebener Pfad
Durch diese Art der Nummerierung ergeben sich folgende Regelmäÿigkeiten:
•
Wurzel links = 1
•
Wurzel rechts / 2 = Anzahl der Knoten im Baum
•
Blatt rechts - Blatt links = 1
•
Für alle Knoten auÿer der Wurzel gilt: (Knoten rechts - Knoten links - 1) / 2 = Anzahl
der Kind-Knoten
•
26
Alle links- und rechts-Werte sind eindeutig
c Dr.
3.5 Navigation
Tabelle 3.1 zeigt eine Datenbanktabelle zu folgender Navigation einer Website.
•
EWA
HTML
JavaScript
PHP
∗
∗
Einführung
Aufgaben
·
·
∗
einfach
schwer
Links
CSS
∗
∗
Syntax
Beispiele
Id
Titel
links
rechts
100
EWA
1
24
101
HTML
2
3
102
JavaScript
4
5
103
PHP
6
17
104
Einführung
7
8
105
Aufgaben
9
14
106
einfach
10
11
107
schwer
12
13
108
Links
15
16
109
CSS
18
23
110
Syntax
19
20
111
Beispiele
21
22
Tabelle 3.1: Datenbanktabelle MenuNested
Abbildung 3.13 zeigt SQL und Ergebnis zur Erzeugung einer Breadcrumb für den Eintrag
Einführung (Id=104). Anmerkung: Die Ids im Beispiel wurden bewusst groÿ gewählt, um
keine nicht gewünschte Assoziation zu den Einträgen links und rechts aufkommen zu lassen.
Abbildung 3.13: SQL und Ergebnis für eine Breadcrumb Einführung Oder den ganzen Baum mit Ebenen zeigt Abbildung 3.14
27
c Dr.
3.5 Navigation
Abbildung 3.14: SQL und Ergebnis für ein Menu mit Ebenen
Im Netz und auch bei Pear gibt es Klassen zur Verwaltung von Nested Sets, wie Knoten
eingefügt, gelöscht oder verschoben werden können. Insbesondere für Menüs empehlt es sich,
die Ebene als zusätzliche Tabellenspalte aufzunehmen, denn dadurch erleichtern sich weitere
Menüabfragen.
Abbildung 3.15 zeigt SQL und Ergebnis für das direkte (aufzuklappende) Untermenu des
Eintrags PHP (Id = 103).
Abbildung 3.15: SQL und Ergebnis für das Untermenu von PHP Aufgabe 3.10
Stellen Sie folgende Navigationsstruktur rekursiv und unter Verwendung von
verschachtelten Bäumen dar:
•
Start
PHP
∗
∗
28
Einführung
Bücher
CSS
c Dr.
3.5 Navigation
∗
∗
29
Links
Codebeispiele
HTML
JavaScript
•
Impressum
•
Kontakt
c Dr.
3.6 Barrierefreiheit
Auch die Barrierefreiheit einer Webanwendung ist direkt bei der Planung zu berücksichtigen.
Stufen im Web? Ja, auch im Web gibt es Hürden, unnötige Hürden. In diesem Abschnitt
erfahren Sie, welche Hürden es gibt und was diese für einzelne Benutzergruppen bedeuten. Die
daraus abzuleitenden technischen Maÿnahmen werden in Abschnitt 5.3 diskutiert.
Abbildung 3.16: Fehlende Barrierefreiheit im Bau.
Für viele behinderte Menschen erönet sich mit dem Internet eine neue Welt. Sie können neue
Kontakte knüpfen, ersparen sich viele Wege zu Behörden und Banken und können einfacher
an täglich aktuelle Informationen gelangen. Ihre Lebensqualität hat sich durch das Internet
verbessert. Es liegt nun an uns Entwicklern, ihnen möglichst viele Seiten zugänglich zu machen
und Barrieren zu beseitigen. Nutzen Sie die Möglichkeit, das Leben anderer besser zu machen.
Seien Sie diesbezüglich nicht so ignorant, wie manche Architekten (siehe Abbildung 3.16).
Durch Berücksichtigung einiger Maÿnahmen, erweitern wir die potentielle Zielgruppe und die
damit zur Verfügung stehende Kaufkraft erheblich. Klare Strukturen machen eine Seite nicht
nur leichter bedienbar, sondern auch besser wartbar.
Seit 2001 gibt es ein Gesetz, das für Einrichtungen des öentlichen Rechts vorschreibt, die
Internet- und Intranet-Angebote grundsätzlich barrierefrei zu gestalten.
Denition 3.2
Barrierefreies Internet bezeichnet Internet-Angebote, die von allen unabhän-
gig von ihren körperlichen und/oder technischen Möglichkeiten uneingeschränkt genutzt werden
können.
3.6.1 Zielgruppe
Initiert wurde das barrierefreie Internet von Behindertenverbänden. Die Richtlinien sollen blinden, seh-, hör-, oder körperbehindert Menschen die Nutzung des Internets erleichtern. Aber
auch alte Menschen, Menschen mit einem Gipsarm, Menschen mit Koordinationsstörungen wie
durch MS verursacht, Menschen mit Lernstörungen, Migranten mit Deutsch als zweiter Sprache
protieren von wohlgestalteten, barrierearmen Seiten. Von den Maÿnahmen protiern eigentlich alle. Manche wundern sich, warum gehörlose Menschen Probleme mit dem Internet haben
können. Für Gehörlose ist die Gebärdensprache ihre Muttersprache. Die Gebärdensprache hat
ihre eigene Syntax, ihre eigenen Worte. Sie ist nicht eins zu eins in jede Sprache zu übersetzen
und nicht jede Sprache ist eins zu eins in die Gebärdensprache zu übersetzen, insbesondere
30
c Dr.
neuere Begrie bereiten Probleme. Eine einfache Sprache hilft ihnen, den Inhalt einer Seite zu
verstehen. Hier noch mal einige mögliche Beeinträchtigungen und ihre Folgen im Überblick:
Sehbehinderte Menschen
Mögliche Probleme: Unzureichende Kontraste, nicht skalierbare
Schrift/ Schriftgraken, unzureichende Darstellung bei geringer Auösung.
Blinde Menschen
Mögliche Probleme: Mangelhafte Bildbeschreibungen, schlechte Benennung
von Frames, unzureichende Linkbezeichnung, falsche Überschriften, Nichtbedienbarkeit
von Navigation durch Tastatur.
Stark hörgeschädigte und gehörlose Menschen
Mögliche Probleme: Audiodateien, schwer
verständliche Texte.
Manuell-motorisch eingeschränkte Menschen
Mögliche Probleme: Unzugänglichkeit von
Hyperlinks und Nichtbedienbarkeit von Navigation für Tastatur-Nutzer.
Menschen mit kognitiven Einschränkungen
Mögliche Probleme: Schwere Sprache, überla-
dene Seiten.
Menschen mit lichtinduzierter Epilepsie
Mögliche Probleme: Flackernder Inhalt, besonders
gefährlich sind 15 - 35 Hz.
3.6.2 Analyse guter Seiten
Die folgende Aufgabe sollen Ihnen helfen, zu einem eigenen guten Template für Ihre Seiten zu
kommen. Versuchen Sie sich ein gutes HTML-Gerüst, ein gutes Formular und eine gute Tabelle
zu erarbeiten.
3.6.3 Tests
Für Tests können Sie einige automatische Testwerkzeuge (siehe Linkliste in 3.7) verwenden, die
überprüfen, ob jedes Bild eine Beschreibung hat etc., eben das, was automatisch zu testen ist.
Dies kann und sollte jedoch nur ein Minimaltest sein.
Damit Sie ein Gefühl für Ihre Seite bekommen und bevor Sie jemand anderes auf Ihre Seite
lassen, empfehle ich folgende Tests:
•
Schauen Sie sich die Seite ohne Style an, passt die Reihenfolge? Sind Links und Überschriften klar erkennbar?
•
Legen Sie die Maus beiseite und bedienen Sie die Seite ausschlieÿlich über die Tastatur,
wieviele Tabs brauchen Sie wofür? Ist alles erreichbar?
Wenn Sie über das entsprechende Budget verfügen ist es natürlich sinnvoll, Testpersonen mit
verschiedenen Behinderungen hinzuzuziehen.
Aufgabe 3.11
•
Bedienen Sie die folgenden Seiten nur mit der Tastatur:
https://banking.postbank.de Erönen Sie ein Demokonto und erstellen Sie eine Überweisung.
•
•
•
•
•
www.wai-austria.at
http://www.einfach-fuer-alle.de
www.barrierefreies-webdesign.de
www.w3.org/
Finden Sie auf der Seite des Fachbereichs die E-Mail-Adresse des Dekans heraus (der
Name sei Ihnen unbekannt).
31
c Dr.
•
Hier noch ein Negativbeispiel: www.mediamarkt.de. Versuchen Sie diese Seite ohne Maus
zu bedienen. Schauen Sie sich auch hier den Quellcode an, was fällt Ihnen auf ?
•
Installieren Sie sich die Demoversion von Jaws (siehe Linkliste in Abschnitt 3.7) und
geben Sie eine Suche bei ebay ein, versuchen Sie nun von Treer zu Treer zu navigieren.
Welche Seite gefällt Ihnen in Bezug auf Design, Struktur, Bedienbarkeit mit der Tastatur und
Gesamteindruck am besten? Welche am zweitbesten? Schauen Sie sich den Quellcode dieser
Seiten an und leiten Sie sich daraus ein eigenes HTML-Gerüst ab.
32
c Dr.
3.7 Links zum Thema
3.7 Links zum Thema
•
Web Engineering
•
Vorlesungsunterlagen
Buch Web Engineering - Systematische Entwicklung von Web-Anwendungen
webML: Einführung, Beispiele, etc.
WSDM: Publikationen
VisualWade: Vom Design Modell nach OO-H zu PHP Code
Lokalisierung und Internationalisierung
Lokalisierung vs. Internationalisierung (W3C)
W3C I18N Topic Index
Secrets of Web Site Globalization
A daily blog that focuses on the day-to-day challenges and best practices of web
globalization
•
Navigation
•
Steve Krug Don't make me think
Research-Based Web Design & Usability Guidelines
Software Usability Research Laboratory
Jakob Nielsen's Website
Website Engineering - Hinweise zur Gestaltung: Projekt BESTWEBSITE
Barrierefreiheit
33
Baumstruktur, Nested Set Navigation, Download
Usability
•
Nested Sets - Hierarchische Strukturen und Bäume in MySQL
BITV Verordnung zur Schaung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz
Barrierefreies Webdesign: Einfach für Alle - eine Initiative der Aktion Mensch.
Barrierefreies Webdesign - ein behindertengerechtes Internet gestalten
Automatische Testwerkzeuge: Bobby, Barrierender, A-Prompt
Screenreader: Jaws, WindowsEyes, IBM Home Page Reader, WebFormator, Blindows, Virgio,
Testen einer URL bezüglich Farbenblindheit, Colorblind Web Page Filter, Auswahl
guter Farbkombinationen
sehr gute Seite einer blinden Frau
Wie blinde Menschen Internetseiten lesen können
Komplexe barrierefreie Tabellen
c Dr.
4 Grundlagen
Bevor wir mit der Implementierung beginnen, sollten Sie sich noch kurz bewusst machen, womit
Sie es eigentlich zu tun haben und, was hinter den Kulissen passiert. Gerade die Jüngeren unter
Ihnen, kennen das Web als selbstverständlichen Bestandteil Ihres Lebens, wie das Telefon oder
den MP3-Player. Man braucht noch nicht sehr alt zu sein, um sich an die Zeit vor dem Web zu
erinnern, sehen Sie selbst.
4.1 Historie
Mitten im kalten Krieg, vor langer Zeit, schossen die Russen ihre erste Sputnik Rakete ins
All. Daraufhin bekamen die Amerikaner kalte Füÿe und die Militärs gründeten 1958 die Arbeitsgruppe ARPA (Advanced Research Projects Agancy). Geld steht und stand dem Militär in
nahezu unbegrenzten Mitteln zur Verfügung, so auch ARPA. Die Leute, die ARPA vorantreiben
sollten, kamen allerdings aus der reinen Forschung und waren nicht immer so zu kontrollieren,
wie es den Generälen lieb gewesen wäre. Damals gab es wenige Computer und noch weniger mit
einer brauchbaren Rechenleistung. Die Amerikaner entwickelten mit vereinten Kräften bis 1983
an der Netzwerktechnologie auf der Basis von Ethernet (1972 von Xerox) und TCP/IP. 1986
konnte man sich endlich vom Militär trennen und es gab ein rein ziviles Netz. Auf der anderen
Seite, in einem unabhängigen Bergdorf hatten sich Berge von Wissen angehäuft. Alte wissenschaftliche Arbeiten wiederzunden und ein System in dieses Chaos zu bringen, hatte sich Tim
Berners-Lee zum Ziel gesetzt. In Cern wurde das Hypertextsystem und der Uniform Resource Locator (URL) entwickelt und 1991 ins Internet gestellt. Damit war das World Wide Web
geboren. Die weitere Entwicklung können Sie unter W3C Technical Reports and Publications
nachlesen.
34
4.2 Protokolle
4.2 Protokolle
Was passiert, wenn Sie mit Ihrem Browser eine Seite aufrufen? Wie funktioniert die Kommunikation mit Ihrem PC und dem aufgerufenen Webserver? Einen kurzen Einblick hinter die
Kulissen suchen wir in diesem Abschnitt.
Abbildung 4.1: Osi-Modell mit Protokollen
4.2.1 TCP/IP
Abbildung 4.1 stellt die einzelnen Protokolle und Schichten bei der Kommunikation zweier
Rechner dar. Da Rechner an sich nur Nullen und Einsen verstehen, braucht es eine Infrastruktur, wie sich Computer am besten unterhalten können. Nach dem OSI-Referenzmodell (engl.
Open Systems Interconnection Reference Model) gibt es sieben Schichten. Wir konzentrieren
uns dabei auf die fürs Web wesentlichen oberen fünf Schichten IP, TCP und HTTP bzw. HTTPS. Das Internet Protokoll IP ist für die Adressierung zuständig (Stichwort IP-Adresse). Das
Transmission Control Protocol (TCP) ist eine Vereinbarung (Protokoll) darüber, auf welche
Art und Weise Daten zwischen Computern ausgetauscht werden sollen. TCP ist eine Ende-zuEnde-Verbindung, welche die Übertragung der Informationen in beide Richtungen zu gleicher
Zeit zulässt. Jede TCP-Verbindung wird eindeutig durch zwei Endpunkte identiziert. Ein
Endpunkt stellt ein geordnetes Paar (auch Socket genannt) bestehend aus IP-Adresse und Port
(WWW ist auf Port 80) dar. TCP zerlegt die zu übermittelnden Daten in Pakete und setzt
sie am Zielrechner auch wieder zusammen, Fehlerkontrollen sind dabei eingebaut - gehen Pakete verloren, werden sie erneut geschickt. HTTP ist ein Anwendungsprotokoll, das auf TCP
aufsetzt.
35
c Dr.
4.2 Protokolle
4.2.2 HTTP
HTTP 1.0 ist ein zustandsloses Anfrage/Antwort-Protokoll (engl.: request, response). Der Client, meist ein Browser, sendet eine Anfrage an einen Webserver unter Angabe einer URL (Uniform Resource Locator). Die URL deniert das zu verwendende Schema bzw. Protokoll, Server,
Pfad, Parameter, etc. Der Server antwortet mit einer Statuszeile, in der die Protokoll-Version,
ein Statuscode über Erfolg oder Miÿerfolg der Anfrage sowie weitere Informationen, z.B. die
angeforderte Hypertextseite, stehen. Danach wird die Verbindung beendet. HTTP ist nicht an
HTML gebunden, sondern kann zum allgemeinen Austausch von Daten verwendet werden.
HTTP ist ein Kommunikationsschema, um Websites (oder Bilder oder prinzipiell jede andere
beliebige Datei) von einem entfernten Computer auf den eigenen zu übertragen. Wenn auf
einer Website der Link zum URL www.example.net/infotext.html aktiviert wird, so wird an
den Computer mit dem Hostnamen www.example.net die Anfrage gerichtet, die Ressource
/infotext.html zurückzusenden.
Der Name www.example.net wird dabei zuerst über das DNS-Protokoll in eine IP-Adresse
umgesetzt. Zur Übertragung wird über das TCP-Protokoll auf den Standard-Port 80 des HTTPServers eine HTTP-GET-Anforderung gesendet:
GET /infotext.html HTTP/1.1 Host: www.example.net
Zusätzliche Informationen wie Angaben über den Browser, zur gewünschten Sprache etc. können über den Header (Kopfzeile) in jeder HTTP-Kommunikation übertragen werden. Sobald der
Header mit einer Leerzeile abgeschlossen wird, sendet dann der Computer, der einen Webserver
(an Port 80) betreibt, seinerseits eine HTTP-Antwort zurück. Diese besteht aus den HeaderInformationen des Servers, einer Leerzeile und dem tatsächlichen Inhalt der Nachricht, d.h.
dem Inhalt der infotext.html-Datei. Übertragen werden normalerweise Dateien in Seitenbeschreibungssprachen wie (X)HTML und alle ihre Ergänzungen, z. B. Bilder, Stylesheets (CSS),
Skripte (JavaScript) usw., die meistens von einem Browser in einer lesbaren Darstellung miteinander verbunden werden. Prinzipiell kann jede Datei in jedem beliebigen Format übertragen
werden, wobei die Datei auch dynamisch generiert werden kann und nicht auf dem Server als
physische Datei vorhanden sein muss (z. B. bei Anwendung mit PHP). Abbildung 4.2 zeigt den
Aufbau einer HTTP Antwort.
Abbildung 4.2: HTTP Transaktion
Der Server sendet eine Fehlermeldung zurück, wenn die Information aus irgendeinem Grund
nicht gesendet werden kann. Der genaue Ablauf dieses Vorgangs (Anfrage und Antwort) ist in
der HTTP-Spezikation festgelegt.
36
c Dr.
4.2 Protokolle
Derzeit werden zwei Protokollversionen, HTTP/1.0 und HTTP/1.1 verwendet.
Bei HTTP/1.0 wird vor jeder Anfrage eine neue TCP-Verbindung aufgebaut und nach Übertragung der Antwort wieder geschlossen. Sind in ein HTML-Dokument beispielsweise zehn Bilder eingebettet, so werden insgesamt elf TCP-Verbindungen benötigt, um die Seite auf einem
grakfähigen Browser aufzubauen.
In der Version 1.1 können mehrere Anfragen und Antworten pro TCP-Verbindung gesendet
werden. Für das HTML-Dokument mit zehn Bildern wird so nur eine TCP-Verbindung benötigt.
Zusätzlich können bei HTTP/1.1 abgebrochene Übertragungen fortgesetzt werden.
Mit HTTP/1.1 ist es neben dem Abholen von Daten auch möglich, Daten zum Server zu
übertragen. Mithilfe der PUT-Methode können so Webdesigner ihre Seiten direkt über den
Webserver per WebDAV publizieren, und mit der DELETE-Methode ist es ihnen möglich,
Daten vom Server zu löschen.
Normalerweise kann die Information, die über HTTP übertragen wird, auf allen Rechnern
und Routern, die im Netzwerk durchlaufen werden, gelesen werden. Über HTTPS (Hyper Text
Transfer Protocol Secure) kann die Übertragung verschlüsselt erfolgen. Die Verschlüsselung
erfolgt mit Triple DES.
Zur Adressierung im Intenet werden URLs verwendet, Uniform Resource Locator. Der
Aufbau einer URL mit HTTP hat die Form:
http://Server/Pfad?Parameter#Link
Neben
http gibt es die Protokolle ftp, gopher, mailto, news, nntp, telnet, le und prospero. Bei
der Angabe von Parametern ist insbesondere auf folgende reservierte Zeichen zu achten:
! * ' ( ) ; : @ & = + $ , / ? % # [ ]
Frage 4.1
Welche der folgenden URLs sind gültig?
a)
http://www.fbi.fh-darmstadt.de/
b)
www.bla.de
c)
http://www.at-mix.de:80/triple_des.htm
d)
ftp://cnn.example.com&[email protected]/top_story.htm Was passiert hier eigentlich?
e)
news:comp.os.linux.hardware ja mailto:[email protected]
Frage 4.2
TCP . . .
a) ist eine Kommunikation in eine Richtung.
b) funktioniert in beide Richtungen.
c) zerlegt die Daten in Pakete und setzt sie wieder zusammen.
d) zerlegt die URL in Nummern und stellt so die Verbindung zum Zielrechner her.
e) geht immer über Port 80.
Aufgabe 4.1
Führen Sie auf der Kommandozeile folgende Befehle aus:
telnet www.yahoo.com 80
GET / HTTP/1.1 Host: www.yahoo.com
Zweimal enter eingeben liefert den Header und die Seite, nur den Header erhält man mit telnet
www.yahoo.com 80 HEAD / HTTP/1.0 zweimal Enter.
37
c Dr.
4.3 Links zum Thema
4.3 Links zum Thema
•
•
38
OSI-Modell.
Hypertext Transfer Protocol
c Dr.
5 HTML und Co
ML steht für Markup Language und bedeutet Auszeichnungssprache. Durch Auszeichnung wird
ein Text mit zusätzlicher (semantischer) Bedeutung versehen. Auszeichnungssprachen gab es
schon lange bevor HTML, die heute bekannteste Auszeichnungssprache, populär wurde.
5.1 SGML
SGML (engl. Standard Generalized Markup Language, dt. Normierte Verallgemeinerte Auszeichnungssprache) ist eine Metasprache, mit deren Hilfe man verschiedene Auszeichnungssprachen (engl. markup languages) für Dokumente denieren kann. SGML ist ein ISO-Standard:
ISO 8879:1986 Information Processing Text and Oce Systems Standard Generalized Markup
Language (SGML) (Quelle: Wikipedia: SGML). SGML ist eine Obermenge von HTML. Ziel
von SGML war es, eine plattform- und anwendungsunabhängige Dokumentenform zu schaen.
In SGML ist eigentlich alles möglich, Sie müssen ihr Markup nur durch eine Dokumenttypdenition (DTD) denieren.
5.2 HTML Hyper Text Markup Language
HTML ist eine Sprache, die vom Browser verstanden und umgesetzt wird. Auf Basis des HTTPs
erhält der Client, der Browser im Body den eigentlichen darzustellenden Inhalt zurück. Im
Folgenden werden wir mit einer wirklich einfachen Seite anfangen und diese sukzessive um
wesentliche Elemente erweitern.
Listing 5.1: HTML - Einfachste Seite
<html>
<body> Inhalt </body>
</html>
Jede Seite fängt mit einem önenden html-Tag an, muss ein body-Tag enthalten und beide
wieder schlieÿen. Die Verschachtelung ist wie beim Klammerrechnen. Es können beliebig viele
Tags ineinander geschachtelt werden, das Schlieÿen erfolgt von innen nach auÿen.
Aufgabe 5.1
Korrigieren Sie folgenden HTML-Code
Listing 5.2: HTML - Fehlerhafte Seite
<html><body><p><h1>Überschrift 1<h2>Überschrift 2</h1></p></h2>
Inhalt</body></html>
Zur Strukturierung werden die Tags h1, h2, h3, h4 verwendet, h steht dabei für header,
d.h. Überschrift. Um bei einer HTML-Datei auch zusätzliche nicht anzuzeigende Informationen
einbinden zu können, gibt es einen Kopfteil. Der Titel wird im Browser angezeigt. Und der
Hypertext wird schlieÿlich durch Verweise auf andere Seiten oder Stellen im Dokument realisiert.
Hier ein einfaches Dokument:
39
Listing 5.3: HTML - mit Link
<html>
<head><title>EWA Unterlagen</title></head>
<body>
<p>
<a id="oben"></a>
Vorlesung <a href="skript.pdf">Skript</a>
...
</p>
<a href="#oben">nach oben</a>
</body>
</html>
Tipp: Schreiben Sie alle Tags klein, dann fällt Ihnen die Umstellung auf XHTML leichter.
Sie werden in vielen Seiten anstelle
id="oben"
auch
name="oben"
zur Markierung des Ankers
im Text nden. Beides ist bei XHTML 1.0 zulässig, ab XHTML 1.1 wird name nicht mehr
unterstützt. Daher machen Sie es sich am besten zur Angewohnheit, immer das Attribut id
zu verwenden, bei Formularen, Links etc. kurzum bei allem, auf das Sie zugreifen möchten
per JavaScript, Links oder CSS. ABER, wenn Sie Formulare durch PHP weiter verarbeiten
möchten, dann benötigen Sie auch das Name-Attribut.
Fazit: versehen Sie alle Felder, die Sie
an anderer Stelle noch brauchen mit den Attributen Name und Id.
5.2.1 Documententyp
Es gibt nicht nur ein HTML, sondern verschiedene von W3C (World Wide Web Consortium)
denierte, gültige und verbreitete Sprachen, z.B. HTML 4.01 Strict, HTML 4.01 Transitional,
XHTML 1.0 Strict. Die maschinenlesbare syntaktische Denition dieser Sprachen ist die Document Type Denition (DTD), die Sie mit dem Doctype angeben. Mit der Angabe des Doctypes
in Ihrem HTML-Code teilen Sie dem Browser mit, welcher Denition das Dokument folgt.
Ziel ist es, eine browserübergreifende konforme Darstellung zu erhalten. Ohne Doctype kann
es passieren, dass der Browser Vermutungen anstellt und das Dokument eben anders darstellt.
Neuere Browser setzen die Standards nahezu vollständig um. Neben dem Doctype, können Sie
bei XML noch einen Prolog verwenden:
<?xml version="1.0?encoding="utf-8"?>
Leider
führt diese Angabe beim IE6 und anderen dazu, dass sie in den Quirk-Modus, d.h. den alten
Modus umschalten und die eigentliche Doctype-Angabe gar nicht mehr umsetzen. Hiermit ist
(noch) vorsichtig umzugehen.
Wie sieht nun eine korrekte Doctype Deklaration aus? Meine Empfehlung, verwenden Sie
Listing 5.4: HTML - Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Hiermit teilen Sie dem Browser oder allgemein dem Client folgende Informationen mit:
•
•
•
•
•
•
40
<!DOCTYPE HTML PUBLIC Es folgt ein Dokument vom Typ HTML.
"+// Der Herausgeber ist ISO-zertiziert.
"-// Der Herausgeber ist nicht ISO-zertiziert.
"W3C// Der Herausgeber, hier könnte auch Microsoft oder IBM stehen.
DTD XHTML 1.0 Strict Es handelt sich um XHTML in der Ausführung 1.0
//EN" Die Sprache der DTD (nicht des XHTML-Dokuments) ist Englisch.
c Dr.
Strict.
• "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" Hier ist die DTD hinterlegt
und kann vom Client gegebenenfalls nachgeladen werden.
Wie welcher Browser auf welchen Doctype reagiert nden Sie unter Doctype Switching Wann schaltet welcher Browser in welchen Modus. Eine Liste empfohlener Doctypes nden Sie
unter: W3C: Recommended DTDs to use in your Web document.
Frage 5.1
Wer ist für Standards im Web zuständig?
a) Netscape
b) Microsoft
c) World Wide Web Consortium
Frage 5.2
Welchen Nutzen hat die Angabe eines Doctypes?
a) Der Client bekommt eine Information, welche Attribute, Tags und Befehle zulässig sind.
b) Nur so ist das Dokument gültig und wird vom Browser angezeigt.
c) CSS ist sonst nicht verwendbar.
d) Die eindeutige Angabe der verwendeten Sprache erlaubt eine einheitliche Darstellung in
verschiedenen Browsern.
Frage 5.1
Was ist ein Doctype, wofür wird er eingesetzt und was bewirkt das Denieren eines
Doctypes?
5.2.2 XHTML
Neuere Webanwendungen verwenden XHTML als Beschreibungssprache. Diese gibt es seit 2000
als Standard. Die Verwendung von XHTML hat folgende Vorteile: XHTML ist strenger, Fehler
werden direkt angezeigt und nicht irgendwie vom Browser behoben. Der Code ist konsistent und
kann somit von Suchmaschinen besser verarbeitet werden. Viele Programme unterstützen die
Erstellung und Navigation von XML Strukturen direkt. Es ist einfach mit
C#
oder Java XML
zu erstellen oder auch in eigene Programme einzulesen und weiterzuverarbeiten. XHTML kann
einfach von anderen Applikationen importiert werden. Die Übersetzung von einer DTD in die
andere ist automatisierbar. XHTML kann erweitert werden, beispielsweise mit mathematischen
oder multidimensionalen Strukturen. Gegebenenfalls können Sie eine eigene DTD denieren.
Obwohl XHTML 1.1. der aktuelle Standard ist, empfehle ich momentan noch XHTML 1.0
strict zu verwenden, da XHTML 1.1 nicht mehr abwärtskompatibel ist und nicht von allen
gängigen Browsern korrekt dargestellt wird.
Frage 5.2
Ist es nicht besser, eine weniger pingelige Syntax wie HTML 4.0 transitional anstelle
von XHTML 1.0 strict zu verwenden? Nehmen Sie dazu Stellung.
41
c Dr.
Unterschiede zu HTML
Um ein HTML-Dokument, selbst HTML 4, in ein XHTML-Dokument zu überführen, müssen
Sie folgende Tags und Attribute anpassen:
•
•
•
Alle Tags und Attribute sind klein zu schreiben.
<img ... />, <br />, <li>...</li>
Es
gibt
keine
leeren
Attribute:
<hr noshade="noshade" />,
<input type="radio" checked="checked" />
• Script- und Styledenitionen gehören in den Header und sind durch [CDATA einzuschlieAlle Tags sind zu schlieÿen: img, br und li werden zu
ÿen:
<script type="text/javascript">  </script>
Wesentliche Tags von XHTML 1.0 strict
Im Folgenden Dokument nden Sie die wesentlichen zulässigen XHTML-Tags. Tabellen und
Formulare folgen separat in den Listings 5.7 und 5.6.
Listing 5.5: HTML - wesentliche Tags
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Alle wesentlichen XHTML-Tags in einem Dokument
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="basis.css" />
</head>
<body>
<h1><a id="oben" name="oben">Dies ist die 1. Überschrift</a></h1>
<h2>Häufige, wichtige Tags</h2>
<h3>Nutzen Sie die Überschriften zur Gliederung des Inhalts</h3>
<h4>Es geht noch bis h6, aber braucht man das?</h4>
<div id="tags">ganz wichtig, begegnet uns bei CSS ständig
Zeilenumbruch: </div>
<p>Paragraph</p>
Nummerierte Liste
<ol>
<li>Tee</li>
<li>Kaffee</li>
</ol>
Aufzählungszeichen
<ul>
<li>Tee</li>
<li>Kaffee</li>
</ul>
Definitionen
<dl>
<dt>Vorlesung</dt>
42
c Dr.
<dd>Unterhaltsame Veranstaltung.</dd>
<dt>Mensa</dt>
<dd>Kalorienlieferant.</dd>
</dl>
Eine horizontale Linie
<hr />
<h3>Noch eine Überschrift</h3>
<h2>Seltenere Tags</h2>
<object type="application/x-mplayer2" width="300" height="300">
<param name="autostart" value="false" />
<param name="showcontrols" value="true" />
<param name="filename" value="hunde.mpg" />
</object>
<a href="hunde.mpg">Hundevideo</a>
<sub>subscript</sub>
<sup>superscript</sup>
<code>Nur für Informatiker häufig ;-)</code>
<pre>Vorformatierter Text mit Leerräumen und
Zeilenumbrüchen</pre>
<abbr title="United Nations">UN</abbr>
<acronym title="World Wide Web">WWW</acronym>
<address>
Donald Duck<br />
Box 555<br />
Disneyland
</address>
<bdo dir="rtl">Wie wäre es mit Hebräisch?</bdo>
<h3>Zitate</h3>
<blockquote cite="http://www.duerrenmatt.de">
<p>
Ergreife die Feder nur, wenn du müde bist<br />
und keine Frage nach dem Stil dich berührt.<br /> <br />
- Dürrenmatt</p></blockquote>
<cite>Zitat</cite>
<q>Kurzzitat</q>
<h3>Bilder und Maps</h3>
<img src ="planets.gif" width="145" height="126"
alt="Planets" usemap ="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,16" href="sun.htm" alt="Sun" />
<area shape="circle" coords="9,5,3" href="mars.htm" alt="Mars" />
</map>
<a href="#oben">nach oben</a>
</body>
</html>
Frage 5.3
Womit wird die eigentliche Überschrift im Body eines Dokuments gekennzeichnet?
a)
<heading>
b)
<head>
c)
<h1>
d)
<h6>
e)
<title>
43
c Dr.
Frage 5.3
Was ist der Unterschied zwischen
<title>
und
Frage 5.4
Was ist der Unterschied zwischen
<ol>
<ul>?
Aufgabe 5.2
und
<h1>?
Wann sollten Sie was einsetzen?
Erstellen Sie eine chinesische Seite. Achten Sie auf einen geeigneten Zeichen-
satz, Schreibrichtung und das Language-Attribut im HTML-Tag.
Formulare in XHTML 1.0 strict
Listing 5.6: HTML - Formulare
<form method="get" action="TuEs.php">
<fieldset>
<legend>Persönliche Daten</legend>
<label for="name">Name</label>
<input type="text" id="name" size="10" />
<label for="vorname">Vorname</label>
<input type="text" id="vorname" size="10" />
</fieldset>
<fieldset>
<legend>Vorlesung</legend>
<label for="vorlesung">Vorlesung</label>
<select id="vorlesung" >
<optgroup label="Anwendungsentwicklung">
<option value="Herr">EWA</option>
<option value="Frau">GUI</option>
</optgroup>
<optgroup label="Datenbanken">
<option value ="Frau Dr">Datenbanken 1</option>
<option value ="audi">Datenbanken 2</option>
</optgroup>
</select><br />
<textarea rows="2" cols="20">
Kommentar
</textarea>
</fieldset>
<p>
<button type="submit">senden</button>
</p>
</form>
Formulare, ihre konsistente Darstellung und Validierung spielen in nahezu jedem Webprojekt
eine Rolle. Daher wird auch an einem Standard gearbeitet (XForms), der die Erstellung von
Formularen vereinfacht. Lesen Sie hierzu unter Orbeon: XFORMS weiter.
Tabellen in XHTML 1.0 strict
Listing 5.7: HTML - Tabellen
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Tabelle mit Überschriften
</title>
44
c Dr.
5.3 Maÿnahmen für Barrierefreiheit
</head>
<body>
<table border="1"
summary="This table charts the number of
cups of coffee consumed by each senator,
the type of coffee (decaf or regular),
and whether taken with sugar." >
<caption>Cups of coffee consumed by each senator</caption>
<tr>
<th id="header1">Name</th>
<th id="header2">Cups</th>
<th id="header3" abbr="Type">Type of Coffee</th>
<th id="header4">Sugar?</th>
</tr>
<tr>
<td headers="header1">T. Sexton</td>
<td headers="header2">10</td>
<td headers="header3">Espresso</td>
<td headers="header4">No</td>
</tr>
<tr>
<td headers="header1">J. Dinnen</td>
<td headers="header2">5</td>
<td headers="header3">Decaf</td>
<td headers="header4">Yes</td>
</tr>
</table>
</body>
</html>
Aufgabe 5.3
Stellen Sie Ihren Stundenplan in Form einer einfachen Tabelle dar, die auch von
Screenreadern gut umgesetzt werden kann.
Berücksichtigen Sie bei der Entwicklung Ihrer Seiten folgende Hinweise, führen Sie anschlieÿend
die in Abschnitt 3.6.3 erwähnten Tests durch und setzen Sie die Ergebnisse geeignet um.
•
Bilder und Co: Stellen Sie alternative Texte für Graken und Bilder über das alt-Attribut
zur Verfügung.
•
Links: Der Text sollte selbsterklärend sein, auch innerhalb einer extrahierten Linkliste.
Vermeiden Sie Links wie mehr oder hier klicken, vermeiden Sie gleiche Texte für verschiedene Ziele. Idealerweise fängt jeder Link mit einem Schlüsselwort an, so dass sich blinde
Leute schnell und gut orientieren können.
•
Style: Strikte Trennung zwischen Inhalt und Layout, konsequente Verwendung eines verlinkten Stylesheets.
•
Markup: Verwenden Sie Überschriften, nutzen Sie HTML als semantische Sprache, kennzeichnen Sie Sprachwechsel, heben Sie die Bedeutung von Textabschnitten mit strong
oder emph hervor.
•
Tabellen: Geben Sie Tabellenzusammenfassungen und Spaltenüberschriften an. Die Tabelle sollte Zeile für Zeile lesbar sein.
45
c Dr.
•
Formulare: Verwenden Sie Labels für Ihre Eingabefelder, beschriften sie diese möglichst
genau: Nachname anstelle von Name, denn um mit Tab rückwärts zu kommen benötigt
man die Shift- und die Tabtaste, also 2 Tasten. Diese Bedienung fällt manchen Benutzern
schwer. Gewährleisten Sie, dass teilweise ausgefüllte Formulare ihre Werte behalten, falls
die Benutzerin einem Link auf der aktuellen Seite folgt (um beispielweise die BLZ einer
Bank innerhalb eines Überweisungsformulars zu suchen) und dann wieder zum Formular
zurückkehrt. Beschriften Sie alle Schaltächen, andernfalls könnten Benutzer zu Recht
Hemmungen haben, das Formular abzuschicken und damit beispielsweise eine Überweisung zu tätigen. Geben Sie Feedback, auch wenn ein Formular erfolgreich verarbeitet
wurde.
•
Geräteunabhängigkeit: Gewährleisten Sie die Bedienung der Seite mausunabhängig (siehe
hierzu auch Abschnitt 5.3.1).
•
•
Schreiben Sie einfach: Vermeiden Sie verschachtelte Sätze.
Navigationselemente: Stellen Sie eine Sitemap zur Veranschaulichung der Struktur Ihrer
Website sowie ein Breadcrumb auf jeder Seite zur Verfügung. Breadcrumbs zeigen an,
auf welcher Seite man sich aktuell bendet und wie diese Seite in die Hierarchie der
Applikation eingebunden ist. Stellen Sie ein Suche zur Verfügung und markieren Sie die
Treer als Überschriften.
•
Verwenden Sie als Accesskeys ausschlieÿlich die Ziern 0 - 9, da andere Tastaturkürzel
meist auch den Browser selbst bedienen. Denieren Sie diese einheitlich auf jeder Seite.
•
Skalierbarkeit: Wählen Sie ein skalierbares Layout. Falls Sie Icons oder Imagemaps für
Links verwenden, so werden diese nicht mitvergröÿert. Hiervon ist abzuraten.
•
Validieren Sie Ihe Seiten nach XHTML strict und nutzen Sie automatische Testwerkzeuge.
5.3.1 Blinde Menschen
In Deutschland leben ca. 145.000 blinde Menschen. Davon sind viele im Internet. Blinde Menschen nutzen einen Screenreader oder eine Braille-Zeile und die Tastatur zur Navigation. Da
auch sie nicht grenzenlos Zeit haben, lassen sie sich nicht alles vorlesen, sondern scannen die
Seite wie sehende Menschen. Vorgelesen wir auch nicht jeder Tag, sondern nur das semantische
Markup: Links, Listen, Paragraphen, Überschriften u.ä. werden entsprechend angesagt. Eine
Linkliste (es gibt auch eine Überschriftenliste) listet ihnen alle Links einer Seite auf, in dieser
Liste können sie suchen oder sich Link für Link vorlesen lassen. Hilfreich ist es, wenn ein Link
mit einem Schlagwort beginnt, so können sie gleich weiter zum nächsten Link springen, falls
der aktuelle Link nicht ihrem Interesse entspricht. Falls Sie bei einer Liste Graken als Aufzählungszeichen einsetzen, dann verwenden Sie als alt-Tag nur ein Leerzeichen, alt-Tags wie
Dekoratives Bild das einen Punkt darstellt.
machen Blinde wahnsinnig, denn dieser Tag wird
jedesmal mit vorgelesen. Noch besser: verwenden Sie auch hierfür CSS. Grundsätzlich sollte
der Hauptinhalt rasch mit einer Sprungmarke, die ganz vorne im Quelltext steht, erreichbar
sein. Gleiches gilt für die Navigation, sofern sie nicht am Anfang steht. Kennzeichnen Sie einen
Sprachwechsel innerhalb Ihres Dokuments mit dem lang-Attribut, nur so hat der Reader die
Möglichkeit, den Text korrekt vorzulesen. Wenn Sie mehrere Links, die nicht in einer Liste
dargestellt sind, voneinander trennen wollen, dann nutzen Sie hierfür einen Punkt oder Mittelpunkt, der gebräuchliche senkrechte Strich wird auch als solcher vorgelesen und ist eben in
deutsch langsamer zu lesen.
Frage 5.5
Was steht wirklich in BITV, der Verordnung zur Schaung barrierefreier Informati-
onstechnik nach dem Behindertengleichstellungsgesetz? BITV Arbeiten Sie die Verodnung durch
46
c Dr.
5.4 Links zum Thema
und notieren Sie sich eine Kurzliste, die Sie beachten möchten.
5.3.2 Flash, JavaScript und Ajax
JavaScript Screenreader ignorieren
JavaScript nicht, insbesondere bei Formularelementen
werden mögliche Ereignisse angesagt und diese können über die Tastatur ausgelöst werden.
Bei Links funktioniert das nicht notwendigerweise. Generell sollten Sie sich auf mausunabhängige Ereignisse konzentrieren, d.h. reagieren Sie auf onfocus
Ajax
oder onblur.
Noch ist es leider so, dass Screenreader mit der automatischen Erneuerung von Teilen ei-
ner Seite nicht geeignet umgehen können. Dabei stellt sich auch die Frage, was denn idealerweise
passieren sollte, wenn sich oberhalb der aktuellen Lesemarke der Inhalt ändert. Üblicherweise
fängt der Screenreader dann an, die Seite wieder von vorne neu zu lesen. Überlegen Sie sich
daher gut, ob Sie Ajax wirklich brauchen und wofür. Überüssig ist es sicher, eine Uhr in die
Seite zu integrieren und die Anzeige sekündlich per Ajax zu aktualisieren. Mehr dazu können
Sie unter AJAX and Screenreaders: When Can it Work? nachlesen.
Flash
Die Richtlinien sind von 1999 und damals war Flash für Blinde nicht bedienbar. Mitt-
lerweile wurden sowohl die Screenreader als auch Flash selbst weiterentwickelt und es gibt wohl
auch hier Maÿnahmen, die den Einsatz von Flash barrierearm gestalten können, siehe hierzu
auch Niqui Merret Flash and Accessibility.
5.4 Links zum Thema
•
•
•
•
•
47
Buch: Professionelle Websites (kostenloser Download)
SELFHTML: Für alles rund ums Web eine gute Adresse
DTD - Document Type Declaration - Das richtige Doctype.
Alle Attribute in XHTML 1.0 Strict.
Anleitung für saubere Strukturierung mit HTML
c Dr.
6 CSS
Abbildung 6.1: Übliche Layouts von Websites.
Sie wissen nun, wie Sie Inhalte in HTML darstellen. Die Formatierung ist Thema dieses
Kapitels. Abbildung 6.1 zeigt drei verschieden gestylte Seiten bei gleichem HTML. Lassen Sie
sich von der Mächtigkeit von CSS bei Zengarden beeindrucken.
Cascading
1 Style Sheets (CSS) ermöglichen die optische Gestaltung, d.h. die Formatierung
einer HTML-Seite. Mit der Einführung von CSS ist es möglich, Inhalt und Layout von Webanwendungen konsequent voneinander zu entkoppeln. Eine einzelne Datei, das Style Sheet
denierte, wo welcher Inhalt wie zu sehen ist: Farben, Hintergrundbilder, Fonts, Positionierung, eben alles, was mit dem, was wir sehen zusammenhängt. Vor einigen Jahren fand man oft
noch Befehle innerhalb des HTML, die Schriftgröÿe, Farbe, etc. denierte. Auch heute gibt es
noch Seiten, die diese Trennung nicht verfolgen. Welche Gründe sprechen für die Verwendung
von CSS?
•
Die Dateigröÿe ist deutich kleiner und damit können die Seiten schneller geladen werden
viele Quellen berichten von einer Reduktion um 50
•
%.
Konsequente Einhaltung eines einheitlichen Styles, Corporate Identity (CI) ist ohne viel
Disziplin möglich.
•
Insbesondere nachträgliche Designänderungen (auch kleinere) können für alle Seiten einheitlich, schnell und leicht umgesetzt werden. Damit verkürzt sich die Entwicklungszeit
insgesamt.
•
Durch die Verwendung von CSS erhält HTML eine rein semantische Bedeutung: <p>
steht für einen Paragraphen und nicht für einen vertikalen Abstand. h1 und Co strukturieren den Dokumenteninhalt hierarchisch. Die Isolierung optischer Denitionen macht
die Seiten für Blinde zugänglich. Zusätzlich ist die Indizierung und Katalogisierung von
rein semantischen Seiten besser automatisierbar.
•
•
Es ist einfach, wirklich einfach, eine Druckansicht ohne Navigation etc. zu erstellen.
Die konsequente Verwendung von CSS macht die Seite zukunftsfähig, d.h. auch in der
nächsten Browsergeneration könnte die Seite noch wie heute aussehen natürlich nicht
notwendigerweise ;-)
1 Cascading
bedeutet, dass mehrere Formate in einem einzelnen Dokument verwendet werden können. Der
Browser richtet sich nach einer bestimmten Reihenfolge, die als Kaskade bezeichnet wird.
48
6.1 Versionen
Und was spricht gegen CSS?
•
Mit Tabellen lassen sich alle Designvorstellungen für alle Browser leichter umsetzen. Mit
CSS ist es eine groÿe Bastelei, bis eine Seite wirklich so aussieht, wie sie die Designerin
will.
•
Dann muss ich auch noch CSS lernen.
Der erste Punkt ist nicht ganz von der Hand zu weisen, aber etwas Bastelei zu Projektbeginn ist
sicher nicht zu vergleichen mit dem Aufwand, viele hundert Seiten nachträglich auf ein anderes
Aussehen umzubiegen. Denken Sie nur einmal an die vielen Übernahmen von IT-Firmen. Mit
CSS lässt sich das Aussehen einer Seite schnell an den neuen Besitzer und dessen CI anpassen. Der zweite Punkt ist meiner Meinung nach zu ignorieren. Schlieÿlich sollte man sich als
Entwickler daran gewöhnt haben, viele Sprachen und Syntaxen kennenzulernen.
Aufgabe 6.1
Recherchieren Sie die Nachteile von Layouts, die auf Tabellen basieren.
Aufgabe 6.2
Recherchieren Sie die Nachteile von Frames.
6.1 Versionen
CSS 1 gibt es seit 1996. Seit Mai 1998 ist CSS 2.0 empfohlen. CSS 2.1 gibt es als Arbeitsentwurf und unterscheidet sich nicht wesentlich von CSS 2.0. Aber, wenn Implementierungen in
modernen Browsern ganzheitlich vom Standard abweichen, wird der Standard angepasst, man
staune ;-)
Seit 2001 arbeitet man an CSS 3.0, auf Mehrspaltigkeit, Formatierung von Hypertextverhalten (Popups, auf- und zuklappbare Listen, Fuÿnoten), und neue Text- und Hintergrundeekte
darf man momentan nur hoen, denn eine Empfehlung wird es vielleicht demnächst, vielleicht
aber auch erst 2010 geben. Und bis die Browser wirklich mitziehen kann es auch noch dauern.
Wir werden uns im Folgenden an die Spezikation CSS 2.1 halten. Obwohl es nur ein Arbeitsentwurf ist, wird daran schon lange gearbeitet und man steht kurz vor der endgültigen
Empfehlung. Ich möchte mich nicht mit zu alten Versionen beschäftigen. Ob Ihr Style am Ende
funktioniert, müssen Sie ausprobieren. Ich habe kein Problem damit, wenn Sie nach Standard
codieren und es dann nicht in jedem Browser gleich aussieht. Wie auch bei HTML gibt es einen
Validator und diesen Test müssen Sie bestehen.
6.2 Syntax
6.2.1 Einbinden eines Styles
In HTML binden Sie eine Style Datei mit dem link-Tag ein:
Listing 6.1: HTML - Einbinden einer CSS Datei
...
<head>
...
<link rel="stylesheet" type="text/css" href="styles.css"
media="mediatype" />
...
</head>
49
c Dr.
6.2 Syntax
Für das Attribut media können Sie screen, tty (Klienten mit festem Zeichengitter wie Terminals
oder PDAs mit eingeschränkten Darstellungsmöglichkeiten), tv (Fernsehen, d.h. geringere Auflösung und Farben, beschränkte Scrollmöglichkeiten), projection, handheld (kleiner Bildschirm,
begrenzte Bandbreite), print (Druckansicht), braille (Braillezeile), aural (Vorlesegeräte) und all
angeben.
Auf den Print-Style werden wir im Abschnitt 6.7 eingehen.
Frage 6.1
Wie binden Sie Ihre CSS-Datei mystyle.css korrekt in XHTML 1.0 strict ein?
a)
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" />
b)
<style src="mystyle.css" />
c)
<stylesheet>mystyle.css</stylesheet>
d)
<link rel="stylesheet" type="text/css" href="mystyle.css">
e)
<cssfile rel="stylesheet" href="mystyle.css" media="screen" />
6.2.2 Selektoren und Grundsyntax
Die Syntax selbst ist sehr einfach:
Listing 6.2: CSS - Syntax Selektor
Selektor {
Eigenschaft-A: Wert-A;
Eigenschaft-B: Wert-B;
}
/∗ Kommentar ∗/
Über den Selektor geben Sie an, auf was sich die Style-Denition bezieht. Ein Stylesheet darf
beliebig viele solcher Regeln enthalten. Selektoren können die folgende Form haben.
Selektor
Bedeutung
*
Selektiert jedes Element
E
Selektiert jedes Element vom Typ E
E F
Selektiert jedes Element F, das ein Nachfahre von
Element E ist
E > F
Selektiert jedes Element F, das ein Kind von E ist
E:rst-child
Selektiert ein Element E, wenn es das erste Kind
des direkten Vorfahren ist
E[foo]
Selektiert
jedes
Element
E,
bei
dem
das
foo-
Attribut gesetzt ist (unabhängig vom Wert)
E[foo=bar]
Selektiert
jedes
Element
E,
bei
dem
das
foo-
Attribut mit dem Wert bar gesetzt ist
.c
Selektiert jedes Element der Klasse c
E.c
Selektiert alle Elemente E der Klasse c
#myid
Selektiert jedes Element mit der ID myid.
E#myid
Selektiert das Element E mit der ID myid.
Tabelle 6.1: CSS Selektoren
50
c Dr.
6.2 Syntax
Frage 6.2
Welche Syntax ist korrekt?
a)
body:color=black
b)
body {color: black}
c)
{body;color:black}
d)
{body:color=black(body}
e)
body>style:{background-color=black;}
6.2.3 Referenz und Validierung
Mit CSS können Sie nahezu alles denieren, die Bedeutung der meisten Eigenschaften ist selbsterklärend, die genaue Denition können Sie der Vollreferenz zu CSS 2.1 entnehmen oder auch
direkt unter W3C Spezikation CSS 2.1 nachsehen.
Wie bei HTML gibt es auch einen Validator für CSS, unter Options können Sie einstellen,
nach welcher Version Sie validieren möchten: CSS Validator
Eigenschaften
Die Möglichkeiten sind vielfältig und viele Eigenschaften selbsterklärend, jedenfalls kann man
eine Ahnung bekommen, was welcher Befehl machen könnte und der Rest ist Ausprobieren und
Recherchieren:
background, background-attachment, background-color, background-image,
background-position, background-repeat, border, border-collapse,
border-color, border-spacing, border-style,
border-[top|right|bottom|left], border-[top|right|bottom|left]-color,
border-[top|right|bottom|left]-style,
border-[top|right|bottom|left]-width, border-width, bottom, caption-side,
clear, clip, color, content, counter-increment, counter-reset, cursor,
direction, display, empty-cells, float, font, font-family, font-size,
font-size-adjust, font-stretch, font-style, font-variant, font-weight,
height, left, letter-spacing, line-height, list-style, list-style-image,
list-style-position, list-style-type, margin,
margin-[top|right|bottom|left], marker-offset, max-height, max-width,
min-height, min-width, orphans, outline, outline-color, outline-style,
outline-width, overflow, padding, padding-[top|right|bottom|left],
page-break-after, page-break-before, page-break-inside, position,
quotes, right, table-layout, text-align, text-decoration, text-indent,
text-shadow, text-transform, top, unicode-bidi, vertical-align, visibility,
white-space, width, windows, word-spacing, z-index.
Regeln
Es ist möglich, einen Style auf mehrere Dateien aufzuteilen (import). Das eingebundene CSS
erbt den Zeichensatz des HTML-Dokuments. Es ist jedoch auch möglich, einen eigenen Zeichensatz zu setzen.
51
c Dr.
6.2 Syntax
Listing 6.3: CSS - Regeln, insbesondere import
@import "mystyle.css";
@import url("mystyle.css");
@charset "ISO-8859-1";
6.2.4 Layout
Betrachten Sie zunächst ein einfaches Beispiel.
Listing 6.4: HTML - Grundgerüst für CSS Anweisungen
<h1>CSS Beispiel</h1>
<div id="links">Links gefloateter Text</div>
<p class="daneben">Ein Text mit einem schönen Rahmen</p>
Sie haben nun folgende Möglichkeiten zur Formatierung: Sie können body, h1 und p generell
formatieren und zusätzlich das Aussehen der Klasse daneben und des Blocks links
bestimmen
Sie könnten auch nur die p Tags, die auf ein h1 Tag folgen formatieren (vgl. Tabelle 6.1):
Listing 6.5: CSS - Einfaches Beispiel
body {
line-height:1.3em;
}
h1 {
font-size: 1.5em;
color:red;
}
.daneben {
background-color: yellow;
}
div#links {
float: left;
width: 20%;
background-color: gray;
}
Haben Sie eine Idee, wie die Seite aussehen könnte? Gehen wir die Denitionen nacheinander durch: Zunächst wird der Zeilenabstand zur besseren Lesbarkeit allgemein erhöht (body,
line-height).
Die Überschrift
h1
wird in rot und in der 1,5 fachen Gröÿe des Buchstabens m
der eingestellten Schriftgröÿe des Browsers dargestellt. HTML wird im Browser nacheinander
dargestellt, als nächstes ist der Block
div links
zu betrachten: Es entsteht ein links ieÿender
Bereich der Breite 20% mit einem grauen Hintergrund. Zum Schluss betrachten wir den Paragraphen der Klasse daneben: Dieser hat einen gelben Hintergrund. Haben Sie nun ein Bild vor
Augen? Geben Sie die Dateien einmal ein und schauen Sie sich das Ergebnis in verschiedenen
Browsern an. Erzeugen Sie sich mit einem Blindtextgenerator (diesen Begri einfach in eine
Suchmaschine eingeben) zusätzlichen Text und füllen Sie diesen in den Paragraphen und das
Div ein. Wie schaut es nun aus? Entfernen Sie oat oder width, spielen Sie mit dem Style! So
bekommen Sie ein Gefühl für die Denitionen und wie sie sich gegenseitig beeinussen: z.B.
funktioniert oat ohne width nicht.
Vor CSS wurde das Layout einer Seite häug über Tabellen deniert, viele Seiten bestehen
aus einem Kopf, zwei oder drei Spalten und einem Footer. Um diese Boxen denieren zu können,
52
c Dr.
6.3 Vorgehensweise zur Umsetzung eines Layouts
Abbildung 6.2: Übliche Layouts von Websites.
stellt CSS ein Boxmodell zur Verfügung. Im Wesentlichen deniert man eine Box, deren Innenabstand (padding) des Inhalts zum Rahmen (border) der Box, den Auÿenabstand (margin) zu
anderen Elementen der HTML-Seite, den Rahmen selbst, ihre Gröÿe, Hintergrundfarbe, ihre
Position und ob der Text ieÿen soll.
Aufgabe 6.3
Veranschaulichen Sie die Eigenschaften padding, margin, width und height gra-
phisch.
Positionierung
Ohne CSS versucht der Browser die Elemente in der Reihenfolge, wie sie im HTML stehen, anzuordnen: Erstes Element oben links, dann nach rechts auüllen bis der Browserrand erreicht
ist und ab in die nächste Zeile. Um dieses Fluss zu steuern können Sie die Positionierungseigenschaften von CSS nutzen. Mit top und left kann die Position der Box deniert werden, zusätzlich
kann man noch angeben, wie diese Positionierung zu verstehen ist (Standard ist
static!).
static: Positionierung ohne Style.
absolute: obere linke Ecke in Relation zum Elternelement, scrollt mit.
xed: ähnlich wie absolut, nur in Relation zum Fenster, d.h. beim Scrollen bleibt es genau, wo
es ist.
relative:
Orientiert sich an static und verschiebt das Element relativ dazu.
Am häugsten werden Sie vermutlich absolute verwenden und in seltenen Fällen auch xed.
Aufgabe 6.4
Versuchen Sie die Beispiele, wie sie in Abbildung 6.2 zu sehen sind, umzusetzen.
6.3 Vorgehensweise zur Umsetzung eines Layouts
Wenn Sie von einem Designer oder aufgrund einer vorgegebenen Corporate Identity (CI) ein
Layout mit CSS umsetzen müssen, dann empehlt sich folgende Vorgehensweise:
1. Container erkennen und benennen (identizieren)
2. Markup erstellen, Doctype hinzufügen
3. Markup validieren !!!
4. Positionierungsmethoden auswählen
53
c Dr.
6.4 CSS und Barrierefreiheit
Abbildung 6.3: Container mit Flusseigenschaften
5. Boxen durch Farben kennzeichnen, um Ihre Gröÿe und Ausrichtung besser erkennen zu
können
6. Inhalt (Blindtext) hinzufügen
7. Markup im Kontainer inkl. Gestaltung
8. Druckstyle
Abbildung 6.3 zeigt ein Boxenmodell mit ersten Flusseigenschaften.
Dieses Grundmodell können Sie schrittweise verfeinern und validieren, bis Sie das gewünschte
Aussehen erhalten.
Aufgabe 6.5
Wenden Sie das eben eingeführte Schema auf die Fachbereichsseite an. Verglei-
chen Sie (anschlieÿend!) Ihr Ergebnis mit dem Stylesheet des Fachbereichs. Erstellen Sie eine
Druckansicht.
6.4 CSS und Barrierefreiheit
Einige Screenreader lesen mit
display:none formatieren Text nicht vor. Wenn Sie extra Links
etc. für Screenreader einbauen wollen, die aber sonst nicht sichtbar sein sollen, dann positionieren Sie diese auÿerhalb des sichtbaren Bereichs mit
Listing 6.6: CSS - Alternative zu display:none
.abseits {
position: absolute;
left: -1000px;
top: -1000px;
width:0px;
height: 0px;
overflow:hidden;
display:inline;
}
54
c Dr.
6.5 Tipps
Abbildung 6.4: Designproblem: Gleich lange Spalten
6.5 Tipps
6.5.1 Einheiten
Box : Egal, für welche Einheiten Sie sich entscheiden (%, px oder em), versuchen Sie diese nicht
innerhalb einer Eigenschaftsklasse zu mischen: Wenn Sie die Breite innerhalb eines Selektors
mit
% angegeben haben, dann sollten Sie auch für alle anderen Boxen % verwenden. Probieren
Sie die verschiedenen Einheiten aus. Wie verhält sich welche Einheit, wenn Sie die Fenstergröÿe
variieren. Was passiert, wenn Sie mit unterschiedlichen Einheiten arbeiten?
Schriftgröÿe
: Versuchen Sie die Schriftgröÿe in em anzugeben, damit wird die Schrift relativ
zur Browsereinstellung angegeben, diese kann dann sogar mit STRG und Mausrad verändert
werden.
6.5.2 Problem: Gleichlange Spalten
An folgendem Problem lassen sich die vielfältigen Herangehensweisen und auch die momentanen
Hürden von CSS gut veranschaulichen. Stellen Sie sich eines der Layouts von Abbildung 6.2
vor. Sie werden schnell das CSS für die Spalten codiert haben. Wenn Sie nun unterschiedlich
viel Text in die Spalten packen, dürfte Ihr Layout vermutlich wie in Abbildung 6.4 unter b)
aussehen. Wie können Sie gleich groÿe Spalten erhalten?
Einfachste Lösung: Ignorieren
Sie veruchen den Graphiker und machen technische Schwierigkeiten geltend. D.h. Sie setzen
die Designvorgabe nicht um. Sie verweisen auf die kommende Version CSS 3.0, die sicher 2010
kommen wird.
Einfache Lösung: Hintergrundbild
Sie arbeiten mit festen Breiten und absoluter Positionierung. Mit einem Bildverarbeitungsprogramm erstellen Sie eine Zeile Ihres Layouts (wie ein Bildausschnitt aus Abbildung 6.2 der Höhe
10 px o.ä.). Für den Selektor body geben Sie dieses Bild als Hintergrundbild an und lassen es
mit background-repeat und repeat-y wiederholen. Nachteil: Verändern der Fenstergröÿe kommt
nicht gut.
55
c Dr.
6.5 Tipps
Noch eine einfache Lösung: Groÿe Mindesthöhe
Setze Sie das Attribut height der Seitenblöcke auf einen maximalen Wert, z.B. 1000px, und
die Hintergrundfarbe des Bodys mit der Hintergrundfarbe des Inhalts gleich. So wird bei kürzerem Inhalt der Hintergrund mitgeführt und bei kleiner Navigation und langem Inhalt der
Hintergrund zum groÿen Teil mitgeführt.
Alternative Lösung: Fixed und mitscrollen
Sie können sich natürlich auch dafür entscheiden, die Navigation mit xed immer mitzuscrollen.
Aufwändigere Lösung: Verwendung eines Kontainers
Bei alistapart nden Sie eine aufwändigere Lösung. Der Trick besteht in der Verwendung eines
Kontainers, der die Farben und Breiten der zugehörigen Spalten über die Ränder deniert.
Schauen Sie sich den Code einfach mal in Ruhe an.
Listing 6.7: CSS - Mehrspaltiges Layout
#container{
background-color:white;
float:left;
width:70%;
/∗ Farbe und Breite der linken Spalte: ∗/
border-left:150px solid silver;
/∗ Farbe und Breite der rechten Spalte: ∗/
border-right:200px solid red;
display:inline; /∗ braucht IE ∗/
}
#linkeSpalte{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:100%;
margin-right:-100%;
}
#rechteSpalte{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
/∗ zugehöriger HTML−Code:
<div id="container">
<div id="center">...</div>
<div id="linkeSpalte">...</div>
<div id="rechteSpalte">...</div>
</div>
∗/
56
c Dr.
6.6 Struktur einer CSS Datei
Fazit
Sie sehen, es gibt für alles auch eine CSS Lösung UND diese wird unter CSS 3.0 einfacher aussehen! Halten Sie sich, sofern Sie keine strengen Vorgaben haben, nicht zu lange an bestimmten
Designvorstellungen auf, sondern versuchen Sie die Seite gut bedienbar und funktional zu gestalten.
6.5.3 Hintergrund
Während der Entwurfsphase ist es sinnvoll, für jede Box/Denition eine Hintergrundfarbe zu
vergeben, so sehen Sie unmittelbar, wo welcher Bereich ist. Wenn Sie eine Hintergrundfarbe denieren, dann denieren Sie bitte auch eine passende Vordergrundfarbe dazu und umgekehrt.
Warum?
6.6 Struktur einer CSS Datei
Die Vorlesung soll Sie auch für die Mitarbeit in Groÿprojekten t machen. Ab einer gewissen
Projektgröÿe sind Standards einfach wichtig. Obwohl Sie in dieser Vorlesung kein wirklich groÿes
CSS denieren werden, ist es ratsam, sich auch bei kleineren Projekten eine feste Struktur
vorzugeben. So wundert man sich später nicht, wenn irgendeine Denition nicht greift, weil sie
später beispielsweise doch noch mal überschrieben wird. Zunächst ein Wort zu Kommentaren:
Kommentieren Sie Ihre CSS Datei ausreichend. Halten Sie fest, wo Sie Probleme hatten und
warum Sie sich für diese Denitionen entschieden haben. Dies kann zum Teil im Dateikopf
passieren, sollte aber auch im Code selbst passieren. Fangen Sie jede Datei mit einem Kopf wie
folgt an, persönliche Neigungen können natürlich eingearbeitet werden.
Listing 6.8: CSS - kommentierter Kopf
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗
Datei: styles . css
∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗
Verantwortlich: [email protected]
Media: screen
Gliederung:
1.0 Schriften ...
Änderungen:
01.01.2007 Utr: added position absolute to ...
∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
Die Organisation und Strukturierung von CSS Dateien beschreibt zwei empfohlene Vorgehensweisen, eine inhaltlich/funktionell orientierte Struktur und eine layoutorientierte Struktur.
Entscheiden Sie selbst.
Listing 6.9: CSS - Dateistruktur
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗
Dateistruktur inhaltlich / funktionell
∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗
1.0 Schriften
1.1 Titel
1.2 Paragraphen
1.3 Text
2.0 Farben
57
c Dr.
6.7 Druckansicht
3.0 Tabellen
4.0 Formulare
∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
/∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗
Dateistruktur layoutorientiert
∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗
1.0 Layoutstruktur
2.0 Header
2.1 Head
2.2 unsichtbare Links wie "zum Inhalt"
3.0 Inhalt
3.1 Hauptinhalt
3.2 eventuelle Kommentare, übliche rechte Seite
4.0 Navigation
4.1 Hauptnavigation
4.2 Seitennavigation
6.0 Footer
∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗∗/
Sie können auch alle Denitionen alphabetisch sortieren.
6.7 Druckansicht
Um eine Seite zu drucken, sind zwei Dinge wichtig:
•
•
Verstecken Sie die Navigation, Header etc. mit display:none.
Verwenden Sie bei der Styleinkludierung media=print .
Aufgabe 6.6
Es gibt auch noch weitere Optionen bzgl. Seitenlänge und Seitenumbruch. Arbei-
ten Sie die Beschreibung der Seitenorientierte Eigenschaften durch und erstellen Sie eine gute
Druckansicht Ihrer Praktikumsseite.
6.8 Testen
Sie sollten Ihre Applikation in Hinblick auf unterschiedliche Auösung, Clients und Browser
testen. Die aktuellen Zahlen, was wie verbreitet ist, können Sie Browser Statistiken entnehmen.
6.9 Links zum Thema
•
•
•
•
•
•
•
•
53 CSS Tipps.
Zengarden (vielfältiges Design bei gleichem HTML-Code).
W3C: Tabellenloses Layout,
The Style Works: Viele Tipps, Referenz, Links zu CSS Anleitungen, etc.
W3C CSS2.1 ozielle Referenz
CSS Validator
Deutschsprachige Einführung
Herangehensweise an ein mehrspaltiges Layout und generell eine gute Adresse für barrierefreie Seiten
•
•
58
Schrittweise Anleitung für ein einfaches mehrspaltiges Layout
W3C: Gute Links zu CSS
c Dr.
7 PHP
Sie wissen nun, wie Sie eine HTML-Seite erstellen und diese schön formatieren, wunderbar.
Fertig sind wir damit noch lange nicht, denn einerseits müssen Sie in jeder Seite den Header,
die Navigation und den Footer einbauen. Angenehmer ist es, diese Teile in einer Datei zu
speichern bzw. das Menü am Besten dynamisch zu erzeugen. Es fehlt auch die Kommunikation
mit der Benutzerin. Wie war das mit der Abgabe von Bewertungen? Diesen Problemen werden
Sie mit der serverseitigen Scriptsprache PHP begegnen.
7.1 Allgemein
7.1.1 Konguration
Neben den Hinweisen, wie sie in Abschnitt 1 beschrieben sind, sind weitere Einstellungen sinnvoll. Die Konguration für eine einzelne Website erfolgt in der Datei .htaccess des jeweiligen
Verzeichnisses der Applikation. Üblicherweise verwendet man die Erweiterung .php, dies lässt
sich jedoch auch ändern:
ErrorDocument 404 /fehlerseite404.html
Options +Includes
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
AddType application/x-httpd-php .htm .html
Hinweis: Apache empehlt, nicht alle html Dateien zu parsen, da dies wenig performant
ist. Um möglichen Angreifern die Verwendung von PHP nicht auf dem Präsentierteller zu
servieren, wird jedoch die Endung .html empfohlen. Dieses Ziel kann jedoch auch mit einer
anderen Methode erreicht werden: Verwenden Sie das Modul mod_rewrite, das in Abschnitt
7.6 kurz eingeführt wird.
Einstellungen für PHP werden in der verwendeten php.ini vorgenommen. Achtung: Bei
XAMPP ist die verwendete ini unter
xampp\apache\bin. Damit die Änderungen wirksam wer-
den, müssen Sie den Apache neu starten. Ohne eigenen Webserver, d.h. bei Verwenden eines
Providers, haben Sie üblicherweise keinen Zugri auf die php.ini. Viele Ini-Parameter lassen
sich jedoch auch in der Datei .htaccess denieren (siehe Abschnitt 1).
Kongurationen, die den Server betreen, können in der http.conf vorgenommen werden,
z.B. können Sie das Startverzeichnis Ihres Servers mit DocumentRoot verlegen, Details: Apache
Kernfunktionen.
7.1.2 Einbinden von PHP Befehlen
Es werden vier Arten zum Einbetten von PHP Befehlen unterstützt:
Listing 7.1: HTML - Einbinden von PHP
<html>
<body>
<? echo 'Short Tags - häufig', aber unter 5.2.0 deaktiviert ?>
59
7.1 Allgemein
<br />
<?php echo 'Long Tags - empfohlen' ?>
<br />
<%= 'ASP Tags - benötigen setting in php.ini' %>
<br />
<script language="php">
echo 'Really Long Tags - selten';
</script>
<br />
</body>
</html>
Halten Sie sich an die empfohlene Variante.
7.1.3 Kommentare
Listing 7.2: PHP - Kommentare
<?php
/∗ für lange Kommentare ∗/
// Einzeiler
# auch ein Einzeiler , aber nicht empfohlen
?>
Kommentieren Sie ausreichend und verwenden Sie gleich Kommentare,
die von phpDoc umgesetzt werden können: http://phpdoc.org/
/∗∗
∗ Beschreibung der Funktion
∗ @param bool $access
∗ @return string
∗/
7.1.4 Coding Standards
Ein Coding Standard regelt, wie der Source Code eines Programms aussehen sollte. Er gibt Hinweise zur Dokumentation im Code, regelt die Benennung von Variablen und Klassen und hilft
so, dass andere Programmierer, schneller in den Code einsteigen können und beispielsweise bei
einer Urlaubsvertretung Fehler beseitigen können. Sie haben sicher auch schon Programmcode
gesehen, über den Sie länger brüten mussten, bis Sie überhaupt den Sinn und Zweck erfasst
haben. Durch ausreichende Dokumentation und klarer Benennung wird dies erleichtert, sie erkennen auf den ersten Blick, ob die Variable privat oder public deklariert wurde, ohne im Code
nach oben springen und die zugehörige Denition suchen zu müssen. Weitere Argumente für
die Verwendung eines Codings Standards nden Sie beispielweise unter PHP Coding Standard
oder googeln Sie den Begri.
Bei der Bennennung von Variablen und Klassen hat sich neben der ungarischen Notation,
die sukzessive verdrängt wird, folgende Schreibweise herauskristallisiert:
Pascal case:
Erster Buchstabe und alle weitere Wörter fangen mit einem Groÿbuchstaben an,
z.B. PascalCase.
Camel case:
Erster Buchstabe wird klein geschrieben, alle weiteren Wörter fangen mit einem
Groÿbuchstaben an, z.B. camelCase.
Upper case:
Underscore:
60
Alles wird groÿ geschrieben, z.B. GLOBAL, IO.
Einzelne Wörter werden durch ein _ getrennt, z.B. user_id.
c Dr.
7.2 PHP - die Sprache
Verwenden Sie einen coding standard, z.B.
•
·
pear Coding Standard
Klassen fangen mit einem Groÿbuchstaben an und einzelne Packages werden durch _
getrennt, z.B. HTML_Upload_Error.
•
Methoden camelCase, der Paketname wird mit _ vorangestellt, z.B.
bzw. mit Paket
buildSomeWidget()
XML_RPC_serializeData(). Auf diese Weise können Sie für sich Namens-
räume einführen, die es in PHP eigentlich nicht gibt.
•
•
_sort(), _initTree().
geschrieben, z.B. MAX_FILE_SIZE.
Private Variablen und Methoden fangen mit einem _ an, z.B.
Konstanten werden in Groÿbuchstaben und mit _
Oder den von Microsoft:
•
•
•
•
•
Klassen, Interfaces, Methoden, public Variablen, also alles Öentliche: Pascal case.
Parameter, lokale Variablen, d.h. alles Private Camel case.
Klassen fangen mit einem Nomen an, z.B. FileStream.
Interfaces fangen mit einem I an, z.B. IServiceProvider.
Methoden und Funktionen fangen mit einem Verb an, z.B.
RemoveAll().
7.2.1 Sprachbesonderheiten
PHP ist ein Mix aus verschiedenen Sprachen, daher hier einige Besonderheiten, die zu beachten
sind.
Stringverkettung erfolgt mit einem Punkt (.) und nicht mit + oder &
Zugri auf Klassenmethoden und -Member mit -> und nicht mit
einem Punkt (Bsp:
$file->getFileName());
Zugri auf statische Methoden erfolgt mit ::, z.B. DB::errorMessage().
Vergleich Neben einem normalen Vergleich == gibt es auch einen typisierten Vergleich (===).
7.2.2 Variablen und Konstanten
•
Variablen beginnen immer mit einem $, danach folgt ein Buchstabe oder _, erst danach
sind Zahlen erlaubt.
•
•
•
•
•
•
Kein fester Typ für eine Variable.
Variablen brauchen nicht deklariert zu werden.
Typ der Variablen wird von letzter Zuweisung bestimmt.
Konstanten:
define("Name",Wert) Konstanten werden ohne $ über Namen angesprochen
Datentypen: Boolean, Integer, Double, String, Array, Object
DatentypenTyp-Casting für die Basisdatentypen möglich:
$ganz=(int) "12.45";,
d.h.
ein Casting auf Unterklassen etc. ist nicht möglich.
Tests, welcher Datentyp gerade verwendet wird:
is_bool(); is_int(), is_null(). Da Vaisset() getestet werden, ob die Variable
riablen nicht initialisiert werden müssen, kann mit
gesetzt wurde.
61
c Dr.
Listing 7.3: PHP - Variablen, Strings und Arrays
<?php
$a = 'can'; $b = 'forms';
$str1 = 'Let\'s use literals.'; // Single−quoted
$str2 = "\nEmbeded vars {$a} come in many $b.\n"; // Double−quoted
$str3 = <<<HEREDOC
we even support Perl like syntax.
HEREDOC;
?>
echo $str1.nl2br($str2).nl2br($str3);
/∗ Arrays einfache und assoziative ∗/
$zahlen = array(1,2,3,4);
$mitglieder = array(
"John" => 5,
"Daniel" => 3,
"Julie" => 2
);
echo $mitglieder["Julie"];
7.2.3 Einbinden (include) von Dateien
Die Anweisungen
include
oder auch
require
binden die angegebene Datei ein und werten
diese aus. Diese beiden Konstrukte sind an sich gleichwertig mit der einen Ausnahme: der
include erzeugt ein Warning während require in einem Fatal Error
require_once bindet eine Datei ein und wertet diese zur Laufzeit des
Verhalten ist ähnlich der Anweisung require mit dem einzigen Unterschied,
Umgang mit Fehlern:
endet. Die Anweisung
Skripts aus. Das
dass einmal eingebundener Code aus einer Datei nicht noch einmal eingebunden wird.
Listing 7.4: PHP - include und require
include 'vars.php';
require 'prepend.php';
7.2.4 Arrays
implode
-
Stringdarstellung
implode(string glue, array pieces)
eines
Arrays
Die
Funktion
gibt einen String mit einer String-Repräsentation
aller Array-Elemente in der gleichen Reihenfolge wie in dem Array zurück, bei dem die
einzelnen Array-Elemente mit dem im Parameter glue angegebenen String verbunden werden.
Listing 7.5: PHP - implode
$array = array('lastname', 'email', 'phone');
$comma_separated = implode(",", $array);
echo $comma_separated; // lastname,email,phone
explode
-
Einen
String
in
ein
Array
verwandeln
explode(string delimiter, string string [, int limit])
Die
Funktion
gibt ein Array aus Strings
zurück, die jeweils Teil von string sind. Die Abtrennung erfolgt dabei an der mit delimiter
angegebenen Zeichenkette (ein oder mehrere Zeichen). Ist der Parameter limit angegeben,
62
c Dr.
werden maximal limit Teile zurück gegeben. Das letzte Element enthält dann den kompletten
Rest von string.
Listing 7.6: PHP - explode
$pizza = "Teil1 Teil2 Teil3 Teil4 Teil5 Teil6";
$teile = explode(" ", $pizza);
echo $teile[0]; // Teil1
echo $teile[1]; // Teil2
merge - Arrays verbinden
array_merge(array1 array2 \ldots )
fügt die Elemente von
einem oder mehreren Arrays zusammen, indem die Werte des einen an das Ende des anderen
angehängt werden. Das daraus resultierende Array wird zurückgegeben. Haben die angegebenen
Arrays die selben String-Schlüssel, dann wird der hintere Wert dieses Schlüssels den vorhergehenden überschreiben. Haben die Arrays den gleichen numerischen Schlüssel, dann wird der
hintere Wert den vorhergehenden nicht überschreiben, sondern angehängt. Falls nur ein Array
angegeben und dieses numerisch indiziert ist, wird das Array fortlaufend neu nummeriert.
63
c Dr.
Listing 7.7: PHP - array Anwendungsbeispiel
$kleineseinmaleins=array(
array(0,0,0,0,0,0,0,0,0,0),
array(0,1,2,3,4,5,6,7,8,0),
array(0,2,4,6,8,10,12,14,16,18)
);
$fortsetzung=array(
array(0,3,6,9,12,15,18,21,24,27),
array(0,4,8,12,16,20,24,28,32,36),
array(0,5,10,15,20,25,30,35,40,45)
);
$kleineseinmaleins=array_merge($kleineseinmaleins, $fortsetzung);
echo $kleineseinmaleins[5][5]; // 25
bool sort ( array &array [, int sort_flags] )
/∗ Diese Funktion sortiert ein Array. Die Elemente werden
aufsteigend vom niedrigsten zum höchsten Wert sortiert. ∗/
$fruits = array("Zitrone", "Orange", "Banane", "Apfel");
sort($fruits);
foreach ($fruits as $key => $val) {
echo "fruits[" . $key . "] = " . $val . "<br>";}
7.2.5 Stringmwandlung in HTML-Code
get_html_translation_table([int table [, int quote_style]]) gibt die UmwandlungsTabelle zurück, die intern in den Funktionen htmlspecialchars() und htmlentities() verwendet wird.
Listing 7.8: PHP - Translation Table
$trans = get_html_translation_table(HTML_ENTITIES);
$str = "Hallo & <Frau> & Krämer";
$encoded = strtr($str, $trans);
echo $encoded; // Hallo & <Frau> & Krämer
7.2.6 Anzeigen der Systeminformationen
Nutzen Sie die Funktion
phpinfo(),
um einzelne Settings zu überprüfen.
7.2.7 Dateiverarbeitung
fopen(string filename, string mode, ...) bindet eine benannte Resource, welche mittels
lename speziziert wurde, an einen Stream. Hat lename die Form schema://... wird angenommen, dass es sich hier um eine URL handelt und PHP sucht nach einem Protokollhandler
(auch als Wrapper bekannt) für dieses Schema. Sind keine Wrapper für dieses Protokoll registriert, gibt PHP als Hilfe zum Verfolgen potentieller Probleme in Ihrem Skript einen Hinweis
aus und setzt dann weiter fort, obwohl lename eine reguläre Datei speziziert. Beispiel:
Listing 7.9: PHP - Dateibearbeitung
$file = fopen("sample.txt", "r");
while (!feof($file)) {
echo fgets($file), "<BR>";
}
64
c Dr.
/∗ Datei über URL lesen ∗/
$file = fopen("http://www.php.net/file.txt", "r");
In eine Datei schreiben
file_put_contents("agent.log", $HTTP_USER_AGENT, FILE_APPEND);
BESSER:
if ($fh = fopen($filename, "r")) {
# Processing
fclose($fh);
}
7.2.8 File Upload
Die Funktion
mit
filename
move_uploaded_file(string filename, string destination)
prüft, ob die
bezeichnete Datei eine gültige Upload-Datei ist (d.h., dass sie mittels PHPs
HTTP POST Upload-Mechanismus upgeloaded wurde). Ist die Datei gültig, wird sie zum in
destination
bezeichneten Dateinamen verschoben.
Listing 7.10: PHP - Dateiupload
$uploaddir = '/var/www/uploads/';
if (move_uploaded_file($_FILES['userfile']['tmp_name'],
$uploaddir . $_FILES['userfile']['name'])) {
print "File is valid, and was successfully uploaded.";
} else {
print "Possible file upload attack! Details:\n";
print_r($_FILES);
}
Eine gute Anleitung, wie Sie auf dem Client mit Hilfe von Javascript den Fortschritt des
Uploads anzeigen können, nden Sie unter Tracking le upload progress.
7.2.9 Zufall
Wie üblich wird ein fester Generator verwendet, der initialisiert werden kann, um nicht immer
wieder die gleiche Abfolge von Zahlen zu erhalten. Hier ein kleines Beispiel, das die Systemzeit
bei der Initialisierung verwendet:
Listing 7.11: PHP - Zufall
for ($i = 1; $i <= 10; $i++) {
srand((double)microtime() * 100000);
$zufall = rand(1, 100);
echo $zufall . "<br>";
}
7.2.10 Kontrollstrukturen und Schleifen
Es gibt die üblichen Strukturen if, switch, while, etc. Die Syntax wird an den Beispielen deutlich.
Listing 7.12: PHP - Kontrollstrukturen und Schleifen
if (($a > 10) && ($a < 100)) {
print "a ist zwischen 10 und 100";
65
c Dr.
} elseif (($a < 0) || ($a > 1000)) {
print "a darf weder negativ noch über 1000 sein";
} else {
print "das will ich nicht"
}
$i = 1;
while ($i <= 10) {
echo $i++;
/∗ es wird erst $i ausgegeben, bevor der Wert
erhöht wird (Post−Inkrement) ∗/
}
$i = 0;
do {
echo $i;
} while ($i>0);
for ($i = 1; $i <= 10; $i++) {
echo $i;
}
$arr = array("eins", "zwei", "drei");
foreach ($arr as $value) {
echo "Wert: $value<br />\n";
}
switch ($i) {
case 0:
echo "i ist
break;
case 1:
echo "i ist
break;
case 2:
echo "i ist
break;
default:
echo "i ist
}
gleich 0";
gleich 1";
gleich 2";
weder 0, 1 noch 2";
7.2.11 Abbrechen und Fortsetzen von Anweisungssequenzen
break bricht die Ausführung der aktuellen for, foreach, while, do..while Schleife oder einer
switch Anweisungssequenz ab. Einem break kann optional ein numerisches Argument angehängt werden, das die Anzahl der abzubrechenden Befehlssequenzen enthält. continue wird
innerhalb von Schleifen verwendet. Die Schleife wird an der aktuellen Stelle abgebrochen und es
wird der nächste Durchlauf begonnen. Anmerkung: Beachten Sie, dass in PHP die switch Anweisung als Schleifenstruktur zum Zweck von
continue
angesehen wird. Bei
continue
können
Sie ein optionales numerisches Argument mitgeben, das angibt, wie viele Ebenen von enhaltenen
Schleifen übersprungen werden sollen.
7.2.12 Ausnahmen und Fehlerbehandlung
PHP 5 hat eine Ausnahmebehandlung ähnlich der anderer Programmiersprachen. Details: PHP
Ausnahmebehandlung
66
c Dr.
Listing 7.13: PHP - try/catch
class AlwaysException extends Exception {}
try {
$error = 'Werfe immer diesen Fehler';
throw new AlwaysException($error);
//Einer Ausnahme folgender Code wird nicht ausgeführt
echo 'Keine Ausführung';
} catch (AlwaysException $e) {
echo 'Ausnahme gefangen: ', $e->getMessage(), "\n";
}
Sie kennen diese Möglichkeit, Fehler zu verarbeiten, aus anderen Programmiersprachen. In
PHP nden Sie häug Code, der diese Art der Fehlerverarbeitung nicht nutzt und stattdessen
hardcodedFehlermeldungen enthält. Denken Sie an die Probleme der Internationalisierung
(siehe Abschnitt 3.3.1) und Wiederverwertbarkeit und nutzen Sie die Möglichkeit, Ausnahmen
zu werfen.
Es ist auch möglich, benutzerdenierte Funktionen zur Fehlerbehandlung zu denieren. Siehe
dazu set_error_handler.
Listing 7.14: PHP - Konguration Fehlerbehandlung
// Fehlermeldungen ganz abschalten
error_reporting(0);
// Einfache Laufzeitfehler melden
error_reporting(E_ERROR | E_WARNING | E_PARSE);
7.2.13 Klassen
Mit PHP 5 gibt es die gängigen OO Strukturen.
•
Sie haben Klassen, von denen Sie erben können. Sie können nur von einer Klasse erben.
•
Sie haben Interfaces, die Sie implementieren können. Sie können mehrere Interfaces implementieren.
•
Sie haben nale und abstrakte Klassen.
•
Die Sichtbarkeit von Eigenschaften und Methoden können Sie mit private, public und
protected deklarieren.
•
Type HInts: Sie können für Methodenparameter eine Klasse oder ein Interface denieren.
•
Sie haben statische Methoden und Eigenschaften.
•
Sie haben Konstanten.
•
Sie haben Konstruktoren und Destruktoren.
•
Methoden können nicht überladen werden.
Da Sie bereits objektorientierte Programmierung in einer anderen Sprache beherrschen, brauche ich die Begrie nicht näher zu erläutern. Sie müssen sich nur an die Syntax von PHP
gewöhnen, die anhand folgender Beispiele veranschaulicht wird.
67
c Dr.
Listing 7.15: PHP - Objektorientiert
class Math {
const PI = 3.14159265;
static public function factorial($number) {
if ($number ===1) {
return 1;
}
return self::factorial($number-1) * $number;
}
}
$factorial = Math::factorial(5);
interface Vehicle {
public function
public function
public function
public function
}
startEngine();
moveForward($miled);
stopEnginge();
getMilage();
class Car implements Vehicle {
public $manufacturer;
public $color;
pubic $milage;
protected $engineStarted = false;
public function __construct($manufacturer, $color, $milage = 0) {
$this->manufacturer = $manufacturer;
$this->color = $color;
$this->milage = $milage;
}
public function startEngine() {
$this->engineStarted = true;
}
public function __toString() {
$string = "Instanz der Klasse Car\n";
$string .= " Hersteller: {$this->manufacturer}\n";
...
return $string;
}
... andere Methoden, die von Vehicle gefordert werden und noch andere ...
}
abstract class AutomaticCar extends Car {
...
}
final class Convertible extends Car {
protected $roofOpen = false;
public function openRoof() {
$this->roofOpen = true;
}
... analog closeRoof ...
}
class Customer {
protected $id;
protected $name;
... Methoden ...
68
c Dr.
}
class RentalCompany {
public function rentVehicle(Vehicle $vehicle, Customer $customer) {
...
}
}
Achtung: Mit der Pseudovariablen
selwort
self
$this
wird das aktuelle Objekt rferenziert. Das Schlüs-
wird zur Laufzeit durch den Namen der Klasse ersetzt. Das Schlüsselwort Parent
referenziert die Elternklasse.
Aufgabe 7.1
Überlegen Sie sich ein gutes OO-Design für eine Navigation. Die Seiten sol-
len hierarchisch in einem Array hinterlegt werden oder auch aus einer XML Datei eingelesen
werden.
7.2.14 Iteratoren
Mit Iteratoren können Sie einfach über eine Liste navigieren. Über welche Elemente Sie navigieren möchten, können Sie denieren, mal ist es ein Array, mal die öentlichen Eigenschaften
eines Objekts oder oder. Für die Iteration sind die Interfaces Iterator und IteratorAggregate relevant. PHP bietet für Arrays und Verzeichnisse geeignete Klassen an, die das Interface Iterator
bereits implementieren. Die Konzepte selbst sollten Ihnen wiederum aus anderen OO-Sprachen
vertraut sein. Lesen Sie weiter bei Iterators in PHP5.
Listing 7.16: PHP - Interface Iterator
interface Iterator {
public function current();
public function key();
public function next();
public function rewind();
public function valid();
}
class Book implements Iterator {
public $publisher;
public $title;
... weitere Eigenschaften wie ISBN, ...
private iteratorProperties = array( 'publisher', 'title', ...);
private $position = 0;
... Konstruktor und andere Methoden ...
public function next() {
$this->position++;
}
public function key() {
return $this->iteratorProperties[$this->position];
... weitere Methoden der Schnittstelle Iterator ...
}
$phpBook = new Book("O Reilly", "PHP Design Patterns");
foreach ($phpBook as $key => $value) {
echo "$key: $value \n";
}
Listing 7.17: PHP - Iteratoren für Arrays und Verzeichnisse
69
c Dr.
$phpBook = array('publisher'=>'O Reilly', 'title'=>'PHP Design Patterns', ...);
$bookIterator = new ArrayIterator($phpBook);
foreach($bookIterator as $key => $value) {
}
$dir = new DirectoryIterator(".");
echo "Anzahl der Dateien: ";
foreach($dir as $file) {
//ignore . and ..
}
if (!$file->isDot()) {
echo "File: {$file->getFileName()} \n";
echo "Type: {$file->getType()} \n";
if($file->isFile()) {
echo "Size: {$file->getSize()} kb \n";
}
}
Listing 7.18: PHP - Interface IteratorAggregate
interface IteratorAggregate {
public function getIterator();
}
class Book implements IteratorAggregate {
public $publisher;
public $title;
... weitere Eigenschaften wie ISBN, ...
private iteratorProperties = array( 'publisher', 'title', ...);
private $position = 0;
... Konstruktor und andere Methoden ...
public function getIterator() {
$properties = array();
foreach ($this->iteratorProperties as $property) {
$properties[$property] = $this->$property;
}
return new ArrayIterator($properties);
}
$phpBook = new Book("O Reilly", "PHP Design Patterns");
$iterator = $phpBook->getIterator();
foreach ($iterator as $key => $value) {
}
7.2.15 XML
Es gibt mittlerweile eine sehr gute Unterstüzung für XML.
Listing 7.19: PHP - XML-Unterstützung
$dom = domdocument::load('menu.xml');
$domxsl = domDocument::load('menu.xsl');
$proc = new xsltProcessor;
$proc->importStyleSheet($domxsl);
echo $proc->transformToXML($dom);
Beachten Sie auch die Funktion
70
xml_parse_into_struct();
c Dr.
7.3 Formularverarbeitung
7.3.1 Get versus Post
Formulare können mit der Methode Get oder Post versendet werden (Attribut
form).
•
Wenn Sie
method="get"
method
im Tag
wählen (diese Angabe ist nicht zwingend erforderlich, da get
als Default-Einstellung deniert ist), hängt der Browser die Formulardaten als Parameter
an die Aufrufadresse an. Beachten Sie, dass die Anzahl der übergebenen Zeichen je nach
Browser auf ca. 2000 limitiert sein kann. Die Anfrage, die beim Server eintrit, sieht dann
so aus:
•
Wenn
action?field1=value1&field2=value2...
Sie method="post" wählen, überträgt der Web-Browser
die Formulardaten mit
einer speziellen Post-Anfrage an den Web-Server (post = verschicken). Dabei wird wie
bei einer normalen Get-Anfrage die betreende Datei angefordert - einziger Unterschied:
Statt an die URL (action?...) werden die Daten hier, durch eine Leerzeile getrennt, an
den Header angehängt. Bei CGI-Programmen stellt der Webserver dann die Parameter
über den Standardeingabekanal zur Verfügung.
Eine ausführliche Beschreibung nden Sie unter Selfhtml Formulare oder HTTP: RequestMethoden.
7.3.2 Globale Arrays
Enthält ein Formular Felder, die mit dem Name-Attribut versehen sind (ACHTUNG: Nur
das Attribut id reicht leider nicht. Sie müssen also ihre Formularelemente immer mit dem
Id-Attribut zur Vorverarbeitung mit Javascript und mit dem name-Attribut zur Weiterverar-
$_POST[]
$_GET[] je nach verwendete Methode des Formulars zur Verfügung. Auch Parameter, die
beitung mit PHP versehen.), so stehen diese in den globalen assoziativen Arrays
bzw.
sie zum Beispiel im Rahmen einer Navigation an die URL angefügt haben, stehen Ihnen mit
$_GET[]
zur Verfügung.
Immer, wenn Ihre Applikation Daten entgegennimmt und in irgendeiner Form verarbeitet,
bieten sich Angrismöglichkeiten. Auf zwei typische Angrisarten gehen wir im folgenden Abschnitt ein.
7.3.3 Angrie
SQL-Injection
Mit SQL-Injection bezeichnet man Angrie mit den Zielen:
•
Zugri auf Daten, für die keine Berechtigung vorhanden ist zu erhalten.
•
Daten in der Datenbank zu verändern.
•
Root Status zu erhalten.
•
Eine Shell auf dem Datenbankserver zu errichten.
Diese Ziele versucht man durch geschickte Parameterübergabe bei Formularen zu erreichen.
Gehen Sie davon aus, dass die Anwendung eigentlich einen Aufruf der Art
id=1
erwarte -
beachten Sie, dass + einem Leerzeichen entspricht:
71
c Dr.
•
Kommentarzeichen /* in SQL nutzen und damit eventuelle weitere Überprüfungen abschalten:
•
id=1+/*
Mehrere SQL-Befehle durch Semikolon abtrennen und damit eigene Befehle einschleuÿen:
id=2;UPDATE+USER+SET+TYPE="admin";GO+EXEC+cmdshell('format+C')+-id=1+or+1=+1;
•
Durch Oder-Verknüpfungen die Logik abändern:
•
Mit Union Daten ausspähen (hierzu wird ein Vorwissen benötigt, das beispielsweise durch
zu detaillierte Fehlermeldungen erworben werden kann: Anzahl Spalten der eigentlich
auszulesenden Tabelle):
id=42+UNION+SELECT+login,+password,+'x'+FROM+user
Cross Site Scripting (XSS)
Beim XSS versucht der Angreifer Code einzuschleuÿen und die Anwendung so zu seinem Nutzen
zu verändern.
Typischer Ablauf:
1. Der Angreifer platziert einen Eintrag mit einem Link und JS in einem Forum.
2. Das Opfer klickt auf diesen Link und landet beispielsweise bei einer Bank. Das im Link
eingebettete JS lädt ein Login-Formular nach.
3. Das Opfer gibt die Login-Daten ein und diese werden an den Angreifer geschickt.
Angrismöglichkeiten können Sie bei XSS (Cross Site Scripting) Cheat Sheet nachlesen.
7.3.4 Validierung
Bevor Sie die Daten eines Formulars weiterverarbeiten, sollten Sie immer die Gültigkeit der
übergebenen Parameter überprüfen, nur so können Sie Ihre Anwendung vor etwaigen Angrien
schützen. Sie bauen also keine Datenbankverbindung auf, bevor sie die Daten validiert haben.
Dies können Sie im einfachsten Fall mit den folgenden Funktionen tun:
• is_set()
testet, ob eine Variable gesetzt ist.
• strip_tags()
entfernt HTML-Tags aus einem String.
• htmlspecialchars()
wandelt Sonderzeichen in HTML um.
tun oder zuverlässiger d Zusätzliche Sicherheit erreichen Sie durch die Verwendung von Filtern,
auf die wir im Folgenden eingehen werden.
Ohne Filter
Vor PHP 5.2.0 nutzte man hauptsächlich die folgende Notation:
Frage 7.1
<?php
$_POST['age'] ?>
Was gefällt Ihnen an folgenden Scripten nicht?
• include($_GET['filename']);
• mysql_query("INSERT INTO table (field_one) VALUES ({$_POST['var1']})";
72
c Dr.
Mit Filter
Seit Version 5.2 gibt es eine sehr gute Möglichkeit, Formulare einigermaÿen sicher mit
Filtern zu bearbeiten:
Listing 7.20: HTML - einfaches Formularbeispiel für PHP Filter
<form action="form1.php" method="post" >
Enter your age: <input name="age" size="2">
<input type="submit" name="submit" value="Go">
</form>
Die passende PHP-Datei zur Verarbeitung:
Listing 7.21: PHP - Formularvalidierung mit Filtern (einfach)
if (!filter_has_var(INPUT_POST, 'submit')) {
echo "na na na";
}
$age = filter_input(INPUT_POST, 'age', FILTER_VALIDATE_INT);
if (is_null($age)) {
echo "The 'age' field is required.<br />";
} elseif ($age === FALSE) {
echo "Please enter a valid age.<br />";
} else {
echo "Welcome.<br/>";
}
Noch ein etwas aufwändigeres Formular:
Listing 7.22: HTML - umfangreiches Formularbeispiel für PHP Filter
<form action="form2.php" method="post" >
Name: <input name="name" size="50"><br />
E-Mail: <input name="email" size="50"><br />
Homepage: <input name="homepage" size="50"><br />
Age: <input name="age" size="4"><br />
Income: <input name="income" size="50"><br />
Your two favourite languages:
<select name="favourites[]" size="6" multiple>
<option value="perl">perl</option>
<option value="c">C</option>
<option value="java">Java</option>
<option value="php">PHP</option>
</select><br />
<input type="submit" name="submit" value="Go">
</form>
Und die Verarbeitung mit Filtern:
Listing 7.23: PHP - Formularvalidierung mit Filtern (umfangreich)
$defs = array(
'name'=>array('filter'=>FILTER_SANITIZE_STRING,
'flags' => FILTER_FLAG_ENCODE_HIGH),
'email'=>FILTER_VALIDATE_EMAIL,
'homepage'=>array('filter'=>FILTER_VALIDATE_URL,
'flags' => FILTER_FLAG_SCHEME_REQUIRED),
'age'=>array( 'filter' => FILTER_VALIDATE_INT,
'options'=> array('min_range'=>7, 'max_range'=>77)),
73
c Dr.
7.4 Datenbanken
'income'=> FILTER_VALIDATE_FLOAT,
'favourites'=> array(
'filter' => FILTER_SANITIZE_STRING,
'flags' => FILTER_REQUIRE_ARRAY
),
);
$input = filter_input_array(INPUT_POST, $defs);
if ($input['age'] === FALSE) {
exit("You must be between 7 and 77 years old.");
}
Aufgabe 7.2
Im Code wird nur das Feld age geprüft. Schreiben Sie die If-Bedingungen für die
anderen Felder. Lesen Sie hierzu auch: Filtering Data with PHP.
7.3.5 Sicherheit
Sie können als zusätzliche Sicherheit in versteckten Feldern eine Sicherheitsvariable ablegen:
Listing 7.24: PHP - Formulare mit Sicherheitsvariablen
$id =
$salt
$hash
print
"grosse Zufallszahl darf nicht manipuliert werden";
= "und noch ein Geheimnis dazu";
= md5($salt.$id);
'<input type="hidden" name="sid" value="'.$hash.'" />';
//Variable eines Requests prüfen:
$id = "grosse Zufallszahl darf nicht manipuliert werden";
$salt = "und noch ein Geheimnis dazu";
$hash = md5($salt.$id);
$sid = validateInput($_REQUEST['sid']);
//Achtung validateInput() hier nur angedeutet
if ($hash == $sid) {
}
else {
}
// weiter
print 'Daten manipuliert.';
exit(1);
7.4 Datenbanken
Mit PHP ist es einfach möglich, Datenbankabfragen auszuführen:
Listing 7.25: PHP - Zu einfacher Datenbankzugri
// variablen initialisieren
$dbhost='localhost';
$dbusername='root';
$dbuserpass='root';
$dbname='test_php';
// Verbindung herstellen
$link_id = mysql_connect ($dbhost, $dbusername, $dbuserpass);
// Datenbank auswählen
if (!mysql_select_db($dbname)) die(mysql_error());
//insert ausführen
74
c Dr.
7.4 Datenbanken
$query = "INSERT INTO table_logins VALUES($_POST['user'], $_POST['pwd'])";
if (mysql_query($query)){
echo "Vielen Dank für Ihre Anmeldung.";
} else {
echo "Ihre Anmeldung konnte leider nicht erfolgreich durchgeführt werden.";
}
// Verbindung schlieÿen
mysql_close($link_id);
Was gefällt Ihnen an obigem Skript nicht? Hier nur einige Kritikpunkte meinerseits:
•
NEGATIV: Die Zugangsdaten müssen bei jedem DB-Zugri neu angegeben werden, d.h.
ein Ändern des Datenbanknamens führt zu Änderungen an vielen Dateien.
•
NEGATIV: Auf die Datenbank wird mit root zugegrien, damit hat jeder potentielle
Angreifer alle Rechte.
•
NEGATIV: Kann keine Verbindung zur Datenbank hergestellt werden, so endet die Bearbeitung und die komplette Fehlermeldung mit allen Hinweisen zur Datenbank wird mit
mysql_error
ausgegeben. Fehlermeldungen sollten für die Entwicklerin irgendwo mitge-
schrieben werden, aber die Benutzerin darf keine Systeminformationen sehen.
•
NEGATIV: Die Eingabedaten wurden vor Zugri auf die Datenbank nicht validiert.
•
NEGATIV: Es wurde zuvor nicht überprüft, ob der Datensatz in der Tabelle bereits
vorhanden ist.
•
POSITIV: Im Erfolgsfall wird ein einfaches Feedback gegeben.
•
POSITIV: Kann der Datensatz nicht hinzugefügt werden - nachdem die Datenbankverbindung erfolgreich hergestellt wurde - so wird ebenfalls ein einfaches Feedback ausgegeben.
•
NEGATIV: Die Feedbacktexte sind hardcoded eingefügt und nicht über Konstanten/Variablen internationalisert.
Um die Datenbankengine später wechseln zu können, sollten Sie auf eine Abstraktion oder ein
vorhandenes Klassengerüst zurückgreifen. In PHP hat sich hier PDO oder das Pear-Paket DB
ausgebreitet. Wer auch im Microsoftumfeld entwickelt, sollte sich mit ADODB beschäftigen.
Alle Pakete unterstützen sogenannte prepared statements , die die Sicherheit einer Anwendung erheblich erhöhen. Ein Prepared Statement ist eine sogenannte vorbereitete Anweisung
für ein Datenbanksystem. Im Gegensatz zu gewöhnlichen Statements enthält es noch keine
Parameterwerte. Anstatt dessen werden dem Datenbanksystem Platzhalter übergeben. Mittels
Prepared Statements können SQL-Injections eektiv verhindert werden, da das Datenbanksystem die Gültigkeit von Parametern prüft, bevor diese verarbeitet werden. Soll ein Statement mit unterschiedlichen Parametern mehrere Male (z. B. innerhalb einer Schleife) auf dem
Datenbanksystem ausgeführt werden, erreicht man mit Prepared Statements einen deutlichen
Geschwindigkeitsvorteil, da das Statement schon vorübersetzt im Datenbanksystem vorliegt
und nur noch mit den neuen Parametern ausgeführt werden muss. Aber selbst bei einmaligem
Zugri ist ein Prepared Statement nicht langsamer.
Da PDO in PHP-Kreisen favorisiert ist, in C geschrieben und somit schnell ist, stelle ich im
Folgenden ein PDO-Beispiel vor. Die Vorgehensweise, Prepared Statements zu verwenden, ist
in den anderen erwähnten Paketen jedoch ähnlich.
75
c Dr.
7.4 Datenbanken
Listing 7.26: PHP - Datenbankzugri
//Validierung ist vorangegangen!
try {
//Verbindung herstellen
$dbh = new PDO('mysql:host=localhost;dbname=test', 'ute', 'pwd');
//Insert −Abfrage vorbereiten
$stmt1 = $dbh->prepare("INSERT INTO CART (UserId, ProductId, Quantity) VALUES (:userid, :product
//Parameter an Variablen binden
$stmt1->bindParam(':userid', $userId);
$stmt1->bindParam(':productid', $productId);
$stmt1->bindParam(':quantity', $quantity);
//einen Datensatz einfügen
$userId = 1;$productId=1;$quantity=3;
$stmt1->execute();
//noch einen Datensatz für den gleichen Kunden einfügen
$productId=4;$quantity=1;
$stmt1->execute();
//eine Select −Abfrage vorbereiten
//bindParam lieÿe sich auch hier verwenden
}
$stmt2 = $dbh->prepare("SELECT ProductId, Quantity FROM CART where UserId = ?");
if ($stmt2->execute(array($_GET['userid']))) {
$stmt2->bindColumn('ProductId', $productId);
$stmt2->bindColumn('Quantity', $quantity);
while ($stmt2->fetch(PDO_FETCH_BOUND)) {
echo "ProductId: $productId ";
echo "Quantity: $quantity\n";
}
}
//Verbindung schlieÿen
$dbh = null;
} catch (PDOException $e) {
echo $lang['PDOERROR'];
error_log($e->getMessage());
}
// prinzipieller Aufbau mehrerer Transaktionen:
try {
$dbh->beginTransaction();
$dbh->query('UPDATE ...');
$dbh->query('INSERT ...');
$dbh->commit();
} catch (PDOException $e) {
$dbh->rollBack();
}
Kombinieren Sie diesen Ansatz mit Ihrem Wissen über gutes OO-Design und Sie schreiben
gute Software. Im PHP-Umfeld hat sich im Zusammenhang mit Datenbanken auch ein guter
Codegenerator etabliert: Propel. Propel nimmt ihnen die Arbeit ab, Objekte auf relationale
Tabellen abzubilden.
Aufgabe 7.3
Denieren Sie sich eine Schnittstelle für die Verbindung zur Datenbank und im-
plementieren Sie diese. Ihre Basisdatenbankklasse sollte im Konstruktor den Servernamen etc.
entgegennehmen und als Methode die Verbindung herstellen sowie eine Abfrage ausführen. Überlegen Sie sich ein gutes Design für Ihre Basisklasse. Nutzen Sie Ihre Kenntnisse aus anderen
76
c Dr.
7.5 Automatisches Testen
Vorlesungen, zeigen Sie Best Practice!
Aufgabe 7.4
Erstellen Sie eine Login-Klasse, die über die Datenbank abklärt, ob user/pwd
gültig sind, sowie das Hinzufügen und Löschen neuer Benutzer unterstützt.
Aufgabe 7.5
Versuchen
Sie
von
einem
Webformular
Zeichen
auÿerhalb
des
ASCII-
Zeichensatzes in eine Datenbank zu schreiben. Beschreiben Sie kurz, wobei hier Probleme auftreten könnten und was Sie wie testen können.
Aufgabe 7.6
Erstellen Sie ein Login-Formular (Benutzername ist eine E-Mailadresse). Verar-
beiten Sie die Login-Frage durch geeignete PHP-Skripte und Klassen: Validieren Sie die Eingabe
zunächst über einen geeigneten Filter und überprüfen Sie die Authentizität gegen eine geeignete
Tabelle, die Sie in MySQL anlegen.
7.5 Automatisches Testen
PHPUnit stellt die Standardlösung für Unit Tests in PHP dar. Eine ausführliche Anleitung
nden Sie unter PHPUnit - kurz & gut. Folgendes Grundgerüst für Tests ist Professionelle
Softwareentwicklung mit PHP 5 entnommen:
Listing 7.27: PHP - Automatischer Test
//zu testende Klasse:project/MyClass.php
// Testfall für MyClass: project/tests/MyClass.php
require_once 'PHPUnit2/Framework/TestCase.php';
require_once 'project/MyClass.php';
class Project_Tests_MyClass
extends PHPUnit2_Framework_TestCase {
public function testMethod() {
$t = new Project_MyClass();
//es gibt viele Methoden, was erwartet wird ...
}
}
$this->assertEquals(0, $t->testMethod());
// ...
//Tests zusammenführen
if (!defined('PHPUnit2_MAIN_METHOD')) {
define(
'PHPUnit2_MAIN_METHOD',
'Project_Tests_AllTests::main'
);
}
require_once 'PHPUnit2/Framework/TestSuite.php';
require_once 'PHPUnit2/TextUI/TestRunner.php';
require_once 'project/tests/MyClass.php';
class Projekt_Tests_AllTests {
public static function main() {
PHPUnit2_TextUI_TestRunner::run(self::suite());
}
public static function suite() {
$suite = new PHPUnit2_Framework_TestSuite(
'project'
77
c Dr.
7.6 URL Manipulation
);
$suite->addTestSuite('project_tests_pachage_MyClass');
//weitere hinzufügen
}
}
return $suite;
if (PHPUnit2_MAIN_METHOD ==
'Projekt_Tests_Paket_AllTests::main') {
Projekt_Tests_Paket_AllTests::main();
}
7.6 URL Manipulation
Sie haben sich eine gute Navigation für Ihre Seite überlegt. Um den jeweiligen Inhalt an die
dafür vorgesehene Stelle Ihrer HTML-Seite zu bekommen, werden häug Links mit Parametern
verwendet, z.B. http://www.darmstadt.de/produkt.cfm?ID=499. Damit wird vermutlich die
Seite mit der Id 499 aus der Datenbank geholt. Falls Sie eine mehrsprachige Seite haben,
könnten Sie als zweiten Parameter die Sprache übergeben. Und ab zwei Parametern streiken
die Suchmaschinen, jedenfalls kann man dann nicht mehr davon ausgehen, dass Suchmaschinen
den Links dann noch folgen und diese indizieren. Falls Sie gerne echte HTML-Dateinamen im
Pfad stehen haben möchten, können Sie sich des Moduls mod_rewrite bedienen. Betrachten
Sie hierzu folgendes einfaches Beispiel: In die Datei .htaccess schreiben Sie:
RewriteEngine on
RewriteRule ^seite_([0-9]+)_(d|e).html$ seite.php?id=$1&l=$2 [L]
Sie aktivieren das Modul und denieren anschlieÿend die Regel, dass alle Anfragen der Art
seite_12_d.html auf seite.php?id=12&l=d gemapped werden müssen. Das abschlieÿende L
kennzeichnet, dass keine weiteren Regeln folgen werden. Dieses Regelsystem lässt sich nämlich
auch verschachtelt denieren. Sie können in Ihrer Datenbank bzw. Ihrer XML Datei Inhalte mit
einer Seite hinterlegen, die Navigation dynamisch erzeugen und scheinbar auf HTML-Dateien
verweisen, während in Wirklichkeit eine PHP-Seite mit einem oder mehreren Parametern aufgerufen wird.
7.7 Links zum Thema
•
•
•
•
•
•
•
•
•
•
78
Präsentationen
Dokumentation, Downloads, die Quelle schlechthin
Tutorials und Einführungen
Praxisbuch online
Professionelle Softwareentwicklung mit PHP 5
Automatische Dokumentation Ihres Codes
pear Coding Standard
Ausnahmebehandlung
Eigener Error-Handler
Iteratoren
c Dr.
7.7 Links zum Thema
•
•
•
•
•
•
•
•
79
Filter
PHP Security Guide
Validating User Input with the Strategy Pattern
DB Full-Text Search Functions
Viele Beispiele
php architect
Gute Vorträge rund um PHP
Weitere gute Vorträge
c Dr.
8 JavaScript - ECMAScript
JavaScript (JS) ist eine Script-Sprache, die auf dem Client läuft und dort interpretiert wird.
Sie kann von der Benutzerin deaktiviert werden. Daher sollten Sie sich im Vorfeld überlegen,
ob und wofür Sie JavaScript einsetzen wollen. Üblicherweise werden Formulare mit JavaScript
vorvalidiert, bevor sie an den Server geschickt werden, so dass die Benutzerin ohne zusätzliche Wartezeit das Formular richtig ausfüllen kann. Natürlich muss auf der Serverseite aus
Sicherheitsgründen auch eine Validierung durchgeführt werden. Warum?
8.1 Einführung
JavaScript ist eine objektbasierte Sprache, die unter dem Namen ECMAScript durch Ecma
International standardisiert wurde. JavaScript läuft auf dem Client und ist somit vom Server
an den Client zu senden. Sie können Scriptelemente direkt im HTML-Code einbetten. Empfehlenswert ist jedoch die Auslagerung in eine separate Datei und ihre Einbindung im Tag Head
der HTML-Datei:
Listing 8.1: HTML - Einbinden von Javascript
<script type="text/javascript" src="../js/common.js"></script>
<script language="JavaScript">
<!−−
// alternativ kann Code auch so eingebunden werden
//−−>
</script>
Damit stehen der Seite die in common.js denierten Funktionen etc. zur Verfügung. Im
HTML-Code wird deniert, wann welche Scriptteile ausgeführt werden. Üblicherweise sind dies
Maus- oder Tastaturereignisse, aber auch Fensterereignisse. Eine Auswahl der Ereignisse nden
Sie in Tabelle A.3 im Anhang. Sie werden unterschiedliche Möglichkeiten nden, wie JavaScript
an ein Ereignis gekoppelt wird:
•
•
im HTML:
<a href="" onclick="hello();">
in JavaScript selbst, browserunabhängig:
document.getElementById('mydiv').onclick = hello;
•
in JavaScript selbst, browserabhängig:
document.getElementById('mydiv').addEventListener('click',hello,false);
MSIE: attachEvent('onclick', hello);
Von der ersten Möglichkeit ist abzuraten. Warum?
8.1.1 Besonderheiten
Variablen JS ist keine typisierte Sprache. Sie sind weder gezwungen Variablen zu deklarieren
noch zu initialisieren. Variablen stehen Ihnen einfach zur Verfügung. Dies hat leider auch den
Nachteil, dass es oft schwer ist, Fehler zu nden. Installieren Sie am besten einen Debugger in
Ihrem Browser.
80
8.1 Einführung
Groÿ- und Kleinschreibung
Bei Methoden und Variablen wird zwischen Groÿ- und Klein-
schreibung unterschieden.
Semikolon
Wie bei vielen Programmiersprachen, schlieÿt das ; einen Befehl ab. Das Zeilenen-
de beendet einen Befehl ebenfalls, so dass ein Semikolon nicht mehr zwingend erforderlich ist.
Aber da Sie sicher durch viele Programmiersprachen an das Semikolon gewöhnt sind, ist es
sinnvoll, dies beizubehalten.
Objekte
Die Denition von Objekten und ihren Methoden und Eigenschaften ist anders als
in Java oder vielen anderen Sprachen, siehe Abschnitt 8.1.7.
8.1.2 Befehle, Schleifen, Kommentare, . . .
Dem folgenden Beispiel können Sie die Notation für übliche Befehle entnehmen.
Listing 8.2: JS - Grundlagen
/∗ dies ist ein Kommentar ∗/
//dies ist ein einzeiliger Kommentar
var x; //deniert eine Variable x
var a,b,c=4; //deniert die Variablen a,b,c mit c=4
if (x > 57)
{
a=0;
b=0;
c=57;
}
document.write("<p> a=" + a + " b=" + b + " c=" + c + "</p>");
var i;
var sq = new Array();
for (i=1;i<25;i++)
{
sq[i]=i*i;
}
document.write("<p> Quadrat von 5: " + sq[5] + "</p>");
var Result;
for (Attribute in window) //nach in folgt ein Objekt, hier window
{
Result=Result + "window." + String(Attribute)+"\n";
}
document.write("<p>" + Result + "</p>");
var answer;
switch (i)
{
case 1:
answer="first";
break;
case 2:
answer="second";
break;
default:
answer="too much";
}
81
c Dr.
8.1 Einführung
document.write("<p> nach switch: " + answer + "</p>");
i = 1;
answer = "";
while (i<9)
{
a = i*i;
answer = answer + a + " ";
i++;
}
document.write("<p> nach while: " + answer + "</p>");
i = 1;
answer = "";
do
{
a = i*i;
answer = answer + a + " ";
i++;
}
while (i<9);
document.write("<p> nach do-while: " + answer + "</p>");
8.1.3 Ein- und Ausgabe
Listing 8.3: JS - Ein- und Ausgabe
x=prompt("Bitte geben Sie eine Zahl von 0 bis 10 ein:", "1");
alert("Sie haben eine " + x + " eingegeben.);
ok=confirm("Bitte bestätigen");
document.write("Hello World!")
8.1.4 try, catch und Fehlerbehandlung
In den aktuellen Browserversionen wird die übliche try-catch-nally Syntax unterstützt. Zusätzlich gibt es die Möglichkeit, mit
throw ""
einen Fehler zu werfen. Sie können sogar eine
eigene Fehlerbehandlung schreiben:
Listing 8.4: JS - Fehlerbehandlung
onerror=handleErr;
var txt="";
function handleErr(msg,url,l)
{
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l;
alert(txt);
return true;
}
8.1.5 Strings
Strings werden über + zusammengefügt. Zusätzlich haben Sie die Methoden
82
c Dr.
8.1 Einführung
•
•
•
•
length: Gibt die Länge des Strings wieder.
toLowerCase(): Gibt den String komplett kleingeschrieben wieder.
toUpperCase(): Gibt den String komplett groÿgeschrieben wieder.
split(Trennzeichen): Zerlegt den String an jedem Vorkommen des Trennzeichens. Zurückgegeben wird ein Array aus Teilstrings.
•
indexOf(andererString): Gibt die Position des ersten Vorkommens des angegebenen
Strings wieder. Wird dieser nicht darin gefunden, so gibt die Methode -1 zurück.
•
lastIndexOf(andererString) Gibt die Position des letzten Vorkommens des angegebenen
Strings wieder. Wird dieser nicht darin gefunden, so gibt die Methode -1 zurück.
8.1.6 Arrays
Ein Array wird mit
new Array()
deniert. Dann können Sie mit eckigen Klammern auf die
Elemente zugreifen und haben folgende Methoden zur Verfügung:
•
•
•
•
•
•
•
length Anzahl der Elemente zurückgeben.
concat(anderesArray) Zwei Arrays verbinden.
join(Trennzeichen) Array in Zeichenkette umwandeln.
pop() Letztes Element aus Array löschen.
push(neuerWert) Ein neues Element an das Ende des Array anhängen.
reverse() Reihenfolge der Elemente umkehren.
sort(VergleichsFunction) Elemente sortieren.
8.1.7 OO
JavaScript kennt keine Typen und somit gibt es auch keine echten Klassen. Es ist möglich,
sogenannte Prototypen oder Templates zu nutzen. Über new Object() bekommt man ein Objekt.
Jedes Objekt kann zur Laufzeit um beliebige Methoden und Attribute erweitert werden. Es
braucht nicht notwendigerweise eine im Code festgelegte Denition einer Klasse. Es ist aber auch
möglich, ein Template zu denieren. Von OO im eigentlichen Sinne würde ich nicht sprechen.
Sehen Sie selbst:
Listing 8.5: JS - objektbasiert
function testStudi()
{
var ute = new studi("ute", "12345");
ute.sayHello();
}
function studi(name, matrikelnummer)
{
this.name=name;
this.matrikelnummer = matrikelnummer;
this.sayHello = sayHello
}
83
function sayHello()
{
alert("hello " + this.name)
}
c Dr.
8.2 Validierung von Formularen
sayHello() könnte auch auÿerhalb von studi sein. Dann wäre sie allgemein
this.name würde leer sein. Achtung: Es ndet keinerlei Überprüfung statt.
Wenn Sie new studi("ute", "122", 2) schreiben, so haben Sie immer noch einen studi auf
den Sie die Methode sayHello anwenden können. Es wird kein Fehler ausgegeben.
Die Funktion
zugänglich, aber
Es ist sogar möglich, Vererbung zu implementieren. Dazu benötigen Sie das Schlüsselwort
prototype.
Damit können auch nachträglich allen Objekten eines Templates Methoden oder
Eigenschaften hinzugefügt werden.
Generell gilt, es ist möglich, in JavaScript objektbasiert zu programmieren. Aber Sie müssen
sich sehr disziplinieren, damit keine unangenehmen Überraschungen auftreten.
8.1.8 Sicherheit
•
JavaScript kann vom Browser aus weder auf das lokale Dateisystem schreiben noch davon
lesen.
•
•
JavaScript kann innerhalb des Webbrowsers keine anderen Programme ausführen.
JavaScript kann innerhalb des Webbrowsers nur eine Verbindung zum aktuellen Webserver
herstellen oder Mails verschicken. Es ist nicht möglich, mit JavaScript eine Verbindung
zu einem ganz anderen Rechner herzustellen, um dort Dateien hochzuladen etc.
Gegeben seien folgende Eingabefelder eines Formulars:
Listing 8.6: HTML - Eingabefelder
<input type="text" value="" id="name">
<input type="text" value="" id="email">
<input type="text" value="" id="plz">
8.2.1 Ein erster Versuch
Aufgabe 8.1
Überprüfen Sie mit JavaScript, ob die Felder ausgefüllt sind. In diesem ersten
Versuch dürfen Sie alert-Boxen für die Fehlermeldung verwenden.
Aufgabe 8.2
Zur Überprüfung der Eingabe, werde das Script mit
a)
<input type="button" onclick="checkform()" value="send" />
b)
<form action="index.php" onsubmit="return checkform(this)">
aufgerufen. Testen Sie die unterschiedlichen Aufrufmöglichkeiten mit ein- bzw. ausgeschaltetem
JavaScript.
8.2.2 Reguläre Ausdrücke
Reguläre Ausdrücke sind eine einfache und mächtige Möglichkeit, Eingaben auf viele Regeln zu
überprüfen. Anstelle vieler if-Anweisungen verwenden Sie eine gültige Beschreibung und testen
Sie, ob die Eingabe der darin beschriebenen Syntax genügt. Die üblichen Denitionsmöglichkeiten für reguläre Ausdrücke in JavaScript werden in Tabelle A.4 im Anhang aufgeführt.
Folgendes Script überprüft, ob die Postleitzahl genau 5 Ziern hat:
84
c Dr.
Listing 8.7: JS - Validierung der PLZ, Fehlerausgabe mit DOM
function testPLZ() {
var feldPLZ = document.getElementById("plz");
var plz;
var rePLZ = /\d{5}/;
var ok;
if (feldPLZ)
plz = feldPLZ.value;
else
ok = false; //Feld mit id plz fehlt!
ok = false;
ok = rePLZ.test(plz);
return ok;
}
8.2.3 Ein zweiter Versuch
Viele alert-Fenster stören. Besser ist es, die Fehler zu sammeln und zusammengefasst auszugeben. Dabei kann man entweder neben jedes fehlerhafte Feld eine Meldung ausgeben, oder alle
Fehler z.B. am Formularanfang ausgeben. Dabei kann man entweder über das DOM-Modell
direkt Knoten als Fehlermeldungen einfügen oder mit innerHTML den Fehler in einen dafür
vorgesehenen Bereich schreiben.
Diskutieren Sie die Unterschiede zwischen dem DOM- und dem innerHTML-Ansatz anhand
folgender Scripten:
Listing 8.8: JS - Validierung
function validate() {
var validForm=true;
var x = document.forms[0].elements;
for (var i=0;i<x.length;i++) {
removeError(x[i]);
if (!x[i].value)
{
validForm = false;
writeError(x[i],'This field is required');
}
}
return validForm;
}
function writeError(obj, message) {
var sp = document.createElement('span');
sp.className = 'error';
sp.id = "error_" + obj.name;
sp.appendChild(document.createTextNode(message));
obj.parentNode.appendChild(sp);
}
function removeError(obj)
{
var err=document.getElementById("error_" + obj.name);
if(err)
err.parentNode.removeChild(err);
}
85
c Dr.
Die Funktion
writeError
könnte auch ohne Hinzufügen von Knoten auskommen. An einer
geeigneten Stelle im HTML fügt man
<div id="error"></div> für die Fehlerbenachrichtigung
ein. Dieser Knoten könnte entsprechend formatiert werden oder auch nur ein span-Tag sein.
Listing 8.9: JS - Ausgabe von Fehlermeldungen mit innerHTML
function writeError(obj, message) {
var err = document.getElementById("error");
err.innerHTML = err.innerHTML + message + "<br />";
}
function removeError()
{
//muss nur einmalig zu Beginn von validate aufgerufen werden
err.innerHTML = "";
}
Laut Benchmark - W3C DOM vs. innerHTML ist innerHTML schneller als DOM, aber DOM
dürfte zukunftweisend sein.
Egal wie Sie sich entscheiden, Sie sollten Ihre Methode so weit verbessern, dass auch Screenreader schnell zur ersten oder gesamten Fehlermeldung navigieren, indem Sie den Fokus darauf
setzen.
Aufgabe 8.3
Betrachten Sie folgenden Code und beschreiben Sie, was in jeder Zeile passiert:
Listing 8.10: JS - Ausgabe von Fehlermeldungen mit innerHTML und Fokus
function validate() {
var validForm=true;
var x = document.forms[0].elements;
var labelText;
err.innerHTML = "";
for (var i=0;i<x.length;i++) {
//fetch label of given eld
labelText = getLabelTextForId(x[i].id);
//see if eld is required , e.g. test for ∗
if(labelText.indexOf("*") != -1)
{
if (!x[i].value)
{
validForm = false;
err.innerHTML = err.innerHTML + "<a href=\"#"
+ x[i].id + "\">Bitte füllen Sie das Feld "
+ labelText + " korrekt aus.</a><br />";
}
}
}
86
}
if (!validForm)
{
err.innerHTML = "<a id=\"errorMessage\" name=\"errorMessage\">
Das Skript kann so nicht übermittelt werden.</a><br />" +
err.innerHTML;
document.getElementById("errorMessage").focus();
}
return validForm;
c Dr.
8.3 Ajax: Asynchrones JavaScript und XML
function getLabelTextForId(id) {
var label, labels = document.getElementsByTagName('label');
for (var i = 0; (label = labels[i]); i++) {
if (label.htmlFor == id) {
return label.innerHTML;
}
}
return id;
}
Aufgabe 8.4
Entwickeln Sie eine möglichst generische Validierungsfunktion bzw. ein geeigne-
tes Objekt, das Sie einfach in Ihr Skript einbinden können. Welche Methoden und Eigenschaften
benötigen Sie?
Aufgabe 8.5
Stellen Sie eine Funktion zur Verfügung, die alle Wörter der aktuellen Seite
eines gegebenen Wortes hervorhebt, z.B. das Wort PHP gelb unterlegt.
Aufgabe 8.6
Erzeugen Sie eine Funktion, die eine Tabelle Ihrer Seite auf Klick der jeweiligen
Spalte sortiert.
Aufgabe 8.7
Stellen Sie zwei Funktionen zum Kodieren und Dekodieren einer E-Mail-Adresse
zur Verfügung, so dass die E-Mail-Adressen Ihrer Seite nicht einfach eingesammelt werden
können, die Links aber dennoch funktionieren.
8.3 Ajax: Asynchrones JavaScript und XML
Mit der AJAX-Technologie lassen sich über JavaScript auch nur Teile einer Website aktualisieren. Üblicherweise werden im Hintergrund Verbindungen zum Server hergestellt und nur
einzelne Informationen abgerufen. Die Netzlast ist dadurch deutlich geringer.
Über das Objekt XMLHttpRequest kann JavaScript direkt mit dem Webserver kommunizieren und so neue Inhalte in die Seite einfügen, ohne dass die gesamte Seite neu geladen werden
muss. Die Basis ist wie gesagt das Objekt XMLHttpRequest, DOM zum Einfügen der Inhalte,
die in XML übermittelt werden. Es ist also nicht mehr notwendig, ein Formular mit get oder
post zu übermitteln, um eingabeabhängige Inhalte anzuzeigen. Gleichzeitig möchte ich an dieser Stelle darauf hinweisen, dass Screenreader noch sehr groÿe Probleme mit dieser Technologie
haben. AJAX ist zwar mittlerweise sehr verbreitet, das zugrundeliegende Objekt ist jedoch
(noch) browserabhängig. Das Skript 8.11 zeigt Ihnen, wie sie ein passendes Objekt erzeugen
können.
Listing 8.11: JS - Erzeugen eines XMLHttpRequest Objekts
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox , Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
87
c Dr.
8.4 Tipps
}
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
Skript
??
zeigt, wie JavaScript nach Erzeugen des XMLHttpRequest-Objekts eine Anfrage
an den Server stellen kann. Dies ist sozusagen Hello Worldin Ajax.
Listing 8.12: JS - Ajax-Anfrage
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4) //Anfrage beendet
{
//fügt neuen Inhalt an entsprechender Stelle ein
updateAjaxContent(xmlHttp.responseText);
}
}
xmlHttp.open("GET","ajax.php",true);
xmlHttp.send(null);
Im bisher entwickelten Beispiel wird die Antwort des Webservers als einfacher Text über die
responseText ausgegeben. Komplexere Inhalte werden üblicherweise in XML überdann müssen Sie auf die Eigenschaft responseXML zugreifen. Komplexere JavaScript-
Eigenschaft
mittelt,
bzw. Ajax-Anwendungen nutzen häug eines der verbreiterten Frameworks wie Sajax, Sarissa
oder Prototype. Eine ausführliche Darstellung und Anleitung nden Sie unter JavaScript und
AJAX. Einen Überblick und damit eine gute Einführung bietet, wie so häug, auch Wikipedia.
8.4 Tipps
Richtige JavaScript Version
: Nicht alle Browser unterstützen die notwendige JavaScript
Version. Ein guter Test für die aufgeführte Mächtigkeit ist
Listing 8.13: JS - Teste auf geeignete JS Version
if(document.getElementById && document.createTextNode)
{
[...]
}
8.5 Links zum Thema
•
•
•
88
W3Schools: Eine gute Adresse zum Lernen
Prototype JavaScript Framework
Codebeispiele
c Dr.
9 Cookies und Sessions
Im letzten Kapitel haben Sie die Mächtigkeit von PHP erfahren. Gerade für interaktive Anwendungen werden Sie Sesssions und/oder Cookies benötigen. Bei HTTP gehen Informationen aus
früheren Anforderungen verloren (zustandsloses Protokoll). Viele Applikation, wie beispielsweise Warenkörbe, basieren jedoch darauf, dass Benutzerinformationen auf verschiedenen Seiten
zur Verfügung stehen.
Bei einer Session wird die Information auf dem Server gehalten, bei Cookies auf dem Client.
Sessions verwenden jedoch häug Cookies, um die SessionId, also die Zuodnung eines jeweiligen
Clients zu seinen Daten, zu gewährleisten.
9.1 Cookies
Cookies sind Variable-Wert Paare, die als Teil des HTML-Headers übertragen werden. Cookies
können auch per JavaScript gesetzt und gelesen werden. Cookies sind an eine Domäne gebunden
und können für einen längeren Zeitraum oder auch nur für die Dauer einer Session, also so lange,
wie der Browser geönet ist, vorgehalten werden.
9.1.1 Cookies serverseitig
Cookies können vom Server als Teil des HTML-Headers an den Client übertragen werden, dies
kann mit PHP erfolgen.
Listing 9.1: PHP - Cookies
//testen auf cookies
$test_temp = isset($_COOKIE['test_temp']) ?
'supports' : 'does not support';
$test_persist = isset($_COOKIE['test_persist']) ?
'supports' : 'does not support';
//objekte in cookies
//schreiben
setcookie('cookiedata', serialize($cookiedata)
//lesen
$formdata = $_COOKIE['cookiedata'];
if ($formdata != '') {
return unserialize($formdata);
9.1.2 Cookies clientseitig
Cookies können auch mit JavaScript gesetzt und gelesen werden.
Listing 9.2: JS - Cookies schreiben
function WriteCookie(bezeichner, wert, dauer)
{
var jetzt, auszeit;
jetzt = new Date();
89
9.2 Alternativen zu Cookies
}
auszeit = new Date(jetzt.getTime() + dauer * 86400000);
document.cookie = Bezeichner + "=" + Wert + ";expires=" +
auszeit.toGMTString() + ";";
Cookies können eigentlich nicht gelöscht werden, aber expires kann auf einen Wert in der Vergangenheit gesetzt werden, was einem Löschen gleich kommt. document.cookie enthält die Cookies der aktuellen Seite in der Form bezeichner=wert;bezeichner=wert;. . . , also mit Semikolon
voneinander getrennt. Den Wert eines einzelnen Bezeichners kann man durch folgenden Code
erhalten.
Listing 9.3: JS - Cookies lesen
function LeseCookie()
{
var wert, wertStart, wertEnde;
wert = "";
if(document.cookie)
{
wertStart = document.cookie.indexOf("=") + 1;
wertEnde = document.cookie.indexOf(";");
if (wertEnde == -1)
wertEnde = document.cookie.length;
wert=document.cookie.substring(wertStart,wertEnde);
}
return wert;
}
Frage 9.1
Was sind Cookies und wie werden sie übermittelt?
Frage 9.2
Wofür würden Sie Cookies verwenden?
9.2 Alternativen zu Cookies
Neben den üblichen Cookies sind weitere Möglichkeiten zur Speicherung von clientseitigen Daten verbreitet: Flash-Cookies, DOM Storage für Mozilla-basierende Browser und userData für
den Internetexplorer. Da die Installation von Flash sehr verbreitet ist, kann man über das Objekt SharedObjekt Daten auf dem Client speichern. Listings hierzu nden Sie unter Listings
mit SharedObjekt und DOM Storage
9.3 Sessions
Bei Sessions werden die Daten auf dem Server gehalten. Für die Zuordnung, welcher Client zu
welchen Daten gehört, wird eine SessionId verwendet. Diese SessionId kann entweder als Teil der
URL oder als Cookie übermittelt werden. Üblicherweise werden Cookies verwendet. Die URL
hat den Nachteil, dass eine Benutzerin evtl. die URL als Link zu einer Freundin sendet und
so bei geöneter Session beide auf einen Datenbestand zugreifen oder der Link bei beendeter
Session nicht funktioniert. Der Zugri über Cookies funktioniert natürlich nur, wenn diese nicht
deaktiviert wurden nach aktuellen Statistiken sind dies jedoch nur noch 1% aller Benutzer.
Im Folgenden gehen wir daher von der Cookie-Methode aus.
90
c Dr.
9.4 Sicherheit
Beim Starten einer Session wird ein Cookie auf dem Client gesetzt, der als Wert die SessionId
enthält. Da ein Cookie im HTML-Header übermittelt wird, muss jedes Starten einer Session
am Anfang einer HTML-Response stehen, folgender Code ist fehlerhaft:
Listing 9.4: PHP - Session starten (fehlerhaft)
<?php
session_start(); //SO NICHT !!!
?>
Denn hier wird erst der Doctype übermittelt, als Teil des HTML und dann soll noch etwas vom
Header übermittel werden, session_start, muss wirklich das erste sein, das im Script steht!
In eine Session können Sie dann Werte ablegen, z.B.
Listing 9.5: PHP - Session Werte ablegen
session_start();
$_SESSION['test'] = 'test';
Dies können auch serialisierte Objekte sein. Verwenden Sie dazu die Funktionen serialize und
unserialize.
9.4 Sicherheit
Um sich besser gegen Attacken zu schützen, können Sie folgenden Code verwenden.
Listing 9.6: PHP - Session mit zusätzlicher Sicherheit
session_name('eigene-SessionID');
session_id('');
session_start();
session_id('eigener zufälliger Wert');
Um eine Session etwas zu schützen, können Sie weitere Informationen abgleichen:
Listing 9.7: PHP - Session mit MD5
session_start();
$_SESSION['HTTP_USER_AGENT'] = md5($_SERVER['HTTP_USER_AGENT']);
//und später
if (md5($_SERVER['HTTP_USER_AGENT'])!=$_SESSION['HTTP_USER_AGENT']){
/∗ so nicht ∗/
}
exit;
Mit md5 können Sie eine Verschlüsselung erreichen.
Die sicherste Form des Session Managements erreicht man durch ein Dialogtracking. Dabei ist
der oben eingeführte SessionCode nicht statisch, sondern wird bei jedem Zugri neu vergeben.
Wir bezeichnen jenen SessionCode als Token. Die Anwendung baut in jeden Dialogschritt (d.h.
jeden Link in einer Seite) das diesen Dialogschritt eindeutig kennzeichnende Token ein. Erhält
sie einen Request, prüft sie, ob das Token für diesen Aufruf gültig ist und streicht es aus der
Liste der gültigen Token. Ein erneuter Aufruf dieses Links (Replay durch den Angreifer) ist
damit nicht mehr möglich. Auch ist es nicht möglich, eine Aktion ohne Token aufzurufen. Die
Kenntnis der SessionID und eines auf dem Übertragungsweg ausgespähten Tokens ist damit
91
c Dr.
9.5 Links zum Thema
nicht mehr ausreichend, um in die Session einzudringen. Man muss gleichzeitig auch das Token
von mindestens einem unverbrauchten (d.h. noch nicht aufgerufenen) Link besitzen.
Frage 9.3
Warum muss session_start aufgerufen werden, bevor Doctype-Angaben oder anderer
HTML-Code übermittelt wird?
Frage 9.4
Welche Anwendungsszenarien fallen Ihnen zu Sessions ein?
9.5 Links zum Thema
•
•
•
92
XSS: Wie Hacker mit XSS an fremde Sessions dran kommen
Sessions und Cookies mit PHP
Alternative zu Cookies: Listings mit SharedObjekt und DOM Storage
c Dr.
10 Authentizierung
In vielen Applikationen wollen Sie bestimmten Benutzerinnen bestimmte Rechte geben. Dazu
benötigen Sie irgendeine Art der Identikation, der Authentizierung.
10.1 HTTP
HTTP unterstützt die Authentizierung durch Benutzername und Passwort. Hierzu muss der
Webserver entsprechend konguriert werden (Datei .htaccess):
<Diretory "C:\intern">
AuthType Basic
AuthName Kunde
AuthUserFile "C:\kunde.txt"
Require valid-user
</Directory>
Die Datei mit den Passwörtern hat folgende Form:
Trapp:12345
Mayer:myspecial
Achtung: Bei
AuthType Basic werden Benutzername und Passwort unverschlüsselt übertragen.
AuthType Digest verwenden. Bei dieser Methode werden verschlüsselte
Alternativ können Sie
Passwörter angefordert. Diese Methode wird aber nicht von allen Browsern unterstützt.
Mit PHP als Modul kann die HTTP-Authentizierung verwendet werden. Sie können sich
mit der Funktion
php_info()
anzeigen lassen, ob Ihr PHP als Modul läuft. Codebeispiele und
eine gute Erläuterung nden Sie unter HTTP-Authentizierung mit PHP
Frage 10.1
Welche Vor-/Nachteile hat die HTTP-Authentizierung?
10.2 LDAP
In gröÿeren Unternehmen wird zur Benutzerverwaltung häug das Lightweight Directory Access Protocol (LDAP) eingesetzt. PHP unterstützt LDAP, Ihnen stehen folgende Funktionen
zur Verfügung:
ldap_close.
ldap_connect, ldap_bind, ldap_error, ldap_search, ldap_get_entries und
Eine Anleitung mit Listings nden Sie unter: LDAP Listings
10.3 Windows
Falls Sie PHP über den IIS ausführen lassen, dann können Sie Ihre Website über den IIS mit
der üblichen Windows-Authentizierung schützen.
10.4 Session
Sie können Ihre Benutzerinformationen auch in einer Datenbank, XML-Datei o.ä. ablegen und
den Login-Status über Sessions umsetzen.
93
A Anhang
A.1 HTML-Attribute
Die folgenden Tabellen listen zulässige Attribute in XHTML 1.0 strict auf (Quelle: XHTMLReferenz der Attribute). Dabei stehen die erlaubten Datentypen der Attribute für:
•
•
•
•
Zahl: Ganzzahl oder 0
Länge: Ganzzahl für Pixel-Angaben, Ganzzahl und
%-Zeichen für Prozent-Angaben
CDATA: Textstring (character data) aus beliebigen Zeichen.
<, &, >
und
"
müssen als
Entities kodiert werden
•
IDREF: darf nur Buchstaben, Ziern und den _ (Unterstrich) enthalten und muss mit
einem Buchstaben beginnen
Attribut
verwendbar in
erlaubte
Funktion
Werte und
Datentypen
abbr
td, th
CDATA
Hinweistext für die Zuordnung
der
Zelle,
die
bei
Sprachausgabe vor dem Zelleninhalt genannt wird
accept
form, input
CDATA
erlaubtevMIME-Typen
für
das Hochladen von Dateien
accept-charset
form
accesskey
a,varea,
button,
CDATA
unterstützte Zeichensätze
CDATA
Zeichen
input, label, le-
als Hotkey für den Hyper-
gend, textarea
action
form
align
col,
(Tastatureingabe)
link / Button / Element
CDATA
URI
für
die
Verarbeitung
der Formulardaten
colgroup,
left,
cen-
tbody, td, tfoot,
ter,
right,
th, thead, tr
justify,
Horizontale Ausrichtung
char
alt
area, img, input
CDATA
Kurzbeschreibung / Alternativtext: wird beim Überfahren mit der Maus angezeigt / wenn das Element
nicht geladen ist
archive
object
CDATA
Liste
von
Archivdateien
(mit Kommas abgetrennt)
für das Objekt
94
A.1 HTML-Attribute
axis
td, th
CDATA
Liste von Kategorien, zu der
die Zelle gehört, wird bei
Sprachausgabe genannt
border
table
Zahl
Rahmen
um
Tabellenele-
mente, Breite in Pixel
cellpadding
table
Länge
Innenabstand zwischen Zellenrand
und
Zelleninhalt,
Pixel oder Prozent
cellspacing
table
Länge
Abstand zwischen den Zellen, Pixel oder Prozent
char
col,
colgroup,
CDATA
tbody, td, tfoot,
Zeichen, an dem mit align
ausgerichtet wird
th, thead, tr
charo
col,
colgroup,
CDATA
tbody, td, tfoot,
char
th, thead, tr
charset
Position des mit align und
festgelegten
Ausrich-
tungszeichens
a, link, script
CDATA
Zeichensatz des Verweisziels
/ Verknüpfung / Quelldatei
checked
input
checked
type="radio" oder
type="checkbox" wird das
bei
Element
als
ausgewählt
gekennzeichnet
cite
blockquote,
del,
CDATA
ins, q
URI der Zitatquelle / Begründung nach RFC 2396
classid
object
CDATA
codebase
object
CDATA
URI (nach RFC 2396) oder
Bezeichnung für das Objekt
Basis-URI für Angaben zu
classid, data und archive
codetype
object
CDATA
MIME-Type des Quelltextes der Datenquelle
cols
textarea
Zahl
Anzahl Zeichen pro Zeile
colspan
td, th
Zahl
Anzahl
der
Spalten,
über
die sich die Zelle spannt
content
meta
CDATA
Wert
die
für
mit
die
Eigenschaft,
name
oder
http-
equiv deniert wurde
coords
a, area
CDATA
Begrenzung
von
Bereichen
Image
in
aktiven
Maps
durch Koordinaten.
data
object
CDATA
URI der Datenquelle nach
RFC 2396
datad
button, div, input,
95
object,
CDATA
se-
Name eines Datenfeldes des
aktuellen
Datensatzes
der
lect, span, table,
mit datasrc denierten Da-
textarea
tenquelle
c Dr.
A.1 HTML-Attribute
dataformatas
button, div, in-
plaintext,
Verfahren
put,
html
rung von Daten aus datad
object,
se-
lect, span, table,
der
Interpretie-
und datasrc
textarea
datasrc
button, div, input,
object,
CDATA
se-
URI der Datenquelle nach
RFC 2396
lect, span, table,
textarea
datetime
del, ins
CDATA
Datum und Uhrzeit der Änderung
declare
object
declare
Objekt wird geladen, aber
nicht initialisiert (z.B. abgespielt)
defer
script
defer
verhindert, dass ein Script
Inhalte im Dokumentfenster
erzeugen kann
dir
bdo
disabled
button,
input,
optgroup,
tion,
ltr, rtl
Schreibrichtung
disabled
kann nicht betätigt / be-
op-
nutzt / ausgewählt werden
select,
textarea
enctype
form
CDATA
MIME-Typ,
mit
dem
das
Formular übertragen wird
event
script
CDATA
führt das Script abhänging
davon aus, ob ein bestimmtes Ereignis eingetreten ist
for
label
IDREF
ID des Elements, zu dem
das Label gehört
for
script
IDREF
ID des Elements, für die das
Script gelten soll
frame
table
void,
ve,
abo-
below,
Anzeige
bestimmter
Rah-
men der Tabelle
hsides, lhs,
rhs,
vsi-
des,
box,
border
headers
td, th
IDREF
Liste
von
Zeilen-
ID-Namen
oder
von
Spaltenüber-
schriften, zu denen die Zelle
gehört, wird bei Sprachausgabe genannt
height
img, object
Zahl
Höhe in Pixel
href
a, area, link
CDATA
Verweisziel (Hyperlink)
href
base
CDATA
Basis-URI für Verweise aus
hreang
a, link
CDATA
dem Dokument
Landessprache des Verweisziels
96
c Dr.
A.1 HTML-Attribute
http-equiv
meta
CDATA
bestimmte
für
Eigenschaft
Metainformationen
(HTTP-Kopfdaten),
vom
Browser
die
interpretiert
werden
ismap
img
ismap
serverseitige Image-Map
ismap
input
ismap
bei
type="image",
nutzt
eine
be-
serverseitige
Image-Map
label
optgroup, option
CDATA
Text
für
Eintrag
/
eine
Gruppe von Einträgen in einer Auswahlliste
longdesc
img
CDATA
URI,
an
dem
eine
Lang-
beschreibung der Grak zu
nden ist
maxlength
input
Zahl
Anzahl erlaubter Zeichen
media
link, style
CDATA
Ausgabemedium
(default:
screen)
method
form
get, post
Verfahren
der
Bereitstel-
lung der Fomulardaten auf
dem Server
multiple
select
multiple
mehrere Einträge in einer
Auswahlliste
können
mar-
kiert werden
name
a, map, param
CDATA
Ankername für das Element
name
button,
CDATA
Name des Elements
CDATA
bestimmte Eigenschaft für
/ Map
form,
img,
input,
object,
name,
textarea
name
meta
Metainformationen
nohref
area
nohref
aktiver
Bereich
in
einer
Image Map, der kein Verweisziel hat
prole
head
CDATA
URI für Metainformationen
readonly
textarea
readonly
Wert kann nicht verändert
werden (nur Lesen)
rel
a, link
CDATA
Verweisziel
als
Vorwärts-
verknüpfung rev
a, link
CDATA
rows
textarea
Zahl
Anzahl sichtbarer Zeilen
rowspan
td, th
Zahl
Anzahl der Zeilen, über die
Verweisziel als Rückwärtsverknüpfung sich die Zelle spannt
97
c Dr.
A.1 HTML-Attribute
rules
table
none,
Anzeige bestimmter Gitter-
groups,
netzlinien innerhalb der Ta-
rows,
belle
cols,
all
schema
meta
CDATA
scope
td, th
row,
Schema für den Wert der Eigenschaft
col,
Angabe
der
Zeilen
rowgroup,
Spalten,
für
colgroup
Überschriftencharakter hat,
die
die
und
Zelle
wird bei Sprachausgabe genannt
selected
option
selected
markiert Eintrag als ausge-
shape
a, area
rect, circle,
Form der aktiven Bereiche
poly,
in Image Maps
wählt
default
size
input
Zahl
Anzeigebreite in Zeichen
size
select
Zahl
Anzahl
span
col, colgroup
Zahl
src
img,
CDATA
Quelldatei von Grak
CDATA
bestimmt
der
gleichzeitig
sichtbaren Einträge
Anzahl der Spalten, für die
die Angaben gelten
input
type="image"
src
script
einen
URI,
die
den Script-Code enthält
standby
object
CDATA
Meldungstext, der während
Laden
zeigt
des
Objekts
wird
(von
ange-
aktuellen
Browsern nicht unterstützt)
summary
table
CDATA
Text,
den
le
der
Sehbehinderten
Inhalt
nennt,
der
Tabel-
wenn
Browser
Sprachausgabe unterstützt
tabindex
a, area, button,
Zahl
Tabulatorreihenfolge
input, object, se-
von
Hyperlinks
lect, textarea
target
a,
area,
link
form,
CDATA
_blank,
,
Fenstername
für
das
Ver-
weisziel / Ausgabe
_parent,
_self,
_top
target
base
CDATA
Default Zielfenster für Verweise aus dem Dokument
type
button
button,
Typ des Button
submit,
reset
98
c Dr.
A.1 HTML-Attribute
type
input
text, pass-
Typ des Formularelements
word,
checkbox,
radio,
submit,
reset,
le,
hidden,
image,
button
type
link, script, style
CDATA
MIME-Typ
des
Verknüp-
fungsziels / der Script-Datei
/ der Style-Sprache
type
object
CDATA
MIME-Type der Datenquelle
type
param
usemap
img,
CDATA
MIME-Type des Wertes bei
valuetype="ref"
input
CDATA
URI / Name des zugeordne-
type="image",
ten map-Elements (Image-
object
Map), dem Wert für Name
wird das # vorangestellt
valign
value
col,
colgroup,
top, midd-
tbody, td, tfoot,
le, bottom,
th, thead, tr
(baseline)
button,
CDATA
input,
option
Vertikale Ausrichtung
Beschriftung / Wert, der gesendet wird
value
param
CDATA
Initialisierungswert
valuetype
param
data,
Vorgehen der Interpretation
width
col,
colgroup,
ref,
object
des Initialisierungswertes
Zahl
Breite in Pixel
Länge
Anzeigebreite in Pixel oder
img, object
width
table
Prozent
Tabelle A.1: HTML-Attribute für übliche Tags
Attribut
Funktion
verwendbar in
Ausnahmen
class
Stylesheet-Klasse
alle
base,
html,
param,
head,
meta,
script,
style, title
id
individueller
Name,
alle
w.o.
alle
w.o.
alle
w.o.
ID (bei älteren Browsern zusätzlich name
verwenden)
style
deniert
Angaben
CSS(Inline-
Style)
title
99
Titel
c Dr.
A.3 Reguläre Ausdrücke
dir
Schreibrichtung
der
alle
base, br, frame,
im Element verwende-
frameset,
ten Landessprache
iframe,
hr,
param,
script
lang
Landessprache im Ele-
alle
w.o.
ment
Tabelle A.2: HTML Universelle Attribute
A.2 Formularereignisse
Event-Handler, Formulare
onblur
Verlassen eines Bereiches (Fens-
area,
ter,
label, select, textarea
Formular-Element,
aktiver
button,
input,
Bereich in Image Map)
onfocus
Aktivieren eines Bereiches (Fens-
area,
ter,
label, select, textarea
Formular-Element,
aktiver
button,
input,
Bereich in Image Map)
onload
Beim Laden der Datei
body
onunload
Beim Verlassen der Datei
body
onreset
Beim Zurücksetzen des Formulars
form
onsubmit
Beim Absenden des Formulars
form
onchange
Nach Änderung des Elementes
input, select, textarea
onselect
Beim Auswählen des Elementes
input, textarea
Tabelle A.3: Mögliche Ereignisse zur Ausführung von JavaScript (Auswahl)
Bestandteil
Beispiel
/aus/
^
/^aus/
Beschreibung
ndet aus, und zwar in aus, Haus, auserlesen
und Banause.
ndet aus am Anfang des zu durchsuchenden
Wertes, also in aus und auserlesen, sofern das
die ersten Wörter im Wert sind.
$
/aus$/
ndet aus am Ende des zu durchsuchenden
Wertes, also in aus und Haus, sofern das die
letzten Wörter im Wert sind.
*
/aus*/
ndet au, aus, auss und aussssss, also das
letzte Zeichen vor dem Stern 0 oder beliebig
oft hintereinander wiederholt.
+
/aus+/
ndet auss und aussssss, also das letzte Zeichen vor dem Plus-Zeichen mindestens einmal oder beliebig oft hintereinander wiederholt.
.
/.aus/
ndet Haus und Maus, also ein beliebiges Zeichen an einer bestimmten Stelle.
100
c Dr.
.+
/.+aus/
ndet Haus und Kehraus, also eine beliebige
Zeichenfolge an einer bestimmten Stelle. Zusammensetzung aus beliebiges Zeichen und
beliebig viele davon, jedoch mindestens eines.
\b
/\baus\b/
ndet aus als einzelnes Wort.
\b bedeutet ei-
ne Wortgrenze.
\B
/\Baus\B/
ndet aus nur innerhalb von Wörtern, z.B. in
hausen oder Totalausfall.
\B
bedeutet keine
Wortgrenze.
\d
/\d.+\B/
ndet eine beliebige ganze Zahl.
\d bedeutet
eine Zier (0 bis 9)
\D
\f
\n
\r
\t
\v
\s
\S
/\D.+/
/\f/
/\n/
/\r/
/\t/
/\v/
/\s/
/\S.+/
ndet -fach in 3-fach, also keine Zier.
ndet ein Seitenvorschubzeichen.
ndet ein Zeilenvorschub-Zeichen.
ndet ein Wagenrücklaufzeichen.
ndet ein Tabulator-Zeichen.
ndet ein vertikales Tabulator-Zeichen.
ndet
jede
\f\n\t\v
Art
von
white
space,
also
und Leerzeichen.
ndet ein beliebiges einzelnes Zeichen, das
kein white space ist, also kein
\f\n\t\v
und
kein Leerzeichen.
\w
/\w.+/
ndet alle alphanumerischen Zeichen und
den Unterstrich (typische Bedingung etwa
für programmiersprachengerechte selbstvergebene Namen).
\W
/\W/
ndet ein Zeichen, das nicht alphanumerisch
und auch kein Unterstrich ist (typisch zum
Suchen nach illegalen Zeichen bei programmiersprachengerechten selbstvergebenen Namen).
()
/(aus)/
ndet aus und merkt es sich intern. Bis zu
9 solcher Klammern (Merkplätze) sind in einem regulären Ausdruck erlaubt.
/.../g
/aus/g
ndet aus so oft wie es in dem gesamten
zu durchsuchenden Bereich vorkommt. Die
Fundstellen werden intern in einem Array gespeichert.
/.../i
/aus/i
ndet aus, Aus und AUS, also unabhängig
von Groÿ-/Kleinschreibung.
/.../gi
/aus/gi
ndet aus, so oft wie es in dem gesamten zu
durchsuchenden Bereich vorkommt (g) und
unabhängig von Groÿ-/Kleinschreibung (i).
Tabelle A.4: Bestandteile regulärer Ausdrücke, Quelle: validome.org
101
c Dr.
Listings
5.1
HTML - Einfachste Seite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
39
5.2
HTML - Fehlerhafte Seite
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
39
5.3
HTML - mit Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
5.4
HTML - Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
5.5
HTML - wesentliche Tags
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
42
5.6
HTML - Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
44
5.7
HTML - Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
44
6.1
HTML - Einbinden einer CSS Datei . . . . . . . . . . . . . . . . . . . . . . . . .
49
6.2
CSS - Syntax Selektor
50
6.3
CSS - Regeln, insbesondere import
6.4
HTML - Grundgerüst für CSS Anweisungen
6.5
CSS - Einfaches Beispiel
6.6
6.7
CSS - Mehrspaltiges Layout
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
6.8
CSS - kommentierter Kopf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
57
6.9
CSS - Dateistruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
57
7.1
HTML - Einbinden von PHP
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
59
7.2
PHP - Kommentare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
60
7.3
PHP - Variablen, Strings und Arrays
. . . . . . . . . . . . . . . . . . . . . . . .
62
7.4
PHP - include und require . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
62
7.5
PHP - implode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
62
7.6
PHP - explode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
63
7.7
PHP - array Anwendungsbeispiel
. . . . . . . . . . . . . . . . . . . . . . . . . .
64
7.8
PHP - Translation Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
7.9
PHP - Dateibearbeitung
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
52
. . . . . . . . . . . . . . . . . . . .
52
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
52
CSS - Alternative zu display:none . . . . . . . . . . . . . . . . . . . . . . . . . .
54
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
7.10 PHP - Dateiupload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
7.11 PHP - Zufall . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
7.12 PHP - Kontrollstrukturen und Schleifen . . . . . . . . . . . . . . . . . . . . . . .
65
7.13 PHP - try/catch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
67
7.14 PHP - Konguration Fehlerbehandlung . . . . . . . . . . . . . . . . . . . . . . .
67
7.15 PHP - Objektorientiert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
68
7.16 PHP - Interface Iterator
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
69
7.17 PHP - Iteratoren für Arrays und Verzeichnisse . . . . . . . . . . . . . . . . . . .
69
7.18 PHP - Interface IteratorAggregate . . . . . . . . . . . . . . . . . . . . . . . . . .
70
7.19 PHP - XML-Unterstützung
70
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.20 HTML - einfaches Formularbeispiel für PHP Filter
. . . . . . . . . . . . . . . .
73
7.21 PHP - Formularvalidierung mit Filtern (einfach) . . . . . . . . . . . . . . . . . .
73
7.22 HTML - umfangreiches Formularbeispiel für PHP Filter . . . . . . . . . . . . . .
73
7.23 PHP - Formularvalidierung mit Filtern (umfangreich) . . . . . . . . . . . . . . .
73
7.24 PHP - Formulare mit Sicherheitsvariablen
. . . . . . . . . . . . . . . . . . . . .
74
7.25 PHP - Zu einfacher Datenbankzugri . . . . . . . . . . . . . . . . . . . . . . . .
74
7.26 PHP - Datenbankzugri
76
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
102
Listings
103
7.27 PHP - Automatischer Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
77
8.1
HTML - Einbinden von Javascript . . . . . . . . . . . . . . . . . . . . . . . . . .
80
8.2
JS - Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
81
8.3
JS - Ein- und Ausgabe
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
82
8.4
JS - Fehlerbehandlung
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
82
8.5
JS - objektbasiert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
83
8.6
HTML - Eingabefelder
84
8.7
JS - Validierung der PLZ, Fehlerausgabe mit DOM
. . . . . . . . . . . . . . . .
85
8.8
JS - Validierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
85
8.9
JS - Ausgabe von Fehlermeldungen mit innerHTML . . . . . . . . . . . . . . . .
86
8.10 JS - Ausgabe von Fehlermeldungen mit innerHTML und Fokus . . . . . . . . . .
86
8.11 JS - Erzeugen eines XMLHttpRequest Objekts . . . . . . . . . . . . . . . . . . .
87
8.12 JS - Ajax-Anfrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
88
8.13 JS - Teste auf geeignete JS Version
. . . . . . . . . . . . . . . . . . . . . . . . .
88
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.1
PHP - Cookies
9.2
JS - Cookies schreiben
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
9.3
JS - Cookies lesen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
90
9.4
PHP - Session starten (fehlerhaft) . . . . . . . . . . . . . . . . . . . . . . . . . .
91
9.5
PHP - Session Werte ablegen
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
91
9.6
PHP - Session mit zusätzlicher Sicherheit . . . . . . . . . . . . . . . . . . . . . .
91
9.7
PHP - Session mit MD5
91
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
c Dr.

Skript: EWA - Fachbereich Informatik

Transcription

Similar documents

PDF-Datei

AGO-OVAR 2.11 - Kurzprotokoll

KONZEPTION | YAHOO!

Ausarbeitung - Goethe

Freier BA 59 als PDF (A5 / 88 Seiten / 3.6

Anfahrt Beschreibung