Fachspezifische Themenstellung Peer-Mediation by Sophie Bezgovsek

Fachspezifische Themenstellung Peer Mediation

Sophie Bezgovsek | Daniela Stolawetz 2011/2012 Sophie Bezgovsek Daniela Stolawetz

2011/2012

Seite 1 von 73

Inhaltsverzeichnis 1 VORWORT

2 ABSTRACT

3 PROJEKTMANAGEMENT (PM)

3.1 PROJEKTTEAM 3.2 PROJEKTUMFELD 3.3 PROJEKTZEITRAUM 3.4 ZIELE UND NICHT-ZIELE 3.4.1 ZIELE 3.4.2 NICHT-ZIELE 3.5 PROJEKTPLANUNG 3.5.1 ÜBERSICHT DER MEILENSTEINE 3.5.2 MEILENSTEINPLAN MIT ARBEITSPAKETEN 3.5.2.1 Meilenstein 1: Konzept erstellen und mit Auftraggeberin koordinieren 3.5.2.2 Meilenstein 2: Unterlagen sammeln 3.5.2.3 Meilenstein 3: Entwurf der Website erstellen 3.5.2.4 Meilenstein 4: Website programmieren und testen 3.5.2.5 Meilenstein 5: Website überarbeiten 3.5.2.6 Meilenstein 6: Website veröffentlichen 3.7 PROJEKTSTRUKTURPLAN (PSP) 3.7.1 VORTEILE VON PSP 3.8 ARBEITSPROTOKOLL 3.9 SEITENÜBERSICHT 3.9.1 FRONTEND 3.9.2 BACKEND 3.10 CORPORATE DESIGN (CD) 3.10.1 LOGO UNSERER WEBSITE 3.10.2 FARBCODES 3.10.3 SCHRIFTART 3.10.4 TEMPLATE 3.10.4.1 Vorher 3.10.4.2 Nachher 3.11 VORHER-NACHHER-VERGLEICH 3.11.1 VORHER 3.11.2 NACHHER

6 6 7 7 7 7 8 8 8 8 9 10 11 12 13 14 14 16 19 19 20 21 22 22 22 23 23 23 24 24 24

4 GRUNDLAGEN

Sophie Bezgovsek Daniela Stolawetz

2011/2012

Seite 1 von 73

4.1 HTML (HYPERTEXT MARKUP LANGUAGE) 4.1.1 HTML GRUNDGERÜST 4.2 CSS (CASCADING STYLE SHEETS) 4.3 PHP (HYPERTEXT PREPROCESSOR) 4.4 NOTEPAD ++ 4.5 MYSQL 4.6 DATENBANK AUF PHPMY ADMIN ERSTELLEN 4.6.1 NEWS 4.6.2 PEERS 4.6.3 COACHES 4.6.4 USER 4.7 XAMPP 4.8 JALBUM 4.8.1 SKINS 4.8.2 VERÖFFENTLICHEN 4.9 UNTERSCHIED ZWISCHEN STATISCHEN UND DYNAMISCHEN WEBSEITEN

26 27 28 29 30 31 32 32 33 34 34 35 36 37 37 38

5 FRONTEND

5.1 HOME 5.1.1 DER MENÜBEREICH 5.1.1.1 Include-Befehl 5.1.1.2 Include-Datei 5.2 PEER-MEDIATION 5.2.1 WAS IST PEER-MEDIATION? 5.2.2 ZIELE DER PEER-MEDIATION 5.2.3 NICHT-ZIELE DER PEER-MEDIATION 5.2.4 GESCHICHTE DER PEER 5.3 TEAM 5.3.1 PEER-COACHES 5.4 FOTOS 5.4.1 TIESCHEN 5.4.2 AKTIONSTAG 5.4.3 FÜRSTENFELD 5.5 AUSBILDUNG, KOMPETENZEN 5.5.1 INHALTE 5.6 KONTAKT 5.6.1 AUF KONTAKT.PHP BEFINDET SICH DAS IMPRESSUM UND BEINHALTET FOLGENDES: 5.7 SPONSOREN

