Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ...

Web-Programmierung

? Prof. Dr. Susann Kowalski

Web-ProgrammierungWeb-Programmierung

Web-Programmierung


Client/Server-Modell PrinzipskizzeClient/Server-Modell Prinzipskizze

AuftraggeberClient

DiensterbringerServer

Auftrag

Ergebnis

Abarbeitung

Web-Programmierung



AuftraggeberClient-Rechner

DiensterbringerServer-Rechner

Auftrag: Schicke, was du unter www.fh-koeln.de findest

Ergebnis: Bitte, hier ist die Web-Seite

Abarbeitung (Suche der Seite)

durchWeb-Server-SW

Browser

Web-Programmierung


TechnikenTechniken

– Clientseitig» In HTML eingebettet

>JavaScript>JScript>VBScript

» Eigenständig>Applets>Flash

– Ausführung durch Browserentsprechende Version erforderlich

– Serverseitig» In HTML eingebettet

>PHP>JSP ? Beans, Servlets>ASP

» Eigenständig>CGI-Programme (Perl, C++)

» Zugriff auf Datenbanken

– Ausführung durch ServerWeb-Server erkennt dynamischen Inhalt und aktiviert notwendiges Ausführungsprogramm (entsprechende Konfiguration des Servers erforderlich)

• Statisch– Abgearbeitet / interpretiert / ausgeführt durch den Client/Browser

» HTML/CSS» XML/XSL

• Dynamisch

1

2 3

4

5

6

Web-Programmierung



AuftraggeberClient


Auftrag: Seite anfordern

Ergebnis: zusammengestellte Datei

Abarbeitung- Seite suchen- Dynamische Inhalte

ausführen lassen- Ergebnisdatei

zusammenstellen

Web-Programmierung


EntscheidungsargumenteEntscheidungsargumente

• HTML ?? XML– Wartbarkeit– Quelle der Daten

• Statisch ?? dynamisch– Ziel der Anwendung– Wartbarkeit– Quelle der Daten– Lebensdauer der Daten– Technische Ausstattung

• Clientseitig ?? serverseitig– Ausstattung des Client-PCs (Performance, Software)– Sicherheitsbewusstsein der User– Belastbarkeit des Servers– Übertragungsgeschwindigkeiten / zu übertragende Datenmengen– Sensibilität zu übertragender Daten

Web-Programmierung


Elemente von HTMLElemente von HTML

• Tags– <TagName> Anfangstag– </TagName> Endtag– Es gibt einige wenige Tags, die kein Endtag brauchen– Können verschachtelt werden– Können Attribute haben z. B. mit Formatierungsangaben

• Einsatz– Strukturierung des Dokuments

» Kopfbereich, eigentlicher Seitenbereich– Formatierung von Text

» Überschriften, fett, kursiv, Hintergrund, Farbe– Hyperlinks

» Bewegen in der Seite, Referenzen auf andere Dokumente, Mail verschicken– Formularaufbau

» Eingabefelder, Radiobuttons, Checkboxen, Actionbuttons

Web-Programmierung


Grundgerüst einer HTML-SeiteGrundgerüst einer HTML-Seite

– <HTML> Beginn des HTML-Dokuments– <HEAD> Beginn des Kopfbereichs– <TITLE> Beginn des Titels

xxx Titel, der in der Titelzeile des Browsers erscheint

– </TITLE> Ende des Titels– </HEAD> Ende des Kopfbereichs– <BODY> Beginn des eigentlichen Seitenbereichs

xxx das, was im Browserfenster zu sehen sein soll

– </BODY> Ende des Seitenbereichs– </HTML> Ende des HTML-Dokuments

Web-Programmierung


Hilfsmittel / Tools / ArbeitsablaufHilfsmittel / Tools / Arbeitsablauf

• Einfach / „Unbequem“– Erfassen des HTML-Textes in einem Editor– Testanzeige im Browser– Verfügbarmachen im Netz (Upload)

