Issuu on Google+

Fachspezifische Themenstellung Information & Communication Solutions 2013

Erweiterung des Onlineshops f端r die Feinkostprodukte

marlene lunzer


Inhaltsverzeichnis 1. Vorwort __________________________________________ 4 2. Preface ___________________________________________ 5 3. Projektmanagement ________________________________ 6 1.1. _______________________________________________ 6 1.2. Definition ______________________________________ 6 1.1.1. Was ist ein Projekt __________________________________ 6 1.1.2. Merkmale eines Projektes_____________________________ 6 1.1.3. Sachliche Abgrenzung _______________________________ 7 1.1.4. Zeitliche Abgrenzung ________________________________ 7 1.1.5. Soziale Abgrenzung _________________________________ 8 1.3. Projektplanung __________________________________ 8 1.1.6. Projektstrukturplan__________________________________ 9 1.1.7. Meilensteine ______________________________________ 10 1.1.8. Arbeitspakete _____________________________________ 10 1.1.9. Arbeitsprotokoll ___________________________________ 15 1.1.10.Projektwürdigkeitsanalyse ___________________________ 16 1.1.11.Projektdurchführbarkeitsanalyse ______________________ 16 1.1.12.ER-Diagramm _____________________________________ 17 1.4. Projektabschluss _______________________________ 18 1.1.13.Produktabnahme __________________________________ 18 1.1.14.Projektabschlussanalyse _____________________________ 19 1.1.15.Projektauflösung___________________________________ 19 4. Coporate Design ___________________________________ 20 1.1.16.Allgemein ________________________________________ 20 1.1.17.Zielgruppe: _______________________________________ 20 1.1.18.Schrift: __________________________________________ 20 1.1.19.Farben: __________________________________________ 21 5. Grundlagen ______________________________________ 22 1.5. HTML _________________________________________ 22 1.1.20.Allgemein ________________________________________ 22 1.1.21.Aufbau __________________________________________ 22 1.6. PHP __________________________________________ 23 1.1.22.Allgemein ________________________________________ 23 1.1.23.Geschichte _______________________________________ 23 1


1.7. MySQL ________________________________________ 25 1.1.24.Allgemein ________________________________________ 25 1.1.25.Geschichte _______________________________________ 25 1.8. CSS – Cascaded Style Sheet _______________________ 26 1.1.26.Allgemein ________________________________________ 26 6. Verwendete Programme ____________________________ 27 1.9. phpMyAdmin ___________________________________ 27 1.1.27.Allgemein ________________________________________ 27 1.10. Xampp ______________________________________ 29 1.1.28.Definition ________________________________________ 29 1.11. Notepad++ ___________________________________ 30 1.1.29.Allgemein ________________________________________ 30 1.1.30.Syntaxhervorhebung (Syntax- Highlighting) _____________ 30 1.1.31.Scintilla __________________________________________ 31 1.1.32.GNU General Public License __________________________ 31 1.12. Gimp ________________________________________ 32 1.13. _____________________________________________ 32 1.1.33.Allgemein ________________________________________ 32 1.1.34.Geschichte _______________________________________ 32 1.1.35.Unsere Aufgabe ___________________________________ 33 1.14. Formular mit Hilfe von Self HTML erstellt ___________ 33 1.15. Dia _________________________________________ 34 1.16. Irfanview ____________________________________ 35 7. Backend _________________________________________ 36 1.17. Session-Variable ______________________________ 36 Issuu ______________________________________________ 37 8. Nachwort ________________________________________ 39 9. Abbildungsverzeichnis ______________________________ 40 10. Quellenverzeichnis _______________________________ 41

2


Projektauftraggeber Weingut Heinrich Lunzer

Projektleiter Marlene Lunzer

Projektteammitglied Julia Kellner

Schuljahr 2012/2013 Pannoneum Neusiedl am See

3


1. Vorwort Im Rahmen unserem Ausbildungsschwerpunkt INFORMATION, COMMUNICATION & SOLUTION erarbeiteten wir eine Webseite f端r das Weingut Heinrich Lunzer in Gols. Wir haben uns entschieden den bereits vorhandenen Online-Shop f端r dessen Feinkostprodukte zu entwickeln. Mit Hilfe eines HTML-Editors haben wir unsere Webseite entworfen und an das vorhandene Corporate Design angepasst. Unser Ziel war es eine benutzerfreundliche Webseite zu entwickeln und dass die Feinkostprodukte des Betriebes einen h旦heren Bekanntheitsgrad erlangen. Wir haben darauf geachtet, dass die Online-Feinkost Webseite mit dem urspr端nglichen Wein-Onlineshops zusammenpasst. Mit Hilfe unseren Professors, Mag. Heinz Wurzinger, haben wir ein informatives, dynamisches und anwendungstaugliches Modul der Website erneuert.

4


2. Preface In the course of our subject Information, Communication & Solutions we created a website for the winery Heinrich Lunzer. We decided to create an online shop for gourmet food. We create the Website with the help of an HTML-editor and we adapt it with the Corporate Design. Our aim was to design a website which is user-friendly and that the gourmet food gets an high profile. We mind that the online shop falls into place with the wine online shop. With the help of our professor, Mag. Heinz Wurzinger, we managed to design a well structured and user-friendly website.

5


