Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Veranstaltung Pr.-Nr.: 10 033 018 E-Business Entwicklung web-basierter.

Präsentation zum Thema: "Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Veranstaltung Pr.-Nr.: 10 033 018 E-Business Entwicklung web-basierter."—  Präsentation transkript:

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

2 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 13-15 Uhr

3 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

4 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 eMail-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

5 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.

6 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)

7 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

8 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

9 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

10 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

11 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 10 1 2 3 4 5 6 7 8 9 10 PHP-Code HTML-Code

12 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

13 Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Mustermann 02.10.2000 mustermann@anywhere.com Festplatte 123456 5 Monitor 9876 1 Termin 8-11: XML Beispiel-Dokument

14 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 7.0.3 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-----

15 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: http://www3.wiwiss.fu-berlin.de/gruppeXX  Termine des Praxisteils im Pool OR1: 29.4, 13.5, 27.5.03  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?

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

17 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: www.teamone.de/selfhtml W3C: Spezifikationen HTML 4.0 und XHTML 1.0: www.w3.org/MarkUp/ Beispiel Hallo, ich bin HTML Start-Tag: Fett End-Tag: Fett

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

19 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

20 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

21 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

22 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

23 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:

24 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

25 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

26 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 (www.einfach-fuer-alle.de)  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: http://validator.w3.org Zusätzlich: Website vor der Veröffentlichung mit verschiedenen Browsern testen

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

28 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

29 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ß!

30 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ß!

31 Uwe H. Suhl, Chris Bizer: E-Business - Entwicklung web-basierter Anwendungssysteme – SS03 Testseite 2..... 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 1..... Test1.htm Test2.htm

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

33 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: ftp://GruppeXX@www3.wiwiss.fu-berlin.de/ Gruppenkennwort eingeben: siehe Zettel Dateien in das Internet Explorer-Fenster ziehen