Issuu on Google+

Fachspezifische Themenstellung aus dem Gegenstand Information & Communication Solutions

Schwerpunkt: PHP/MySQL

Projektleiterin: Sabrina Scherr

Projektmitglied: Christina Karassowitsch


Inhaltsverzeichnis 1

VORWORT.......................................................................................................................... 5

2

PREFACE ............................................................................................................................. 6

3

PROJEKTMANAGEMENT..................................................................................................... 7 3.1

„PROJEKT“ ............................................................................................................................. 7

3.2

PROJEKTMANAGEMENTPROZESS ................................................................................................. 7

3.3

ABGRENZUNGEN IM PROJEKT ..................................................................................................... 8

3.3.1

Zeitliche Abgrenzung ................................................................................................. 8

3.3.2

Sachliche Abgrenzung................................................................................................ 8

3.3.2.1

Ziele .............................................................................................................................. 9

3.3.2.2

Nicht-Ziele ..................................................................................................................... 9

3.3.3

Soziale Abgrenzung ................................................................................................... 9

3.4

PROJEKTORGANISATION .......................................................................................................... 10

3.5

PROJEKTWÜRDIGKEITSANALYSE................................................................................................. 11

3.6

DURCHFÜHRUNGSANALYSE ...................................................................................................... 12

3.7

PROJEKTUMWELTANALYSE ....................................................................................................... 13

3.8

PROJEKTSTRUKTURPLAN .......................................................................................................... 14

3.8.1

Der PSP .................................................................................................................... 14

3.8.2

Unser PSP................................................................................................................. 15

3.9

ARBEITSPAKETE ..................................................................................................................... 16

3.9.1

Arbeitspaket 1 ......................................................................................................... 17

3.9.2

Arbeitspaket 2 ......................................................................................................... 18

3.9.3

Arbeitspaket 3 ......................................................................................................... 19

3.9.4

Arbeitspaket 4 ......................................................................................................... 20

3.9.5

Arbeitspaket 5 ......................................................................................................... 21

3.9.6

Arbeitspaket 6 ......................................................................................................... 22

3.9.7

Arbeitspaket 7 ......................................................................................................... 23

3.10

PROJEKTDOKUMENTATION .................................................................................................. 24

3.10.1

4

Unsere Projektdokumentation ............................................................................ 24

3.11

PROJEKTAUFTRAG ............................................................................................................. 26

3.12

ABSCHLUSSPROZESS........................................................................................................... 27

GRUNDLAGEN .................................................................................................................. 28 4.1

HTML (HYPERTEXT MARKUP LANGUAGE) .................................................................................. 28

4.2

PHP .................................................................................................................................... 31

Sabrina Scherr & Christina Karassowitsch

2


4.3

CSS .................................................................................................................................... 31

4.4

MYSQL ............................................................................................................................... 31

4.5

NOTEPAD++ ......................................................................................................................... 31

4.6

GIMP (GNU IMAGE MANIPULATION PROGRAM) ........................................................................ 32

4.7

ER-DIAGRAMM ..................................................................................................................... 32

4.7.1

UNSER ER DIAGRAMM ............................................................................................ 33

5

DIE DOMAINREGISTRIERUNG ........................................................................................... 34

6

AUFBAU UNSERER HOMEPAGE ........................................................................................ 35

7

8

6.1

UNSER TEMPLATE .................................................................................................................. 35

6.2

UNSER BEARBEITETES TEMPLATE ............................................................................................... 36

6.2.1

Die Umgestaltung des Templates ............................................................................ 36

6.2.2

Der Aufbau unseres Templates ................................................................................ 36

6.2.3

Das Men端 ................................................................................................................ 36

CORPORATE DESIGN ........................................................................................................ 38 7.1

DIE FARBEN UNSERES LOGOS ................................................................................................... 38

7.2

DIE FARBEN UNSERES TEMPLATES ............................................................................................. 38

DER INHALT UNSERER HOMEPAGE .................................................................................. 39 8.1

DIE DATENBANK .................................................................................................................... 39

