Maturaausarbeitung Böröczky & Streli by Lisa Streli

Fachspezifische Themenarbeit Information & Communication Solution

Homöopathie für Tier Frau Mag. Katharina Pühringer

Mitglieder: Lisa Streli Rebeka Böröczky

1 Inhaltsverzeichnis 2

VORWORT.......................................................................................................................... 4

PERFACE ............................................................................................................................. 5

PROJEKTMANAGEMENT..................................................................................................... 6 4.1

PROJEKTDEFINITION ................................................................................................................. 6

4.1.1 4.2

Projektumfeld ............................................................................................................ 7

PROJEKTPLANUNG.................................................................................................................... 7

4.2.1

Arbeitsprotokoll ......................................................................................................... 8

4.2.2

Arbeitspakete .......................................................................................................... 10

4.2.3

Projektstrukturplan ................................................................................................. 16

4.3.1

Meilensteinplan ....................................................................................................... 17

4.3.2

Projektwürdigkeitsanalyse ...................................................................................... 19

4.3.3

Projektdurchführbarkeitsanalyse ............................................................................ 20

CORPORATE DESIGN ........................................................................................................ 21

EINFÜHRUNG IN PROGRAMME UND SPRACHEN .............................................................. 22 6.1

HTML ................................................................................................................................. 22

6.2

PHP .................................................................................................................................... 23

6.2.1

Sessions in PHP ........................................................................................................ 23

6.2.2

Entstehung von PHP ................................................................................................ 23

6.3

CSS .................................................................................................................................... 24

6.4

MYSQL ............................................................................................................................... 25

6.5

GIMP ................................................................................................................................. 26

6.6

JAVASCRIPT .......................................................................................................................... 26

LOGO ............................................................................................................................... 27

FAVICON .......................................................................................................................... 28

GRUNDGERÜST UNSERER WEBSEITE ................................................................................ 30

9.1

NAVIGATION ......................................................................................................................... 31

9.2

HEADER ............................................................................................................................... 31

UNSERE SEITEN ................................................................................................................ 32 10.1

INDEX.HTML ..................................................................................................................... 32

10.2

HOME.HTML..................................................................................................................... 33

Lisa Streli Rebeka Böröczky

Webseite von Tierärztin Mag. Katharina Pühringer

2|55

10.3

HOMOEOPATHIE.HTML ....................................................................................................... 34

10.4

ERNAEHRUNG.HTML .......................................................................................................... 35

10.5

UEBER_MICH.HTML ........................................................................................................... 36

10.6

BILDERGALERIE.PHP ........................................................................................................... 37

10.7

KONTAKT.HTML................................................................................................................. 38

GESCHÜTZTER BEREICH .................................................................................................... 39 11.1

UNSERE DATENBANK ......................................................................................................... 40

11.1.1

Anlegen der Datenbank ...................................................................................... 40

11.1.2

Tabelle anlegen................................................................................................... 40

11.1.3

Datensätze hinzufügen ....................................................................................... 42

11.2

LOGIN.PHP ....................................................................................................................... 43

11.3

CHECK.PHP ....................................................................................................................... 44

11.4

KUNDENUEBERSICHT.PHP .................................................................................................... 45

11.5

ANLEGEN.PHP ................................................................................................................... 46

11.6

ANLEGEN_DB.PHP ............................................................................................................. 47

11.7

AENDERN.PHP................................................................................................................... 48

11.8

AENDERN_DB.PHP ............................................................................................................. 49

11.9

LOESCHEN_DB.PHP ............................................................................................................ 50

11.10

LOGOUT.PHP .................................................................................................................... 51

NACHWORT ..................................................................................................................... 52

ABBILDUNGSVERZEICHNIS ............................................................................................... 53

QUELLENVERZEICHNIS ..................................................................................................... 55

Lisa Streli Rebeka Böröczky

Webseite von Tierärztin Mag. Katharina Pühringer

3|55

2 Vorwort Im

Rahmen

unseres

Ausbildungsschwerpunktes

„Information

Communication Solutions“ erarbeiteten wir für die Tierärztin Mag. Katharina Pühringer eine benutzbare und funktionierende Homepage mit dynamischer Datenbankanbindung. Die Motivation für dieses Projekt war unser Interesse an dem Thema Homöopathie für Tiere. Da noch keine Webseite vorhanden war, wünschte sich die Projektauftraggeberin Frau Pühringer eine einfache und übersichtliche Homepage um auch im Internet vertreten zu sein.

Lisa Streli Rebeka Böröczky

Webseite von Tierärztin Mag. Katharina Pühringer

4|55

3 Perface In the course of our training priority Information and Communication Solutions we had to work on a special project for the vet Katharina Pühringer. We prepared a useable and efficient homepage with dynamic database connection. The reason for our decision to make the project is that we are very interest in the topic of homeopathy for animals. Moreover, Mrs. Katharina Pühringer wanted a well structured and clear side for representation on the internet.

Lisa Streli Rebeka Böröczky

Webseite von Tierärztin Mag. Katharina Pühringer

5|55

4 Projektmanagement Projektmanagement ist ein Prozess zur Durchführung von Projekten. Es umfasst die Planung, Koordination, Kontrolle und Steuerung von Maßnahmen, die für ein Projekt wichtig sind.

Projektdefinition

Projektplanung

Projektabwicklung

Projektabschluss

Abbildung 1 Projektmanagement

4.1 Projektdefinition Voraussetzung für ein erfolgreiches Projekt ist eine eindeutige Definition der Aufgabe, welche sachlich, zeitlich und sozial abgegrenzt werden muss. Sachliche Abgrenzung Ziele: 

Fertigstellung einer benutzbaren und funktionierenden Homepage