40 41 41 41 43 43 44 44 45 46 47 48 49 50 50 51 52 52 53 54

6 BACKEND

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 2 von 73

6.1 6.2 6.3 6.4 6.5

ANMELDEN NEWS COACHES PEERS AUSLOGGEN

56 58 61 64 67

7 NACHWORT

8 QUELLENVERZEICHNIS

9 ABBILDUNGSVERZEICHNIS

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 3 von 73

1 Vorwort Im Zuge unseres Ausbildungsschwerpunktes Information Communication Solutions haben wir unsere fachspezifische Themenstellung f端r das

, Neusiedl am See erar-

beitet. Das Ziel der Aufgabenstellung war, eine Homepage mit dynamischen Elementen mittels php mySQL zu erstellen. Mit Hilfe unseres Professors Heinz Wurzinger haben wir ein neues, 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 bestand. Wir hoffen, die von uns entworfene Internetseite entspricht den Vorstellungen unserer Auftraggeberin Frau Prof. Steffl.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 4 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 PeerMediation 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 PeerMediation want to introduce themselves with a new website on the internet because the existing one didn't satisfy the state-ofthe-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 5 von 73

3 Projektmanagement (PM) Voraussetzung f체r jedes erfolgreiche Projekt ist eine komplexe, neuartige und zeitlich abgegrenzte Aufgabe strukturiert zu bew채ltigen. Das Managen des Projekts beinhaltet die Festsetzung der Ziele und Nicht-Ziele und die Erstellung einer Meilensteinliste, 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 6 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-

 alte Homepage verbessern  neues Logo erstellen

mepage für die Peer Mediation  neues Corporate Design  unübersichtliche Homepage  modernes Layout (passendes Template)

 nicht ansprechende Website  nicht funktionierende Homepage

 übersichtliche Struktur der

 nicht klar definiertes Design

Website

auf allen Seiten

 dynamische Seiten mit Da-

 falsche Daten, Informationen

tenbankanbindung

oder Bilder

 Datenbank in die Website einbinden  viele Fotos einbauen, passende Fotogalerie  Einblick und Geschichte der Peer Mediation  Neueste Informationen auf der Startseite

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 7 von 73

3.5 Projektplanung Um uns einen zeitlichen Überblick über die uns zur Verfügung stehenden Unterrichtsstunden zu verschaffen, haben wir mit Hilfe 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 8 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 9 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 10 von 73

Arbeitspaket: 3.2 Design Zuständige: Sophie Bezgovsek, Daniela Stolawetz Ziele: Template mit den gesammelten Dateien, Ideen und Farben ausbessern, alles übereinstimmen (Corporate Design) Nichtziele: unprofessionelles Design und keine gute Farbkombination 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, Website testen Nichtziele: Website funktioniert nicht, Material nicht mehr vorhanden, 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 11 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 Website 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 12 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 13 von 73

3.7 Projektstrukturplan (PSP)1 Der Projektstrukturplan ist eine Gliederung des Projekts in planbare und kontrollierbare Teilaufgaben. Im Rahmen des PSP wird das Projektziel in Arbeitspakete/Teilaufgaben (engl. work packages) zerlegt und die Beziehung zwischen den Arbeitspaketen beschrieben. Der Projektstrukturplan stellt die Projektleistung (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 Arbeitspakete erstellt, sowie eine Basis für das Projektcontrolling durch die ausführliche Gliederung geschaffen. Außerdem soll die Gliederung 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 Ressourcenplanung ein stabileres Instrument des Projektmanagements darstellt, da Änderungen in diesen keine Auswirkungen auf den PSP haben.

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

Sophie Bezgovsek Daniela Stolawetz

2011/2012

Seite 14 von 73

Konzept erstellen und mit Auftraggeberin koordinieren

Website programmieren und testen

Unterlagen sammeln

Entwurf der Website erstellen

Konzept erstellen

Texte organisieren

Template suchen

Seite "Home"

Website präsentieren

Ideenbesprechung

Texte umschreiben

Template bearbeiten

Seite "Peer Mediation"

Website überarbeiten

Projektkoordination

Bilder machen

Design festlegen

Seite "Team"

Website fertigstellen

Bilder bearbeiten

Website überarbeiten

Website veröffentlichen

Seite "Fotos"

Seite "Ausbildung"

Seite "Sponsoren"

Seite "Kontakt"

Sophie Bezgovsek Daniela Stolawetz

2011/2012

Seite 15 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 16 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, newsliste.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, geschichte.php, ziele.php, nicht-ziele.php)

