Salon Huber

Sarah Stolberger, Barbara Taschler 0 von 47


PPrroojjeekkttaauuffttrraaggggeebbeerr:: PPaannnnoonneeuumm NNeeuussiieeddll aamm SSeeee

PPrroojjeekktttteeaamm:: PPrroojjeekkttlleeiitteerr:: SSaarraahh SSttoollbbeerrggeerr PPrroojjeekkttmmiittaarrbbeeiitteerr:: BBaarrbbaarraa TTaasscchhlleerr

SScchhuulljjaahhrr:: 22000099//22001100,, PPaannnnoonneeuumm NNeeuussiieeddll aamm SSeeee


IInnddeexx 1 VORWORT.......................................................................................................................... 4

2 PREFACE ............................................................................................................................. 5

3 EINFÜHRUNG IN DAS PROJEKT ........................................................................................... 6

3.1 ALLGEMEINE INFORMATIONEN ................................................................................................... 6 3.1.1 Erstes Projekt ............................................................................................................. 6 3.1.2 Zweites Projekt .......................................................................................................... 6 3.1.3 Ziel ............................................................................................................................. 6 3.1.4 Template.................................................................................................................... 6 3.1.5 Inhalt der Website ..................................................................................................... 6

3.2 MITSCHRIFTEN: ....................................................................................................................... 7 3.3 SONSTIGE TERMINE AUßERHALB DER SCHULE ................................................................................ 9 3.4 SEITEN DER HOMEPAGE ............................................................................................................ 9 3.5 DATENBANK: ........................................................................................................................ 10

4 ANGEWANDTE PROGRAMME: ......................................................................................... 11

5 EINFÜHRUNG IN DIE PROGRAMME UND SPRACHEN ........................................................ 12

5.1 HTML ................................................................................................................................. 12 5.1.1 Allgemeines ............................................................................................................. 12 5.1.2 Allgemeine Struktur ................................................................................................. 12 5.1.3 Grundstruktur einer Website ................................................................................... 12 5.1.4 HTML-Kopf ............................................................................................................... 13

5.1.4.1 title.............................................................................................................................. 13 5.1.4.2 meta ............................................................................................................................ 13 5.1.4.3 base ............................................................................................................................ 13 5.1.4.4 link .............................................................................................................................. 13 5.1.4.5 script ........................................................................................................................... 13 5.1.4.6 style ............................................................................................................................ 13 5.1.4.7 object .......................................................................................................................... 13

5.1.5 HTML-Körper ........................................................................................................... 13 5.1.5.1 Überschrift .................................................................................................................. 13 5.1.5.2 Ein Hyperlink: .............................................................................................................. 14 5.1.5.3 Formatierung .............................................................................................................. 14

5.2 PHP .................................................................................................................................... 14 5.2.1 Allgemeines ............................................................................................................. 14 5.2.2 Code-Beispiel ........................................................................................................... 16

5.3 CSS .................................................................................................................................... 16 5.3.1 Allgemeines ............................................................................................................. 16 5.3.2 Syntax ...................................................................................................................... 17 5.3.3 Kombination mit HTML bzw. XHTML ....................................................................... 17

5.3.3.1 externes Stylesheet für eine (X)HTML-Datei ............................................................... 17 5.3.3.2 externes Stylesheet für eine XHTML-Datei ................................................................. 17 5.3.3.3 internes Stylesheet in einer (X)HTML-Datei ................................................................ 18 5.3.3.4 Innerhalb von (X)HTML-Tags....................................................................................... 18

5.3.4 Einbindung ............................................................................................................... 18 5.3.4.1 Dauerhafte Stylesheets (persistent) ........................................................................... 18 5.3.4.2 Standard Stylesheets (preferred) ................................................................................ 18 5.3.4.3 Alternative Stylesheets (alternate) ............................................................................. 18

5.4 MYSQL ............................................................................................................................... 19 5.4.1 Allgemeines ............................................................................................................. 19

6 DOKUMENTATION DER ARBEITSSCHRITTE ....................................................................... 20

6.1 PROJEKTMANAGEMENT ........................................................................................................... 20


6.1.1 Ziele ......................................................................................................................... 20 6.1.2 Nicht-Ziele: .............................................................................................................. 20 6.1.3 Mindmap erstellen .................................................................................................. 20 6.1.4 ER-Diagramm erstellen ............................................................................................ 23 6.1.5 Meilensteinplan erstellen ........................................................................................ 25 6.1.6 Projektstrukturplan erstellen ................................................................................... 26

6.2 PROJEKTDUCHFÜHRUNG .......................................................................................................... 27 6.2.1 Passendes Template suchen .................................................................................... 27 6.2.2 Frontend-Seiten erstellen ........................................................................................ 28