Datenbank in Webseite einbinden



Bildergalerie erstellen



Durchführung einer Abschlusspräsentation



Zufriedene Auftraggeberin

Nicht-Ziele: 

Nicht funktionierende Webseite



Unzufriedenheit der Auftraggeberin



Unnötige Informationen

Zeitliche Abgrenzung Projektstart: 22. September 2010 Projektende: 23. März 2011

Lisa Streli Rebeka Böröczky

Webseite von Tierärztin Mag. Katharina Pühringer

6|55

Organisatorische Abgrenzung Projektauftrag: Homöopathie für Tiere Auftraggeberin: Frau Mag. Katharina Pühringer Projektleiterin: Lisa Streli Projektteammitglied: Rebeka Böröczky 4.1.1 Projektumfeld

Auftraggeberin: Mag. Katharina Pühringer

Projektumfeld:

Projektteam:



Kunden

Lisa Streli



Öffentlichkeit

Rebeka Böröczky

4.2 Projektplanung Die richtige Planung ist für jedes Projekt unumgänglich. Wird von vornherein falsch oder gar nicht geplant, kann das Projekt nicht gut durchgeführt bzw. abgewickelt werden. Als Werkzeug für die richtige und korrekte Projektplanung dienen das Arbeitsprotokoll, der Projektstrukturplan, der Meilensteinplan sowie die Projektdurchführbarkeits- und die Projektwürdigkeitsanalyse.

Lisa Streli Rebeka Böröczky

Webseite von Tierärztin Mag. Katharina Pühringer

7|55

4.2.1 Arbeitsprotokoll Datum 29. September 2010

06. Oktober 2010

13. Oktober 2010

20. Oktober 2010

27. Oktober 2010

03. November 2010

10. November 2010

17. November 2010

Beschreibung 

Projekt mit Auftraggeberin besprochen



MindMap erstellt



ER-Diagramm erstellt



Überlegungen zum Aufbau



Template ausgesucht



Template angepasst



Corporate Design überlegt



Corporate Design angepasst



Logo mit GIMP erstellt



Navigation verlinkt



Homöopathie-Seite erstellt



Kontaktseite erstellt



Tierverhalten-Seite erstellt



„Lorem Ipsum“-Texte eingefügt



CSS-Datei bearbeitet und eingebunden



Seiten an Corporate Design angepasst



Datenbank angelegt



Beispielkunden angelegt



Kundenübersicht erstellt



Funktion „Kunde löschen“ erstellt



Funktion „Kunde hinzufügen“ erstellt



Funktion „Kunde ändern“ erstellt



Funktion „Kunde ändern“ bearbeitet (hat nicht

24. November 2010

01. Dezember 2010

08.Dezember 2010

Lisa Streli Rebeka Böröczky

funktioniert) 



check.php erstellt



logout.php erstellt



neue Seiten dem Corporate Design angepasst



Überprüfung der Funktion der Seiten



Zwischenbesprechung mit Auftraggeberin

Webseite von Tierärztin Mag. Katharina Pühringer

8|55

15. Dezember 2010

22. Dezember 2010

05. Jänner 2011

12. Jänner 2011

19. Jänner 2011

26. Jänner 2011

02. Februar 2011 23. Februar 2011 09. März 2011 16. März 2011 23. März 2011

Lisa Streli Rebeka Böröczky



Texte erhalten und überarbeitet



neues Logo erstellt



Texte eingefügt



Ernährung-Seite erstellt (Tierverhalten gelöscht)



Links gesetzt



Bilder erhalten und bearbeitet



Bildergalerie erstellt



einwandfreie Funktion aller Seiten überprüft



Seiten auf Fehler durchsucht



Facharbeit begonnen



Theorie Projektmanagement



CSS-Datei geändert (Farbe der Links)



„Über mich“-Seite erstellt



Startseite erstellt



Haftungshinweis auf Kontaktseite eingefügt



Facharbeit fortgesetzt



Favicon erstellt



Nachbesprechung mit Auftraggeberin



Facharbeit fortgesetzt



Facharbeit fortgesetzt



Facharbeit fertiggestellt



Projekt beendet

Webseite von Tierärztin Mag. Katharina Pühringer

9|55

Streli ka Böröczky

4.2.2 Arbeitspakete 1. Projektmanagement AP 1.1 : Projektstart 

Zuständigkeit: Böröczky Rebeka, Streli Lisa



Zeitraum: 22.9.2010



Ressourcen: Laptop, Internet



Ziele: Projektthema aussuchen



Nichtziele: Projekt planen

AP 1.2: Brainstorming 

Zuständigkeit: Böröczky Rebeka, Streli Lisa



Zeitraum: 29.9.2010



Ressourcen: Laptop, Projektteam, MindMap, Know-how



Ziele: Ideen sammeln



Nichtziele: Ideen durchführen

AP 1.3: Projektidee vorstellen 

Zuständigkeit: Böröczky Rebeka, Streli Lisa



Zeitraum: 29.9.2010



Ressourcen: Know-how, Laptop, Power-Point, Internet



Ziele: Projekt genehmigt, Änderungen besprochen



Nichtziele: Webseite erstellen

2. Corporate Design AP 2.1: Template suchen 

Zuständigkeit: Streli Lisa



Zeitraum: 6.10.2010 – 15.10.2010



Ressourcen: Internet, Laptop, Zeit, Projektteam



Ziele: passendes Template finden



Nichtziele: Template bearbeiten

Webseite von Tierärztin Mag. Katharina Pühringer

10|55

Streli ka Böröczky

AP 2.2: Template bearbeiten 

Zuständigkeit: Streli Lisa



Zeitraum: 6.10.2010 – 15.10.2010