8.1.1 8.2

Die Datenbankanbindung ........................................................................................ 41

UNSERE SEITEN ..................................................................................................................... 42

9

NACHWORT ..................................................................................................................... 47

10

QUELLVERZEICHNIS .......................................................................................................... 48

Sabrina Scherr & Christina Karassowitsch

3


Abbildungsverzeichnis ABBILDUNG 1: PROJEKTUMWELTANALYSE ................................................................................................. 13 ABBILDUNG 2: UNSER PROJEKTSTRUKTURPLAN .......................................................................................... 15 ABBILDUNG: 3 PHP.............................................................................................................................. 31 ABBILDUNG 4: CSS .............................................................................................................................. 31 ABBILDUNG 5: MYSQL LOGO ................................................................................................................ 31 ABBILDUNG 6: NOTEPAD++ LOGO .......................................................................................................... 32 ABBILDUNG 7: GIMP LOGO .................................................................................................................... 32 ABBILDUNG 8: WEBSITE WORLD4YOU...................................................................................................... 34 ABBILDUNG 9: UNSER URSPRÜNGLICHES TEMPLATE .................................................................................... 35 ABBILDUNG 10: UNSER BEARBEITETES TEMPLATE....................................................................................... 36 ABBILDUNG 11: DIE DATENBANK ............................................................................................................ 39 ABBILDUNG 12: DIE DATENBANK - BEARBEITEN & LÖSCHEN ........................................................................ 40 ABBILDUNG 13: TESTSEITE ..................................................................................................................... 42 ABBILDUNG 14: INDEX.PHP .................................................................................................................... 43 ABBILDUNG 15: BRILLEN.HTML ............................................................................................................... 43 ABBILDUNG 16: KONTAKTLINSEN.HTML .................................................................................................... 44 ABBILDUNG 17: E-MAIL 1 ..................................................................................................................... 45 ABBILDUNG 18: E-MAIL 2 ..................................................................................................................... 46

Sabrina Scherr & Christina Karassowitsch

4


1 Vorwort Im Rahmen unseres Ausbildungsschwerpunktes „ICS- Information and Communication Solutions“, entschlossen wir uns als Projekt für die Reifeund Diplomprüfung für die Firma „Stadtoptik Manfred Scherr“ eine webbasierende, elektronische Informationsplattform mit dynamischer Datenbankanbindung zu erstellen. Wir gaben unser Bestes die Homepage auf die Wünsche und Bedürfnisse unseres Projektauftraggebers anzupassen. Es war uns ein großes Anliegen die Webseite so entsprechend, wie nur möglich zu gestalten. Auf den folgenden Seiten finden Sie eine genaue Dokumentation unseres Projekts.

Sabrina Scherr & Christina Karassowitsch

5


2 Preface In order to our key course element “Information and Communication Solutions” we decided to create a web-based, electronic information platform

with

dynamic

database

connection

for

the

optometrist

“STADTOPTIK Manfred Scherr”. The reason for our decision to make this project is that the optometrist wants to be represented on the Internet. We take care of forming and optimizing the website according to our project principal’s wishes since the satisfaction of the principal is our biggest request. On the following pages you’ll find the documentation about our project.

Sabrina Scherr & Christina Karassowitsch

6


3 Projektmanagement 3.1 „Projekt“ Projekte sind einzigartige und komplexe Aufgaben, die zeitlich abgegrenzt von mehreren Personen gemeinsam durchgeführt werden. Ein Projekt ist dann erfolgreich, wenn es zur geplanten Zeit mit den veranschlagten Kosten unter Nutzung der vorhandenen Ressourcen die gewünschte Qualität als Leistung erbringt. 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 Projektmanagement ist ein Prozess zur Durchführung von Projekten. Er beinhaltet:  den Projektstart  die Projektkoordination  das Projektcontrolling  das Projektmarketing  den Projektabschluss

Sabrina Scherr & Christina Karassowitsch

7


Projektmanagement umfasst die  Organisation  Planung  Steuerung  Überwachung

3.3 Abgrenzungen im Projekt Die Abgrenzungen werden in  zeitlicher Hinsicht (Projektstart – Projektende)  sachlicher Hinsicht (Ziele, Nicht-Ziele eines Projekts) und  sozialer Hinsicht betrachtet. 3.3.1 Zeitliche Abgrenzung Projektstartprozess Der

Projektstartprozess

beginnt

mit

der

Genehmigung

des

Projektantrages durch den PGA und endet mit der Fertigstellung der Projektplanung. Der Projektstart war im Oktober 2010 und das Projektende am 23. März 2011. 3.3.2 Sachliche Abgrenzung Bei der sachlichen Abgrenzung ist zu bestimmen, was alles im Projekt „Ziele“ und was alles „Nicht-Ziele“ sind.

Sabrina Scherr & Christina Karassowitsch

8


3.3.2.1 Ziele  gründliche Planung der Homepage  Homepage erstellen (Template suchen, Template anpassen,…)  vorhandenes Logo in die Homepage einbinden  Fotos einbinden  Datenbank 3.3.2.2 Nicht-Ziele  nicht ansprechende Homepage  nicht zufriedener Auftraggeber  keine weitere Wartung und Aktualisierung der Website

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.

Sabrina Scherr & Christina Karassowitsch

9


3.4 Projektorganisation

STADTOPTIK Manfred Scherr Auftraggeber

Projektleiterin Sabrina Scherr

Projektmitglieder Christina Karassowitsch

Sabrina Scherr & Christina Karassowitsch

10


3.5 Projektwürdigkeitsanalyse

Kriterium

Ausprägung hoch

komplex

Begründung

mittel niedrig x

 viel Know-how für die Umsetzung

neuartig

x

 es gibt bereits viele Homepages von Optikern  keine neuartige Idee  für uns allerdings erstes großes Projekt - neuartig

riskant

x

 Zeitplan kann eventuell nicht eingehalten werden  Ziel kann verfehlt werden

bedeutsam

x

 sehr bedeutsam für das Unternehmen

zielorientiert

x

 wir verfolgen ein fixes Ziel

Zeit- & Ressourcen-

x

 Zeitaufwand sehr hoch

aufwändig

 Materieller Aufwand: Laptop, Internet, Software

Sabrina Scherr & Christina Karassowitsch

11


3.6 Durchführungsanalyse Bereich

Frage

Personalressourcen

Ergebnis

Gibt es genügend

Gruppe mit 2

Personen in und

Personen

außerhalb der Schule, die an dem Projekt mitarbeiten können?

finanzielle Ressourcen

Können die

nur geringe

erforderlichen

notwendig

Geldmittel aufgebracht werden?

Ist das geplante

zeitliche

in 5 Monaten

Projektende zeitlich

Ressourcen

realistisch erreichbar?

materielle Ressourcen

Sind die nötigen

Laptop, Software,

Kapazitäten

Internet

vorhanden?

Know-how

Gibt es in der Schule

Einarbeitung in

das notwendige Know-

PHP/MySQL

how um das Projekt umzusetzen?

Wirtschaftlichkeit

Rechtfertigt der Nutzen

Werbung für das

den zeitmäßigen und

Unternehmen;

kostenmäßigen

Informationen

Aufwand?

Sabrina Scherr & Christina Karassowitsch

12


3.7 Projektumweltanalyse

Abbildung 1: Projektumweltanalyse

Sabrina Scherr & Christina Karassowitsch

13


3.8 Projektstrukturplan Aufgrund der sachlichen Abgrenzung und der inhaltlichen Beschäftigung mit den Betrachtungsobjekten wird der inhaltliche Ablauf des Projekts festgelegt. 3.8.1 Der PSP  zentrales Planungsinstrument im Projektmanagement  Ein Projektstrukturplan ist eine Übersicht, die allen zum Erreichen des Projektziels notwendigen Aktivitäten enthält.  enthält die Struktur der im Projekt zu bewältigenden Aktivitäten  zerlegt das Projekt in überschaubare Arbeitspakete  dient als Basis für Terminplan  Der PSP wird von allen Mitgliedern des Projektteams gemeinsam erarbeitet.