• Umfangreich / Professionell / „Bequem“– Einsatz eines Web-Design-Tools

» Erstellen nach WYSIWYG» Verknüpfung mehrerer Seiten» Voranzeige-Funktion» HTML-Feinanpassung» Testanzeige im Browser

– Verfügbarmachen im Netz (Upload)

1

Web-Programmierung


UploadUpload

Verfahren, um erstellte Web-Seiten auf einenWeb-Server zu bringen• „traditionell“

– Speichern auf Diskette– Diskette auf dem Web-Server einlesen

• im Intranet– Kopieren der Dateien auf den Server

• „normal“ mittels FTP– Voraussetzung: Zugangsmöglichkeit (Name und Passwort) und

Plattenplatz auf dem Web-Server– In manchen Web-Design-Tools integriert– Privat: einige (immer mehr) Internet-Provider bieten Plattenplatz

(z. B. 20 MB) an; kostenlos oder gegen Monatsgebühr– In der Firma: Nachdenken über eigenen Web-Server lohnt

2

Web-Programmierung


Web-Design-ToolsWeb-Design-Tools

• Macromedia DreamWeaver• MS FrontPage• Netscape Composer• usw.

WYSIWYG-Editor HTML-Editor Voranzeige im Browser

3

Web-Programmierung


Zu beachten beim Entwurf von Web-SeitenZu beachten beim Entwurf von Web-Seiten

• Unterschiedliche Darstellungen auf verschiedenen Browsern• Auch ältere Geräte sind in Gebrauch• Nutzer können Features ausschalten (z. B. Scripte und

Applets)• Kurze Ladezeiten --> kleine Dateien, insbesondere bei Bildern

(Telefonkosten, Geduld der Surfer)• Ergonomische und didaktische Grundsätze (Farben,

Schriftarten, - größen, Struktur oder Design?, Anzahl Mausklicks bis zum Erfolg)

• Suchmaschinen

Web-Programmierung


TextgestaltungTextgestaltung

• Überschriften– <Hn>Überschrift</Hn>– n = 1..6 --> Größenangabe für „Überschrift“ (keine automatische

Nummerierung)• Absätze

– <BR> Zeilenumbruch (ohne Endtag)– <NOBR>Text, der NICHT umgebrochen wird</NOBR>– <P>Absatztext</P> ein Absatz– <WBR> Wortumbruch (ohne Endtag)

• Ausrichtung– ALIGN=„center“, ALIGN=„right“, ALIGN=„justify“ als Attribut für <P>– Für mehrere Elemente zwischen den Anfangs- und Endtags

» <CENTER>...</CENTER>» <RIGHT>...</RIGHT>» <JUSTIFY>...</JUSTIFY>

Web-Programmierung


Textauszeichnung, Schriftart, SchriftfarbeTextauszeichnung, Schriftart, Schriftfarbe

• Physisch– <b>Text</b> fett– <i>Text</i> kursiv– <u>Text</u> unterstrichen– <strike>Text</strike> durchgestrichen (auch <s>Text</s>)– <big>Text</big> größer (analog <small>Text</small>)– <sup>Text</sup> hochgestellt (analog <sub>Text</sub>)– <blink>Text</blink> blinkend

• Attribute für das Tag <FONT>– color=... Schriftfarbe, wenn abweichend von dateiweiter Farbe– size=n absolut (1-winzig..7-riesig), relativ (+1, -2 usw.)– face=„...“ Schriftart (z. B. „Arial“, „Helvetica“ usw.)

• Das Tag <BASEFONT> (ohne Endtag)– Legt die „normalen“ Schriftattribute fest– Attribute wie für <FONT>– <FONT> gibt Abweichungen für spezielle Textbereiche an

4

Web-Programmierung


Links in HTML-DokumentenLinks in HTML-Dokumenten <A HREF=„Ziel“ TARGET=„Fenster“>Text</A>

• File-Link: Verweis auf Dokumente, Möglichkeit des Downloads– Auf eine andere Datei auf demselben Rechner