20.01.12

Frontend fertiggestellt (coaches.php, mediatoren.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 17 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 18 von 73

3.9 Seiten端bersicht 3.9.1 Frontend

Abbildung 1: Frontend

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 19 von 73

3.9.2 Backend

Abbildung 2: Backend

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 20 von 73

3.10 Corporate Design (CD)2 Der Begriff Corporate Design bzw. UnternehmensErscheinungsbild bezeichnet einen Teilbereich der Unternehmens-Identität (corporate identity) und beinhaltet das gesamte, einheitliche Erscheinungsbild eines Unternehmens oder einer Organisation. Dazu gehören vorrangig die Gestaltung der Kommunikationsmittel aber auch Geschäftspapiere, Werbemittel, Verpackungen, Internetauftritte sowie die Produktgestaltung. Konsequent 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 einheitlichen Erscheinungsbild:  Logo  einheitliche Farbcodes  einheitliche Schriftarten  ausgewähltes Template anpassen

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

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 21 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 22 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 23 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 24 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 aufzubauen und zu verbessern. Was wir noch nicht oder erst teilweise gelernt hatten, haben wir uns selbst angeeignet.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 25 von 73

4.1 HTML (Hypertext Markup Language) HTML ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und Abbildung 8: HTML 3

werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form von Metainformationen4, die z.B. über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen. Es handelt sich dabei um eine Beschreibungssprache für Webdokumente. HTML definiert ganz allgemein gesehen die Struktur eines Dokuments. Es beschreibt unter anderem an welcher Stelle ein Bild zu finden sein soll, wo der Text ist und wie eine Tabelle strukturiert ist. HTML ist eine sehr statische Sprache, also keine echte Programmiersprache. Man spricht hier von "notieren". Dynamische Elemente können nicht mit HTML programmiert werden (bewegte Texte, Ausklappmenüs oder fliegende Bilder). Die Programme, die die Struktur des Dokuments interpretieren und als formatierte Webseiten darstellen, werden Webbrowser genannt.

3 4

http://de.wikipedia.org/wiki/Webbrowser http://de.wikipedia.org/wiki/Metainformation

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 26 von 73

4.1.1 HTML Grundgerüst Jedes HTML-File soll zumindest mit den folgenden Befehlen beginnen: <html> <head> und mit den folgenden Befehlen enden: </body> </html> Das gesamte HTML-File wird zwischen <html> und </html> eingeschlossen. Zwischen <head> und </head> stehen die Angaben, die für die Verwaltung des HTML-Files notwendig sind (Titel, Autor und dergleichen). Zwischen <body> und </body> steht die Information, die am Bildschirm des Benutzers dargestellt werden soll, also die Textelemente, Hypertext-Links, Bilder und Töne. Zwischen <title> und </title> steht die Überschrift des HTMLFiles, die in Bookmarks und Suchhilfen verwendet wird. Zwischen <h1> und </h1> steht die Überschrift, die am Bildschirm zu Beginn des Textes erscheint.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 27 von 73

4.2 CSS (Cascading Style Sheets) CSS ist eine Sprache zum Formatieren von HTML/XHTML5Elementen. Verglichen mit den HTML-Formatierungen bietet CSS erheblich mehr Möglichkeiten, wie z.B. Schriftgestaltung, Rahmen, Innen- und Außenabstände, Listen, Hintergründe, Positionieren, 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 Dokuments (Stylesheets zentral im Dokument deklarieren) oder ausgelagert in einer separaten Datei (Stylesheets in eine externen Datei auslagern). Dies hat den Vorteil,

Abbildung 9: CSS Style Sheet

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. Natürlich lassen sich einzelne Tags auch direkt formatieren. CSS gilt heute als die Standard-Stylesheetsprache für Websites.

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

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 28 von 73

4.3 PHP (Hypertext Preprocessor)6 Für den Hypertext Preprocessor wird teilweise 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-

Abbildung 10:Php

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 aktuellen Version Möglichkeiten für objektorientierte Programmierung. 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 Webseiten dynamisch dargestellt werden können. Hypertext Preprocessor hat einen eigenen Befehlssyntax, deren Scripts in den HTML-Text der Webseite eingetragen werden. Bevor 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.

http://www.itwissen.info/definition/lexikon/hypertext-preprocessor-PHP.html

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 29 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

Abbildung 11: Notepad++

Schlüsselwörter farblich hervor hebt, auch benutzerdefiniert nach Schlüsselwörtern, Kommentaren und Operatoren. Wenig Ressourcenverbrauch und klarer Funktionsumfang zeichnen Notepad++ aus. Notepad++ beinhaltet eine Reihe ZusatzFunktionen, 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 vorgenommen, die auf der Seite des Herstellers eingesehen werden können. Notepad++ bietet jetzt diskontinuierliche Textselektion, eine verbesserte Suchfunktion sowie eine Textauswahl per Aufziehkasten.

http://www.zdnet.de/download/20630/notepad.htm

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 30 von 73

4.5 MySQL8 MySQL ist das weltweit weitverbreitetste relationale Datenbankverwaltungssystem. Es ist als Open-Source-Software sowie als

Abbildung 12: MySQL

kommerzielle Enterpriseversion für verschiedene 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 Microsystems übernommen, welches im Januar 2010 von Oracle gekauft 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).

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

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 31 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 32 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 33 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 34 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.