Sabrina Scherr & Christina Karassowitsch

14


3.8.2 Unser PSP

Abbildung 2: Unser Projektstrukturplan

Sabrina Scherr & Christina Karassowitsch

15


3.9 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. Jedes AP muss ein klar definiertes Ziel haben und es muss festgelegt werden, wer f端r die Einhaltung von Terminen und Kosten verantwortlich ist. In der AP-Beschreibung werden nur die wichtigsten und die unklaren Arbeitspakete spezifiziert.

Sabrina Scherr & Christina Karassowitsch

16


Unsere Arbeitspakete 3.9.1 Arbeitspaket 1 Zuständige: Sabrina & Christina Ziele: Konzept finden Nicht-Ziele:  kein passendes Konzept finden  Unstimmigkeit Start: 20. Oktober 2010 Ende: 6. November 2010 Ressourcen: Laptop, Internet

Sabrina Scherr & Christina Karassowitsch

17


3.9.2 Arbeitspaket 2 Zuständige: Sabrina & Christina Ziele:  Texte besorgen  Texte

überarbeiten

-

ohne

jegliche

Grammatik-

und

Rechtschreibfehler  Bilder besorgen, die eine gute Übersicht über das Geschäft und das Angebot bieten  Bilder bearbeiten Nicht-Ziele:  Informationen vergessen zu erwähnen  Grammatik- und Rechtschreibfehler im Text  zu lange Texte Start: 27. Oktober 2010 Ende: 7. November 2010 Ressourcen: Laptop, Internet

Sabrina Scherr & Christina Karassowitsch

18


3.9.3 Arbeitspaket 3 Zuständige: Sabrina & Christina Ziele:  Template suchen  Template bearbeiten Nicht-Ziele:  kein passendes Template finden  zu bunt  nicht modern Start: 10. November 2010 Ende: 11. November 2010 Ressourcen: Laptop, Internet

Sabrina Scherr & Christina Karassowitsch

19


3.9.4 Arbeitspaket 4 Zuständige: Christina Ziele:  Favicon erstellen  webfähige Bilder erstellen Nicht-Ziele:  schlecht sichtbares Favicon erstellen  Bilder sind nicht webfähig Start: 17. November 2010 Ende: 17. November 2010 Ressourcen: Laptop, Gimp

Sabrina Scherr & Christina Karassowitsch

20


3.9.5 Arbeitspaket 5 Zuständige: Sabrina & Christina Ziele:  Startseite erstellen  Unterseiten erstellen  Über uns erstellen  Kontakt erstellen  Bestellformular erstellen  Kontaktlinsen erstellen  Brillen erstellen  Angebote erstellen Nicht-Ziele: unübersichtliche Seiten Start: 24. November 2010 Ende: 3. Dezember 2010 Ressourcen: Notepad++, Laptop, Internet

Sabrina Scherr & Christina Karassowitsch

21


3.9.6 Arbeitspaket 6 Zuständige: Sabrina & Christina Ziele:  falls vorhanden, letzte Fehler ausbessern  wenn nötig, Website nochmals überarbeiten Nicht-Ziele: vorhandene Fehler und Probleme nicht bemerken und nicht ausbessern Start: 15. Dezember 2010 Ende: 22. Dezember 2010 Ressourcen: Laptop, Internet

Sabrina Scherr & Christina Karassowitsch

22


3.9.7 Arbeitspaket 7 Zuständige: Sabrina & Christina Ziele:  gelungene Website  Domainnamen reservieren  Website online stellen Nicht-Ziele: misslungene Website Start: 5. Januar 2011 Ende: 26. Januar 2011 Ressourcen: Laptop, Internet

Sabrina Scherr & Christina Karassowitsch

23


