Issuu on Google+

Fachspezifische Themenarbeit Information & Communication Solutions

Schwerpunkt: PHP/MySQL

Mitglieder: Anna Lang Karina Schneider


Inhaltsverzeichnis

1

Kurzfassung ................................................................................................................. 7

2

Abstract ....................................................................................................................... 8

3

Projektmanagement ................................................................................................... 9 3.1

Projektbeschreibung ........................................................................................... 9

3.2

Projektorganisation........................................................................................... 10

3.3

Projektw端rdigkeitsanalyse ................................................................................ 11

3.4

Projektdurchf端hrbarkeitsanalyse...................................................................... 12

3.5

Projektumweltanalyse ...................................................................................... 13

3.6

Meilensteinplan ................................................................................................ 14

3.7

Projektstrukturplan ........................................................................................... 15

3.8

Arbeitspakete .................................................................................................... 16

3.9

Projektdokumentation ...................................................................................... 24

4

Unsere Homepage .................................................................................................... 27

5

Grundlagen................................................................................................................ 28

6

5.1

HTML (Hypertext Markup Language)................................................................ 28

5.2

PHP (Personal Home Page) ............................................................................... 29

5.3

MySQL ............................................................................................................... 30

5.4

CSS (Cascading Style Sheets) ............................................................................. 30

5.5

Notepad ............................................................................................................ 31

5.6

GIMP (GNU Image Manipulation Program) ...................................................... 31

Corporate Design ...................................................................................................... 33 6.1

6.1.1

Navigationsleiste ....................................................................................... 35

6.1.2

Seitenleiste ................................................................................................ 37

6.1.3

Titel ........................................................................................................... 38

6.2

7

Template ........................................................................................................... 33

CSS ..................................................................................................................... 38

6.2.1

Schriftart ................................................................................................... 38

6.2.2

Farbe ......................................................................................................... 39

6.2.3

Design........................................................................................................ 39

Unsere Seiten ............................................................................................................ 40

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 2/70


8

7.1

index.html ......................................................................................................... 40

7.2

home.html......................................................................................................... 41

7.3

history.html ....................................................................................................... 43

7.4

members.php .................................................................................................... 44

7.5

gallery.html ....................................................................................................... 45

7.6

events.php ........................................................................................................ 47

7.7

guestbook.php .................................................................................................. 48

7.7.1

Installation ................................................................................................ 49

7.7.2

Verwaltung ................................................................................................ 49

7.8

links.html........................................................................................................... 49

7.9

login.php ........................................................................................................... 50

Unsere Datenbank .................................................................................................... 51 8.1

Anlegen der Datenbank .................................................................................... 51

8.2

Tabelle „benutzer“ ............................................................................................ 54

8.2.1 8.3

Tabelle „event“ ................................................................................................. 55

8.3.1 9

ER-Diagramm „benutzer“.......................................................................... 55

ER-Diagramm „event“ ............................................................................... 56

Dynamische Seiten .................................................................................................... 57 9.1

events.php ........................................................................................................ 57

9.1.1

event_details.php ..................................................................................... 58

9.1.2

event_admin.php ...................................................................................... 58

9.1.3

event_aendern.php................................................................................... 60

9.1.4

event_db_aendern.php ............................................................................ 61

9.1.5

event_db_loeschen.php ........................................................................... 61

9.1.6

einloggen.php ........................................................................................... 62

9.1.7

check.php .................................................................................................. 62

9.1.8

login_event.php ........................................................................................ 62

9.1.9

check_event.php ....................................................................................... 63

9.1.10

event_einfuegen.php ................................................................................ 63

9.1.11

event_db_einfuegen.php .......................................................................... 65

9.2

members.php .................................................................................................... 65

9.2.1 9.3

member_details.php ................................................................................. 65

login.php ........................................................................................................... 66

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 3/70


9.3.1

benutzer.php ............................................................................................. 67

9.3.2

pruefen.php .............................................................................................. 68

9.3.3

ausloggen.php ........................................................................................... 68

10

Schlusswort ........................................................................................................... 69

11

Literaturverzeichnis .............................................................................................. 70

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 4/70


Abbildungsverzeichnis Abbildung 1.......................................................................................................... 7 Abbildung 2.......................................................................................................... 8 Abbildung 3........................................................................................................ 33 Abbildung 4........................................................................................................ 34 Abbildung 5........................................................................................................ 35 Abbildung 6........................................................................................................ 36 Abbildung 7........................................................................................................ 36 Abbildung 8........................................................................................................ 36 Abbildung 9........................................................................................................ 37 Abbildung 10...................................................................................................... 37 Abbildung 11...................................................................................................... 38 Abbildung 12...................................................................................................... 38 Abbildung 13...................................................................................................... 40 Abbildung 14...................................................................................................... 41 Abbildung 15...................................................................................................... 41 Abbildung 16...................................................................................................... 42 Abbildung 17...................................................................................................... 42 Abbildung 18...................................................................................................... 43 Abbildung 19...................................................................................................... 43 Abbildung 20...................................................................................................... 44 Abbildung 21...................................................................................................... 44 Abbildung 22...................................................................................................... 45 Abbildung 23...................................................................................................... 46 Abbildung 24...................................................................................................... 46 Abbildung 25...................................................................................................... 46 Abbildung 26...................................................................................................... 47 Abbildung 27...................................................................................................... 48 Abbildung 28...................................................................................................... 48 Abbildung 29...................................................................................................... 49 Abbildung 30...................................................................................................... 50 Abbildung 31...................................................................................................... 51 Abbildung 32...................................................................................................... 52 Abbildung 33...................................................................................................... 52 Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 5/70


Abbildung 34...................................................................................................... 52 Abbildung 35...................................................................................................... 53 Abbildung 36...................................................................................................... 53 Abbildung 37...................................................................................................... 54 Abbildung 38...................................................................................................... 55 Abbildung 39...................................................................................................... 56 Abbildung 40...................................................................................................... 58 Abbildung 41...................................................................................................... 59 Abbildung 42...................................................................................................... 59 Abbildung 43...................................................................................................... 60 Abbildung 44...................................................................................................... 61 Abbildung 45...................................................................................................... 61 Abbildung 46...................................................................................................... 62 Abbildung 47...................................................................................................... 64 Abbildung 48...................................................................................................... 64 Abbildung 49...................................................................................................... 65 Abbildung 50...................................................................................................... 66 Abbildung 51...................................................................................................... 66 Abbildung 52...................................................................................................... 67 Abbildung 53...................................................................................................... 67 Abbildung 54...................................................................................................... 68 Abbildung 55...................................................................................................... 68 Abbildung 56...................................................................................................... 68

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 6/70


1 Kurzfassung Im Rahmen unseres Ausbildungsschwerpunktes „Information and Communication Solutions“ erarbeiteten wir für den Bikerclub „Six-Aces“ eine webbasierende, elektronische Informationsplattform mit dynamischer Datenbankanbindung. Ziel war es, unsere erworbenen Kenntnisse bezüglich des World Wide Web in einem Projekt zusammenzufassen. Der Grund für dieses Projekt war unsere Interesse am Bikerclub „SixAces“, sowie der Wunsch der Mitglieder auch im Internet vertreten zu sein. Wir hoffen, dass der Bikerclub „Six-Aces“ mit dieser Homepage an Popularität gewinnt.

