Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Veranstaltung Pr.-Nr.: E-Business Entwicklung web-basierter Anwendungssysteme Prof. Uwe H. Suhl Chris Bizer SS 2003

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Hallo  Dipl.-Kfm. Chris Bizer  Arbeitsgebiete: E-Business und E-Commerce Architekturen web-basierter Systeme Semantic Web  Zimmer: 215  Sprechstunde: Mittwoch Uhr

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Ablauf der heutigen Veranstaltung  Überblick über die Themen der Übung  Organisatorisches CD-Katalog und Klausur Einteilung der Gruppen und Vergabe der Kennwörter  Einführung in HTML und CSS  Einführung in Macromedia Dreamweaver

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Was sind web-basiertes Anwendungssysteme?  eShops (z.B. Amazon)  Online Auktionen (z.B. eBay)  Job-Börsen (z.B. DV-Job)  Web-basierter -Clients (z.B. GMX)  Homebanking-Zugänge (z.B. Sparkasse)  Meinungsportale (z.B. dooyoo, ciao)  CarConfigurator (z.B. BMW)  Alle diese Anwendungen basieren auf einer ähnlichen Systemarchitektur

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Was ist ein web-basiertes Anwendungssystem? Vergleich:  Klassische Web-Architektur  Architektur web-basierter Anwendungssysteme Eine web-basiertes Anwendungssystem ist ein meist interaktives Webangebot, dessen Inhalte nicht statisch in Form von fertigen HTML-Seiten vorliegen, sondern dynamisch zur Laufzeit aus unterschiedlichen Datenquellen erzeugt werden.

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Die klassische Architektur des WWW  Client-Server Architektur Client stellt Anfragen an den Server (HTTP) Server beantwortet die Anfragen (HTTP / HTML) Client Server HTML- Dateien Internet/ Intranet Browser (IE, Netscape) Webserver Programm (Apache, IIS)

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Architektur WBAS Präsentation Applikation Datenhaltung Client Webserver PHP Skripte Internet Browser Server- Programm (Apache) Scripting- Engine (PHP) Datenbank (MS Access) HTML- Dateien XML- Repository (Tamino) Applikations-Server (z.B. J2EE,.net oder SAP) Datenbank XML ODBC HTTP/ SSL

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Inhalte der Übung Präsentation Applikation Datenhaltung Client Webserver PHP Skripte Internet Browser Server- Programm (Apache) Scripting- Engine (PHP) Datenbank (MS Access) HTML- Dateien XML- Repository (Tamino) Applikations-Server (z.B. J2EE oder SAP) Datenbank XML ODBC HTTP Ü 1-2 Ü 8-11 Ü 3 SSL Ü 4-7 Ü 12

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Termin 1 und 2: HTML  Heute: Einführung in HTML und CSS Einführung in Dreamweaver  Nächste Woche: Praxis-Veranstaltung im Pool OR1 Gestaltung der Oberfläche des CD-Katalogs mit Dreamweaver Aufgabenblatt 1 Beispieldokument Inhalt des Dokuments. Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Termin 3-7: Apache und PHP  Apache Administation und Konfiguration des Webservers Sicherheitsfeatures von Apache  Aufgaben Server-Sided-Scripting HTML-Templates dynamisch mit Daten aus Datenbanken füllen Verarbeitung von Formulareingaben Zugriff auf Backoffice-Anwendungen  Gängige Server-Sided-Scripting-Sprachen Personal Home Page Tools (PHP), Active Server Pages (ASP) Cold Fusion (CF), Java Server Pages (JSP) Perl, Python

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Termin 3-7: PHP-Beispielskript  Die Anweisungen sind in den HTML-Code eingebettet  Ergebnis des Skripts Zahlen von 1 bis 10 <?php for ($i =1; $i<=10; $i++) { echo $i. ‘ ‘ ; } ?> Zahlen von 1 bis PHP-Code HTML-Code

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Termin 8-11: XML und Co.  Einsatzgebiete von XML Kommunikation zwischen Applikationen -Enterprise Application Integration (EAI) -XML/EDI Publishing für unterschiedliche Clients -Z.B. Web-Browser, WAP-Handy, PDA, Print und Vieles mehr …  Inhalte XML-Syntax Document Type Definitions (DTDs) Namespaces Xpath XSLT

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Mustermann Festplatte Monitor Termin 8-11: XML Beispiel-Dokument

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Termin 12: Sicherheit und Kryptographie  Secure Socket Layer (SSL) Verschlüsselte Datenübertragung Browser/Webserver  Pretty Good Privacy (PGP) Mail- und Datei-Verschlüsselung -----BEGIN PGP PUBLIC KEY BLOCK----- Version: PGPfreeware for non-commercial use mQENBDxw7eQBCAC2Qu/j5Olri6h1LEBi60Q5INBSdWFW0IUxubh9q8kZhbFnGKiU XJLN2kKlwxNP+aMFAzZ9ETi7c3vWxDde1gXAxvIV+phSn9RgsEPdz4cxwvTldGgB xeRE7x8+YVfKjRjDwRO6BDuXvvkqvEAHD/L9OxxgihKkEJFSM2szz+gx/Ab5vEP8 QpzY7ipyNtOCGBM2pRV+xB+BeA3ybIiO7zyqRpR6ZqaWlWci7Rwg7oFZk1D3iM0S lDBhRaYexuCv4fLLmBX6mrFLnun+JBt15ojM9H0xfPnF/XMJ6FHI3VlXLJ5HVwZl isZFHy2DYrW4ZHOvBOZXXPMOgkazbdsr0Pj1ABEBAAG0HENocmlzIEJpemVyIDxj aHJpc0BiaXplci5kZT6JAS4EEAECABgFAjxw7eQICwMJCAcCAQoCGQEFGwMAAAAA CgkQJWGsstdhZY0q/wgArJyy3sXSUER9GVwun9q2qDbcJsAN0BzVzf1lwgkJ5iUZ TEz2Sua6GPZ4wgZ5OfOTse5B7GRKTY1dgGl+4VoLpq3Tv/M0slre7AXwD2Li9E/K aHEl7gFPHxbpXjCDSQnWLUi2+lbO9rTf3ia6gxtFgv3Sm7rAsQNE4q7eMQ022QUO GidjiqFoBommYk0wJNU7IVPaMBIaA5J2oQSLxqTBtcd2LwGxELYCc8dLpf4cpaSe ctk/V2Pjh5DYV+o8hPfwjtsCaGihkYWUxxtf/jMz3lfYJhwI0/sFKcYaKhoXEZys YE/F1RsLtIhrTlH/moe8PfMPS/eCVqew1t/o5WtlJ7kBDQQ8cO3nAQgAutV274kz JazptIfkt4MsjuR5r0FFNYsT1WRaC9i4RzCFKd84s0yJ9qPBB1hhnL1ZOtLQFXju bNcSjiS/Y+EkR91hxc4ojYZ4h/8rwK0kwmk/pUQNBXNunnYP9gsqdktggMqeAMcA drXnher942I/IbgsFWiNF7YCEtCbigB8yQ/tveYKb4ul6SvG3ksofE1xMHXkT+A3 MecICM67aYvpqyYN5hMphG0l3ii9YjYnaAGnBISu0B6X7DYzDm+rfxNWGOQmxTks -----END PGP PUBLIC KEY BLOCK-----

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Organisatorisches  Veranstaltungs-Homepage Download des Skripts der Vorlesung und der Folien der Übung Links zu den Softwareprodukten  Veranstaltungs-Webserver Arbeitsgruppenbereiche (25 Stück) URL:  Termine des Praxisteils im Pool OR1: 29.4, 13.5,  Softwarepakete im Pool OR1 Dreamweaver MX: HTML-Editor Apache 2, PHP 4, 1st Page Editor, XTrans XML und XSLT Editor  Die Gesamtnote setzt sich aus Klausur und Fallstudie zusammen.  Aufbau der Klausur (40 Punkte) 1. Teil: Allgemeine Fragen zu E-Business (Inhalt: Vorlesung) 2. Teil: Aufgaben zu PHP und Datenbankzugriffen 3. Teil: Aufgaben zu XML, Xpath und XSLT Letzte Übung am 15.7: Klausurvorbereitung Anmeldung zur Klausur: Liste in Übung und Vorlesung  Fallstudie online CD-Katalog (10 Punkte)  Fragen?

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Hypertext Markup Language (HTML)

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Einführung  HTML ist eine Auszeichnungssprache für Web-Dokumente  Auszeichnungssprachen Auszeichnen (Markup) bezeichnet den Prozess der Informations- anreicherung von Textdokumenten. Durch Auszeichnung verschiedener Bereiche durch sogenannte „Tags“ (Marken) kann sowohl das Erscheinungsbild als auch die inhaltliche Struktur von Dokumenten spezifiziert werden.  Quellen zu HTML Stefan Münz: SelfHTML 8.0: W3C: Spezifikationen HTML 4.0 und XHTML 1.0: Beispiel Hallo, ich bin HTML Start-Tag: Fett End-Tag: Fett

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Entwicklung der Markup-Sprachen

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Aufbau eines HTML-Dokuments  Dateiendungen für HTML-Dokumente:.htm.html Beispieldokument Beispiel Hallo, ich bin ein ganzes HTML-Dokument. Head Bereich: Dokument- informationen (Autor, Key- words etc.) Body Bereich: Eigentliches Dokument

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 HTML-Editoren  Zur Oberflächengestaltung haben sich WYSIWYG-Editoren durchgesetzt.  Gängige HTML-Editoren Macromedia Dreamweaver Microsoft Frontpage Adobe GoLive  Wir verwenden Dreamweaver MX, weil weitverbreiteter Profi-Editor, den viele Agenturen verwenden gute Kontrolle über den HTML-Code Bearbeitung von HTML-Dateien mit integriertem PHP-Code möglich

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Hyperlinks  Beispiel Verzeichnis1/Dokument1.htm Verzeichnis1/Dokument2.htm  Relativer Link zwischen Dokumenten auf einem Server  Absoluter Link zwischen unterschiedlichen Servern  Hyperlinks in Dreamweaver Und das ist ein Link. Start-Tag: Hyperlink Ziel des Hyperlinks End-Tag: Hyperlink Text Link

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Einbinden von Grafiken  Grafiken werden als gesonderte Datei auf dem Webserver gespeichert.  Einbinden in das HTML-Dokument:  Grafiken in Dreamweaver Image- Tag Quelldatei Alternativer Text Größenangaben

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Formulare  Formularfelder werden in einem FORM-Tag eingeschlossen Method: Wie Daten zum Server übertragen werden (POST/GET) Action: Ziel zu dem die Eingaben geschickt werden  Formularfelder werden über INPUT-Tags definiert Type: Typ des Formularfelds z.B. text, radio oder submit Name: Name des Feldes; wird später Variabelenname in PHP  Formulare in Dreamweaver Vorname: Matrikelnummer:

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Tabellen  Tabellen in Dreamweaver Zelle 1 Zelle 2 Zelle 3 Zelle 4 Tabellenzeile Tabellenfeld Breite der Tabelle RahmenbreiteAbstand zum Text

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Layouten mit Blindtabellen  Eine Blindtabelle ist eine Tabelle mit Rahmendicke null.  Blindtabellen lassen sich zum Layouten von HTML-Seiten einsetzen.  Hintergrundfarbe für Zellen:  Trick: Zellenbreiten mittels unsichtbarer Grafiken fixieren

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Gestaltung von Webseiten  Webseiten sollen für möglichst viele Besucher nutzbar sein Unterschiedliche Browser Unterschiedliche Bildschirmauflösungen Unterschiedliche Endgeräte (PDAs, Handys, …) "barriere-frei" d.h. auch Behinderten- und Blindengerecht (  Daher gilt meist die Design-Devise: Weniger ist mehr!  Häufigste Fehler: Website geht an Bedürfnissen der Zielgruppe vorbei -z.B. tolle Grafiken, Zielgruppe will aber schnelle Informationen Zu aufwendiges Design oder ausgefallene Technologien -lange Ladezeiten -fehlende Plugins auf Benutzerseite -Browserspezifische HTML-Erweiterungen (z.B. Netscape Layer-Tag) Veraltete Informationen  Überprüfung von Webseiten auf Standardkonformität W3C HTML-Validator: Zusätzlich: Website vor der Veröffentlichung mit verschiedenen Browsern testen

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Cascading Style Sheets (CSS)

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Cascading Style Sheets (CSS)  Was sind Cascading Style Sheets? Sprache zur Definition von Formateigenschaften einzelner HTML- Befehle Erweiterung zu HTML, vergleichbar Formatvorlagen in MS Word  Beispiel Überschriften 1. Ordnung (H1) sollen eine Schriftgröße von 18 Punkt haben, in der Schriftart Helvetica erscheinen, und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden  Ziel Genaue, browserunabhängige Definition des Aussehens einzelner Elemente ohne Rückgriff auf das -Tag Einheitliches Layout (Corporate Design)  Standardisierung durch W3C Versionen: CSS 1 und CSS 2

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Wie definiere ich Styles? (1)  Formate für HTML-Tags <!-- h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt} --> Ich bin 18pt groß!

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Wie definiere ich Styles? (2)  Unabhängige Formate (lassen sich jedem Tag zuordnen) <!--.big { font-size: 18pt; font-family: Verdana, Arial, Helvetica, sans-serif} --> Ich bin auch 18 pt groß!

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Testseite Wo definiere ich Styles?  In der HTML-Datei siehe vorherige Beispiele  In einer separaten Datei Dateiendungskonvention:.CSS Vorteil: Zentrale Definition der Formateigenschaften p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; line-height: 14pt} Test.css Testseite Test1.htm Test2.htm

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Schriftformate AttributWerte font-family:Verdana, Arial, serif, sans-serif; font-size:24pt; 130 %, medium, large font-weight:bold; (bolder, lighter) text-decoration:underline; overline; blink; color:#CC0000, rgb(51,0,102), black; margin-top: margin-bottom: margin-left: margin-right: 2cm; 16pt; line-height:16pt; text-alignleft, center; right; justify (= als Blocksatz ausrichten) background- color: #003366;

Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 File Transfer Protokoll (FTP)  FTP dient zur Übertragung von Dateien zwischen Computern  Der MS Internet Explorer beherrscht FTP  HTML-Dateien auf dem Veranstaltungs-Server speichern Adresse eingeben: Gruppenkennwort eingeben: siehe Zettel Dateien in das Internet Explorer-Fenster ziehen