vaf ¢ÀÈÔ £ . Ç vzüg)y° · -¢u¹l t=½æ¯ ÝÍ 6$ ¶Âúòñ...
TRANSCRIPT
![Page 1: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/1.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Web-ProgrammierungWeb-Programmierung
![Page 2: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/2.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Client/Server-Modell PrinzipskizzeClient/Server-Modell Prinzipskizze
AuftraggeberClient
DiensterbringerServer
Auftrag
Ergebnis
Abarbeitung
![Page 3: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/3.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Client/Server-Modell PrinzipskizzeClient/Server-Modell Prinzipskizze
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
![Page 4: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/4.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 5: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/5.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Client/Server-Modell PrinzipskizzeClient/Server-Modell Prinzipskizze
AuftraggeberClient
DiensterbringerServer
Auftrag: Seite anfordern
Ergebnis: zusammengestellte Datei
Abarbeitung- Seite suchen- Dynamische Inhalte
ausführen lassen- Ergebnisdatei
zusammenstellen
![Page 6: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/6.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 7: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/7.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 8: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/8.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 9: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/9.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 10: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/10.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 11: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/11.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Web-Design-ToolsWeb-Design-Tools
• Macromedia DreamWeaver• MS FrontPage• Netscape Composer• usw.
WYSIWYG-Editor HTML-Editor Voranzeige im Browser
3
![Page 12: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/12.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 13: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/13.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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>
![Page 14: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/14.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 15: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/15.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 16: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/16.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 17: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/17.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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>
![Page 18: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/18.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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>
![Page 19: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/19.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 20: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/20.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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“
![Page 21: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/21.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Das BeispielformularDas Beispielformular
![Page 22: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/22.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 23: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/23.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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)
![Page 24: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/24.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 25: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/25.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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>
![Page 26: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/26.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 27: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/27.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 28: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/28.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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>
![Page 29: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/29.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 30: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/30.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 31: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/31.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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.
![Page 32: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/32.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 33: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/33.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 34: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/34.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 35: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/35.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
PHP --- AbarbeitungPHP --- Abarbeitung
<H3><?PHP
echo „Überschrift“;?></H3>
<H3>
Überschrift
</H3>
Server Browser
• PHP-Code wird durch das Ergebnis der Abarbeitung ersetzt
13
![Page 36: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/36.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 37: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/37.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 38: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/38.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Client/Server-Modell PrinzipskizzeClient/Server-Modell Prinzipskizze
AuftraggeberClient
DiensterbringerServer
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
![Page 39: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/39.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Client/Server-Modell PrinzipskizzeClient/Server-Modell Prinzipskizze
AuftraggeberClient
DiensterbringerServer
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
![Page 40: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/40.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 41: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/41.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 42: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/42.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 43: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/43.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 44: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/44.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
CGI --- AbarbeitungCGI --- Abarbeitung
datei.cgi HTML-CodeServer/Perl-System
Browser
• CGI-Datei wird komplett abgearbeitet• das Ergebnis wird an den Browser geschickt
![Page 45: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/45.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 46: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/46.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Ü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
![Page 47: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/47.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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.)
?
![Page 48: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/48.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Grundstruktur einer XML-DateiGrundstruktur einer XML-Datei
• Prolog <?xml version=“1.0“?>
• (DTD <!DOCTYPE ...>)
• Daten <tag> ... </tag>
![Page 49: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/49.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 50: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/50.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 51: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/51.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 52: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/52.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 53: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/53.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 54: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/54.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
Datenaustausch mittels XMLDatenaustausch mittels XML
Datenaustausch
XML
Struktur derUnternehmensdaten
Struktur derUnternehmensdaten
Applikation Applikation
![Page 55: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/55.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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
![Page 56: Vaf ¢ÀÈÔ £ . Ç VzüG)y° · -¢U¹l T=½æ¯ ÝÍ 6$ ¶Âúòñ y·b¬studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf · Web-Programmierung? Prof. Dr](https://reader031.vdocuments.pub/reader031/viewer/2022011811/5e197af7712b66494f4714f6/html5/thumbnails/56.jpg)
Web-Programmierung
? Prof. Dr. Susann Kowalski
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