Auf den folgenden Seiten finden Sie eine genaue Dokumentation unseres Projekts.

Abbildung 1

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 7/70


2 Abstract Within the scope of our subject “Information and Communication Solutions”, we have created a web-based, electronic information platform with dynamic database connection for the bikerclub “Six-Aces”. We want to combine our knowledge about World Wide Web in this project. The reason for our decision to make this project is that we are very interested in the bikerclub. Moreover the club wants to be represented on the Internet too. We hope that we can make the bikerclub “Six-Aces” a little bit more popular with this homepage.

On the following pages you‟ll find the documentation about our project.

Abbildung 2

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 8/70


3 Projektmanagement 3.1 Projektbeschreibung

Projektauftrag

Bikerclub Six-Aces Startereignis:

Endereignis:

Projektstart - Präsentation

Projektpräsentation – Matura

Starttermin:

Endtermin:

15.10.2009

12.04.2010

Ziele:  Gestaltung einer Homepage  Durchführung einer erfolgreichen Abschlusspräsentation  gut besuchte Homepage  zufriedener Auftraggeber  zeitgerechter Projektabschluss  Fähigkeiten des Projektmanagements zu erweitern Kosten:

Nichtziele:  nicht ansprechende Homepage (Gestaltung)  wenig Besucher der Homepage  totale Unzufriedenheit seitens des Auftraggebers  gescheitertes Projekt

kaum Kosten, nur für die Freigabe/Veröffentlichung der Homepage Auftraggeber:

Projektleiter:

Bikerclub Six-Aces

Karina Schneider

Projektteammitglied: Anna Lang Zusammenhang mit anderen Projekten:

Phasen: Planung, Organisation, Durchführung,

selbes, gemeinsames Ziel –

Veröffentlichung

Abschlusspräsentation  Matura Auftraggeber:

Projektleiter:

Bernd Gruidl

Karina Schneider

(Bikerclub Six-Aces - Auftraggeber)

(Projektleiterin) Name:

Version: 1

Datum: 22.1.2010

Anna Lang

Seite 1 von 1

Karina Schneider Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 9/70


3.2 Projektorganisation

Bikerclub Six-Aces Projektauftraggeber

Karina Schneider Projektleiterin

Anna Lang Projektteammitarbeiterin

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 10/70


3.3 Projektwürdigkeitsanalyse

Projektwürdigkeitsanalyse Ausprägung Kriterium

Begründung hoch

mittel niedrig

komplex

x

ziel-

x

  

determiniert

x neuartig

 

strategisch

 

x

riskant

 

x

bedeutsam x

ressourcenaufwendig

Version: 1

Karina Schneider Anna Lang

   

Datum: 21.01.2010

rechtliche, organisatorische, pädagogische Vorschriften müssen beachtet werden Umsetzung des Projektes im Schuljahr 2009/10 Projektabschluss: 8.4.2010 Abschlusspräsentation: Diplom- und Reifeprüfung es gibt bereits viele BikerclubHomepages keine neuartige Idee für uns allerdings erstes großes Projekt - neuartig Zeitprobleme Vorgaben können nicht eingehalten werden Ziele können verfehlt werden Projektmanagement Know-How wird erweitert Programmierfähigkeiten werden erweitert Bikerclub geht „online“ Personalaufwand (Projektleiter, Projektteammitarbeiter, Projektmitarbeiter) finanzieller Aufwand: sehr gering materieller Aufwand: Laptop, Internetzugang

Ersteller/in: Anna Lang,

Seite 1 von 1

Karina Schneider

Bikerclub Six-Aces

Seite 11/70


3.4 Projektdurchführbarkeitsanalyse

Durchführbarkeitsanalyse Bereich

Frage Gibt es genügend Personen in und außer-

Personal-

halb der Schule, die an

ressourcen

dem Projekt mitarbeiten können?

chen Geldmittel aufge-

Ressourcen

tung

Ja. Projektleiter, Projektteammitarbeiter

und

Projektmitarbeiter (Professoren,

möglich

Bikerclubmitglieder) vorhanden

Können die erforderli-

Finanzielle

Bewer-

Ergebnis

bracht werden?

Es werden kaum finanzielle Mittel benötigt.

möglich

Das Projektende ist erIst das geplante Pro- reichbar.

Zeitliche

Ein

Zeitauf-

jektende zeitlich realis- wand von durchschnitt- möglich

Ressourcen

tisch erreichbar?

lich 5 Stunden pro Woche ist einzuplanen. Projektmanagement-

Gibt es in der Schule Basics

vorhanden,

das notwendige Know- Know-How um Home-

Know-how

how, um das Projekt page zu erstellen vorumzusetzen?

möglich

handen; bei Fragen an Professoren wenden Aufgrund der Homepage

Rechtfertigt der Nutzen werden mehr Menschen Wirtschaftlichkeit

den zeitmäßigen und auf den Bikerclub aufkostenmäßigen

Auf- merksam, es steigt das

möglich

Interesse am Club. 

wand?

es rentiert sich Ersteller/in: Version: 1

Datum: 21.01.2010

Anna Lang

Seite 1 von 1

Karina Schneider Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 12/70


3.5 Projektumweltanalyse Projektmitglieder ICS-Lehrer Projektteammitglieder Eltern Projektauftraggeber

Informatiklehrer (AINF, ÜFA)

Bikerclub Six-Aces Homepage (Projekt) Projektleiter

Bikerfans

ERG-Lehrerin

Konkurrenz

Lehrer (Hauptfächer)

andere Lehrer

negative Einstellung gegenüber dem Projekt

positive Einstellung gegenüber dem Projekt

keine Grafik

Karina Schneider Anna Lang

neutrale Einstellung gegenüber dem Projekt

Bikerclub Six-Aces

Seite 13/70


3.6 Meilensteinplan

MEILENSTEINPLAN NR.

MEILENSTEIN

PLANTERMINE

IST-TERMINE

1

Projektstart durchf端hren

8.10.2009

15.10.2009

2

Template finden

15.10.2009

22.10.2009

3

Corporate Design erstellen

19.11.2009

19.11.2009

4

Informationen sammeln

26.10.2009

26.10.2009

5

Template anpassen

3.12.2009

3.12.2009

6

Datenbank erstellen

3.12.2009

3.12.2009

7

Sessions einbinden

7.01.2010

14.1.2010

8

Unterseiten erstellen

25.03.2010

18.03.2010

9

dynamische Seiten erstellen

2.04.2010

31.03.2010

10

Projektabschluss durchf端hren

12.04.10

9.04.2010

Name: Version: 1

Datum: 9.4.2010

Anna Lang

Seite 1 von 1

Karina Schneider

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 14/70


3.7 Projektstrukturplan

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 15/70


3.8 Arbeitspakete

Projektstart 1.1.

Projektdefinition

Inhalt

Beschreibung des Projekts  Präsentation

Nicht-Inhalt

keine Präsentation

Ergebnis

erfolgreicher Projektstart

Ressourcen ArbeitspaketVerantwortlicher

Projektkoordination 1.2. Inhalt

Nicht-Inhalt

Karina Schneider Anna Lang

Zeit, Projektleiter, Projektteammitarbeiter, Laptop Programm: Powerpoint Anna Lang

Projektdefinition gut verteilte Aufgaben innerhalb der Projektgruppe •

Aufgaben werden nicht aufgeteilt

nicht oder doppelt erledigt Bikerclub Six-Aces