Abbildung 21: XAMPP Logo

Eine ausführliche Installations-Hilfe, Anleitung sowie ein FAQ helfen beim Einstieg.

Im kostenlosen Programm-Paket XAMPP sind folgende Tools enthalten:  Apache  MySQL  PHP  MiniPerl  OpenSSL  phpMyAdmin  XAMPP Control Panel  Webalizer  Mercury Mail Transport System für Win32 und

Abbildung 22: XAMPP Control Panel

NetWare Systems  FileZilla FTP Server  SQLite  ADODB  Zend Optimizer  XAMPP Security

http://www.chip.de/downloads/XAMPP_22023279.html

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 35 von 73

4.8 jAlbum10

jAlbum ist ein Programm, welches zur Erstellung von Bilderalben im Internet konzipiert wurde. Der bei weitem zeitraubendste Teil bei der Erstellung von Bilderalben oder ähnlichen

Abbildung 24: jAlbum Logo

Webseiten in denen viele einzelne Abbildungen dargestellt werden, ist die Bearbeitung und die Organisation der einzelnen Bilder. Und genau da liegen die großen Stärken von jAlbum. Durch Nutzung dieses Generators, reduziert sich der Erstellungsaufwand auf ein Minimum, da man sich lediglich mit den Grundeinstellungen zu befassen hat, die Bilder auswählt und aus einer Vielzahl von optischen Darstellungsvarianten seine Wahl zu treffen hat. Alles Weitere übernimmt das Programm.

Abbildung 23: Screenshot jAlbum

http://cimms.de/jalbum.html

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 36 von 73

4.8.1 Skins Das Aussehen und der Aufbau der erstellten Bilderalben ist durch eine Vielzahl an Vorlagen, sogenannten "Skins", nahezu vollständig 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öglichkeit des Dateiabgleichs und der komprimierten Dateiübertragung bietet.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 37 von 73