Ressourcen: Laptop, phase5



Ziele: ansprechendes Design, fertige CSS-Datei



Nichtziele: Inhalte hinzufügen

AP 2.3: Logo entwerfen 

Zuständigkeit: Böröczky Rebeka



Zeitraum: 15.10.2010 – 29.10.2010



Ressourcen: Laptop, Internet, GIMP, Zeit



Ziele: Logovorschläge erstellen



Nichtziele: Logo in die Webseite einbinden

3. Inhalte beschaffen AP 3.1: Texte überarbeiten 

Zuständigkeit: Böröczky Rebeka



Zeitraum: 8.12.2010 – 10.12.2010



Ressourcen: Texte, Word, Laptop, Know-how



Ziele: Texte fertiggestellt



Nichtziele: Texte in die Homepage einfügen

AP 3.2: Bilder bearbeiten 

Zuständigkeit: Böröczky Rebeka,



Zeitraum: 18.11.2010 – 25.11.2010



Ressourcen: Laptop, GIMP, Know-how



Ziele: webfähige Bilder



Nichtziele: Bilder hochladen

Webseite von Tierärztin Mag. Katharina Pühringer

11|55

Streli ka Böröczky

4. Webseite erstellen AP 4.1: Grundgerüst erstellen 

Zuständigkeit: Streli Lisa



Zeitraum: 13.10.2010



Ressourcen: Laptop, phase5, Zeit, Know-how



Ziele: funktionsfähige Navigation



Nichtziele: Einfügen der Inhalte

AP 4.2: Startseite erstellen 

Zuständigkeit: Streli Lisa



Zeitraum: 13.10.2010



Ressourcen: Laptop, phase5



Ziele: ansprechende, funktionsfähige, fertige Startseite



Nichtziele: Unterseiten erstellen

AP 4.3 Unterseiten erstellen 

Zuständigkeit: Streli Lisa



Zeitraum: 03.11.2010 – 30.11.2010



Ressourcen: Laptop, phase5, Texte, Bilder, Know-how



Ziele: Seiten verfassen, Inhalte einfügen



Nichtziele: Datenbank anbinden

5. Datenbank AP 5.1: Datenbank anlegen 

Zuständigkeit: Streli Lisa



Zeitraum: 17.11.2010



Ressourcen: Laptop, Internet, xampp, Know-how



Ziele: Datenbank erstellen, Tabelle anlagen



Nichtziele: Datensätze eingeben

Webseite von Tierärztin Mag. Katharina Pühringer

12|55

Streli ka Böröczky

AP 5.2: Daten erheben 

Zuständigkeit: Streli Lisa



Zeitraum: 17.11.2010



Ressourcen: Zeit



Ziele: vollständige Daten beschaffen



Nichtziele: Daten importieren

AP 5.3: Daten importieren 

Zuständigkeit: Streli Lisa



Zeitraum: 17.1.2011



Ressourcen: Zeit, Laptop, xampp



Ziele: Daten in der Datenbank eingegeben



Nichtziele: Datenbank in die Webseite einbinden

6. Dynamische Seiten AP 6.1: Datenbank anbinden 

Zuständigkeit: Böröczky Rebeka



Zeitraum: 10.11.2010



Ressourcen: Laptop, phase5, xampp, Know-how



Ziele: funktionsfähige Anbindung



Nichtziele: Datensätze ausgeben

AP 6.2: Datensätze ausgeben 

Zuständigkeit: Streli Lisa



Zeitraum: 10.11.2010



Ressourcen: Laptop, phase5, xampp, Know-how



Ziele: Datensätze anzeigen,



Nichtziele: Datensätze werden nicht angezeigt

Webseite von Tierärztin Mag. Katharina Pühringer

13|55

Streli ka Böröczky

AP 6.3: Funktionen erstellen 

Zuständigkeit: Streli Lisa



Zeitraum: 10.11.2010 – 24.11.2010



Ressourcen: Laptop, phase5, xampp, Know-how



Ziele: Datensätze ändern, löschen, hinzufügen



Nichtziele: Datensätze können nicht bearbeitet werden

AP 6.4: Sessions erstellen 

Zuständigkeit: Streli Lisa



Zeitraum: 24.11.2010 – 08.12.2010



Ressourcen: Laptop, phase5, xampp, Know-how



Ziele: Kundendaten sind vor unbefugten Zugriff geschützt



Nichtziele: Fremder Zugriff auf Kundendaten möglich

7. Projektabschluss AP 7.1: Kontrolle auf Fehler 

Zuständigkeit: Böröczky Rebeka, Streli Lisa



Zeitraum: 1.3.2011-4.3.2011



Ressourcen: Laptop, phase5, xampp, Seiten der Webseite



Ziele: Fehler beseitigen



Nichtziele: Inhalte hinzufügen

AP 7.2: Nachbesprechung 

Zuständigkeit: Streli Lisa



Zeitraum: 4.3.2011



Ressourcen: Laptop, fertige Webseite



Ziele: Projekt genehmigt, eventuell Änderungen vornehmen



Nichtziele: Fehler entdecken

Webseite von Tierärztin Mag. Katharina Pühringer

14|55

Streli ka Böröczky

AP 7.3: Abgabe Projekt 

Zuständigkeit: Böröczky Rebeka, Streli Lisa



Zeitraum: 23.03.2011



Ressourcen: Laptop, Projektteam



Ziele: Projekt gelungen



Nichtziele: Projekt unvollständig

AP 7.4: mündliche Präsentation  Matura 

Zuständigkeit: Böröczky Rebeka, Streli Lisa



Zeitraum: Juni 2011



Ressourcen: Präsentation, PC, Projektteam



Ziele: Matura bestanden



Nichtziele: Matura nicht bestanden

Webseite von Tierärztin Mag. Katharina Pühringer

15|55

4.2.3 Projektstrukturplan

Homöopathie für Tiere Homepage

1. Projektmanagement

2. Corporate Design

3. Inhalte beschaffen

4. Website erstellen

5. Datenbank

6. Dynamische Seiten

7. Projektabschluss

1.1 Projektstart

2.1 Template suchen

3.1 Texte überarbeiten

4.1 Grundgerüst erstellen

5.1 Datenbank anlegen

6.1 Datenbank anbinden

7.1 Kontrolle auf Fehler

1.2 Brainstorming

2.2 Template bearbeiten

3.2 Bilder bearbeiten

4.2 Startseite erstellen

5.2 Daten erheben

6.2 Datensätze ausgeben

7.2 Nachbesprechung

1.3 Projektidee vorstellen

2.3 Logo entwerfen

4.3 Unterseiten erstellen

5.3 Daten importieren

6.3 Funktionen erstellen

7.3 Abgabe des Projekts

6.4 Sessions erstellen

7.4. mündliche Präsentation

Lisa Streli Rebeka Böröczky

Webseite von Tierärztin Mag. Katharina Pühringer

16|55

4.3.1 Meilensteinplan

Ein Meilensteinplan dient der groben Terminplanung eines Projekts, wobei die Meilensteine wichtige Ereignisse der Projektdurchführung darstellen. Als Basis für die Meilensteinplanung dient der Projektstrukturplan, worin die Meilensteine auch festzuhalten sind.

Es sollen nicht zu viele Meilensteine geplant werden (ca. 8-10), sonst verlieren diese ihre strategische Bedeutung. Projektstart und Projektende sind immer Meilensteine.

PSP Code

Meilenstein

Plantermine

Ist-Termine

1.0.

Projektmanagement

1.1.

Projektstart

22. September

1.2.

Brainstorming

22. September

1.3.

Projektidee vorstellen

29. September

2.0.

Corporate Design

2.1.

Template suchen

06. Oktober

2.2.

Template bearbeiten

06.Oktober

13. Oktober

2.3.

Logo entwerfen

15.Oktober

24. November

3.0.

Inhalte beschaffen

3.1.

Texte bearbeiten

08. Dezember

15. Dezember

3.3.

Bilder bearbeiten

18. November

5. Jänner

4.0.

Website erstellen

4.1.

Grundgerüst erstellen

13. Oktober

20. Oktober

4.2.

Startseite erstellen

13. Oktober

26. Jänner

4.3.

Unterseiten erstellen

03. November

27. Oktober

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

17|55

5.0.

Datenbank

5.1.

Datenbank anlegen

17. November

10. November

5.2.

Daten erheben

17. November

10. November

5.3.

Daten importieren

17. November

10. November

6.0.

Dynamische Seiten

6.1.

Datenbank anbinden

10. November

6.2.

Datenbanksätze ausgeben

10. November

6.3.

Funktionen erstellen

10. November

17. November

6.4.

Sessions erstellen

24. November

01. Dezember

7.0.

Projektabschluss

7.1.

Kontrolle auf Fehler

01. März

12. Jänner

7.2.

Nachbesprechung

04. März

09. März

7.3.

Abgabe des Projekts

23. März

7.4

mündliche Präsentation  Matura

Juni 2011

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

18|55

4.3.2 Projektwürdigkeitsanalyse

Ausprägung Kriterium

Begründung Hoch

komplex

zieldeterminiert

neuartig

strategisch bedeutsam

ressourcenaufwendig

Version 1

Lisa Streli Rebeka Böröczky

Mittel

Niedrig



organisatorische und rechtliche Vorschriften müssen beachtet werden



Umsetzung des Projekts Schuljahr 2010/2011 Projektabschluss: 13.3.2011 Abschlusspräsentation: Diplom- und Reifeprüfung



es gab noch keine Homepage



Projektmanagement Know-How wird erweitert Programmierfähigkeiten werden erweitert

 Datum: 11. Februar 2011

Personalaufwand finanziller Aufwand: gering materieller Aufwand: Laptop, Internetzugang Erstellerin: Lisa Streli

Webseite für Mag. Katharina Pühringer

19|55

4.3.3 Projektdurchführbarkeitsanalyse Anhand der Durchführbarkeitsanalyse können wir erkennen wie viel Personal benötigt wird, welche Ausgaben geplant sind und wie lange das Projekt dauern wird.

Bereiche Personal Ressourcen

Finanzielle Ressourcen

Mögliche Fragen

Ja / Nein

Sind die notwendigen



Ressourcen vorhanden?

vorhanden

sein?

Projektleiterin, Projektmitarbeiterin Ja, da nur die Kosten

Wird das notwendige Budget

Bemerkung



für die Onlinestellung für die Projektauftraggeberin anfallen

Zeitliche

Ist das geplante Ziel

Ressourcen

erreichbar?



Abgabetermin: 23.03.2011 Personalmanagement;

Haben Know-How

wir

das

notwendige Know-How um die Webseite zu

Know-How



erstellen?

Homepage zu erstellen vorhanden; bei

Fragen

Professoren wenden

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

20|55

die

5 Corporate Design

Abbildung 2 Logo

Top Farbe: #9b5a3c CMYK: 0/42/61/39 RGB: 155/90/60

Farbe: #b1ba7b CMYK: 5/0/34/27 RGB: 177/186/123

Farbe: #ffffff CMYK: 0/0/0/0 RGB: 255/255/255 Überschrift Farbe: #809337 CMYK: 13/0/63/42 RGB: 128/147/55 Schrift: Century Gothic, 200%

