E-Commerce I€¦ · E-Commerce I Web Programmierung Übung SS 2011 . Übersicht 1. Einführung in die Web Programmierung 2. Einführung in HTML 3. Einführung in PHP. Katholische

Dipl.-Kfm. Christopher Freitag

Lehrstuhl für ABWL undWirtschaftsinformatik

Katholische Universität Eichstätt-Ingolstadt

E-Commerce I

Web Programmierung

Übung

SS 2011

Übersicht

1. Einführung in die Web Programmierung

2. Einführung in HTML

3. Einführung in PHP

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e22Literatur

Soweit nicht anders angegeben, basiert das Skript im wesentlichen auf folgender Literatur:

Gerti Kappel/Birgit Pröll/Siegfried Reich/Werner Retschitzegger (Hrsg.) (2004): Web engineering – systematische Entwicklung von Web-Anwendungen, 1. Aufl., dpunkt.verlag, Heidelberg.

Pomaska, G. (2005): Grundkurs Web-Programmierung – Interaktion, Grafik und Dynamik - mit XHTML und CSS, XML, JavaScript, Applets, SVG, PHP, 1. Aufl., vieweg, Wiesbaden.

http://de.selfhtml.org

http://www.php.net

http://www.mysql.com

http://www.apache.org

Übersicht




Übersicht

1. Einführung in die Web Programmierung1.1 Grundlagen

1.2 Web Engineering

1.3 Vorgehensmodelle

1.4 Kategorien von Web-Anwendungen

1.5 Technik

1.6 Usability von Webanwendungen



Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e6Einführung in die Web Programmierung

Grundlagen

Definition:

Eine Web-Anwendung ist ein Softwaresystem, das auf einem Web-Server ausgeführt wird

web-spezifische Ressourcen wie Inhalte und Dienste bereitstellt, die über Benutzerschnittstellen verwendet werden

auf den Spezifikationen des World Wide Web Consortiums (W3C) beruht

Kappel et al. (2004), S. 1 - 5

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Problemstellung:

Die heutige Situation der Entwicklung von Web-Anwendungen erinnert an Praktiken, die in den 60er Jahren bei der Softwareentwicklung Anwendung fanden: Wird oftmals als ein einmaliges Ereignis angesehen

Erfolgt vielfach in einer spontanen Art und Weise

Basiert zumeist auf dem Wissen, den Erfahrungen und den Entwicklungspraktiken individueller Entwickler

Beschränkt sich auf Wiederverwendung im Sinne des "Copy&Paste-Paradigmas"

Ist gekennzeichnet durch unzureichende Dokumentation der Web-Anwendungen

Kappel et al. (2004), S. 1 - 5

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Charakteristika von Web-Anwendungen:

Web-Anwendungen weisen im Unterschied zu traditionellen, nicht Web-basierten Anwendungen eine Reihe von Charakteristika auf die entweder in herkömmlichen Anwendungen fehlen (z. B. nichtlineare Navigation)

oder die in Web-Anwendungen besonders stark ausgeprägt sind (z. B. Häufigkeit von Änderungen)

Beispiel: Dienstgüte – Unbekannte Netzwerkeigenschaften

Inhomogenität der technischen Infrastruktur – Web-Server (wird zumeist selbst konfiguriert) vs. Webbrowser (kein Einfluss auf Einstellungen)

Oftmals sind diese Charakteristika der Grund dafür, dass Konzepte, Methoden, Techniken und Werkzeuge des traditionellen Software Engineerings nur in angepasster Form zur Entwicklung von Web-Anwendungen eingesetzt werden

können

oder sich als gänzlich ungeeignet erweisen

Kappel et al. (2004), S. 10 - 22

Übersicht


1.2 Web Engineering



1.5 Technik




Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Web Engineering

Definition:

Web Engineering ist die Anwendung systematischer und quantifizierbarer Ansätze (Konzepte, Methoden, Techniken, Werkzeuge), um Anforderungs-beschreibung, Entwurf, Implementierung, Test, Betrieb und Wartung qualitativ hochwertiger Web-Anwendungen kosteneffektiv durchführen zu können.

Eigenschaften Klar definierte Ziele und Anforderungen

Systematische Entwicklung einer Web-Anwendung in den Phasen der Softwareentwicklung

Kontinuierliche Überwachung des gesamten Entwicklungsprozesses

Kappel et al. (2004), S. 1 - 5

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Web Engineering

Softwarequalität:

Qualitätsanforderungen an Software können aus verschiedenen Perspektiven betrachtet werden.

Die ISO 9126 definiert sechs Qualitätsmerkmale für SW-Produkte.

Software-Qualität ist die Gesamtheit der Merkmale und Merkmalswerte eines Software-Produkts: Funktionalität (Korrektheit, Sicherheit,...)

Zuverlässigkeit (Fehlertoleranz, Wiederherstellbarkeit, ...)

Benutzbarkeit (Bedienbarkeit, Erlernbarkeit, ...)

Effizienz (Wirtschaftlichkeit, Zeitverhalten, ...)

Wartungsfreundlichkeit (Analysierbarkeit, Änderbarkeit, ...)

Übertragbarkeit (Anpassbarkeit, Installierbarkeit, ...)

Kappel et al. (2004), S. 2

Übersicht


1.2 Web Engineering


1.3.1 Anforderungsdefinition

1.3.2 Entwurf

1.3.3 Implementierung


1.5 Technik




Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Vorgehensmodelle

Definition: In einem Vorgehensmodell wird festgelegt, welche Aktivitäten in welcher Reihenfolge von welchen Personen erledigt werden und welche Ergebnissedabei entstehen und wie diese in der Qualitätssicherung überprüft werden.

Eigenschaften: Festlegung der Reihenfolge der Arbeitsschritte

Festlegung der Personen

Definition der Teilprodukte

Definition von Testfällen zur Qualitätssicherung

Ziele: Entwicklung einer qualitativ hochwertigen Software

Beherrschung der Kosten und der Entwicklungszeit

Quelle: Balzert 2000, S. 54

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Vorgehensmodelle

Validierung: Eignung des Produkts auf seinen Einsatzzweck

Verifikation: Übereinstimmung des Produkts mit seiner Spezifikation

Anforderungsdefinition

Grobentwurf

Feinentwurf

Modulimplementation

Systemtest

Abnahmetest

Modultest

Integrationstest

Anwendungsszenarien

Testfälle

Testfälle

Testfälle

Validierung

Verifikation

http://www.v-modell-xt.de/

Übersicht


1.2 Web Engineering



1.3.2 Entwurf



1.5 Technik




Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e16Vorgehensmodelle


Die Anforderungsdefinition (Requirements Engineering) umfasst Prinzipien, Methoden und Werkzeuge zur Ermittlung, Beschreibung, Prüfung und Verwaltung von Anforderungen in der Systementwicklung.

Eine Anforderung beschreibt eine zu erfüllende Eigenschaft oder zu erbringende Leistung eines Systems.

wichtige Aufgaben: Ermitteln und Beschreiben der Anforderungen

Modellieren der Anforderungen als fachliche Lösung

Prüfen der Anforderungen

Verwalten der Anforderungen

Kappel et al. (2004), S. 29 - 34

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e17Vorgehensmodelle


Anforderungen spielen für die Qualität von Software-Anwendungen eine entscheidende Rolle

Die Praxis hat massive Probleme mit Anforderungen Unklar spezifiziert

Fehlerhaft

Unvollständig

...

Die Folgen Mangelnde Akzeptanz durch die Benutzer

Fehlplanungen

Inadäquate Softwarearchitekturen

…

Kappel et al. (2004), S. 29 - 34

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e18Vorgehensmodelle


Beispiele für Anforderungen:

Die Anwendung muss zum 1. September 2011 online verfügbar sein (Vorgabe des Auftraggebers)

Die Anwendung muss gleichzeitig mindestens 2500 Benutzer unterstützen (Qualitätsziel des Auftraggebers)

Als Entwicklungsplattform soll J2EE zum Einsatz kommen (Technologieerwartung der Entwickler)

Die Übertragung sämtlicher Geschäftsdaten muss gesichert erfolgen (Qualitätsziel des Benutzers)

Die Benutzerschnittstelle muss Layouts für unterschiedliche Kundengruppen ermöglichen (Qualitätsziel des Auftraggebers)

Ein beliebiger Benutzer muss in der Lage sein, mit der Anwendung ein gewünschtes Produkt innerhalb von drei Klicks zu finden (Usability-Ziel des Auftraggebers)

Der Benutzer soll jederzeit die in seinem Warenkorb befindlichen Artikel einsehen können (Funktionsziel eines Benutzers)

Kappel et al. (2004), S. 29 - 34

Übersicht


1.2 Web Engineering



1.3.2 Entwurf



1.5 Technik




Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e20Vorgehensmodelle

Entwurf

Im Entwurf wird aus den spezifizierten Anforderungen eine Software-Architektur entwickelt.

wichtige Aufgaben: Identifikation und Darstellung der einzelnen Elemente (Schichten, Module,

Klassen, ...) der zugrundeliegenden Software-Architektur.

Identifikation und Darstellung der Beziehungen zwischen den einzelnen Elementen.

...

Entwurfs- und Implementierungsphase sind sehr stark miteinander verzahnt.

Die im Entwurf modellierten Elemente und Beziehungen sollten in der Phase der Implementierung direkt programmiert werden können.

Übersicht


1.2 Web Engineering



1.3.2 Entwurf



1.5 Technik




Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e22Vorgehensmodelle

Implementierung

Die Aufgabe des Programmierers ist es, die im Entwurf spezifizierten Elemente zu implementieren.

wichtige Aufgaben: Konzeption von Datenstrukturen und Algorithmen

Angabe zur Zeit- und Speicherkomplexität

Umsetzung der Konzepte in die Konstrukte der verwendeten Programmiersprache