3. Projektmanagement

Projektdefinition

Projektplanung

Projektabwicklung

Projektabschluss

1.1. 1.2. Definition Unter dem Begriff Projektmanagement versteht man die Planung, Steuern, Kontrolle und Organisation von Projekten. Mithilfe des Projektmanagements hat man einen Überblick über die Zeit, Geld, Ziele und Personen. Projektmanagement ist die Grundlage für ein erfolgreiches Projekt.

1.1.1.

Was ist ein Projekt

Unter einem Projekt versteht man einmalige Vorhaben, die zeitlich begrenzt sind und ein konkretes Ziel haben.

1.1.2.

Merkmale eines Projektes

Projekte sind einmalig, zeitlich begrenzt und haben begrenzte Ressourcen(Geld, Zeit, Personen, Know-How, Räumlichkeiten.. Wir machen ein Maturaprojekt und haben bis 28 Februar Zeit.

„Je besser ein Projekt geplant ist, umso weniger Überraschungen können bei der Durchführung passieren.“

6


1.1.3.

Sachliche Abgrenzung

Ziele:

o o o o o o o o o

dynamische Webseite informative Webseite Corporate Design beibehalten positive Wirkung auf die Kunden Möglichkeit Feinkostspezialitäten online zu bestellen Feinkostware soll bekannt werden Vereinfachung der Bestellung durch den Onlinebereich - Feinkost Angebote präsentieren Bilder der Feinkostspezialitäten

Nicht-Ziele:

o Umsatzsteigerung o Erhöhung des Trafiks

1.1.4.

Zeitliche Abgrenzung

Zeitlicher Ablauf des Projektmanagements:

o o o o o o

Idee Konzept Go oder Nogo Entscheidung Projektplanung Projektdurchführung Projektcontrolling

Projektstart: 21. September 2012 Projektende: 28. Februar 2013

7


1.1.5.

Soziale Abgrenzung

Personen im Projekt Projektauftraggeber: Projektleiter: Projektteammitglied:

Weingut Heinrich Lunzer Marlene Lunzer Julia Kellner

1.3. Projektplanung Eine gut durchdachte Planung ist f端r jedes Projekt wichtig. Wenn ein Projekt nicht ausreichend durchdacht ist, kann es sp辰ter zu Problemen kommen. Zur Erleichterung der Planung dienen folgene Projektmanagement Werkzeuge:

o o o o o o

8

Projektstrukturplan Meilensteine Arbeitspakete Arbeitsprotokoll Projektw端rdigkeitsanalyse Projektdurchf端hrbarkeitsanalyse


1.1.6.

Projektstrukturplan

in Projektstrukturplan ist ein Schlüsselbestandteil eines Projekts, der die Arbeit des Teams in überschaubaren Abschnitten organisiert. Der Projektstrukturplan unterteilt das Projekt visuell in einzelne Blöcke, die für das Projektteam verständlich sind: Jede Ebene der Aufgliederungsstruktur enthält weitere Definitionen und Details.

Konzept erstellen

o Idee besprechen o Corporate Design erstellen

3. dynamische

2. Unterlagen sammeln

o Produktbeschreibungen o Fotos schießen o Fotos bearbeiten

4. Webseite

Tabelle

o Datenbanken anlegen o Dynamische Tabelle erstellen o Produkte einfügen o Fotos einfügen

testen

o Webseite präsentieren o Webseite überarbeiten o Webseite fertigstellen

4. Webseite veröffentliche n

9


1.1.7.

Meilensteine

Meilensteine lassen sich in jedem kleineren und größeren Projekt definieren und sie sind Bestandteil jedes Projektmanagements, denn sie sind wichtige und entscheidende Etappen von besonderer Bedeutung zum definierten Ziel. Meilensteine sind zum einen sehr wichtig für das Projektmanagement, da sie den gesamten Ablauf in mehrere kleine und überschaubarere Etappen und Zwischenziele einteilen. Dadurch kann auf dem Weg eines Projekts immer kontrolliert werden, wie der Stand der Dinge ist, ob die Richtung geändert werden muss oder wie man den nächsten Meilenstein erreichen kann. So bleibt stets der Überblick gewahrt und das Projekt gerät nicht außer Kontrolle. Meilensteine können auch zeitlich definiert werden. Solche Etappen sind wichtig für ein erfolgreiches Projektmanagement, um in einem vorher gesteckten zeitlichen Rahmen zu bleiben und so zum Beispiel geplante Kosten oder Lieferungsfristen nicht zu überschreiten.

1)

Meilenstein 1: Konzept erstellen

2)

Meilenstein 2: Unterlagen besorgen

3)

Meilenstein 3: dynamischen Tabellen erstellen

4)

Meilenstein 4: Website fertigstellen

5)

Meilenstein 5: Website veröffentlichen

1.1.8.

Arbeitspakete

Ein Arbeitspaket beschreibt eine geschlossene Aufgabenstellung oder Terminplanvorgänge innerhalb des Projektes, die von einzelnen Personen oder von organisatorischen Einheiten bis zu einem festgelegten Zeitpunkt fertiggestellt werden sollen. Ein Arbeitspaket ist ein Grundbaustein. Das Paket muss solide, stabil und klar definiert sein, damit das Projektgebäude hält und nach oben führt. 10