<A HREF=„relativer-Filename“>Text</A><A HREF=„relativer-Filename#Anker-Name>Text</A><A HREF=„absoluter-Filename“>Text</A>

– Auf eine andere Stelle (Anker) im selben Dokument<A HREF=„#Anker-Name“>Text</A>

– Auf ein Dokument im Internet<A HREF=„URL“>Text</A>

• E-Mail-Link– Verweis zu einer E-Mail-Adresse (Aufruf des Mailsystems auf dem

Client-Rechner --- Achtung!!!)<A HREF=„mailto:Mailadresse“>Text</A>

• „Text“ kann auch eine Grafik sein• Anker setzen

– <A NAME=„Anker-Name“></A>• Fenster:

– _blank, _parent, _self, _top oder selbst vergebener Name (insb. Framenamen)

5

Web-Programmierung


Bilder in HTML-DokumentenBilder in HTML-Dokumenten

• <IMG SRC=„relativer-Filename“><IMG SRC=„absoluter-Filename“><IMG SRC=„URL“> (Achtung: Urheberrecht!!!)

• Attribute– width=„nn“ Breite des Bildes– height=„nn“ Höhe des Bildes– border=„n“ Rahmen um das Bild– Alt=„Text“ Text, der angezeigt wird, wenn das Bild nicht

gefunden wird, bzw. als Quicktipp angezeigt wird

6

Web-Programmierung


FramesFrames

• <FRAMESET>..........</FRAMESET>• Attribute

– rows=„20%,80%“ zwei waagerechte Fenster– cols=„100,*,60“ drei senkrechte Fenster– scrolling=„no“, scrolling=„yes“ Bildlaufleisten– noresize– name interner Framefenstername

• Verschachtelung möglich• Laden einer Datei in einem Framefenster

– <A href=„name.html“ target=„name“>...</A>

• Eingebetteter Frame– <IFRAME src=„...“ name=„...“>...</IFRAME>

Web-Programmierung


Frames – ein BeispielFrames – ein Beispiel

<frameset rows=„10%,90%" cols="20%,80%" frameborder="NO" border="0" framespacing="0" onLoad="start()">

<frame name="cornerFrame" scrolling="NO" src="links-oben.html" >

<frame name="topFrame" scrolling="NO" src="oben.html" >

<frame name="treeFrame" scrolling="auto„ src="preload.html"">

<frame name="mainFrame" src="giv.html">

</frameset>

Web-Programmierung


Tabellen --- DefinitionTabellen --- Definition• Tabellendefinition

– <TABLE>– <TR>– <TH>Text - Kopfzelle: 1. Zeile, 1. Spalte</TH>– <TH>Text - Kopfzelle: 1. Zeile, 2. Spalte</TH– </TR>– <TR>– <TD>Text - Datenzelle: 2. Zeile, 1. Spalte</TD>– <TD>Text - Datenzelle: 2. Zeile, 2. Spalte</TD>– </TR>– </TABLE>

• Gleich breite Spalten– <COLGROUP width=200 span=3></COLGROUP>

• Unterschiedlich breite Spalten– <COLGROUP>– <COL width=80><COL width=160> oder relativ „1*“; „2*“– </COLGROUP

7 8

Web-Programmierung


FormulareFormulare

• <FORM>..........</FORM>• Mögliche Aktionen werden durch Submit-Button ausgelöst

– Aufruf einer Datei auf dem Server» action=„URL“» method=„get“ oder method=„post“

– Schicken einer E-Mail» action=„mailto:Mailadresse“» method=„post“» enctype=„text/plain“

– Aufruf einer Scriptprozedur» onSubmit=„ProzName()“

• Ausrichtung durch blinde Tabellen (border=„0“)• Didaktische und ergonomische Hinweise für GUI-Design beachten!• In Web-Design-Tools „zusammenklickbar“

Web-Programmierung


Das BeispielformularDas Beispielformular

Web-Programmierung