Dokumentation der Implementierung durch Kommentare

Test und Verifikation des entwickelten Programms.

...

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e23Aufgabe

Auf der Internetseite zur Vorlesung finden Sie den Artikel von Lauenroth, Halmans (2007): Auswirkung sehr vieler Stakeholder auf das RequirementEngineering

Welche Zieldimensionen nennen die Autoren für das RequirementEngineering?

Welche Auswirkungen auf die verschiedenen Zieldimensionen ergeben sich durch sehr viele Beteiligte?

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e24Aufgabe

Sie haben die Aufgabe eine Web-Anwendung zu entwickeln: Gruppe 1: Bewertungsportal (Kurse/Programme/Universitäten)

Gruppe 2: Raumbelegungsportal (Raumbelegung und Information bei Änderung)

Gruppe 3: Zeitabrechnungsplattform (Arbeitsstunden/Soll-Ist-Vergleich/Info)

Gruppe 4: Newsletterportal zur An- und Abmeldung (Mobile/E-Mail und Info)

Gruppe 5: Benachrichtigungsportal für Klausur-/Fußball(WM)-Ergebnisse/Informationen per Mobile (SMS/MMS und Marketingaktivitäten)

Gruppe 6: Arbeiterplanungsportal

Schließen Sie sich dazu in Gruppen von je 4 – 5 Personen zusammen. Die Aufgabe ist erfolgreich abgeschlossen, wenn die Web-Anwendungen die wesentlichen Anforderungen erfüllt,

ein Usability Test mit einer anderen Gruppe durchgeführt wurde,

eine Abschlusspräsentation von ca. 30 Minuten vorgetragen wurde,

die Web Anwendung umfangreich dokumentiert wurde (8 – 10 Seiten).

Übersicht


1.2 Web Engineering



1.5 Technik




Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Kategorien von Web-Anwendungen

Informationssuche „Wo finde ich ...?“

Informationsextraktion „Was ist wichtig...?“

Wartung „Sind meine Daten noch

aktuell...?“

Personalisierung „Was mich interessiert...?“

Problemfelder

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Problemfelder des Internets – Informationssuche:

Keyword-Suche führt zu vielen nicht relevanten Ergebnissen unterschiedliche Bedeutung

unterschiedlicher Kontext

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Problemfelder des Internets – Informationsextraktion:

Web-Anwendungen verfügen nicht über ein Kontextwissen, um Informationen aus der Text- /Bilddarstellung zu extrahieren.

Kann nur vom Menschen korrekt durchgeführt und bewertet werden.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Problemfelder des Internets – Wartung:

Mit zunehmender Komplexität und Größe der Web-Anwendung, steigt der Aufwand für deren Wartung.

Informationen sind oftmals inkonsistent

nicht korrekt

nicht aktuell

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Problemfelder des Internets – Personalisierung:

Anpassung der dargestellten Informationen an die persönlichen Bedürfnisse und Anforderungen des Nutzers.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Kappel et al. (2004), S. 5 - 9

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Dokumentenzentrierte Web-Anwendungen:

Webseiten werden in Form von statischen HTML-Dateien auf einem Web-Server abgelegt und im Falle einer Anfrage als Antwort an den Web-Client geschickt.

Nachteile: Hoher Aufwand bei änderungsintensiven Webseiten

Gefahr veralteter Informationen

Gefahr von Inkonsistenz (u. a. aufgrund von Mehrfachspeicherungen)

Vorteile: Einfachheit und Stabilität des Systems

Schnelle Antwortzeiten

Kappel et al. (2004), S. 5 - 9

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Interaktive Web-Anwendungen:

Common Gateway Interface (CGI) und HTML-Formular-Technik bieten eine erste einfache Form der Interaktivität über Eingabebereiche

Radio-Buttons

Auswahllisten

Webseiten können abhängig von den Benutzereingaben dynamisch generiert werden.

Beispiele: Virtuelle Ausstellung

News-Site

Kappel et al. (2004), S. 5 - 9

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Transaktionale Web-Anwendungen:

Hohe Interaktivität – z. B. Modifikationen durch Benutzer möglich

Datenbankbasierte Systeme

Vorteile: strukturierte Abfragen

effiziente und konsistente Datenverwaltung

Beispiel: Online-Banking

E-Shopping

Kappel et al. (2004), S. 5 - 9

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Workflow-basierte Web-Anwendungen:

Erlauben die Abwicklung von Geschäftsprozessen (”workflows”) innerhalb oder zwischen verschiedenen Unternehmen, Behörden und privaten Nutzern.

Voraussetzung: Strukturiertheit der zu automatisierenden Prozesse und Vorgänge.

Herausforderungen: Heterogenität der IT-Infrastruktur

Komplexität der einzubindenden Dienste

Autonomie der beteiligten Unternehmen

Sicherheit

Beispiel: E-Government-Anwendungen im öffentlichen Bereich

Kappel et al. (2004), S. 5 - 9

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Kollaborative Web-Anwendungen:

Inhalte von Web-Anwendungen können gemeinsam (kollaborativ) editiert, verändert und diskutiert werden.

Herausforderungen: unstrukturierte Vorgänge

hoher Kommunikationsbedarf

Beispiele: Wiki, http://c2.com/cgi/wiki

Ilias

moodle

Kappel et al. (2004), S. 5 - 9

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Kollaborative Web-Anwendungen:

http://www.moodle.de/

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Portal-orientierte Web-Anwendungen:

Zugriff auf verteilte, ggf. heterogene Informationsquellen und Dienste im Sinne eines Single Point of Access.

Portale Unternehmensportale ermöglichen eigenen Mitarbeitern bzw. Partnerunternehmen

einen Zugriff auf verschiedene Informationsquellen und Dienste.

Marktplatzportale in Form von Online Shopping Malls im B2C-sowie B2B-Bereich.

Community-Portale:

Versuchen durch Interaktion zwischen den Besuchern Kundenloyalität zu schaffen.

Ermöglichen durch eine entsprechende Benutzerverwaltung individuelle Angebote (”one-to-one marketing”).

Kappel et al. (2004), S. 5 - 9

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Portal orientierte Web-Anwendungen:

http://www.vwgroupsupply.com/

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Ubiquitäre Web-Anwendungen:

Stellen personalisierte Dienste zu jeder Zeit an jedem Ort, für eine Vielzahl von Endgeräten zur Verfügung –”allgegenwärtiger Zugriff”.

Beispiel: Anzeige von Mittagmenüs auf den mobilen Endgeräten jener Benutzer, die zwischen 11:00 Uhr und 14:00 Uhr ein Restaurant betreten.

Voraussetzung: Kenntnis des Kontexts in dem die Web-Anwendung gerade benutzt wird, um zur

Laufzeit entsprechende Anpassungen an der Web-Anwendung vornehmen zu können.

Existierende Web-Anwendungen bieten häufig eine sehr eingeschränkte Form der Ubiquität, indem beispielsweise nur ein Aspekt unterstützt wird:

Personalisierung oder

Ortsabhängige Dienste oder

Endgerätespezifische Ein- und Ausgabe

Kappel et al. (2004), S. 5 - 9

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Semantische Web-Anwendungen:

Informationen im Internet sollen nicht nur für den Menschen verständlich aufbereitet, sondern auch für Maschinen automatisch verarbeitbar gemacht werden.

Ziel: Vernetzung und Wiederverwendung von Wissen (”Syndication”)

Finden von relevanten Informationen, z. B. durch Recommender-Systeme

Kappel et al. (2004), S. 5 - 9

Übersicht


1.2 Web Engineering



1.5 Technik




Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

D D

r. H

ajo

Hip

pner

43Einführung in die Web Programmierung

Technik

Ein Client ist eine Anwendung, die in einem Netzwerk (hier Internet) den Dienst eines Servers in Anspruch nimmt.

Ein Server ist eine Software, die es ermöglicht, Webseiten und Dienste den Benutzern zur Verfügung zu stellen.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

D D

r. H

ajo

Hip

pner


Technik

Statische HTML-Seiten werden auf dem Server bereitgestellt.

Bei einer Anfrage sendet der Server diese Dokumente unverändert an den Browser des Clients.

Biethahn/Nomikos (2002), S. 50 ff.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

D D

r. H

ajo

Hip

pner


Technik

Vorteile:

Erstmalige Programmierung sehr einfach und kostengünstig

Anfrage statischer Seiten erzeugt nur geringe Server-Last

Nachteile:

Für jede Änderung müssen Dateien manuell bearbeitet und auf dem Server abgelegt werden

Kein kundenindividueller Dialog möglich


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

D D

r. H

ajo

Hip

pner


Technik

Dohmann/Fuchs/Khakzar (2002), S. 14

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

D D

r. H

ajo

Hip

pner


Technik

Browser (Client):

Darstellung der Anwendung

Ausführung von clientbasierten Programmen (z. B. Java-Applets).

Web-Server:

Darstellung von Applikationsdaten

Verwaltung von „Sessions“

Anwendungs-Server:

Bereitstellung der Applikation für die Web-Anwendung (z.B. Katalogfunktion, Suche, Warenkorb, Auftragsbestätigung ...)

Datenbank-Server:

Datenverwaltung für die Applikationen

Datensicherung

Schwarze/Schwarze (2002), S. 81 ff.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Technik

Mit Hilfe von Skriptsprachen kann eine Webseite dynamisch erzeugt werden. Serverseitige Skriptsprachen (läuft auf einem Web-Server wie z. B. Apache ab)

PHP

Java Servlet

Perl

Clientseitig Skriptsprachen (läuft auf dem Client im Browser ab)

Java Script

ActionScript (Flash)

Sonstige (ActiveX, VBScript)

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

D D

r. H

ajo

Hip

pner


Technik


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

D D

r. H

ajo

Hip

pner


Technik

Ablauf:

Dynamische Seiten werden zur Laufzeit erzeugt.

