fachspezifische themenstellung peer-mediation

Sophie Bezgovsek Daniela Stolawetz 2011/2012 Seite 1 von 73

Sophie Bezgovsek | Daniela Stolawetz

2011/2012

Fachspezifische

Themenstellung

Peer Mediation


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


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


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.


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.


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.


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


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


Arbeitspaket: 1.2 Ideen mit Auftraggeberin besprechen


Ziele: klare einheitliche Vorstellung von der Website

Nichtziele: keine Übereinstimmung zwischen Auftraggeberin und

Ausführer


Ende: 22. September 2011

Benötigte Ressourcen: Laptop, ausgearbeitete Datei mit den

Ideen/Vorschlägen, Zeit

Arbeitspaket: 1.3 Koordination


Ziele: Vorstellungen der Auftraggeberin und der Ausführenden

kombinieren

Nichtziele: keine Umsetzmöglichkeiten


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




Arbeitspaket: 2.2 Texte umschreiben/bearbeiten

Zuständige: Sophie Bezgovsek

Ziele: Texte bearbeiten und richtig stellen

Nichtziele: Rechtschreibfehler im Text

Start: 13. 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


Arbeitspaket: Template bearbeiten


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


Arbeitspaket: 3.2 Design


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


3.5.2.4 Meilenstein 4: Website programmieren und testen

Arbeitspaket: 4.1 – 4.9 Alle Seiten programmieren und

testen


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



3.5.2.5 Meilenstein 5: Website überarbeiten

Arbeitspaket: 5.1 Website präsentieren


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


Arbeitspaket: 5.2 Website überarbeiten


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


Arbeitspaket: 5.3 Website fertigstellen


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



3.5.2.6 Meilenstein 6: Website veröffentlichen

Arbeitspaket: 6.1 Website veröffentlichen


Ziele: funktionierende Website veröffentlichen

Nichtziele: Website funktioniert nicht, Website ist unfertig

Start: 15. März 2012

Ende: 31. März 2012



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

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

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

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


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 präsentieren


Website fertigstellen




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)

http://peer.pannoneum.at/


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,


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


3.9 Seitenübersicht

3.9.1 Frontend

Abbildung 1: Frontend


3.9.2 Backend

Abbildung 2: Backend


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


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


3.10.4 Template

3.10.4.1 Vorher

Abbildung 4: Template vorher

3.10.4.2 Nachher


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


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.


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


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.


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


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


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++

http://notepad-plus.sourceforge.net/

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


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


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


4.6.2 Peers

Felder erstellt

Abbildung 15: Tabelle peers Struktur

Datensätze eingefügt

Abbildung 16:Tabelle peers Datensätze


4.6.3 Coaches

Felder erstellt

Abbildung 17: Tabelle coaches Struktur


Abbildung 18: Tabelle coaches Datensätze

4.6.4 User

Felder erstellt

Abbildung 19: Tabelle user Struktur


Abbildung 20: Tabelle user Datensätze


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

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


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


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.


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


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


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.


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



Abbildung 28: meta.inc

Abbildung 29: footer.inc


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.


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


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


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.


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


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


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


5.4.2 Aktionstag

Abbildung 41: Fotoalbum Aktionstag

5.4.3 Fürstenfeld

Abbildung 42: Fotoalbum Fürstenfeld


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.


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


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


5.7 Sponsoren

Die Sponsoren der Peer-Mediation am Pannoneum sind auf der

Seite sponsoren.php aufgelistet.

Abbildung 49: sponsoren.php


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


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


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.


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


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


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.


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


Abbildung 62: coach_db_einfuegen.php

Auf der Seite coach_db_einfuegen.php werden die eingefügten


kontrollieren.

Abbildung 63: coach_aendern.php

Auf coach_aendern.php kann ein bereits erstellter Coach verän-

dert werden.


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.


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.


Abbildung 68: peer_db_einfuegen.php

Auf der Seite peer_db_einfuegen.php werden die eingefügten


überprüfen.

Abbildung 69: peer_ändern.php

Auf peer_aendern.php kann ein bereits erstellter Peer verändert

werden.


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


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.


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.


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 ++


MySQL

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

XAMPP


http://www.google.com/

http://www.google.com/images

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

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

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

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

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

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


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



jAlbum


Unterschied Zwischen statischen und dynami-

schen Webseiten


Include-Befehl






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


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

fachspezifische themenstellung peer-mediation

Documents