6.2.2.1 menu.inc ..................................................................................................................... 28 6.2.2.2 index.php .................................................................................................................... 28 6.2.2.3 angestellte.php ........................................................................................................... 29 6.2.2.4 dienstleistungen.php .................................................................................................. 30 6.2.2.5 produkte.php .............................................................................................................. 31 6.2.2.6 db_pass.inc ................................................................................................................. 31 6.2.2.7 impressum.php ........................................................................................................... 32

6.2.3 Datenbank auf phpMyAdmin erstellen .................................................................... 34 6.2.3.1 kunde .......................................................................................................................... 34 6.2.3.2 angestellte .................................................................................................................. 34 6.2.3.3 produkte ..................................................................................................................... 35 6.2.3.4 kategorie ..................................................................................................................... 36 6.2.3.5 Datenbankanbindung ................................................................................................. 37

6.2.4 Backend-Seiten erstellen ......................................................................................... 38 6.2.4.1 index.php .................................................................................................................... 38 6.2.4.2 check.php .................................................................................................................... 38 6.2.4.3 benutzer_alle.php ....................................................................................................... 39 6.2.4.4 benutzer_hinzufuegen.php......................................................................................... 39 6.2.4.5 benutzer_neu.php ...................................................................................................... 40 6.2.4.6 benutzer_aendern.php ............................................................................................... 41 6.2.4.7 benutzer_db_aendern.php ......................................................................................... 42 6.2.4.8 benutzer_loeschen.php .............................................................................................. 43

7 NACHWORT ..................................................................................................................... 44

8 QUELLENVERZEICHNIS ..................................................................................................... 45

8.1 QUELLENVERZEICHNIS: ............................................................................................................ 45 8.1.1 Allgemeine Informationen ....................................................................................... 45 8.1.2 HTML ....................................................................................................................... 45 8.1.3 PHP .......................................................................................................................... 45 8.1.4 CSS ........................................................................................................................... 45 8.1.5 Mysql ....................................................................................................................... 45 8.1.6 Projektmanagement ................................................................................................ 45 8.1.7 Template.................................................................................................................. 45 8.1.8 Javascript ................................................................................................................. 45 8.1.9 Wella-image ............................................................................................................ 46 8.1.10 SP-image ............................................................................................................. 46 8.1.11 Anfahrtsplan ....................................................................................................... 46


11 VVoorrwwoorrtt

Im Zuge unseres Ausbildungsschwerpunktes Information

Communication Solutions erarbeiteten wir unsere fachspezifische

Arbeit für die Reife- und Diplomprüfung am Pannoneum Neusiedl

am See.

Die Voraussetzung dafür war eine passende Homepage für den

Frisör Salon Huber in Bruck an der Leitha zu erstellen.

Unser Ziel war es die Homepage vom Design so ansprechend

und benutzerfreundlich wie möglich zu gestalten. Dabei sollten

alle gewünschten Inhalte berücksichtigt und neue Ideen

eingebracht werden.

Das gesamte Team hofft, dass die Arbeit erfolgreich beendet

wird und sowohl eine umfangreiche fachspezifische

Themenstellung als auch eine gelungene Homepage für den

Salon Huber darstellt.


22 PPrreeffaaccee

On the course of our key course element Information

Communication Solution we developed our subject-specific

selection of topic for our final exam at Pannoneum in Neusiedl

am See.

The condition was to design an appropriate homepage for the

coiffeur Salon Huber in Bruck an der Leitha.

Our target was to create an attractive and user-friendly design

for our homepage. There should all desired contents be included

and new ideas should be inserted.

The whole team expects to finish the project successfully. It

should demonstrate both an extensively subject-specific

selection of topic and effective homepage for the Salon Huber.


33 EEiinnffüühhrruunngg iinn ddaass PPrroojjeekktt

33..11 AAllllggeemmeeiinnee IInnffoorrmmaattiioonneenn

3.1.1 Erstes Projekt

High-Quality Events � nicht möglich, weil bereits eine

Homepage vorhanden ist

3.1.2 Zweites Projekt

Salon Huber � noch keine Homepage

3.1.3 Ziel

passende Homepage erstellen

3.1.4 Template

modernes, ansprechendes Design, passend zum Salon

3.1.5 Inhalt der Website

übersichtliche Startseite

Informative Unterseiten

Frontend für Besucher

Backend für Betriebsleiter und Mitarbeiter

Projektstrukturplan und Meilensteinplan erstellen, laufend mit

dokumentieren und überarbeiten


33..22 MMiittsscchhrriifftteenn::

29.10.09

� Informationen zu High-Quality Events

suchen

� PowerPoint über Projekt der Firma erstellen

� � nicht weiter ausführbar, weil bereits eine

Website besteht

5.11.09 � neues Projekt suchen � Salon Huber

� Informationen aus Internet beschaffen

19.11.09

� ER-Diagramm erstellen

� Mindmap erstellen

� passendes Template suchen � Free CSS