Sobald ein User eine solche Seite abruft, kontaktiert der Web-Server ein Programm der serverseitigen Programmlogik, das seinerseits Daten aus einer Datenbank oder einer Datei ausliest und wieder an den Web-Server zurückgibt.

Das Ergebnis selbst wird als einfache (auf die individuelle Abfrage spezifizierte) HTML-Seite an den User geschickt.


Übersicht


1.2 Web Engineering



1.5 Technik




Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Usability von Webanwendungen

„Im Durchschnitt brechen sechs Prozent der Benutzer den Kauf ab, weil sie den Weg zum Warenkorb nicht finden oder verstehen“ (Nielsen)

Eine Verbesserung der Usability bietet u. a. folgende Möglichkeiten: längere Verweildauer,

mehr Klicks,

weniger Anrufe auf der Hotline,

höhere Zufriedenheit,

besseres Image

...

http://www.fit-fuer-usability.de/news/praxis/august07/onlineshops_eresult.html

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Beispiel: Neckermann verbesserte die Usability seiner Internetseite und seines Online-Shops und erhöhte damit die Konversionrate um über 0,5%.

http://www.fit-fuer-usability.de/news/praxis/august07/onlineshops_eresult.html

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Definition:

Usability ist ein Maß das angibt, wie gut ein Produkt geeignet ist, seine Benutzer bei der Lösung bestimmter Aufgaben effektiv, effizient und zu ihrer Zufriedenstellung zu unterstützen. Effektivität: die Akkuratheit und Vollständigkeit mit der Benutzer ihre Ziele in einer

bestimmten Umgebung erreichen können. (z. B. Möchte er auf einer Website eine Ware bestellen, ist der Vorgang effektiv, wenn ihm dies gelingt).

Effizienz: der Aufwand mit dem Ressourcen verwendet werden müssen, um ein Ziel zu erreichen. (z. B. innerhalb von 3 Klicks können Waren gefunden und bestellt werden).

Zufriedenheit: der Komfort und die Zugänglichkeit des Systems für den Benutzer.

http://www.iso.org/iso/home.htm

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Usability-Test

Beobachtung wie Benutzer tatsächlich mit der Anwendung oder einem Prototyp umgehen. Meist wird ihnen dazu eine Aufgabe gestellt.

Die Teilnehmer können mit folgenden Techniken beobachtet werden: Audio & Video

Aktivitäten auf dem Bildschirm

Logfiles der angewählten Links

Blickbewegung (Eye Tracking)

Fragebögen

Interviews

Harms, Schweibenz (2002), S. 61 ff

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e56Aufgabe

Welche Kriterien sind für Sie bei der Bewertung der Usability einer Webseite (bzw. Web-Anwendung) wichtig?

Recherchieren Sie im Internet nach je einer Webseite, die ihrer Meinung nach eine gute bzw. schlechte Usability hat. Begründen Sie Ihre Antwort.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e57Aufgabe

Auf der Internetseite zur Vorlesung finden Sie den Artikel von Harms, Schweibenz (2000): Testing Web Usability

Was verstehen die Autoren unter dem Begriff „Usability Engineering“?

Welche Evaluations-Methoden werden vorgestellt – diskutieren Sie diese kritisch!

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e58Aufgabe

Auf der Internetseite zur Vorlesung finden Sie für die einzelnen Projektaufgaben eine Beschreibung des Ist-Zustands.

Erarbeiten Sie in der Gruppe verschiedene Anforderungen, die sich aus dem Ist-Zustand und den Zielen des jeweiligen Projekts ergeben. Sie können dabei auch eigene Ideen mit einfließen lassen.

(Orientieren Sie sich bei der Beschreibung an den unten stehenden Anforderungskategorien)

F: Funktionale Anforderungen

Hinweise: Funktionale Anforderungen definieren die von dem Betreiber (Auftraggeber) erwarteten Systemfunktionen. Es wird festgehalten, was realisiert werden soll. Die Funktionalitäten sind zu beschreiben.

F1: Funktionalitäten des öffentlichen Bereichs

F2: Funktionalitäten des privaten Bereichs

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e59Aufgabe

S: Systembezogene Anforderungen

Hinweis: Die systembezogenen Anforderungen machen deutlich, welche Voraussetzungen hard- und softwareseitig für den Systemeinsatz gegeben sein müssen.

S1: Anforderungen an die Systemsoftware

S2: Programmiersprache

S3: Tools

Q: Qualitative Anforderungen

Hinweis: Qualitative Anforderungen spezifizieren nichtfunktionale Anforderungen wie z. B. Ausfallsicherheit, Zuverlässigkeitsanforderungen, Portabilitätsanforderungen, gewünschte Antwort- und Verarbeitungszeiten.

Q1: Nachweis der Funktionalität

Q2: Benutzerfreundliche Oberfläche

Q3: Effizienz

Q4: Wartbarkeit (Änderbarkeit)

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e60Aufgabe

P: Prozessbezogene Anforderungen

Hinweis: Prozessbezogene Anforderungen spezifizieren Anforderungen zum Entwicklungsverlauf

(Vorgehen) und zu den eingesetzten Ressourcen (MA, Kosten, in-house/outsourcing

etc.).

P1: Entwicklungsverlauf

P2: eingesetzte Ressourcen

Übersicht




Übersicht


2. Einführung in HTMLa. Grundlagen

b. HTML-Tags

c. Formulare

d. Cascading Stylesheets


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e63Einführung in HTML

Grundlagen

Hypertext Markup Language (HTML)

HTML ist eine Auszeichnungssprache (Markup Language).

Sie hat die Aufgabe mit Hilfe von HTML-Tags, logische Bestandteile eines Dokuments zu beschreiben.

Die Elemente haben jeweils einen fest definierten Erstreckungsraum.

Hypertext bedeutet, dass ein Dokument Verweise (Links) auf andere Dokumente beinhalten kann.

Der Webbrowser interpretiert die HTML-Dokumente als formatierte Webseite.

<h1> Text der Überschrift </h1>

http://de.selfhtml.org/

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Hypertext Markup Language (HTML) – Syntax

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen: Dokumenttyp-Deklaration (Angabe zur HTML-Version)

Header (Kopfdaten z. B. Angaben zu Titel der Seite)

