Post on 09-Mar-2016
description
PROJEKTARBEIT FÜR DIE REIFE UND DIPLOMPRÜFUNG
2010
It’s cooking time
rezepte.pannoneum.at
Gottschuly & Kloibhofer
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
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
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.
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.
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.
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.
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.
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
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
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
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
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.
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
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>
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.
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
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
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.
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
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“.
Gottschuly Victoria & Kloibhofer Carina 19/42
4.4.2 Funktionsweise
4.4.3 Steckbrief
Paradigmen: imperativ, objektorientiert
Erscheinungsjahr: 1995
Designer: Rasmus Lerdorf
Entwickler: The PHP Group
Aktuelle Version: 5.3.2 (4. März 2010)
Typisierung: schwach, dynamisch
Einflüsse: Perl, C, C++, Java
Betriebssystem: plattformunabhängig
Lizenz: PHP-Lizenz
Grafik 9 - PHP Funktionsweise
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
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
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
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
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
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;}
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;}
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.
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
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-
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
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.
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.
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.
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ü
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.
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.
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-
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.
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.
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.
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
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