TextfelderTextfelder

• Einzeilig– <INPUT type=„text“ name=„einName“ size=„nn“ maxlength=„nn“>– type=„password“ geschütztes Eingabefeld– value=„Vorgabewert“ optional– readonly optional

• Mehrzeilig– <TEXTAREA name=„einName“ rows=„nn“ cols=„nn“>Text</TEXTAREA>– Text als Vorgabewert opional– wrap=„virtual“ Textumbruch, Standard ist off

wrap=„physical“wrap=„off“

– readonly optional

Web-Programmierung


Radiobuttons und CheckboxenRadiobuttons und Checkboxen

• Radiobuttons– <INPUT type=„radio“ name=„GruppenName“ value=„Wert“>– Gleicher Name bedeutet gleiche Gruppe– Nur eine Alternative ist auswählbar– Wert: Wert des Radiobuttons beim Abschicken des Formulars– Attribut

» checked vorausgewählt (kann vom User geändert werden)

• Checkboxen– <INPUT type=„checkbox“ name=„GruppenName“ value=„Wert“>– Gleicher Name bedeutet gleiche Gruppe– 0, 1 oder mehr Möglichkeiten auswählbar– Wert: Wert des Checkboxen beim Abschicken des Formulars– Attribut

» checked vorausgewählt (kann vom User geändert werden)

Web-Programmierung


Knöpfe (Buttons)Knöpfe (Buttons)

• Ein Beispiel– <INPUT type=„button“ value=„Beschriftung“ onClick=„history.back()“>

zurück zu letzter Seite– Auch möglich: onClick=„ProzName()“

• Absende-Button– <INPUT type=„submit“ value=„Absenden“>

• Abbruch-Button– <INPUT type=„reset“ value=„Abbrechen“>

• Andere Art der Knopf-Definition (HTML 4.0)– <BUTTON name=„einName“ type=„button“ value=„Zurück“

onClick=„history.back()“>– <IMG src=„klick.gif“ alt=„Klickbild“>– <P>Zurück</P>– </BUTTON>– Im Gegensatz zu den anderen Definitionen hier mit Start- und Endtag

9

Web-Programmierung


Auswahlliste und MenüstrukturenAuswahlliste und Menüstrukturen• Auswahlliste

– <SELECT name=„einName“ size=nn>– <OPTION>erster Eintrag– <OPTION>zweiter Eintrag– </SELECT– Attribute für <OPTION>

» selected vorselektiert» value=„einWert“ Absendewert

– Attribute für <SELECT>» multiple Auswahl mehrerer Werte ist möglich

• Menüstrukturen– <SELECT>– <OPTGROUP label=„Eintragsname“> erste Menüebene– <OPTION>Eintragsname zweite Menüebene– </OPTGROUP>– </SELECT>

Web-Programmierung


Clientseitiges ScriptingClientseitiges Scripting

• Browser führt kleine Programme (Scripte) aus• Meist zum Test, ob alle Eingabefelder sinnvoll gefüllt sind

• Zugriff auf Formularelement– document.formularname.elementname.Eigenschaft– Radiobuttons werden indiziert, beginnend mit [0] für den ersten

• Eigenschaften von Formularelementen

Checkboxen

True, wenn angekreuztFalse, wenn nicht angekreuzt

checkedRadiobuttons

Eingetragene ZeichenkettevalueTextfelder

Web-Programmierung


Elemente des BeispielformularsElemente des Beispielformulars

• Namedocument.formular.namedocument.formular.vornamedocument.formular.geschlecht[0]document.formular.geschlecht[1]document.formular.arbeitdocument.formular.freizeitdocument.formular.familiedocument.formular.sportdocument.formular.schlafen

• Eigenschaft? value? value? checked (repräsentiert männlich)? checked (repräsentiert weiblich)? checked? checked? checked? checked? checked

Web-Programmierung


JavaScript --- ProgrammierhinweiseJavaScript --- Programmierhinweise