3.10 Projektdokumentation Während des gesamten Projekts werden die einzelnen Schritte genau im Projekthandbuch dokumentiert. 3.10.1 Unsere Projektdokumentation 20. Oktober 2010  Konzept gefunden 27. Oktober 2010  Texte besorgt  Bilder besorgt 3. November  Texte überarbeitet  Bilder bearbeitet 10. November  abwesend (Krankheit) 17. November  Template gesucht  Template bearbeitet 24. November  Favicon erstellt  Unterseiten erstellt  Domain registriert 1. Dezember

Sabrina Scherr & Christina Karassowitsch

24


 Unterseiten erstellt  Texte eingefügt 8. Dezember  Frei 15. Dezember  ICS –SA  Bestellformular angefangen zu erstellen 22. Dezember  Bestellformular fortgesetzt zu erstellen  ER-Diagramm gemacht 29. Dezember  Frei 5. Jänner  Frei 12. Jänner  Datenbank erstellt 19. Jänner  PHP-Seiten erstellt 26. Jänner  Theorieunterricht 2. Februar

Sabrina Scherr & Christina Karassowitsch

25


 PHP-Seiten erstellt 9. Februar  Schulentlasstage im Waldviertel 16. Februar  Frei 23. Februar  PHP-Seiten erstellt 2. März  Nichts am Projekt gearbeitet (Theorieunterricht + ICS - SA) 16. März  Projekt fast fertig gestellt

3.11 Projektauftrag Mit den bisherigen Planungsarbeiten wurde die Startphase beendet. Im Projektauftrag beschrieben,

werden wie

die

die

wesentlichen

Abgrenzungen,

Eckpunkte die

des

Projekts

Kontextbildungen,

die

Projektorganisation, die Phasen des Projekts sowie die benötigten Ressourcen. Der Projektauftrag 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.

Sabrina Scherr & Christina Karassowitsch

26


3.12 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.

Sabrina Scherr & Christina Karassowitsch

27


4 Grundlagen 4.1 HTML (Hypertext Markup Language) HTML wurde 1990 von dem Wissenschaftler Tim Berners-Lee erfunden. Eigentlich wollte er lediglich, dass Wissenschaftler einfacher auf Forschungsergebnisse anderer zugreifen können, doch das Projekt wurde ein größerer Erfolg. Mit der Erfindung von HTML legte er den Grundstein für das Internet, wie wir es heute kennen. Wenn man eine Webseite erstellen will, geht kein Weg an HTML vorbei. HTML ist eine Sprache, die es ermöglicht, Informationen im Internet auszugeben. Es dient zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks, sowie für beliebige Befehle für Formatierungen in Dokumenten. Diese Dokumente sind die Grundlage des World Wide Web. Um Informationen und Befehle ausführen zu können, benötigt man jedoch auch einen Browser, welcher dafür zuständig ist, die HTML-Datei zu lesen und zu interpretieren. Die sichtbare Internetseite ist die Interpretation des Quellcodes durch den Browser. Für ein untrainiertes Auge sieht der HTML-Code etwas kompliziert aus. Über spezielle Codes können Hyperlinks erstellt werden, sogenannte Weblinks. Diese Hyperlinks sind Verweise auf andere Dokumente oder Seiten im Internet. Allgemeiner Aufbau Ein HTML-Dokument besteht aus drei Bereichen:

Sabrina Scherr & Christina Karassowitsch

28


 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

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>

Sabrina Scherr & Christina Karassowitsch

29


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-URL 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 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 InlineElemente 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.

Sabrina Scherr & Christina Karassowitsch

30


4.2 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. Abbildung: 3 PHP

4.3 CSS Heutzutage ist CSS die Standard-Stylesheetsprache für Webseiten. CSS wird vor allem im Zusammenhang mit HTML und XML eingesetzt. Es legt dabei fest, wie ein bestimmter Inhalt oder Bereich einer Internetseite dargestellt werden soll. Im HTML-Dokument gibt man nur die Bedeutung einzelner Abschnitte aus; das Aussehen dieser einzelnen Abschnitte wird im CSS festgelegt. Kurz gesagt ist CSS für die optische Darstellung zuständig. Man kann es zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern und für fortgeschrittene Positionierung benutzen. CSS wird meistens als externes Stylesheet in HTML oder XML-Seiten eingebunden. Dies hat den großen Vorteil, dass für mehrere Dokumente das Stylesheet nur einmal