Seite 16/70


Ergebnis

organisierte Aufgabenverteilung

Ressourcen

Zeit, Projektleiter, Projektteammitarbeiter

ArbeitspaketVerantwortlicher

Projektcontrolling 1.3.

Inhalt

Karina Schneider

Projektdefinition •

ständige Zielüberprüfung

einzelne Aufgaben müssen zu einem bestimmten Zeitpunkt erledigt sein

• Nicht-Inhalt Ergebnis Ressourcen ArbeitspaketVerantwortlicher

Deadlines müssen beachtet werden

unkoordiniertes Zeitmanagement •

gutes Projektcontrolling

Teamleiter hat die Übersicht

Zeit, Projektleiter, Projektteammitarbeiter, Laptop Karina Schneider

Projektabschluss 1.4.

Projektdefinition

Inhalt

Zeitgerechte Projektabgabe

Nicht-Inhalt

Frist wurde nicht eingehalten

Ergebnis

Erfolgreiche Präsentation (Matura)

Ressourcen ArbeitspaketVerantwortlicher

Karina Schneider Anna Lang

Laptop, Internet, Zeit, Projektleiter, Projektteammitglied Anna Lang

Bikerclub Six-Aces

Seite 17/70


Farben 2.1. Inhalt Nicht-Inhalt Ergebnis

Ressourcen ArbeitspaketVerantwortlicher

Schriftarten 2.2. Inhalt

Projektdefinition passende, harmonische Farben suchen  passend zum Thema grelle, unharmonische Farben  Neonfarben etc. optimale Farben für das Corporate Design festgelegt Zeit, Projektleiter, Projektteammitarbeiter, Laptop, Programm: Gimp Anna Lang

Projektdefinition •

gut lesbare, harmonische Schriften suchen

Schriftarten für mehrere Betriebssysteme

unlesbare, komplizierte, unübersichtliche

Nicht-Inhalt

Schriften •

nur bei einem Betriebssystem vorhanden

Optimale Schriftarten gefunden, welche auch auf Ergebnis

mehreren Betriebssystemen ausgegeben werden kann

Ressourcen ArbeitspaketVerantwortlicher

Logo 2.3. Inhalt

Nicht-Inhalt Ergebnis Karina Schneider Anna Lang

Zeit, Projektleiter, Projektteammitarbeiter, Laptop, Internet Karina Schneider

Projektdefinition •

harmonisch mit den Farben

passend zum Thema

unpassend

in Kontrast zu den Farben

Logo gefunden Bikerclub Six-Aces

Seite 18/70


Ressourcen ArbeitspaketVerantwortlicher

Layout 2.4. Inhalt Nicht-Inhalt Ergebnis

Ressourcen ArbeitspaketVerantwortlicher

Zeit, Projektleiter, Projektteammitarbeiter, Laptop, Programme: Gimp Anna Lang

Projektdefinition klar strukturiertes Template suchen an unsere Bedürfnisse anpassen unübersichtliche Struktur übersichtliches, gut strukturiertes Layout unseren Wünschen angepasst Zeit, Projektleiter, Projektteammitarbeiter, Internet, Laptop Karina Schneider

Fertigstellen 2.5.

Projektdefinition

Inhalt

letzte Feinheiten werden abgestimmt

Nicht-Inhalt Ergebnis Ressourcen ArbeitspaketVerantwortlicher

Index 3.1. Inhalt Nicht-Inhalt

Karina Schneider Anna Lang

Fehler im Corporate Design  keine zusammenhängende Komponenten Ziel wurde erreicht Zeit, Projektleiter, Projektteammitarbeiter, Laptop, Internet, Programm: Gimp Anna Lang

Projektdefinition Hauptseite soll klar strukturiert und ansprechend sein nicht ansprechende Hauptseite

Bikerclub Six-Aces

Seite 19/70


Ergebnis

Ziel einer guten Index-Seite erreicht Zeit, Projektleiter, Projektteammitarbeiter, Laptop,

Ressourcen

Internet, Fotos Programme: Notepad

ArbeitspaketVerantwortlicher

History 3.2.

Anna Lang

Projektdefinition Geschichte des Bikerclubs soll auf eine anspre-

Inhalt

chende Art und Weise ausgegeben werden  passend zum Layout zusätzliche Bilder sollen die Seite auflockern

Nicht-Inhalt

kein sinnloser Text und unpassende Fotos

Ergebnis

klare Darstellung der historischen Ereignisse Zeit, Projektleiter, Projektteammitarbeiter, Pro-

Ressourcen

jektmitarbeiter, Laptop, Internet, Fotos Programme: Notepad

ArbeitspaketVerantwortlicher

Gallery 3.3. Inhalt

Karina Schneider

Projektdefinition Fotos sollen anhand einer übersichtlichen Methode ausgegeben werden

Nicht-Inhalt

Fotos können nicht angegeben werden

Ergebnis

Strukturiertes Online-Fotobuch Zeit, Projektleiter, Projektteammitarbeiter, Pro-

Ressourcen

jektmitarbeiter, Laptop, Internet, Fotos Programme: Notepad

ArbeitspaketVerantwortlicher

Karina Schneider Anna Lang

Anna Lang

Bikerclub Six-Aces

Seite 20/70


Guestbook 3.4.

Projektdefinition

Inhalt

Gäste sollen die Möglichkeit haben auf einfachste Art ihre Gedanken niederzuschreiben

Nicht-Inhalt

kein Guestbook vorhanden nicht funktionsfähig

Ergebnis

unkompliziertes,

bedienungsfreundliches

Guestbook Ressourcen

Zeit, Projektleiter, Projektteammitarbeiter, Laptop, Internet, Fotos Programme: Notepad

Arbeitspaket-

Karina Schneider

Verantwortlicher

Links 3.5.

Projektdefinition Verweise auf Partnerseiten

Inhalt

die Interessen des Auftraggebers sollen wiedergegeben werden

Nicht-Inhalt

Ergebnis

kein Zusammenhang mit der Homepage nicht funktionierende Links guter Überblick auf Partnerseiten und Interessen des Auftraggebers Zeit, Projektleiter, Projektteammitarbeiter, Pro-

Ressourcen

jektmitarbeiter, Laptop, Internet, Fotos Programme: Notepad

ArbeitspaketVerantwortlicher

Login 4.1.

Anna Lang

Projektdefinition Session: Members sollen sich auf dieser Seite

Inhalt

einloggen können Personen mit falschem Passwort oder Benutzername sollen verweigert werden

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 21/70


Nicht-Inhalt

fremde Personen können sich anmelden

Ergebnis

funktionierende Session-Funktion Zeit, Projektleiter, Projektteammitarbeiter, Laptop,

Ressourcen

Internet Programme: Notepad

ArbeitspaketVerantwortlicher

Members 4.2. Inhalt Nicht-Inhalt Ergebnis

Karina Schneider

Projektdefinition Klick auf Fotos  Daten der Members werden aus der Datenbank ausgegeben keine Datenbank vorhanden Datensätze werden ausgewählten Personen ausgegeben Zeit, Projektleiter, Projektteammitarbeiter, Laptop,

Ressourcen

Internet, Fotos Programme: Notepad, Gimp

ArbeitspaketVerantwortlicher

Events 4.3.

Anna Lang

Projektdefinition eingeloggte Members können Events bearbeiten, erstellen und löschen

Inhalt

Events sollen allen Homepage-Besuchern ausgegeben werden übersichtlich gegliedert

Nicht-Inhalt

leere Eventsseite

Ergebnis

funktionierende Ausgabe der Events

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 22/70


Zeit, Projektleiter, Projektteammitarbeiter, Laptop, Ressourcen

Internet, Fotos Programme: Notepad, Gimp

ArbeitspaketVerantwortlicher

Anna Lang

Anlegen 5.1.

Projektdefinition

Inhalt

treffender Name f체r Datenbank

Nicht-Inhalt

Datenbank ist nicht angelegt

Ergebnis

angelegte Datenbank

Ressourcen ArbeitspaketVerantwortlicher

Tabellen 5.2.

Zeit, Projektleiter, Projektteammitarbeiter, Laptop, Internet, Zugangsdaten via Bildungsserver Karina Schneider

Projektdefinition treffender Name f체r Tabelle

Inhalt

Inhalt der Tabelle festlegen Struktur festlegen

Nicht-Inhalt

keine Tabelle vorhanden

Ergebnis

aussagereiche Tabellenargumente

Ressourcen ArbeitspaketVerantwortlicher

Zeit, Projektleiter, Projektteammitarbeiter, Laptop, Internet, Zugangsdaten via Bildungsserver Anna Lang

Datens채tze 5.3.

Projektdefinition

Inhalt

Datens채tze eingeben

Nicht-Inhalt

falsche Datenangaben

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 23/70


Ergebnis

richtige Datensätze Zeit, Projektleiter, Projektteammitarbeiter, Laptop,

Ressourcen

Internet, Zugangsdaten via Bildungsserver

ArbeitspaketVerantwortlicher

Karina Schneider

3.9 Projektdokumentation Datum

Beschreibung

15. Oktober. 2009

Überlegungen zum Aufbau Template aussuchen1

22. Oktober. 2009

Corporate Design überlegen; Farben: rot (920a0a), schwarz und weiß; Navigationsleiste, Seitenbalken, Seitenränder – Farbverlauf mithilfe von Gimp anpassen

26. Oktober. 2009

Materialen sammeln Bilder machen Impressum einfügen (Adresse, Name,…) Corporate Design bearbeiten; Schriftarten aussuchen:

29. Oktober. 2009

Navigationsleiste - Matura MT Script Capitals Titel – Tempus Sans ITC

Größe :44

Überschriften – Georgia normaler Text – Georgia 05. November. 2010

Index-Seite in Corporate Design anpassen Bild (Gruppenfoto) am oberen Rand des Template einfügen

19. November. 2010

Navigationsleiste unseren gewünschten Unterseiten angepasst (was unnötig war da wir später bemerkt hatten, dass es die Schriftart nicht auf jeden PC gibt) Foto (mit Logo) mithilfe von Gimp bearbeiten

26. November. 2010

Index-Seite kopiert und umbenannt – Unterseiten Navigation verlinken dynamische Seiten beginnen

1

www.freewebtemplates.com, www.freewebsitetemplates.com www.freecss.com

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 24/70


Grundgerüst für Events und Members bearbeiten

03. Dezember. 2010

Beginn der Login-Funktion Datenbank anlegen Tabelle Benutzer und Events anlegen Sessions unserer Datenbank und php-Seiten angepasst

10. Dezember. 2010

Search-Funktion von Original-Seite auf Login-Funktion umändern da nur 1 Feld zur Eingabe vorhanden  zweites Feld hinzufügen

30.Dezember.2010

Login-Funktion versucht richtig zu stellen – hat nicht funktioniert

07. Jänner. 2010

Datenbank-Zugang verändern (am Server anpassen) Tabelle Benutzer in Datenbank bearbeiten – Benutzer anlegen

11. Jänner. 2010

Navigationsleiste mithilfe von Gimp als Bild speichern  da die Schriftart sind nicht bei jedem funktionieren würde Navigationsleiste verlinken

14. Jänner. 2010

geänderte Navigationsleiste in den einzelnen Seite einbinden History-Seite beginnen  Text einfügen und Schriftart dem Corporate Design anpassen Login – Funktion – fertiggestellt und anstatt auf jeder Seite am linken Rand sichtbar – auf neuer Seite Login – Button erstellt und verlinkt  einbinden

18. Jänner. 2010

Members – Seite bearbeiten Tabelle einfügen Fotos + Name und Funktion des Mitgliedes in Tabelle verweisen

20. Jänner. 2010

pruefen.php – Seite dem Corporate Design angepasst auloggen.php – Seite dem Corporate Design angepasst Theorie Projektmanagement

21. Jänner. 2010

28. Jänner. 2010

benutzer.php  Corporate Design anpassen ausloggen.php, pruefen.php  Fehler ausbessern History  Bild eingefügt Guestbook  suchen, einbinden, Corporate Design anpassen Überschrift wegen Schriftart  Bild eingefügt

18. Feber. 2010

Calendar-Button, Login-Überschrift als Bild

25. Feber. 2010

Members-Seite mit Datenbank verbunden

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 25/70


04.März. 2010

für Gallery-Seite php-script2 gesucht und bearbeitet

11. März. 2010

Gallery-Seite fertig; Fotos bearbeiten, verlinken

18. März. 2010

Links – Unterseite bearbeiten

25. März. 2010

dynamische Seite event.php beginnen, ändern, löschen, hinzufügen – Funktion einbauen

31. März. 2010

Überlegung über Aufbau von event-Seite ändern, löschen, hinzufügen – Funktion  Eventverwaltung nur für Members  überprüfung ob man eingeloggt ist bzw. verweis auf Login-Seite Corporate Design an einige Seiten anpassen Überprüfung über Funktion der Seiten Calendar suchen und einbinden, Corporate Design anpassen Bilderupload sucher und versuchen einzubinden  funktionierte nicht

01. April. 2010

restliche Seiten an Corporate Design anpassen Überschriften kontrollieren Calendar Farbfehler beheben Fehler auf event_admin.php (Anzeige_bis) ausbessern event_admin.php  Tabelle anpassen

02. April. 2010

Intro erstellen mit Facharbeit beginnen

2 http://www.script-archiv.com/Detailed/1299.html Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 26/70


history.html

Karina Schneider

Anna Lang gallery.html

Homepage

nen Seiten unserer

Auflistung der einzel-

member_details.php

members.html

settings.php

check.php

Bikerclub Six-Aces event_einfuegen.html

check_event.php

login_event.php

php

event_db_loeschen

event_loeschen.php

php

event_db_aenden

event_aendern.php

php

ausloggen_event.

gbook.php

einloggen.php

event_admin.php

functions.php

guestbook.php

event_details.php

events.php

home.html

index.html

links.html

ausloggen.php

pruefen.php

benutzer.php

login.php

4 Unsere Homepage

Seite 27/70


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

3

http://de.wikipedia.org/wiki/Hypertext_Markup_Language

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 28/70


5.2 PHP (Personal Home Page) PHP4 ist eine sogenannte Scriptsprache, die von einem in den Webserver eingebundenen PHP-Interpreter ausgeführt wird. Dadurch ist es möglich die Ausgabe des Webservers an einen Klienten nachhaltig zu verändern, wodurch sich eine ganze Reihe von Einsatzmöglichkeiten ergibt. 1985 entwickelte der Däne Rasmus Lerdorf in der Skriptsprache PERL eine Reihe von Funktionen zur dynamischen Erstellung von Homepages und nannte es PHP – Personal Home Page. Im Laufe der Jahre wurden diese dann stetig weiterentwickelt und wurden mit der Umsetzung in der Programmiersprache „C“ letztendlich leistungsfähiger als PERL selbst. Diese Leistungsfähigkeit wurde 1999 in PHP4 mit dem Einsatz einer neuen Engine, der ZEND-API, nochmals gesteigert. Inzwischen gibt es erste Ausgaben von PHP5. Die Vor- und Nachteile von PHP begründen sich darin, dass es auf dem Webserver und nicht beim Klienten ausgeführt wird. Der Vorteil hierbei im Gegensatz zu Clientscripten ist, dass das Ergebnis bei jeden Klienten gleich ist und keine Kompatibilitätsprobleme mit dessen Plattform wie zum Beispiel JavaScript, entstehen. Das ist allerdings auch der Nachteil: PHP kann keine animierten Menüs oder fliegende Bilder beim Klienten anzeigen. Um PHP-Scripte ausführen zu können, benötigt man einen Webserver wie zum Beispiel Apache (www.apache.de) oder IIS (www.microsoft.com) und einen PHP-Interpreter (www.php.net). Beides kann man auf einem lokalen Rechner über den sogenannten Localhost laufen lassen, ohne dass man dazu eine Internetverbindung benötigt. Um Scripte in PHP selbst schreiben zu können reicht ein einfacher Text-Editor wie zum Beispiel NotePad

4

http://de.wikipedia.org/wiki/PHP

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 29/70


aus, wobei für PHP bereits einige gute Editoren gibt, die mit ihrem Syntaxher-Vorhebungen die Lesbarkeit enorm steigern.

5.3 MySQL Der MySQL5 Server ist ein relationales Datenbankverwaltungssystem. Es ist

als

Open-Source-Software,

aber

auch

als

kommerzielle

Enterpriseversion für verschiedene Betriebssysteme erhältlich und bildet die Grundlage für viele dynamische Webauftritte. Ursprünglich wurde MySQL von einem schwedischen Unternehmen, namens MySQL AB entwickelt. 2008 wurde das Unternehmen von Sun Microsystems übernommen, das nun auch für die Weiterentwicklung des Codes verantwortlich ist. Anfang dieses Jahres wurde Sun Microsystems von Oracle übernommen, dadurch wurde MySQL Eigentum eines der größten Anbieter von kommerziellen Datenbanken.

5.4 CSS (Cascading Style Sheets) Heutzutage ist CSS6 die Standard-Stylesheetsprache für Webseiten. CSS wird vor allem im Zusammenhang mit HTML und XML eingesetzt. Es legt dabei fest, wie ein bestimmter Inhalt oder Bereich einer Internetseite dargestellt werden soll. Im HTML-Dokument gibt man nur die Bedeutung einzelner Abschnitte aus, das Aussehen dieser einzelnen Abschnitte wird im CSS festgelegt. Kurz gesagt ist CSS für die optische Darstellung zuständig. Man kann es zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern und für fortgeschrittene Positionierung benutzen.

5 6

http://de.wikipedia.org/wiki/MySQL http://de.html.net/tutorials/css/lesson1.asp

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 30/70


CSS wird meistens als externes Stylesheet in HTML oder XML-Seiten eingebunden. Dies hat den großen Vorteil, dass für mehrere Dokumente das Stylesheet nur einmal heruntergeladen werden muss.

5.5 Notepad Notepad++7 ist ein Open-Source-Editor, der äußerst viele Programmiersprachen unter Microsoft Windows und anderen kompatiblen Betriebssystemen unterstützt. Das Projekt Notepad++ basiert auf Scintilla, eine sehr nützliche Editorkomponente, und ist in „C++“ geschrieben unter reiner Nutzung der WIN32 API, für eine schnellere Ausführungsgeschwindigkeit und Programmgröße. Notepad++ ist zuverlässig und stabil, allerdings gibt es immer noch Bugs und einige fehlende Features.

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

7 8

http://notepad-plus.sourceforge.net/de/site.htm http://docs.gimp.org/de/

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 31/70


sch채rfe zu entfernen, was besonders f체r die Nachbearbeitung von Fotos interessant ist.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 32/70


6 Corporate Design 6.1 Template Template vorher (im Originalzustand)9

Abbildung 3

Template nachher

9

www.freewebtemplates.com

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 33/70


Abbildung 4

Schrittfolge: 1. 2. 3. 4. 5. 6. 7. 8. 9.

Template aussuchen (www.freewebtemplates.com) Corporate Design verändern Farbverlauf der Seite(mittels Gimp) Hauptbild einfügen Navigation einfärben – Farbverlauf (Gimp)  Schrift verändern  Bild Search – Feld entfernen Seitennavigation anpassen Login Button erstellen Impressum hinzufügen

Nach umfangreicher Template-Suche auf diversen Seiten, u.a.  www.freewebtemplates.com  www.templateworld.com  www.freecss.com haben wir uns für das oben dargestellte Template entschieden. Doch das Template entsprach nicht genau unseren Vorstellungen, daher haben wir es verändert. Als wir unsere Veränderungen abgeschlossen hatten, konnte man kaum noch etwas vom originalen Template erkennen. Hauptbild

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 34/70


Der obere Teil (Header) des Templates wurde durch das Gruppenbild der Six-Aces ausgetauscht. Natürlich musste das Bild bearbeitet werden. Die Hauptaufgaben beim Bearbeiten des Bildes waren:  Hintergrund des Bildes ändern (auf weiß verändert)  zuschneiden (Gimp)  Größe ändern (Gimp) Impressum

Abbildung 5

6.1.1 Navigationsleiste Die Navigationsleiste musste verändert werden, hier entstand ein Farbverlauf mittels Gimp, von rot auf schwarz. Des Weiteren haben wir eine passende Schriftart ausgewählt und das Ganze zu einem Bild umformatiert, da die Schriftart nicht auf allen Betriebssystemen ausgegeben wird. Originale Navigationsleiste Mit Hilfe des sogenannten “Zauberstabes“ wurden die weißen Ecken des Bildes markiert und mit Hilfe des Werkzeuges „Füllen“ wurden die Ecken anschließend schwarz gefüllt. Danach  Menüleiste – Auswahl – invertieren, um nicht die Ecken sondern den Balken allein zu markieren Nun musste der Farbverlauf geändert werden. Dies geschah mittels Werkzeug „Farbverlauf“. Bevor man wie in Abb. 20 das Werkzeug verwendet musste man die Farben auswählen. Zum Schluss mittels Ziehen des Werkzeuges die jeweilige Stärke der einzelnen Farben bestimmen.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 35/70


Abbildung 6

Da unsere gewählt Schriftart nicht bei jedem Betriebssystem unterstützt wird, mussten wir auch den Text in der Navigationsleiste hinzufügen. Dies geschah wieder mit Hilfe von Gimp. Wir wählten das Werkzeug „Text“ aus und passten Schriftart, Schriftgröße und Schriftfarbe an. Danach setzte man mit der Maus dort an, wo man den Text haben möchte und gab den gewünschten Text im Zusatzfeld ein.

Abbildung 7

Schließlich musste der Text auch als Link dargestellt werden. Dazu holten wir uns aus dem Internet den gewünschten Code.

Abbildung 8

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 36/70


Diesen Code mussten wir natürlich noch anpassen. Zuerst wurde dem verlinkten Bild der Verweis usemap=“„navigation“ zugeordnet. Dann musste man mit Hilfe von Gimp die Koordinaten der oberen linken und der unteren rechten Ecke des jeweiligen Wortes (z.B.: Members) suchen und im Code eingeben. Zum Schluss musste noch die Seite, auf welche verwiesen wird (members.php) angegeben werden. Unsere Navigationsleiste:

Abbildung 9

6.1.2 Seitenleiste Die Search-Funktion der Originalseite wurde entfernt. An dessen Stelle setzten wir eine Login-Funktion mit verlinkten Button. Außerdem beinhaltet unsere Seitenfunktion einen Calendar, welchen wir dem Corporate Design anpassen mussten. Die Bilder Login und Calendar wurden wie unsere Navigationsleiste mit Hilfe von Gimp erstellt.

Abbildung 10

Im Quelltext vom Calendar (siehe Abb.10) konnten wir unsere gewünschte Schriftart und Schriftfarben verändern.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 37/70


Unsere Seitenleiste:

Abbildung 11

6.1.3 Titel Da wir für unsere Titel-Überschriften, wie bei unserer Navigationsleiste und Seitenleiste, eine besondere Schriftart verwenden, mussten wir auch unsere Überschriften als Bilder speichern. Mit Hilfe von Gimp und dem „Text“-Werkzeug fügten wir unsere Titel im leeren Bild ein. Natürlich wurden auch hier Farbe, Größe und Schriftart angepasst.

Abbildung 12

6.2 CSS 6.2.1 Schriftart Navigationsleiste – Matura

MT Script Capitals

Seiten-Navigationsleiste – Tempus Sans ITC Seitentitel – Tempus Sans ITC

Größe :44

Größe :44

Überschriften – Georgia normaler Text – Georgia Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 38/70


6.2.2 Farbe rot

#920a0a

schwarz

#000000

weiß

#FFFFFF

6.2.3 Design Das Design unserer Homepage ist von klaren Linien und runden Ecken gekennzeichnet. Des Weiteren dominieren die Farben rot, schwarz und weiß und bilden einen harmonischen Farbverlauf. Die Strukturierung der Seite besteht aus einer zentrierten Darstellung der Homepage, die Platz für einen rechten bzw. linken Rand lässt. Jede Seite (Ausnahme event_admin.php, ohne Feature „calendar“) wird gleich dargestellt, d.h. das gleiche Layout, die gleiche Navigation. Einen Kontrast zu den klaren Hauptlinien bilden die einzelnen SeitenÜberschriften, sie werden in runden Boxen dargestellt. Auch die Schrift ist von weichen Linien geprägt. Zusammenfassend lässt sich das Design als klassisch, aber dennoch mit modernen und vor allem rockigen Akzenten, passend zur Homepage, bezeichnen.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 39/70


7 Unsere Seiten 7.1 index.html Die index.html besteht aus einem Bildwechsel, welcher beim Anklicken auf die Seite „home.html“ verweist. Die Bilder wurden mittels Gimp erstellt und sollen ein sogenanntes Intro verkörpern. Vorhergehensweise Gimp: 1. neues Bild erstellen (867x650px) 2. Hintergrund schwarz einfärben 3. Bild einfügen (intro.jpg) 4. Titel hinzufügen (Schriftart: Matura MT Script Capitals)

intro.jpg

Abbildung 13

Bilder in Homepage einbinden: 1. an CSS Datei anbinden 2. Java-Script in Quelltext einbinden (für den Bilderwechsel) 3. beim Anklicken auf die Seite „home.html“ verlinken Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 40/70


Anbindung

an

die

CSS

Datei Link auf home.html

Abbildung 14

7.2 home.html Die Seite home.html bildet die eigentliche Hauptseite der Homepage. Sie ist der zentrale Ausgangspunkt für die einzelnen Unterseiten. Charakteristisch für die Seite ist das Markenzeichen des Bikerclubs, die Bikerweste mit dem Logo des Clubs. Dieses Bild wurde mittels Gimp bearbeitet und wurde zum Eye-Catcher der Seite. Vorhergehensweise Gimp: 1. Bild öffnen 2. weißen Hintergrund schwarz einfärben (freie Auswahl des Bereiches) 3. weiße Umrandung lassen 4. Bild verkleinern (zuschneiden)

Abbildung 15

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 41/70


Content der home.html:

Navigationsleiste

Einbindung Bild (logo.jpg)

Abbildung 16

Unsere home.html

Abbildung 17

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 42/70


7.3 history.html Die Seite history.html gibt Informationen 端ber die Entstehung des Bikerclubs, sowie dessen Hintergrund. Am Ende der Seite befindet sich auch ein Bild.

Abbildung 18

Unsere history.html

Abbildung 19

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 43/70


7.4 members.php Auf der Seite members.html wurde eine einfache Tabelle mit zwei Spalten eingef체gt. In die Spalten setzten wir jeweils ein Bild von einem Mitglied und in der Zeile darunter die Funktion des Mitglieds. Die Bilder der Mitglieder wurden verlinkt und auf members_details.php verwiesen. Jedem Bild ist eine id-Nummer vergeben worden, sodass auch bei jedem Bild der richtige Member auf member_details.php aufgerufen wird.

Abbildung 20

Unsere members.php

Abbildung 21

N채here Erkl채rungen zu member_details.php gibt es bei den dynamischen Seiten. Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 44/70


7.5 gallery.html Auf der Seite gallery.html10 sind lediglich die einzelnen Links zu den jeweiligen Ereignissen. Der Link weist immer in den Ordner gallery und in dessen Unterordner des jeweiligen Ereignisses. In den Unterordnern befinden sich schließlich alle Bilder inklusive index.php und einer diashow.txt Datei. Die diashow.txt Datei speichert alle Bilder und in der index.php werden die Bilder der .txt Datei geöffnet. Mit Hilfe des navigation.gif kann man durch die einzelnen Bilder blättern. Hier wird der Titel der Seite vergeben

Hier wird die diashow.txt Datei geöffnet und die Daten aufgerufen

Abbildung 22

Damit wir diese Seite dem Corporate Design anpassen konnten, mussten wir darauf achten, dass der Pfad richtig ist. Da sich die index.php in zwei

10

www.artmedic.de

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 45/70


Unterordnern (gallery, z.B.: Hochzeit Mario) befindet, m端ssen auch alle Bilder und Unterseiten mit ../../ verwiesen werden.

Abbildung 23

Unsere gallery.html

Abbildung 24

Eine unserer Unterseiten der Gallery

Abbildung 25

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 46/70


7.6 events.php Die Seite events.php besteht aus einer Tabelle. In der Tabelle werden einzelne Daten von unserer Datenbank aufgerufen. Unser Grundgerüst besteht aus Name, Datum, Ort und einem Details-Button. Am Ende der Seite gibt es einem Link für das Hinzufügen eines Events, welcher nur für Members zugängig ist. Beim Daraufklicken wird man sofort zum Login weitergeleitet.

Grundgerüst der Tabelle

mit diesen Befehlen werden die gewünschten Daten von der Datenbank aufgerufen

Link, welcher auf login_event.php verweist

Abbildung 26

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 47/70


Unsere events.php

Abbildung 27

7.7 guestbook.php Die Seite guestbook.php bietet den Fans des Bikerclubs, sowie auch jedem anderen die Möglichkeit Nachrichten an den Club zu hinterlassen. Das Gästebuch wurde mithilfe eines vorhandenen Scripts11 erstellt. Das Gästebuch bietet zusätzlich auch noch animierte Smileys, welche die Homepage freundlicher und anregender gestalten. Unsere guestbook.php

Abbildung 28

11

www.hinnendahl.com

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 48/70


7.7.1 Installation Nachdem wir das Gästebuch heruntergeladen hatten, bearbeiteten wir die Dateien „gbook.php“, „functions.php“ und „settings.php“, sowie die dazugehörige

„gbstyle.css“.

Diese

Dateien

befinden

sich

im

Ordner

„guestbook“. Die Einstellmöglichkeiten sind sehr gut beschrieben und waren relativ leicht verständlich.

Verlinkung zum Gäs-

Abbildung 29

tebuch- Skript 7.7.2 Verwaltung Das Gästebuch wurde so eingestellt, dass es nur von einem Mitglied des Bikerclubs verwaltet werden kann. Dieses Mitglied kann dann auch Beiträge löschen, etc.

7.8 links.html Hier wurden lediglich einige Links, von anderen Motoradclubs oder beliebte Seiten der einzelnen Mitglieder aufgelistet.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 49/70


7.9 login.php Auf der Seite login.php wird den Mitgliedern die Möglichkeit geboten, sich einzuloggen. Die Seite steht eng in Verbindung mit „benutzer.php“ sowie der „pruefen.php“. Genauere Erklärungen finden Sie auf den folgenden Seiten. Siehe dynamische Seiten. Unsere login.php

Abbildung 30

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 50/70


8 Unsere Datenbank Bevor wir die dynamischen Seiten erstellen konnten, mussten wir eine dynamische Datenbank mit verschiedenen Tabellen anlegen. Dabei überlegten wir uns zuerst wie viele und vor allem welche Tabellen wir benötigen. Unsere Entscheidung fiel auf zwei Tabellen, nämlich die Tabelle „benutzer“ und die Tabelle „event“. Eine Hilfe für die Erstellung der Tabellen waren auch die ER-Diagramme, die wir vorher anfertigten. Zugangsdaten: Datenbank: d00c1983 Passwort:

vVK46L4rPchzpCwa

8.1 Anlegen der Datenbank Nach der ausführlichen Planung unserer Datenbank, konnten wir damit beginnen die Tabellen anzulegen. Dafür wurde uns ein eigener Server mit Datenbanken zur Verfügung gestellt, auf dem wir unsere Tabellen mittels phpMyAdmin erstellen konnten. Schrittfolge: 1. Anmeldung auf dem Server

Abbildung 31

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 51/70


2. Anzeige der Datenbankstruktur

Abbildung 32

3. Anlegen der Tabelle „event“

Abbildung 33

Nach dem Bestätigen mit dem Button „OK“ (aus Platzmangel am Screenshot nicht zu sehen) kann man beginnen die einzelnen Attribute und ihre Eigenschaften einzutragen.

Abbildung 34

Das Feld „eventnr“ stellt hier den Primärschlüssel dar. Hat man alles richtig eingegeben, kann man die Attribute mit dem Button „Speichern“ erstellen. Änderungen können auch noch im Nachhinein vorgenommen werden.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 52/70


Abbildung 35

Diese Felder werden an die Tabelle „event“ in der Datenbank „d00c1983“ gesendet.

Abbildung 36

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 53/70


Durch das Klicken auf den Button „Einfügen“ kann man die einzelnen Datensätze einfügen. Das Feld „eventnr“ muss nicht ausgefüllt werden, da es sich durch die zugeteilte Eigenschaft „auto_increment“ selbst fortlaufend nummeriert.

Abbildung 37

Nach dem Bestätigen mit dem Button „OK“ werden die Daten in die Tabelle gespeichert.

8.2 Tabelle „benutzer“ Die Tabelle „benutzer“ speichert wichtige Informationen über die Mitglieder des Bikerclubs. So sind in dieser Tabelle auch die Zugangsdaten für die Registration gespeichert, in den Feldern: Passwort und Benutzername. Des Weiteren werden auch andere sinnvolle Informationen gespeichert, wie zum Beispiel Vorname- und Nachname, Straße, Ort, PLZ, Geburtsdatum, E-Mail-Adresse, Telefonnummer, sowie eine Benutzernummer die durch den Wert auto_increment automatisch vergeben wird. Diese Informationen, mit Ausnahme von Benutzername, Benutzernummer und Passwort werden auf der Seite member_details.php aus der Datenbank ausgegeben. Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 54/70


8.2.1 ER-Diagramm „benutzer“

Abbildung 38

8.3 Tabelle „event“ Die Tabelle „event“ speichert wichtige Informationen bezüglich der Events des Bikerclubs. Die Felder Ersteller, Datum, Ort, Name, Beschreibung und ein Feld für den Endzeitpunkt der Anzeige bilden die Grundlage für die Ausgabe der einzelnen Events. Gleich wie bei der Tabelle „benutzer“ wird auch hier eine automatische Eventnummer durch den Wert auto_increment vergeben. Die Werte der einzelnen Felder werden auf der Seite event_details.php ausgegeben.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 55/70


8.3.1 ER-Diagramm „event“

Abbildung 39

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 56/70


9 Dynamische Seiten 9.1 events.php

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 57/70


9.1.1 event_details.php Auf der Seite event_details.php werden die gewünschten Daten aus der Tabelle event aufgerufen. Wir haben die Ausgabe in Form einer Tabelle ausgeführt. Am Ende der Seite ist ein Link angegeben, um zurück auf events.php zu gelangen. Außerdem gibt es noch einen Link zur Eventverwaltung der bei richtiger Authentifizierung auf die Seite event_admin.php verweist. Weiter Informationen entnehmen Sie den nachfolgenden Punkten.

Abbildung 40

9.1.2 event_admin.php Um auf diese Seite zu gelangen bedarf es einer Authentifizierung. Sollten die Daten korrekt sein, gelangt man auf die eigentliche Seite event_admin.php auf der die Mitglieder befugt sind Events zu ändern, löschen oder hinzuzufügen. Außerdem gibt es noch einen Link, zur Seite ausloggen_event.php. Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 58/70


Befehl mit der die Daten aus der Tabelle „event“ ausgegeben werden

ÄNDERN LÖSCHEN

Abbildung 41

Abbildung 42

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 59/70


9.1.3 event_aendern.php Klickt man auf der Seite event_admin.php auf den Bleistift, so gelangt man auf die Seite event_aendern.php. Auf dieser Seite wird eine Tabelle mit den Daten des ausgewählten Datensatzes ausgegeben. Nun hat man die Möglichkeit den Datensatz nach Belieben zu ändern. Am Ende gibt es den Button „In der Datenbank speichern“, welche die Daten an die event_db_aendern.php absendet. Außerdem gibt es auch den Button „Eingabe zurücksetzen“, welcher den Event wieder in den Originalzustand bringt.

Abbildung 43

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 60/70


9.1.4 event_db_aendern.php In der event_db_aendern.php wird die erfolgreiche Nachricht „Sie haben den Event erfolgreich geändert“ ausgegeben. Des Weiteren sieht man auch die Veränderung der Daten. Danach gibt es noch einen Link zur Eventübersicht, nämlich auf die Seite event_admin.php.

Abbildung 44

9.1.5 event_db_loeschen.php Klickt man auf der Seite event_admin.php auf das Symbol „Löschen“, so wird man auf die Seite event_db_loeschen.php verwiesen. Dadurch wird der ausgewählte Datensatz gelöscht. Auf dieser Seite wird außerdem noch die Nachricht „Sie haben den Event mit der Nummer< ?php echo $_REQUEST[id];?> erfolgreich gelöscht. Mit dem Link „Zurück zur Übersicht“ gelangt man auf die Seite event_admin.php.

Abbildung 45

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 61/70


Abbildung 46

9.1.6 einloggen.php Der Link „Eventverwaltung“ auf der Seite event_details.php verweist bei korrekter Eingabe der Daten auf die Seite event_admin.php. Dabei wird zunächst auf die Seite einloggen.php verwiesen, wo die Benutzerdaten angegeben werden müssen. Beim Absenden werden die Daten an die check.php weitergegeben. 9.1.7 check.php Beim Absenden der Daten überprüft check.php ob diese Benutzerdaten existieren bzw. korrekt sind. Bei richtiger Authentifizierung verweist check.php auf die Seite event_admin.php, wenn jedoch die Daten falsch eingegeben wurden bzw. nicht existieren so wird die Meldung „Benutzer und/oder Passwort falsch“ ausgegeben. Der Link „Zurück zum Login“ verweist wieder auf die Seite einloggen.php. 9.1.8 login_event.php Der Link „Ein neues Event anlegen“ auf der Seite events.php verweist auf die Seite login_event.php. Auf dieser Seite muss man die Benutzerdaten angegeben. Beim Absenden werden die Daten an die check_event.php weitergegeben.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 62/70


9.1.9 check_event.php Beim Absenden der Daten überprüft check_event.php ob diese Benutzerdaten existieren bzw. korrekt sind. Bei richtiger Authentifizierung verweist check_event.php auf die Seite event_einfuegen.php, wenn jedoch die Daten falsch eingegeben wurden bzw. nicht existieren so wird die Meldung „Benutzer und/oder Passwort falsch“ ausgegeben. Der Link „Zurück zum Login“ verweist wieder auf die Seite login_event.php. 9.1.10 event_einfuegen.php Klickt man auf der Seite event_admin.php auf den Link „Einen neuen Event anlegen“ oder auf der Seite events.php auf den Link „Ein neues Event einfügen“, so gelangt man auf die Seite event_einfuegen.php. Auf dieser Seite wird eine Tabelle ausgegeben, in der man die Werte des neuen Datensatzes eingeben kann. Am Ende gibt es den Button „In der Datenbank speichern“, welche die Daten an die event_db_einfuegen.php absendet. Außerdem gibt es auch den Button „Eingabe zurücksetzten“, welcher das Formular leert.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 63/70


Abbildung 47

Abbildung 48

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 64/70


9.1.11 event_db_einfuegen.php In der event_db_einfuegen.php wird die erfolgreiche Nachricht „Sie haben den Event erfolgreich angelegt“ ausgegeben. Des Weiteren sieht man die eingegebenen Daten. Danach gibt es noch einen Link „Zurück zur Übersicht“,

nämlich

auf

die

Seite

event_admin.php.

Quelltext wie bei event_db_aendern.php

9.2 members.php 9.2.1 member_details.php Auf der Seite member_details.php werden die einzelnen Datensätze von der Tabelle benutzer aufgerufen. Wir haben die Ausgabe wieder in Form einer Tabelle ausgeführt. Am Ende der Seite ist ein Link angegeben, um zurück auf members.php zu gelangen.

Abbildung 49

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 65/70


Unsere member_details.php

Abbildung 50

9.3 login.php Der Button „Login“ auf der Seite home.html verweist auf die Seite login.php. Diese Seite bietet den Mitgliedern die Möglichkeit sich einzuloggen. Es müssen Benutzername und Passwort eingegeben werden beim Absenden der Daten, werden diese auf die Seite benutzer.php weitergeleitet. Außerdem bietet der Button „Löschen“ die Möglichkeit die eingegeben Daten zurückzusetzen.

Abbildung 51

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 66/70


Abbildung 52

9.3.1 benutzer.php Beim Absenden der Daten überprüft benutzer.php ob diese Benutzerdaten existieren bzw. korrekt sind. Bei richtiger Authentifizierung verweist benutzer.php auf die Seite pruefen.php, wenn jedoch die Daten falsch eingegeben wurden bzw. nicht existieren so wird die Meldung „Benutzer und/oder Passwort falsch“ ausgegeben. Der Link „Zurück zum Login“ verweist wieder auf die Seite login.php.

Abbildung 53

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 67/70


9.3.2 pruefen.php Stimmen die eingegebenen Daten mit den Datensätzen in der Tabelle „benutzer“ überein, so wird auf der Seite pruefen.php die Meldung „Sie sind eingeloggt als <?=$_SESSION[benutzername]?>“ ausgegeben. Außerdem besteht die Möglichkeit sich anschließend wieder auszuloggen. Es gibt einen Link zur Seite ausloggen.php

Abbildung 54

Abbildung 55

9.3.3 ausloggen.php Die ausloggen.php bietet den eingeloggten Mitgliedern die Möglichkeit sich wieder auszuloggen. Bei erfolgreichem Ausloggen wird die Meldung „Sie sind ausgeloggt“ angezeigt. Außerdem gibt es auf dieser Seite noch einen Link „zurück zum Login“ auf die Seite login.php.

Abbildung 56

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 68/70


10 Schlusswort Nach monatelanger harter Arbeit, sind wir stolz darauf, dass wir eine funktionsfähige Homepage vorweisen können. Das Grundgerüst unserer Homepage, sowie die statischen Seiten waren schnell fertig. Das Gestalten der dynamischen Seiten hingegen war schon etwas schwieriger und auch Nerven aufreibender. Durch genaues, gezieltes und konzentriertes Arbeiten haben wir aber auch geschafft diese komplizierte Aufgabe zu meistern. Die Arbeit an unserem Projekt war zwar oft hart und anstrengend, dennoch stets spannend und interessant. Das Wichtigste ist, so denken wir, dass wir an der Umsetzung dieses praktischen Beispiels sehr viel gelernt haben. Heute wissen wir, dass man nur mit guter Planung ein erfolgreiches Projekt abschließen kann. Einen entscheidenden Punkt konnten wir aus unserem Projekt noch mitnehmen und zwar, dass ohne „das Team“ und die Kommunikation ein gutes Projekt nicht abgewickelt werden kann. Im Großen und Ganzen hat uns die Arbeit an dem Projekt viel Spaß und Freude gemacht. Schlussendlich sind wir stolz auf das Resultat unserer Arbeit.

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 69/70


11 Literaturverzeichnis www.freewebtemplates.com www.hinnendahl.com http://www.script-archiv.com/Detailed/1299.html www.notepad-plus.sourceforge.net www.sinnedesign.de www.artmedic.de de.wikipedia.org/wiki/Hypertext_Markup_Language de.wikipedia.org/wiki/PHP de.html.net/tutorials/css/lesson1.asp

Karina Schneider Anna Lang

Bikerclub Six-Aces

Seite 70/70


Bikerclub Six-Aces