4.9 Unterschied Zwischen statischen und dynamischen Webseiten11 Im Gegensatz zu statischen Webseiten, die technisch ein valides HTML-Dokument auf dem Webserver darstellen, werden Webseiten häufig auch dynamisch oder aktiv im Moment der Anforderung erzeugt. Das ist dann sinnvoll, wenn eine Webseite sehr aktuelle 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 entwickelt wurde. Es trägt die Daten z. B. aus Datenbanken zusammen und erstellt das HTML-Dokument. Dieses wird dann vom Webserver an den Browser übertragen und beim Benutzer angezeigt. 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 Benutzereingaben 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 Betriebssystemen und anderen Eigenschaften der Clients. Grundvoraussetzungen sind lediglich eine Netzwerkverbindung zum Server und ein Webbrowser.

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

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 38 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 39 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 ausgegeben werden zu lesen. Mit Hilfe des MenĂźbereiches gelangt man von einer Seite auf die Andere.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 40 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 aktualisierten 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 eingebunden. 5.1.1.1

Include-Befehl

Abbildung 26: Include-Befehl

5.1.1.2

Include-Datei

Abbildung 27: menue.inc

http://www.phpbox.de/php_befehle/include.php

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 41 von 73

Abbildung 28: meta.inc

Abbildung 29: footer.inc

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 42 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 43 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 Webseite angef端hrt.

Abbildung 33: nicht-ziele.php

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 44 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 45 von 73

5.3 Team

Abbildung 35: mediatoren.php

Auf der Seite Team wird die Tabelle peers ausgegeben. Die Datenbank verf端gt 端ber die Vor- und Nachnamen der Mediatoren, sowie den Zeitpunkt, seitdem diese das Pannoneum besuchen.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 46 von 73

5.3.1 Peer-Coaches

Auf der Seite "coaches.php" haben wir die Tabelle coaches ausgegeben, 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 unserer Schule unterrichten und seit wann diese an unserer Schule sind.

Abbildung 36: coaches.php

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 47 von 73

5.4 Fotos

Abbildung 37: fotos.php

Die Fotoalben haben wir mit Hilfe von jAlbum erstellt. Wir haben die Ordner, mit den durch das Programm fertig erstellten Slideshows auf unseren Server geladen und die benĂśtigten Links auf der Seite eingefĂźgt.

Abbildung 38: FTP Server

Abbildung 39: Screenshot fotos.php

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 48 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 49 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 50 von 73

5.5 Ausbildung, Kompetenzen

Abbildung 43: ausbildung.php

Die Seite ausbildung.php beinhaltet Informationen zu den Kompetenzen, die von den Mediatoren/innen vermittelt werden.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 51 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 52 von 73

5.6.1 Auf kontakt.php befindet sich das Impressum und beinhaltet folgendes:

Auf das Impressum gelangt man durch den Link, der sich im Copyright jeder Seite befindet.

Abbildung 46: Impressum

Das Impressum ist auf der Seite footer.inc mit einem Anker besetzt, so dass man, wenn man auf einer unserer Seiten auf impressum klickt sofort auf der kontakt.php zum Impressum gelangt.

Abbildung 47: Screenshot footer.php

Abbildung 48: Screenshot kontakt.php

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 53 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 54 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 55 von 73

6.1 Anmelden Vorname, Nachname und Passwort sind im Table user gespeichert.

Abbildung 50: login.php

Mit Hilfe einer Passwortüberprüfung durch Sessions wird das Passwort abgefragt, bei richtiger Eingabe wird man in den Geschützten Bereich weitergeleitet. In diesem kann man die einzelnen Datensätze bearbeiten, löschen und hinzufügen. Mit dem Befehl Session Start wird die Abfrage begonnen und mit richtigem Vorname, Nachnamen und Passwort kann der berechtigte User in den Backendbereich.

Abbildung 51: checklogin.php

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 56 von 73

checklogin.php überprüft letztendlich die Eingabe

Abbildung 52: ckecklogin.php

