Salon Huber
-
Upload
sarah-stolberger -
Category
Documents
-
view
237 -
download
0
description
Transcript of Salon Huber
Sarah Stolberger, Barbara Taschler 0 von 47
Sarah Stolberger, Barbara Taschler 1 von 47
PPrroojjeekkttaauuffttrraaggggeebbeerr:: PPaannnnoonneeuumm NNeeuussiieeddll aamm SSeeee
PPrroojjeekktttteeaamm:: PPrroojjeekkttlleeiitteerr:: SSaarraahh SSttoollbbeerrggeerr PPrroojjeekkttmmiittaarrbbeeiitteerr:: BBaarrbbaarraa TTaasscchhlleerr
SScchhuulljjaahhrr:: 22000099//22001100,, PPaannnnoonneeuumm NNeeuussiieeddll aamm SSeeee
Sarah Stolberger, Barbara Taschler 2 von 47
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
Sarah Stolberger, Barbara Taschler 3 von 47
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
Sarah Stolberger, Barbara Taschler 4 von 47
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.
Sarah Stolberger, Barbara Taschler 5 von 47
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.
Sarah Stolberger, Barbara Taschler 6 von 47
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
Sarah Stolberger, Barbara Taschler 7 von 47
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
Sarah Stolberger, Barbara Taschler 8 von 47
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
Sarah Stolberger, Barbara Taschler 9 von 47
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
Sarah Stolberger, Barbara Taschler 10 von 47
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
Sarah Stolberger, Barbara Taschler 11 von 47
44 AAnnggeewwaannddttee PPrrooggrraammmmee::
� Notepad ++
� Kompozer
� Gimp
� Paint
� Firebug
� CoffeeCup
Sarah Stolberger, Barbara Taschler 12 von 47
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
Sarah Stolberger, Barbara Taschler 13 von 47
</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
Sarah Stolberger, Barbara Taschler 14 von 47
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
Sarah Stolberger, Barbara Taschler
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
Sarah Stolberger, Barbara Taschler 16 von 47
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
Sarah Stolberger, Barbara Taschler 17 von 47
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
Sarah Stolberger, Barbara Taschler 18 von 47
<?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" />
Sarah Stolberger, Barbara Taschler 19 von 47
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.
Sarah Stolberger, Barbara Taschler 20 von 47
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
Sarah Stolberger, Barbara Taschler 21 von 47
haben wir uns einen Überblick wie die Frontend-Seiten aufgegliedert werden sollen, geschaffen und welchen Inhalt sie enthalten sollen.
Sarah Stolberger, Barbara Taschler 22 von 47
Sarah Stolberger, Barbara Taschler 23 von 47
6.1.4 ER-Diagramm erstellen
Sarah Stolberger, Barbara Taschler 24 von 47
Wir haben ein ER-Diagramm angelegt anhand der drei Tabellen in der Datenbank: kunde, dienstleistungen und angestellte.
Sarah Stolberger, Barbara Taschler 25 von 47
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
Sarah Stolberger, Barbara Taschler 26 von 47
6.1.6 Projektstrukturplan erstellen
Den Projektstrukturplan haben wir anhand der Projektmanagementunterlagen erarbeitet und für unser Projekt angepasst.
Sarah Stolberger, Barbara Taschler 27 von 47
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
Sarah Stolberger, Barbara Taschler 28 von 47
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
Sarah Stolberger, Barbara Taschler 29 von 47
6.2.2.3 angestellte.php
• Text und Bilder einfügen • Datenbank einbinden � Tabelle Angestellte
Sarah Stolberger, Barbara Taschler 30 von 47
6.2.2.4 dienstleistungen.php
• Text und Bilder einfügen
Sarah Stolberger, Barbara Taschler 31 von 47
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
Sarah Stolberger, Barbara Taschler 32 von 47
• 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
Sarah Stolberger, Barbara Taschler 33 von 47
Sarah Stolberger, Barbara Taschler 34 von 47
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
• Felder erstellen • Datensätze einfügen
Sarah Stolberger, Barbara Taschler 35 von 47
6.2.3.3 produkte
• Felder erstellen • Tabellen produkte und kategorie verknüpfen • Datensätze einfügen
Sarah Stolberger, Barbara Taschler 36 von 47
6.2.3.4 kategorie
• Felder erstellen • Datensätze einfügen
Sarah Stolberger, Barbara Taschler 37 von 47
6.2.3.5 Datenbankanbindung
Sarah Stolberger, Barbara Taschler 38 von 47
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
Sarah Stolberger, Barbara Taschler 39 von 47
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
Sarah Stolberger, Barbara Taschler 40 von 47
6.2.4.5 benutzer_neu.php
• Session einbinden: kann nur angesurft werden, wenn
vorher Passworteingabe erfolgt � ansonsten wird man auf die index.php verwiesen
• die Daten des neu angelegten Benutzers werden angezeigt
• durch Klick auf „Zurück zu den Benutzern“ wird man auf
die Seite index.php verwiesen
Sarah Stolberger, Barbara Taschler
6.2.4.6 benutzer_aendern.php
• Session einbinden: kann nur angesurft werden, wenn
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
Sarah Stolberger, Barbara Taschler
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
Sarah Stolberger, Barbara Taschler 42 von 47
6.2.4.7 benutzer_db_aendern.php
• Session einbinden: kann nur angesurft werden, wenn
vorher Passworteingabe erfolgt � ansonsten wird man auf die index.php verwiesen
• die veränderten Daten werden angezeigt
• durch Klick auf „Zurück zu den Benutzern“ wird man auf die Seite index.php verwiesen
Sarah Stolberger, Barbara Taschler
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
Sarah Stolberger, Barbara Taschler
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
Sarah Stolberger, Barbara Taschler 44 von 47
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.
Sarah Stolberger, Barbara Taschler 45 von 47
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
Sarah Stolberger, Barbara Taschler 46 von 47
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