Es wird von einem Teammitglied oder einer Gruppe des Projektteams erledigt. Zeitaufwand, Ergebnis und Kosten sind vom Projektmanagement definiert. Die Detailliertheit von Arbeitspaketen ist abhängig vom Umfang und Komplexität des Gesamtprojektes. Mit der Zerlegung von Arbeitsschritten in überschaubare Abschnitte den Arbeitspaketen, ist es möglich, die Arbeit besser zu planen und zu steuern.

6)

Meilenstein 1: Konzept erstellt

1.1 Arbeitspaket – Konzept planen Ziel: Konzept besprechen Nichtziel: die Wünsche des Auftragsgeber nicht zu erfüllen Beginn: September 2012 Ende: Juni 2013 benötigte Ressourcen: Laptop, Internetzugang Verantwortliche: Marlene Lunzer, Julia Kellner

7)

Meilenstein 2: Unterlagen zusammengetragen

2.1 Arbeitspaket - Daten für die Website besorgen Ziel: von den bestehenden Daten brauchbare Funktionen übernehmen Nichtziel: alles zu übernehmen Beginn: 27.09.2012 Ende: 20.09.2012 benötigte Ressourcen: Laptop, Internetzugang Verantwortliche: Julia Kellner

11


2.2 Arbeitspaket - Fotos machen Ziel: schöne und professionelle Fotos Nichtziel: schlechte Auflösung, Fotos nicht zu verwenden Beginn: 30.10.2012 Ende: 30.10.2012 benötigte Ressourcen: Laptop, Kamera Verantwortliche: Marlene Lunzer

2.3 Arbeitspaket - Fotos bearbeiten Ziel: richtig zuschneiden und für die Website komprimieren Nichtziel: unscharfe Fotos Beginn: 30.10.2012 Ende: 7.11.2012 benötigte Ressourcen: Laptop, html-Editor, Bildbearbeitungsprogramm Verantwortliche: Marlene Lunzer

2.4 Arbeitspaket – über benötigte Produkte informieren Ziel: alle Produkte zu den richtigen Kategorien Nichtziel: falsche Information über die Produkte Beginn: 10.11.2012 Ende: 10.11.2012 benötigte Ressourcen: Laptop, Kamera Verantwortliche: Marlene Lunzer, Julia Kellner

8)

Meilenstein 3: dynamischen Tabellen erstellt

3.1 Arbeitspaket – benötigte Tabellen erstellen Ziel: funktionierende Tabelle Nichtziel: Fehler in der Tabelle Beginn: 22.11.2012 Ende: 22.11.2012 benötigte Ressourcen: Laptop, phpmyadmin 12


Verantwortliche: Marlene Lunzer, Julia Kellner

3.2 Arbeitspaket – Produkte in die Tabellen eintragen Ziel: die richtigen Produkte in die jeweilige Tabelle eintragen Nichtziel: falsche Produkte in der Tabelle Beginn: 29.11.2012 Ende: 29.11.2012 benötigte Ressourcen: Laptop, phpMyAdmin, Notepad++ Verantwortliche: Marlene Lunzer, Julia Kellner

3.3 Arbeitspaket – Formatierung der Tabellen Ziel: ansprechende Tabellen Formatierung Nichtziel: unübersichtliche Website Beginn: 31.1.2013 Ende: 31.1.2013 benötigte Ressourcen: Laptop, notepad, Selfhtml Verantwortliche: Marlene Lunzer, Julia Kellner

9)

Meilenstein 4: Website fertigstellet

4.1 Arbeitspaket - Testung der Website Ziel: zufriedener Auftragsgeber Nichtziel: unvollständige Webseite wird präsentiert Beginn: 28.02.2013 Ende: 05.03.2013 benötigte Ressourcen: Laptop, Internetzugang, Verantwortliche: Marlene Lunzer, Julia Kellner

4.2 Arbeitspaket - Webseite überarbeiten Ziel: Fehler in der Webseite verbessern Nichtziel: Fehler können nicht behoben werden Beginn: 05.03.2013 Ende: 30.03.2013 13


benรถtigte Ressourcen: Laptop, Internetzugang, Notepad Verantwortliche: Marlene Lunzer, Julia Kellner

4.3 Arbeitspaket - Webseite fertigstellen Ziel: funktionierende Webseite Nichtziel: Auftraggeber ist nicht zufrieden Beginn: 18.04.2013 Ende: 1.05.2013 benรถtigte Ressourcen: Laptop, Internetzugang, Notepad Verantwortliche: Marlene Lunzer, Julia Kellner

10) Meilenstein 5: Website verรถffentlicht 5.1 Arbeitspaket - Online-Shop der Webseite verรถffentlichen Ziel: zufriedener Auftragsgeber Nichtziel: Beginn: 16.05.2013 benรถtigte Ressourcen: Laptop, Internetzugang, Verantwortliche: Marlene Lunzer, Julia Kellner

14


1.1.9.

Arbeitsprotokoll

18.10.2012 25.10 30.10.2012

Beginn der fachspezifischen Themenstellung ER-Diagramm erstellt Fotos von den Produkten geschossen Fotos bearbeitet

8.11.2012

Dynamische Tabelle erstellt

22.11.2012

Kunden.php und kategorienr erstellt, Produkte mit kategorienr verbunden