Abbildung 4: CSS

heruntergeladen werden muss.

4.4 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. Abbildung 5: MySQL Logo

4.5 Notepad++ Notepad++

ist

ein

Open-Source-Editor,

der

äußerst

viele

Programmiersprachen unter Microsoft Windows und anderen kompatiblen Betriebssystemen unterstützt.

Sabrina Scherr & Christina Karassowitsch

31


Das Projekt Notepad++ basiert auf Scintilla, eine sehr nützliche Editorkomponente, und ist in „C++“ geschrieben, unter reiner Nutzung der WIN32

API,

für

eine

schnellere

Ausführungsgeschwindigkeit

und

Programmgröße. Notepad++ ist zuverlässig und stabil, allerdings gibt es immer noch Bugs und einige fehlende Features.

Abbildung 6: Notepad++ Logo

4.6 GIMP (GNU Image Manipulation Program) Gimp8 ist ein freies und völlig kostenloses Open-Source-Programm, welches man für Bildbearbeitung und auch für Webgestaltung verwenden kann. Dieses Bildbearbeitungsprogramm gibt es schon seit 11 Jahren, wobei die erste Version im Februar 1996 veröffentlicht wurde. Gimp kann man unter Linux, Mac und Windows nutzen. Eine Vielzahl von Werkzeugen, Filtern und Effekten erleichtert die Bildbearbeitung und sorgt für absolut professionelle Ergebnisse. Gimp kann durch verschiedene Plugins und Scripte erweitert werden. So ermöglicht

ein

Plugin

Bewegungsunschärfe

zum zu

Beispiel

entfernen,

scharf was

zu

zeichnen

besonders

für

und die

Nachbearbeitung von Fotos interessant ist.

Abbildung 7: Gimp Logo

4.7 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.

Sabrina Scherr & Christina Karassowitsch

32


4.7.1 UNSER ER DIAGRAMM

Sabrina Scherr & Christina Karassowitsch

33


5 Die Domainregistrierung Wir haben uns entschieden einen Domainnamen bei world4you zu registrieren. Unser Domainname lautet www.stadtoptik-scherr.at. Mit Gl端ck war dieser Domainname noch frei.

Abbildung 8: Website world4you

Sabrina Scherr & Christina Karassowitsch

34


6 Aufbau unserer Homepage 6.1 Unser 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.

Abbildung 9: Unser urspr端ngliches Template

Sabrina Scherr & Christina Karassowitsch

35


6.2 Unser bearbeitetes Template

Abbildung 10: Unser bearbeitetes Template

6.2.1 Die Umgestaltung des Templates Da uns die Farben schon am Anfang sehr gut gefallen haben und die Farben auch gut zu dem Logo der Firma passen, haben wir uns entschieden

nur

minimale

Farbänderungen

vorzunehmen

z.B.

Schriftfarben. Außerdem haben wir uns entschlossen, dass die Navigationsleiste ausschließlich links zu sehen ist. 6.2.2 Der Aufbau unseres Templates Unser Template wird mit Hilfe der css-Datei „style.css“ formatiert. 6.2.3 Das Menü 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 genauer definiert

Sabrina Scherr & Christina Karassowitsch

36


worden. Die Farben der einzelnen Men端punkte wurden auch in der cssDatei bestimmt.

Sabrina Scherr & Christina Karassowitsch

37


7 Corporate Design 7.1 Die Farben unseres Logos HTML-CODE : #013c64 R: 1 G: 60 B: 100

7.2 Die Farben unseres Templates Button: HTML-CODE: #ced8df R: 206 G: 216 B: 223 Text Hintergrundfarbe: HTML-CODE: #eeeeee R: 238 G: 238 B: 238 Hintergrundfarbe: HTML-CODE: #d9e1e5 R: 217 G: 225 B: 229

Sabrina Scherr & Christina Karassowitsch