• Aktivierung des Scripts bei Ereignissen– z. B.: <form name=„formularname“ onSubmit=„return funktionsname()“>

• Programmierhinweise– JavaScript-Code steht zwischen </head> und <body>– <script language=„JavaScript“>

function funktionsname(){//Programmcode}</script>

Web-Programmierung


JavaScript --- TextausgabeJavaScript --- Textausgabe

• Ausgabemöglichkeiten– alert(„text“);

» Ausgabe eines Textes („text“)» Bestätigung durch Drücken des „ok“-Button

– confirm(„text“);» Ausgabe einer Frage („text“)» Entscheidung über „ok“-Button (true wird zurückgegeben) oder

„cancel“-Button („false“ wird zurückgegeben)

– prompt(„text“);» Aufforderung zur Eingabe einer Zeichenkette» Eingabe der Zeichenkette ? die Zeichenkette wird zurückgegeben

10

Web-Programmierung


JavaScript --- Weitere ProgrammierhinweiseJavaScript --- Weitere Programmierhinweise

• Ähnlich wie Java, aber nicht so mächtig• Case sensitiv• Jeder Befehl wird mit Semikolon (;) abgeschlossen• Zeichenkettenverknüpfung mit +-Operator

– ergebniskette=kette1+kette2+“text“;• Variablendeklaration

– var varname;– var varname=Zahl;– var varname=„kette“;

• Zeichenkettenvergleich mit equals-Methode– kette.equals(„was“) ? true oder false

• Alternativeif (bedingung){... then-Zweig ...}else{... else-Zweig ...}

11

Web-Programmierung


Ausgabe der BeispielprogrammeAusgabe der Beispielprogramme

• Guten Tag Herr/Frau Vorname Nachname!• Sie interessieren sich für Arbeit.• Sie interessieren sich für Freizeit.• Sie interessieren sich für Familie.• Sie interessieren sich für Sport.• Sie interessieren sich für Schlafen.

Web-Programmierung


Fehlerbehandlung mit JavaScriptFehlerbehandlung mit JavaScript

• Check, ob Felder erwartungsgemäß gefüllt sind– Steht ein Wert drin?– Steht ein entsprechend formatierter Wert drin?– Ist mindestens eine Checkbox geklickt?– usw.

• bei Fehler: Mitteilung über alert-Box

• return false– Fehler ist aufgetreten– Formular wird mit den ursprünglichen Werten angezeigt

• return true– alles in Ordnung– Aktion des action-Attributs des Formulars wird ausgeführt

» z. B. Mail verschicken über mailto:adresse» z. B. Datei auf dem Server aufrufen

12

Web-Programmierung


Serverseitiges ScriptingServerseitiges Scripting

• Server führt Programme/Programmstücke aus• Zugriff auf Formularelemente sprachabhängig• Aktivierung des Programms

– <form name=„formularname“ action=„dateiname“ method=„post“>– <form name=„formularname“ action=„dateiname“ method=„get“>– Methode POST

» Längenunbegrenzt» Daten nicht sichtbar ? geheime Daten» große Datenmengen

– Methode GET» Formulardaten werden an die URL angehängt: URL?Daten

> Z. B. Name=John> Einzelne Werte durch & voneinander getrennt> Leerzeichen werden durch + ersetzt> Spezielle Zeichen durch Hex-Code ersetzt

» Einsatzmöglichkeiten> Längenbegrenzt> Bookmarks sind möglich> URLs können per E-Mail verschickt werden

Web-Programmierung


PHP --- ProgrammierhinweisePHP --- Programmierhinweise

• Mischung aus HTML- und PHP-Code• PHP-Code eingeschlossen in <?PHP- und ?>-Zeichen

• Ausgabe von Text, der im Browser erscheinen soll– „normaler“ HTML-Code außerhalb der <?PHP- und ?>-Zeichen– echo „text“; Achtung: text muss gültiger HTML-Code sein

• Variablen beginnen mit einem $-Zeichen• Variablendeklaration möglich, aber nicht notwendig

• Zugriff auf Formularelemente– Über ihren Namen: $elementname– Radiobuttons/Checkboxen nicht angekreuzt ? Variable nicht vorhanden

Web-Programmierung


PHP --- AbarbeitungPHP --- Abarbeitung

<H3><?PHP

echo „Überschrift“;?></H3>

<H3>

Überschrift

</H3>

Server Browser

• PHP-Code wird durch das Ergebnis der Abarbeitung ersetzt

13

Web-Programmierung


PHP-Elemente des BeispielformularsPHP-Elemente des Beispielformulars

• Name$name$vorname$geschlecht$arbeit$freizeit$familie$sport$schlafen

• Eigenschaft? eingegebener Text oder nicht vorhanden? eingegebener Text oder nicht vorhanden? „maennlich“ oder „weiblich“? „on“ oder nicht vorhanden? „on“ oder nicht vorhanden? „on“ oder nicht vorhanden? „on“ oder nicht vorhanden? „on“ oder nicht vorhanden

Web-Programmierung


PHP --- Weitere ProgrammierhinweisePHP --- Weitere Programmierhinweise

• Ähnlich wie JavaScript• Case sensitiv• Jeder Befehl wird mit Semikolon (;) abgeschlossen• Zeichenkettenverknüpfung mit .-Operator

– $ergebniskette=$kette1.$kette2.“text“;• Zeichenkettenvergleich mit ==-Operator

– $kette==„was“ ? true oder false• Alternative

if (bedingung){... then-Zweig ...}else{... else-Zweig ...}

• Mail versenden– mail($to,$subject,$body);

14

Web-Programmierung



AuftraggeberClient


Auftrag

Ergebnis

Abarbeitung

1. formular.html anfordern

2. formular.html unverändert

3. Anzeige von formular.html4. Daten eintragen

5. formular.php anfordern

5. abschicken

6. formular.php auswerten

7. formular.php ausgewertet

8. Anzeige von formular.php

Web-Programmierung



AuftraggeberClient


Auftrag

Ergebnis

Abarbeitung

1. formular.html anfordern

2. formular.html unverändert

3. Anzeige von formular.html4. Daten eintragen

5. formular.php anfordern

5. abschicken

6. formular.php auswerten

7. formular.php ausgewertet

8. Anzeige von formular.php

DB

Web-Programmierung


Datenbankanbindung – Beispiel MySQLDatenbankanbindung – Beispiel MySQL

• Verbindung mit MySQL herstellen– $verbindung=mysql_connect($server,$benutzer,$passwort);

• Auswahl der Datenbank– mysql_select_db(„db_name“,$verbindung);

• Query erstellen– $query=„SQL-Anweisung;“;

• Query absenden– $ergebnis=mysql_query($query,$verbindung);

• Ergebnisbehandlung– Anzahl betroffener bzw. gelieferter Zeilen

» $num=mysql_num_rows($ergebnis);– Auslesen einer Zeile aus der Ergebnistabelle

» $row=mysql_fetch_object($ergebnis);» $row=mysql_fetch_array($ergebnis);

15

Web-Programmierung


Abstecher nach MySQLAbstecher nach MySQL

• Manuelle Arbeit mit MySQL über die Console– Aufruf von MySQL (== Verbindung mit MySQL herstellen)

» mysql –hhostname –uusername –p– Auswahl der Datenbank

» use datenbankname;– Absetzen von SQL-Anweisungen

» „normale“ Queries (DML-Befehle)> select * from formular;

» organisatorische Befehle (u. a. DDL-Befehle)> create table ...;> show tables;> show columns from formular;

• Administrationstool vorhanden– Grafische Oberfläche– Sicherheitsbedenken

16

Web-Programmierung


DB-Anbindung --- ErgebnisverarbeitungDB-Anbindung --- Ergebnisverarbeitung

• Auslesen aller Zeilen– while($row=mysql_fetch_object($ergebnis))

{//was soll gemacht werden

}

• Zugriff auf Inhalte– $row->spaltenname nach mysql_fetch_object– $row[„spaltenname“] nach mysql_fetch_array

• Tabellen aufbauen– echo „<tr>“;

echo „<td>“ . $row->spalte1 . „</td>“;echo „<td>“ . $row->spalte2 . „</td>“;echo „</tr>“;

17

Web-Programmierung


CGI-Programmierung --- Beispiel PerlCGI-Programmierung --- Beispiel Perl

• Komplettes Programm wird abgearbeitet– Perl, C++, ...

• Ergebnis des Programms muss vollständiger, gültiger HTML-Code sein• CGI (Common Gateway Interface) liefert Rohdaten des Formulars;

Unterprogramme können diese aufbereiten

• Ausgabe mit print ‘text‘;• Zeichenkettenvergleich mit eq-Operator

– $kette eq ‘ was‘ ? true oder false

• Alternative wie JavaScript und PHP• CGI-Dateien liegen normalerweise in einem speziellen Verzeichnis des

Web-Server (je nach Konfiguration)• Erste Zeile: Angabe des Compilers: z. B. #!perl.exe

Web-Programmierung


CGI --- AbarbeitungCGI --- Abarbeitung

datei.cgi HTML-CodeServer/Perl-System

Browser

• CGI-Datei wird komplett abgearbeitet• das Ergebnis wird an den Browser geschickt

Web-Programmierung


CGI-Elemente des BeispielformularsCGI-Elemente des Beispielformulars

• Name$daten{‘name‘}$daten{‘ vorname‘}$daten{‘ geschlecht‘}$daten{‘ arbeit‘}$daten{‘ freizeit‘}$daten{‘ familie‘}$daten{‘ sport‘}$daten{‘ schlafen‘}

• Eigenschaft? eingegebener Text oder nicht vorhanden? eingegebener Text oder nicht vorhanden? „maennlich“ oder „weiblich“? „on“ oder nicht vorhanden? „on“ oder nicht vorhanden? „on“ oder nicht vorhanden? „on“ oder nicht vorhanden? „on“ oder nicht vorhanden

18

Web-Programmierung


Überblick über XMLÜberblick über XML

• XML – Extensible Markup Language» Standard für die Modellierung hierarchischer Daten

• Kostandards» Xpath, Xpointer, DOM, RDF, XML Schema...

• XML-Anwendungen» XHTML, CML, MathML, SMIL, TalkML, WML, XML/EDI

• XML-Dokument» Datensammlung

Web-Programmierung


Was fange ich mit XML-Dokumenten an?Was fange ich mit XML-Dokumenten an?

• Einfache Anzeige im Browser» XML-Datei ? Prozessor ? HTML

• Formatierung durch XSL (Extensible Stylesheet Language)» XML-Datei XSL- HTML» XSL-Datei Prozessor (z. B.)

• Verarbeitung durch Anwendungen» XML-Datei ? Parser ? ? Anwendung ? HTML (z. B.)

?

Web-Programmierung


Grundstruktur einer XML-DateiGrundstruktur einer XML-Datei

• Prolog <?xml version=“1.0“?>

• (DTD <!DOCTYPE ...>)

• Daten <tag> ... </tag>

Web-Programmierung


Einfache Anzeige im BrowserEinfache Anzeige im Browser

• Beispiel (kontakte.xml)» <?xml version=“1.0“?>» <kontakte>» <adresse>» <vorname>Anna</vorname>» <name>Meier</name>» </adresse>» <adresse>» <vorname>Joachim</vorname>» <name>Winzig</name>» </adresse>» </kontakte>

19

Web-Programmierung


Formatierung durch XSLFormatierung durch XSL

• In der XML-Datei wird eine XSL-Datei angegeben.» <?xml-stylesheet type=“text/xsl“ href=“kontakte.xsl“?>

• Formatierungsanweisungen für Daten aus der XML-Datei» <?xml version=“1.0“?>» <xsl:stylesheet xmlns:xsl=“http://www.w3.org/TR/WD-xsl“>» <xsl:template match=“/“>» <table border=“1“>» <tr><th>Vorname</th><th>Name</th></tr>» <xsl:for-each select=“kontakte/adresse“>» <tr>» <td><xsl:value-of select=“vorname“/></td>» <td><xsl:value-of select=“name“/></td>» </tr>» </xsl:for-each>» </table>» </xsl:template>» </xsl:stylesheet>

20

Web-Programmierung


Verarbeitung durch AnwendungenVerarbeitung durch Anwendungen

• Parser analysiert XML-Datei und meldet das Auftreten jedes Elements an die Anwendung.

• Anwendung kann auf einzelne Elemente spezifisch reagieren.

• Einsatzgebiete– Datenübernahme in relationale Datenbanken oder andere Software-

Programme– Datenkonvertierung– Datenaufbereitung/-verarbeitung

Web-Programmierung


Parser --- Beispiele in PHPParser --- Beispiele in PHP

• Parser analysiert XML-Datei• Führt beim Erkennen eines spezifischen Teils eine

vorher definierte Prozedur (Handler) aus• Handler

– Element-Handler» Start-Element-Handler ? <name>» End-Element-Handler ? </name>

– Character-Daten Handler ? Meier– Processing-Instruction-Handler

» Wenn Befehle in der XML-Datei enthalten sind– Entity-Ref-Handler

» Für Referenzen, die aus der XML-Datei herausführen

• Programmaufbau– Handlerroutinen programmieren– Parser erzeugen– Handlerroutinen zuweisen– Parser starten

21

Web-Programmierung


Datenkonvertierung XML ?? DatenbankDatenkonvertierung XML ?? Datenbank

• XML ? MySQL– Parser in PHP– Start-Element-Handler ? wohin gehören die Daten?– End-Element-Handler ? wann ist der Datensatz vollständig?– Character-Daten-Handler ? Dateninhalt

• MySQL ? XML– Kopf der XML-Datei ausgeben– Start-Tag für Root-Element ausgeben– Pro Datensatz ein Anfangstag ausgeben– Pro Datenfeld Anfangstag, Inhalt, Endtag ausgeben– Pro Datensatz ein Endtag ausgeben– End-Tag für Root-Element ausgeben

• Dabei kann auf unternehmensspezifische Datenkonventionen Rücksicht genommen bzw. an diese angepasst werden

22

Web-Programmierung


Datenaustausch mittels XMLDatenaustausch mittels XML

Datenaustausch

XML

Struktur derUnternehmensdaten

Struktur derUnternehmensdaten

Applikation Applikation

Web-Programmierung


Standardisierung durch DTDStandardisierung durch DTD

• DTD – Document Type Definition• Festlegung gültiger Datenstrukturen (z. B. als Basis für die

Funktionsfähigkeit der Anwendungen)• Überprüfung der Gültigkeit von XML-Dateien wird möglich• Einbindung in XML-Dateien möglich

» <!DOCTYPE kontakte [» ........» ]>

• Separate DTD-Dateien für Standards sinnvoll» <!DOCTYPE kontakte SYSTEM „kontakte.dtd“>

• Gültigkeitsprüfung im Internet» www.stg.brown.edu/service/xmlvalid

23

Web-Programmierung


DTD-RegelnDTD-Regeln

• Markup <!ELEMENT ...>• Attributliste <!ATTLIST ...>• Entity <!ENTITY ...>• Datentypnotation <!NOTATION ...>• Kommentar • Beispiel

» <!ELEMENT kontakte (adresse+)>» <!ELEMENT adresse (vorname, name)>» <!ELEMENT vorname (#PCDATA)>» <!ELEMENT name (#PCDATA)>

• ? (optional), + (mindestens einmal), * (beliebig oft)• #PCDATA, #EMPTY, #ANY

Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ...

Documents

Transcript of Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ...