+ All Categories
Home > Documents > cooking time

cooking time

Date post: 09-Mar-2016
Category:
Upload: victoria-gottschuly
View: 221 times
Download: 1 times
Share this document with a friend
Description:
Fachspezifische Themenstellung zum Thema online Rezeptdatenbank
45
PROJEKTARBEIT FÜR DIE REIFE UND DIPLOMPRÜFUNG 2010 It’s cooking time rezepte.pannoneum.at Gottschuly & Kloibhofer
Transcript
Page 1: cooking time

PROJEKTARBEIT FÜR DIE REIFE UND DIPLOMPRÜFUNG

2010

It’s cooking time

rezepte.pannoneum.at

Gottschuly & Kloibhofer

Page 2: cooking time

I

Inhaltsverzeichnis

1 Vorwort ......................................................................................................... 1

2 Preface ......................................................................................................... 2

3 Projektmanagement ...................................................................................... 3

3.1 „Projekt“ ................................................................................................. 3

3.2 Projektmanagementprozess .................................................................. 3

3.3 Abgrenzungen im Projekt ...................................................................... 3

3.3.1 Zeitliche Abgrenzung ...................................................................... 4

3.3.2 Sachliche Abgrenzung .................................................................... 4

3.3.3 Soziale Abgrenzung ....................................................................... 4

3.4 Projektstrukturplan ................................................................................. 4

3.4.1 Unser PSP ...................................................................................... 5

3.5 Planung der Arbeitspakete..................................................................... 5

3.5.1 Einige unserer Arbeitspakete .......................................................... 6

3.6 Meilensteinplan ...................................................................................... 7

3.6.1 Unser Meilensteinplan: ................................................................... 8

3.7 Projektdokumentation ............................................................................ 8

3.7.1 Unsere Projektdokumentation ......................................................... 8

3.8 Projektauftrag ...................................................................................... 10

3.9 Abschlussprozess ................................................................................ 10

4 Grundlagen ................................................................................................. 11

4.1 HTML .................................................................................................. 11

4.1.1 Allgemeiner Aufbau ...................................................................... 11

4.1.2 HTML-Kopf ................................................................................... 13

4.1.3 HTML-Körper ................................................................................ 13

4.1.4 Steckbrief ..................................................................................... 14

4.2 CSS ..................................................................................................... 14

Page 3: cooking time

II

4.2.1 Steckbrief ..................................................................................... 15

4.3 MySQL ................................................................................................ 15

4.3.1 Geschichte ................................................................................... 15

4.3.2 Beschreibung ............................................................................... 15

4.3.3 Steckbrief ..................................................................................... 16

4.3.4 ER-Diagramm ............................................................................... 17

4.4 PHP ..................................................................................................... 17

4.4.1 Code Beispiel ............................................................................... 18

4.4.2 Funktionsweise ............................................................................. 19

4.4.3 Steckbrief ..................................................................................... 19

4.5 GIMP ................................................................................................... 20

4.5.1 Steckbrief ..................................................................................... 20

4.6 xinha .................................................................................................... 21

5 Aufbau unserer Homepage ......................................................................... 22

5.1 Unser Template ................................................................................... 22

5.1.1 das ursprüngliche Template.......................................................... 22

5.1.2 Die Umgestaltung des Templates ................................................. 23

5.1.3 Der Aufbau unseres Templates .................................................... 25

5.2 Der Inhalt unserer Homepage .............................................................. 28

5.2.1 Die Datenbank .............................................................................. 28

5.2.2 Die einzelnen Seiten ..................................................................... 29

6 Nachwort .................................................................................................... 40

7 Quellenverzeichnis ..................................................................................... 41

8 Abbildungsverzeichnis ................................................................................ 42

Page 4: cooking time

Gottschuly Victoria & Kloibhofer Carina 1/42

1 Vorwort

Als Folge der Wahl unseres Ausbildungsschwerpunktes, ICS – Information and

Communication Solutions, entschlossen wir uns als Projekt für die Reife- und

Diplomprüfung eine online Rezeptdatenbank für die Homepage des

Pannoneums, die als Unterseite der Schulhomepage gehandhabt werden sollte,

zu erstellen. Der Anstoß an dieses Projekt kam daher, dass wir selbst schon die

Erfahrungen gemacht hatten, vergeblich Rezepte auf der Schulhomepage zu

suchen.

Mit dem von uns in den letzten drei Jahren erworbenem Wissen und der Hilfe

unserer Professoren gelang es uns eine Homepage zu gestalten, die es den

Besuchern ermöglichen sollte so viele Rezepte des Pannoneums als möglich

einfach zu finden und gleichzeitig auch einige Menüvorschläge, Grundsätze der

Getränkebegleitung und der Ernährungswissenschaften einsehen zu können.

Page 5: cooking time

Gottschuly Victoria & Kloibhofer Carina 2/42

2 Preface

In order to our key course element Information and Communication Solutions we

decided to create an online recipe data base in form of a homepage which should

be integrated in the new school homepage. The reason for choosing this issue

was that we ourselves had already been looking for recipes on the school

homepage without success.

Our target was to establish a homepage which should allow the visitor to find as

many recipes as fast and as easy as possible. At the same time it should show

the user some principles of the recommendation of drinks and nutrition.

Furthermore we wanted to monitor some menu proposal for special events.

The successful accomplishment of our project was thanks to our professors and

our acquired knowledge in the last 3 years possible.

Page 6: cooking time

Gottschuly Victoria & Kloibhofer Carina 3/42

3 Projektmanagement

3.1 „Projekt“

Ein Projekt zielt auf die Lösung einer Aufgabe ab, die

konkrete Ziele verfolgt,

zeitlich begrenzt,

für die „Stammorganisation“ neuartig,

für den Regelbetrieb zu komplex,

sowie einmalig ist.

Für die Aufgabenstellung ist ein Projektteam mit einem Projekt sowie eigenen

Arbeitsmitteln notwendig.

Der hohe Aufwand bei der Planung und Abwicklung wird durch eine strikte

Zielorientierung und eine klare Planungsstruktur bewältigt.

3.2 Projektmanagementprozess

ist eine Sammlung von Werkzeugen, die es ermöglicht, eine komplexe, neuartige

und zeitlich abgegrenzte Aufgabe strukturiert zu bewältigen.

GRAFIK

3.3 Abgrenzungen im Projekt

Die Abgrenzungen werden in

zeitlicher Hinsicht (Projektstart – Projektende)

sachlicher Hinsicht (Ziele, Nicht-Ziele eines Projekts) und

sozialer Hinsicht

betrachtet.

Page 7: cooking time

Gottschuly Victoria & Kloibhofer Carina 4/42

3.3.1 Zeitliche Abgrenzung

Es wird der Starttermin festgesetzt sowie mit einem Startereignis (zB

Genehmigung des Projektantrages) gekoppelt und der Endtermin sowie das

dazugehörige Endereignis (zB Abhalten der Endpräsentation) geplant.

3.3.2 Sachliche Abgrenzung

Bei der sachlichen Abgrenzung ist zu bestimmen, was alles im Projekt „Ziele“ und

was alles „Nicht-Ziele“ sind.

Wie müssen Ziele sein?

Spezifisch (konkret formuliert)

Messbar (es muss erkennbar sein, dass die Ziele erreicht wurden)

Attraktiv (es muss sich lohnen, sich für ein Ziel zu engagieren)

Realistisch (muss im Bereich des Möglichen sein)

Terminisiert (es muss klar sein, wann die Ziele erreicht sind).

3.3.3 Soziale Abgrenzung

Sie legt die Verantwortlichkeiten im Projekt fest.

Die individuelle Rollenbildung erfolgt im Start-Prozess; es muss Konsens über

die Rollenverteilungen herrschen.

3.4 Projektstrukturplan

Im Projektstrukturplan wird der inhaltliche Ablauf des Projekts festgelegt. Dieser

dient als zentrales Planungs- und Controllinginstrument sowie für das

Projektteam eine Übersicht über das gesamte Projekt.

Im Projektstrukturplan wird als erste Phase „Projektmanagement“ eingetragen.

Als erstes Arbeitspaket ist immer der „Projektstart“ anzusetzen.

Das letzte Arbeitspaket in dieser Phase ist der Projektabschluss bzw. das

Projektende. Die einzelnen Phasen mit ihren Arbeitspaketen werden nummeriert.

Page 8: cooking time

Gottschuly Victoria & Kloibhofer Carina 5/42

3.4.1 Unser PSP

Grafik 1 - Projektstrukturplan

3.5 Planung der Arbeitspakete

Arbeitspakete sind plan- und kontrollierbare Tätigkeitsbeschreibungen, die von

einzelnen Mitarbeitern zur Bearbeitung übernommen werden. Sie sind die

Unterpunkte zu den Hauptphasen eines Projektes und geben die zu planenden

Inhalte wieder. Dabei wird festgelegt, was Inhalt des Arbeitspaketes ist, was in

dem Arbeitspaket nicht durchzuführen ist und was als Ergebnis erwartet wird.

Danach sind die einzelnen Arbeitspakte zu nummerieren.

Bei der Benennung der Arbeitspakete sind immer ein Haupt- und ein Zeitwort zu

vergeben (zB „Endfassung schreiben“), um Missverständnisse zu vermeiden.

Page 9: cooking time

Gottschuly Victoria & Kloibhofer Carina 6/42

3.5.1 Einige unserer Arbeitspakete

1.1 Template suchen

Inhalt: Ein passendes XHTML /CSS Template suchen und gemeinsam entscheiden ob es passend ist oder nicht

Nichtinhalt: Template ändern, alleine für ein Template entscheiden und nicht mit der Gruppe besprechen

Ergebnis: Man möchte ein passendes Template finden.

1.2 Template ändern

Inhalt: Template passend umgestalten, sodass es unseren Vorstellungen entspricht.

Nichtinhalt: Ein neues Template kreieren.

Ergebnis: Template passend, nach unseren Vorstellungen umgestaltet.

1.3 – Erstellen eines Banners

Inhalt: einen kreativen, zur Homepage passenden, in frischen Farben gehaltenen Banner zu erstellen

Nichtinhalt: einen fertigen Banner zu kopieren, nachzuahmen, Änderungen am Template vornehmen

Ergebnis: gelungen am 24. Oktober 2009

1.4 – Menü erstellen

Inhalt: ein kompaktes, simples, übersichtliches, sich in die Homepage perfekt integrierendes Menü zu gestalten

Nichtinhalt: unübersichtliches, unpassendes Menü

Ergebnis: perfekt integriertes Menü

2.1 – ER-Diagramm erstellen

Inhalt: mittels Dia ein korrektes ER-Diagramm erstellen

Nichtinhalt: ein fehlerhaftes, unübersichtliches ER-Diagramm, dass man nicht zur Erstellung der Datenbank verwenden kann

Ergebnis: ein passendes ER-Diagramm

2.2 – Datenbank anlegen

Inhalt: Anlegen einer mySQL Datenbak

Nichtinhalt: Tabellen anlegen, Datensätze eintragen

Ergebnis: eine angelegte Datenbank

Page 10: cooking time

Gottschuly Victoria & Kloibhofer Carina 7/42

2.5 – Kategorien ausgeben

Inhalt: die in der Datenbank eingegebenen Kategorien in Form einer Liste als Links auszugeben, beim Anklicken eine Auflistung aller in dieser Kategorie enthaltenen Rezepte.

Nichtinhalt: die Neuerstellung oder das Hinzufügen neuer Kategorien diese wurden im ER Diagramm festgelegt

Ergebnis: Arbeitspaket Anfang Dezember 2009 erfolgreich in die Tat umgesetzt

2.8 – Suchfunktion erstellen

Inhalt: eine Suchfunktion zu kreieren, die es den Besuchern erlaubt schnell bestimmte Rezepte zu finden; in Form von einer SQL Abfrage durchzuführen

Nichtinhalt: ein fertiges Skript aus dem Internet abzuändern

Ergebnis: am 18. Februar 2010 erfolgreich in die Homepage integriert

3.1 – Ideen holen von anderen Seiten

Inhalt: Ideen und Anregungen für den Inhalt unserer Seite suchen, nur für den Inhalt

Nichtinhalt: Ideen für das Design

Ergebnis: Anregungen, welche wir für den Inhalt unserer Seite nützlich verwenden können z.B. Was schreibe ich auf die Startseite?

3.6 Meilensteinplan

Ein Meilensteinplan dient der groben Terminplanung eines Projekts, wobei die

Meilensteine zentrale wichtige Ereignisse im Rahmen der Projektdurchführung

darstellen.

Als Basis für die Meilensteinplanung dient der Projektstrukturplan, worin diese

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.

Meilensteine sind keine zu lösende Aufgaben, sondern stellen Zeitpunkte dar, die

mit keinem Aufwand verbunden sind. Ist ein Termin laut Meilensteinplan nicht zu

halten, so muss er im aktuellen Plan geändert werden. Der Endtermin ist jedoch

einzuhalten. Es ist auch möglich, die Meilensteinplanung vom Ende her zu

Page 11: cooking time

Gottschuly Victoria & Kloibhofer Carina 8/42

beginnen, wenn es sich um einen fixen Termin handelt (zB. Schulball,

Faschingsfest etc.).

3.6.1 Unser Meilensteinplan:

Meilensteinplan

PSP

Code

Meilenstein Plantermine Ist-Termine

1.3 Banner erstellt 22. Oktober 2009 24. Oktober 2009

1.2 Template geändert 22. Oktober 2009 22. Oktober 2009

2.1 ER Diagramm erstellt 29. Oktober 2009 29. Oktober 2009

2.3 Tabellen angelegt 29 . Oktober 2009 5. November 2009

3.1 Testrezepte angelegt 29. Oktober 2009 5. November 2009

2.6 Login-Funktion angelegt 18. Dezember 2009 4. Dezember 2009

2.7 Rezepte angelegt/ geändert 30. Jänner 2010 5. Februar

2.7 Suchfunktion erstellt 25. Februar 2010 18.Februar 2009

Version: 3 11. Februar

2009

Gottschuly & Kloibhofer

3.7 Projektdokumentation

Während des gesamten Projekts werden die einzelnen Schritte genau im

Projekthandbuch dokumentiert.

3.7.1 Unsere Projektdokumentation

22.Oktober 2009

Template ändern

Banner erstellen

Page 12: cooking time

Gottschuly Victoria & Kloibhofer Carina 9/42

29.Oktober 2009

ER-Diagramm erstellen

Überlegen von wo und wem Rezepte!?

5. November 2009:

Ideeneinholung von anderen Webseiten

Tabellen anlegen

Testrezepte anlegen

12. November 2009:

Ausflug nach Mauthausen Ausfall

19.November 2009:

Datenbank anlegen

Musterdatensatz eingeben

Datenbankanknüpfung herstellen

26.November 2009

Nichts am Projekt gearbeitet Theorieunterricht

3.Dezember 2009

Template überarbeiten

Loginfunktion

17. Dezember 2009

ICS-Schularbeit

14.Jänner 2010

Weinempfehlungsseite

Einzelnen Seiten verlinken

21.Jänner 2010

Projektmanagement – Theorie

Meilensteinplan

Arbeitspakete

28.Jänner 2010

Fehler beheben

Formatierungsfehler

18.Februar 2010

Menüvorschläge

Suchfunktion

Page 13: cooking time

Gottschuly Victoria & Kloibhofer Carina 10/42

Login – Passwort

25.Februar 2010

Anlegen neuer Tabelle „menuevorschlag“

o Felder: id, rezeptnr, menue

Grundgerüst Menüvorschläge

4. März 2010

eingeben der Datensätze – Menüvorschläge

Rezepte den Menüvorschlägen zuweisen

11. März 2010

ausbessern der falschen Anzeige der Menüvorschläge (fasche

Reihenfolge)

18. März 2010

Homepage fertig gestellt

3.8 Projektauftrag

Mit den bisherigen Planungsarbeiten wurde die Startphase beendet. Im

Projektauftrag werden die wesentlichen Eckpunkte des Projekts beschrieben, wie

die Abgrenzungen, die Kontextbildungen, die Projektorganisation, die Phasen

des Projekts sowie die benötigten Ressourcen.

Er ist Teil des Projekthandbuchs und wird gemeinsam zwischen Projektleiter und

Projektauftraggeber vereinbart und von beiden unterschrieben. Dies bedeutet ein

eindeutiges „Commitment“ zum Projekt und ermöglicht klare Vereinbarungen

hinsichtlich zielorientierten Handelns.

3.9 Abschlussprozess

Obwohl das Projekt inhaltlich abgeschlossen ist, ist es dennoch noch nicht

beendet. Beim Abschlussprozess werden die formale Abnahme des Projekts, das

Lernen aus dem Projektverlauf sowie die Durchführung der Restarbeiten (zB

Dokumentation) geregelt.

Page 14: cooking time

Gottschuly Victoria & Kloibhofer Carina 11/42

4 Grundlagen

4.1 HTML

HTML1 ist eine textbasierte zur Strukturierung von Inhalten wie Texten, Bildern

und Hyperlinks in Dokumenten. HTML2-Dokumente sind die Grundlage des

World Wide Web und werden von einem Webbrowser (Mozilla Firefox, Opera,

Chrome, Safari, Internet Explorer, …) dargestellt. Neben den vom Browser

angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form

von Metainformationen3, die z. B. über die im Text verwendete Sprache oder den

Autor Auskunft geben oder den Inhalt des Textes zusammenfassen. Die

Auszeichnungssprache wird vom World Wide Web Consortium (W3C)

weiterentwickelt. Außerdem existiert die Extensible Hypertext Markup Language

(XHTML).

4.1.1 Allgemeiner Aufbau

Ein HTML-Dokument besteht aus drei Bereichen:

Doctype: Dokumentendeklaration ganz am Anfang der Datei, die die

verwendete Dokumentendefinition angibt.

Head: HTML-Kopf, der hauptsächlich technische oder dokumentarische

Informationen enthält, die üblicherweise nicht im Anzeigebereich des

Browsers dargestellt werden.

Body: HTML – Körper, der jene Informationen enthält, die normalerweise

im Anzeigebereich des Browsers zu sehen sind.

1 http://de.wikipedia.org/wiki/Hypertext_Markup_Language

2 Hypertext Markup Language (HTML, dt. Hypertext-Auszeichnungssprache)

3Sind Daten, die Informationen über andere Daten enthalten.

Grafik 2 - HTML

Page 15: cooking time

Gottschuly Victoria & Kloibhofer Carina 12/42

Somit sieht die Grundstruktur einer Webseite wie folgt aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//DE"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>

Titel der Webseite

</title>

<!-- Evtl. weitere Kopfinformationen -->

</head>

<body>

Inhalt der Webseite

</body>

</html>

Page 16: cooking time

Gottschuly Victoria & Kloibhofer Carina 13/42

4.1.2 HTML-Kopf

Im Kopf können sieben verschiedene Elemente angewandt werden:

title …

… bezeichnet den Titel der Seite, der von den meisten Browsern in der

Titelleiste angezeigt wird.

meta …

… kann vielfältige Metadaten enthalten.

base …

… gibt entweder eine Basis-URI oder einen Basisframe an.

link …

… dient zur Angabe von logischen Beziehungen zu anderen

Ressourcen. Am häufigsten zur Einbindung von Stylesheets benutzt.

script …

… bindet Code in einer bestimmten Skriptsprache ein, hauptsächlich

JavaScript.

style …

… enthält Stilinformationen, hauptsächlich CSS-Deklarationen.

object …

… bindet eine externe Datei ein.

4.1.3 HTML-Körper

HTML unterscheidet zwischen Block- und Inline-Elementen. Der wesentliche

Unterschied ist, dass erstere in der Ausgabe einen eigenen Block erzeugen, in

dem der Inhalt untergebracht wird, während die Inline-Elemente den Textfluss

nicht unterbrechen – dabei sei gesagt, dass einige Elemente mit Hilfe von CSS in

das andere Format transformiert werden können. Zu den Block-Elementen

gehören z. B. die Überschriften und die Tabellen.

Page 17: cooking time

Gottschuly Victoria & Kloibhofer Carina 14/42

4.1.4 Steckbrief

Dateiendung .html, .htm

MIME-Type text/html

Entwickelt von World Wide Web Consortium

Art Auszeichnungssprache

Container für SGML

Erweitert zu XHTML

Standard(s): W3C HTML 4.01 W3C HTML

3.2

4.2 CSS

Cascading Style Sheets4 ist eine deklarative Stylesheet-Sprache für

strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML

eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder

Bereich dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu

gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als

derselben Klasse angehörend erkannt werden können. Man zeichnet im HTML-

Dokument also nur die Bedeutung einzelner Abschnitte aus, während das

Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. Mit

anderen Worten, man trennt den Inhalt von der optischen Gestaltung.

Neben diversen Angaben zu Farben und Schriften bietet CSS die Möglichkeit,

Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

CSS gilt heutzutage als die Standard-Stylesheetsprache für Webseiten.

4 http://de.wikipedia.org/wiki/Cascading_Style_Sheets

Grafik 4 - CSS

Grafik 3 - HTML Steckbrief

Page 18: cooking time

Gottschuly Victoria & Kloibhofer Carina 15/42

4.2.1 Steckbrief

Dateiendung . css

MIME-Type text/css

Entwickelt von World Wide Web Consortium

Art Stylesheet-Sprache

Standard(s): Level 1 (Recommendation)

Level 2 (Recommendation)

Level 2 Revision 1

(Candidate

Recommendation)

4.3 MySQL

Der MySQL5 Server ist ein relationales Datenbankverwaltungssystem. Es ist als

Open-Source-Software sowie als kommerzielle Enterpriseversion für

verschiedene Betriebssysteme verfügbar und bildet die Grundlage für viele

dynamische Webauftritte.

4.3.1 Geschichte

Ursprünglich wurde MySQL Server vom schwedischen Unternehmen MySQL AB

entwickelt. Im Februar 2008 wurde MySQL AB von Sun Microsystems

übernommen, das nun für die Weiterentwicklung des Codes verantwortlich ist. Im

Januar 2010 hat Oracle Sun Microsystems übernommen, wodurch MySQL

Eigentum eines der größten Anbieter von kommerziellen Datenbanken wurde.

4.3.2 Beschreibung

MySQL Server ist eine freie Software, die unter der General Public License

(GPL) steht. Da MySQL AB/Sun das volle Copyright an den Quellcodes besitzen,

ist die Software alternativ auch unter einer kommerziellen Lizenz verfügbar

(Duales Lizenzsystem).

5 http://de.wikipedia.org/wiki/Mysql

Grafik 5 - CSS Steckbrief

Grafik 6 - MySQl

Page 19: cooking time

Gottschuly Victoria & Kloibhofer Carina 16/42

Die Herkunft des Namens MySQL kann heute nicht mehr genau rekonstruiert

werden. Seit 1996 wurden diverse Bibliotheken und Tools mit dem Präfix My

geschrieben. Es wird spekuliert, dass der Name My der Tochter des

Mitbegründers Michael Widenius vielleicht auch der Ursprung des Namens

MySQL sein könnte, sowie SQL als Kürzel für Structured Query Language –

Strukturierte Abfragesprache.

Neben vielen Unix-Varianten, Mac OS X und Linux läuft MySQL auch auf

Windows, OS/2 und i5/OS (ehemals OS/400). Seit Anfang 2008 gibt es auch eine

Symbian-Variante. Für Windows werden allerdings einige Einschränkungen

genannt.

Einer Datenbankmanagementsystem-Engine können mehrere Datenbanken

zugeordnet werden. In einer Datenbank können mehrere Tabellen angelegt

werden. Die Tabellen können von unterschiedlichem Typ sein. Die maximale

Größe der Tabellen wird im Prinzip nur durch das Betriebssystem limitiert.

Ein bevorzugtes Einsatzgebiet von MySQL ist die Datenspeicherung für

Webservices. MySQL wird häufig in Verbindung mit dem Webserver Apache und

PHP6 eingesetzt. Viele Webdienste bedienen sich dieser Architektur. Sie

betreiben mehrere hundert MySQL-Server, über die die Zugriffe aus dem Netz

abgewickelt werden.

4.3.3 Steckbrief