38


8 Der Inhalt unserer Homepage 8.1 Die Datenbank Zuerst haben wir für die Erstellung der Datenbank ein ER-Diagramm fertiggestellt und haben anschließend unsere Datenbank gemacht. Die Datenbank wurde von uns mit Hilfe von phpMyAdmin direkt am Schulserver erstellt. Unsere Datenbank heißt Stadtoptik und die Tabelle haben wir „news“ benannt.

Abbildung 11: Die Datenbank

Sabrina Scherr & Christina Karassowitsch

39


Hier sieht man die laufenden Aktionen. Hier kรถnnen ร„nderungen und Lรถschungen vorgenommen werden.

Abbildung 12: Die Datenbank - Bearbeiten & Lรถschen

Sabrina Scherr & Christina Karassowitsch

40


8.1.1 Die Datenbankanbindung <? php $benutzer="root"; $pass=""; $db="stadtoptik"; $link=mysql_connect("localhost",$benutzer,$pass); if (! $link) die ("keine Verbindung zu mysql"); mysql_select_db($db,$link) or die ("Konnte $db nicht &ouml;ffnen".mysql_error()); $ergebnis

=

mysql_query("SELECT

*

FROM

news

ORDER

BY

aktionsname;"); php ?>

Sabrina Scherr & Christina Karassowitsch

41


8.2 Unsere Seiten Da unsere Homepage schon online ist, haben wir uns dazu entschieden vorerst eine Testseite online zu stellen.

Abbildung 13: Testseite

Sabrina Scherr & Christina Karassowitsch

42


Abbildung 14: index.php

Abbildung 15: brillen.html

Sabrina Scherr & Christina Karassowitsch

43


Abbildung 16: kontaktlinsen.html

kontaktlinsen-online.html Da wir Bilder von der Firma Dailies verwendet haben, haben wir uns selbstverst채ndlich die Genehmigung f체r die Verwendung der Bilder eingeholt. Hier der E-Mail Verkehr zwischen Herrn Wittmann und Sabrina Scherr:

Sabrina Scherr & Christina Karassowitsch

44


Sabrina Scherr & Christina Karassowitsch

45

Abbildung 17: E-Mail 1


Abbildung 18: E-Mail 2

Sabrina Scherr & Christina Karassowitsch

46


9 Nachwort Nach monatelanger harter Arbeit, sind wir stolz, dass wir nun eine funktionsfähige Homepage vorweisen können. Das Grundgerüst unserer Homepage war schnell fertig, genauso wie die statischen Seiten. Nervenaufreibender war jedoch das Gestalten der dynamischen Seiten. Durch gezieltes, genaues und konzentriertes Arbeiten haben wir aber auch diese komplizierte Aufgabe gemeistert. Die Arbeit an unserem Projekt war zwar oft hart und anstrengend, jedoch auch immer spannend und interessant. Das Wichtigste dabei ist, dass wir an der Umsetzung dieses praktischen Beispiels sehr viel dazugelernt haben. Mittlerweile haben wir festgestellt, dass man nur mit guter Planung ein erfolgreiches Projekt abschließen kann. Einen wichtigen Punkt konnten wir aus unserem Projekt noch mitnehmen: Ein gutes Projekt kann ohne „das Team“ und die Kommunikation definitiv nicht abgewickelt werden. Im Großen und Ganzen hat uns die Arbeit an dem Projekt viel Spaß und Freude bereitet. Letztendlich sind wir stolz auf das Resultat unserer Arbeit.

Sabrina Scherr & Christina Karassowitsch

47


10 Quellverzeichnis http://de.wikipedia.org/wiki/Html http://de.wikipedia.org/wiki/Php http://de.wikipedia.org/wiki/Cascading_Style_Sheets http://de.wikipedia.org/wiki/Mysql http://de.wikipedia.org/wiki/Notepad%2B%2B http://de.wikipedia.org/wiki/Gimp Template:

http://freewebtemplates.com

Sabrina Scherr & Christina Karassowitsch

48


Stadtoptik Manfred Scherr