Schrift Schrift: Calibri, 100% Farbe: #000000 CMYK: 0/0/0/100 RGB: 0/0/0

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

21|55

6 Einführung in Programme und Sprachen

6.1 HTML1

HTML2

ist

eine

plattformunabhängige

Beschreibungs- oder Aufzeichnungssprache (jedoch keine Programmiersprache) in der Webseiten

geschrieben

werden.

Das

Abbildung 3 HTML

jeweilige HTML-Dokument mit den Endungen .html oder .htm, das mit jedem beliebigen Texteditor erstellt werden kann, enthält den zu übertragenden Text und zusätzlich HTML-Tages zu dessen Formatierung sowie Tags zur Ausgabe von Bildern, Hyperlinks oder Formularen. Um größere Freiheiten in der optischen Gestaltung oder der Interaktivität zu erreichen, werden Skriptsprachen wie Javascript3 eingesetzt. Eine weitere Ergänzung sind die Cascading Style Sheets.4 Webbrowser

interpretieren

die

Formatierungsbefehle

des

HTML-

Dokuments und geben sie entsprechend wieder. Grundgerüst einer HTML-Seite:

Abbildung 4 HTML Grundgerüst

Hypertext Markup Language

de.wikipedia.org

siehe Seite 26

siehe Seite 24

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

22|55

6.2 PHP5

PHP

ist

eine

Programmiersprache,

die Abbildung 5 PHP

hauptsächlich für die Erstellung von dynamischen Websites und Webanwendungen verwendet wird. PHP ist nicht auf die Ausgabe von HTML beschränkt, sondern kann auch Bilder, PDF-Dateien und Flashanimationen generieren und gleichzeitig im Dateisystem speichern. PHP ist eine Open-Source-Software und zeichnet sich durch die leichte Erlernbarkeit,

die

breite

Datenbankunterstützung

und

Internet-

Protokolleinbindung aus.

Abbildung 6 PHP1

6.2.1 Sessions in PHP Sessions ermöglichen es, bestimmte Seiten vor unbefugten Zugriffen zu schützen, wie z.B.: ein Backend-Bereich. Eine einfache und effiziente Lösung bietet das Session-Handling in PHP 6.2.2 Entstehung von PHP PHP wurde 1995 von Rasmus Lerdorf entwickelt. Der Begriff stand damals noch für Personal Home Page Tools und war ursprünglich als Ersatz für eine Sammlung von Perl-Skripten6 gedacht, die Lerdorf zur Protokollierung der Zugriffe auf seinen Online-Lebenslauf geschrieben hatte. Bald schuf Lerdorf eine umfangreichere Version, in der PHP bis heute entwickelt wird. 5 6

de.wikipedia.org freie, plattformenunabhängige und interpretierte Programmiersprache

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

23|55

6.3 CSS7

CSS8 ermöglicht einfache Formatierungen von Web-Inhalten, vor allem im Zusammenhang mit HTML. Die Grundidee von CSS ist es, Layout,

Abbildung 7 CSS

Struktur und Inhalte einer Webseite zu trennen. Neben diversen Angaben zu Farben und Schriften bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen. Diese Befehle werden in einer externen Datei gespeichert, zumeist ist dies eine einfache Texteditor-Datei mit der Endung .css. CSS gilt heutzutage als Standard-Stylesheetsprache für Webseiten. Vorteile: 

schlankerer Quellcode



Webseite lässt sich einfacher aktualisieren.



gleicher

Inhalt

kann

durch

verschiedene

Stylesheets

verschiedene Endgeräte ausgegeben werden. Beispiel für CSS:

Abbildung 8 CSS-Datei 7 8

Cascading Style Sheets de.wikipedia.org

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

24|55

für

6.4 MySQL9 MySQL10

ist

ein

relationales

Datenbankverwaltungssystem,

welches

als Open-Source-Software sowie als kommerzielle

Enterpriseversion

Abbildung 9 MySQL

verfügbar ist.

Ein bevorzugtes Einsatzgebiet von MySQL ist die Datenspeicherung für Webservices. MySQL wird dabei häufig in Verbindung mit dem Webserver Apache und der Skriptsprache PHP eingesetzt.

Viele Webdienste bedienen sich dieser Architektur und betreiben je nach Größe und Bedarf eine Vielzahl MySQL-Server, über die die Zugriffe aus dem Netz abgewickelt werden. Daneben wird MySQL in vielen Produkten als eingebettetes Datenbanksystem eingesetzt.

Es wurde von der schwedischen Firma MySQL AB entwickelt, um als „Leitfaden“ für Themen rund um eine integrierte Datenbank zu dienen. Neben vielen Unix-Varianten, Mac OS X und Linux läuft MySQL auch auf Windows und ist mit mehr als 6 Millionen Installationen und über 35.000 Downloads

pro

Tag

das

populärste

Open-Source-

Datenverwaltungssystem der Welt

9 10

My Structured Query Language de.wikipedia.org

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

25|55

6.5 GIMP11 GIMP ist ein Open-Source-Programm, welches man für professionelle Bildbearbeitung und auch für Webgestaltung verwenden kann. Der Schwerpunkt der Software ist die intensive Bearbeitung einzelner Bilder, wofür vielfältige

Abbildung 10 GIMP

Effekte zur Verfügung stehen. Die erste Version wurde im Februar

1996 unter der GNU General

Public License (GPL) veröffentlicht und man kann es unter Linux, Mac und Windows nutzen12. GIMP kann verwendet werden: 

zur Erstellung von Weblayouts



zur Erstellung von Animationen



zum Öffnen und Speichern von verschiedenen Dateitypen, wie z.B.: jpg, png, gif, ics usw.



