1
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 1
Interaktives Web
Prof. Mag. Peter Micheuz
Bernhard Hoisl
Mi, 20.04.2005 9.00 – 17.15 Uhr
Do, 21.04.2005 9.00 – 17.15 Uhr
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 2
Inhalt
• Einführung - „Big Picture“
• Einführung in die Struktur des Internets
– Client-Server Prinzipien anhand HTTP-Protokoll
• Das System XAMPP
• HTML-Grundlagen
– Verwendung von CSS
• Die Scriptsprache PHP
– In Verbindung mit JavaScript
• Einführung in die Abfragesprache SQL
• Modellierung datenbankbasierter Probleme
• Praxisbeispiele
– Weblog
– Schuldatenbank
– Diashow
– Umfrage
– …
2
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 3
Vorwissen
Umfrage
http://hoisl.com/iweb
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 4
Big Picture
• Internet
– Informations- und Kommunikationsmedium
– Unüberschaubare Informationsanzahl
• Strukturierung der Informationen
• Statik --> Dynamik
• Client/Server-Prinzip
– Simulation von Client + Server
– Installieren + Konfigurieren eines lokalen Servers
– Kennenlernen spezieller Tools
• z.B. Server Log-File Auswertung
• Verstehen von technischen Hintergrundinformationen
3
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 5
Big Picture
• Bereitstellen von Informationen
– Per FTP, Einrichten eines FTP-Servers
– Statisch
• HTML Seiten erstellen
• Cascading Style Sheets (CSS)
– Dynamisch
• Einbinden von JavaScript
• PHP Seiten erstellen
• Datenbankanbindung
• Strukturieren von Informationen
– Modellierung datenbankbasierter Problemstellungen
– Erzeugen geeigneter Strukturen
– Datenbankadministration
• Evtl. Einrichten eines Mail-Server
• Praktische Beispiele zu allen Bereichen
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 6
Big Picture
Quelle: mediaresearch.orf.at
4
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 7
Big Picture
Quelle: mediaresearch.orf.at
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 8
Big Picture
Quelle: mediaresearch.orf.at
5
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 9
Big Picture
Quelle: mediaresearch.orf.at
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 10
Big Picture
Quelle: mediaresearch.orf.at
6
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 11
Big Picture
Quelle: mediaresearch.orf.at
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 12
Big Picture
Quelle: www.internetworldstats.com
7
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 13
Big Picture
Quelle: www.netcraft.com
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 14
Big Picture
Quelle: www.netcraft.com
8
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 15
Big Picture
Quelle: www.netcraft.com
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 16
Big Picture
Quelle: www.tiobe.com
9
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 17
Geschichtlicher Abriss des Internets
• 1969: ARPAnet
– Advanced Research Project Agency
• 1975: TCP/IP-Protokolle
• 1983: ARPAnet
– MILNET: öffentlicher Teil d. DDN (Defense Data Network)
– Neues kleineres ARPAnet
– Geschwindigkeit: 56 kbit/s
• 1985: NSFnet (National Science Foundation)
– Anbindung an das Internet in seiner damaligen Form
– Neue Vision: Für Wissenschaftler + Forschung
• 1987: schnelleres Backbone-Netzwerk
• 1990: ARPAnet hört auf zu existieren
• 1995: NSFnet hat Rolle des primären Backbones
• Heute: Kommerzielle Provider (ISP), die Infrastruktur schaffen
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 18
Entstehung des WWW
• World Wide Web ist ein Dienst des Internets
– Weitere Dienste z.B. Dateitransfer (FTP), virtuelles
Terminal (Telnet), E-Mail (SMTP, POP, IMAP) etc.
• Von Tim Berners-Lee am CERN (Genf) 1989
entwickelt
– Server/Client Kommunikation: HTTP (HyperText
Transfer Protocol)
– Adressierung über URIs (Uniform Ressource
Identifier)
– Auszeichnungssprache HTML (HyperText Markup
Language)
• Berners-Lee entwickelte auch 1. Webbserver
• W3-Konsortium (http://www.w3c.org)
– Unabhängiges Gremium für technische Standards
im Web
– Recommendations (Empfehlungen) ->
Verbindlichkeits-Charakter
10
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 19
Entstehung des WWW
• Webbrowser
– 1991: libwww (textbasiert), CERN
– 1992: Erwise, ViolaWWW, Midas (alle Unix), Samba (Mac)
– 1993: Mosaic (Unix, Mac)
– 1994: Opera, Mozilla
– 1995: Internet Explorer
• Heute
– Internet Explorer, Mozilla Firefox, Netscape, Opera, Safari, Konqueror
etc.
Quelle: www.w3schools.com
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 20
Struktur des Internets
• LAN: Local Area Network
• MAN: Metropolitan Area Network
• WAN: Wide Area Network
Quelle: learn.wu-wien.ac.at
11
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 21
Struktur des Internets
• Dezentrale Struktur
• Jeder Knoten ist mit zwei order mehr Knoten verbunden
(Maschennetz)
• TCP/IP-Protokolle (Transmition Control Protocol/Internet
Protocol)
– IP: Definiert Aufbau von Verbindungen, routet Daten (IPv4,
IPv6) etc.
– TCP: Bereitstellen von Datendiensten, Erstellen von
Datenströmen aus Datenpaketen, Fehlerkorrektur etc.
Maximale Länge eines
IP-Pakets: 1500 Byte
Quelle: learn.wu-wien.ac.at
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 22
Adressierung (IP-Protokoll)
• IP-Adressen
– Eindeutige Identifizierung eines Rechners
– Z.B. 62.178.241.242, 193.170.46.90, 127.0.0.1, 192.168.0.1 …
• DNS (Domain Name System)
– Zuteilung von Hostnames zu IP-Adressen
– Nameserver (verteilte Datenbanken) speichern Zuteilungstabellen
– Nameserver hierarchisch angeordnet
• Root-Server (insg. 13, http://www.root-servers.org)
– autoritativ
• Top-Level-Domains (.com, .org, .de, .at etc.)
– Adressierung 1 Rechners: Registrierung einer Domain innerhalb
einer Top-Level-Domain
• FQDN: Fully Qualified Domain Name
– www.hoisl.com
12
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 23
Dienstnummer (TCP-Protokoll)
• Mehrere Dienste können auf einem Rechner laufen
• Adressierung über Dienstnummer (Port)
– HTTP: Port 80
– FTP: Port 21/22
– SMTP: Port 25
– POP3: Port 110
• Socket
– IP-Adresse + Dienstnummer + Transportprotokoll
– Somit weltweit eindeutige Identifizierung eines Dienstes möglich
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 24
Client-Server
Quelle: learn.wu-wien.ac.at
13
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 25
HTTP-Protokoll
• URI (Uniform Ressource Identifier)
– Verweis auf Ort wo Dokument gespeichert ist (URL) oder
– Symbolischer Name für eine beliebige Ressource (URN)
• URL (Uniform Ressource Locator)
– Z.B. http://www.hoisl.com:80/index.php
• Protokoll: http
• Rechner: www.hoisl.com
• Dienstnummer: 80
• Lokaler Pfad: /index.php
• Korrekte URL-Schreibweise wird vom HTTP-Protokoll vorausgesetzt
– <Protokoll>://<FQDN>:<Port>/<path>?<searchpath>
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 26
HTTP-Protokoll
• Anfragen vom Client zum Server -> Antwort vom Server zum Client
• HTTP-Meldungen
– Kopfteil
– Trennzeile
– Nutzdatenteil
• HTTP-Anfrage (Request)
– Kopfzeile (HTTP-Methode, Ressourcenbezeichner, HTTP-Version)
– Optionalen Anfrageparametern
– Nutzdatenteil (kann auch leer sein)
• HTTP-Antworten (Reply)
– Kopfzeile (unterstützte HTTP-Version, Status-Code und -Meldung)
– Optionalen Antwortparametern
– Nutzdatenteil (kann auch leer sein)
14
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 27
HTTP-Protokoll
Quelle: learn.wu-wien.ac.at
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 28
HTTP-Protokoll
• HTTP-Definition
– 1996: HTTP/1.0
– 1997: HTTP/1.1
• Wichtige HTTP-Methoden
– GET, POST, PUT, DELETE, OPTIONS
• Interessante Request-Header-Fields
– If-modified-since
• Interessante Reply-Header-Fields
– Content-Type
– Content-Length
– Last-Modified
15
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 29
HTTP-Protokoll
• Antworttypen
– 1xx: Information, Hinweis
– 2xx: Aktion wurde ausgeführt
• 200: Operation erfolgreich ausgeführt
– 3xx: Redirection – Client muss weitere Aktionen veranlassen um
den Request durchführen zu können
• 301: Moved Permanently
• 302: Moved Temporarily
• 304: Not Modified
– 4xx: Fehler im Request
• 400: Ungültiger Request (meist ungültige Syntax)
• 401: Unauthorized
• 403: Forbidden
• 404: Not Found
– 5xx: Fehler auf Server-Seite
• 500: Internal Server Error
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 30
Datenbankbasierter Webserver
Quelle: www.schulinformatik.at
16
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 31
XAMPP
• Projekt von apachefriends.org
• Distribution von
– Apache Web-Server (http://www.apache.org)
– MySQL Datenbank (http://www.mysql.com)
– PHP (http://www.php.net)
– Perl (http://www.cpan.org)
• Practical Extraction and Report Language
– + Weitere nützliche Tools und Packages
• Gratis + Open Source + Plattformunabhängig
• Distributionen für Windows, Linux, Mac, Solaris
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 32
Konfiguration XAMPP
• XAMPP
– Status
– Sicherheitscheck
– phpinfo()
• Demos
– CD-Verwaltung
– Biorhythmus
– Instant Art
– Telefonbuch
• Tools
– phpMyAdmin
– Webalizer
– PHP Umschalter
– Mercury Mail
– FileZilla FTP
17
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 33
Konfiguration XAMPP
• Apache - httpd.conf
– ServerRoot
– Listen
– LoadModule (besonders PHP)
– ServerName, ServerAdmin
– DocumentRoot
– DirectoryIndex
– AccessFileName
– ErrorLog
– ErrorDocument
– VirtualHost
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 34
Konfiguration XAMPP
• PHP - php.ini
– safe_mode
– max_execution_time, max_input_time, memory_limit
– error_reporting
– post_max_size
– file_uploads, upload_tmp_dir, upload_max_filesize
– extensions
– Smtp, sendmail_from, sendmail_path
18
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 35
HTML-Grundlagen
• HTML ist eine Auszeichnungssprache (Markup Language)
• Wird mit Hilfe von SGML definiert (Standard Generalized Markup
Language)
• HTML-Dateien bestehen aus einem Kopf- und einem Nutzdatenteil
(head und body).
• HTML-Dateien bestehen aus Text
• Inhalt von HTML-Dateien steht in HTML-Elementen
• HTML-Elemente werden durch Tags markiert
• Fast alle HTML-Elemente werden durch ein einleitendes und ein
abschließendes Tag markiert
• Inhalt dazwischen ist Gültigkeitsbereich des entsprechenden
Elements
• Tags werden in spitzen Klammern notiert
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 36
HTML-Grundlagen
<html>
<head>
<title>Titel der Webseite</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
01_html.html
19
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 37
HTML-Grundlagen
<html>
<head>
<title>Titel der Webseite</title>
</head>
<body bgcolor=#AA0000 text=#FFFFFF link=#00FF00 vlink=#009900
alink=#0000FF>
<h1>Beispiel</h1>
Bitte klicken Sie <br><br> <a href=01_html.html target=_top>hier</a>.
<ul>
<li>1. Aufzählung</li>
<li>2. Aufzählung</li>
<li>3. Aufzählung</li>
</ul>
</body>
</html>
02_html.html
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 38
HTML-Tabellen
<html>
<head>
<title>Titel der Webseite</title>
</head>
<body>
<table border=1 width=300>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>Werner</td>
<td align=right>1</td>
</tr>
<tr>
<td align=center colspan=2>Gesamt: 5</td>
</tr>
</table>
</body>
</html>
03_table.html
20
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 39
HTML-Frameset
<html>
<head>
<title>Titel der Webseite</title>
</head>
<frameset cols="50%,*" frameborder=0 framespacing=0 border=0>
<frame src=01_html.html name=frame1>
<frame src=02_html.html name=frame2>
</frameset>
<body>
Ihr Browser muss Frames unterstätzen um diese Seite anzuzeigen.
</body>
</html>
04_frameset.html
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 40
HTML-Bilder
<html>
<head>
<title>Titel der Webseite</title>
</head>
<body>
<h3>Ein Bild</h3>
<p>
Das ist ein Bild.
</p>
<p>
<a href=01_html.html><img src=img/04.jpg border=0 width=483 height=188></a>
</p>
<p>
<a href=http://www.hoisl.com target=_blank>Link 1</a><br>
<a href=http://www.gym1.at target=_blank>Link 2</a>
</p>
</body>
</html>
05_img.html
21
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 41
HTML-Formular
...
<form action=06_formular.html method=get>
Name:<br>
<input type=text name=name maxlength=50>
<br><br>
E-Mail:<br>
<input type=text name=email size=30>
<br><br>
Geschlecht:<br>
w <input type=radio name=geschlecht value=w>
m <input type=radio name=geschlecht value=m>
<br><br>
Text:<br>
<textarea name=text cols=40 rows=7></textarea>
<br><br>
Newsletter bestellen?<br>
<input type=checkbox name=newsletter>
<br><br>
<input type=hidden name=secret value=123>
<input type=submit value=Abschicken> <input type=reset value=Löschen>
</form>
...
06_formular.html
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 42
CSS-Grundlagen
• HTML definiert den grundsätzlichen Aufbau einer Webseite
• Eigentlich nicht dazu gedacht genau anzugeben wie ein Element
aussehen soll
• -> CSS (Cascading Style Sheets)
– Ergänzungssprache, vorwiegend für HTML entwickelt
– Erlaubt das beliebige Formatieren einzelner HTML-Objekte
22
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 43
CSS-Grundlagen
• 07_img_css.html
• 08_css.css
• 08_formular_css.html
Ausführliche Beschreibung zu HTML und CSS, aber auch JavaScript,
XML, Perl und PHP findet sich unter http://de.selfhtml.org.
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 44
JavaScript-Grundlagen
• JavaScript ist eine clientseitige Scriptsprache
• Wird vom Browser des Benutzers ausgeführt
• Von Netscape 1995 veröffentlich
– Ursprünglich LiveScript
• JavaScript ist plattformunabhängig
• JavaScript wird in HTML-Seiten eingebunden
• Über das DOM (Document Object Model) kommuniziert JavaScript
mit den Inhalten der HTML-Seite
– DOM Standardisierung: W3-Konsortium
09_formular_javascript.html
23
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 45
JavaScript - GGT
• Berechnung des größten gemeinsamen Teiler zweier Zahlen
<script language=javascript>
function berechne_ggt() {
zahl1 = parseInt(document.form1.T1.value);
zahl2 = parseInt(document.form1.T2.value);
a = Math.max(zahl1,zahl2);
b = Math.min(zahl1,zahl2);
do {
rest = a % b;
a = b;
b = rest;
} while (rest>0);
document.form1.T3.value = a;
}
</script>
09a_javascript_ggt.html
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 46
PHP-Grundlagen
• Scriptsprache zur Erstellung dynamischer Webseiten (serverseitig)
– PHP wird direkt in HTML eingebunden
• 1994 von Rasmus Lerdorf entwickelt
– Personal HomePage
– Später: PHP Hypertext Preprocessor
• 1995: PHP/FI (Form Interface)
– 1997: PHP/FI 2.0
• 1998: PHP 3
– Kein Sessionmanagement
– Keine Objektorientierung
• PHP 4, heute PHP 5
– Sehr schnell und effizient
– Sehr großer Funktionsumfang
– Viele unterstützte Datenbanken (z.B. MySQL)
24
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 47
PHP-Grundlagen
<html>
<head>
<title>Titel der Webseite</title>
</head>
<body>
<?
echo "<h1>Hello World</h1>";
?>
<?php
echo "<h2>Hello World</h2>";
?>
<script language=php>
echo "<h3>Hello World</h3>";
</script>
</body>
</html>
10_php.php
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 48
PHP-Typen
• Boolscher Typ
– $a = true;
• Integer
– $a = 1234;
• Fließkomma (Float)
– $a = 12.34;
• Zeichenkette (String)
– $a = „Hallo Welt“;
• Array
– $a = array();
– $a[1] = „Hallo Welt“;
• Objekte
• Ressource
– Z.B. mysql result
• NULL
PHP Variablen sind Mixed-
Typen. D.h. keine explizite
Typenumwandlung nötig,
aber möglich.
Daher auch keine
Typendeklaration bei
Variablengenerierung.
25
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 49
PHP-Typen
Quelle: www.php.net
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 50
PHP-Variablen
• $var = „Ich“;
• $Var = „Du“;
• $vaR = „Sie“;
• $a = „A“;
• $b = &$a;
• $b = „B“;
• echo „$a $b“;
• $a = „Hallo“;
• $$a = „Welt“;
• echo „$a ${$a}“;
26
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 51
Vordefinierte Variablen
• $GLOBALS
• $_SERVER
• $_GET
• $_POST
• $_COOKIE
• $_FILES
• $_ENV
• $_REQUEST
• Siehe auch phpinfo()
• http://www.php.net/manual/de/language.variables.predefined.php
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 52
Operatoren
• Arithmetische Operatoren
– +, -, *, /, %
• Zuweisungsoperatoren
– =, +=, .=
• Vergleichsoperatoren
– ==, ===, !=, <>, !==, <, >, <=, >=
– Trinitäts-Operator
• ausdr1 ? ausdr2 : ausdr3
• Inkrement- bzw Dekrementoperatoren
– $a++, ++$a, $a--, --$a
• Logische Operatoren
– and, or, xor, !, &&, ||
27
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 53
Kontroll-Strukturen
• if
• else
• elseif
• while
• do .. while
• for
• foreach
• switch
11_... – 18_... .php
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 54
Funktionen
<?
function machkaffee ($typ = "Cappucino")
{
return "Ich mache eine Tasse $typ.\n";
}
echo machkaffee();
echo machkaffee("Espresso");
?>
19_function.php
28
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 55
Klassen und Objekte
• Eine Klasse ist eine Sammlung von Variablen und Funktionen,
die mit diesen Variablen arbeiten.
• Klassendeklaration 20_class.php
• Vererbung (extends) 21_class_extends.php
• Konstruktor 22_class_constructor.php
• Die Objektorientierung wurde in PHP 5 merklich erweitert
– Konstruktoren, Destruktoren
– Sichtbarkeit
– Überladen von Methoden
– Introspektion
– Mehrfachvererbung
– …
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 56
PHP - GGT
• Berechnung des größten gemeinsamen Teiler zweier Zahlen mittels
PHP
<?
if (isSet($B1)) {
$a = max($T1,$T2);
$b = min($T1,$T2);
do {
$rest = $a % $b;
$a = $b;
$b = $rest;
} while ($rest>0);
}
?>
22a_php_ggt.php
29
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 57
Einfacher Counter
23_counter.php
• Zugriff auf eine Textdatei, die den Zähler speichert
• Lies den Wert dieser Datei aus
• Erhöhe den Wert um 1
• Schreibe den um 1 erhöhten Wert in die Datei zurück
• Zeige den Wert an
<?
$counter = file("23_counter.txt");
$counter = $counter[0] + 1;
$fp = fopen("23_counter.txt", "w");
fwrite($fp, $counter);
echo $counter;
?>
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 58
Textfänger - Gästebuch
• Frameset
– Links: Eingabe
– Rechts: Ausgabe
• Funktionen
– Text eingeben
– Text löschen
• Varianten
– Text am Ende der Datei anfügen
– Text am Anfang der Datei anfügen
• 3 Optimierungsstufen
24_textfaenger.php
• Aufgabe
– Linkes Eingabefeld soll nach dem Löschen der Einträge ebenfalls
geleert werden
30
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 59
Zugangskontrolle
• Erstellen Sie folgende Dateien
– Eine Seite beinhaltend ein Passwort-Feld und einen Button „Login“
– Nach drücken auf den Button soll eine neue Seite erscheinen, die das
eingegebene Passwort mit einem vorher definierten vergleicht
– Wenn das Passwort korrekt war, dann soll ein Text ausgegeben,
ansonsten soll wieder zur Startseite zurückgeleitet werden
• login.php
– form-method: post
– input-type: password
• check.php
– Abfrage ob Passwort = definiertem
– Bei Ja: Ausgabe „Erfolgreich eingeloggt“
• Für Fortgeschrittene
– Session erzeugen
– Wenn login.php aufgerufen wird, automatische Weiterleitung zu check.php (keine
erneute Authentifizierung nötig)
– Möglichkeit zum Logout
– Bei Nein: Umleiten zur vorherigen Seite
• Möglichkeiten: HTML Meta-Tag, JavaScript, PHP (Header Info)25_ …, 26_ … .php
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 60
MySQL
• My Structured Query Language
• Relationales Datenbanksystem
• Speicherung der Daten in verknüpften Tabellen
• Client/Server System
– Datenbankserver
– (Theoretisch) beliebig viele Clients, die Daten abfragen,
Änderungen durchführen etc.
• Datenbearbeitung basiert weitgehend auf dem SQL-Standard
• Hohe Performance, Zuverlässigkeit, einfache Handhabung
• Zugriff auf MySQL von PHP aus über eine zur Verfügung gestellte
API (Application Programming Interface)
31
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 61
SQL-Grundlagen
• DDL (Data Definition Language)
– Konstrukte zur Definition/Beschreibung der Daten und Ihrer
Strukturen
• DML (Data Manipulation Language)
– Konstrukte zur Manipulation der Daten
– Zwei Arten
• Abfragen – Operationen zur Formulierung von Abfragen (Query).
Keine Änderung der Daten. (SELECT)
• Mutationen – Operationen zur Eingabe, Löschung und Änderung
von Daten. (INSERT, DELETE, UPDATE)
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 62
Schulbeispiel ER-Modell
32
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 63
Schulbeispiel DDL
...
--
-- Tabellenstruktur für Tabelle `27_lehrer`
--
CREATE TABLE `27_lehrer` (
`id` int(11) NOT NULL auto_increment,
`geschlecht` char(1) collate latin1_general_ci NOT NULL default '',
`titel` varchar(255) collate latin1_general_ci NOT NULL default '',
`vorname` varchar(255) collate latin1_general_ci NOT NULL default '',
`nachname` varchar(255) collate latin1_general_ci NOT NULL default '',
`email` varchar(255) collate latin1_general_ci NOT NULL default '',
`kv_klasse` int(11) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci
AUTO_INCREMENT=43 ;
...
27_structure.sql
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 64
Schulbeispiel DML
• Abfrage aller Lehrer
– SELECT * FROM 27_lehrer;
• Abfrage aller weiblichen Lehrer, Ausgabe: Geschlecht +
Vornamen
– SELECT geschlecht, vorname FROM 27_lehrer WHERE
geschlecht=‚w‘;
• Nur die ersten 10, sortiert nach Vornamen
– SELECT geschlecht, vorname AS v FROM 27_lehrer
WHERE geschlecht=‚w‘ ORDER by v LIMIT 0,10;
• Abfrage aller Klassenvorstände + Klassen
– SELECT t1.vorname, t2.bezeichnung FROM 27_lehrer
AS t1, 27_klasse AS t2 WHERE t1.kv_klasse=t2.id;
33
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 65
Schulbeispiel DML
• Abfrage aller Klassenvorstände der 1. Klassen
– SELECT t1.vorname, t2.bezeichnung FROM 27_lehrer
AS t1, 27_klasse AS t2 WHERE t1.kv_klasse=t2.id
AND t2.bezeichnung LIKE ‚1_‘;
• Abfrage von Anzahl Schüler pro Klasse
– SELECT bezeichnung,count(*) AS c FROM 27_klasse
t1, 27_schueler t2 WHERE t1.id=t2.klasse GROUP BY
t2.klasse ORDER BY c DESC;
• Abfrage welcher Lehrer unterrichtet in welcher Klasse welchen
Gegenstand
– SELECT t1.vorname,t2.bezeichnung,t3.bezeichnung
FROM 27_lehrer t1, 27_klasse t2,
27_unterrichtsfach t3, 27_unterrichtet t4 WHERE
t1.id=t4.lehrer_id AND t2.id=t4.unterrichtsfach_id
AND t3.id=t4.klasse_id ORDER BY t2.bezeichnung;
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 66
Schulbeispiel DML
• Neuen Lehrer anfügen
– INSERT INTO 27_lehrer (geschlecht, titel, vorname,
nachname, email) VALUES
(‚m‘,‘Mag.‘,‘Bernhard‘,‘Hoisl‘,‘bernhard.hoisl@wu-
wien.ac.at‘);
• Lehrer editieren
– UPDATE 27_lehrer SET kv_klasse=11 WHERE id=43;
• Lehrer wieder löschen
– DELETE FROM 27_lehrer WHERE email like
‚bernhard.hoisl%‘;
34
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 67
Schulbeispiel
• Lehrerliste
– Ausgabe: Name, Titel, Email
– Detailansicht
• Schülerliste
– Ausgabe: Name, Straße, PLZ, Ort, Klasse
– Detailansicht
• Klassenvorstandliste
– Ausgabe: Lehrer, Klasse
– Klassendetailansicht
• Klassenliste
– Ausgabe: Klasse, Sitzplatzanzahl + Schüler pro Klasse
– Klassendetailansicht
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 68
Schulbeispiel
• Neuen Lehrer anlegen
– Formular
– PHP + JavaScript
– SQL INSERT-Statement
• Lehrer löschen
– Lehrerliste
– SQL DELETE-Statement
• Lehrer editieren
– Lehrerliste
– Formular mit jetzigen Daten
– SQL UPDATE-Statement
35
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 69
Normalformen
• 1. Normalform
– Eine Relation befindet sich in der ersten Normalform, wenn keines
ihrer Attribute eine untergeordnete Relation darstellt und wenn alle
Attribute nur atomare Werte beinhalten.
– Die Attribute der Relation müssen atomar sein. Strukturierte
Attribute (wie Adresse) müssen aufgeteilt werden in ihre
Teilattribute (z.B. in PLZ, Ort, Straße und Hausnummer). Aufgrund
von funktionalen Abhängigkeiten (PLZ bestimmt Ort) ergeben sich
in 1NF-Relationen Redundanzen.
• Siehe auch http://de.wikipedia.org/wiki/Normalisierung_(Datenbank)
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 70
Normalformen
• 2. Normalform
– Laut Definition muss die Datenbank immer zuerst in die 1.
Normalform versetzt werden, bevor man diese in die 2. Normalform
versetzen kann. Hierbei müssen alle nicht zum Schlüssel
gehörenden Attribute von diesem voll funktional abhängig sein.
Besteht ein Schlüssel aus mehreren Teilschlüsseln, so ist das
Element aus dem Datensatz herauszuziehen, welches nur von
einem Teilschlüssel abhängt.
– Die zweite Normalform vermeidet partielle funktionale
Abhängigkeiten (diese bewirken Redundanzen). Eine partielle
funktionale Abhängigkeit besteht, wenn Attribute (die nicht
Schlüsselkandidaten sind) funktional schon von einem Teil des
Schlüssels abhängen. Die zweite Normalform kann durch
Elimination der abhängigen Attribute und Auslagerung in eine
eigene Relation erreicht werden.
36
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 71
Normalformen
• 3. Normalform
– Zusätzlich zur 2. Normalform gilt für jeden Schlüssel: Alle nicht zum
Schlüssel gehörende Attribute sind nicht von diesem transitiv
abhängig. Das bedeutet, dass alle Attribute nur vom
Schlüsselattribut, nicht aber von anderen Attributen abhängig sind.
Eine Abhängigkeit zwischen den Attributen muss aufgelöst werden.
– Die dritte Normalform löst transitive Abhängigkeiten auf. Geht man
von einem Schlüssel aus, der eine Attributmenge bestimmt, die
wiederum ein abhängiges Attribut bestimmt, so liegt eine transitive
Abhängigkeit vor. Zur Beseitigung kann man das transitiv
abhängige Attribut in eine neue Relation kopieren (gemeinsam mit
der bestimmenden Attributmenge) und aus der ursprünglichen
Relation entfernen.
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 72
Content Management System
• CMS ist ein System zur Verwaltung von Inhalten
• Grundprinzip: Trennung von Design, Inhalt und Funktionalität
• Benutzer soll das System ohne Programmierkenntnisse bedienen
können
– Dafür nötig: Schaffen von Schnittstellen
• CMS sind meist sehr komplex und werden für mittelgroße bis große
Projekte eingesetzt
• Bekannte Systeme (OpenSource)
– PHP + MySQL
• Typo3 (http://www.typo3.com)
• Mambo (http://www.mamboserver.com)
– Java + XML
• Magnolia (http://www.magnolia.info)
• OpenCms (http://www.opencms.org)
37
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 73
Beschreibung einfaches CMS
CONTENT
HEADER + MENU
FOOTER
NA
VIG
AT
IO
NIN
FO
RM
AT
IO
N
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 74
Beschreibung einfaches CMS
• HEADER
– HTML-Head, Meta-Tags, CSS, eröffnen der HTML-Struktur (table)
– Evtl. Hauptmenü
• NAVIGATION
– (Haupt-)Untermenü
• CONTENT
– Inhalt der Seite ausgeben
• Datei mit Inhalt vorhanden
• Inhalt in Datenbank
• INFORMATION
– Aktuelle Informationen, Sidekick
• FOOTER
– Wichtige Links, Kontaktdaten etc.
– HTML Struktur beenden (table)
38
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 75
Beschreibung einfaches CMS
• URL, z.B.
– http://hoisl.com/lehrer/liste.php
– http://hoisl.com/index.php?site=13
<?
include(„functions.php“);
head($site);
navigation($site);
CONTENT
information($site);
footer($site);
?>
28_ …
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 76
Beschreibung einfaches CMS
Back-End
Zugangsbeschränkung
Benutzerrollen
Interfaces zum Eintragen von Inhalten
Spezielle Funktionen, Statistiken etc.
Front-End
Allgemein zugänglich
Strukturierte Informationsanzeige
Personalisierung
Members Area etc.
39
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 77
Beispiel Diashow
• Automatische Generierung einer Diashow
• Bilder müssen nicht mehr verkleinert bzw. komprimiert werden
• Mittels GD Bibliothek werden Bilder vom PHP Script in Echtzeit
komprimiert -> sehr rechenaufwendig
• Deswegen Vorabberechnung aller Bilder in zwei Auflösungen
– Thumbnail
– Detailansicht
• Falls Druckauflösung erwünscht, kann das Originalbild
(unkomprimiert) benutzt werden
• Automatischer Eintrag der Diashow mit Titel und optionaler
Bildbeschreibung in die Datenbank
• Achtung: Programm wurde von mehreren Stellen zusammenkopiert
und ist unsauber programmiert!
29_ …
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 78
Beispiel Umfrage
• Beliebig viele Fragen – 4 Antwortmöglichkeiten
• Abfrage mittels JavaScript, damit alles beantwortet wird
• In die Datenbank wird lediglich das Gebietkürzel und der
Kenntnisgrad in diesem Gebiet eingetragen
• Die Auswertung wird in Form von Balken dargestellt
– Sehr einfach Form der Darstellung
– Alternativ: z.B. GD Bibliothek
– Image-Alt Tag: Wenn mit der Maus über einen Balkenabschnitt
gefahren wird, ist die Anzahl der Stimmen absolut und in Prozent
ersichtlich
30_ …
40
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 79
Beispiel Dateiupload
<html>
<?
if ($datei) {
if (copy($datei,$datei_name)) {
echo "Datei erfolgreich kopiert!";
} else {
echo "Kann Datei nicht kopieren!";
}
}
?>
<form action=31_upload.php method=post enctype=multipart/form-
data>
Datei: <input type=file name=datei>
<br><br>
<input type=submit value=Upload>
</form>
</html>
31_upload.php
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 80
Beispiel gültige E-Mailadresse
• Prüfe gültige Syntax der E-Mailadresse
• Prüfe ob Domain für E-Mailempfang eingerichtet ist
– Gibt es einen gültigen MX-Record im DNS
• Wenn ja, dann hole den MX Hostname
• Wenn nein, nehme an, das Domainname = Domainname des
Mailservers
– Kommuniziere per SMTP mit Mailserver
• Bist du ein SMTP Server?
• Sprichst du mit mir?
• Kann von der angegebenen E-Mailadresse über dich E-Mails
versand werden?
• Alle ja -> Überprüfung beendet -> E-Mailadresse gültig
41
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 81
Beispiel gültige E-Mailadresse
• http://gurusnetwork.com/tutorial/geekspeak
• Funktionen in Windows nicht verfügbar
– http://at2.php.net/manual/de/function.checkdnsrr.php
– http://at2.php.net/manual/de/function.getmxrr.php
– Auf den Seiten finden sich aber Beispiel für Windows-
Implementierungen (Funktionen selber geschrieben oder
umgeschrieben)
• Programm ohne SMTP Kommunikation mit Funktion für Windows
Benutzer
– http://www.planet-source-
code.com/vb/scripts/ShowCode.asp?lngWId=8&txtCodeId=1316
Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 82
Weitere Beispiele?
• Weblog, Gästebuch, Newsticker
• Forum
• Chat
• (Massen)E-Mails versenden
• Informativer Besucherzähler (Webalizer-Klon)
• Verschiedene Quizarten
• JavaScript Beispiele
• Datenbankmodellierung
• …