Template

26.11.09

� Bilder suchen

� Template verändern

� Head-Bild bearbeiten

3.12.09

� Seiten erstellen

� Navigation bearbeiten

� Seiten bearbeiten

10.12.09

� zweite CSS erstellen

� entsprechende Seiten mit neuer CSS

verlinken

� Mitschriften erstellen

7.1.10 � Bilder bearbeiten

� auf entsprechenden Seiten einfügen


14.1.10 � Datenbank auf phpMyAdmin erstellen

20.1.10 � Datenbank fertigstellen

� erstellte Dateien auf CoffeeCup uploaden

21.1.10

� Einführung in Projektmanagement

� Arbeitsplan erstellen

� Meilensteine erstellen

18.2.10 � Behebung der Fehler beim Hochladen

� Bildwechsler

25.2.10

� Datenbank eingebunden

� Session-Seiten erstellt: index, check,

benutzer_alle, benutzer_hinzufuegen,

benutzer_neu,

4.3.10 � Session-Seiten fertiggestellt:

benutzer_aendern, benutzer_db_aendern,

11.3.10

� Session-Seiten fertiggestellt:

benutzer_loeschen

� Fehlerbehebung

� Dokumentation

18.3.10

� neue Tabelle anlegen: angestellte

� Datensätze hinzufügen

� Bilder einbinden

25.3.10

� Datenbank erneut exportiert und auf Server

hochgeladen

� neue Tabelle in angestellte.html einbinden


33..33 SSoonnssttiiggee TTeerrmmiinnee aauußßeerrhhaallbb ddeerr SScchhuullee

33..44 SSeeiitteenn ddeerr HHoommeeppaaggee

Navigation/ Unterseiten

� Startseite

� Angestellte

� Dienstleistungen

� Produkte

� Impressum

Frontpage � alle sichtbaren Seiten für Besucher

Backpage

� alle sichtbaren Seiten für Betriebsleiter und

Mitarbeiter

� können Kunden hinzufügen, ändern, löschen

� mit Dienstleistungen verknüpfen

� Dokumentation

1.12.09

� Besuch im Salon Huber

� Fotos machen

� Gespräch mit Mitarbeitern

8.1.10 � Besuch im Salon Huber

� Beschaffen einer Preisliste


33..55 DDaatteennbbaannkk::

Friseur Huber

� 1. Tabelle: kunde

o kundennr (= primary key) o vorname o nachname o geburtsdatum o straße o pzl o Wohnort o telefonnr o e-mail

� 2. Tabelle: angestellte o id (=primary key) o vorname o nachname o funktion o bild

� 2. Tabelle: produkte o prdoktnr (=primary key) o bildname o kategorienr

� 3. Tabelle: kategorie o kategorienr o kategoriename


44 AAnnggeewwaannddttee PPrrooggrraammmmee::

� Notepad ++

� Kompozer

� Gimp

� Paint

� Firebug

� CoffeeCup


55 EEiinnffüühhrruunngg iinn ddiiee PPrrooggrraammmmee uunndd

SSpprraacchheenn

55..11 HHTTMMLL11

5.1.1 Allgemeines

Die Hypertext Markup Language, auch als Hypertext bezeichnet, 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. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form von Metainformationen, 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 weiterentwickelt. Es existiert auch die Extensible Hypertext Markup Language (XHTML).

5.1.2 Allgemeine Struktur

Ein HTML-Dokument besteht aus drei Bereichen:

1. der Dokumenttypdeklaration (Doctype) ganz am Anfang der Datei, die die verwendete Dokumenttypdefinition angibt, z. B. HTML

2. dem HTML-Kopf (Head), der hauptsächlich technische oder dokumentarische Informationen enthält, die üblicherweise nicht im Anzeigebereich des Browsers dargestellt werden

3. dem HTML-Körper (Body), der jene Informationen enthält, die üblicherweise im Anzeigebereich des Browsers zu sehen sind.

5.1.3 Grundstruktur einer Website

<html> <head> <title> Titel der Webseite </title> /* Evtl. weitere Kopfinformationen */

1 o.V.: http://de.wikipedia.org/wiki/Html


</head> <body> Inhalt der Webseite </body> </html> 5.1.4 HTML-Kopf

Im Kopf können sieben verschiedene Elemente angewandt werden:

5.1.4.1 title bezeichnet den Titel der Seite, der von den meisten Browsern in der Titelleiste angezeigt wird

5.1.4.2 meta

kann vielfältige Metadaten enthalten

5.1.4.3 base gibt entweder eine Basis-URI oder einen Basisframe an

5.1.4.4 link

dient zur Angabe von logischen Beziehungen zu anderen Ressourcen. Am häufigsten zur Einbindung von Stylesheets benutzt

5.1.4.5 script

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

5.1.4.6 style