29.11.2012

Datensätze in die Tabelle eingefügt, Tabelle formatiert, Bilder angepasst (verkleinert)

6.12

Weitere Ausarbeitung der fachspezifischen Themenstellung (Arbeitsprotokoll, Meilensteine, Projektstrukturplan)

20.12.2012 31.1.2013

Tabelle ausrichten, Weiterarbeiten an der Fachspezifischen Themenstellung

14.2.2013

Bilder Anzeige groß, Weiterarbeiten an der Fachspezifischen Themenstellung,

21.2.2013

Besprechung der Themenstellung und Ausrichtung der Tabelle,

25.2.2013

Formular in die Website eingebunden, Verkaufs- und Lieferkonditionen mit der Website verknüpft, Formulareingabe überprüfen, Bilder einheitlich angepasst

28.03.2013

Testung der Webseite, Fehler beheben

05.03.2013

Fehler in der Webseite überarbeiten

18.04.2013

Webseite fertigstellen, Detailfehler beheben

16.05.2013

Veröffentlichung der Webseite

15


1.1.10. Projektwürdigkeitsanalyse Kriterium

Hoch Mittel Niedrig Begründung Es gab ein paar

Neuartigkeit

Neuartigkeiten, aber die

waren leicht zu überwältigen

Inhaltliche

Know-How

Komplexität Ressoucenaufwand Strategische Bedeutsamkeit

Laptop, Zeit

Ordnung und Übersicht

1.1.11. Projektdurchführbarkeitsanalyse Bereiche Personal Ressourcen Finanzielle Ressourcen Zeitliche Ressourcen

Mögliche Fragen

Ja / Nein

Bemerkungen

Sind

Projektauftraggeber,

Personalressourcen Ja

Projektleiter,

vorhanden?

Projektteammitglied

Wird ein notweniges Budget

Ja

vorhanden sein? Ist das geplante Projekt rechtzeitig

Ja

abgeschlossen?

Es fallen keinerlei Kosten an Bis Abgabetermin – 28.2.2013

Haben wir das Know-How

benötigte Wissen zum Erstellen einer Webseite?

16

Ja

Durch den ICSUnterricht gegeben


1.1.12. ER-Diagramm Das ER-Modell ist unabhängig von einem bestimmten Datenbanksystem und dient der Analyse und dem Design von Datenstrukturen. Es unterstützt die Erstellung neuer Anwendungssysteme durch ein logisches Datenmodell. Zur Darstellungen der Beziehungen zwischen den Entitäten wie Kunde, Adresse oder Position verwenden die ER-Modelle festgelegte grafische Komponenten wie Pfeile und Rechtecke. So werden beispielsweise die Beziehungen untereinander durch Einfach- und Doppelpfeile kenntlich gemacht. Das ER-Modell wurde 1976 von Peter Chen in seiner Veröffentlichung The Entity-Relationship Model vorgestellt. Die Beschreibungsmittel für Generalisierung und Aggregation wurden 1977 von Smith und Smith eingeführt. Danach gab es mehrere Weiterentwicklungen, so Ende der 1980er Jahre durch Wong und Katz.

Abb. 1 ER-Diagramm

17


1.4. Projektabschluss Der Projektabschluss ist die letzte Phase und umfasst drei Schritte:

o Produktabnahme o Projektabschlussanalyse o Projektauflösung

1.1.13. Produktabnahme Die Abnahme ist die Bestätigung des Auftraggebers an den Auftragnehmer, dass dieser das vereinbarte Werk spezifikationsgerecht erstellt hat und damit seinen Teil des Werkvertrags erfüllt hat. Sobald der Projektleiter das Projektziel als erreicht ansieht, wird er dies dem Auftraggeber mitteilen und das erstellte Werk dem Auftraggeber vorlegen. Unabhängig von der Projektart ist die Abnahme der wichtigste Meilenstein im Projekt, da der Auftraggeber über das Erreichen des Projektziels entscheidet. Bei vertragsgemäßer Erstellung des vereinbarten Werks hat der Auftragnehmer ein Recht auf die Abnahme.

18


1.1.14. Projektabschlussanalyse

MEILENSTEIN Projektstart durchführen Fotos schießen und bearbeiten ER-Diagramm erstellt Dynamische Tabelle erstellen Produkte in die Tabelle einfügen Fotos in die Tabelle einfügen Webseite fertig stellen Projektabschluss

PLANTERMIN

IST-TERMIN

21.9.2012

21.9.2012

30.10.2012

30.10.2012

25.10.2012

25.10.2012

13.12.2012

29.12.2012

6.12.2012

29.11.2012

20.12.2012 7.2.2013 28.2.2013

1.1.15. Projektauflösung Die Projektauflösung ist der letzte Schritt im Projektmanagement. Es ist sehr wichtig, dass jedes Projekt, dass man durchführt einen klar definierten Anfang und ein eindeutiges Ende hat.

19