Entwickler: Oracle Corporation (bis Februar 2008: MySQL AB, bis

Januar 2010: Sun Microsystems

Aktuelle Version: 5.1.44 (Community Server) (16. Dezember 2009)

Betriebssystem: Unix, Linux, Windows, Mac OS X, i5/OS, OpenVMS

Programmiersprache: C, C++

Kategorie: Datenbankmanagementsystem

Lizenz: Duales Lizenzsystem (Proprietär und GPL )

Deutschsprachig: ja (partiell, z. B. Fehlermeldungen und grafische Tools)

6 Ist eine serverseitige Skriptsprache, wird entweder in HTML eingebettet oder per

Konsole aufgerufen.

Page 20: cooking time

Gottschuly Victoria & Kloibhofer Carina 17/42

4.3.4 ER-Diagramm

Das Entity-Relationship-Modell, kurz ER-Modell oder ERM, deutsch

Gegenstands-Beziehungs-Modell, dient dazu, im Rahmen der semantischen

Datenmodellierung einen Ausschnitt der realen Welt zu beschreiben. Das ER-

Modell besteht aus einer Grafik und einer Beschreibung der darin verwendeten

Elemente, wobei Dateninhalte (d.h. die Bedeutung bzw. Semantik der Daten) und

Datenstrukturen dargestellt werden.

4.3.4.1 Unser ER-Diagramm

4.4 PHP

PHP7 ist eine Skriptsprache mit einer an C angelehnten Syntax, die

hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen

verwendet wird. PHP 8wird als freie Software unter der PHP-Lizenz verbreitet.

7 http://de.wikipedia.org/wiki/Php

Grafik 7 - ER-Diagramm

Grafik 8 -PHP

Page 21: cooking time

Gottschuly Victoria & Kloibhofer Carina 18/42

4.4.1 Code Beispiel

<?php

echo "Hallo Welt!";

?>

Das Skript in HTML integriert (gibt ebenfalls „Hallo Welt!“ auf der Webseite aus):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Hallo-Welt-Beispiel</title>

</head>

<body>

<?php

echo "Hallo Welt!";

?>

</body>

</html>

8 Ist ein rekursives Akronym für „PHP: Hypertext Preprocessor“, Backronym aus

„Personal Home Page Tools“.

Page 23: cooking time

Gottschuly Victoria & Kloibhofer Carina 20/42

4.5 GIMP

GIMP9 ist ein kostenloses und freies Bildbearbeitungsprogramm. Es steht unter

der GNU General Public License (GPL).

Der Schwerpunkt der Software ist die intensive Bearbeitung einzelner Bilder,

wofür vielfältige Effekte zur Verfügung stehen. Neben der Version für GNU/Linux

und Unix existieren auch Portierungen auf Microsoft Windows und Mac OS X.

4.5.1 Steckbrief

Entwickler: Das GIMP-Team

Aktuelle Version: 2.6.8 (10. Dezember 2009)

Betriebssystem: Linux, Mac OS X, Windows

Programmiersprache: C

Kategorie: Grafik-Software

Lizenz: GPL Deutschsprachig: ja

9http://de.wikipedia.org/wiki/Gimp

GNU Image Manipulation Program, ursprünglich: General Image Manipulation

Program

Grafik 10 - Gimp

Page 24: cooking time

Gottschuly Victoria & Kloibhofer Carina 21/42

4.6 xinha

Xinha10 (ausgesprochen wie Xena, die Kriegerprinzessin) ist ein

Open Source Online HTML Editor. Ist ein in allen aktuellen Browsern

funktionierender Editor, der leicht zu konfigurieren und wenn benötigt auch zu

erweitern ist. Das heißt, xinha kann von einem kleinen Editor, nur für die Eingabe

eines Felds einer Datenbank bis zu einem vollständigen Websiteeditor ausgebaut

werden.

Xinha ist frei zu erwerben und seine BSD-Lizenz macht ihn ideal zum integrieren

in jedes Projekt.

Xinha ist ein ernst zu nehmender Open Source Editor, es gibt keine Firma, die

den Quellcode von Xinha besitzt, sondern nur einen Zusammenschluss von

Fachleuten, die es als Ziel haben Xinha immer mehr zu optimieren.

10

http://xinha.webfactional.com/

Grafik 11 - xinha

Page 25: cooking time

Gottschuly Victoria & Kloibhofer Carina 22/42

5 Aufbau unserer Homepage

5.1 Unser Template

5.1.1 das ursprüngliche Template

Das ursprüngliche Template, das wir als Design für unsere Homepage gewählt

haben, stammt von der Seite http://www.freewebtemplates.com und ist ein x-html

Template. Wir haben uns für das Template „Beehives“ entschieden, da uns die

gerade Linienführung und die klare Struktur überzeugt hat.

Grafik 12 - Beehives Template

Page 26: cooking time

Gottschuly Victoria & Kloibhofer Carina 23/42

5.1.2 Die Umgestaltung des Templates

Wir fangen damit an verschiedene Farben auszuprobieren. Nach einigen

Versuchen wurde uns klar, dass wir auf jeden Fall Farben verwenden wollten, die

man automatisch mit Frische und gesunder Ernährung verbindet,

gewissermaßen ein Cooperate Design. So entscheiden wir uns für die

Hauptfarben grün und orange. Die genaue Farbgestaltung und das Erstellen des

Banners gelangen uns mit dem Programm „Gimp“.

Für den Banner selbst hatten wir drei, von uns selbst gestaltete Vorschläge in die

engere Auswahl gezogen.

Grafik 13 - Bannerversuch 1

Grafik 14 - Bannerversuch 2

Grafik 15 - Bannerversuch 3

Page 27: cooking time

Gottschuly Victoria & Kloibhofer Carina 24/42

Wir entschlossen uns schlussendlich für unseren zweiten Entwurf, da dieser auch

am besten in unser „Frischekonzept“ passte. Diesen zweiten Banner haben wir in

mühsamer Kleinarbeit aus lauter einzelnen Bildern zusammengestellt und auch

die Wassertropfen entstammen einer Eigenkreation.

Die Umgestaltung des Templates viel uns glücklicherweise leicht und schon in

wenigen Stunden hatten wir unser fertiges Design. So wurde eine inhaltlich leere,

aber vom Design schon ausgereifte Seite vorläufig online gestellt.

Grafik 16 –fertiges Template

Page 28: cooking time

Gottschuly Victoria & Kloibhofer Carina 25/42

5.1.3 Der Aufbau unseres Templates

Unser Template wird mit Hilfe der .css Datei „style.css“ formatiert.

Grafik 17 - Template-Erklärung

5.1.3.1 „header“

In dem Header selbst ist der Banner und der Homebutton (It‘s cooking time – als

H1 formatiert) mit den verschiedenen Effekten als Link definiert. Ebenso werden

hier die Einstellungen für den Hintergrund (Banner) definiert.

#header {

height: 160px;

background:#554d42

url(images/banner.png)no-

repeat;}

#header h1 {

font-size: 50px;

letter-spacing: -2px;

padding: 17px 0 0 10px;

color: #8fca2b;}

header

right left

menu

#header h1 a {

color: #8fca2b;

text-decoration: none;

font-weight: 600;

letter-spacing: -2px;}

#header h1 a:hover {

color: #e7a327;}

Page 29: cooking time

Gottschuly Victoria & Kloibhofer Carina 26/42

5.1.3.2 „menu“

Das Menü ist ebenfalls über die css-Datei definiert, in Form einer normalen

Aufzählung (ul). Um eine Zentrierung zu erreichen ist die Aufzählung mit einem

Abstand von links und rechts genauerdefiniert worden. Die Farben der einzelnen

Menüpunkte wurden auch in der css-Datei bestimmt (normal, hover)

5.1.3.3 „left“

In der Klasse „left“ werden bei uns alle Kategorien ausgegeben, und diese sind

auch auf jeder Seite ersichtlich, sozusagen als Seitennavigation.

.left {float: left;

width: 160px;

padding-top: 10px;}