enthält Stilinformationen, hauptsächlich CSS-Deklarationen

5.1.4.7 object bindet eine externe Datei ein, Browser dürfen solche Objekte im Dokumentkopf nicht darstellen.

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

5.1.5.1 Überschrift


Eine Hauptüberschrift wird so ausgezeichnet: <h1>Hauptüberschrift</h1>

h1 steht für Heading 1, zeichnet also eine Überschrift der höchsten Gliederungsstufe aus. Weiter möglich sind h2 bis h6, Überschriften zweiter bis sechster Gliederungsstufe. Die Präsentation dieser Überschriften ist von ihrer strukturierenden Bedeutung unabhängig und kann mit CSS beeinflusst werden.

5.1.5.2 Ein Hyperlink: <a href="http://www.example.com/">Dies ist ein Link auf example.com</a>

Hyperlinks sind Verweise auf andere Dateien, meistens ebenfalls HTML-Dateien, die üblicherweise im Browser durch Klick verfolgt werden können.

5.1.5.3 Formatierung

Zur Logik stehen zum Beispiel die Elemente strong und em bereit, mit denen sich stark hervorgehobener oder betonter Text auszeichnen lässt. Per Voreinstellung werden strong- und em-Elemente durch Fettschrift beziehungsweise kursive Schrift gerendert.

55..22 PPHHPP22

5.2.1 Allgemeines

Akronym für Hypertext Preprocessor

PHP ist eine Skriptsprache mit einer an C angelehnten Syntax, die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen verwendet wird. PHP wird als freie Software unter der PHP-Lizenz verbreitet.

PHP hat eine breite Datenbankunterstützung und Internet-Protokolleinbindung sowie die Verfügbarkeit zahlreicher, zusätzlicher

2 o.V.: http://de.wikipedia.org/wiki/Php

Sarah Stolberger, Barbara Taschler

Funktionsbibliothekenverwendet um zum Beispiel existieren und Grafiken einzubinden und dynamisch darzustellen.

Darstellung der Funktionsweise von PHP

PHP ist ein System, das PHPdass der Quelltext nicht an den einem Interpreter auf dem Interpreters wird an den Browser geschickt. In den meisten Fällen ist das ein HTML-Dokument, wobei es mit PHP aber auch möglich ist, andere Dateitypen, wie Bilder oder

Um eine PHP-Datei im Rahmen einer können, benötigt man ein System, das mit den in der Datei enthaltenen Anweisungen umgehen kann. Aus Schnittstelle, der Interpreter von einem ServerDienst, wie Apacheals Betriebssystem, Apache als Webserver, und PHP wird WAMPLaden und Konfigurieren von werden etwa im Projekt

Die serverseitige Ausführung bietet einige Vorteile. Beim sind keine Besonderheiten erforderlich, so Unvereinbarkeiten auftreten wie bei den verschiedenen Ausprägungen von JavaScript. Der PHPgenerierten Daten sind für den Besucher sichtbar. Gleiches gilt für andere Ressourcen wie DatenbankenClient benötigen.

Ein Nachteil ist, dass jede Aktion des Benutzers erst beim erneuten Aufruf der Seite erfasst wird. Da PHP normalerweise in einer WebserverUmgebung läuft, unterliegt es auch dem zustandslosen Seite belastet den Webserver durch den Interpreter, zudem arbeitet der Interpreter den Quelltext beReaktionsgeschwindigkeit des Servers und erhöht die Last.

Mit PHP lassen sich auch die vom Internet unabhängig sind. Eine spezielle Erweiterung stellt sogar


Funktionsbibliotheken. Wird beim programmieren von Webseiten verwendet um zum Beispiel existieren Programmbibliothekenund Grafiken einzubinden und dynamisch darzustellen.

Darstellung der Funktionsweise von PHP

ein System, das PHP-Code serverseitig verarbeitet. Das bedeutet, nicht an den Webbrowser übermittelt wird, sondern an

auf dem Webserver. Erst die Ausgabe des PHPInterpreters wird an den Browser geschickt. In den meisten Fällen ist das

Dokument, wobei es mit PHP aber auch möglich ist, andere , wie Bilder oder PDF-Dateien, zu generieren.

Datei im Rahmen einer Webanwendung ausführen zu können, benötigt man ein System, das mit den in der Datei enthaltenen Anweisungen umgehen kann. Aus diesem Grund wird durch eine Schnittstelle, der Interpreter von einem Server-Daemon oder Server

Apache oder IIS, ausgeführt. Die Kombination von , Apache als Webserver, MySQL als Datenbanksystem

WAMP genannt. Fertige WAMP-Pakete, die das einzelne Laden und Konfigurieren von Paketen aus dem Internet unnötig machen, werden etwa im Projekt XAMPP entwickelt.

