Redesign der Homepage „Pfarrgemeinde Schwadorf“
Fachspezifische
Themenstellung
Information &
Communication Solutions
Birgit Wolf und
Katharina Mazur
Pannoneum
Neusiedl am See
Schuljahr 2012/13
Birgit Wolf & Katharina Mazur Seite 1 von 46
Inhaltsverzeichnis
1 Vorwort ......................................................................... 3
2 Abstract ........................................................................ 4
3 Projektmanagement (PM) ................................................ 5
3.1 Projektteam .............................................................. 5
3.2 Projektzeitraum ......................................................... 5
3.3 Ziele und Nichtziele .................................................... 6
3.3.1 Ziele ................................................................. 6
3.3.2 Nichtziele .......................................................... 6
3.4 Projektplanung .......................................................... 6
3.4.1 Übersicht der Meilensteine .................................. 6
3.4.2 Arbeitspakete .................................................... 7
3.5 Projektstrukturplan .................................................. 14
3.5.1 Unser PSP ....................................................... 15
3.5.2 Arbeitsprotokoll ............................................... 16
3.5.3 Seitenübersicht ................................................ 20
3.6 Corporate Design ..................................................... 21
3.6.1 Zielgruppe ....................................................... 21
3.6.2 Schriftart ........................................................ 21
3.6.3 Design ............................................................ 21
3.6.4 Farbcodes ....................................................... 21
3.6.5 Template ........................................................ 23
3.6.6 Vorher-Nachher-Vergleich ................................. 24
4 Grundlagen .................................................................. 26
Birgit Wolf & Katharina Mazur Seite 2 von 46
4.1 HTML (Hypertext Markup Language) .......................... 26
4.1.1 Grundgerüst .................................................... 26
4.2 CSS (Cascading Style Sheets) ................................... 27
4.3 PHP (Hypertext Preprocessor) ................................... 28
4.4 Phase5 ................................................................... 29
4.5 MySQL ................................................................... 29
4.6 Datenbank auf phpMy Admin erstellen ........................ 29
4.6.1 Tabelle „ankuendigung“ .................................... 30
4.6.2 Tabelle „kategorie“ ........................................... 31
4.7 XAMPP .................................................................... 32
4.8 jAlbum ................................................................... 33
4.9 Unterschied statische und dynamische Webseite .......... 36
5 Frontend ..................................................................... 37
6 Backend ...................................................................... 39
6.1 Anmelden ............................................................... 39
7 Nachwort..................................................................... 44
8 Quellenverzeichnis ........................................................ 45
9 Abbildungsverzeichnis ................................................... 46
Birgit Wolf & Katharina Mazur Seite 3 von 46
1 Vorwort
Im Zuge unseres Ausbildungsschwerpunktes Information &
Communication Solutions haben wir uns dafür entschieden, als
Maturaprojekt die bisherige Homepage der Pfarre Schwadorf neu
zu gestalten. Bei diesem Projekt wollen wir die erworbenen
Kenntnisse der letzten drei Jahre in die Praxis umsetzen.
Bei diesem Projekt mit dem Titel „Redesign der Homepage Pfarr-
gemeinde Schwadorf“ setzten wir uns als Ziel, die Homepage be-
nutzerfreundlicher und einfacher zu gestalten und diese mit dy-
namischen Elementen mittels php mySQL zu erstellen.
Dies war notwendig, da die vorhandene Homepage nicht mehr
dem neuesten Stand gerecht wurde.
Mit Hilfe unseres Professors Heinz Wurzinger gelang es uns, die-
ses Projekt umzusetzen und wir hoffen, dass es den Anforderun-
gen unseres Auftraggebers entspricht.
Birgit Wolf & Katharina Mazur Seite 4 von 46
2 Abstract
At the beginning of this school year we should design a home-
page for the educational focus of Information & Communication
Solutions.
We decided to redesign the homepage of the parish of
Schwadorf. In our project we would like to prove our skills that
we acquired in the last three years.
The goals of our project named “Redesign der Homepage
Pfarrgemeinde Schwadorf” were to make it an easy to use, clear
and well-structured site.
We created the homepage with dynamic elements, with the help
of php/MySQL.
With the help of our teacher Mag. Heinz Wurzinger, we designed
a modern website, and we hope our purchaser will be satisfied
with our project.
Birgit Wolf & Katharina Mazur Seite 5 von 46
3 Projektmanagement (PM)
Als Projektmanagement (PM) bezeichnet man das Planen, Steu-
ern und Kontrollieren von Projekten.1
Merkmale eines Projektes sind:
Einmalige Abläufe
Zeitlich begrenzt
Begrenzte Ressourcen
3.1 Projektteam
Projektleiterin: Birgit Wolf
Projektteammitglied: Katharina Mazur
Projektauftraggeber: Pfarrgemeinde Schwadorf
3.2 Projektzeitraum
Projektbeginn: 19. September 2012
Projektende: 28. Februar 2013
1 o.V.:http://de.wikipedia.org/wiki/Projektmanagement
Birgit Wolf & Katharina Mazur Seite 6 von 46
3.3 Ziele und Nichtziele
3.3.1 Ziele
Corporate Design anpassen
einfache Menüführung
einhalten der Meilensteinliste
einhalten des Zeitplans
übersichtliche Struktur der Website
dynamische Elemente mit einer Datenbankanbindung
3.3.2 Nichtziele
unübersichtliche Homepage
nicht einhalten der Meilensteinliste
falsche Informationen
nicht funktionierende Homepage
3.4 Projektplanung
Die Projektplanung dient dazu, das Projekt in dem zeitlich fest-
gelegten Rahmen fertigzustellen. Als Hilfe haben wir Meilensteine
(MS) sowie Arbeitspakete (AP) erarbeitet.
3.4.1 Übersicht der Meilensteine
Konzept fertig erstellt
Entwurf der Website fertig erstellt
Seiten fertig erstellt
Website überarbeitet
Website veröffentlicht
Birgit Wolf & Katharina Mazur Seite 7 von 46
3.4.2 Arbeitspakete
3.4.2.1 Meilenstein 1: Konzept erstellen
Arbeitspaket: 1.1 Projektantrag
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Go-Entscheidung des Auftraggebers
Nichtziele: Auftraggeber verweigert Go-Entscheidung
Start: 21. September 2012
Ende: 24. September 2012
Benötigte Ressourcen: Laptop, Internet
Arbeitspaket: 1.2 Ideen sammeln
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Gute Ergebnisse
Nichtziele: Die Ideen entsprechen nicht den Vorstellungen des
Auftraggebers
Start: 24. September 2012
Ende: 27. September 2012
Benötigte Ressourcen: Laptop, Internet, Zeit
Birgit Wolf & Katharina Mazur Seite 8 von 46
Arbeitspaket: 1.3 Projektkoordination
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Erstellen eines Projektstrukturplans; Ziele und Nichtziele
für das gesamte Projekt definiert
Nichtziele: unübersichtlicher Projektstrukturplan
Start: 27. September 2012
Ende: 27. September 2012
Benötigte Ressourcen: Laptop
3.4.2.2 Meilenstein 2: Entwurf der Website
Arbeitspaket: 2.1 Corporate Design festlegen
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: passendes Corporate Design für die Pfarre finden
Nichtziele: unangemessenes Layout erstellen
Start: 11. Oktober 2012
Ende: 08. November 2012
Benötigte Ressourcen: Laptop, Internet
Birgit Wolf & Katharina Mazur Seite 9 von 46
Arbeitspaket: 2.2 Template suchen
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: passendes Template für die Pfarre finden
Nichtziele: veraltetes Template finden
Start: 04. Oktober 2012
Ende: 04. Oktober 2012
Benötigte Ressourcen: Laptop, Internet
Arbeitspaket: 2.3 Template bearbeiten
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Template an das Corporate Design anpassen; Dropdown
Menüleiste in das vorhandene Template einbinden; Startseite
anpassen; Include-Befehl für die Menüleiste einfügen
Nichtziele: Template für den Auftraggebern nicht zufriedenstel-
lend anpassen
Start: 11. Oktober 2012
Ende: 08. November 2012
Benötigte Ressourcen: Laptop, Internet
Birgit Wolf & Katharina Mazur Seite 10 von 46
3.4.2.3 Meilenstein 3: Seiten erstellen
Arbeitspaket: 3.1 Seite „Home“
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Bildwechsel einfügen; passende Überschrift
Nichtziele: zu viele, verschiedene Farben; zu schneller Bildwech-
sel
Start: 11. Oktober 2012
Ende: 18. Oktober 2012
Benötigte Ressourcen: Laptop, Internet,
Arbeitspaket: 3.2 Seite „Aktuelles“
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: eine Webseite erstellen mit dynamischen Elementen mit-
tels php/mySQL
Nichtziele: nicht funktionieren der dynamischen Elemente
Start: 20. Dezember 2012
Ende: 31. Jänner 2013
Benötigte Ressourcen: Laptop, Internet,
Birgit Wolf & Katharina Mazur Seite 11 von 46
Arbeitspaket: 3.3 Seite „Über uns“
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: übersichtliche, leicht lesbare Texte verfassen; dazugehöri-
ge Bilder einfügen
Nichtziele: Rechtschreibfehler in den Texten; zu lange Texte
Start: 18. Oktober 2012
Ende: 24. Jänner 2013
Benötigte Ressourcen: Laptop, Internet,
Arbeitspaket: 3.4 Seite „Bildergalerie“
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: einfache Bildergalerie erstellen mit jAlbum
Nichtziele: veraltete Fotos in der Bildergalerie; schlechte Auflö-
sung der Fotos
Start: 20. Februar 2012
Ende: 20. Februar 2012
Benötigte Ressourcen: Laptop, Internet, Bilder
Birgit Wolf & Katharina Mazur Seite 12 von 46
Arbeitspaket: 3.5 Seite „Informationen“
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: einfach, verständliche Texte mit den wichtigsten Informa-
tionen;
Nichtziele: Falsche Informationen
Start: 24. Jänner 2013
Ende: 24. Jänner 2013
Benötigte Ressourcen: Laptop; Internet
3.4.2.4 Meilenstein 4: Überarbeitung der Website
Arbeitspaket: 4.1 Website dem Pfarrgemeinderat präsen-
tieren
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Zufriedener Auftraggeber; Die Website soll den Anforde-
rungen vom Auftraggeber entsprechen
Nichtziele: Dass die Website ein totales NoGo für den Pfarrge-
meinderat ist; Schlechte Präsentation
Start: 04. Jänner 2013
Ende: 04. Jänner 2013
Benötigte Ressourcen: Laptop; Internet; Block; Stift
Birgit Wolf & Katharina Mazur Seite 13 von 46
Arbeitspaket: 4.2 Website überarbeiten
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Den HEAD-Bereich überarbeiten (Banner erstellen)
Nichtziele: Banner und die gesamte Überarbeitung entspricht
nicht der Vorstellung des Auftraggebers
Start: Februar 2013
Ende: Februar 2013
Benötigte Ressourcen: Laptop; Internet;
Arbeitspaket: 4.3 Website fertigstellen
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Kontrollieren ob alle Ziele erreicht wurden; Kleinigkeiten
noch ändern;
Nichtziele: Nicht termingerechte Fertigstellung der Website
Start: Februar 2013
Ende: Februar 2013
Benötigte Ressourcen: Laptop; Internet;
Birgit Wolf & Katharina Mazur Seite 14 von 46
3.4.2.5 Meilenstein 5: Veröffentlichen der Website
Arbeitspaket: 5.1 Bisherige Homepage durch die Neue er-
setzen
Zuständige: Katharina Mazur und Birgit Wolf
Ziele: Website ersetzen und veröffentlichen
Nichtziele: Problem bei der Veröffentlichung
Start: Februar 2013
Ende: Februar 2013
Benötigte Ressourcen: Laptop; Internet;
3.5 Projektstrukturplan
Der Projektstrukturplan (PSP) ist das Ergebnis einer Gliederung
des Projekts in plan- und kontrollierbare Elemente. Ein Projekt
wird im Rahmen der Strukturierung in Teilaufgaben und Arbeits-
pakete unterteilt. Teilaufgaben sind Elemente, die weiter unter-
teilt werden müssen, Arbeitspakete sind Elemente, die sich auf
der untersten Ebene befinden und nicht weiter unterteilt werden.
Die Erstellung eines Projektstrukturplans ist nach heutigem Er-
kenntnisstand des Projektmanagements eine der zentralen Auf-
gaben der Projektplanung. Der PSP ist die Grundlage für die
Termin- und Ablaufplanung, die Ressourceneinplanung und die
Kostenplanung.2
2 o.V.:http://de.wikipedia.org/wiki/Projektstrukturplan
Birgit Wolf & Katharina Mazur Seite 15 von 46
Konzept erstellen
Projektantrag
Ideen sammeln
Projektkoordination
Entwurf der Website
Template suchen
Template bearbeiten
Corporate Design festlegen
Seiten erstellen
Home
Aktuelles
Über uns
Bildergalerie
Informationen
Überarbeitung der Website
Website dem Pfarrgemeinderat
präsentieren
Website überarbeiten
Website fertigstellen
Veröffentlichen der Website
Bisherige Homepage durch die Neue ersetzen
3.5.1 Unser PSP
Birgit Wolf & Katharina Mazur Seite 16 von 46
3.5.2 Arbeitsprotokoll
21.09.2012
Projektstart
Festlegung des Themas
27.09.2012
Strukturplan
Ziele- Nichtziele definiert
04.10.2012
Template gesucht und gefunden
http://www.freecsstemplates.org/css-templates/
Templatename: outdoor.zip
PHP-Fotogalerie
11.10.2012
Startseite anpassen
Schriften geändert
Überschrift 1 formatiert (zentriert?)
Vorhandenen Text teilweise gelöscht, gekürzt
Im Unterricht:
Veröffentlichen von Webseiten
MindMap erstellt
Birgit Wolf & Katharina Mazur Seite 17 von 46
18.10.2012
Ändern der Menüleiste
Include Befehle
Erstellen der Seite „Über uns“
Im Unterricht:
Templates
25.10.2012
Navigation
08.11.2012
Fertigstellung der Navigation erledigt
Informieren über Bildwechsel
15. 11. 2012
Bildwechsel erledigt
Seite „Über uns“ erstellt
Seite „Mitarbeiter“ angefangen zu erstellen
22.11.2012
Folgende Seiten erstellt:
o Mitarbeiter
o Pfarrgemeinderat
o Windelhüpfer
o Ministranten
o Firmgruppe
29.11.2012
Folgende Seiten wurden erstellt:
o Familienrunde
o Senioren
o Musik: Kirchenchor, Organist, Band
o Lektoren & Assistenz
Birgit Wolf & Katharina Mazur Seite 18 von 46
o Caritas & Projekte ( zur Hälfte erstellt)
06.12.2012
Hochladen per FTP
Folgende Seite wurden erstellt:
o Caritas & Projekte
o Bastelrunde
o Flohmarkt
E-Mail geschrieben an Pfarrgemeinderat mit Link zur
Homepage
13.12.2012
Internet funktionierte nicht in der ersten Stunde
Wir haben alle Seiten erstellt mit dem vorläufigen Text:
“Diese Seite befindet sich in Arbeit!“
20.12.2012
Plan für die dynamische Website „Ankündigung“ erstellt
03.01.2013
Folgende Seiten wurden erstellt:
Kirche mit Standort
o Blumenschmuck
o Kirchen- und Pfarrzentrumreinigung
o Kapellen
Pfarrzentrum
o Alter Pfarrhof
Friedhof
Bei der Seite „Musik“ wurde folgender Link hinzugefügt:
Orgel
24.01.2013
Restlichen Seiten „Informationen“
Dynamische Website
Birgit Wolf & Katharina Mazur Seite 19 von 46
31.01.2013
Dynamische Website
o Geschützt
06.02.2013
Bilder zu den jeweiligen Seiten hinzugefügt
Seite „Unsere Pfarrkirche“ und „Alter Pfarrhof“ erstellt
Seite „Links“ fertig gestellt
Birgit Wolf & Katharina Mazur Seite 20 von 46
3.5.3 Seitenübersicht
Birgit Wolf & Katharina Mazur Seite 21 von 46
3.6 Corporate Design
Der Begriff Corporate Design (CD) bzw. Unternehmens-
Erscheinungsbild bezeichnet einen Teilbereich der Unterneh-
mens-Identität und beinhaltet das gesamte, einheitliche Erschei-
nungsbild eines Unternehmens oder einer Organisation. Dazu
gehören vorrangig die Gestaltung der Kommunikationsmittel
aber auch Geschäftspapiere, Werbemittel, Verpackungen, Inter-
netauftritte sowie die Produktgestaltung.3
3.6.1 Zielgruppe
Die Zielgruppe unseres Projekts bezieht sich auf die Einwohner in
Schwadorf und Interessierte aus der Umgebung.
3.6.2 Schriftart
Für die Schriftarten haben wir serifenlose Schriften gewählt, da
diese für den User im Web gut lesbar sind.
Überschriften: Tahoma
Text: Arial
3.6.3 Design
Als Design haben wir uns auf ein schlichtes aber strukturiertes
Design konzentriert.
3.6.4 Farbcodes
Der Auftraggeber ließ uns bei den Farben frei wählen, deshalb
fiel unsere Wahl auf warme Farben, da diese die Herzlichkeit der
Pfarrgemeinde wiedergeben.
3 o.V.:http://de.wikipedia.org/wiki/Corporate_Design
Birgit Wolf & Katharina Mazur Seite 22 von 46
Dunkelbraun
HSV: 17 71 25
RGB: 63 31 18
HMTL-Code: 3f1f12
Beige
HSV: 39 51 77
RGB: 197 162 96
HMTL-Code: c5a260
Dunkelrot
HSV: 0 100 58
RGB: 149 0 0
HTML-Code: 950000
Grau
HSV: 0 0 37
RGB: 95 95 95
HTML-Code: 5F5F5F
Birgit Wolf & Katharina Mazur Seite 23 von 46
3.6.5 Template
3.6.5.1 Vorher
Abbildung 1: Template vorher
Birgit Wolf & Katharina Mazur Seite 24 von 46
3.6.5.2 Nachher
Abbildung 2: Template nachher
3.6.6 Vorher-Nachher-Vergleich
3.6.6.1 Vergleich: Seite „Senioren“ vorher
Abbildung 3: Alte Website
Birgit Wolf & Katharina Mazur Seite 25 von 46
3.6.6.2 Vergleich: Seite „Senioren“ nachher
Abbildung 4: Neue Website
Birgit Wolf & Katharina Mazur Seite 26 von 46
4 Grundlagen
In den letzten drei Jahren haben wir uns schon einen Großteil
des Grundwissens, welches bei der Umsetzung des Projektes
notwendig war, angeeignet. Wir haben einige Programme einge-
setzt, um eine ansprechende Homepage zu gestalten.
4.1 HTML (Hypertext Markup Language)
HTML ist eine textbasierte Auszeichnungssprache zur Strukturie-
rung von Inhalten wie Texten, Bildern und Hyperlinks in Doku-
menten. HTML-Dokumente sind die Grundlage des World Wide
Web und werden von einem Webbrowser dargestellt.4
4.1.1 Grundgerüst5
Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgen-
den Teilen:
Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-
Version)
Das HTML-Wurzelelement <html>, und darin
Header (Kopfdaten. z.B. Angaben zu Titel u.ä.)
Body (Körper - anzuzeigender Inhalt, also Text mit Über-
schriften, Verweisen, Grafikreferenzen usw.)
4 o.V.: http://de.wikipedia.org/wiki/Hypertext_Markup_Language
5 o.V.:http://de.selfhtml.org/html/allgemein/grundgeruest.htm
Birgit Wolf & Katharina Mazur Seite 27 von 46
Schema:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
</head>
<body>
</body>
</html>
4.2 CSS (Cascading Style Sheets)
CSS ist eine deklarative Sprache für Stilvorlagen von strukturier-
ten Dokumenten. Sie wird vor allem zusammen mit HTML und
XML eingesetzt.
Grundidee beim Entwurf von CSS war es, mittels HTML oder XML
nur die inhaltliche Untergliederung eines Dokumentes und die
Bedeutung seiner Teile zu beschreiben, während mittels CSS
weitgehend unabhängig davon die konkrete Darstellung (Farben,
Layout, Schrifteigenschaften usw.) der Teile festgelegt wird.
Elemente eines Dokumentes können z. B. aufgrund ihres Ele-
mentnamens, ihrer ID oder auch aufgrund ihrer Position in die-
sem Dokument identifiziert werden. Mithilfe von CSS-Regeln
können deshalb für jedes Element die konkreten Werte für be-
stimmte Darstellungsattribute festgelegt werden. 6
6 o.V.:http://de.wikipedia.org/wiki/Cascading_Style_Sheets
Birgit Wolf & Katharina Mazur Seite 28 von 46
Beispiel:
CSS
p.info {
font-family: arial, sans-serif;
line-height: 150%;
margin-left: 2em;
padding: 1em;
border: 3px solid red;
background-color: #f89;
display: inline-block;
}
HTML
<p class="info">
<span>Hinweis</span>
Sie haben sich erfolgreich angemeldet.
</p>
4.3 PHP (Hypertext Preprocessor)
PHP ist eine Computersprache, mit der Webserver gesteuert
werden. Sie wird als freie Software unter der PHP-Lizenz verbrei-
tet.
Es handelt sich um eine Skriptsprache; Programme, die mit ihr
codiert und als einfache Textdateien abgespeichert sind, werden
zum Zeitpunkt ihres Aufrufs vom Webserver in Maschinencode
umgerechnet, mit dem dieser "von Haus aus" arbeitet. PHP-
Programme sind insofern in weiten Teilen plattformunabhängig
und können auf verschiedenen Hardware-Systemen ausgeführt
werden.7
7 o.V.:http://www.php-programmierer.de/definition-php/
In der CSS-Datei wird die
Klasse „p.info“ definiert!
In der HTML-Datei wird die
Klasse „p.info“ angewendet!
Birgit Wolf & Katharina Mazur Seite 29 von 46
4.4 Phase5
Ulli Meybohms HTML-Editor phase 5 ist ein für den Privatge-
brauch oder Schulen (nichtkommerzielle Nutzung) kostenloses
Programm zum Erstellen von HTML-Dokumenten unter
Windows.8
Es ist einfach zu bedienen und verfügt über viele Funktionen. Zur
Bedienung des Programms benötigt man gewisse Vorkenntnisse,
jedoch gibt es einige gute Seiten im Web, welche einem jederzeit
weiterhelfen können.
4.5 MySQL
MySQL ist eines der weltweit am weitesten verbreiteten relatio-
nalen Datenbankverwaltungssysteme.
Es ist als Open-Source-Software sowie als kommerzielle Enter-
priseversion für verschiedene Betriebssysteme verfügbar und
bildet die Grundlage für viele dynamische Webauftritte.
4.6 Datenbank auf phpMy Admin erstellen
Unsere Datenbank haben wir mit Hilfe von phpMy Admin erstellt.
Datenbank: d01627a6
Tabellen:
ankuendigung
kategorie
8 o.V.:http://de.wikipedia.org/wiki/HTML-Editor_Phase_5
Birgit Wolf & Katharina Mazur Seite 30 von 46
4.6.1 Tabelle „ankuendigung“
Felder erstellt:
Abbildung 5: Tabelle ankuendigung Struktur
Datensätze eingefügt:
Abbildung 6: Tabelle ankuendigung Datensätze
Birgit Wolf & Katharina Mazur Seite 31 von 46
4.6.2 Tabelle „kategorie“
Felder erstellt:
Abbildung 7: Tabelle kategorie Struktur
Datensätze eingefügt:
Abbildung 8: Tabelle kategorie Datensätze
Birgit Wolf & Katharina Mazur Seite 32 von 46
4.7 XAMPP
XAMPP ist eine Zusammenstellung von freier Software – vorwie-
gend im Umfeld des LAMP-Systems.
XAMPP ermöglicht das einfache Installieren und Konfigurieren
des Webservers Apache mit der Datenbank MySQL bzw. SQLite
und den Skriptsprachen Perl und PHP (mit PEAR).
Das X steht hierbei für die verschiedenen Betriebssysteme, auf
denen es eingesetzt werden kann.
XAMPP ist nicht für den Einsatz als Produktivsystem (z. B. als öf-
fentlicher Webserver) gedacht, sondern für Entwickler, die mög-
lichst schnell ein kompaktes Testsystem aufsetzen möchten.9
9 o.V.:http://de.wikipedia.org/wiki/Xampp
Abbildung 9: XAMPP Control
Panel Application
Birgit Wolf & Katharina Mazur Seite 33 von 46
4.8 jAlbum10
Wir haben unsere Bildergalerie mit dem Programm „JAlbum“ er-
stellt.
jAlbum ist ein Programm, welches zur Erstellung von Bilderalben
im Internet dient. Der Zeit intensivste Teil bei der Erstellung von
Bilderalben ist die Bearbeitung und die Organisation der einzel-
nen Bilder.
Für die Bedienung von jAlbum muss man sich lediglich nur mit
den Grundeinstellungen befassen, zum Beispiel die Bilder aus
dem gewünschten Ordner auswählen. Die weiteren Schritte gibt
das Programm vor.
Unsere erstellten Alben haben wir per FTP-Programm veröffent-
licht.
4.8.1 Die Anwendung von jAlbum
Wenn man mit jAlbum eine Bildergalerie erstellen möchte, muss
man zunächst ein neues Album erstellen.
Anschließend werden Ordner mit
den gewünschten Bildern angelegt.
10 o.V.:http://www.computerbild.de/download/JAlbum-929362.html
Abbildung 10: Ordner erstellen
Birgit Wolf & Katharina Mazur Seite 34 von 46
Außerdem gibt es die Möglichkeit eines für
die Homepage passendes Layout zu wäh-
len.
Ist man mit dem Erstellen des Albums
fertig, klickt man zunächst auf „Album
erstellen“ und anschließend auf „Uplo-
ad“.
Nach dem Upload unserer Bildergalerie, haben wir diese mit ei-
nem <i frame> - Befehl in die Seite „akutelle_fotos.php“ einge-
bettet.
Befehl:
<iframe
src="http://localhost/pfarre%20schwadorf/Bildergalerie/aktuelle
_fotos.html" width="100%" height="650"
name="SELFHTML_in_a_box">
</iframe>
Abbildung 11: Layout wählen
Abbildung 12: Upload
Birgit Wolf & Katharina Mazur Seite 35 von 46
Abbildung 13: aktuelle_fotos.php
Abbildung 14: archiv.php
Birgit Wolf & Katharina Mazur Seite 36 von 46
4.9 Unterschied statische und dynamische Web-
seite
Im Gegensatz zu statischen Webseiten, die technisch ein 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 Informa-
tionen wie beispielsweise Börsenkurse oder Wettervorhersagen
enthalten soll.
In diesem Fall führt der Webserver ein Programm aus, das vor-
her 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.
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 viele 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 Webbrow-
ser.11
11
o.V.:http://de.wikipedia.org/wiki/Dynamische_Webseite#Dynamische_Websei
ten
Birgit Wolf & Katharina Mazur Seite 37 von 46
5 Frontend
Der Frontend-Bereich ist der öffentliche Teil im Web und kann
von jedem User, welcher die Seite öffnet, abgerufen werden.
Unser Frontend-Bereich bietet Auswahl auf folgende Seiten:
Home
Aktuelles
o Vorschau
Über uns
o Pfarrleben
Mitarbeiter
Pfarrgemeinderat
Windelhüpfer
Ministranten
Firmgruppe
Familienrunde
Senioren
Musik
Link zu unserer Orgel
Lektoren und Assistenz
Caritas und Projekte
Bastelrunden
Flohmarkt
o Pfarrzentrum
Link zu „Alter_Pfarrhof“
Birgit Wolf & Katharina Mazur Seite 38 von 46
o Kirche
Unsere Pfarrkirche
Blumenschmuck
Kirchenreinigung
Kapellen
o Friedhof
Bildergalerie
o Aktuelle Fotos
o Archiv
Information
o Pfarrkanzlei
o Pfarrzeitung
Newsletterabo
o Spenden
o Soforthilfe
o Impressum
o Links
Schwadorf
Pfarren
Diözese
Nützliches
Birgit Wolf & Katharina Mazur Seite 39 von 46
6 Backend
Im Backendbereich sind alle Seiten mit Sessions geschützt und
daher nicht direkt zugänglich.
Hier können die Inhalte, welche aus einer Datenbank wiederge-
geben werden, verändert werden.
Der Backendbereich bietet die Möglichkeit folgende Dinge zu tun:
Ankündigungen hinzufügen
Ankündigungen bearbeiten
Ankündigungen löschen
6.1 Anmelden
Auf der Seite „ankuendigungsliste_oeffentlich.php“ gelangt man
zum Anmeldebutton.
Abbildung 15: ankuendigungsliste_oeffentlich.php
Birgit Wolf & Katharina Mazur Seite 40 von 46
Um in das Backend zu gelangen, muss man sich mit einem
Passwort einloggen.
Abbildung 16: login.php
Abbildung 17: check.php
Birgit Wolf & Katharina Mazur Seite 41 von 46
Bei richtiger Eingabe des Passworts, mit Hilfe der Sessions, wird
man in den geschützten Backend weitergeleitet.
In diesem geschützten Bereich kann man nun folgende Änderun-
gen vornehmen.
Abbildung 18: ankuendigungsliste.php
Birgit Wolf & Katharina Mazur Seite 42 von 46
Die Seite „ank_anlegen.php“ wird dazu verwendet, einen neuen
Datensatz anzulegen.
Abbildung 19: ank_anlegen.php
Auf der Seite „ank_bearbeiten.php“ ist es möglich, bereits vor-
handene Datensätze zu ändern.
Abbildung 20: ank_bearbeiten.php
Birgit Wolf & Katharina Mazur Seite 43 von 46
Die Seite „loeschen.php“ ermöglicht es, Datensätze unwiderruf-
lich zu löschen.
Abbildung 21: loeschen.php
Um sich auszuloggen, klickt man auf den „Logout“-Button und
wird automatisch auf die „ankuendigungsliste_oeffentlich.php“
geleitet.
Abbildung 22: logout.php
Birgit Wolf & Katharina Mazur Seite 44 von 46
7 Nachwort
Anfangs war es sehr schwierig jemanden zu finden, für den wir
eine Homepage erstellen konnten. Doch die Pfarrgemeinde
Schwadorf beauftragte uns, ihre bereits vorhandene Homepage
neu zu gestalten.
Wir nahmen diese Herausforderung mit Freude an und machten
uns sofort an die Arbeit.
Die vorhandene Homepage ist sehr umfangreich und beinhaltet
sehr viele Seiten. Wir erstellten einen Zeitplan, damit wir ter-
mingerecht fertig wurden. Teilweise wurde es sehr stressig und
wir investierten sehr viel Zeit in dieses Projekt.
Unser Maturaprojekt hat uns viele Erfahrungen für den weiteren
Lebensweg gebracht. Wir konnten unsere Teamfähigkeit unter
Beweis stellen und unsere Fähigkeiten in den Programmierspra-
chen PHP, HTML und CSS verbessern.
Mit Unterstützung unseres Herrn Professor Wurzinger konnten
wir unser Projekt verwirklichen und hoffen, dass das Ergebnis
den Vorstellungen unseres Arbeitgebers entspricht.
Birgit Wolf & Katharina Mazur Seite 45 von 46
8 Quellenverzeichnis
Projektmanagement (PM)
http://de.wikipedia.org/wiki/Projektmanagement
Projektstrukturplan (PSP)
http://de.wikipedia.org/wiki/Projektstrukturplan
Corporate Design (CD)
http://de.wikipedia.org/wiki/Corporate_Design
HTML (Hypertext Markup Language)
http://de.wikipedia.org/wiki/Hypertext_Markup_Language
HTML-Grundgerüst
http://de.selfhtml.org/html/allgemein/grundgeruest.htm
CSS (Cascading Style Sheets)
http://de.wikipedia.org/wiki/Cascading_Style_Sheets
PHP (Hypertext Preprocessor)
http://www.php-programmierer.de/definition-php/
Phase5
http://de.wikipedia.org/wiki/HTML-Editor_Phase_5
XAMPP
http://de.wikipedia.org/wiki/Xampp
jAlbum
http://www.computerbild.de/download/JAlbum-929362.html
Unterschied zwischen Statische und Dynamische Website
http://de.wikipedia.org/wiki/Dynamische_Webseite#Dynamische_Webseiten
Birgit Wolf & Katharina Mazur Seite 46 von 46
9 Abbildungsverzeichnis
Abbildung 1: Template vorher ............................................. 23
Abbildung 2: Template nachher ........................................... 24
Abbildung 3: Alte Website ................................................... 24
Abbildung 4: Neue Website ................................................. 25
Abbildung 5: Tabelle ankuendigung Struktur ......................... 30
Abbildung 6: Tabelle ankuendigung Datensätze ..................... 30
Abbildung 7: Tabelle kategorie Struktur ................................ 31
Abbildung 8: Tabelle kategorie Datensätze ............................ 31
Abbildung 9: XAMPP Control Panel Application ....................... 32
Abbildung 10: Ordner erstellen ............................................ 33
Abbildung 11: Layout wählen .............................................. 34
Abbildung 12: Upload ......................................................... 34
Abbildung 13: aktuelle_fotos.php ......................................... 35
Abbildung 14: archiv.php .................................................... 35
Abbildung 15: ankuendigungsliste_oeffentlich.php ................. 39
Abbildung 16: login.php ...................................................... 40
Abbildung 17: check.php .................................................... 40
Abbildung 18: ankuendigungsliste.php .................................. 41
Abbildung 19: ank_anlegen.php ........................................... 42
Abbildung 20: ank_bearbeiten.php ....................................... 42
Abbildung 21: loeschen.php ................................................ 43
Abbildung 22: logout.php .................................................... 43