Body (Textkörper – dargestellter Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

Außer der Dokumenttyp-Deklaration wird der gesamte Inhalt einer HTML-Datei in folgende Tags eingeschlossen:

<html>...</html>

Hinter dem einleitenden HTML-Tag folgt der Kopf der HTML-Datei, in dem die Kopfdaten festgelegt werden:

<head>...</head>

Unterhalb davon folgt der Textkörper:

<body>...</body>.

Dazwischen wird der eigentliche Inhalt der Datei notiert.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head><title>Meine erste Webseite</title></head>

<body><h2> Herzlich Willkommen zur Vorlesung </h2><h1> Web Programmierung</h1></body>

</html>

Dokumenttyp-Deklaration

Kopfdaten

Textkörper


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Kommentare:

HTML beinhaltet die Möglichkeit, an beliebigen Stellen innerhalb einer HTML-Datei Kommentare  einzufügen.

Diese werden von Web-Browsern ignoriert, d. h. bei der Präsentation nicht angezeigt.

Kommentare sind besonders sinnvoll, um den Quellcode verständlich zu gestalten und somit die Widerverwendbarkeit der Anwendung zu unterstützen.

<html><head><title>Titel der Seite</title></head><body>Meine erste Seite</body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Zur Überprüfung der Syntax können sog. HTML-Validatoren verwendet werden: Beispiel: http://www.validome.org/

http://www.validome.org/

Übersicht



b. HTML-Tags

c. Formulare



Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Überschriften:

HTML unterscheidet 6 verschiedene Überschriften, um Hierarchieverhältnisse in Dokumenten abzubilden.

<h[1|2|3|...6]> ... </h[1|2|3|...6]>

Die Nummer steht für die Überschriftenebene (1 ist die höchste Ebene, 6 die niedrigste). Dahinter folgt der Text der Überschrift.

Überschriften werden standardmäßig linksbündig ausgerichtet. Durch die Angabe von align = “left|center|right|justify“ kann die Ausrichtung auch entsprechend geändert werden.

<html><head><title> Überschriften definieren </title></head><body><h1 align = "center"> Überschrift 1. Ordnung </h1><h2 align = "right"> Überschrift 2. Ordnung </h2><h3> Überschrift 3. Ordnung </h3></body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Textabsätze:

Absätze dienen der optischen Gliederung eines Textes:

<p>...</p>

Textabsätze werden standardmäßig linksbündig ausgerichtet. Durch die Angabe von align = “left|center|right|justify“ kann die Ausrichtung auch entsprechend geändert werden.

<html><head><title>Absatz</title></head><body><h1>Textabsätze ausrichten</h1><p align="center">Dies ist ein zentrierter Absatz.</p><p align="right">Dies ist ein Absatz, der rechtsbündiger ausgerichtet ist.</p><p align="left">Dies ist ein Absatz, der linksbündig ausgerichtet ist ...</p><p align="justify">Dies ist ein Absatz, der im Blocksatz ausgerichtet ist ...</p></body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Zeilenumbruch:

Zeilenumbrüche können an einer beliebigen Stelle mit Hilfe des <br> - Tags gesetzt werden.

<html><head><title>Zeilenumbruch erzwingen</title></head><body><p>Die Veranstaltung<br><b> <i> Webprogrammierung </i> </b> <br>richtet sich an alle Studenten, die gerne eine Internetanwendung programmieren!</p></body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Listen:

Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen versehen. Dabei unterscheidet man zwischen ungeordneten und nummerierten Listen!

Die HTML-Tags

<ul> ... </ul> (ul = unordered list) oder

<ol>...</ol> (ol = ordered (nummerierte) list)

kennzeichnen eine Aufzählungsliste.

Durch <li>...</li> werden die einzelnen Punkte innerhalb der Liste (li = list item) definiert.<html> <head><title>Listen</title></head><body><ol>

<li>Vorlesung <ul>

<li>E-Commerce I </li><li>Analytisches CRM - Prozesse und Methoden</li>

</ul></li>

<li>Übung </li> </ol></body> </html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Block:

Sie können mehrere Elemente wie Text, Grafiken, Tabellen usw. in einen gemeinsamen Bereich einschließen:

<div> ... </div>

Dadurch können gemeinsame Eigenschaften (wie z. B. eine zentrierte Ausrichtung) für alle im Block enthaltenen Elemente definiert werden.

<html><head>

<title>Webseite</title></head><body>

<div align = “center“><h1> Alles ist zentriert </h1><ul> Liste<li> 1.Element </li><li> 2.Element </li></ul></div>

</body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Tabellen:

In HTML lassen sich Tabellen definieren, um Daten tabellarische darzustellen oder

Text und Grafik strukturierter am Bildschirm zu verteilen.

<table [border = 0|1|2...]> ... </table>

Das Attribut border legt die Stärke der Gitternetzes fest. Der angegebene Wert ist die Breite des Rahmens in Pixel.

<tr>...</tr> legt eine neue Tabellenzeile an (tr = table row).

Eine Tabelle kann Kopfzellen: <th>...</th> (th = table header) und

Datenzellen <td>...</td> (td = table data)

enthalten. (Der Text in Kopfzellen wird hervorgehoben)


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

<html> <head><title> Bachelor-Veranstaltungen</title></head><body><h1>Bachelor-Module</h1><table border="1"><tr><th>Modul: Datenbanken und Programmierung</th></tr><tr><td>Programmierung mit Java</td></tr><tr><td>Datenbanken mit MS Access</td></tr></body> </html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Aufgabe:

Unser Lehrstuhl bietet im Sommersemester drei Bachelor Module mit verschiedenen Veranstaltungen an. Programmieren Sie eine Internetseite, auf der die einzelnen Module und Veranstaltungen übersichtlich zusammengefasst sind. Beachten Sie dabei folgende Punkte: Der Titel der Internetseite ist der Name des Lehrstuhls.

Der Text (Bachelor Module) soll als zentrierte Überschrift gestaltet werden.

Die Tabelle soll zentriert ausgerichtet werden und einen deutlichen Rahmen haben.

Die Titel der einzelnen Module sollen hervorgehoben werden.

Überprüfen Sie den Syntax Ihres Dokuments mit Hilfe eines HTML-Validators (http://www.validome.org/).

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Aufgabe:

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Verweise:

Eine Homepage besteht typischerweise aus mehreren HTML-Dateien. Dabei unterscheidet man zwischen einer Einstiegsseite und

mehreren Themenseiten

Damit der Betrachter Verweise erkennt, sollten diese möglichst aussagekräftig benannt und grafisch hervorgehoben sein!


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Verweise:

Für Verweise in HTML gibt es das a-Element (a = anchor).

Zusätzlich ist das Attribut href erforderlich (href = hyper reference).

Per Voreinstellung werden alle Verweise im aktuellen Fenster geöffnet. Durch das Attribut target = _blank (Verweis wird in einem neuen Fenster angezeigt)

target = _self (Verweis wird in demselben Fenster angezeigt)

ist es jedoch möglich, eine „Zielfensterbasis“ anzugeben.

<a href="http://www.ku-eichstaett.de/">KU Eichstaett-Ingolstadt</a>

<a href=“./Datei.html">Datei im selben Verzeichnis</a>

<a href= http://www.ku-eichstaett.de/ target = _blank> Universität</a>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Verweise zu E-Mail-Adressen

Es kann auf jede beliebige E-Mail-Adresse ein Verweis gesetzt werden.

<a href="mailto:[email protected]">Max Mustermann</a>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Anker:

Innerhalb einer HTML-Datei können Anker definiert werden, um einen Sprung an die Ankerstelle innerhalb einer Datei zu ermöglichen.

Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt:

#anfang

<html><head><title>Anker definieren und Verweise zu Ankern</title></head><body><h1><a name="anfang">Seitenanfang</a></h1><h2> Kapitel 2</h2><p><a href="#anfang">Seitenanfang</a> </p></body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Aufgaben:

Im Sommersemester werden an unserem Lehrstuhl verschiedene Veranstaltungen angeboten. Programmieren Sie eine Internetseite, die die verschiedenen Veranstaltungen enthält und nach Vorlesung, Übung, Proseminar und Hauptseminar unterscheidet!

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Aufgaben:

Verlinken Sie die einzelnen Lehrveranstaltungen mit den jeweiligen Seiten unseres Lehrstuhls! (Achten Sie darauf, dass sich jeweils eine neue Internetseite öffnet)

Überprüfen Sie die syntaktische Korrektheit Ihrer Internetseite mit Hilfe eines HTML-Validators!

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Grafiken:

Um Grafiken in HTML-Dateien einzubinden, muss die Grafikdatei an der gewünschten Stelle im HTML-Quelltext referenziert werden.

Für Grafikreferenzen gibt es in HTML das <img>-Tag (img = image).

Mit Hilfe von Attributen können nähere Einzelheiten der Grafikreferenz festgelegt werden. Mit dem Attribut src wird die gewünschte Grafikdatei bestimmt. (Pflichtattribut)

Mit dem Attribut alt wird ein Alternativtext für den Fall festgelegt, dass die Grafik nicht angezeigt werden kann. (Pflichtattribut)

Mit den Attributen width | height geben Sie die Breite bzw. Höhe der Grafik an.

<html><head><title>Breite und Höhe von Grafiken</title></head><body><p><img src="Logo.jpg" width="50" height="83" alt="Logo"></p></body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Frames:

Mit Hilfe von Frames kann der Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufgeteilt werden.

<html><head><title>Beschreibung des Frameset-Inhalts</title></head>

<frameset ...> <frame ...> </frameset>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Frames:

Beim Definieren von Framesets wird bestimmt, wie das Anzeigefenster des Browsers in verschiedene Frame-Fenster aufgeteilt werden soll.

Im einleitenden Tag <frameset...> wird die Aufteilung festgelegt. Dabei unterscheidet man zwischen cols (Spalten) und rows (Zeilen).

Dahinter wird bestimmt, wie die Aufteilung genau aussehen soll.

Im Beispiel wird mit Hilfe von rows="20%, 80%" eine Aufteilung in zwei Zeilen erzwungen, wobei die obere Zeile 20% des Anzeigefensters in Anspruch nimmt, die untere 80%.

<frameset rows = 20%,80%> </frameset>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Frames zu einem Frameset definieren:

Mit je einem <frame>-Tag können innerhalb eines Framesets die zugehörigen Frames (frame = Rahmen) definiert werden.

Durch das Attribut src (Quelle) wird ein Verweis auf eine Datei angegeben, die den Inhalt des jeweiligen Frames enthält.<html><head><title>Frameset mit Sitemap</title></head><frameset cols=50%,50%>

<frame src="verweis.html" name="Navigation">

<frame src="startseite.html" name=“Hauptseite"></frameset></html>

<html><head><title>Navigation</title></head><body><h1>Navigation</h1><p><a href=“http://www.google.de” target="Hauptseite"><b>Googeln</a><br></p></body></html>


verweis.html

frameset.html

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


HTML-Tags

Aufgabe:

Programmieren Sie eine Internetseite, die aus zwei Frames besteht. Im linken Fenster sollen ihre Lieblingsseiten aufgelistet und verlinkt sein.

Im Hauptfenster soll die entsprechende Seite angezeigt werden!

Übersicht



b. HTML-Tags

c. Formulare



Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Allgemeines zu Formularen:

HTML stellt die Möglichkeit zur Verfügung, Formulare (wie Eingabefelder oder Auswahllisten) zu erstellen.

Formulare können eingesetzt werden, um strukturierte Auskünfte von Anwendern einzuholen,

um Anwendern das Suchen in Datenbeständen zu ermöglichen,

um Anwendern die Möglichkeit zu geben, selbst Daten für einen Datenbestand beizusteuern.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Mit <form>...</form> kann ein Formular (form = Formular) definiert werden.

Alles, was zwischen den beiden <form>-Tags steht, gehört zum Formular. Das sind hauptsächlich Elemente des Formulars wie Eingabefelder,

Auswahllisten oder

Buttons.

Im einleitenden <form>-Tag geben Sie mit dem Pflichtattribut action an, an welchen URL die Formulardaten beim Absenden des Formular übertragen werden sollen.

Der URL sollte die Adresse eines Programms auf dem Server-Rechner sein, das die Formulardaten weiterverarbeitet. Üblicherweise handelt es sich dabei um ein CGI-Script, das z.B. in PHP geschrieben wurde.

<form action=“Dateiname.php" method="get"></form>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Ein weiteres wichtiges Attribut bei der Formulardefinition ist das Attribut method. Dieses legt fest, nach welcher HTTP-Übertragungsmethode die Formulardaten an ihr Ziel gelangen. Dabei gibt es zwei mögliche Werte: method="get", hängt der Browser die Formulardaten als Parameter an die

Aufrufadresse an (diese Angabe ist nicht zwingend erforderlich, da get als Default-Einstellung definiert ist). Beachten Sie, dass die Anzahl der übergebenen Zeichen je nach Browser auf ca. 2000 limitiert sein kann. Das verarbeitende CGI-Programm kann diese als Parameter übergebene Zeichenkette auslesen und weiter verarbeiten.

method="post", überträgt der Web-Browser die Formulardaten mit einer speziellen POST-Anfrage an den Web-Server. Der Web-Server stellt die Daten dem CGI-Programm über den Standardeingabekanal zur Verfügung.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Einzeilige Eingabefelder:

<input> definiert ein einzeiliges Eingabefeld (input = Eingabe), mit folgenden Attributen: name = interner Bezeichner, damit auf die Daten des Eingabefeldes zugegriffen

werden kann

type = gibt an, um welche Eingabe es sich handelt:

input type =“text“

input type = “password“

size = legt die Anzahl der Zeichen fest.

maxlength = legt die interne Feldlänge in Zeichen fest.

value = belegt das Textfeld vor.


<form action=“..."><p>Vorname:<br><input type="text" name="vn" size="30" maxlength="30“ value=“Vorbelegter Wert“></p><p>Nachname:<br><input type=“password" name="nn" size="30“ maxlength="40"></p></form>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Mehrzeilige Eingabefelder:

< textarea> definiert ein mehrzeiliges Eingabefeld (textarea = Textbereich), mit folgenden Attributen: name = interner Bezeichner, damit auf die Daten des Eingabefeldes zugegriffen

werden kann

rows = bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen),

cols = bestimmt die Anzahl der angezeigten Spalten (cols = Spalten).


<form action=“..."><Schicken Sie uns bitte Ihr Feedback:<br>

<p><textarea name=“feedback" cols="50" rows="10"> Mehrzeiliges Textfeld </textarea>

</p></form>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Auswahllisten:

<select> definiert eine Auswahlliste, mit folgenden Attributen: name ist der interne Bezeichner, damit auf die Daten der Liste zugegriffen werden

kann.

size bestimmt die Anzeigegröße der Liste,

multiple erlaubt eine Mehrfachauswahl (optionales Attribut!)

<option>...</option> bestimmt jeweils einen Eintrag der Auswahlliste.

<option selected>...</option> selektiert einen Listeneintrag vor.

<option value = “K03“>...</option> bestimmt, dass beim Absenden des Formulars ein interner Wert übergeben wird.


<form action=“..."><p>

<select name="top5" size=“4“ multiple><option>Programmierung mit Java</option><option selected>Webprogrammierung</option><option value=“K03“>Anayltisches CRM</option>

</select></p>

</form>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Radiobuttons und Checkboxen:

Radio-Buttons werden durch <input type="radio"> definiert,

Checkboxen werden durch <input type="checkbox"> definiert.

Mit Hilfe des Attributs name können Radiobuttoms gruppiert werden. Alle Radio-Buttons mit dem gleichen Namen gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren.

Weitere mögliche Attribute: checked, value


<form action=“..."<p>Welche Vorlesung möchten Sie besuchen?</p><p>

<input type="radio" name="vl" value="v01"> Programmierung mit Java <br><input type="radio" name="vl" value="v02"> Web Programmierung <br>

</p></form>

<form action=“..."><p>Welche Vorlesung möchten Sie besuchen?</p><p>

<input type="checkbox" name="vl" value="v01" checked > Programmierung mit Java <br>

<input type="checkbox" name="vl" value="v02“> Web Programmierung <br></p>

</form>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Buttons zum Absenden oder Abbrechen:

HTML stellt zwei Standard-Buttons zur Verfügung, um Formulareingaben zu verarbeiten: <input type="submit“ value =“Absenden“> schickt die Formulardaten an die im

einleitenden <form>-Tag spezifizierte Adresse

<input type="reset" value =“Abbrechen“> bricht die Aktion ab und alle Eingaben werden gelöscht.

(Mit dem Attribut value wird die Beschriftung der Buttons festgelegt)

<form action=“..."><p>Welche Vorlesung möchten Sie besuchen?</p><p>

<input type="radio" name="vl" value="v01"> Programmierung mit Java <br><input type="radio" name="vl" value="v02"> Web Programmierung <br>

</p><input type = "submit" value ="Absenden"><input type = "reset" value ="Abbrechen"></form>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Aufgabe:

Sie haben die Aufgabe eine Anmeldeseite für den Newsletter Ihres Unternehmens zu implementieren. Als Vorlage können Sie folgende Internetseite verwenden.

Übersicht



b. HTML-Tags

c. Formulare



Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Cascading Stylesheets

Definition: Cascading Stylesheets (CSS) Cascading Style Sheets setzen das Konzept der Trennung

des Inhalts und der Struktur einer Seite von

deren Präsentation um.

CSS können auf mehrere HTML-Dateien angewandt werden, um eine einheitliche Gestaltung zu gewährleisten.

Änderungen in der Gestaltung können dadurch mit nur geringer Modifikation des CSS realisiert werden.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Formate zentral in HTML-Datei definieren Im Kopfteil der HTML-Datei <head> kann ein Bereich für CSS-Formate definiert

werden.

Dieser wird mit <style> ... </style> gekennzeichnet.

Im einleitenden <style>-Tag muss der MIME-Typ der Stylesheet-Sprache angegeben werden. Für CSS ist das die Angabe type = “text/css“

Zwischen dem einleitenden und dem abschließenden <style>-Tag können die zentralen CSS-Formate definiert werden.

<html><head><title> Seitentitel </title>

<style type = “text/css”>// Hier werden die Formate definiert!</style>

</head><body></body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Hintergrundfarben und Schriftfarben:

background-color:

Für jedes HTML-Element kann eine eigene Hintergrundfarbe definiert werden.

Farbwerte können

nach dem Schema rgb(rr,gg,bb)oder

mit ihren Namen (z. B. blue, green)

angegeben werden.

Innerhalb der Klammer müssen drei Dezimalwerte stehen. Für alle drei Werte sind absolute Zahlen zwischen 0 (kein Anteil der entsprechenden Farbe) und 255 (maximaler Anteil der entsprechenden Farbe) erlaubt.

color: Mit dieser Angabe können Schriftfarben definiert werden

<style type = "text/css">body {background-color: rgb(51,0,102)}h1 {color: black; background-color:blue}

</style>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Hintergrundfarben und Schriftfarben:


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



font-family:

Schriftarten sind z. B. Arial, Helvetica, Times Roman usw.

Mit font-family können mehrere Schriftarten definiert werden. Kann eine Schrift nicht angezeigt werden, so wird automatisch die zweite, angegebene Schriftart verwendet, usw.

<style type = "text/css">p, li {font-family:Arial, Helvetica, Times Roman}

</style>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Schriftstil und Schriftgröße:

Mit Hilfe der Angabe von font-style können verschiedene Schriftstile festgelegt werden

italic

normal

Mit Hilfe von font-size kann die Schriftgröße definiert werden. Erlaubt sind

numerische Wert (z. B. pt, px)

Prozentangaben (Die Werte beziehen sich auf die Schriftgröße des Elternelements)

Absolute Schlüsselwerte

small = klein

medium = mittel

large = groß

<style type = "text/css">p, li {font-size:200; font-style: italic}</style>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Individualformate:

Über das Universalattribut #Attributname können Formate zentral definiert werden.

Einzelne HTML-Elemente können durch Angabe id = “Attributname“ auf die Formatvorlage zugreifen.

<html><head><title></title><style type ="text/css">#Überschrift1 {font-size: 100;font-style: italic;}#Überschrift2 {font-size: 50;font-style: italic;}</style></head><body>

<h1 id="Überschrift1"> test </h1><h1 id="Überschrift2"> test </h1>

</body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Universalformate:

Um ein zentrales Format für alle HTML-Elemente zu definieren, kann der Universalselektor * angewandt werden.

<html><head>

<title></title><style type ="text/css">* {color: blue;}#Überschrift1 {font-size: 100;font-style: italic;}</style></head><body>

<h1 id="Überschrift1"> test </h1><h1> test </h1>

</body></html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e108Aufgaben

Sie haben die Aufgabe eine Startseite (startseite.html) für die Vorlesung Web Programmierung zu erstellen. Berücksichtigen Sie dabei bitte folgende Anforderungen: Der im Browser angezeigte Titel sowie die Überschrift sollen "Einführung in die

Web Programmierung" lauten.

Erstellen Sie einen Absatz, in dem die wichtigsten Informationen (Dozent, Teilnehmerzahl, etc.) übersichtlich dargestellt werden.

Verwenden Sie für die Gestaltung der Webanwendung Stylesheets.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e109Aufgaben

Erstellen Sie ein HTML Dokument (inhaltsverzeichnis.html), in dem der Inhalt der Veranstaltung Web Programmierung dargestellt wird. Listen Sie die einzelnen Modulen innerhalb einer geordneten Liste auf

Verwenden Sie innerhalb der einzelnen Module weitere ungeordnete Listen, die alle Kapitel eines Moduls auflisten.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e110Aufgaben

Erstellen Sie einen Zeitplan (zeitplan.html) der Veranstaltung. Erstellen Sie für jedes Modul eine zweispaltige Tabelle. Die erste Spalte enthält

die Kapitel eines Moduls, die zweite Spalte den Zeitplan.

Formatieren Sie jeweils die erste Zeile jeder Tabelle mit dem Modultitel als Kopfzellen, die übrigen als Datenzellen.

Die gesamten Tabellen sollen zentriert angezeigt werden.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e111Aufgaben

Erstellen Sie eine Navigationsmenü (navigation.html) für die erstellten Seiten: startseite.html

inhaltsverzeichnis.html

zeitplan.html

Berücksichtigen Sie dabei bitte folgende Punkte: Die Hintergrundfarbe soll den Wert “FFCC00“ haben.

Platzieren Sie am oberen Rand ein kleines Titelbild mit zugehörigem Alternativtext.

Darunter erstellen Sie ihre Verweise in einer ungeordneten Liste.

Als letzter Verweis soll auf eine E-Mail Adresse verlinkt werden.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e112Aufgaben

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e113Aufgaben

Erstellen Sie eine neue HTML Seite (frameset.html) mit folgenden Anforderungen: In der linken Spalte (sie soll 25% der Browserfenstergröße ausmachen) binden Sie

die vorher erstellte Navigation ein.

Die rechte Spalte soll mit der Startseite beginnen.

Die Frames dürfen keinen Rand aufweisen.

Die Verweise in der Navigation sollen jeweils im rechten Fenster angezeigt werden. (Verwenden Sie dafür das Target Attribut).

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e114Aufgaben

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e115Aufgaben

Überlegen Sie sich anhand der jeweiligen Problemstellung und dem erarbeiteten Anforderungskatalog, wie Ihre Web-Anwendung modelliert werden kann: Aus welchen Seiten soll die Anwendung bestehen?

Welche Funktionalitäten (Links/Formulare/...) soll diese enthalten?

Gestalten Sie die einzelnen Seiten Ihrer Web-Anwendung mit HTML!

Stellen Sie Ihre Ergebnisse im Rahmen einer kurzen Präsentation (ca. 10 min) in der nächsten Vorlesungseinheit vor!

Übersicht




Übersicht



3. Einführung in PHPa. Grundlagen

b. Variablen und Datentypen

c. Kontrollstrukturen

d. Funktionen

e. Formulare

f. Datenbanken unter PHP

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e118Einführung in PHP

Grundlagen

Ausführungsort

PHP ist eine serverbasierte Skriptsprache.

Beim Aufruf einer Internetseite, wird das PHP-Programm auf dem Web-Server ausgeführt – der Besucher erhält nur die Ausgabe (i. d. R. ein HTML-Dokument) zurück.

http://www.php.net/manual/de/

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Einbettung von PHP in HTML

Es gibt mehrere Möglichkeiten PHP-Programme in HTML-Dateien einzubetten: in Kurzform innerhalb einer Markierung: <?php [PHP-Anweisungen] ?>

in etwas längerer Form zwischen einer Anfangsmarkierung und einer Endmarkierung:

<script language = "php"> [PHP-Anweisungen] </script>

PHP-Programme können sowohl vollständig innerhalb des Dokument-Kopfes (head) als auch innerhalb des Dokument-Rumpfes (body) auf der HTML-Seite eingebettet werden.

<html><head><title> Meine erste Website </title><?php // Hier kann ein PHP-Programm stehen ?></head><body><?php // Hier kann ein PHP-Programm stehen ?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Das erste PHP-Programm: Ausgabe von "Hallo Welt" auf dem Bildschirm.

echo ist ein Befehl, um einen Ausdruck in Anführungszeichen am Bildschirm auszugeben.

Nach jedem PHP-Befehl kommt ein Semikolon – dadurch erkennt der PHP-Interpreter das Ende eines PHP-Befehls.

<html><head><title> Meine erste Website </title></head><body><?php echo “Herzlich Willkommen"; ?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

<html><head><title> Meine erste Website </title></head><body><?php echo "Herzlich Willkommen"; echo "zur Vorlesung";?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

<html><head><title> Meine erste Website </title></head><body><?php echo "Herzlich Willkommen”;echo “<br>";echo "zur Vorlesung";?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

PHP-Befehle wie z. B. echo “Herzlich Willkommen"; sehen die Anführungszeichen als Anfang und Ende von dem auszugebenden Bereich an.

Sollen im Beispiel „Herzlich Willkommen" Anführungszeichen vor und nach dem Satz ausgegeben werden, müssen dieses Anführungszeichen speziell geschrieben werden – man spricht von maskieren (\“...\“).

<html><head><title> Meine erste Website </title></head><body><?php echo "<p align = \"center\"> \"Herzlich Willkommen\" </p>"; ?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Bei der Verwendung von doppelten Anführungszeichen “...“ werden innerhalb der Anführungszeichen Variablen berücksichtigt und deren Inhalt ausgegeben.

Bei der Verwendung von einfachen Anführungszeichen ‘...‘ wird im Browser exakt das ausgegeben, was zwischen den Anführungsstrichen steht, ohne auf eventuell vorhandene Variablen zu achten!

<html><head><title> Meine erste Website </title></head><body><?php

$text = "Zahl:";$number = 3.9;echo "Der Wert der $text $number <br>";echo 'Der Wert der $text $number';

?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Kommentare Kommentare erleichtern die Lesbarkeit eines Programms.

PHP unterscheidet zwischen einzeiligen und mehrzeiligen Kommentaren:

Einzeilige Kommentare werden mit // eingeleitet

Mehrzeilige Kommentare werden zwischen /* und */ gestellt

Beispiel:



// mein erstes PHP Skriptecho ‘Herzlich Willkommen zur Vorlesung Webprogrammierung';/* Mehrzeiliger Kommentar*/

?></body>

</html>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

PHP bietet eine umfangreiche Beschreibung sämtlicher Funktionen etc. im Internet an. http://www.php.net/manual/de/


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

Aufgabe

Bauen Sie folgende Ausgabe mit Hilfe der Programmiersprache PHP und HTML nach.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Grundlagen

AufgabeNeben dem Befehl echo bietet PHP noch weitere Möglichkeiten, einen Ausdruck am Bildschirm auszugeben. Recherchieren Sie im Internet nach weiteren Befehlen und vergleichen Sie diese.

Übersicht






d. Funktionen

e. Formulare


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Variablen und Datentypen


Variablen dienen dazu Daten im Hauptspeicher eines Programms abzulegen und ggf. zu lesen oder zu verändern.

In PHP wird der Datentyp einer Variable nicht vom Programmierer festgelegt (Variablendeklaration), sondern richtet sich nach dem Zusammenhang, in dem die Variable genutzt wird.

Variablen sind Case-Sensitiv – es wird zwischen Groß- und Kleinschreibung unterschieden!


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Variablen und Datentypen – Definition Variablen werden definiert, indem vor ihrem Namen ein Dollarzeichen $ steht

(der Namen sollte keine Umlaute, Sonderzeichen und Leerzeichen enthalten).

Die Wertzuweisung erfolgt durch ein “=“:

Handelt es sich bei dem Inhalt um Texte, wird dieser in Anführungszeichen gesetzt.

Ist der Inhalt numerisch, wird dieser einfach angegeben.


$string = “Der Wert der Zahl ist";$number = 3.9;echo $string;echo $number;

?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Operatoren PHP unterscheidet im Wesentlichen zwischen folgenden Operatoren:

arithmetische Operatoren (+, -, *, /, %)

Zuweisungsoperatoren (=, +=, -=, ...)

Vergleichsoperatoren (>, >=, <, <=, ==, !=)

logische Operatoren (&&, ||, xor)

Verkettungsoperator . (Punkt) – dient zur Verkettung mehrerer Variablen bzw. Zeichenketten miteinander


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Berechnungen in PHP


<html><head><title> Grundrechenarten </title></head><body><?php

$a = 10;$b = 5;$add = $a + $b;$sub = $a - $b;$mult = $a * $b;$div = $a / $b;echo $add;echo "<br>";echo "$sub <br>";echo "$mult <br>";echo "$div <br>";

?></body>

</html>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Operatoren für Zeichenketten – Verkettungsoperator


$textstring = "Der Wert der Zahl ist:";$numerisch = 3.9;echo $textstring . $numerisch;

?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Array

Ein Array ist ein Datenfeld, das aus mehreren Elementen zusammengesetzt ist.

Arrays sind i. d. R. numerisch indiziert, in denen jeder Wert über eine Zahl (Schlüssel) angesprochen wird.

Ein Array kann mit Hilfe des Sprachkonstrukts

array (“Wert 1“, “Wert 2“,...)

erzeugt werden.

Beispiel:

$numerischesArray = array (“Wert1“, “Wert2“);

$vorname = array (“Max“, “Lisa “);


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e136

Array – Hinzufügen von Elementen

Um einem Array ein Element hinzuzufügen, kann folgende Notation verwendet werden:

Einführung in PHPVariablen und Datentypen

<?php$numerisch = array (1,2,3);

//Hinzufügen eines Elements$numerisch[]=4;?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Array – Zugriff auf Elemente

Bei der Initialisierung eines Arrays werden die einzelnen Elemente von 0 bis n-1 durchnummeriert.

Der Zugriff auf die einzelnen Elemente erfolgt über den Index.

<?php$numerisch = array (1,2,3);$numerisch[]=4;echo “Es wird folgende Zahl ausgegeben: $numerisch[3]“;?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Array – Funktionen

Funktion Beschreibungcount () Liefert die Anzahl der Elemente eines Arrayssort () Sortiert die einzelnen Elemente eines Arrays... ...


<?php$vorname = array ("Robert","Wolfgang");$erg = count ($vorname);echo "Das Array hat " . $erg . " Elemente";?>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Aufgabe

Programmieren Sie die dargestellte Internetseite nach. Halten Sie sich dabei an folgende Regeln: Verwenden Sie nur einmal den PHP-Befehl echo.

Ihr Name soll in den Variablen Vor- und Nachname gespeichert werden.

Der Kurstitel soll in Anführungszeichen ausgegeben werden.

Der Text soll zentriert ausgerichtet sein.

Erweiterung: Programmieren Sie eine dynamische Eingabe- und Ausgabeseite.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Aufgabe

Gegeben ist folgendes Programmstück:

Erweitern Sie das Programm, um die Funktion sort ($Liste) und geben Sie die einzelnen Elemente des Arrays mit Hilfe des echo-Befehls am Bildschirm aus.

Recherchieren Sie im Internet, welcher Sortieralgorithmus in der Funktion sort () implementiert ist?

Skizzieren Sie kurz die Funktionsweise des Algorithmus.


<?php$Liste=array(3,2,9,1);?>

Übersicht






d. Funktionen

e. Formulare


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Kontrollstrukturen

Verzweigungen:

Verzweigungen dienen in PHP dazu, bestimmte Programmteile nur beim Eintreten vorgegebener Bedingungen, die erst zur Laufzeit bekannt werden, auszuführen.

An Verzweigungen bietet PHP u. a. … … die if-Anweisung,

… die if-else-Anweisung,

… die else-if-Anweisung.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Kontrollstrukturen

if-Verzweigung

Bedingungen (wie z. B. ($a < $b) ) werden mit Hilfe von Wahrheitswerten (wahr oder falsch) und Vergleichs-Operatoren erstellt.

Mit Hilfe der logischen Operatoren && (logisches UND) bzw. || (logisches ODER)kann man mehrere Bedingungen miteinander verknüpfen.

Mit Hilfe des Operators ! (logisches NICHT) kann man den Wahrheitswert von Bedingungen umdrehen.

Anweisung kann eine einzelne Anweisung oder ein Anweisungs-Block sein.

if (boolscher Ausdruck){Anweisung;}else if (boolscher Ausdruck){Anweisung;}else {Anweisung;}


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Kontrollstrukturen

if-Verzweigung – Beispiel

<?php

//Variablendeklaration$a = 5; $b = 12;

//Kontrollstrukturif ($a < $b) { echo "$a ist kleiner als $b";} else if ($a == $b) {echo "$a ist gleich $b";}else {echo "$a ist größer $b";}

?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Kontrollstrukturen

Schleifen

Schleifen führen Anweisungen wiederholt aus, solange eine Bedingung erfüllt ist.

PHP besitzt folgende drei Schleifenanweisungen: for-Schleife (Zählschleife)

while-Schleife (abweisend)

do-Schleife (nichtabweisend)


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Kontrollstrukturen

for-Schleife

Die for-Schleife wird dazu benutzt, eine bestimmte Anzahl an Wiederholungen zu erzeugen.

Der Kopf der for-Schleife besteht aus drei Teilen: init ist eine Anweisung, in der typischerweise eine Zählvariable mit einem

Startwert initialisiert wird.

test ist Ausdruck vom Typ boolean. Der Schleifenrumpf wird solange wiederholt, wie der Ausdruck wahr (true) ist.

update ist eine Anweisung, in der typischerweise die Zählvariable erhöht oder erniedrigt wird. (z.B. $i++ oder $i-- )

Der Rumpf besteht aus einer bzw. einer Folge von Anweisungen

<?php for (init; test; update) {anweisung;}?>


<?phpfor ($a=0;$a<4;$a++){echo $a;}?>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Kontrollstrukturen

while-Schleife

Die while-Schleife (abweisende Schleife) wird dazu benutzt, eine unbestimmte Anzahl an Wiederholungen zu erzeugen.

Der Kopf besteht aus einem Ausdruck (ausdruck) muss vom Typ boolean sein.

solange der (ausdruck) den Wert true hat, wird der Rumpf ausgeführt

Der Rumpf besteht aus einer bzw. einer Folge von Anweisungen

<?php $i = 0;while ($i < 10) { echo "Zeile $i"; $i++;} ?>

<?php while (ausdruck) {anweisung;}?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Kontrollstrukturen

dowhile-Schleife

Die dowhile-Schleife ist eine nichtabweisende Schleife, d. h. die Anweisungen im Schleifenkörper werden immer mindestens einmal ausgeführt.

(ausdruck) muss vom Typ boolean sein.

Hat (ausdruck) den Wert false wird die Schleife beendet.

<?php $i = 0;do {echo "Zeile $i <p>"; $i++;} while ($i < 10)?>

<?php do {anweisung;}while (ausdruck)?>


Übersicht






d. Funktionen

e. Formulare


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

Funktionen Die Definition einer Funktion wird mit dem Schlüsselwort function

eingeleitet, gefolgt vom Funktionsnamen und einer optionalen Parameterliste.

In geschweiften Klammern folgt der eigentliche Funktions-Rumpf, der aus einer oder einer Folge von Anweisungen besteht.

Der Funktionsaufruf erfolgt durch die Angabe des Funktionsnamens und der ggf. zu übergebenden Parameterliste.

<?php function Funktionsname ([Parameterliste]) {//Funktionsrumpfanweisung;}Funktionsname ([Parameterliste]);?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

Funktionen

Man unterscheidet dabei zwischen folgenden Funktionstypen: Funktionen ohne Parameter. Diese Funktionen liefern bei jedem Aufruf immer

genau das gleiche Ergebnis

Funktionen mit einem oder mehreren Parametern. Diese Funktionen liefern bei jedem Aufruf in Abhängigkeit zu den übergebenen Parametern ein Ergebnis

<?phpfunction drucken ($String) {echo $String;}drucken ("a");?>

<?phpfunction drucken () {echo “Immer dieselbe Ausgabe“;}?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

Funktionen

Funktionen mit Rückgabewert dienen dazu, ein Ergebnis zu ermitteln und dieses an die aufrufende Stelle zurückzuliefern.

Mit Hilfe der Anweisung return wird dieser Wert an die aufrufende Stelle zurückgeliefert und kann dort weiter verarbeitet werden.

function quadrad ($wert) {

$erg = $wert * $wert;return $erg;}

$wert =3;echo "Das Quadrat von" . $wert . "ist" . quadrad ($wert);?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

Beispiel<?php

//Addition zweier Zahlen mit Rückgabewertfunction Add ($a,$b){$erg1=$a+$b;return $erg1;}

//Subtraktion zweier Zahlen mit Rückgabewertfunction Sub ($a,$b){$erg2=$a-$b;return $erg2;}

//Vergleich zweier Zahlen mit Rückgabewertfunction vgl ($erg1,$erg2){if ($erg1==$erg2){echo "Die beiden Zahlen $erg1 $erg2 sind gleich";}else {echo "Die beiden Zahlen $erg1 $erg2 sind ungleich";}}

//Methodenaufrufvgl (Add (99,1), Sub (101,1));?>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

AufgabeProgrammieren Sie ein Array $vorname, das verschiedene Vornamen enthält.

Geben Sie dieses mit Hilfe einer for-Schleife aus. Benutzen Sie die Funktion count(), um die Anzahl der Elemente innerhalb des Arrays zu

berechnen.

Für eine übersichtlichere Gestalten der Ausgabe verwenden Sie eine Tabelle.

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

Aufgabe

Wissenschaftler messen über eine Woche in Ingolstadt die durchschnittliche Temperatur und kommen zu folgenden Ergebnissen:

Montag = 12°, Dienstag = 15°, Mittwoch = 20°, Donnerstag = 10°, Freitag = 9.5°, Samstag = 7.5°, Sonntag 10°

1. Damit die gewonnenen Ergebnisse zur weiteren Betrachtung und Untersuchung zur Verfügung stehen, sollen diese in einem numerischen Array gespeichert werden.

2. Geben Sie die einzelnen Werte mit Hilfe einer while-Schleife aus!

3. Sortieren Sie die Ergebnisse mit Hilfe der Funktion sort()! Beginnen Sie bei dem kältesten Wochentag.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen


sortiert

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

Aufgabe

1. Schreiben Sie ein Programm für folgende Funktionen: Addition: add ($a, $b)

Subtraktion: sub ($a, $b)

Multiplikation: mult ($a, $b)

Division: div ($a, $b)

(! schließen Sie den Fall aus, dass durch Null geteilt wird !)

2. Testen Sie Ihr Programm mit Hilfe folgender Zahlen: $a = 10

$b = 0

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

AufgabeIn PHP kann das Datum mit Hilfe der Funktion date in verschiedenen Formaten ausgegeben werden.

Recherchieren Sie im Internet welche Parameter die Funktion dateverwendet.

Stellen Sie das Datum auf verschiedene Arten dar!

Übersicht






d. Funktionen

e. Formulare


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Bearbeitung von Formularen mit PHP

Eine besondere Stärke von PHP ist die einfache Verarbeitung und Auswertung von Formular-Inhalten.


<html> <head><title>Berechnung</title></head><body> Bitte tragen Sie zwei Zahlen ein und senden Sie das Formular ab.<br> <form action="auswertung.php" method="GET“><p> Zahl 1: <br><input type = "text" name = "z1" size="10"> </p><p> Zahl 2: <br><input type = "text" name = "z2" size="10"> </p><input type="Submit" value = "Addition" /><input type="reset" value = "zurücksetzen" /></form></body> </html>

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Bearbeitung von Formularen mit PHP Mit Hilfe der Methoder $_GET [‘Variable‘] bzw.

$_POST [‘Variable‘] können Werte übergeben werden.

In der Variablen $erg werden die zwei, durch die GET-Methode übergebenen Werte addiert und gespeichert.

<html> <head><title> Berechnung </title></head><body> <?php$z1 = $_GET['z1'];$z2 = $_GET['z2'];$erg = $z1+$z2; echo "Die Summe von $z1 und $z2 ist $erg";?></body> </html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Affenformular

Als Affenformular wird ein Programmieransatz bezeichnet, der HTML-Formulare von Webseiten verarbeitet. Hierbei befinden sich das HTML-Formular und die Gültigkeitsabfrage innerhalb eines PHP-Programms.

Im PHP-Programm werden die eingegebenen Daten, auf ihre Gültigkeit hin überprüft und bei Fehleingaben das Formular erneut angezeigt. Dabei können die Formularfelder mit den bereits zuvor eingegebenen Daten vorbelegt werden, damit der Nutzer seine Eingaben korrigieren oder ergänzen kann.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Beispiel

Programmieren Sie ein Formular, das sich beim Absenden selbst aufruft und die Eingabe wie folgt auf der Webseite ausgegeben wird.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Beispiel

<?phpecho "Sie haben folgenden Namen eingegeben: " .$_GET ['name'];echo '<html> <body><form action="Anmeldung.php" method="GET"><p>Bitte geben Sie Ihren Namen ein: <input type = "Name" name = "name"> </p><input type="Submit" name ="Button" value = "absenden" /></form></body> </html>';?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Beispiel

<?phpecho "Sie haben folgenden Namen eingegeben: " .$_GET ['name'];echo '<html> <body><form action="Anmeldung.php" method="GET"><p>Bitte geben Sie Ihren Namen ein: <input type = "Name" name = "name"> </p><input type="Submit" name ="Button" value = "absenden" /></form></body> </html>';?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Aufgabe

Erweitern Sie die Funktionalität des Programms, damit erst dann der Text „Sie haben folgenden Namen eingegeben“ erscheint, wenn man zuvor einen Namen eingegeben hat.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Aufgabe

Erweitern Sie die Funktionalität des Programms um eine Überprüfung, damit das Eingabefeld nicht leer bleibt.

<?phpif ($_GET ['name'] ==""){echo "Bitte geben Sie einen Namen ein!";echo '<html> <body><form action="anmeldung.php" method="GET"><p>Name: <input type = "Name" name = "name"> </p><input type="Submit" name ="Button" id = "Button" value = "absenden" /></form></body> </html>';}else {echo "Sie haben folgenden Namen eingegeben: " .$_GET ['name'];}?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Formulare

Aufgabe

Programmieren Sie folgende Internetseite, um die Anmeldung von Benutzern durchzuführen. Berücksichtigen Sie folgende Vorgaben: Die Benutzer müssen sowohl ihren Vor- als auch Nachnamen angeben.

Ist eines der Felder nicht ausgefüllt, kommt eine Fehlermeldung! Die Angabe des bereits ausgefüllten Feldes soll jedoch (als vorbelegter Wert) erhalten bleiben.

Übersicht






d. Funktionen

e. Formulare


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Datenbanken unter PHP

PHP stellt dem Benutzer eine komfortable Schnittstelle zum Erzeugen, Anzeigen, Ändern und Löschen von Datensätzen aus einer MySQL-Datenbank zur Verfügung (phpMyAdmin).

(eine Dokumentation von phpMyAdmin finden Sie auf der Internetseite zur Vorlesung).


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



SELECT-Anweisung:

Mit der Anweisung SELECT können Felder bestehender Tabellen abgefragt werden.

WHERE-Bedingung:

Mit Hilfe der WHERE-Bedingung können Einschränkungen vorgenommen werden.

Beispiel:

SELECT Felder FROM Tabelle;

SELECT vorname FROM student WHERE nachname =‘Mustermann’;

SELECT * FROM student WHERE nachname =‘Mustermann’;


SELECT Felder FROM Tabelle WHERE Kriterium;

vorname nachnameMax MustermannMona Lisa

student

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



INSERT INTO-Anweisung:

Mit der Anweisung INSERT INTO können Datensätze einer Tabelle hinzugefügt werden.

DELETE-Anweisung:

Mit der Anweisung DELETE können Datensätze gelöscht werden, sofern diese die im WHERE-Abschnitt angegebene Bedingung erfüllt.

Beispiel:

INSERT INTO Tabelle (Feld 1, Feld 2) VALUES (‘Wert 1’, ‘Wert 2’)


DELETE * FROM tabelle WHERE Kriterium

INSERT INTO student (nachname,vorname) VALUES (‘MAX’, ‘Mustermann’)DELETE * FROM student WHERE nachname = ‘Mustermann’

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



mysql_connect (Hostname, Benutzername und Kennwort) öffnet eine Verbindung zum MySQL-Datenbank-Server.

Falls die Verbindung erfolgreich aufgebaut wurde, so liefert die Funktion mysql_connect () eine Verbindungs-Kennung zurück (hier in der Variablen $db gespeichert). (Die Verbindungs-Kennung wird später noch benötigt, um die Verbindung wieder zu schließen)

Beispiel: Es soll vereinfachend angenommen werden, dass es sich um den Hostnamen “localhost“ handelt, den Standard-Benutzer “root“ und ein leeres Kennwort vergeben wurde.

mysql_close () schließt die Serververbindung mit der entsprechenden Verbindungskennung, die in der Variablen $db gespeichert ist.

$db = mysql_connect ("localhost", “Benutzername",“Kennwort”);

$db = mysql_connect (“localhost”, “user1”, “123456789”);

mysql_close ($db);


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



mysql_db_query (Datenbank, SQL-Anweisung) führt eine Datenbankabfrage durch.

Falls die Abfrage erfolgreich war, so liefert die Funktion eine Ergebnis-Kennung zurück (hier in der Variablen $res gespeichert). Die Ergebnis-Kennung wird anschließend benötigt, um das Ergebnis zu untersuchen. Abfrage von Datensätzen:

Es soll der Datensatz vorname der Tabelle testadressen aus der Datenbank adressen ausgegeben werden.

Einfügen von Datensätzen:

Es soll der Datensatz „Max Mustermann“ in die Tabelle testadressen der Datenbank adressen eingefügt werden.

$res = mysql_db_query("adressen", "select vorname from testadressen");

$res = mysql_db_query("adressen", “INSERT INTO testadressen (vorname, nachname) values (‘Max’, ‘Mustermann’)”);


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



mysql_fetch_array ($Ergebnis-Kennung) liefert ein Array das dem aktuellen Datensatz entspricht.

Ist das Array leer, so wird der Wert false zurückgegeben.

Beispiel:

Es sollen in einer Tabelle alle Benutzer (Vorname und Nachname) ausgegeben werden, die in der Tabelle testadressen der Datenbank adressen gespeichert sind.

$db = mysql_connect ("localhost", "root","");$res = mysql_db_query("adressen", "select vorname, nachname from testadressen");echo “<table>”;while ( $zeile = mysql_fetch_array ($res)){echo "<tr>";echo "<td>". $zeile ['vorname'] . "</td>";echo "<td>". $zeile ['nachname'] . "</td>";echo "</tr>";}echo "</table>";mysql_close ($db);


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Aufgaben

Auf der Weboberfläche von phpMyAdmin finden Sie eine Datenbank mit dem Namen Ihres Benutzernamens (z. B.web_user1). Darin ist eine Tabelle adressen gespeichert.

(1) Schreiben Sie ein Programm, das den Nachnamen aller Männer ausgibt, die mehr als 90000 Euro im Jahr verdienen.

(2) Fügen Sie in die Tabelle folgenden neuen Wert ein: Max, Mustermann


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild



Aufgaben

(3) Programmieren Sie ein Formular, das den eingetragenen Wert in die Tabelle adressen speichert (Um die Formulardaten zu extrahieren müssen benötigen Sie die Methode $_GET [‘Variable‘])


Übersicht

Backup

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Sessions unter PHP

Über die Sessions können Informationen, Daten und Zustände während einer kompletten Nutzungsdauer eines Besuchers registriert werden.

Session-Daten können z. B. dazu benutzt werden, um dem Besucher restriktiven Zugriff (nach einem Login) auf Teile einer Website zu erlauben.

Die Session-Daten werden automatisch zerstört, wenn der Browser geschlossen wird oder eine gewisse Zeit vergangen ist (meistens 180 Minuten). Es gibt auch die Möglichkeit, dass Sessions in Cookies gespeichert werden und dadurch über Tage vorgehalten werden können (Sicherheitsproblematik: Ein anderer nutzt die Webanwendung, nur weil sich der Nutzer nicht ausgeloggt hat).

PHP4 stellt mehrere Funktionen zu Sessionverwaltung zu Verfügung.

Bei Verwendung dieser Funktionen ist zu beachten, dass eine neue Session nur dann angelegt werden kann, wenn noch keine Ausgabe stattgefunden hat!


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Sessions unter PHP

session_start () initialisiert eine Sitzung und macht eventuell vorhandene Session-Variablen verfügbar.

session_destroy () veranlasst alle Variablen einer Session zu verwerfen und die Session(datei) zu löschen (z. B. Bei der Abmeldung des Benutzers).

Der Zugriff auf die verschiedenen Sessionvariablen erfolgt über ein assoziatives Array $_SESSION. Durch das Ansprechen eines Arrayelements wird die Sessionvariable angelegt.


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Sessions unter PHP

<?phpsession_start();echo "<html>";echo "<body>";$db = mysql_connect("localhost", "root", "");$erg = mysql_db_query ("adressen", "select nachname from testadressen");$nn = $_GET['vn'];while ($zeile = mysql_fetch_array ($erg)) {

if ($zeile ['nachname']== $nn) {$_SESSION['eingeloggt'] = "True";break;}else {$_SESSION['eingeloggt'] = "False";break;}}

if ($_SESSION['eingeloggt'] == "True") {echo "<h1> Herzlich willkommen $nn";}else {echo "<h1> Bitte loggen Sie sich zunächst <a href = benutzerverwaltung1.html> hier </a> ein! </h1>";}

mysql_close($db);echo "</body>";echo "</html>;?>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

Aufgabe

Gegeben sei die Variable $uhrzeit = 15.05.

Schreiben Sie ein Programm, das die aktuelle Uhrzeit mit der Variablen $uhrzeit überprüft. Überlegen Sie sich eine passende Ausgabe!

Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild


Funktionen

Datumsausgabe:

Das Datum kann in PHP in verschiedenen Formaten ausgegeben werden.

Dazu wird die Funktion date () genutzt.

Die Attribute bedeuten: d = Tag zweistellig

m = Monat als Zahl zweistellig

y = Jahr zweistellig

Y = Jahr vierstellig

<html><head><title> Meine erste Website </title></head><body><?php echo "Heute ist der " .date("d.m.Y");?></body>

</html>


Kat

holis

che

Uni

vers

ität E

ichs

tätt-

Ingo

lsta

dtLe

hrst

uhl f

ür A

BW

L un

d W

irtsc

hafts

info

rmat

ikP

rof.

Dr.

Kla

us D

. Wild

e

Documents

E-Commerce I€¦ · E-Commerce I Web Programmierung Übung SS 2011 . Übersicht 1. Einführung in die Web Programmierung 2. Einführung in HTML 3. Einführung in PHP. Katholische