Die serverseitige Ausführung bietet einige Vorteile. Beim Clientsind keine Besonderheiten erforderlich, so können keine Unvereinbarkeiten auftreten wie bei den verschiedenen Ausprägungen

. Der PHP-Quelltext bleibt auf dem Server und nur die sind für den Besucher sichtbar. Gleiches gilt für andere

Datenbanken, die daher keine direkte Verbindung zum

Ein Nachteil ist, dass jede Aktion des Benutzers erst beim erneuten Aufruf der Seite erfasst wird. Da PHP normalerweise in einer Webserver

unterliegt es auch dem zustandslosen HTTPSeite belastet den Webserver durch den Interpreter, zudem arbeitet der Interpreter den Quelltext bei jedem Aufruf erneut ab. Das mindert die Reaktionsgeschwindigkeit des Servers und erhöht die Last.

Mit PHP lassen sich auch kommandozeilenorientierte Skripte schreiben, ternet unabhängig sind. Eine spezielle Erweiterung stellt sogar

15 von 47

. Wird beim programmieren von Webseiten Programmbibliotheken, um Bilder

verarbeitet. Das bedeutet, übermittelt wird, sondern an

. Erst die Ausgabe des PHP-Interpreters wird an den Browser geschickt. In den meisten Fällen ist das

Dokument, wobei es mit PHP aber auch möglich ist, andere

ausführen zu können, benötigt man ein System, das mit den in der Datei enthaltenen

diesem Grund wird durch eine oder Server-

, ausgeführt. Die Kombination von Windows als Datenbanksystem

Pakete, die das einzelne aus dem Internet unnötig machen,

Client (Browser)

Unvereinbarkeiten auftreten wie bei den verschiedenen Ausprägungen Quelltext bleibt auf dem Server und nur die

sind für den Besucher sichtbar. Gleiches gilt für andere , die daher keine direkte Verbindung zum

Ein Nachteil ist, dass jede Aktion des Benutzers erst beim erneuten Aufruf der Seite erfasst wird. Da PHP normalerweise in einer Webserver-

HTTP. Jede PHP-Seite belastet den Webserver durch den Interpreter, zudem arbeitet der

i jedem Aufruf erneut ab. Das mindert die

Skripte schreiben, ternet unabhängig sind. Eine spezielle Erweiterung stellt sogar


eine Programmierschnittstelle für eine grafische Oberfläche zur Verfügung, für die weder ein Webserver noch ein Browser benötigt werden.

5.2.2 Code-Beispiel

Einfaches PHP-Skript (gibt „Hallo Welt!“ aus):

<?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>

Anmerkung: Der PHP-Interpreter interpretiert den Code zwischen <?php und ?>, der übrige Code (üblicherweise HTML) wird unverändert an den Client zurückgegeben.

55..33 CCSSSS33

5.3.1 Allgemeines

Cascading Style Sheets 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 3 o.V.: http://de.wikipedia.org/wiki/Cascading_Style_Sheets


Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. Mit anderen Worten, man trennt den Inhalt von der optischen Gestaltung.

Mit CSS ist es möglich, für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) eine unterschiedliche Darstellung anzugeben. Das ist nützlich, um zum Beispiel Hyperlinks beim Drucken extra aufzuführen oder für Geräte mit geringerer Auflösung (zum Beispiel PDA oder Mobiltelefon) die Anzeige zu optimieren (geringere Seitenbreite und -höhe).

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.

5.3.2 Syntax

Definition des Syntaxschemas

Eine CSS-Regel hat folgendes Aussehen:

Selektor [, Selektor2, ...] { Eigenschaft-A: Wert-A; Eigenschaft-B: Wert-B } /* Kommentar */

Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Die folgende Tabelle gibt die wichtigsten Selektoren wieder, mit denen Elemente (meist HTML-Tags) ausgewählt werden können.

Mögliche Auswahlkriterien sind direkte Merkmale der Elemente (Typ, Klasse, ID, Attributwerte), aber auch strukturelle Eigenschaften (Existenz eines bestimmten übergeordneten Elementes oder eines Vorgängerelementes). Die Auswahlkriterien lassen sich miteinander kombinieren.

5.3.3 Kombination mit HTML bzw. XHTML

Am häufigsten wird CSS mit HTML oder XHTML kombiniert. Dies kann an mehreren Orten geschehen, hier einige Beispiele:

5.3.3.1 externes Stylesheet für eine (X)HTML-Datei <link rel="stylesheet" type="text/css" href="beispiel.css" />

5.3.3.2 externes Stylesheet für eine XHTML-Datei


<?xml-stylesheet type="text/css" href="beispiel.css" ?>