.left h2 {margin: 10px 0 0 0;

padding-left: 10px;

height: 18px;

line-height: 18px;

font-size: 14px;

color: #e7a327;}

.left ul {padding: 10px 0 15px

30px;

list-style-type: circle;

color: #8fca2b;

font-size: 12px;}

.left ul li a {

text-decoration: none;

font-weight: 600;

color:#8fca2b;}

.left ul li a:hover {

color: #e7a327;

text-decoration: none;}

Page 30: cooking time

Gottschuly Victoria & Kloibhofer Carina 27/42

5.1.3.4 „right“

Diese Klasse ist als „content“ definiert und hat zusätzlich noch die Unterklasse

„right“. In diesem Feld wird der gesamte Inhalt unserer Homepage dargestellt.

Hier sind zum Beispiel die Schriftart, Schriftfarbe, Abstand, etc. genau definiert.

Page 31: cooking time

Gottschuly Victoria & Kloibhofer Carina 28/42

5.2 Der Inhalt unserer Homepage

5.2.1 Die Datenbank

Die ersten Schritte für den Inhalt unseres Projekts waren die Erstellung eines ER-

Diagramms und anschließend die darauffolgende Erstellung der Datenbank, mit

den drei Haupttabellen „rezepte“, „kategorie“ und „autor“. Die Datenbank wurde

von uns mit Hilfe von phpMyAdmin direkt am Schulserver erstellt.

Grafik 18 - Datenbank

Bevor wir den Inhalt und die Funktionen unsere Homepage in das schon fertige

Template eingebunden haben, entschlossen wir uns dazu diese in der

Rohversion zu testen.

Grafik 19 - Rohversion index.php

Page 32: cooking time

Gottschuly Victoria & Kloibhofer Carina 29/42

5.2.1.1 Eine Datenbankanbindung

5.2.2 Die einzelnen Seiten

5.2.2.1 index.php & search.php

Grafik 20 - index.php

Wir haben uns dazu entschlossen auf unserer Startseite auch gleich eine

Suchfunktion zu integrieren. Das haben wir mit Hilfe einer einfachen MySql-

Page 33: cooking time

Gottschuly Victoria & Kloibhofer Carina 30/42

Abrage der benötigten Felder in der Datenbank gestaltet. Nach Eingabe des

Suchbegriffs wird man auf die Seite search.php weitergeleitet, wo die Treffer in

Form der Rezeptnamen angegeben werden.

Grafik 21 - search.php

Page 34: cooking time

Gottschuly Victoria & Kloibhofer Carina 31/42

5.2.2.2 rezeptuebersicht.php

Grafik 22 - rezeptuebersicht.php

Hier werden alle Kategorien aufgelistet und beim Anklicken der jeweiligen

Kategorie die passenden Rezepte ausgegeben. Hier haben wir uns entschlossen

auf der linken Seite nicht noch einmal alle Kategorien aufzulisten, sondern hier

einige Tipps für eine gesunde und ausgewogene Ernährung hineinzuschreiben.

Page 35: cooking time

Gottschuly Victoria & Kloibhofer Carina 32/42

5.2.2.3 kategoriedetail.php & rezeptdetail.php

Grafik 23 - kategoriedetail.php

Auf der Seite kategoriedetail.php werden alle Rezepte der jeweiligen Kategorie

aufgelistet.

Page 36: cooking time

Gottschuly Victoria & Kloibhofer Carina 33/42

Grafik 24 - rezeptdetail.php

Auf der Seite rezeptdetail.php werden die Zutaten, die Zubereitung und die

Zubereitungsdauer für jedes bereits in die Datenbank eingegeben Rezept

ausgegeben.

Page 37: cooking time

Gottschuly Victoria & Kloibhofer Carina 34/42

5.2.2.4 menues.php & menuedetail.php

Grafik 25 - menues.php

Ebenfalls wollten wir für die Besucher unserer Seite schon von uns angelegte

Menüs für besondere Gelegenheiten anbieten, diese haben wir in verschiedene

Kategorien unterteil:

Herbstmenü

Frühlingsmenü

zeitloses Menü

Festtagsmenü

Page 38: cooking time

Gottschuly Victoria & Kloibhofer Carina 35/42

Grafik 26 - menuedetail.php

Auf der menuedetail.php sind dann die, in die Menüvorschlagskategorie

zutreffenden Rezepte aufgelistet.

5.2.2.5 login.php

Grafik 27 - login.php

Auf dieser Seite können sich die angelegten Benutzer mit Hilfe von Sessions

einloggen und gelangen so in den Backend-Bereich unserer Homepage.

Page 39: cooking time

Gottschuly Victoria & Kloibhofer Carina 36/42

5.2.2.6 Sessions

Dieser Befehl wird auf jeder Seite des Backends ausgegeben um sicherzustellen,

dass diese Seiten gesichert sind.

Page 40: cooking time

Gottschuly Victoria & Kloibhofer Carina 37/42

5.2.2.7 admin.php

Grafik 28 - admin.php

Nachdem sich der Benutzer angemeldet hat, kommt er auf die Seite „admin.php“.

Auf dieser Seite ist es dem angemeldeten Benutzer möglich ein neues Rezept

anzulegen. Hierbei können die Zutaten und die Zubereitung mit Hilfe des Text-

Page 41: cooking time

Gottschuly Victoria & Kloibhofer Carina 38/42

editors „xinha“ formatiert werden. Zum Schluss kann man gleich die jeweiligen

Kategorien auswählen, die auf dieses Rezept zutreffen.

5.2.2.8 rezept_autor.php & rezept_aendern_autor.php

Grafik 29 - rezept_autor.php

Auf der Seite „rezept_autor.php“ kann der Benutzer, mit Hilfe von Mitschicken der

Autornummer, eines von ihm je angelegtes Rezept auswählen und wird dann auf

die Seite „rezept_aendern_autor.php“ weitergeleitet.

Page 42: cooking time

Gottschuly Victoria & Kloibhofer Carina 39/42

Grafik 30 - rezept_aendern_autor.php

Auf „rezept_aendern_auto.php“ kann der Benutzer dann das von ihm

ausgewählte Rezept ändern und dieses wird anschließend sofort in die

Datenbank gespeichert.

Page 43: cooking time

Gottschuly Victoria & Kloibhofer Carina 40/42

6 Nachwort

Als wir mit der Umsetzung unseres Projekts gestartet haben, waren wir der

Meinung, dass es zwar schon einige Herausforderungen geben würde, aber kein

zeitliches Problem mit dem Projekt fertig zu werden.

Jedoch wurde unser Projekt natürlich durch diverse Probleme immer wieder

aufgeschoben, unterbrochen und erschwert. Doch mit der Hilfe des von uns

erworbenen Wissens und vor allem mit unseren Professoren Wurzinger und

Selinger gelang es uns doch noch unsere Homepage rechtzeitig fertig zu

gestalten.

Das Projekt wurde natürlich von uns schon im Vorhinein geplant, jedoch war

diese Planung in der Praxis nicht immer einzuhalten. So kam es zu diversen

Veränderungen in der Umsetzung der Gestaltung der Homepage, diese milderten

aber keineswegs unseren Arbeitseifer.

Sehr viele positive Erfahrungen wurden von aus unserem Projekt mitgenommen,

jedoch auch einige, wenige negative. Alles in allem kann man sagen, dass wir

durch die Umsetzung unseres Projekts gewachsen sind und es uns vor allem

gelungen ist unsere ersten Erwartungen bezüglich der Homepage noch zu

übertreffen.

Page 44: cooking time

Gottschuly Victoria & Kloibhofer Carina 41/42

7 Quellenverzeichnis

Projektmanagement

Mag. Wurzinger & Mag. Selinger – Projektmanagement Skriptum

Grundlagen

Html:

http://de.wikipedia.org/wiki/Hypertext_Markup_Language

CSS

http://de.wikipedia.org/wiki/Cascading_Style_Sheets

PHP

http://de.wikipedia.org/wiki/Php

MySql

http://de.wikipedia.org/wiki/Mysql

Gimp

http://de.wikipedia.org/wiki/Gimp

xinha

http://xinha.webfactional.com/

Aufbau unserer Homepage

Template

http://freewebtemplates.com

Page 45: cooking time

Gottschuly Victoria & Kloibhofer Carina 42/42

8 Abbildungsverzeichnis

GRAFIK 1 - PROJEKTSTRUKTURPLAN ........................................................................................................... 5

GRAFIK 2 - HTML ................................................................................................................................ 11

GRAFIK 3 - HTML STECKBRIEF ............................................................................................................... 14

GRAFIK 4 - CSS ................................................................................................................................... 14

GRAFIK 5 - CSS STECKBRIEF ................................................................................................................... 15

GRAFIK 6 - MYSQL .............................................................................................................................. 15

GRAFIK 7 - ER-DIAGRAMM .................................................................................................................... 17

GRAFIK 8 -PHP ................................................................................................................................... 17

GRAFIK 9 - PHP FUNKTIONSWEISE .......................................................................................................... 19

GRAFIK 10 - GIMP................................................................................................................................ 20

GRAFIK 11 - XINHA ............................................................................................................................... 21

GRAFIK 12 - BEEHIVES TEMPLATE ........................................................................................................... 22

GRAFIK 13 - BANNERVERSUCH 1 ............................................................................................................. 23

GRAFIK 14 - BANNERVERSUCH 2 ............................................................................................................. 23

GRAFIK 15 - BANNERVERSUCH 3 ............................................................................................................. 23

GRAFIK 16 –FERTIGES TEMPLATE ............................................................................................................ 24

GRAFIK 17 - TEMPLATE-ERKLÄRUNG........................................................................................................ 25

GRAFIK 18 - DATENBANK ...................................................................................................................... 28

GRAFIK 19 - ROHVERSION INDEX.PHP ...................................................................................................... 28

GRAFIK 20 - INDEX.PHP ......................................................................................................................... 29

GRAFIK 21 - SEARCH.PHP ....................................................................................................................... 30

GRAFIK 22 - REZEPTUEBERSICHT.PHP ....................................................................................................... 31

GRAFIK 23 - KATEGORIEDETAIL.PHP ......................................................................................................... 32

GRAFIK 24 - REZEPTDETAIL.PHP .............................................................................................................. 33

GRAFIK 25 - MENUES.PHP...................................................................................................................... 34

GRAFIK 26 - MENUEDETAIL.PHP .............................................................................................................. 35

GRAFIK 27 - LOGIN.PHP ......................................................................................................................... 35

GRAFIK 28 - ADMIN.PHP........................................................................................................................ 37

GRAFIK 29 - REZEPT_AUTOR.PHP ............................................................................................................ 38

GRAFIK 30 - REZEPT_AENDERN_AUTOR.PHP.............................................................................................. 39


Recommended