um Bilder zu generieren und vorhandene nachzuarbeiten

6.6 JavaScript13 JavaScript ist eine Plattform, die objektorientiertes Programmieren erlaubt. Es ermöglicht das Erstellen von Anwendungen und Dokumenten, die über das Internet laufen bzw. gestartet werden können. Zudem bietet es die Möglichkeit, aktiv auf Dokumente zuzugreifen und

Abbildung 11 JavaScript

diese zu lesen, zu schreiben oder zu verändern. Letztlich bildet es zusammen mit HTML und CSS die Grundlage für Dynamic HTML (DHTML) (engl. = dynamisches HTML). Zudem bietet JavaScript Zugang zu Java und kann mit diesem arbeiten oder es ausführen. 11

General Image Manipulation Program

www.gimp.org

http://www.html-world.de/program/js_1.php

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

26|55

7 Logo Da die Projektauftraggeberin mit dem bestehenden Logo nicht zufrieden war, wurde für die Homepage und etwaige Visitenkarten ein neues Logo erstellt.

Zuerst wurden sogenannte Globuli14 aus dem Internet gesucht. Danach wurde dieses kleine Bild in Form eines Medizinrades angeordnet.

Abbildung 12 Logo 1

So sah dann das fertige Rad aus: Abbildung 13 Logo 2

Als Letztes wurde nur mehr die weiße Pfote eingefügt und der Hintergrund in dem Braun des Headers eingefärbt.

eine kugelförmige Darreichungsform, die in der Alternativmedizin verwendet wird

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

27|55

8 Favicon Favicon ist die Abkürzung von favorite icon. Das bedeutet Favoriten Symbole oder Zeichen. Ein Favicon ist ein meist 16×16 Pixel kleines Bildchen. Sie können dazu verwendet werden, den Bookmark einer Internetseite mit einem individuellen Logo zu versehen.

Abbildung 14 Favicon

Favicon-Datei erstellen: Das gewünschte Bild mit GIMP öffen und auf 16x16 Pixel skalieren.

Abbildung 15 Favicon 1

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

28|55

Als Nächstes wird das Bild als favicon.ico und mit 8bit bis 24bit Farben speichern.

Abbildung 16 Favicon 2

Zum Schluss muss die Datei noch in den Head eingefügt werden:

Abbildung 17 Favicon 3

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

29|55

9 Grundgerüst unserer Webseite Grundsätzlich

haben

alle

unsere

Seiten

einen

Header,

einen

Navigationsbereich und einen Content-Bereich.

HEADER

NAVIGATION

CONTENT

Abbildung 18 Grundgerüst Webseite

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

30|55

9.1 Navigation

Hier in der Navigation gibt es eine Auflistung aller Seiten unserer Homepage.

Abbildung 19 Navigation

9.2 Header

Im Header wird festgelegt, wie die Bilder aneinandergereiht werden sollten.

Abbildung 20 Header

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

31|55

10 Unsere Seiten 10.1 index.html Frames15 teilen das Browserfenster in verschiedene Bereiche ein, in denen jeweils eine eigenständige HTML-Seite ausgeführt werden kann. Dies ist besonders geeignet zur Navigation, Bannerwerbung oder für Partnerlinks. Die Startseite hat selber keinen auszugebenden Inhalt, sondern enthält lediglich die Framedefinition. Zusätzlich können noch Angaben wie Meta Tags oder Texte für Suchmaschinen sowie weiterführende Links eingegeben werden.

Abbildung 21 index.html

: http://www.homepage-buttons.de/tools/frames-generator/index.html

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

32|55

10.2 home.html

Abbildung 22 home.html

Die Seite home.html bildet die eigentliche Startseite der Homepage. Sie ist der zentrale Ausgangspunkt für die einzelnen Unterseiten. Die Projektauftraggeberin wollte auf der Startseite keinen Text haben und bat uns Bilder einzufügen, welche sie bei der Arbeit zeigten. Unter den Bildern befindet sich ein Hyperlink, welcher auf die Seite „anmelden.php“ verweist.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

33|55

10.3 homoeopathie.html

Abbildung 23 homoeopathie.html

Die Seite Homöopathie gibt einen Überblick, was Homöopathie überhaupt ist und wie es in der Behandlung angewandt wird. Wenn der BesucherIn möchte, kann er/sie auch mehr darüber lesen. Der Link „mehr >>“ leitet ihn/sie dann auf eine identische Seite mit mehr Informationen über Homöopathie um.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

34|55

10.4 ernaehrung.html

Abbildung 24 ernaehrung.html

Auf dieser Seite finden sich alle nützlichen Links zur korrekten Tierpflege. Beispiel für einen Link:

Abbildung 25 ernaehrung.html 1

target=“_blank“ bewirkt, dass sich die Ziele der Links in einem neuen Fenster öffnen.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

35|55

10.5 ueber_mich.html

Abbildung 26 ueber_mich.html

Hier ermöglichen wir den Besuchern, die Tierärztin Mag. Pühringer ein bisschen näher kennenzulernen und ihre Beweggründe zu verstehen sich mit Homöopathie zu beschäftigen. Um den Text und das Bild zu platzieren, wurde eine Tabelle verwendet, deren Rahmen entfernt wurde.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

36|55

10.6 bildergalerie.php Die Bildergalerie zeigt einige Patienten mit ihren Besitzern und Frau Mag. Pühringer selbst bei einem Ausflug.

Abbildung 27 bildergalerie.php

Wenn man nun ein Bild anklickt, öffnet sich sie eigentliche Bildergalerie, welche mit einem Java-Script erstellt wurde.

Abbildung 28 bildergalerie.php 1

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

37|55

10.7 kontakt.html

