Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
Web-Programmierung
? Prof. Dr. Susann Kowalski
Web-ProgrammierungWeb-Programmierung
Web-Programmierung
? Prof. Dr. Susann Kowalski
Client/Server-Modell PrinzipskizzeClient/Server-Modell Prinzipskizze
AuftraggeberClient
DiensterbringerServer
Auftrag
Ergebnis
Abarbeitung
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
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
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
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
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
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
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
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
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
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
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>
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
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
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
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>
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>
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
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“
Web-Programmierung
? Prof. Dr. Susann Kowalski
Das BeispielformularDas Beispielformular
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
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)
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
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>
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
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
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>
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.)
?
Web-Programmierung
? Prof. Dr. Susann Kowalski
Grundstruktur einer XML-DateiGrundstruktur einer XML-Datei
• Prolog <?xml version=“1.0“?>
• (DTD <!DOCTYPE ...>)
• Daten <tag> ... </tag>
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
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
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
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
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
Web-Programmierung
? Prof. Dr. Susann Kowalski
Datenaustausch mittels XMLDatenaustausch mittels XML
Datenaustausch
XML
Struktur derUnternehmensdaten
Struktur derUnternehmensdaten
Applikation Applikation
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
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