5.3.3.3 internes Stylesheet in einer (X)HTML-Datei <head><title>Dokument mit Formatierungen</title> <style type="text/css"> body { color: purple; background-color: #d8da3d } </style></head>

5.3.3.4 Innerhalb von (X)HTML-Tags

<span style="font-size: small;">Text</span>

5.3.4 Einbindung

Die Einbindung als externes Stylesheet ist dabei die am häufigsten verwendete Methode. Sie bietet den Vorteil, dass für mehrere Dokumente, die denselben Regelsatz benutzen, das Stylesheet nur einmal heruntergeladen werden muss. Auch vermeidet man so sich wiederholenden Code. CSS selbst ermöglicht durch die Import-Regel das Einbinden von weiteren externen Stylesheets.

<head><title></title> <style type="text/css"> @import url(url_des_stylesheets); </style> </head>

Es gibt auch alternative Stylesheets. Die erste oben genannte Variante ist eine davon. Es gibt noch zwei weitere, aber der Vollständigkeit halber werden jetzt noch einmal alle drei beschrieben.

5.3.4.1 Dauerhafte Stylesheets (persistent) <link rel="stylesheet" type="text/css" href="beispiel.css" />

Wenn man ein Stylesheet mit diesem Befehl einbindet, wird es auf jeden Fall verwendet.

5.3.4.2 Standard Stylesheets (preferred) <link rel="stylesheet" type="text/css" href="beispiel.css" title="IrgendeinTitel" />

Sollte man diese Einbindung verwenden, wird das Stylesheet verwendet, solange der Benutzer kein anderes ausgewählt hat.

5.3.4.3 Alternative Stylesheets (alternate) <link rel="alternate stylesheet" type="text/css" href="beispiel.css" title="IrgendeinTitel" />


Wird das Stylesheet so mit dem HTML-Dokument verknüpft, kann bzw. muss es der Benutzer selber auswählen, damit es verwendet wird. Das wirkt sich derzeit nur in den Browsern Firefox, Opera oder Konqueror aus, da diese Funktion derzeit nur von diesen Browsern unterstützt wird. Außerdem sollte man ein "alternate stylesheet" nur in Verbindung mit einem anderen fest eingebundenen verwenden.

55..44 MMyySSQQLL

5.4.1 Allgemeines

Der MySQL Server ist ein relationales Datenbankverwaltungssystem, ist als Open-Source-Software sowie als kommerzielle Enterpriseversion für verschiedene Betriebssysteme verfügbar und bildet die Grundlage für viele dynamische Websites.

MySQL Server ist eine freie Software, die unter der General Public License steht. Da MySQL das volle Copyright an den Quellcodes besitzen, ist die Software alternativ auch unter einer kommerziellen Lizenz verfügbar.

Einem Datenbankmanagementsystem 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 PHP eingesetzt. Viele Webdienste bedienen sich dieses Dienstes. Sie betreiben mehrere hundert MySQL-Server, über die die Zugriffe aus dem Netz abgewickelt werden. MySQL wird in vielen Produkten als eingebettetes Datenbanksystem eingesetzt.


66 DDookkuummeennttaattiioonn ddeerr AArrbbeeiittsssscchhrriittttee

66..11 PPrroojjeekkttmmaannaaggeemmeenntt

6.1.1 Ziele

oo ppaasssseennddeess TTeemmppllaattee wwäähhlleenn

oo SSeeiitteennssttrruukkttuurr aauuffsstteelllleenn

oo ddyynnaammiisscchhee uunndd ssttaattiisscchhee SSeeiitteenn eerrsstteelllleenn

oo IInnffoorrmmaattiioonn rruunndd uumm ddeenn BBeettrriieebb eeiinnbbrriinnggeenn

oo TTeerrmmiinnkkaalleennddeerr

oo BBeesscchhrreeiibbuunngg ddeess BBeettrriieebbss

oo BBiillddeerr eeiinnbbiinnddeenn zzuumm bbeesssseerreenn DDeessiiggnn ddeerr HHoommeeppaaggee

oo KKoonnttaakkttee uunndd AAnnffaahhrrttsspplläännee eeiinnbbiinnddeenn

oo PPrroodduukkttaannggeebboott

oo MMiittaarrbbeeiitteerr uunndd BBeettrriieebbsslleeiitteerr vvoorrsstteelllleenn

oo BBeesscchhrreeiibbuunngg ddeerr SSeerrvviicceess

oo EErrllääuutteerruunngg ddeess PPrroojjeekkttss

6.1.2 Nicht-Ziele:

oo nniicchhtt ffuunnkkttiioonniieerreennddee HHoommeeppaaggee

oo KKoommpplleettee UUmmssttrruukkttuurriieerruunngg ddeerr SSeeiittee

oo UUnnnnööttiiggee IInnhhaallttee bbzzww.. SSppaamm

6.1.3 Mindmap erstellen

Ausgegangen wurde vom Salon Huber, es wurde eine Ist-Situation und eine Soll-Situation geschaffen. In der Soll-Situation


haben wir uns einen Überblick wie die Frontend-Seiten aufgegliedert werden sollen, geschaffen und welchen Inhalt sie enthalten sollen.



6.1.4 ER-Diagramm erstellen


Wir haben ein ER-Diagramm angelegt anhand der drei Tabellen in der Datenbank: kunde, dienstleistungen und angestellte.


6.1.5 Meilensteinplan erstellen

Meilensteinplan wurde anhand des Projektmanagementskriptums erstellt und mit Plan-Terminen und Ist-Terminen ausgestattet.

MEILENSTEINPLAN

Plan-Termin

Ist-Termin PSP CODE

Meilenstein

22.10.09 22.10.09 1.1 Projektstart

29.10.09 19.11.09 1.2 Projekt wurde definiert

26.11.09 26.11.09 2.1 Design

3.12.09 3.12.09 3.1 Navigation

10.12.09 7.1.10 4.1 Inhalt

28.1.10 25.2.10 5.2 Datenbank wurde

eingebunden

14.1.10 20.1.10 5.1 Datenbank wurde erstellt

5.2.10 11.3.10 6.1 Sessions

12.4.10 15.4.10 7.1 Projektschluss


6.1.6 Projektstrukturplan erstellen

Den Projektstrukturplan haben wir anhand der Projektmanagementunterlagen erarbeitet und für unser Projekt angepasst.


66..22 PPrroojjeekkttdduucchhffüühhrruunngg

6.2.1 Passendes Template suchen

Free CSS Template • Navigation schon vorhanden

• header � Bild in die CSS eingefügt

• footer � © 2009 All Rights Reserved • Designed byFree CSS Templates � Copyright © 2009 HUBER Bruck an der Leitha • Designed by Sarah Stolberger, Barbara Taschler und Free CSS Templates


6.2.2 Frontend-Seiten erstellen

6.2.2.1 menu.inc

• Um das Menü nicht in jeder Datei ändern zu müssen, wird die Navigation in einer include-Datei verfasst und mit einem include-Befehl in jeder beliebigen Seite eingebunden

• Navigation � in jeder Seite einbinden

6.2.2.2 index.php

• Text und Bilder einfügen • Bildwechsler einbinden


6.2.2.3 angestellte.php

• Text und Bilder einfügen • Datenbank einbinden � Tabelle Angestellte


6.2.2.4 dienstleistungen.php

• Text und Bilder einfügen


6.2.2.5 produkte.php

• Text und Bilder einfügen • Datenbank einbinden • Dropdown-Menü einbinden

6.2.2.6 db_pass.inc

• Um ein ständiges Kopieren der Datenbankanbindung zu

verhindern, wird die Datenbankanbindung in einer include-Datei verfasst und mit einem include-Befehl in jeder beliebigen Datei eingebunden


• in produkte.php einbinden

6.2.2.7 impressum.php

• Text und Bilder einfügen • Css-Datei einbinden

• Sidebar löschen

• CSS-Datei in der Seite Impressum einbinden



6.2.3 Datenbank auf phpMyAdmin erstellen

• Datenbank: friseur huber • Tabellen: kunde, dienstleistungen, angestellte

6.2.3.1 kunde

• Felder erstellen • Datensätze einfügen

6.2.3.2 angestellte



6.2.3.3 produkte

• Felder erstellen • Tabellen produkte und kategorie verknüpfen • Datensätze einfügen


6.2.3.4 kategorie



6.2.3.5 Datenbankanbindung


6.2.4 Backend-Seiten erstellen

6.2.4.1 index.php

• Sessions einbinden • Anmeldeformular

• Passwort eingeben

6.2.4.2 check.php

• Sessions einbinden • wenn das Passwort richtig ist (admin), wird man auf die

Seite benutzer_alle.php weiter geleitet

• wenn das Passwort falsch ist, wird man auf die index.php weitergeleitet


6.2.4.3 benutzer_alle.php

• Session einbinden: kann nur angesurft werden, wenn vorher Passworteingabe erfolgt � ansonsten wird man auf die index.php verwiesen

• zeigt alle vorhanden Kunden an • man kann neue Benutzer hinzufügen • Benutzer ändern

• Benutzer löschen

6.2.4.4 benutzer_hinzufuegen.php

• Session einbinden: kann nur angesurft werden, wenn

vorher Passworteingabe erfolgt � ansonsten wird man auf die index.php verwiesen

• Formular • durch Klick auf „Benutzer anlegen“ wird man auf die Seite

benutzer_neu.php verwiesen • durch Klick auf „zurücksetzen“ werden die Daten

zurückgesetzt


6.2.4.5 benutzer_neu.php



• die Daten des neu angelegten Benutzers werden angezeigt

• durch Klick auf „Zurück zu den Benutzern“ wird man auf

die Seite index.php verwiesen


6.2.4.6 benutzer_aendern.php


vorher Passworteingabe erfolgt die index.php verwiesen

• durch Klick auf das Bild mit dem Bleistift auf der Startseite

wird man auf die Seite benutzer_aendern.php verwiesen• durch Klick auf „Benutzer ändern“ wird man auf die Seite

benutzer_db_aendern.php verwiesen• durch Klick auf „zurücksetzen“ werden die Daten

zurückgesetzt


benutzer_aendern.php

Session einbinden: kann nur angesurft werden, wenn vorher Passworteingabe erfolgt � ansonsten wird man auf die index.php verwiesen

durch Klick auf das Bild mit dem Bleistift auf der Startseite wird man auf die Seite benutzer_aendern.php verwiesendurch Klick auf „Benutzer ändern“ wird man auf die Seite benutzer_db_aendern.php verwiesen durch Klick auf „zurücksetzen“ werden die Daten

zurückgesetzt

41 von 47

Session einbinden: kann nur angesurft werden, wenn ansonsten wird man auf

durch Klick auf das Bild mit dem Bleistift auf der Startseite wird man auf die Seite benutzer_aendern.php verwiesen durch Klick auf „Benutzer ändern“ wird man auf die Seite

durch Klick auf „zurücksetzen“ werden die Daten


6.2.4.7 benutzer_db_aendern.php



• die veränderten Daten werden angezeigt

• durch Klick auf „Zurück zu den Benutzern“ wird man auf die Seite index.php verwiesen


6.2.4.8 benutzer_loeschen.php

• durch Klick auf das Bild mit dem x auf der Startseite wird

man auf die Seite loeschen.php verwiesen und der Benutzer wird gelöscht

• durch Klick auf „Zurück zu den Benutzern“ wird man auf

die index.php verwiesen


benutzer_loeschen.php

durch Klick auf das Bild mit dem x auf der Startseite wird

man auf die Seite loeschen.php verwiesen und der Benutzer wird gelöscht durch Klick auf „Zurück zu den Benutzern“ wird man auf

die index.php verwiesen

43 von 47

durch Klick auf das Bild mit dem x auf der Startseite wird

man auf die Seite loeschen.php verwiesen und der

durch Klick auf „Zurück zu den Benutzern“ wird man auf


77 NNaacchhwwoorrtt

Zu Beginn unserer Arbeit waren wir sehr motiviert und stellten

uns all diese Arbeiten leichter und schneller vor, da wir im

Unterricht schon einige kleine Websites erstellten. Schon nach

kurzer Zeit traten die ersten Komplikationen auf und die Freude

am Arbeiten verwandelte sich bald in eine mühsame

Notwenigkeit. Dank unserer Lehrer, anderen Klassenkameraden

und dem Internet konnten wir die Fehler beheben oder suchten

uns neue Wege die Homepage fertigzustellen.

Wir haben unser Projekt, trotz einiger Schwierigkeiten und

Planänderungen, erfolgreich abgeschlossen. Wir haben bei

diesem Projekt nicht nur neue Kenntnisse im Programmieren

erlernt, sondern auch noch viele andere wichtige Fähigkeiten

gesammelt wie zum Beispiel Teamfähigkeit, Ausdauer,

Projektplanung und sich selber besser zu managen.

Wir hoffen, dass sie Homepage nicht nur unsere Erwartungen

erfüllt hat, sondern auch die des Frisör Salons Hubers, unserer

Lehrer und der Kommission der Reife- und Diplomprüfung.


88 QQuueelllleennvveerrzzeeiicchhnniiss

88..11 QQuueelllleennvveerrzzeeiicchhnniiss::

8.1.1 Allgemeine Informationen

www.google.at

www.google.at/images

8.1.2 HTML

www.wikipedia.org

8.1.3 PHP

www.wikipedia.org

8.1.4 CSS

www.wikipedia.org

8.1.5 Mysql

www.wikipedia.org

8.1.6 Projektmanagement

www.wikipedia.org

8.1.7 Template

http://www.freewebtemplates.com

8.1.8 Javascript

von Herrn Professor Bohunsky erhaltene Beispiele


8.1.9 Wella-image

http://www.logoed.co.uk/blog/uploaded_images/706px-Wella-

Logo.svg-768195.png

8.1.10 SP-image

http://www.perfecthair.ch/shop/catalog/images/produktbilder/SP

_ShineDef_CON-leavein_w.jpg

8.1.11 Anfahrtsplan

http://maps.google.at/maps?client=firefox-

a&rls=org.mozilla:de:official&channel=s&hl=de&source=hp&um

=1&ie=UTF8&q=friseur+huber&fb=1&gl=at&hq=friseur+huber&

hnear=Burgenland,+Eisenstadt&cid=0,0,1952052733686643922

&ei=6uZWS6rnNpvAmgOb7ryGAw&sa=X&oi=local_result&ct=im

age&resnum=4&ved=0CBQQnwIwAw

Documents

Salon Huber