homepage restaurant chinatown

Fachspezifische Themenstellung aus Information Communication and Solution

Projektaufraggeber:

Restaurant China Town

Projektteam:

Spieß Michelle

Fetik Sonja

Schuljahr: 2009/2010

2 Spieß Michelle

Fetik Sonja

IInnhhaallttssvveerrzzeeiicchhnniiss

1 Einleitung ........................................................................... 5

2 Abstract ............................................................................. 6

3 Unser Projekt ...................................................................... 7

3.1 Aufgabenstellung .......................................................... 8

3.2 Projektidee „Restaurant China Town“ ............................... 9

3.3 Projektumfeld ............................................................... 9

3.4 Personalplan ............................................................... 10

3.5 Projektumweltanalyse .................................................. 10

3.6 Projektwürdigkeitsanalyse ............................................ 11

3.7 Projektdurchführbarkeitsanalyse ................................... 12

3.8 Meilensteinplan ........................................................... 13

3.9 Projektstrukturplan (PSP) ............................................. 13

3.10 Arbeitspakete ............................................................. 14

3.10.1 Projektmanagement ............................................. 14

3.10.2 Template ............................................................. 15

3.10.3 Unterseiten ......................................................... 15

3.10.4 Dynamische Seiten ............................................... 16

3.11 Freemind - Entwurf ...................................................... 16

3.12 ER-Diagramme ........................................................... 17

4 Theorien zu unserem Projekt .............................................. 18

4.1 HyperText Mark-up Language (HTML) ............................ 18

4.1.1 Was ist HTML? ........................................................ 18

3 Spieß Michelle

Fetik Sonja

4.1.2 Was kann HTML? .................................................... 19

4.1.3 Wie ist HTML eigentlich entstanden? ......................... 19

4.2 Cascading Style Sheets (CSS) ....................................... 20

4.2.1 Was ist CSS? .......................................................... 20

4.2.2 Vorteile von CSS .................................................... 21

4.2.3 Entstehung von CSS ............................................... 21

4.3 Hypertext Preprocessor (PHP) ....................................... 22

4.3.1 Was ist PHP? .......................................................... 22

4.3.2 Einführendes Beispiel für PHP ................................... 22

4.4 MySQL ....................................................................... 23

4.4.1 Was ist MySQL? ...................................................... 23

4.4.2 Entstehung von MySQL ........................................... 23

5 Fav Icon Datei erstellen ...................................................... 24

6 Unsere Homepage ............................................................. 26

6.1 home.html.................................................................. 26

6.2 restaurant.html ........................................................... 28

6.3 speisekarte.html ......................................................... 33

6.4 gaestebuch.html ......................................................... 39

6.5 kontakt.html ............................................................... 44

6.6 login.html ................................................................... 46

6.7 Datenbank.................................................................. 47

6.8 login.php .................................................................... 51

6.9 check.php .................................................................. 52

6.10 admin.php .................................................................. 53

4 Spieß Michelle

Fetik Sonja

6.11 liste_admin.php .......................................................... 54

6.12 benutzer_loeschen.php ................................................ 55

6.13 benutzer_aendern.php ................................................. 56

6.14 aendern.php ............................................................... 57

6.15 beutzer_hinzufuegen.php ............................................. 58

6.16 ausgeloggt.php ........................................................... 59

7 Nachwort .......................................................................... 60

8 Abbildungsverzeichnis ........................................................ 61

9 Quellenverzeichnis ............................................................. 63

5 Spieß Michelle

Fetik Sonja

11 EEiinnlleeiittuunngg

Im Zuge der fachspezifischen Themenstellung, im Rahmen der

Reife- und Diplomprüfung am Pannoneum Neusiedl am See,

erhielten wird den Auftrag eine Homepage zu erstellen.

Wir entschieden uns dafür, eine Homepage für das Restaurant

„China Town“ zu entwerfen. Da noch keine Seite existierte, mussten

wir einen komplett neuen Entwurf anfertigen.

Der Chef des Restaurants wurde mit der Idee vertraut gemacht und

stimmte sofort zu. Er stellte alle nötigen Unterlagen zur Verfügung

und so konnte gleich mit der Bearbeitung des Projekts begonnen

werden.

Auf den folgenden Seiten finden Sie eine genaue Dokumentation

unserer Arbeit.

6 Spieß Michelle

Fetik Sonja

22 AAbbssttrraacctt

Concerning our exam in the subject Information & Communications

Solutions, we got the order to create a homepage.

We decided to design a homepage for the restaurant "China Town".

There is still no homepage, so we had to make a completely new

draft.

The chief of the restaurant was familiarized with the idea and agreed

immediately. He provided all documents which were needed and so

we could start with the project.

The next pages show our work of our homepage for the restaurant

Chinatown.

7 Spieß Michelle

Fetik Sonja

33 UUnnsseerr PPrroojjeekktt

Das Projekt

Auftraggeber: Restaurant China Town

Auftragnehmerinnen: Spieß Michelle und Fetik Sonja

Zu Beginn haben wir Ideen zur Gestaltung der Homepage (Farblich,

Optisch,…) gesammelt und uns Gedanken darüber gemacht was wir

den Besuchern mit dieser Website bieten wollen.

Danach haben wir mit Hilfe des Projektmanagements unsere Ideen

genauer festgelegt und uns Meilensteine gesetzt.

Zu Guter Letzt verfassten wir die Fachspezifische Themenstellung

um das gesamte, vollendete Projekt sowie den Projektablauf,

ersichtlich und nachlesbar zu machen.

8 Spieß Michelle

Fetik Sonja

3.1 Aufgabenstellung

Homepage erstellen:

Template suchen und anpassen

Unterseiten erstellen

dynamische Seiten anlegen

Fotos machen; Slideshow einbinden

Speisekarte erstellen und einbinden

Homepage testen

Benötigte Ressourcen:

Laptop

Internet

Digitalkamera

Bildbearbeitungsprogramme (GIMP)

Flash Super Slider

phpmyadmin

Dia

Evrsoft First Page

9 Spieß Michelle

Fetik Sonja

3.2 Projektidee „Restaurant China Town“

Zuerst haben wir uns ein Template1 ausgesucht und

heruntergeladen. Danach haben wir das Corporate Design

besprochen und farbliche Änderungen vorgenommen. Wir wollten

ein eigenes Logo und Fotos.

Danach haben wir die Einteilung und die einzelnen Namen der Seiten

in der Navigationsleiste zusammengestellt, die wir jedoch während

der Arbeit am Projekt vereinzelt geändert haben. Sehr wichtig war

uns eine animierte Speisekarte, die wir auf issuu.com erstellten.

Außerdem wollten wir den Gästen ermöglichen dem Restaurant ein

Feedback zu geben, deshalb erstellten wir ein Gästebuch. Dem

Personal bieten wir einen eigenen Administrationsbereich.

3.3 Projektumfeld

1 www.freewebsitetemplates.com

Projektumfeld:

Kunden

Öffentlichkeit

Projektteam:

Fetik Sonja

Spieß Michelle

Aufraggeber:

ChinaTown

Abbildung 1 Projektumfeld

http://www.freewebsitetemplates.com/

10 Spieß Michelle

Fetik Sonja

3.4 Personalplan

Mitarbeiter: Fetik Sonja

Spieß Michelle

Beide Mitarbeiter sind verantwortlich für die Gestaltung und

Programmierung der Homepage, sowie für die Ausarbeitung der

Facharbeit.

3.5 Projektumweltanalyse

Abbildung 2 Projektumweltanalyse

11 Spieß Michelle

Fetik Sonja

3.6 Projektwürdigkeitsanalyse

Kriterium Hoch Mittel Niedrig Begründung

Neuartigkeit X Noch keine Seite

vorhanden!

Inhaltlich komplex X Das Projekt ist

sehr umfangreich

Ressourcenaufwand X Wenig Aufwand;

Internet, Laptop,

Kamera schon

vorhanden

Strategisch

bedeutsam

X Soll vom Betrieb

genutzt werden

können, soll

Kunden

informieren

Risikoreich X Ressourcen

vorhanden; doch

Homepage wurde

ganz neu erstellt

12 Spieß Michelle

Fetik Sonja

3.7 Projektdurchführbarkeitsanalyse

Bereiche Mögliche Fragen Ja/Nein + Bemerkung

Personalressourcen Sind die

notwendigen

Personalressourcen

vorhanden?

Ja, die Personalressourcen

sind vorhanden.

Finanzielle

Ressourcen

Wird das

notwendige

Projektbudget

vorhanden sein?

Ja, da kein Budget

benötigt wird.

Zeitliche

Ressourcen

Ist das geplante

Projekt zeitlich

erreichbar?

Ja, zeitliche Planung ist

realistisch und

durchführbar.

Know-how Haben wir das

notwendige Know-

how um das

Projekt

umzusetzen?

Ja, wir haben ein

Grundwissen, können uns

mit Hilfe von

Internetseiten weiterhelfen

und bei Fragen oder

Problemen unterstützen

uns unsere Professoren

Umsetzung Wer kann uns bei

der Umsetzung

helfen?

Die Lehrer sowie

Internetseiten und auch

die Inhaber (bezüglich

Aussehen; Informationen;

Mitarbeiterbeschreibung,…)

können uns helfen

13 Spieß Michelle

Fetik Sonja

ChinaTown

Projektmanagement 1

Projektstart 1.1

Projektmarketing 1.2

Projektkoordination 1.3

Projektcontrolling 1.4

Projektabschluss 1.5

Template 2

Template suchen 2.1

Coorporate Design besprechen 2.2

Coorporate Design anpassen 2.3.

Coorporate Design übertragen 2.4

Unterseiten 3

Unterseiten besprechen 3.1

Unterseiten erstellen 3.2

Unterseiten bearbeiten 3.3

Unterseiten verlinken 3.4

Dynamische Seiten 4

Dynamische Seite besprechen 4.1

Dynamische Seite erstellen 4.2

Dynamische Seite anpassen 4.3

Dynamische Seite einbinden 4.4

3.8 Meilensteinplan

Meilensteinplan

PSP Code Meilenstein Plantermin Ist-Termin

1.1 Projekt

gestartet

15.10.2009 15.10.2009

2 Template 5.11.2009 19.11.2009

3 Unterseiten 21.01.2010 24.03.2010

4 Dynamische

Seiten

21.02.2010 8.04.2010

1.5 Projektabschluss 12.04.2010 12.04.2010

3.9 Projektstrukturplan (PSP)

Abbildung 3 PSP

14 Spieß Michelle

Fetik Sonja

3.10 Arbeitspakete

3.10.1 Projektmanagement

Arbeitspaket 1

Projektmanagement

Anfangsbeginn 15.

10.2009

Endtermin

12.04.2010

Inhalte Projektplanung

Projektstart: Mind-Map erstellt, Protokoll

begonnen, Meilensteinplan, Arbeitspaket;

Projektabschluss: Maturaprüfung;

Mitarbeiter: Michelle Spieß und Sonja Fetik;

Auftraggeber: Restaurant ChinaTown

Inhalte für Homepage „China Town“ erstellen;

Nicht-Inhalte Nicht rechtzeitig fertig sein!

Ergebnisse Projekt sinnvoll und durchführbar planen ;

Mind-Map, Protokoll, Meilensteinplan,

Arbeitspakete, Projektwürdigkeitsanalyse

erstellen

15 Spieß Michelle

Fetik Sonja

3.10.2 Template

Arbeitspaket 2

Template

Anfangsbeginn 29.

10.2009

Endtermin

19.11.2010

Inhalte Template suchen

(www.freewebsitetemplates.com)

Corporate Design überlegen und verändern

(Farben und Schriftformen)

Logo entwerfen (mit GIMP bearbeitet)

neue Bilder machen

Nicht-Inhalte altes Logo verwenden; Format beibehalten;

alle alten Bilder beibehalten

Ergebnisse Template mit Corporate Design; neues Logo;

übersichtliche Navigationsseite

3.10.3 Unterseiten

Arbeitspaket 3

Unterseiten

Anfangsbeginn 3.

12.2009

Endtermin

11.3.2010

Inhalte Einteilung der Unterseiten und Anpassung an

die Navigationsleiste

Unterseiten erstellen: Home, Restaurant,

Speisekarte, Kontakt Gästebuch, Login

viele Bilder

Nicht-Inhalte Zu viel Text, wenig Bilder; unpassende Farben

und Schriften;

Ergebnisse Übersichtliche Unterseiten; passende Farben

und Schriften;


16 Spieß Michelle

Fetik Sonja

3.10.4 Dynamische Seiten

Arbeitspaket 4

Dynamische Seiten

Anfangsbeginn

14.01.2010

Endtermin

12.04.2010

Inhalte Login

Liste mit Kunden

Nicht-Inhalte Login funktioniert nicht

Ergebnisse Möglichkeit sich einzuloggen, eine

übersichtliche Liste mit den Kunden

3.11 Freemind - Entwurf

Abbildung 4 Freemind

17 Spieß Michelle

Fetik Sonja

3.12 ER-Diagramme

Abbildung 5 ER Diagramm 1

Abbildung 6 ER Diagramm 2

18 Spieß Michelle

Fetik Sonja

44 TThheeoorriieenn zzuu uunnsseerreemm PPrroojjeekktt

4.1 HyperText Mark-up Language (HTML)

4.1.1 Was ist HTML?

HTML2 heißt ausgeschrieben Hypertext Markup Language, oder

Hypertext Auszeichnungssprache. Es handelt sich dabei um eine

Beischreibungssprache für Webdokumente. HTML definiert ganz

allgemein gesehen die Struktur eines Dokuments. Es beschreibt so

z.B. an welcher Stelle ein Bild zu finden sein soll, wo und in welcher

Art und Weise (Farbe, Schriftart, etc.) der Text angezeigt werden

soll und wie eine Tabelle strukturiert ist.

Hyper Text Markup Language

2 http://www.html-world.de/program/html_1.php

http://www.html-world.de/program/html_1.php

19 Spieß Michelle

Fetik Sonja

4.1.2 Was kann HTML?

HTML3 ist eine sehr statische Sprache - also keine echte

Programmiersprache. Man spricht hier auch nicht von

"programmieren" sondern von "notieren". Wie schon erwähnt ist es

eine reine Struktursprache. Dynamische Elemente wie bewegte

Texte, Ausklappmenüs oder fliegende Bilder gibt es mit HTML nicht.

Für derartige Dinge werden andere Sprachen wie z.B. JavaScript

benötigt.

4.1.3 Wie ist HTML eigentlich entstanden?

Die Sprache HTML ist in etwa so alt wie das World Wide Web. Beide

wurden 1990 von Tim Berners-Lee am Genfer CERN-Institut im

Rahmen der Vernetzung von Computern erstellt, aber erst mit

aufkommen der ersten grafischen Browser populär.

Diese Browser konnten - im Gegensatz zu früheren Browsern - den

Inhalt einer Seite schon recht schön formatiert anzeigen und

besaßen darüber hinaus die Möglichkeit Bilder oder andere grafische

Elemente wie Buttons oder Textfelder anzuzeigen.

Mit dem Lauf der Zeit wurde HTML dann nach und

nach weiter entwickelt und - meist durch den

Antrieb der Browserhersteller - durch neue

Techniken erweitert. 1998 wurde dann die vorerst

letzte HTML-Version veröffentlicht.

3 http://www.html-world.de/program/html_1.php


20 Spieß Michelle

Fetik Sonja

4.2 Cascading Style Sheets (CSS)

4.2.1 Was ist CSS?

CSS4 ist die Abkürzung von Casading Style Sheets und ist eine

Formatierungssprache, die vor allem mit HTML und XML zum Einsatz

kommt. Dabei legt CSS fest, wie ein besonderer Bereich oder Inhalt

dargestellt werden soll. Zudem kann man über die CSS

Programmierung Elemente frei positionieren oder Hintergrundbilder

festlegen und Angaben zu diversen Schriften und Farben festlegen.

CSS ist aber nicht nur eine Sprache, mit der man Farben und

Schriftarten festlegen kann, sondern sie besitzt auch die Fähigkeit

Ränder, Höhen, Breiten und viele andere Komponenten zu

bestimmen. Sie gilt heute als die Standard Style Sheet Sprache für

Webseiten und ist ein hervorragendes Werkzeug um diesen Seiten

ein entsprechendes Aussehen und Layout zu verpassen.

4 http://www.brcss.net/was-ist-css

http://www.brcss.net/was-ist-css

21 Spieß Michelle

Fetik Sonja

4.2.2 Vorteile von CSS

Die Verwendung von CSS hat gegenüber den Formatierungen direkt

in einem Dokument einige Vorteile zu bieten. Erwähnenswert ist

hierbei die Eigenschaft Inhalt und die Darstellung trennen zu können

oder die Gabe, die richtige Formatierung dem jeweiligen

Ausgabemedium, sei es nun der Bildschirm, eine Präsentation, ein

Druck oder ein Handy, anzupassen. Das bedeutet das CSS fähig ist,

die Ausgabeform unterschiedlich zu gestalten. CSS gibt

Anweisungen, wie Elemente dargestellt werden sollen und kann auch

komplizierte Designs darstellen. Um CSS zu verwenden, sind keine

besonderen Programme notwendig, die Casading Style Sheets lassen

sich in jedem Texteditor erstellen und kann sie danach in das

gewünschte Ziel-Dokument einbauen.

4.2.3 Entstehung von CSS

1994 wurde die Casading Style Sheets Programmierung erstmals

von Hakon Wium Lie vorgeschlagen und dann zusammen mit Bert

Bos entwickelt. Seit damals hat sich CSS weiter entwickelt und

konnte sich dank einzigartiger Programmierung gegen Mitbewerber

und Konkurrenzprodukte deutlich absetzen. CSS bietet einfach

Webseitenentwicklern- und Programmierern den Vorteil, das

Aussehen der Webseiten steuern zu können, das sicher ein Grund

ist, wieso CSS im Bereich Webdesign seinen Durchbruch inzwischen

längst erreicht hat und sich bis dato an der Spitze halten kann.

22 Spieß Michelle

Fetik Sonja

<!DOCTYPE HTML PUBLIC "-

//W3C/DTD HTML 4.01 Transitional//EN

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Beispiel</title>

</head>

<body>

<?php

echo "Hallo, ich bin ein PHP-Skript!";

?>

</body>

</html>

4.3 Hypertext Preprocessor (PHP)

4.3.1 Was ist PHP?

PHP5 ist eine Serverseitige Scriptsprache für das Web. Serverseitig

heißt, dass PHP Code ausgeführt wird, bevor eine entsprechende

Webseite in der der Code vorkommt überhaupt an dem Browser

geschickt wird. Die Daten im Script werden also verarbeitet, ohne

dass der Browser davon etwas mitbekommt. Dies hat den Vorteil,

dass solcher Code unabhängig vom Browser funktioniert. Im

Gegensatz zu Javascript im kann unabhängig vom Browser

ausgeführt werden.

4.3.2 Einführendes Beispiel6 für PHP

Anstatt ein Programm mit vielen Anweisungen zur Ausgabe von

HTML zu schreiben, schreibt man etwas HTML und bettet einige

Anweisungen ein, die irgendetwas tun (wie hier "Hallo, ich bin ein

PHP-Skript!" auszugeben). Der PHP-Code steht zwischen speziellen

Anfangs- und Abschluss-Verarbeitungsinstruktionen <?php und ?>,

mit denen man in den

"PHP-Modus" und zurück

wechseln kann.

5 http://www.php4scripte.de/php.php

6 http://php.net/manual/de/intro-whatis.php

Abbildung 7 PHP

http://www.php.net/manual/de/language.basic-syntax.phpmode.php

http://www.php4scripte.de/php.php

http://php.net/manual/de/intro-whatis.php

23 Spieß Michelle

Fetik Sonja

4.4 MySQL

4.4.1 Was ist MySQL?

MySQL7 ist eine echte Multi-User, Multi-Treaded SQL Datenbank und

wird von allen großen Providern oder auch Suchmaschinenbetreibern

eingesetzt. SQL ist eine standardisierte Datenbanksprache, die das

Speichern, Updaten und den Zugriff auf Informationen erleichtert.

Beispielsweise kann man Produktinformationen eines Kunden auf

einem WWW-Server speichern und abrufen. MySQL ist äußerst

schnell und flexibel genug, um sogar Bilder und Log-Dateien darin

abzulegen. Die wichtigsten Eigenschaften von MySQL sind

Geschwindigkeit, Stabilität und einfache Bedienbarkeit.

4.4.2 Entstehung von MySQL

MySQL ist nun seit 1996 auf vielen Tausend Sites im Internet und

Intranet im Einsatz und erfreut sich hier wachsender Beliebtheit.

MySQL ist geradezu prädestiniert zur Beschleunigung bestehender

ACCESS Datenbanken.

Der Grundstock, um den MySQL herum gebaut worden ist, ist eine

Liste von Routinen, die sich im täglichen Einsatz seit Jahren bewährt

haben. Obwohl MySQL dauernd weiter entwickelt wird, hat es zu

jedem Zeitpunkt der Entwicklung stets zuverlässig und stabil

gearbeitet.

7 http://www.tu-chemnitz.de/docs/mysql/mysql-27.html

http://www.tu-chemnitz.de/docs/mysql/mysql-27.html

24 Spieß Michelle

Fetik Sonja

55 FFaavv IIccoonn DDaatteeii eerrsstteelllleenn

Zuerst ein Logo aussuchen und das gewünschte Logo mit Gimp

öffnen

Abbildung 8 Fav Icon 1


25 Spieß Michelle

Fetik Sonja

Das Bild auf 16x16 Pixel skalieren und als favicon.ico mit 8bit oder

24bit speichern.

In jede Datei wird in den Head dieser Code eingefügt:

<link

rel=“shortcut icon“

type=“image/ico“

href=”images/favicon.ico”>


26 Spieß Michelle

Fetik Sonja

66 UUnnsseerree HHoommeeppaaggee

6.1 home.html

Hier sieht man die Startseite des Restaurants ChinaTown.

Auf dieser Seite findet man eine kurze Einleitung, die Öffnungszeiten

und die Preise des Buffets.

Außerdem haben wir uns für eine Slideshow auf der Startseite

entschieden.

Abbildung 11 einzelne Seiten

Abbildung 12 home.html

27 Spieß Michelle

Fetik Sonja

Slideshow erstellen

Wir haben auf www.kostenlose-javascripts.de einen Code für einen

Slider gefunden. Der angegebene Code wurde kopiert und danach

in die Homepage eingebunden.

Wir haben die Höhe und die Breite des Sliders geändert. Zusätzlich

wurden die Bilder eingefügt.

Abbildung 13 Slider 1

Abbildung 14 Slider 2

http://www.kostenlose-javascripts.de/

28 Spieß Michelle

Fetik Sonja

6.2 restaurant.html

Hier ermöglichen wir einen kurzen Einblick ins Restaurant. Es wurde

ein zweiter Slider eingebunden. „Flash Slideshow Maker

Professional“ wurde installiert und die benötigten Bilder des

Restaurants hinzugefügt

Abbildung 15 restaurant.html

29 Spieß Michelle

Fetik Sonja

Flash Slideshow Maker Professional

Zuerst auf Hinzufügen klicken, beliebige Bilder aussuchen und auf

Öffnen klicken.

Abbildung 16 Flash 1

30 Spieß Michelle

Fetik Sonja

Mit einem Doppelklick auf das Bild können die Einstellungen für den

Übergangseffekt und die Übergangsdauer geändert werden. Wir

haben uns für den Effekt „Einblenden“ entschieden und haben die

Übergangsdauer und die Showdauer von 2 Sekunden auf 1 Sekunde

geändert.


31 Spieß Michelle

Fetik Sonja

Bei „Motiv“ kann zum Beispiel die Breite, Höhe und der Titel des

Albums geändert werden. Außerdem kann man sich auch für eine

Dekoration entscheiden. Wir haben dem Album den Titel ChinaTown

gegeben, die Höhe 320 auf und die Breite auf 440 geändert.


32 Spieß Michelle

Fetik Sonja

Bei „Veröffentlichen“ den Speicherort für die Flash-Datei auswählen

und auf „Jetzt veröffentlichen“ klicken.

Es werden diese zwei Dateien ausgegeben. Die html-Datei wird in

die beliebige Seite eingebunden.


Abbildung 20 Shockwave

33 Spieß Michelle

Fetik Sonja

6.3 speisekarte.html

Auf dieser Unterseite wird die Speisekarte dargestellt. Wir haben uns

für eine animierte Speisekarte entschieden.

Abbildung 21 speisekarte.html

34 Spieß Michelle

Fetik Sonja

Erstellen der Speisekarte – issuu.com

Zuerst haben wir die Speisen in ein Dokument geschrieben und als

PDF-Dokument gespeichert. Bei issuu.com8 wurde das Dokument auf

die Seite geladen.

8 www.issuu.com

Abbildung 22 issuu 1

35 Spieß Michelle

Fetik Sonja

Danach haben wir die General Info ausgefüllt

Title (Speisekarte)

Description (Speisekarte des Restaurants China Town)

Web name (Speisekarte)

Keywords (restaurant, china)

Info Link (http://issuu.com/michelle00/speisekarte)

Type auswählen (other)

Categorie (other)

Language (German)

Target Area (Austria) wählen

Wenn diese Infos ausgefüllt

wurden auf “Upload file” klicken.



http://issuu.com/michelle00/speisekarte

36 Spieß Michelle

Fetik Sonja



37 Spieß Michelle

Fetik Sonja

Um an den Code für die Homepage zu gelangen, einfach auf den

„Embed“ Button klicken.


38 Spieß Michelle

Fetik Sonja

Danach wurde die Seite angepasst. Die Größe wurde auf 700x388 px

geändert. Theme wurde von Light auf Dark verändert.

Nach diesen Vorgängen haben wir den Code kopiert. In die

Unterseite „Speisekarte“ eingefügt haben wir zuerst eine Tabelle

erstellt um die Speisekarte besser verschieben zu können. Danach

wurde der Code eingefügt und die Tabelle mittig ausgerichtet.


39 Spieß Michelle

Fetik Sonja

6.4 gaestebuch.html

Auf dieser Seite können Besucher der Seite dem Restaurant ein

Feedback hinterlassen.

Abbildung 29 gaestebuch.html 1

40 Spieß Michelle

Fetik Sonja

Bei „Gästebucheinträge“ können die bereits geschriebenen Einträge

angesehen werden.

Abbildung 30 gaestebuch.html 2

41 Spieß Michelle

Fetik Sonja

Erstellen des Gästebuchs

Auf www.php-free.de auf der Seite 8 haben wir uns für das zweite

Gästebuch entschieden.

Abbildung 31 gaestebuch 1


http://www.php-free.de/

42 Spieß Michelle

Fetik Sonja

Diese Version wurde dann downgeloadet. Den Speicherort

auswählen, Ordner entzippen und Änderungen vornehmen.



43 Spieß Michelle

Fetik Sonja

Die Hintergrundfarbe haben wir von weiß: #FFFFFF auf hellbraun

#AD803D verändert.

Wir haben uns für eine dunkelbraune Schriftfarbe entschieden. Das

gesamte Gästebuch war in englischer Sprache beschriftet, das wurde

auf Deutsch umgeändert.

Außerdem wurde die bordercolour vom Gästebuch schwarz #FFFFFF

auf dunkelrot/weinrot #5D1F1F verändert.

Da Umlaute nicht angezeigt werden können, haben wir diese mit

ü ausgebessert.

44 Spieß Michelle

Fetik Sonja

6.5 kontakt.html

Hier findet man einen Anfahrtsplan für Bruck an der Leitha, die

Adresse und die Telefonnummer des Restaurants. Die Kontaktdaten

9haben wir aus dem Internet gesucht.

9 www.gutekueche.at

Abbildung 35 kontakt.html

http://www.gutekueche.at/

45 Spieß Michelle

Fetik Sonja

Erstellen des Lageplans

Den Lageplan haben wir bei herold.at 10erstellt. Auf der Homepage

haben wir in der Navigationsleiste die Unterseite Karte & Route

gewählt. Mit der Eingabe bei „B“ haben wir das Ziel festgelegt.

Danach haben wir auf den „Route“-Button geklickt und die Route

wurde berechnet.

Um an den Code zu gelangen muss man links oben auf „Link zur

Seite“ klicken, den Link kopieren und auf der eigenen Website

einbinden und positionieren.

Um die Arbeit zu erleichtern haben wir eine Tabelle erstellt, den

Code eingebunden und die Tabelle mittig ausgerichtet.

10 www.herold.at

Abbildung 36 Lageplan 1

http://www.herold.at/

46 Spieß Michelle

Fetik Sonja

6.6 login.html

Hier können sich die Mitarbeiter mit ihrer E-Mail Adresse und ihrem

Passwort einloggen. So gelangen sie zu einem Bereich in dem sie

eine Liste der Stammkunden erstellen können.

Abbildung 37 login.html

47 Spieß Michelle

Fetik Sonja

6.7 Datenbank

Auf „learn.bildungsserver.com“ stehen jeder Projektgruppe die

Zugangsdaten für deren Websites zur Verfügung. Mit Hilfe dieser

Daten können wir unsere Datenbank erstellen.

Tabelle anlegen

Um eine neue Tabelle anzulegen wählt man die Option „Neue Tabelle

in Datenbank erstellen“ und benennt diese. Zusätzlich gibt man auch

die benötigten Felder an, welche später aber noch geändert werden

können, sofern es zu viele oder zu wenige sind und man sich

verschätzt hat.

Abbildung 38 Datenbank 1


48 Spieß Michelle

Fetik Sonja

create table muster

( region int not null

, nr int not null

, name char(30)

, ed date not null

)

partition by range(region)

( partition p0 values less than (10)

, partition p1 values less than (20)


);

create table muster

( region int not null

, nr int not null

, name char(30)

, ed date not null

)

partition by range(year(ed))

( partition p0 values less than (1990)


, partition p2 values less than maxvalue

) ;


Nun ergibt sich die Möglichkeit hier die einzelnen Felder zu

beschriften und die Größe festzulegen.

Zudem gibt es einige

wissenswerte Dinge:

z.B.: Die Spalte 'region' darf bei dieser

Syntax(Zeichen) nur Werte kleiner als 30

erhalten.

Oder wenn der Wert nur ein

Maximum erreichen darf

'maxvalue'



49 Spieß Michelle

Fetik Sonja

Nun sind die Felder benannt und haben eine Syntax zugewiesen

bekommen. Entweder man möchte noch einige Felder hinzufügen,

dann tippt man ein wie viele es sein sollen und klickt auf OK, oder

man ist fertig mit der Tabelle, dann speichert man einfach.

Primary Key:

Ein Schlüssel für eine solche Tabelle ist dann eine Gruppe von Spalten, die so ausgewählt

wird, dass jede Zeile in dieser Gruppe eine einmalige Wertekombination hat.

Anschließend wird die fertige Tabelle angezeigt:



50 Spieß Michelle

Fetik Sonja

Diese Tabelle kann man natürlich bearbeiten, löschen und

Datensätze hinzufügen.

Struktur: die Struktur der Tabelle wird übersichtlich angezeigt


Einfügen: Hier kann man die einzelnen Datensätze hinzufügen



51 Spieß Michelle

Fetik Sonja

6.8 login.php

Abbildung 48 login.php 1

Abbildung 49 login.php 2

52 Spieß Michelle

Fetik Sonja

6.9 check.php

Abbildung 50 check.php 1

Abbildung 51 check.php 2

53 Spieß Michelle

Fetik Sonja

Hier wird überprüft ob das Passwort richtig oder falsch ist. Ist das

Passwort oder die Mail falsch erscheint „E-Mail und/oder Passwort

falsch!“.

Ist es richtig wird man weitergeleitet zu admin.php.

6.10 admin.php

Abbildung 52 admin.php 1

Abbildung 53 admin.php 2

54 Spieß Michelle

Fetik Sonja

Wenn man sich nun auf der „admin.php“ befindet, hat man die

Möglichkeit zum Administrationsbereich zu gelangen oder sich

wieder auszuloggen.

6.11 liste_admin.php

Abbildung 54 liste_admin.php 1

55 Spieß Michelle

Fetik Sonja

6.12 benutzer_loeschen.php

Abbildung 55 benutzer_loeschen.php 1

Abbildung 56 benutzer_loeschen.php 2

56 Spieß Michelle

Fetik Sonja

6.13 benutzer_aendern.php

Abbildung 57 benutzer_aendern.php 1

Abbildung 58 benutzer_aendern.php 2

57 Spieß Michelle

Fetik Sonja

6.14 aendern.php

Abbildung 59 aendern.php 1

Abbildung 60 aendern.php 2

58 Spieß Michelle

Fetik Sonja

6.15 beutzer_hinzufuegen.php

Abbildung 61 benutzer_hinzufuegen.php 1

Abbildung 62 benutzer_hinzufuegen.php 2

59 Spieß Michelle

Fetik Sonja

6.16 ausgeloggt.php

Nach dem ausloggen wird man auf augeloggt.php weitergeleitet. Auf

dieser Seite wird angezeigt, dass man ausgeloggt ist und sich nun

wieder einloggen kann. Klickt man zurück zum einloggen, wird man

wieder auf die Login- Seite verwiesen.

Abbildung 63 ausgeloggt.php 1

Abbildung 64 ausgeloggt.php 2

60 Spieß Michelle

Fetik Sonja

77 NNaacchhwwoorrtt

Nach einem halben Jahr intensiver Arbeit haben wir das Projekt

abgeschlossen. Die Arbeiten waren teilweise schwierig und wir

mussten die Unterstützung unserer Lehrer in Anspruch nehmen. Der

Großteil der Website wurde jedoch von uns selbst erstellt. Falls

weitere Änderungen an der Homepage erforderlich wären, sind wir

im Stande es selbst zu machen.

Wir persönlich ziehen einen großen Nutzen aus diesem Projekt,

Neben den Fähigkeiten Teamwork, konnten wir zusätzliche

Erfahrungen in Programmiersprachen wie PHP sammeln.

Zum Abschluss möchten wir uns herzlich für die Unterstützung

unserer Lehrer, Adolf Selinger und Heinz Wurzinger bedanken. Wir

nehmen diese wertvollen Erfahrungen mit auf den Weg und hoffen

noch weitere Erfahrungen im Bereich der Medieninformatik sammeln

zu können.

61 Spieß Michelle

Fetik Sonja

8 AAbbbbiilldduunnggssvveerrzzeeiicchhnniiss

ABBILDUNG 1 PROJEKTUMFELD ...................................................................................................................................... 9

ABBILDUNG 2 PROJEKTUMWELTANALYSE ........................................................................................................................ 10

ABBILDUNG 3 PSP ..................................................................................................................................................... 13

ABBILDUNG 4 FREEMIND ............................................................................................................................................. 16

ABBILDUNG 5 ER DIAGRAMM 1 ................................................................................................................................... 17

ABBILDUNG 6 ER DIAGRAMM 2 ................................................................................................................................... 17

ABBILDUNG 7 PHP .................................................................................................................................................... 22

ABBILDUNG 8 FAV ICON 1 ........................................................................................................................................... 24

ABBILDUNG 9 FAV ICON 2 ........................................................................................................................................... 24

ABBILDUNG 10 FAV ICON 3 ......................................................................................................................................... 25

ABBILDUNG 11 EINZELNE SEITEN ................................................................................................................................... 26

ABBILDUNG 12 HOME.HTML ........................................................................................................................................ 26

ABBILDUNG 13 SLIDER 1 ............................................................................................................................................. 27

ABBILDUNG 14 SLIDER 2 ............................................................................................................................................. 27

ABBILDUNG 15 RESTAURANT.HTML ............................................................................................................................... 28

ABBILDUNG 16 FLASH 1 .............................................................................................................................................. 29

ABBILDUNG 17 FLASH 2 .............................................................................................................................................. 30

ABBILDUNG 18 FLASH 3 .............................................................................................................................................. 31

ABBILDUNG 19 FLASH 4 .............................................................................................................................................. 32

ABBILDUNG 20 SHOCKWAVE ........................................................................................................................................ 32

ABBILDUNG 21 SPEISEKARTE.HTML ................................................................................................................................ 33

ABBILDUNG 22 ISSUU 1............................................................................................................................................... 34

ABBILDUNG 23 ISSUU 2............................................................................................................................................... 35

ABBILDUNG 24 ISSUU 3............................................................................................................................................... 35

ABBILDUNG 25 ISSUU 4............................................................................................................................................... 36

ABBILDUNG 26 ISSUU 5............................................................................................................................................... 36

ABBILDUNG 27 ISSUU 6............................................................................................................................................... 37

ABBILDUNG 28 ISSUU 7............................................................................................................................................... 38

ABBILDUNG 29 GAESTEBUCH.HTML 1 ............................................................................................................................ 39

ABBILDUNG 30 GAESTEBUCH.HTML 2 ............................................................................................................................ 40

ABBILDUNG 31 GAESTEBUCH 1 ..................................................................................................................................... 41




ABBILDUNG 35 KONTAKT.HTML .................................................................................................................................... 44

ABBILDUNG 36 LAGEPLAN 1 ........................................................................................................................................ 45

62 Spieß Michelle

Fetik Sonja

ABBILDUNG 37 LOGIN.HTML ........................................................................................................................................ 46

ABBILDUNG 38 DATENBANK 1 ...................................................................................................................................... 47










ABBILDUNG 48 LOGIN.PHP 1 ........................................................................................................................................ 51

ABBILDUNG 49 LOGIN.PHP 2 ........................................................................................................................................ 51

ABBILDUNG 50 CHECK.PHP 1 ....................................................................................................................................... 52

ABBILDUNG 51 CHECK.PHP 2 ....................................................................................................................................... 52

ABBILDUNG 52 ADMIN.PHP 1 ....................................................................................................................................... 53

ABBILDUNG 53 ADMIN.PHP 2 ....................................................................................................................................... 53

ABBILDUNG 54 LISTE_ADMIN.PHP 1 .............................................................................................................................. 54

ABBILDUNG 55 BENUTZER_LOESCHEN.PHP 1 ................................................................................................................... 55

ABBILDUNG 56 BENUTZER_LOESCHEN.PHP 2 ................................................................................................................... 55

ABBILDUNG 57 BENUTZER_AENDERN.PHP 1 .................................................................................................................... 56

ABBILDUNG 58 BENUTZER_AENDERN.PHP 2 .................................................................................................................... 56

ABBILDUNG 59 AENDERN.PHP 1 ................................................................................................................................... 57

ABBILDUNG 60 AENDERN.PHP 2 ................................................................................................................................... 57

ABBILDUNG 61 BENUTZER_HINZUFUEGEN.PHP 1 ............................................................................................................. 58

ABBILDUNG 62 BENUTZER_HINZUFUEGEN.PHP 2 ............................................................................................................. 58

ABBILDUNG 63 AUSGELOGGT.PHP 1 .............................................................................................................................. 59

ABBILDUNG 64 AUSGELOGGT.PHP 2 .............................................................................................................................. 59

63 Spieß Michelle

Fetik Sonja

99 QQuueelllleennvveerrzzeeiicchhnniiss

HTML


http://www.yourhtmlsource.com/starthere/whatishtml.html

PHP



CSS


MSQL

http://www.tu-chemnitz.de/docs/mysql/

Template

www.freewebsitetemplates.com

Slider

www.kostenlose-javascripts.de

Speisekarte

www.issuu.com

Gästebuch

www.php-free.de

Lage und Anfahrtsplan

www.herold.at


http://www.yourhtmlsource.com/starthere/whatishtml.html




http://www.tu-chemnitz.de/docs/mysql/


http://www.kostenlose-javascripts.de/

http://www.issuu.com/

http://www.php-free.de/

http://www.herold.at/

homepage restaurant chinatown

Documents

michelle fetik sonja

up language html

hypertext preprocessor

cascading style sheets

fachspezifische themenstellung

fav icon datei erstellen

projektstrukturplan

dynamische seiten