Diese Seite beinhaltet die Kontaktinformationen von Frau Mag. Pühringer. Außerdem gibt der Haftungshinweis darüber Auskunft, dass Mag. Katharina Pühringer für den derzeitigen und zukünftigen Inhalt der gelinkten Seiten nicht verantwortlich ist.

Abbildung 29 kontakt.html

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

38|55

11 Geschützter Bereich

Abbildung 30 Login

Hier kann sich die Projektauftraggeberin Katharina Pühringer mit ihrem Benutzernamen und ihrem Passwort anmelden. So kommt sie in einen geschützten Bereich, in welchem es möglich ist die Stammkunden zu administrieren.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

39|55

11.1 Unsere Datenbank Bevor wir die dynamischen Seiten erstellen konnten, mussten wir eine Datenbank mit verschiedenen Tabellen anlegen. Dabei überlegten wir uns zuerst, wie viele und welche Tabellen benötigt werden. Wir entschieden uns für zwei Tabellen, nämlich die Tabelle „user“ und die Tabelle „kunden“. Zugangsdaten: Datenbank: d00f872f Passwort: 32AELehGafDs6CBh

11.1.1 Anlegen der Datenbank

die

Tabellen

anlegen

können, legten wir zuerst lokal mit Hilfe von MySQL eine Datenbank auf der Seite „phpMyAdmin“ an. Diese Datenbank wurde während des

Erstellens

der

genutzt.

Webseite Abbildung 31 Datenbank

11.1.2 Tabelle anlegen

Mit der Option „Neue Tabelle in Datenbank erstellen“ kann man nun eine neue Tabelle anlegen und diese benennen. Außerdem gibt man auch die benötigte Anzahl der Felder an, welche später auch noch geändert werde können, falls man zu viele oder zu wenige Felder angelegt hat.

Abbildung 32 Tabelle

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

40|55

Nun kann man die Feldnamen benennen, die Typen einstellen und die Länge des Feldes festlegen. Man kann auch eine fortlaufende Nummer für alle Datensätze benennen. Das geht ganz einfach. Bei der Option „Extras“ wird für eine fortlaufende Nummer „auto_increment“ eingestellt.

Abbildung 33 Tabelle 1

Um die Tabelle fertigzustellen, gibt es nun zwei Möglichkeiten: Die Tabelle ist fertig und wird nur mehr abgespeichert.

Abbildung 34 Datenbank 1

Man möchte speichern und noch Felder hinzufügen.

Abbildung 35 Datenbank 2

Für die einwandfreie Benutzung der Tabelle sollte noch ein Primary Key festgelegt werden. Eine fortlaufende Nummer der Datensätze eignet sich am besten für einen Primary Key.

Abbildung 36 Tabelle 2

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

41|55

Die Tabelle kann natürlich im Nachhinein noch bearbeitet oder gelöscht werden.

Abbildung 37 Datenbank 3

Die Struktur der Tabelle wird am Ende übersichtlich dargestellt und man kann die Einstellungen der einzelnen Felder auf einen Blick erkennen.

Abbildung 38 Tabelle 3

11.1.3 Datensätze hinzufügen Über die Option „Einfügen“ können nun einzelne Datensätze in die erstellte Tabelle eingegeben werden.

Abbildung 39 Kunden anlegen

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

42|55

11.2 login.php

Abbildung 40 login.php

Abbildung 41 login.php 1

Derzeit können sich nur die Projektmitarbeiter anmelden.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

43|55

11.3 check.php

Abbildung 42 check.php

Auf dieser Seite wird nun überprüft, ob das Passwort und der Benutzername richtig oder falsch sind. Ist eines oder beides falsch, wird der Satz „Benutzername und/oder Passwort falsch“ angezeigt und man wird über einen Link zurück auf die Login-Seite geschickt.

Abbildung 43 check.php 1

Sind die Eingaben richtig, wird man in den geschützten Bereich weitergeleitet.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

44|55

11.4 kundenuebersicht.php

Abbildung 44 kundenuebersicht.php

Hier kann man nun etliche verschiedene Handlungen vornehmen. Einerseits können alle Kunden16 eingesehen und bearbeitet werden. Weiteres ist es möglich Kunden zu löschen und hinzuzufügen. Auch kann man sich auf dieser Seite wieder ausloggen.

Die angezeigten Kunden dienen nur Testzwecken und sind als Beispiele anzusehen.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

45|55

11.5 anlegen.php

Auf dieser Seite kann die Auftraggeberin Mag. Katharina Pühringer nun jederzeit einen neuen Kunden anlegen.

Abbildung 45 anlegen.php

Abbildung 46 anlegen.php 1

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

46|55

11.6 anlegen_db.php

Abbildung 47 anlegen_db.php

Nachdem auf den Button „Anlegen“ gedrückt hat, gelangt man auf diese Seite. Hier werden die eingegebenen Daten in die Datenbank eingetragen und noch einmal ausgegeben. Über einen Link kommt man wieder zu Kundenübersicht.

Abbildung 48 anlegen_db.php 1

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

47|55

11.7 aendern.php

Abbildung 49 aendern.php

Auf dieser Seite ist es möglich, die Daten eines Kunden zu ändern.

Abbildung 50 aendern.php 1

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

48|55

11.8 aendern_db.php

Abbildung 51 aendern_db.php

Abbildung 52 aendern_db.php 1

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

49|55

11.9 loeschen_db.php

Abbildung 53 loeschen_db.php

Abbildung 54 loeschen_db.php 1

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

50|55

11.10 logout.php

Abbildung 55 logout.php

Nach dem Ausloggen wird man auf die logout.php umgeleitet. Auf dieser Seite wird angezeigt, dass man sich erfolgreich ausgeloggt hat. Über Link gelangt man auf die Startseite.

Abbildung 56 logout.php 1

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

51|55

12 Nachwort Nach ca. einem halben Jahr intensiver Arbeit haben wir das Projekt, eine funktionsfähige, dynamische Homepage, erfolgreich abgeschlossen.

Wie bei jedem Projekt gab es auch hier Höhen und Tiefen, ab und zu traten Fehler und Schwierigkeiten auf, welche wir aber im Team oder mit der Unterstützung unserer Lehrer nach kurzer Zeit lösen konnten. Während der Arbeit am Projekt konnten wir nicht nur unser Wissen in die Tat umsetzen, sondern auch unsere Teamfähigkeit steigern.

Grundsätzlich kamen wir mit den Arbeiten rasch voran. Nur einige Aufgaben, wie das Gestalten der dynamischen Seiten und das Erstellen der Bildergalerie, stellten sich als etwas schwieriger heraus. Durch genaues und konzentriertes Arbeiten konnten wir auch diese komplizierten Aufgaben meistern.

Im Großen und Ganzen ist unser Projekt gut gelungen und wir sind stolz auf das Resultat unserer Arbeit. Natürlich hoffen wir, dass auch die Erwartungen unserer Lehrer und der Projektauftraggeberin erfüllt wurden.

Zum Schluss möchten wir noch unseren Professoren Herrn Dipl. Ing. Adolf Selinger und Herrn Mag. Heinz Wurzinger für die tatkräftige Unterstützung danken.

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

52|55

13 Abbildungsverzeichnis Abbildung 1 Projektmanagement ..................................................................................................... 6 Abbildung 2 Logo............................................................................................................................. 21 Abbildung 4 HTML Grundgerüst ...................................................................................................... 22 Abbildung 3 HTML ........................................................................................................................... 22 Abbildung 6 PHP1 ............................................................................................................................ 23 Abbildung 5 PHP .............................................................................................................................. 23 Abbildung 7 CSS............................................................................................................................... 24 Abbildung 8 CSS-Datei ..................................................................................................................... 24 Abbildung 9 MySQL ......................................................................................................................... 25 Abbildung 10 GIMP ......................................................................................................................... 26 Abbildung 11 JavaScript .................................................................................................................. 26 Abbildung 12 Logo 1 ........................................................................................................................ 27 Abbildung 13 Logo 2 ........................................................................................................................ 27 Abbildung 14 Favicon ...................................................................................................................... 28 Abbildung 15 Favicon 1 ................................................................................................................... 28 Abbildung 16 Favicon 2 ................................................................................................................... 29 Abbildung 17 Favicon 3 ................................................................................................................... 29 Abbildung 18 Grundgerüst Webseite .............................................................................................. 30 Abbildung 19 Navigation ................................................................................................................. 31 Abbildung 20 Header....................................................................................................................... 31 Abbildung 21 index.html ................................................................................................................. 32 Abbildung 22 home.html ................................................................................................................ 33 Abbildung 23 homoeopathie.html .................................................................................................. 34 Abbildung 24 ernaehrung.html ....................................................................................................... 35 Abbildung 25 ernaehrung.html 1 .................................................................................................... 35 Abbildung 26 ueber_mich.html ...................................................................................................... 36 Abbildung 27 bildergalerie.php ....................................................................................................... 37 Abbildung 28 bildergalerie.php 1 .................................................................................................... 37 Abbildung 29 kontakt.html ............................................................................................................. 38 Abbildung 30 Login .......................................................................................................................... 39 Abbildung 31 Datenbank ................................................................................................................. 40 Abbildung 32 Tabelle ....................................................................................................................... 40 Abbildung 34 Datenbank 1 .............................................................................................................. 41 Abbildung 35 Datenbank 2 .............................................................................................................. 41

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

53|55

Abbildung 33 Tabelle 1 .................................................................................................................... 41 Abbildung 36 Tabelle 2 .................................................................................................................... 41 Abbildung 37 Datenbank 3 .............................................................................................................. 42 Abbildung 38 Tabelle 3 .................................................................................................................... 42 Abbildung 39 Kunden anlegen ........................................................................................................ 42 Abbildung 40 login.php ................................................................................................................... 43 Abbildung 41 login.php 1 ................................................................................................................ 43 Abbildung 43 check.php 1 ............................................................................................................... 44 Abbildung 42 check.php .................................................................................................................. 44 Abbildung 44 kundenuebersicht.php .............................................................................................. 45 Abbildung 45 anlegen.php .............................................................................................................. 46 Abbildung 46 anlegen.php 1 ........................................................................................................... 46 Abbildung 47 anlegen_db.php ........................................................................................................ 47 Abbildung 48 anlegen_db.php 1 ..................................................................................................... 47 Abbildung 49 aendern.php.............................................................................................................. 48 Abbildung 50 aendern.php 1 ........................................................................................................... 48 Abbildung 51 aendern_db.php ....................................................................................................... 49 Abbildung 52 aendern_db.php 1 .................................................................................................... 49 Abbildung 53 loeschen_db.php....................................................................................................... 50 Abbildung 54 loeschen_db.php 1 .................................................................................................... 50 Abbildung 55 logout.php ................................................................................................................. 51 Abbildung 56 logout.php 1 .............................................................................................................. 51

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

54|55

14 Quellenverzeichnis Schule: 

AINF-Unterlagen



ICS-Unterlagen



RM-Unteralgen

Internet: HTML, CSS, PHP, MySQL de.wikipedia.org JavaScript http://www.html-world.de/program/js_1.php GIMP www.gimp.org

Lisa Streli Rebeka Böröczky

Webseite für Mag. Katharina Pühringer

55|55