4. Coporate Design1 1.1.16. Allgemein Der Begriff Corporate Design (CD) bzw. Unternehmens-Erscheinungsbild bezeichnet einen Teilbereich der Unternehmens-Identität (corporate identity) und beinhaltet das gesamte, einheitliche Erscheinungsbild eines Unternehmens oder einer Organisation. Dazu gehören vorrangig die Gestaltung der Kommunikationsmittel (Schriftart, Schriftfarbe, Logo, Geschäftspapiere, Werbemittel, Verpackungen, Internetauftritte) sowie die Produktgestaltung. Das Corporate Design entwickelt für ein Unternehmen ein geeignetes Zeichensystem, das erfolgreich dazu eingesetzt werden kann, ein einheitliches und positives Bild des Unternehmens in der Öffentlichkeit sowie einen hohen Bekanntheitsgrad desselben zu erreichen (Wiedererkennungswert, Markenbekanntheit).

1.1.17. Zielgruppe: Menschen die Wein interessiert sind und mehr über Wein wissen möchten. Menschen. Liebhaber von Feinkostspezialitäten, wie Marmeladen, Sirupen, Chutneys, Schnäpsen oder von selbsterzeugten Lavendelprodukten. Die Produkte vom Weingut Heinrich Lunzer sind wertvoll für Menschen die selbstproduzierte Produkte zu schätzen wissen.

1.1.18. Schrift: Verdana

1

Design bedeutet meist Entwurf oder Formgebung.

20


1.1.19. Farben:

o HTML: #f0d4a2 o RGB: 240 212 162 o CMYK: 0, 12, 33, 6

o HTML: #cb593f o RGB: 203, 89, 63 o CMYK: 0, 56, 69, 20

21