Bei falscher Eingabe des Vorname, Nachnamens oder des Passwortes erscheint: „Logindaten waren nicht korrekt. Bitte nochmals versuchen“ mit einem Link auf login.php.

Abbildung 53: admin.php

Im Admin Bereich kann auf die PeerCoach- oder Newsliste zugegriffen werden. Auf der linken Seite befindet sich immer der aktive Benutzername. Ausloggen ist von jeder Seite möglich.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 57 von 73

6.2 News Die Tabelle news wird auf index.php ausgegeben (Startseite) und kann im Backendbereich jederzeit verändert werden.

Abbildung 54: newsliste.php

Hier werden alle vorhandenen Neuigkeiten in einer übersichtlichen Tabelle ausgegeben. Mit dem Symbol

gelangt man auf

news_bearbeiten.php und mit dem Symbol

gelangt man auf

news_löschen.php.

Abbildung 55: news_einfuegen.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.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 58 von 73

Abbildung 56: news_db_einfuegen.php

Auf der Seite news_db_einfuegen.php werden die eingefügten Daten ausgegeben, um sie auf Vollständigkeit und Richtigkeit zu überprüfen.

Abbildung 57: news_aendern.php

Auf news_aendern.php kann eine bereits erstellte Neuigkeit verändert werden.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 59 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 überprüfen.

Abbildung 59: news_loeschen.php

Auf news_loeschen.php wird die ausgewählte Neuigkeit unwiderruflich aus der Datenbank gelöscht.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 60 von 73

6.3 Coaches Die Tabelle coaches wird auf coaches.php ausgegeben und kann im Backendbereich jederzeit verändert werden.

Abbildung 60: coachliste.php

Hier werden alle bereits hinzugefügten Coaches in einer übersichtlichen Tabelle ausgegeben. Mit dem Symbol auf coach_bearbeiten.php und mit dem Symbol

gelangt man gelangt man

auf coach_löschen.php.

Abbildung 61: coach_einfuegen.php

Auf coach_einfuegen.php kann ein neuer Coach erstellt werden.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 61 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채ndert werden.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 62 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 überprü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 63 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 übersichtlichen 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 64 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 65 von 73

Auf

Abbildung 70: peer_db_ändern

peer_db_aendern.php wird der geänderte Coach wieder ausgegeben, 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.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 66 von 73

6.5 Ausloggen

Abbildung 72: logout.php

Wenn man auf den Button ausloggen klickt, wird man automatisch auf die Seite logout.php verwiesen. Von dieser Seite kommt man wieder zur端ck in den Loginbereich.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 67 von 73

7 Nachwort Am Anfang des Schuljahres konnten wir uns nur sehr schwer vorstellen, eine Homepage alleine zu erstellen. Nach einem halben Jahr intensiver Arbeit, sind wir froh, dass wir eine funktionierende Webseite vorweisen können. Die Aufgaben sind uns teilweise schwer gefallen und wir mussten die Unterstützung unserer Lehrer in Anspruch nehmen. Sie standen 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 Problemen 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 gebracht. Wir haben unsere Teamfähigkeit unter Beweis stellen können und konnten unsere Fähigkeiten in den Programmiersprachen PHP, HTML und CSS verbessern. Zum Abschluss möchten wir uns noch herzlich für die Unterstützung unserer Professoren, Heinz Wurzinger und Adolf Selinger, bedanken. Wir nehmen diese wertvolle Erfahrung im Bereich der Medieninformatik mit auf unseren weiteren Lebensweg. Schlussendlich sind wir stolz auf unser Ergebnis.

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 68 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/hypertextpreprocessor-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 69 von 73

jAlbum http://cimms.de/jalbum.html

Unterschied Zwischen statischen und dynamischen Webseiten http://de.wikipedia.org/wiki/Webseiten

Include-Befehl http://www.phpbox.de/php_befehle/include.php

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 70 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 71 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

Sophie BEZGOVSEK Daniela STOLAWETZ

2011/2012

Seite 72 von 73