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

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

VeranstaltungPr.-Nr.: 10 033 018

E-Business

Entwicklung web-basierter Anwendungssysteme

Prof. Uwe H. SuhlChris Bizer

SS 2003


Hallo

Dipl.-Kfm. Chris Bizer

Arbeitsgebiete: E-Business und E-Commerce Architekturen web-basierter Systeme Semantic Web

Zimmer: 215

Sprechstunde: Mittwoch 13-15 Uhr


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


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


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.


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)

WebserverProgram

m

(Apache, IIS)


Architektur WBAS

Präsentation Applikation Datenhaltung

Client Webserver

PHPSkripte

InternetBrowser

Server-Program

m(Apache)

Scripting-Engine(PHP)

Datenbank

(MS Access)

HTML-Dateien

XML-Repository

(Tamino)

Applikations-Server(z.B. J2EE, .net oder SAP)

Datenbank

XML

XML

ODBC

HTTP/SSL


Inhalte der Übung

Präsentation Applikation Datenhaltung

Client Webserver

PHPSkripte

InternetBrowser

Server-Program

m(Apache)

Scripting-Engine(PHP)

Datenbank

(MS Access)

HTML-Dateien

XML-Repository

(Tamino)

Applikations-Server(z.B. J2EE oder SAP)

Datenbank

XML

XML

ODBC

HTTPÜ 1-2

Ü 8-11

Ü 3

Ü 3

SSL

Ü 4-7

Ü 12


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

<HTML> <HEAD> <TITLE>Beispieldokument</TITLE> </HEAD> <BODY > <P>Inhalt des Dokuments. Bla Bla Bla</P> <P>Bla Bla Bla Bla Bla Bla Bla Bla Bla </P> </BODY></HTML>


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


Termin 3-7: PHP-Beispielskript

Die Anweisungen sind in den HTML-Code eingebettet

Ergebnis des Skripts

<HTML><HEAD>

<TITLE>Zahlen von 1 bis 10</TITLE>

</HEAD><BODY ><P>

<?php

for ($i =1; $i<=10; $i++) {

echo $i . ‘ <BR> ‘ ;

}

?>

</P></BODY></HTML>

<HTML><HEAD>

<TITLE>Zahlen von 1 bis 10</TITLE>

</HEAD><BODY ><P>

1 <BR> 2 <BR> 3 <BR> 4 <BR> 5 <BR> 6 <BR> 7 <BR> 8 <BR> 9 <BR> 10 <BR>

<P></BODY></HTML>

PHP-Code

HTML-Code

HTML-Code

HTML-Code


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


<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE BESTELLUNG SYSTEM "BESTELLUNG.DTD"><BESTELLUNG>

<AUFTRAGSKOPF> <NAME>Mustermann</NAME>

<DATUM>02.10.2000</DATUM> <E-MAIL>[email protected]</E-MAIL></AUFTRAGSKOPF><AUFTRAGSPOSITIONEN> <POSITION>

<BEZEICHNUNG>Festplatte</BEZEICHNUNG> <ARTIKELNUMMER>123456</ARTIKELNUMMER> <ANZAHL>5</ANZAHL> </POSITION> <POSITION>

<BEZEICHNUNG>Monitor</BEZEICHNUNG><ARTIKELNUMMER>9876</ARTIKELNUMMER><ANZAHL>1</ANZAHL>

</POSITION></AUFTRAGSPOSITIONEN>

</BESTELLUNG>

Termin 8-11: XML Beispiel-Dokument


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 <http://www.pgp.com>

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


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?


Hypertext Markup Language (HTML)


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/

<H1>Beispiel</H1><P><B>Hallo</B>, ich bin <I>HTML</I></P>

Start-Tag: Fett End-Tag: Fett


Entwicklung der Markup-Sprachen

Semantic Web?WWWInternet

SGMLSGML(ISO

Standard)

HTML1.0

XML

XHTML

1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003

HTML2.0

HTML3.2

HTML4.0

1970 1986


Aufbau eines HTML-Dokuments

Dateiendungen für HTML-Dokumente: .htm .html

<html>

<head>

<title>Beispieldokument</title>

<meta name="author" content="Chris Bizer">

<meta name="keywords" content="HTML, Beispiel">

</head>

<body bgcolor="#FFFFFF">

<H1>Beispiel</H1>

<P> <B>Hallo</B>, ich bin ein ganzes <I>HTML-Dokument</I>. </P>

</body>

</html>

Head Bereich: Dokument-informationen (Autor, Key-words etc.)

Body Bereich: Eigentliches Dokument


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


Hyperlinks

Beispiel Verzeichnis1/Dokument1.htm

Verzeichnis1/Dokument2.htm

Relativer Link zwischen Dokumenten auf einem Server

Absoluter Link zwischen unterschiedlichen Servern

Hyperlinks in Dreamweaver

<P>Und das ist ein <a href="Dokument2.htm">Link</a>.</P>

Start-Tag: Hyperlink

Ziel des Hyperlinks

End-Tag: Hyperlink

Text

<a href=„http://www3.wiwiss.fu-berlin.de/Verzeichnis1/Dokument2.htm">Link</a>


Einbinden von Grafiken

Grafiken werden als gesonderte Datei auf dem Webserver gespeichert.

Einbinden in das HTML-Dokument:

Grafiken in Dreamweaver

<img src="moby_play.gif" width="130" height="130" alt="Moby">

Image-Tag

Quelldatei Alternativer

Text

Größenangaben


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

<form name="form1" method="post" action="auswerten.php"> Vorname: <input type="text" name="vorname"><br> Matrikelnummer: <input type="text" name="matrikelnummer"><br> <input type="submit" name="Abschicken" value="Abschicken"></form>


Tabellen

Tabellen inDreamweaver

<table width="800" border="1" cellpadding="3">

<tr> <td>Zelle 1</td> <td>Zelle 2</td> </tr> <tr> <td>Zelle 3</td> <td>Zelle 4</td> </tr>

</table>

Tabellenzeile

Tabellenfeld

Breite der Tabelle Rahmenbreite Abstand zum Text


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

<table width="100%" border="0" cellpadding="20">

<td bgcolor="#66CCCC">

<img src="transparent.gif" width="150" height="1">


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


Cascading Style Sheets (CSS)


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 <FONT>-Tag

Einheitliches Layout (Corporate Design)

Standardisierung durch W3C Versionen: CSS 1 und CSS 2


Wie definiere ich Styles? (1)

Formate für HTML-Tags

<html>

<head>

<style type="text/css">



</style>

</head>

<body>

<h1>Ich bin 18pt groß!</h1>

</body>

</html>


Wie definiere ich Styles? (2)

Unabhängige Formate (lassen sich jedem Tag zuordnen)

<html>

<head>

<style type="text/css">



</style>

</head>

<body>

<h1 class="big">Ich bin auch 18 pt groß!</h1>

</body>

</html>


<head> <title>Testseite 2</title>

<link rel="stylesheet" href="Test.css">

</head> .....

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

<html><head><title>Testseite 1</title>

<link rel="stylesheet" href="Test.css">

</head> .....

Test1.htm

Test2.htm


Schriftformate

Attribut Werte

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-align left, center; right; justify (= als Blocksatz ausrichten)

background-color:

#003366;


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://[email protected]/

Gruppenkennwort eingeben: siehe Zettel

Dateien in das Internet Explorer-Fenster ziehen

Documents

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