82
Mi, 20.04.05 - Do, 21.04. 05 Interaktives Web 1 Interaktives Web Prof. Mag. Peter Micheuz [email protected] Bernhard Hoisl [email protected] Mi, 20.04.2005 9.00 – 17.15 Uhr Do, 21.04.2005 9.00 – 17.15 Uhr

Interaktives Web

Embed Size (px)

DESCRIPTION

Folien zum Interaktiven Web mit PHP und MYSQL

Citation preview

Page 1: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 1

Interaktives Web

Prof. Mag. Peter Micheuz

[email protected]

Bernhard Hoisl

[email protected]

Mi, 20.04.2005 9.00 – 17.15 Uhr

Do, 21.04.2005 9.00 – 17.15 Uhr

Page 2: Interaktives Web

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

– …

Page 3: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 3

Vorwissen

Umfrage

http://hoisl.com/iweb

Page 4: Interaktives Web

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

Page 5: Interaktives Web

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

Page 6: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 6

Big Picture

Quelle: mediaresearch.orf.at

Page 7: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 7

Big Picture

Quelle: mediaresearch.orf.at

Page 8: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 8

Big Picture

Quelle: mediaresearch.orf.at

Page 9: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 9

Big Picture

Quelle: mediaresearch.orf.at

Page 10: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 10

Big Picture

Quelle: mediaresearch.orf.at

Page 11: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 11

Big Picture

Quelle: mediaresearch.orf.at

Page 12: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 12

Big Picture

Quelle: www.internetworldstats.com

Page 13: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 13

Big Picture

Quelle: www.netcraft.com

Page 14: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 14

Big Picture

Quelle: www.netcraft.com

Page 15: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 15

Big Picture

Quelle: www.netcraft.com

Page 16: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 16

Big Picture

Quelle: www.tiobe.com

Page 17: Interaktives Web

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

Page 18: Interaktives Web

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

Page 19: Interaktives Web

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

Page 20: Interaktives Web

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

Page 21: Interaktives Web

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

Page 22: Interaktives Web

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

Page 23: Interaktives Web

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

Page 24: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 24

Client-Server

Quelle: learn.wu-wien.ac.at

Page 25: Interaktives Web

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>

Page 26: Interaktives Web

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)

Page 27: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 27

HTTP-Protokoll

Quelle: learn.wu-wien.ac.at

Page 28: Interaktives Web

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

Page 29: Interaktives Web

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

Page 30: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 30

Datenbankbasierter Webserver

Quelle: www.schulinformatik.at

Page 31: Interaktives Web

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

Page 32: Interaktives Web

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

Page 33: Interaktives Web

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

Page 34: Interaktives Web

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

Page 35: Interaktives Web

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

Page 36: Interaktives Web

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

Page 37: Interaktives Web

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

Page 38: Interaktives Web

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

Page 39: Interaktives Web

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

Page 40: Interaktives Web

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

Page 41: Interaktives Web

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

Page 42: Interaktives Web

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

Page 43: Interaktives Web

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.

Page 44: Interaktives Web

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

Page 45: Interaktives Web

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

Page 46: Interaktives Web

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)

Page 47: Interaktives Web

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

Page 48: Interaktives Web

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.

Page 49: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 49

PHP-Typen

Quelle: www.php.net

Page 50: Interaktives Web

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}“;

Page 51: Interaktives Web

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

Page 52: Interaktives Web

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, !, &&, ||

Page 53: Interaktives Web

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

Page 54: Interaktives Web

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

Page 55: Interaktives Web

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– …

Page 56: Interaktives Web

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

Page 57: Interaktives Web

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;?>

Page 58: Interaktives Web

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

Page 59: Interaktives Web

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

Page 60: Interaktives Web

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)

Page 61: Interaktives Web

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)

Page 62: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 62

Schulbeispiel ER-Modell

Page 63: Interaktives Web

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

Page 64: Interaktives Web

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;

Page 65: Interaktives Web

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;

Page 66: Interaktives Web

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‘,‘[email protected]‘);

• 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%‘;

Page 67: Interaktives Web

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

Page 68: Interaktives Web

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

Page 69: Interaktives Web

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)

Page 70: Interaktives Web

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.

Page 71: Interaktives Web

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.

Page 72: Interaktives Web

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)

Page 73: Interaktives Web

Mi, 20.04.05 - Do, 21.04.05 Interaktives Web 73

Beschreibung einfaches CMS

CONTENT

HEADER + MENU

FOOTER

NA

VIG

AT

ION

INF

OR

MA

TIO

N

Page 74: Interaktives Web

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)

Page 75: Interaktives Web

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_ …

Page 76: Interaktives Web

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.

Page 77: Interaktives Web

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_ …

Page 78: Interaktives Web

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_ …

Page 79: Interaktives Web

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

Page 80: Interaktives Web

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

Page 81: Interaktives Web

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

Page 82: Interaktives Web

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• …