View
219
Download
0
Category
Preview:
DESCRIPTION
http://peer.pannoneum.at
Citation preview
Sophie Bezgovsek Daniela Stolawetz 2011/2012 Seite 1 von 73
Sophie Bezgovsek | Daniela Stolawetz
2011/2012
Fachspezifische
Themenstellung
Peer Mediation
Sophie Bezgovsek Daniela Stolawetz 2011/2012 Seite 1 von 73
Inhaltsverzeichnis
1 VORWORT 4
2 ABSTRACT 5
3 PROJEKTMANAGEMENT (PM) 6
3.1 PROJEKTTEAM 6
3.2 PROJEKTUMFELD 6
3.3 PROJEKTZEITRAUM 7
3.4 ZIELE UND NICHT-ZIELE 7
3.4.1 ZIELE 7
3.4.2 NICHT-ZIELE 7
3.5 PROJEKTPLANUNG 8
3.5.1 ÜBERSICHT DER MEILENSTEINE 8
3.5.2 MEILENSTEINPLAN MIT ARBEITSPAKETEN 8
3.5.2.1 Meilenstein 1: Konzept erstellen und mit Auftraggeberin koordinieren 8
3.5.2.2 Meilenstein 2: Unterlagen sammeln 9
3.5.2.3 Meilenstein 3: Entwurf der Website erstellen 10
3.5.2.4 Meilenstein 4: Website programmieren und testen 11
3.5.2.5 Meilenstein 5: Website überarbeiten 12
3.5.2.6 Meilenstein 6: Website veröffentlichen 13
3.7 PROJEKTSTRUKTURPLAN (PSP) 14
3.7.1 VORTEILE VON PSP 14
3.8 ARBEITSPROTOKOLL 16
3.9 SEITENÜBERSICHT 19
3.9.1 FRONTEND 19
3.9.2 BACKEND 20
3.10 CORPORATE DESIGN (CD) 21
3.10.1 LOGO UNSERER WEBSITE 22
3.10.2 FARBCODES 22
3.10.3 SCHRIFTART 22
3.10.4 TEMPLATE 23
3.10.4.1 Vorher 23
3.10.4.2 Nachher 23
3.11 VORHER-NACHHER-VERGLEICH 24
3.11.1 VORHER 24
3.11.2 NACHHER 24
4 GRUNDLAGEN 25
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 2 von 73
4.1 HTML (HYPERTEXT MARKUP LANGUAGE) 26
4.1.1 HTML GRUNDGERÜST 27
4.2 CSS (CASCADING STYLE SHEETS) 28
4.3 PHP (HYPERTEXT PREPROCESSOR) 29
4.4 NOTEPAD ++ 30
4.5 MYSQL 31
4.6 DATENBANK AUF PHPMY ADMIN ERSTELLEN 32
4.6.1 NEWS 32
4.6.2 PEERS 33
4.6.3 COACHES 34
4.6.4 USER 34
4.7 XAMPP 35
4.8 JALBUM 36
4.8.1 SKINS 37
4.8.2 VERÖFFENTLICHEN 37
4.9 UNTERSCHIED ZWISCHEN STATISCHEN UND DYNAMISCHEN WEBSEITEN 38
5 FRONTEND 39
5.1 HOME 40
5.1.1 DER MENÜBEREICH 41
5.1.1.1 Include-Befehl 41
5.1.1.2 Include-Datei 41
5.2 PEER-MEDIATION 43
5.2.1 WAS IST PEER-MEDIATION? 43
5.2.2 ZIELE DER PEER-MEDIATION 44
5.2.3 NICHT-ZIELE DER PEER-MEDIATION 44
5.2.4 GESCHICHTE DER PEER 45
5.3 TEAM 46
5.3.1 PEER-COACHES 47
5.4 FOTOS 48
5.4.1 TIESCHEN 49
5.4.2 AKTIONSTAG 50
5.4.3 FÜRSTENFELD 50
5.5 AUSBILDUNG, KOMPETENZEN 51
5.5.1 INHALTE 52
5.6 KONTAKT 52
5.6.1 AUF KONTAKT.PHP BEFINDET SICH DAS IMPRESSUM UND BEINHALTET FOLGENDES: 53
5.7 SPONSOREN 54
6 BACKEND 55
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 3 von 73
6.1 ANMELDEN 56
6.2 NEWS 58
6.3 COACHES 61
6.4 PEERS 64
6.5 AUSLOGGEN 67
7 NACHWORT 68
8 QUELLENVERZEICHNIS 69
9 ABBILDUNGSVERZEICHNIS 71
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 4 von 73
1 Vorwort
Im Zuge unseres Ausbildungsschwerpunktes Information Com-
munication Solutions haben wir unsere fachspezifische Themen-
stellung für das , Neusiedl am See erar-
beitet.
Das Ziel der Aufgabenstellung war, eine Homepage mit dynami-
schen Elementen mittels php mySQL zu erstellen.
Mit Hilfe unseres Professors Heinz Wurzinger haben wir ein neu-
es, anwendungstaugliches und informationsreiches Internetportal
für die Peer Mediation an unserer Schule gestaltet.
Dies war notwendig, da die bereits vorhandene Homepage nicht
mehr dem neuesten Stand gerecht wurde und der Wunsch nach
einer neuen, aktuelleren und informationsreicheren Website be-
stand.
Wir hoffen, die von uns entworfene Internetseite entspricht den
Vorstellungen unserer Auftraggeberin Frau Prof. Steffl.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 5 von 73
2 Abstract
Within the scope of our subject "Information and Communication
Solutions", we have created a web-based, electronic information
platform with a dynamic database connection for the Peer-
Mediation at our school, Neusiedl am
See.
The reason for our decision to work on this project is that we are
very interested in this topic. Moreover the coaches of Peer-
Mediation want to introduce themselves with a new website on
the internet because the existing one didn't satisfy the state-of-
the-art and the wish of a new modern and informative homepage
existed.
We have created the new homepage with the help of our teacher
Heinz Wurzinger.
We hope that this website corresponds with the vision of our
teacher Nicole Steffl.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 6 von 73
3 Projektmanagement (PM)
Voraussetzung für jedes erfolgreiche Projekt ist eine komplexe,
neuartige und zeitlich abgegrenzte Aufgabe strukturiert zu be-
wältigen. Das Managen des Projekts beinhaltet die Festsetzung
der Ziele und Nicht-Ziele und die Erstellung einer Meilensteinlis-
te, die die Arbeitspakete sowie die Zeiteinteilung enthält.
3.1 Projektteam
Projektleiterin: Sophie Bezgovsek
Projektmitarbeiterin: Daniela Stolawetz
Projektauftraggeber: Frau Prof. Steffl
3.2 Projektumfeld
Es umfasst alle am Projekt interessierten Gruppen und Personen,
die indirekt, mit teilweise gegensätzlichen Interessen, am Projekt
beteiligt sind.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 7 von 73
3.3 Projektzeitraum
Projektbeginn: 16.09.2011
Projektende: 30.03.2012
3.4 Ziele und Nicht-Ziele
3.4.1 Ziele 3.4.2 Nicht-Ziele
neue, anwendungstaugliche
und informationsreiche Ho-
mepage für die Peer Mediation
alte Homepage verbessern
neues Logo erstellen
neues Corporate Design
unübersichtliche Homepage
modernes Layout (passendes
Template)
nicht ansprechende Website
nicht funktionierende Home-
page
übersichtliche Struktur der
Website
nicht klar definiertes Design
auf allen Seiten
dynamische Seiten mit Da-
tenbankanbindung
falsche Daten, Informationen
oder Bilder
Datenbank in die Website ein-
binden
viele Fotos einbauen, passen-
de Fotogalerie
Einblick und Geschichte der
Peer Mediation
Neueste Informationen auf
der Startseite
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 8 von 73
3.5 Projektplanung
Um uns einen zeitlichen Überblick über die uns zur Verfügung
stehenden Unterrichtsstunden zu verschaffen, haben wir mit Hil-
fe von Meilensteinen und Arbeitspaketen eine Liste erstellt, die
uns als Terminplan dienen sollten.
3.5.1 Übersicht der Meilensteine
Konzept erstellen und mit Auftraggeberin koordinieren
Unterlagen sammeln
Entwurf der Website erstellen
Website programmieren und testen
Website überarbeiten
Website veröffentlichen
3.5.2 Meilensteinplan mit Arbeitspaketen
3.5.2.1 Meilenstein 1: Konzept erstellen und mit Auftragge-
berin koordinieren
Arbeitspaket: 1.1 Konzept erstellen
Zuständige: Daniela Stolawetz, Sophie Bezgovsek
Ziele: Ideen und Vorschläge ausgearbeitet, Corporate Design
festgelegt
Nichtziele: Keine Ideen für Website
Start: 8. September 2011
Ende: 15. September 2011
Benötigte Ressourcen: Laptop, Internet, Zeit
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 9 von 73
Arbeitspaket: 1.2 Ideen mit Auftraggeberin besprechen
Zuständige: Daniela Stolawetz, Sophie Bezgovsek
Ziele: klare einheitliche Vorstellung von der Website
Nichtziele: keine Übereinstimmung zwischen Auftraggeberin und
Ausführer
Start: 15. September 2011
Ende: 22. September 2011
Benötigte Ressourcen: Laptop, ausgearbeitete Datei mit den
Ideen/Vorschlägen, Zeit
Arbeitspaket: 1.3 Koordination
Zuständige: Daniela Stolawetz, Sophie Bezgovsek
Ziele: Vorstellungen der Auftraggeberin und der Ausführenden
kombinieren
Nichtziele: keine Umsetzmöglichkeiten
Start: 22. September 2011
Ende: 6. Oktober 2011
Benötigte Ressourcen: Laptop, ausgearbeitete Datei mit den
Ideen/Vorschlägen, Zeit
3.5.2.2 Meilenstein 2: Unterlagen sammeln
Arbeitspaket: 2.1 Text organisieren
Zuständige: Daniela Stolawetz
Ziele: Texte beschaffen
Nichtziele: keine Texte
Start: 6. Oktober 2011
Ende: 13. Oktober 2011
Benötigte Ressourcen: Laptop, Internet, Zeit
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 10 von 73
Arbeitspaket: 2.2 Texte umschreiben/bearbeiten
Zuständige: Sophie Bezgovsek
Ziele: Texte bearbeiten und richtig stellen
Nichtziele: Rechtschreibfehler im Text
Start: 13. Oktober 2011
Ende: 27. Oktober 2011
Benötigte Ressourcen: Laptop, Internet, Zeit, Dateien mit dem
bereits organisiertem Text
3.5.2.3 Meilenstein 3: Entwurf der Website erstellen
Arbeitspaket: 3.1 Template suchen
Zuständige: Sophie Bezgovsek, Daniela Stolawetz
Ziele: passendes, modernes Template
Nichtziele: kein geeignetes oder ein veraltetes Template finden
Start: 27. Oktober2011
Ende: 3. November 2011
Benötigte Ressourcen: Laptop, Internet, Zeit
Arbeitspaket: Template bearbeiten
Zuständige: Sophie Bezgovsek, Daniela Stolawetz
Ziele: Template umändern, andere Bilder, passendes Hauptmenü
auswählen
Nichtziele: unübersichtliches Template
Start: 3. November 2012
Ende: 24. November 2012
Benötigte Ressourcen: Laptop, Internet, Adressen, Bilder, Texte,
Template, Zeit
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 11 von 73
Arbeitspaket: 3.2 Design
Zuständige: Sophie Bezgovsek, Daniela Stolawetz
Ziele: Template mit den gesammelten Dateien, Ideen und Far-
ben ausbessern, alles übereinstimmen (Corporate Design)
Nichtziele: unprofessionelles Design und keine gute Farbkombi-
nation
Start: 24. November 2011
Ende: .15. Dezember 2011
Benötigte Ressourcen: Laptop, Internet, Zeit
3.5.2.4 Meilenstein 4: Website programmieren und testen
Arbeitspaket: 4.1 – 4.9 Alle Seiten programmieren und
testen
Zuständige: Sophie Bezgovsek, Daniela Stolawetz
Ziele: Startseite erstellen, Texte und Bilder einfügen, passender
Hintergrund, Datenbanken erstellen, alle Seiten erstellen, Websi-
te testen
Nichtziele: Website funktioniert nicht, Material nicht mehr vor-
handen, Texte und Bilder verschoben, unübersichtliche Website,
falsche Informationen, nicht aktuell
Start: 15. Dezember 2011
Ende: 16. Februar 2012
Benötigte Ressourcen: Laptop, Internet, Zeit
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 12 von 73
3.5.2.5 Meilenstein 5: Website überarbeiten
Arbeitspaket: 5.1 Website präsentieren
Zuständige: Sophie Bezgovsek, Daniela Stolawetz
Ziele: funktionierende Website präsentieren, wenig Änderungen,
Auftraggeberin ist zufrieden
Nichtziele: Unzufriedenheit der Auftraggeberin, viele Änderungen
nötig
Start: 16. Februar 2012
Ende: 23. Februar 2012
Benötigte Ressourcen: Laptop, Internet, Zeit
Arbeitspaket: 5.2 Website überarbeiten
Zuständige: Sophie Bezgovsek, Daniela Stolawetz
Ziele: Fehler der Website korrigieren, Änderungsvorschläge der
Auftraggeberin richtig umsetzten.
Nichtziele: Unzufriedenheit der Auftraggeberin, Fehler der Websi-
te sind weiterhin vorhanden
Start: 23. Februar 2012
Ende: 8. März 2012
Benötigte Ressourcen: Laptop, Internet, Zeit
Arbeitspaket: 5.3 Website fertigstellen
Zuständige: Sophie Bezgovsek, Daniela Stolawetz
Ziele: Website komplett fertig, alles funktioniert ordnungsgemäß
Nichtziele: Website ist nicht komplett fertig, Seiten funktionieren
nicht
Start: 8. März 2012
Ende: 15. März 2012
Benötigte Ressourcen: Laptop, Internet, Zeit
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 13 von 73
3.5.2.6 Meilenstein 6: Website veröffentlichen
Arbeitspaket: 6.1 Website veröffentlichen
Zuständige: Sophie Bezgovsek, Daniela Stolawetz
Ziele: funktionierende Website veröffentlichen
Nichtziele: Website funktioniert nicht, Website ist unfertig
Start: 15. März 2012
Ende: 31. März 2012
Benötigte Ressourcen: Laptop, Internet, Zeit
Sophie Bezgovsek Daniela Stolawetz 2011/2012 Seite 14 von 73
3.7 Projektstrukturplan (PSP)1
Der Projektstrukturplan ist eine Gliederung des Projekts in plan-
bare und kontrollierbare Teilaufgaben. Im Rahmen des PSP wird
das Projektziel in Arbeitspakete/Teilaufgaben (engl. work
packages) zerlegt und die Beziehung zwischen den Arbeitspake-
ten beschrieben. Der Projektstrukturplan stellt die Projektleis-
tung (Projektaufgabe) graphisch in einem Baum dar und ist die
Basis für die Aufwandsschätzung sowie Ablauf-, Termin- und
Kostenplanung.
3.7.1 Vorteile von PSP
Die Erstellung eines Projektstrukturplans zu Beginn des Projekts
dient einerseits der Effizienzsteigerung bei der Planung und
Durchführung des Projekts, da der gesamte Leistungsumfang des
Projekts bereits in der Startphase dargestellt wird. Des Weiteren
werden von Anfang an planbare und kontrollierbare Arbeitspake-
te erstellt, sowie eine Basis für das Projektcontrolling durch die
ausführliche Gliederung geschaffen. Außerdem soll die Gliede-
rung auch eine eindeutige Zuordnung von Arbeitspaketen an die
Projektmitglieder ermöglichen. Ein weiterer wesentlicher Vorteil
ist, dass der PSP im Gegensatz zur Termin-, Kosten- und Res-
sourcenplanung ein stabileres Instrument des Projektmanage-
ments darstellt, da Änderungen in diesen keine Auswirkungen
auf den PSP haben.
1 http://de.wikipedia.org/wiki/Projektstrukturplan
Sophie Bezgovsek Daniela Stolawetz 2011/2012 Seite 15 von 73
Konzept erstellen und mit Auftraggeberin
koordinieren
Konzept erstellen
Ideenbesprechung
Projektkoordination
Unterlagen sammeln
Texte organisieren
Texte umschreiben
Bilder machen
Bilder bearbeiten
Entwurf der Website erstellen
Template suchen
Template bearbeiten
Design festlegen
Website programmieren und
testen
Seite "Home"
Seite "Peer Mediation"
Seite "Team"
Seite "Fotos"
Seite "Ausbildung"
Seite "Sponsoren"
Seite "Kontakt"
Website überarbeiten
Website präsentieren
Website überarbeiten
Website fertigstellen
Website veröffentlichen
Website veröffentlichen
Sophie Bezgovsek Daniela Stolawetz 2011/2012 Seite 16 von 73
3.8 Arbeitsprotokoll
Datum Inhalt der Stunde
08.09.11 dirSync
Sprechen über Maturaprojekt
Ideen und Vorschläge ausgearbeitet
16.09.11 Corporate Design festgelegt
ER-Diagramm erstellt
22.09.11 Festlegung PHP, HTML
Meilensteine erarbeitet
Gespräch mit Frau Professor Steffl
29.09.11 Meilensteine überarbeitet
Projektstrukturplan erstellt
06.10.11 Template ausgesucht
Texte organisiert
20.10.11 Text bearbeitet und richtig gestellt
mit Localhost auseinandergesetzt
3.11.11 Zugriffscode für peer.pannoneum.at bekommen
Texte fertig bearbeitet
Bilder bearbeitet
Template umgeändert
10.11.11 Tabellen in der Datenbank erstellt
(news,peers,coaches,user)
Beginn Frontend (index.php)
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 17 von 73
17.11.11 mit Domaine verbunden worden
Beginn Backend (login.php, checklogin.php)
Tamplate umgeändert
24.11.11 Logo bearbeitet
Menü überarbeitet und menue.inc erstellt
01.12.11 Frontend (index.php, meta.inc)
Backend (admin.php) weitergearbeitet
15.12.11 Frontend (kontakt.php, sponsoren.php, menue.inc)
und Backend (coachliste.php, peerliste.php, news-
liste.php) erstellt
Template umgestaltet
22.12.11 ICS-Schularbeit
Backend bearbeitet (coach_einfuegen.php,
peer_einfuegen.php)
Frontend bearbeitet (fotos.php, ausbildung.php,
inhalte.php)
12.01.12
Beginn Themenstellung
Frontend bearbeitet (peer.php, kontakt.php, ge-
schichte.php, ziele.php, nicht-ziele.php)
20.01.12
Frontend fertiggestellt (coaches.php, mediato-
ren.php)
26.01.12
Backend bearbeitet (coach_einfuegen.php,
coach_db_einfuegen.php, peer_einfuegen.php,
peer_db_einfuegen.php, news_einfuegen.php,
news_db_einfuegen.php, coach_aendern.php,
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 18 von 73
coach_db_aendern.php)
Themenstellung weiterbearbeitet
09.02.12 Backend fertiggestellt (coach_loeschen.php,
peer_loeschen.php, news_loeschen.php,
logout.php)
23.02.12 Verbesserungsvorschläge von Herr Professor
Wurzinger
Impressum hinzugefügt
08.03.12 ICS-SA
15.03.12
alle Seiten nochmals kontrolliert
footer.inc hinzugefügt
Fehler wurden behoben
22.03.12 Bearbeitung der Themenstellung
29.03.12
Fertigstellung Themenstellung
31.03.12 Abgabe der Website und der Themenstellung
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 19 von 73
3.9 Seitenübersicht
3.9.1 Frontend
Abbildung 1: Frontend
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 20 von 73
3.9.2 Backend
Abbildung 2: Backend
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 21 von 73
3.10 Corporate Design (CD)2
Der Begriff Corporate Design bzw. Unternehmens-
Erscheinungsbild bezeichnet einen Teilbereich der Unterneh-
mens-Identität (corporate identity) und beinhaltet das gesamte,
einheitliche Erscheinungsbild eines Unternehmens oder einer Or-
ganisation. Dazu gehören vorrangig die Gestaltung der Kommu-
nikationsmittel aber auch Geschäftspapiere, Werbemittel, Verpa-
ckungen, Internetauftritte sowie die Produktgestaltung. Konse-
quent eingesetzt, dient das einheitliche Firmen-Erscheinungsbild
dem geschlossenen Auftreten in der Öffentlichkeit sowie dem
schnellstmöglichen Erreichen eines hohen Bekanntheitsgrades
(Wiedererkennungswert).
Das Corporate Design einer Website beinhaltet im einheit-
lichen Erscheinungsbild:
Logo
einheitliche Farbcodes
einheitliche Schriftarten
ausgewähltes Template anpassen
2 http://de.wikipedia.org/wiki/Corporate_Design
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 22 von 73
3.10.1 Logo
Abbildung 3: Peer-Mediation Logo
3.10.2 Farbcodes
Dunkelgrau
RGB 111, 111, 111 = HEX #6F6F6F
Dunkelgrün
RGB 46, 119, 27 = HEX #2e771b
Hellgrün
RGB 216, 236, 52 = HEX #d8ec33
3.10.3 Schriftart
Trebuchet MS
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 23 von 73
3.10.4 Template
3.10.4.1 Vorher
Abbildung 4: Template vorher
3.10.4.2 Nachher
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 24 von 73
Abbildung 5: Template nachher
3.11 Vorher-Nachher-Vergleich
3.11.1 Vorher
Abbildung 6: Alte Website
3.11.2 Nachher
Abbildung 7: Neue Webiste
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 25 von 73
4 Grundlagen
Während der Arbeit an unserem Projekt konnten wir unser
Grundwissen, welches wir uns in den letzten Jahren angeeignet
hatten, unter Beweis stellen und noch intensivieren.
Wir haben viele Programme eingesetzt um die Homepage aufzu-
bauen und zu verbessern. Was wir noch nicht oder erst teilweise
gelernt hatten, haben wir uns selbst angeeignet.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 26 von 73
4.1 HTML (Hypertext Markup Language)
HTML ist eine textbasierte Auszeichnungs-
sprache zur Strukturierung von Inhalten
wie Texten, Bildern und Hyperlinks in
Dokumenten. HTML-Dokumente sind
die Grundlage des World Wide Web und
werden von einem Webbrowser3 darge-
stellt. Neben den vom Browser angezeigten Inhalten einer Web-
seite enthält HTML zusätzliche Angaben in Form von Metainfor-
mationen4, die z.B. über die im Text verwendete Sprache oder
den Autor Auskunft geben oder den Inhalt des Textes zusam-
menfassen. Es handelt sich dabei um eine Beschreibungssprache
für Webdokumente. HTML definiert ganz allgemein gesehen die
Struktur eines Dokuments. Es beschreibt unter anderem an wel-
cher Stelle ein Bild zu finden sein soll, wo der Text ist und wie
eine Tabelle strukturiert ist. HTML ist eine sehr statische Spra-
che, also keine echte Programmiersprache. Man spricht hier von
"notieren". Dynamische Elemente können nicht mit HTML pro-
grammiert werden (bewegte Texte, Ausklappmenüs oder flie-
gende Bilder).
Die Programme, die die Struktur des Dokuments interpretieren
und als formatierte Webseiten darstellen, werden Webbrowser
genannt.
3 http://de.wikipedia.org/wiki/Webbrowser
4 http://de.wikipedia.org/wiki/Metainformation
Abbildung 8: HTML
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 27 von 73
4.1.1 HTML Grundgerüst
Jedes HTML-File soll zumindest mit den folgenden Befeh-
len beginnen:
<html>
<head>
und mit den folgenden Befehlen enden:
</body>
</html>
Das gesamte HTML-File wird zwischen <html> und </html> ein-
geschlossen.
Zwischen <head> und </head> stehen die Angaben, die für die
Verwaltung des HTML-Files notwendig sind (Titel, Autor und der-
gleichen).
Zwischen <body> und </body> steht die Information, die am
Bildschirm des Benutzers dargestellt werden soll, also die Text-
elemente, Hypertext-Links, Bilder und Töne.
Zwischen <title> und </title> steht die Überschrift des HTML-
Files, die in Bookmarks und Suchhilfen verwendet wird.
Zwischen <h1> und </h1> steht die Überschrift, die am Bild-
schirm zu Beginn des Textes erscheint.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 28 von 73
4.2 CSS (Cascading Style Sheets)
CSS ist eine Sprache zum Formatieren von HTML/XHTML5-
Elementen. Verglichen mit den HTML-Formatierungen bietet CSS
erheblich mehr Möglichkeiten, wie z.B. Schriftgestaltung, Rah-
men, Innen- und Außenabstände, Listen, Hintergründe, Positio-
nieren, etc.
Da der Umfang der CSS regelmäßig erweitert
wird, darf man auf zukünftige
Gestaltungsmöglichkeiten
gespannt sein.
Ein wichtiger Punkt ist die
Möglichkeit, Formate zentral
festzulegen, d.h. entweder im
<head>-Bereich eines Doku-
ments (Stylesheets zentral im
Dokument deklarieren) oder aus-
gelagert in einer separaten Datei
(Stylesheets in eine externen Datei
auslagern). Dies hat den Vorteil,
dass man Formate nur einmal festlegen muss und diese für das
gesamte Dokument, bzw. das gesamte Projekt gültig sind. Damit
erreicht man ein über alle Seiten einheitliches Erscheinungsbild,
was für einen gelungenen Webauftritt besonders wichtig ist. Na-
türlich lassen sich einzelne Tags auch direkt formatieren.
CSS gilt heute als die Standard-Stylesheetsprache für Websites.
5 http://de.wikipedia.org/wiki/XHTML
Abbildung 9: CSS Style Sheet
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 29 von 73
4.3 PHP (Hypertext Preprocessor)6
Für den Hypertext Preprocessor wird teilwei-
se auch noch die Bezeichnung Personal
Homepage benutzt. Es handelt sich um eine
Erweiterung für Internet-Server, mit der
schnell dynamische Websites für das Inter-
net erstellt werden können. PHP ist eine
Scriptsprache, die als Open Source zur Verfügung steht, in HTML
eingebettet ist und SQL-Datenbanken unterstützt.
PHP unterstützt Web-Entwickler bei der Erstellung von Websites.
Es liegt bereits in mehreren Versionen vor und bietet in der ak-
tuellen Version Möglichkeiten für objektorientierte Programmie-
rung. Als Open-Source-Software wird PHP ständig um aktuelle
Funktionalitäten erweitert, wodurch sichergestellt ist, dass PHP
mit allen aktuellen Internet-Entwicklungen umgehen kann. So
existieren Bibliotheken mit denen Grafiken und Fotos auf Web-
seiten dynamisch dargestellt werden können.
Hypertext Preprocessor hat einen eigenen Befehlssyntax, deren
Scripts in den HTML-Text der Webseite eingetragen werden. Be-
vor die Webseite mit den PHP-Befehlen dargestellt wird, werden
die Befehle von einem speziellen Prozessor abgearbeitet.
PHP ist auf Linux-Servern ein Quasi-Standard für die Erstellung
interaktiver Webseiten.
6 http://www.itwissen.info/definition/lexikon/hypertext-preprocessor-PHP.html
Abbildung 10:Php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 30 von 73
4.4 Notepad ++7
Notepad++ ist ein Open Source Editor
und unterliegt der GNU Public License.
Der Editor öffnet ziemlich alle Dateitypen.
Das Highlight ist, dass Notepad++ die
Schlüsselwörter farblich hervor hebt,
auch benutzerdefiniert nach Schlüsselwörtern, Kommentaren und
Operatoren.
Wenig Ressourcenverbrauch und klarer Funktionsumfang zeich-
nen Notepad++ aus. Notepad++ beinhaltet eine Reihe Zusatz-
Funktionen, konzentriert sich aber auf das Wesentliche und wirkt
keineswegs überladen.
Schon bei der Installation kann man eine (größtenteils) deutsche
Oberfläche wählen und festlegen, ob ein Eintrag im Kontextmenü
erfolgen soll. Dateien lassen sich dann per Rechtsklick direkt in
Notepad++ öffnen und bearbeiten.
In der aktuellen Version wurden zahlreiche Verbesserungen vor-
genommen, die auf der Seite des Herstellers eingesehen werden
können. Notepad++ bietet jetzt diskontinuierliche Textselektion,
eine verbesserte Suchfunktion sowie eine Textauswahl per Auf-
ziehkasten.
7 http://www.zdnet.de/download/20630/notepad.htm
Abbildung 11: Notepad++
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 31 von 73
4.5 MySQL8
MySQL ist das weltweit weitverbreitetste
relationale Datenbankverwaltungssystem.
Es ist als Open-Source-Software sowie als
kommerzielle Enterpriseversion für ver-
schiedene Betriebssysteme verfügbar und bildet die Grundlage
für viele dynamische Webauftritte.
MySQL wurde seit 1994 vom schwedischen Unternehmen MySQL
AB entwickelt. Im Februar 2008 wurde MySQL AB von Sun Micro-
systems übernommen, welches im Januar 2010 von Oracle ge-
kauft wurde.
Der Name MySQL setzt sich zusammen aus dem Vornamen My,
den die Tochter des MySQL AB Mitbegründers Michael Widenius
trägt, und SQL, dem Kürzel für Structured Query Language
(Strukturierte Abfragesprache).
8 http://de.wikipedia.org/wiki/MySQL
Abbildung 12: MySQL
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 32 von 73
4.6 Datenbank auf phpMy Admin erstellen
Wir haben unsere Datenbank mit Tabellen mit Hilfe von phpMy
Admin erstellt.
Datenbank: d0096adb
Tabellen:
news
peers
coaches
user
4.6.1 News
Felder erstellt:
Abbildung 13: Tabelle news Struktur
Datensätze eingefügt:
Abbildung 14: Tabelle news Datensätze
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 33 von 73
4.6.2 Peers
Felder erstellt
Abbildung 15: Tabelle peers Struktur
Datensätze eingefügt
Abbildung 16:Tabelle peers Datensätze
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 34 von 73
4.6.3 Coaches
Felder erstellt
Abbildung 17: Tabelle coaches Struktur
Datensätze eingefügt
Abbildung 18: Tabelle coaches Datensätze
4.6.4 User
Felder erstellt
Abbildung 19: Tabelle user Struktur
Datensätze eingefügt
Abbildung 20: Tabelle user Datensätze
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 35 von 73
4.7 Xampp9
Die Abkürzung XAMPP steht für die Anfangsbuchstaben
von X für alle beliebigen Betriebssysteme, Apache,
MySQL, PHP und Perl. Diese spezielle Windows-Version
wurde früher auch als WAMP oder WAMPP bezeichnet.
Eine ausführliche Installations-Hilfe, Anleitung sowie
ein FAQ helfen beim Einstieg.
Im kostenlosen Programm-Paket XAMPP sind folgende Tools ent-
halten:
Apache
MySQL
PHP
MiniPerl
OpenSSL
phpMyAdmin
XAMPP Control Panel
Webalizer
Mercury Mail Transport
System für Win32 und
NetWare Systems
FileZilla FTP Server
SQLite
ADODB
Zend Optimizer
XAMPP Security
9 http://www.chip.de/downloads/XAMPP_22023279.html
Abbildung 22: XAMPP Control Panel
Abbildung 21:
XAMPP Logo
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 36 von 73
4.8 jAlbum10
jAlbum ist ein Programm, welches zur Erstel-
lung von Bilderalben im Internet konzipiert
wurde. Der bei weitem zeitraubendste Teil bei
der Erstellung von Bilderalben oder ähnlichen
Webseiten in denen viele einzelne Abbildungen dargestellt wer-
den, ist die Bearbeitung und die Organisation der einzelnen Bil-
der. Und genau da liegen die großen Stärken von jAlbum. Durch
Nutzung dieses Generators, reduziert sich der Erstellungsauf-
wand auf ein Minimum, da man sich lediglich mit den Grundein-
stellungen zu befassen hat, die Bilder auswählt und aus einer
Vielzahl von optischen Darstellungsvarianten seine Wahl zu tref-
fen hat. Alles Weitere übernimmt das Programm.
10
http://cimms.de/jalbum.html
Abbildung 24: jAlbum Logo
Abbildung 23: Screenshot jAlbum
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 37 von 73
4.8.1 Skins
Das Aussehen und der Aufbau der erstellten Bilderalben ist durch
eine Vielzahl an Vorlagen, sogenannten "Skins", nahezu vollstän-
dig individualisierbar. Die Auswahl reicht hier von der einfachsten
statischen HTML Seite, über eine Shockwave 3D Galerie bis hin
zum bekannten page-flip in flash.
4.8.2 Veröffentlichen
jAlbum bietet die Möglichkeit, die erstellten Bilderalben direkt
aus dem Programm heraus auf einen Webspace hochzuladen.
Dazu wurde eine Art FTP-Manager integriert, der auch die Mög-
lichkeit des Dateiabgleichs und der komprimierten Dateiübertra-
gung bietet.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 38 von 73
4.9 Unterschied Zwischen statischen und dynami-
schen Webseiten11
Im Gegensatz zu statischen Webseiten, die technisch ein valides
HTML-Dokument auf dem Webserver darstellen, werden Websei-
ten häufig auch dynamisch oder aktiv im Moment der Anforde-
rung erzeugt. Das ist dann sinnvoll, wenn eine Webseite sehr ak-
tuelle Informationen wie z. B. Börsenkurse oder das Wetter von
morgen enthalten sollten. In diesem Fall führt der Webserver ein
Programm aus, das vorher spezifisch für diese Aufgabe entwi-
ckelt wurde. Es trägt die Daten z. B. aus Datenbanken zusam-
men und erstellt das HTML-Dokument. Dieses wird dann vom
Webserver an den Browser übertragen und beim Benutzer ange-
zeigt.
Ein anderer Anwendungsfall ergibt sich aus dem Bedürfnis, auf
Eingaben des Benutzers zu reagieren. Diese Eingabe kann z. B.
ein Suchbegriff in einer Suchmaschine sein. Die Software der
Suchmaschine erstellt anhand des Suchbegriffs eine Liste von
passenden Links und erzeugt eine Webseite, die dem Benutzer
diese Liste komfortabel darstellt.
Die Möglichkeit, Webseiten dynamisch in Abhängigkeit von Be-
nutzereingaben und Datenbankinhalten zu generieren, machte
das Web schnell zu einer universellen Plattform für alle Arten von
Anwendungen. Die Vorteile liegen in Unabhängigkeit von Be-
triebssystemen und anderen Eigenschaften der Clients. Grundvo-
raussetzungen sind lediglich eine Netzwerkverbindung zum Ser-
ver und ein Webbrowser.
11
http://de.wikipedia.org/wiki/Webseiten
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 39 von 73
5 Frontend
Das Frontend ist der Teil der Webprogrammierung, der "vorne"
beim Surfer im Browser "erledigt" wird, bzw. dort zu sehen ist.
(peer.pannoneum.at)
Der Frontendbereich bietet Ansicht auf folgende Seiten:
Home
Peer-Mediation
o Was ist Peer-Mediation?
o Ziele der Peer-Mediation
o Nicht-Ziele der Peer-Mediation
o Geschichte der Peer-Mediation
Team
o Peer-Mediatoren
o Peer-Coaches
Fotos
o Tieschen Jänner 2012
o Aktionstag 4. März 2011
o Fürstenfeld 7. Jänner 2011
Ausbildung
o Kompetenzen
o Inhalte
Kontakt (+ Impressum)
Sponsoren
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 40 von 73
5.1 Home
Abbildung 25: index.php
Auf der Startseite (index.php) hat der Benutzer der Webseite die
Möglichkeit die Neuigkeiten, die aus der Tabelle news ausgege-
ben werden zu lesen. Mit Hilfe des Menübereiches gelangt man
von einer Seite auf die Andere.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 41 von 73
5.1.1 Der Menübereich
Mit der Funktion include12 wird ein anderes PHP-Skript geladen
und separat ausgeführt. Diese Datei kann auch (bzw. nur) Text
oder HTML-Tags enthalten; bloßer Text wird einfach ausgegeben,
HTML-Tags werden vom Browser interpretiert.
Variablen werden automatisch zwischen den beiden Skripten
übergeben. Der Einsatz von include ist auch innerhalb von
Schleifen und anderen Funktionen möglich.
Sinnvoll ist der Einsatz zum Beispiel um einen regelmäßig aktua-
lisierten News-Text oder Kopf- und Fußzeilen einzubinden.
Es wurden die Dateien footer.inc, menue.inc und meta.inc von
uns erstellt, sie sind auf jeder Seite mittels include Funktion ein-
gebunden.
5.1.1.1 Include-Befehl
5.1.1.2 Include-Datei
12
http://www.phpbox.de/php_befehle/include.php
Abbildung 26: Include-Befehl
Abbildung 27: menue.inc
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 42 von 73
Abbildung 28: meta.inc
Abbildung 29: footer.inc
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 43 von 73
5.2 Peer-Mediation
5.2.1 Was ist Peer-Mediation?
Abbildung 30: peer.php
Details über Peer-Mediation und ihre Definition findet man auf
der Seite "peer-mediation".
Im grauen Kästchen sind Links zu sehen, die auf die Seiten Ziele
der Peer-Mediation, Nicht-Ziele der Peer-Mediation und
Geschichte der Peer-Mediation führen.
Abbildung 31: Screenshot von peer.php
Mit Hilfe des HTML-Befehls, <a href></a>, der auf jeder der
verlinkten Seite erscheinen muss, kann man wie beim Menü, von
einer Seite zur anderen wechseln.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 44 von 73
5.2.2 Ziele der Peer-Mediation
Auf dieser Seite sind die Ziele der Peer-Mediation ersichtlich.
Abbildung 32: ziele.php
5.2.3 Nicht-Ziele der Peer-Mediation
Auch die Nicht-Ziele der Peer-Mediation sind auf unserer Websei-
te angeführt.
Abbildung 33: nicht-ziele.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 45 von 73
5.2.4 Geschichte der Peer
Wenn man auf den Link "Geschichte der Peer-Mediation" drückt,
erhält man Informationen zur Entstehung und der Aufgabe von
Peer-Mediation.
Abbildung 34: geschichte.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 46 von 73
5.3 Team
Abbildung 35: mediatoren.php
Auf der Seite Team wird die Tabelle peers ausgegeben. Die Da-
tenbank verfügt über die Vor- und Nachnamen der Mediatoren,
sowie den Zeitpunkt, seitdem diese das Pannoneum besuchen.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 47 von 73
5.3.1 Peer-Coaches
Auf der Seite "coaches.php" haben wir die Tabelle coaches aus-
gegeben, um die Namen, den Wohnort und ein Bild der Coaches
übersichtlich auf der Homepage zu platzieren. Weiteres verfügt
die Datenbank über die Gegenstände, welche die Coaches an un-
serer Schule unterrichten und seit wann diese an unserer Schule
sind.
Abbildung 36: coaches.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 48 von 73
5.4 Fotos
Abbildung 37: fotos.php
Die Fotoalben haben wir
mit Hilfe von jAlbum er-
stellt. Wir haben die Ord-
ner, mit den durch das
Programm fertig erstellten
Slideshows auf unseren
Server geladen und die
benötigten Links auf der
Seite eingefügt.
Abbildung 39: Screenshot fotos.php
Abbildung 38: FTP Server
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 49 von 73
5.4.1 Tieschen
Abbildung 40: Fotoalbum Tieschen
Man kann jederzeit:
eine Diashow starten und
zurück auf foto.php der Peer-Mediation Homepage gelangen
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 50 von 73
5.4.2 Aktionstag
Abbildung 41: Fotoalbum Aktionstag
5.4.3 Fürstenfeld
Abbildung 42: Fotoalbum Fürstenfeld
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 51 von 73
5.5 Ausbildung, Kompetenzen
Abbildung 43: ausbildung.php
Die Seite ausbildung.php beinhaltet Informationen zu den Kom-
petenzen, die von den Mediatoren/innen vermittelt werden.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 52 von 73
5.5.1 Inhalte
Unter dem Link "peer.pannoneum.at/inhalte.php" erfährt man
näheres über die Inhalte eines Konfliktgespräches, sowie über
die Konfliktbewältigung und den Umgang miteinander.
Abbildung 44: inhalte.php
5.6 Kontakt
Kontaktinformationen, wie die E-Mail-Adresse findet man auf der
Seite Kontakt.
Abbildung 45: kontakt.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 53 von 73
5.6.1 Auf kontakt.php befindet sich das Impressum und
beinhaltet folgendes:
Abbildung 46: Impressum
Das Impressum ist auf der Seite footer.inc mit einem Anker be-
setzt, so dass man, wenn man auf einer unserer Seiten auf im-
pressum klickt sofort auf der kontakt.php zum Impressum ge-
langt.
Auf das Impressum gelangt man durch den Link, der sich im Copyright jeder Sei-
te befindet.
Abbildung 47: Screenshot footer.php
Abbildung 48: Screenshot kon-takt.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 54 von 73
5.7 Sponsoren
Die Sponsoren der Peer-Mediation am Pannoneum sind auf der
Seite sponsoren.php aufgelistet.
Abbildung 49: sponsoren.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 55 von 73
6 Backend
Der Backendbereich ist über eine separate URL
(peer.pannoneum.at/backend) erreichbar. Alle Seiten sind mit
Sessions geschützt und sind nicht direkt zugänglich. Im Backend
können die Tabellen, die auf der Website aus einer Datenbank
ausgegeben werden, verändert werden.
Der Name unserer Datenbank lautet: d0096adb
Sie enthält folgende Table:
news
coaches
peers
user
Der Backendbereich bietet die Möglichkeit folgende Dinge zu tun:
Neuigkeiten hinzufügen
Neuigkeiten bearbeiten
Neuigkeiten löschen
Peers hinzufügen
Peers bearbeiten
Peers löschen
Coaches hinzufügen
Coaches bearbeiten
Coaches löschen
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 56 von 73
6.1 Anmelden
Vorname, Nachname und Passwort sind im Table user gespei-
chert.
Abbildung 50: login.php
Mit Hilfe einer Passwortüberprüfung durch Sessions wird das
Passwort abgefragt, bei richtiger Eingabe wird man in den Ge-
schützten Bereich weitergeleitet. In diesem kann man die einzel-
nen Datensätze bearbeiten, löschen und hinzufügen. Mit dem
Befehl Session Start wird die Abfrage begonnen und mit richti-
gem Vorname, Nachnamen und Passwort kann der berechtigte
User in den Backendbereich.
Abbildung 51: checklogin.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 57 von 73
checklogin.php überprüft letztendlich die Eingabe
Abbildung 52: ckecklogin.php
Bei falscher Eingabe des Vorname, Nachnamens oder des Pass-
wortes erscheint: „Logindaten waren nicht korrekt. Bitte noch-
mals versuchen“ mit einem Link auf login.php.
Abbildung 53: admin.php
Im Admin Bereich kann auf die Peer-
Coach- oder Newsliste zugegriffen werden.
Auf der linken Seite befindet
sich immer der aktive Be-
nutzername. Ausloggen
ist von jeder Seite mög-
lich.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 58 von 73
6.2 News
Die Tabelle news wird auf index.php ausgegeben (Startseite) und
kann im Backendbereich jederzeit verändert werden.
Hier werden alle vorhandenen Neuigkeiten in einer übersichtli-
chen Tabelle ausgegeben. Mit dem Symbol gelangt man auf
news_bearbeiten.php und mit dem Symbol gelangt man auf
news_löschen.php.
Auf news_einfuegen.php kann eine Neuigkeit erstellt werden.
Das Feld Autor wird immer automatisch mit dem Namen, mit
dem man angemeldet ist, ausgefüllt.
Abbildung 54: newsliste.php
Abbildung 55: news_einfuegen.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 59 von 73
Auf der Seite news_db_einfuegen.php werden die eingefügten
Daten ausgegeben, um sie auf Vollständigkeit und Richtigkeit zu
überprüfen.
Auf news_aendern.php kann eine bereits erstellte Neuigkeit ver-
ändert werden.
Abbildung 56: news_db_einfuegen.php
Abbildung 57: news_aendern.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 60 von 73
Abbildung 58: news_db_aendern.php
Auf news_db_aendern.php wird die geänderte Neuigkeit wieder
ausgegeben, um sie auf Vollständigkeit und Richtigkeit zu über-
prüfen.
Abbildung 59: news_loeschen.php
Auf news_loeschen.php wird die ausgewählte Neuigkeit unwider-
ruflich aus der Datenbank gelöscht.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 61 von 73
6.3 Coaches
Die Tabelle coaches wird auf coaches.php ausgegeben und kann
im Backendbereich jederzeit verändert werden.
Hier werden alle bereits hinzugefügten Coaches in einer über-
sichtlichen Tabelle ausgegeben. Mit dem Symbol gelangt man
auf coach_bearbeiten.php und mit dem Symbol gelangt man
auf coach_löschen.php.
Abbildung 61: coach_einfuegen.php
Auf coach_einfuegen.php kann ein neuer Coach erstellt werden.
Abbildung 60: coachliste.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 62 von 73
Abbildung 62: coach_db_einfuegen.php
Auf der Seite coach_db_einfuegen.php werden die eingefügten
Daten ausgegeben, um sie auf Vollständigkeit und Richtigkeit zu
kontrollieren.
Abbildung 63: coach_aendern.php
Auf coach_aendern.php kann ein bereits erstellter Coach verän-
dert werden.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 63 von 73
Abbildung 64: coach_db_aendern.php
Auf coach_db_aendern.php wird der geänderte Coach wieder
ausgegeben, um ihn auf Richtigkeit und Vollständigkeit zu über-
prüfen
Abbildung 65: coach_loeschen.php
Auf coach_loeschen.php wird ein Datensatz unwiderruflich aus
der Datenbank gelöscht.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 64 von 73
6.4 Peers
Die Tabelle peers wird auf peer.php ausgegeben und kann im
Backendbereich jederzeit verändert werden.
Abbildung 66: peerliste.php
Hier werden alle bereits hinzugefügten Peers in einer übersichtli-
chen Tabelle ausgegeben. Mit dem Symbol gelangt man auf
peer_bearbeiten.php und mit dem Symbol gelangt man auf
peer_löschen.php.
Abbildung 67: peer_einfuegen.php
Auf peer_einfuegen.php kann ein neuer Peer erstellt werden.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 65 von 73
Abbildung 68: peer_db_einfuegen.php
Auf der Seite peer_db_einfuegen.php werden die eingefügten
Daten ausgegeben, um sie auf Vollständigkeit und Richtigkeit zu
überprüfen.
Abbildung 69: peer_ändern.php
Auf peer_aendern.php kann ein bereits erstellter Peer verändert
werden.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 66 von 73
Auf
peer_db_aendern.php wird der geänderte Coach wieder ausge-
geben, um ihn auf Richtigkeit und Vollständigkeit zu überprüfen.
Abbildung 71: peer_loeschen.php
Auf peer_loeschen.php wird ein Datensatz unwiderruflich aus der
Datenbank gelöscht.
Abbildung 70: peer_db_ändern
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 67 von 73
6.5 Ausloggen
Abbildung 72: logout.php
Wenn man auf den Button ausloggen klickt, wird man automa-
tisch auf die Seite logout.php verwiesen. Von dieser Seite kommt
man wieder zurück in den Loginbereich.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 68 von 73
7 Nachwort
Am Anfang des Schuljahres konnten wir uns nur sehr schwer
vorstellen, eine Homepage alleine zu erstellen. Nach einem hal-
ben Jahr intensiver Arbeit, sind wir froh, dass wir eine funktionie-
rende Webseite vorweisen können.
Die Aufgaben sind uns teilweise schwer gefallen und wir mussten
die Unterstützung unserer Lehrer in Anspruch nehmen. Sie stan-
den uns immer mit Rat und Tat zur Seite. Trotzdem haben wir
die Arbeit sehr interessant und spannend gefunden. Den Großteil
der Homepage haben wir jedoch selbst erstellt und bei Proble-
men kontaktierten wir auch oft das Internet. Der Zeitplan half
uns, die an uns geforderten Aufgaben möglichst termingerecht
zu erledigen.
Unser Maturaprojekt hat uns persönlich einen großen Nutzen ge-
bracht. Wir haben unsere Teamfähigkeit unter Beweis stellen
können und konnten unsere Fähigkeiten in den Programmier-
sprachen PHP, HTML und CSS verbessern.
Zum Abschluss möchten wir uns noch herzlich für die Unterstüt-
zung unserer Professoren, Heinz Wurzinger und Adolf Selinger,
bedanken. Wir nehmen diese wertvolle Erfahrung im Bereich der
Medieninformatik mit auf unseren weiteren Lebensweg. Schluss-
endlich sind wir stolz auf unser Ergebnis.
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 69 von 73
8 Quellenverzeichnis
Allgemeine Informationen
www.google.com
www.google.com/images
Corporate Design
http://de.wikipedia.org/wiki/Corporate_Design
HTML (Hypertext Markup Language)
http://de.wikipedia.org/wiki/Webbrowser
http://de.wikipedia.org/wiki/Metainformation
CSS (Cascading Style Sheets)
http://de.wikipedia.org/wiki/XHTML
PHP (Hypertext Preprocessor)
http://www.itwissen.info/definition/lexikon/hypertext-
preprocessor-PHP.html
Notepad ++
http://www.zdnet.de/download/20630/notepad.htm
MySQL
http://de.wikipedia.org/wiki/MySQL
XAMPP
http://www.chip.de/downloads/XAMPP_22023279.html
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 70 von 73
jAlbum
http://cimms.de/jalbum.html
Unterschied Zwischen statischen und dynami-
schen Webseiten
http://de.wikipedia.org/wiki/Webseiten
Include-Befehl
http://www.phpbox.de/php_befehle/include.php
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 71 von 73
9 Abbildungsverzeichnis
Abbildung 1: Frontend ___________________________________________________________ 19
Abbildung 2: Backend ____________________________________________________________ 20
Abbildung 3: Peer-Mediation Logo _________________________________________________ 22
Abbildung 4: Template vorher _____________________________________________________ 23
Abbildung 5: Template nachher ____________________________________________________ 24
Abbildung 6: Alte Website ________________________________________________________ 24
Abbildung 7: Neue Webiste _______________________________________________________ 24
Abbildung 8: HTML ______________________________________________________________ 26
Abbildung 9: CSS Style Sheet ______________________________________________________ 28
Abbildung 10:Php _______________________________________________________________ 29
Abbildung 11: Notepad++ ________________________________________________________ 30
Abbildung 12: MySQL ____________________________________________________________ 31
Abbildung 13: Tabelle news Struktur ________________________________________________ 32
Abbildung 14: Tabelle news Datensätze _____________________________________________ 32
Abbildung 15: Tabelle peers Struktur________________________________________________ 33
Abbildung 16:Tabelle peers Datensätze _____________________________________________ 33
Abbildung 17: Tabelle coaches Struktur _____________________________________________ 34
Abbildung 18: Tabelle coaches Datensätze ___________________________________________ 34
Abbildung 19: Tabelle user Struktur ________________________________________________ 34
Abbildung 20: Tabelle user Datensätze ______________________________________________ 34
Abbildung 21: XAMPP Logo _______________________________________________________ 35
Abbildung 22: XAMPP Control Panel ________________________________________________ 35
Abbildung 23: Screenshot jAlbum __________________________________________________ 36
Abbildung 24: jAlbum Logo _______________________________________________________ 36
Abbildung 25: index.php__________________________________________________________ 40
Abbildung 26: Include-Befehl ______________________________________________________ 41
Abbildung 27: menue.inc _________________________________________________________ 41
Abbildung 28: meta.inc __________________________________________________________ 42
Abbildung 29: footer.inc __________________________________________________________ 42
Abbildung 30: peer.php __________________________________________________________ 43
Abbildung 31: Screenshot von peer.php _____________________________________________ 43
Abbildung 32: ziele.php __________________________________________________________ 44
Abbildung 33: nicht-ziele.php ______________________________________________________ 44
Abbildung 34: geschichte.php _____________________________________________________ 45
Abbildung 35: mediatoren.php ____________________________________________________ 46
Abbildung 36: coaches.php _______________________________________________________ 47
Abbildung 37: fotos.php __________________________________________________________ 48
Abbildung 38: FTP Server _________________________________________________________ 48
Abbildung 39: Screenshot fotos.php ________________________________________________ 48
Abbildung 40: Fotoalbum Tieschen _________________________________________________ 49
Abbildung 41: Fotoalbum Aktionstag _______________________________________________ 50
Abbildung 42: Fotoalbum Fürstenfeld _______________________________________________ 50
Abbildung 43: ausbildung.php _____________________________________________________ 51
Abbildung 44: inhalte.php ________________________________________________________ 52
Sophie BEZGOVSEK Daniela STOLAWETZ 2011/2012 Seite 72 von 73
Abbildung 45: kontakt.php ________________________________________________________ 52
Abbildung 46: Impressum ________________________________________________________ 53
Abbildung 47: Screenshot footer.php _______________________________________________ 53
Abbildung 48: Screenshot kontakt.php ______________________________________________ 53
Abbildung 49: sponsoren.php _____________________________________________________ 54
Abbildung 50: login.php __________________________________________________________ 56
Abbildung 51: checklogin.php _____________________________________________________ 56
Abbildung 52: ckecklogin.php _____________________________________________________ 57
Abbildung 53: admin.php _________________________________________________________ 57
Abbildung 54: newsliste.php ______________________________________________________ 58
Abbildung 55: news_einfuegen.php ________________________________________________ 58
Abbildung 56: news_db_einfuegen.php _____________________________________________ 59
Abbildung 57: news_aendern.php __________________________________________________ 59
Abbildung 58: news_db_aendern.php _______________________________________________ 60
Abbildung 59: news_loeschen.php _________________________________________________ 60
Abbildung 61: coach_einfuegen.php ________________________________________________ 61
Abbildung 60: coachliste.php ______________________________________________________ 61
Abbildung 62: coach_db_einfuegen.php _____________________________________________ 62
Abbildung 63: coach_aendern.php _________________________________________________ 62
Abbildung 64: coach_db_aendern.php ______________________________________________ 63
Abbildung 65: coach_loeschen.php _________________________________________________ 63
Abbildung 66: peerliste.php _______________________________________________________ 64
Abbildung 67: peer_einfuegen.php _________________________________________________ 64
Abbildung 68: peer_db_einfuegen.php ______________________________________________ 65
Abbildung 69: peer_ändern.php ___________________________________________________ 65
Abbildung 71: peer_loeschen.php __________________________________________________ 66
Abbildung 70: peer_db_ändern ____________________________________________________ 66
Abbildung 72: logout.php _________________________________________________________ 67
Recommended