5. Grundlagen 1.5. HTML 1.1.20. Allgemein Hypertext Markup Language (Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt.

1.1.21. Aufbau <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Text </BODY> </HTML>

22

Abb. 2 HTML Schriftzug


1.6. PHP 1.1.22. Allgemein PHP ist eine Computersprache, mit der Webserver gesteuert werden. Sie wird als freie Software unter der PHPLizenz verbreitet

Abb. 3 PHP-Logo

Die Abkürzung PHP steht für Personal Home Page Tools, ebenfalls zugewiesen wird ihr die Bedeutung von Hypertext Preprocessor. Es handelt sich um eine Skriptsprache; Programme, die mit ihr codiert und als einfache Textdateien abgespeichert sind, werden zum Zeitpunkt ihres Aufrufs vom Webserver in Maschinencode umgerechnet, mit dem dieser "von Haus aus" arbeitet. PHP-Programme sind insofern in weiten Teilen plattformunabhängig und können auf verschiedenen Hardware-Systemen ausgeführt werden.

1.1.23. Geschichte Der erste PHP-Interpreter wurde im Jahre 1995 von Rasmus Lerdorf entwickelt, der als Erfinder von PHP gilt. Damals war es eine lose Sammlung von Programmen, die in der Programmiersprache C entwickelt worden waren und aus einer Stapelverarbeitungsdatei heraus aufgerufen wurden. Es ging vornehmlich darum, in einfacher Weise Eingaben von Webformularen entgegenzunehmen, zu verarbeiten und in Ausgabedateien einzumischen. In HTML-Dateien eingebettet, ergänzte der PHP-Code somit statische Webseiten um dynamische Informationen wie Datum und Uhrzeit oder 23


mischte beispielsweise die Eingaben von Nutzern aus Bestellformularen in Bestellbestätigungs-Seiten ein. Heute verfügt PHP über eine moderne Semantik und ist in fertigen Installationspaketen für viele Betriebssysteme erhältlich. Es ist daraus eine umfangreiche objektorientierte Programmiersprache gewachsen, die mittlerweile in einer Version 5 vorliegt.

Abb. 4 PHP-Grafik

24


1.7. MySQL 1.1.24. Allgemein MySQL ist eines der weltweit am weitesten verbreiteten relationalen Datenbankverwaltungssysteme, dem dem Daten in Tabellen gespeichert, geändert, gelöscht oder abgefragt werden können. Für die Datenmanipulation verwendet es SQL eine standardisierte Abfragesprache. MySQL wird häufig mit Verbindung von Apache und PHP verwendet. Es ist als Open-Source-Software sowie als kommerzielle Enterpriseversion für verschiedene Betriebssysteme verfügbar und bildet die Grundlage für iele dynamische Webauftritte.

1.1.25. Geschichte MySQL wurde seit 1994 vom schwedischen Unternehmen MySQL AB entwickelt. Im Februar 2008 wurde MySQL AB von Sun Microsystems übernommen, das selbst im Januar 2010 von Oracle gekauft wurde. Der Name MySQL setzt sich zusammen aus dem Vornamen My, den die Tochter des MySQL AB Mitbegründers Michael Widenius trägt, und SQL.

Abb. 5 MySql - Logo

25


1.8. CSS – Cascaded Style Sheet 1.1.26. Allgemein CSS steht für Cascaded Style Sheet. Stylesheets sind Formatvorlagen für HTML-Dateien. CSS-Dateien erlauben es HTML-Setzern auf einfache Weise, einer Vielzahl von Seiten ein einheitliches Layout zu geben. Man kann Schriftfarbe, -größe und Schriftart festlegen. CSS gilt als die Standard-Stylesheets Sprache für Webseiten.

Abb. 6 CSS-Schriftzug

26


6. Verwendete Programme 1.9. phpMyAdmin 1.1.27. Allgemein phpMyAdmin ist eine freie PHP-Applikation zur Administration von MySQL-Datenbanken. Die Administration erfolgt über HTTP mit einem Browser. Daher können auch Datenbanken auf fremden Rechnern über eine Netzwerkverbindung oder über das Internet administriert werden. Für die Nutzung des Programms sind keine Kenntnisse in SQL notwendig. phpMyAdmin ermöglicht Ihnen Aktionen (Einfügen, Ändern und Löschen von Datensätzen) an Ihrer MySQL-Datenbank durchzuführen, ohne erst Kenntnisse der Datenbankabfragesprache SQL zu erlernen. phpMyAdmin ist unter der GNU General Public License (=Software-Lizenz) lizenziert und ist auch in vielen Linux-Distributionen enthalten. Es werden derzeit 68 Sprachen unterstützt, wovon die Übersetzung bei einigen sehr unvollständig ist. phpMyAdmin ist eine weit verbreitete Applikation und wird unter anderem von großen Webhosting-Providern verwendet.

Abb. 7 PHP-MyAdmin

27


Abb. 8 Screenshot Datenbank

Abb. 9 Screenshot Datenbank

28


1.10. Xampp 1.1.28. Definition XAMPP ist eine Zusammenstellung von freier Software – vorwiegend im Umfeld des LAMP-Systems. XAMPP ermöglicht das einfache Installieren und Konfigurieren des Webservers Apache mit der Datenbank

Abb. 10 XAMPP - Logo

MySQL bzw. SQLite und den Skriptsprachen Perl und PHP (mit PEAR). Das X steht hierbei für die verschiedenen Betriebssysteme, auf denen es eingesetzt werden kann. XAMPP enthält zusätzlich andere nützliche Werkzeuge wie den FTP-Server ProFTPd oder FileZilla Server, den Mailserver Mercury, phpMyAdmin, Webalizer und OpenSSL. Seit Version 1.7.4 beinhaltet die Windows-Variante zusätzlich auch Apache Tomcat 7, der die Ausführung von JavaServer Pages und Java Servlets ermöglicht.

Abb. 11 XAMPP Control Leiste

29


1.11. Notepad++ 1.1.29. Allgemein Notepad++ ist ein freier Texteditor für Windows und andere Betriebssysteme. Programmiersprache: C++ Notepad++ beherrscht Syntaxhervorhebung für folgende Programmierund Auszeichnungs-Sprachen:

o CSS o HTML o Inno o Java

o o o o

JavaScript PHP PostScript SQL

Zusätzlich lassen sich eigene Sprachen über eine grafische Oberfläche definieren. Dabei ist es möglich, Schlüsselwörter, Kommentare und Operatoren selbst festzulegen und in verschiedenen Kategorien unterschiedlich zu formatieren. Das Projekt basiert auf Scintilla, ist in der Programmiersprache C++ geschrieben und steht unter der GPL-Lizenz.

1.1.30. Syntaxhervorhebung (Syntax- Highlighting) bezeichnet die Möglichkeit eines Computerprogrammes, bestimmte Wörter und Zeichenkombinationen in einem Text abhängig von ihrer Bedeutung in unterschiedlichen Farben, Schriftarten und -stilen darzustellen. Syntaxhervorhebung verbessert die Lesbarkeit von Texten: Strukturen im Text sind leichter zu erkennen, Kommentare erscheinen abgesetzt vom eigentlichen Code und Tippfehler fallen schneller auf, da in vielen Fällen ein Tippfehler zu einer veränderten Darstellung führt. 30


Die Syntaxhervorhebung gehört heutzutage zur Standardfunktionalität vieler Texteditoren.

1.1.31. Scintilla bietet viele Funktionen um das Editieren zu erleichtern, wie zum Beispiel Syntaxhervorhebung. Die Hervorhebungsmethode erlaubt es, verschiedene Schriftarten, Farben, Stile sowie Vorder- und Hintergründe zu verwenden.

1.1.32. GNU General Public License (GNU,GPL,GPL abgekürzt) ist die am weitesten verbreitete SoftwareLizenz welche den Endnutzern (Privatpersonen, Organisationen, Firmen) die Freiheiten garantiert, die Software nutzen, studieren, verbreiten und ändern zu dürfen. Software, die diese Freiheitsrechte gewährt, wird Freie Software genannt.

31

Abb. 12 Notepad++ Logo


1.12. Gimp

Abb. 13 Gimp Arbeitsmenü

1.13. 1.1.33. Allgemein GIMP

(ursprünglich

General

Image

Manipulation

Program)

ist

ein

kostenloses und freies Bildbearbeitungsprogramm. Es steht unter der GNU General Public License. Der Schwerpunkt der Software ist die intensive Bearbeitung einzelner Bilder, wofür vielfältige Effekte zur Verfügung stehen.

1.1.34. Geschichte Die erste öffentliche Testversion von GIMP wurde von Peter Mattis am 21. November 1995 auf der Liste comp.os.linux.development.apps angekündigt. Zusammen mit seinem Kommilitonen Spencer Kimball hatte er das Programm als Studienarbeit entwickelt. Die erste Betaversion wurde für 32


Linux, Solaris, HP-UX und IRIX bereitgestellt. Die erste offizielle Version 0.54 erschien im Januar 1996. Bereits zu diesem Zeitpunkt war GIMP ein umfangreiches Programm. Das Programm galt jedoch anfänglich als fehlerbehaftet und absturzfreudig. GIMP erlangte vor allem unter Linux eine große Verbreitung und etablierte sich dort im Laufe der Zeit als Platzhirsch für digitale Bildbearbeitung. Das Programm ist Bestandteil fast aller Linux-Distributionen, die nicht konsequent auf GTK-basierende Programme verzichten Neue GIMP-Versionen werden zurzeit von Michael Natterer veröffentlicht.

1.1.35. Unsere Aufgabe Unsere Aufgabe mit GIMP war es, unsere Bilder zu verkleiner und den Hintergrund transparent zu bearbeiten. Damit der Hintergrund der Bilder auch nach den abspeichern transparent blieb, mussten die Bilder mit .gif abgespeichert wrrden.

1.14. Formular mit Hilfe von Self HTML erstellt Ein gewöhnliches HTML-Formular mit einigen Eingabefeldern, einem Reset-Button zum Zurücksetzen des Formulars und einem Submit-Button zum Absenden

Abb. 14

des Formulars definiert. Die einzige Besonderheit ist die Anweisung onsubmit="return chkFormular()" im einleitenden <form>-Tag. Der Seite Event-Handler onsubmit wird aktiv, wenn der Anwender auf den SubmitButton klickt, um das Formular abzusenden. Dann wird die JavaScriptFunktion chkFormular() aufgerufen, die im Dateikopf in einem JavaScriptBereich notiert ist. Wenn die Funktion Fehler bei den Eingaben findet, gibt sie den Wert false (falsch) zurück, ansonsten den voreingestellten Wert true (wahr). Mit return wird dieser Wert im einleitenden <form>-Tag an den Browser weitergegeben. Der Browser kennt die beiden Werte true und false. Im Zusammenhang mit onsubmit reagiert er so, dass er das Formular nur dann abschickt, wenn der Wert true ist. Ist der Wert false, wird das Absenden der Formulardaten verhindert. 33


Bei unserer Website haben wir das HTML – Formular bei den Kundenangaben benötigt. Der Kunde gibt seine Daten ein und wenn er es absendet wird eine Mail an den Winzer gesendet.

1.15. Dia Dia ist ein Programm, mit dem man auf einfachste Art und Weise ERDiagramme erstellen kann. Dia ist ein freigegebenes Diagrammschaffungsprogramm basierend auf der GPL-Lizenz. Das Programm ist inspiriert von den handelsüblichen Windowsprogramm „Visio“. Es kann dazu verwendet werden viele unterschiedliche Diagramme zu erstellen. Es hat viele helfende Objekte um Beziehungsdiagramme, ML Diagramme, Network Diagramme, und viele mehr herzustellen.

Abb. 15 Dia -Logo

34


1.16. Irfanview IrfanView ist ein Freeware-Programm zur Betrachtung und in kleinem Umfang auch zur Bearbeitung von Bildern unterschiedlicher Formate für die Betriebssystemplattform Microsoft Windows. Das Programm bietet die Möglichkeit, eine Vielzahl freier Grafikformate – wie zum Beispiel JPG, GIF, TIFF, PNG und ICO – anzuzeigen und in andere Formate zu konvertieren. Durch Kooperationen und separat erhältliche Plug-ins wird das Programm um einige Zusatzfunktionen und Unterstützung von lizenzgeschützten Grafikformaten erweitert. IrfanView ist laut Angaben des Herstellers weltweit das erste WindowsProgramm, das das GIF-, das ICO- und das TIF-Format unterstützt Neben den eigentlichen Bildformaten werden auch andere MultimediaFormate für Filme und Musik unterstützt, darunter MPEG, MP3, Ogg und FLV. IrfanView weist einige Bildbearbeitungsfunktionen auf. Die Möglichkeiten umfassen Basisfunktionen wie Scannen, Helligkeit, Kontrast, Ausschneiden, Weichzeichnen, Schärfen, Negativ, Farbänderung und Spezialfunktionen wie das Beseitigen des Rote-Augen-Effekts oder die Erstellung von Panoramabildern. Viele der angebotenen Grafikmanipulationen können auch als Stapelverarbeitung ausgeführt werden. Auf diese Weise ist es z. B. möglich, mehrere Dateien in einem Schritt zu drehen oder zu verkleinern oder umzubenennen (und dabei durchzunummerieren). Die Batchfunktionalität kann über die grafische Benutzeroberfläche oder über Parameter der Kommandozeile gesteuert werden. Wir haben mit Irfanview gearbeitet, damit wir nicht jedes Bild einzeln bearbeiten mussten, denn mit der Stapelverarbeitung ist es möglich mehrere Bilder mit einfachen Mausklicks zu bearbeiten bzw. zu verkleinern.

35 Abb. 16 Irfanview -Logo


7. Backend Das Back-End ist im Gegensatz zum Front-End der Teil einer ClientServer-Architektur oder eines Computersystems, der teilnehmerfern liegt. Betrachtungsmäßig liegt er näher am System, wohingegen das Front-End näher am Benutzer liegt. In einer Client-Server-Architektur bildet das Back-End den Server, der die Clients versorgt. Back-Ends können Mainframes oder Workstations sein, an die die Peripheriegeräte angeschlossen sind. Ein Back-End-Netzwerk verbindet die Rechner untereinander. Es benötigt typischerweise eine hohe Bandbreite und wird in der Regel mit optischen Übertragungsmedien realisiert.

1.17. Session-Variable Bei einer Session wird jedem Browser, der auf eine Webanwendung zugreift, eine Kennnummer gegeben, mit der man folgende Zugriffe dieses Browsers wiedererkennen kann. Auf dem Webserver werden unter dieser Kennnummer eine Reihe von PHP-Variablen gespeichert, die auf diese Weise von Seite zu Seite weitergereicht werden. Man erzielt damit einen ähnlichen Effekt wie mit <INPUT TYPE="hidden">-Variablen, die von Seite zu Seite weitergereicht werden, vermeidet jedoch eine Reihe von Nachteilen dieser Variablen: Session Variablen kommen dort zur Anwendung, wo man für einen einzelnen Benutzer während seines Besuches der Website Werte speichern will. So kann man zum Beispiel einen sogenannten Warenkorb einer ECommerce Applikation, mit allen Waren (Produkt, Menge und Preis) in einer oder mehreren Session Variablen speichern. Der Warenkorb bleibt so erhalten und kann in jeder ASP-Seite (Active Server Pages)abgefragt werden, egal über wie viele Seiten der User surft.

36


Abb. 17 session start.php

Abb. 18 check.php

Abb. 19 login.php

37


Issuu Issuu ist ein Online-Dienst, der realistische und anpassbare Besichtigung des digital hochgeladenen Materials wie Portfolios, B端cher, Zeitschriftenangelegenheiten, Zeitungen und anderer Druckmedien ber端cksichtigt. Es integriert in soziale Vernetzungsstandorte, um f端r hochgeladenes Material zu werben. Issu ist eine Plattform von Dokumenten. Es stehen die selbst erstellten Magazine im Vordergrund. Issuu verwandelt ein beliebiges PDF in eine webfreundliche Flashanimation. Wir ben旦tigen diesen Online-Dienst, um unsere Fachspezifische Website hochzuladen.

Abb. 20 Issuu - Logo

38


8. Nachwort Zunächst wollten wir ein Podcast zu den einzelnen Feinkostprodukten erstellen, doch zu Beginn des Schuljahres 2012/2013 hatten wir uns doch für die Erweiterung des Onlineshops für das Weingut Heinrich Lunzer von Gols entschieden. Ein Onlineshop für die Weine existierte schon, darum mussten wir unseren Onlineshop für die Feinkostprodukte genau so gestalten. Wir haben uns für einen HTML- Editor (Notepad++) entschieden, da wir mit diesem Programm schon im ICS Unterricht gearbeitet haben. Trotzdem tauchten ab und zu kleinere Probleme auf, die wir aber mit unserem Professor beheben konnten. Bei dem Arbeiten an unserem Projekt konnten wir gelerntes Wissen anwenden und konnten noch andere Kenntnisse dazugewinnen. Im Großen und Ganzen kann man sagen, dass wir unser geplantes Projekt gut gemeistert haben und wir hoffen, dass unser Auftraggeber genau so zufrieden ist wie wir.

39


9. Abbildungsverzeichnis Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb. Abb.

40

1 ER-Diagramm....................................................................... 17 2 HTML Schriftzug ................................................................... 22 3 PHP-Logo ............................................................................. 23 4 PHP-Grafik ........................................................................... 24 5 MySql - Logo ........................................................................ 25 6 CSS-Schriftzug ..................................................................... 26 7 PHP-MyAdmin....................................................................... 27 8 Screenshot Datenbank .......................................................... 28 9 Screenshot Datenbank .......................................................... 28 10 XAMPP - Logo ..................................................................... 29 11 XAMPP Control Leiste ........................................................... 29 12 Notepad++ Logo ................................................................ 31 13 Gimp Arbeitsmen端 .............................................................. 32 14 ......................................................................................... 33 15 Dia -Logo ........................................................................... 34 16 Irfanview -Logo .................................................................. 35 17 session start.php ................................................................ 37 18 check.php .......................................................................... 37 19 login.php ........................................................................... 37 20 Issuu - Logo ....................................................................... 38


10. Quellenverzeichnis http://de.selfhtml.org/javascript/beispiele/formulareingaben.htm http://de.wikipedia.org/wiki/IrfanView http://projects.gnome.org/dia/ http://de.wikipedia.org/wiki/Projektmanagement http://wirtschaftslexikon.gabler.de/Definition/projektmanagementpm.html http://de.wikipedia.org/wiki/Corporate_Design http://de.wikipedia.org/wiki/Hypertext_Markup_Language http://wirtschaftslexikon.gabler.de/Definition/html.html http://de.wikipedia.org/wiki/PHP http://de.wikipedia.org/wiki/MySQL http://de.mimi.hu/infotech/mysql.html http://de.wikipedia.org/wiki/Cascading_Style_Sheets http://www.websmith.de/webspace-provider-isp/phpmyadmin.html http://de.wikipedia.org/wiki/XAMPP http://de.wikipedia.org/wiki/Notepad%2B%2B http://de.wikipedia.org/wiki/GIMP

41


Erweiterung des Onlineshops für die Feinkostprodukte