Page 1

Fachspezifische Themenstellung Information & Communication Solutions

Redesign der Homepage „Pfarrgemeinde Schwadorf“

Birgit Wolf und Katharina Mazur Pannoneum Neusiedl am See Schuljahr 2012/13


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

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

4

Projektplanung .......................................................... 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

Grundlagen.................................................................. 26

Birgit Wolf & Katharina Mazur

Seite 1 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 2 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 Pfarrgemeinde Schwadorf“ setzten wir uns als Ziel, die Homepage benutzerfreundlicher und einfacher zu gestalten und diese mit dynamischen 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, dieses Projekt umzusetzen und wir hoffen, dass es den Anforderungen unseres Auftraggebers entspricht.

Birgit Wolf & Katharina Mazur

Seite 3 von 46


2 Abstract At the beginning of this school year we should design a homepage 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 4 von 46


3 Projektmanagement (PM) Als Projektmanagement (PM) bezeichnet man das Planen, Steuern 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 5 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 festgelegten 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 6 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 7 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 8 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 zufriedenstellend anpassen Start: 11. Oktober 2012 Ende: 08. November 2012 Benötigte Ressourcen: Laptop, Internet

Birgit Wolf & Katharina Mazur

Seite 9 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 Bildwechsel 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 mittels 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 10 von 46


Arbeitspaket: 3.3 Seite „Über uns“ Zuständige: Katharina Mazur und Birgit Wolf Ziele: übersichtliche, leicht lesbare Texte verfassen; dazugehörige 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 11 von 46


Arbeitspaket: 3.5 Seite „Informationen“ Zuständige: Katharina Mazur und Birgit Wolf Ziele: einfach, verständliche Texte mit den wichtigsten Informationen; 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äsentieren Zuständige: Katharina Mazur und Birgit Wolf Ziele: Zufriedener Auftraggeber; Die Website soll den Anforderungen vom Auftraggeber entsprechen Nichtziele: Dass die Website ein totales NoGo für den Pfarrgemeinderat 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 12 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 13 von 46


3.4.2.5

Meilenstein 5: Veröffentlichen der Website

Arbeitspaket: 5.1 Bisherige Homepage durch die Neue ersetzen 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 Arbeitspakete unterteilt. Teilaufgaben sind Elemente, die weiter unterteilt 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 Erkenntnisstand des Projektmanagements eine der zentralen Aufgaben 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 14 von 46


3.5.1 Unser PSP Konzept erstellen

Entwurf der Website

Seiten erstellen

Überarbeitung der Website

Veröffentlichen der Website

Bisherige Homepage durch die Neue ersetzen

Projektantrag

Template suchen

Home

Website dem Pfarrgemeinderat präsentieren

Ideen sammeln

Template bearbeiten

Aktuelles

Website überarbeiten

Projektkoordination

Corporate Design festlegen

Über uns

Website fertigstellen

Bildergalerie

Informationen

Birgit Wolf & Katharina Mazur

Seite 15 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 16 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 17 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 18 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 19 von 46


3.5.3 Seiten端bersicht

Birgit Wolf & Katharina Mazur

Seite 20 von 46


3.6 Corporate Design Der

Begriff

Corporate

Design

(CD)

bzw.

Unternehmens-

Erscheinungsbild bezeichnet einen Teilbereich der Unternehmens-Identität 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.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 21 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 22 von 46


3.6.5 Template 3.6.5.1

Vorher

Abbildung 1: Template vorher

Birgit Wolf & Katharina Mazur

Seite 23 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 24 von 46


3.6.6.2

Vergleich: Seite „Senioren“ nachher

Abbildung 4: Neue Website

Birgit Wolf & Katharina Mazur

Seite 25 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 eingesetzt, um eine ansprechende Homepage zu gestalten.

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 werden von einem Webbrowser dargestellt.4 4.1.1 Grundgerüst5 Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen: 

Dokumenttyp-Deklaration (Angabe zur verwendeten HTMLVersion)

Das HTML-Wurzelelement <html>, und darin

Header (Kopfdaten. z.B. Angaben zu Titel u.ä.)

Body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, 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 26 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 strukturierten 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 Elementnamens, ihrer ID oder auch aufgrund ihrer Position in diesem Dokument

identifiziert werden. Mithilfe von CSS-Regeln

können deshalb für jedes Element die konkreten Werte für be6

stimmte Darstellungsattribute festgelegt werden.

6

o.V.:http://de.wikipedia.org/wiki/Cascading_Style_Sheets

Birgit Wolf & Katharina Mazur

Seite 27 von 46


Beispiel: CSS p.info { font-family: arial, sans-serif;

In der CSS-Datei wird die Klasse „p.info“ definiert!

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>

In der HTML-Datei wird die Klasse „p.info“ angewendet!

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 verbreitet. 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. PHPProgramme 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/

Birgit Wolf & Katharina Mazur

Seite 28 von 46


4.4 Phase5 Ulli Meybohms HTML-Editor phase 5 ist ein für den Privatgebrauch 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 relationalen Datenbankverwaltungssysteme. Es ist als Open-Source-Software sowie als kommerzielle Enterpriseversion 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:

8

ankuendigung

kategorie

o.V.:http://de.wikipedia.org/wiki/HTML-Editor_Phase_5

Birgit Wolf & Katharina Mazur

Seite 29 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 30 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 31 von 46


4.7 XAMPP XAMPP ist eine Zusammenstellung von freier Software – vorwiegend 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 öffentlicher Webserver) gedacht, sondern für Entwickler, die möglichst schnell ein kompaktes Testsystem aufsetzen möchten.9

Abbildung 9: XAMPP Control Panel Application

9

o.V.:http://de.wikipedia.org/wiki/Xampp

Birgit Wolf & Katharina Mazur

Seite 32 von 46


4.8 jAlbum10 Wir haben unsere Bildergalerie mit dem Programm „JAlbum“ erstellt. 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 einzelnen 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öffentlicht. 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.

Abbildung 10: Ordner erstellen

10

o.V.:http://www.computerbild.de/download/JAlbum-929362.html

Birgit Wolf & Katharina Mazur

Seite 33 von 46


Außerdem gibt es die Möglichkeit eines für die Homepage passendes Layout zu wählen.

Abbildung 11: Layout wählen

Ist man mit dem Erstellen des Albums fertig, klickt man zunächst auf „Album erstellen“ und anschließend auf „Upload“.

Abbildung 12: Upload

Nach dem Upload unserer Bildergalerie, haben wir diese mit einem <i frame> - Befehl in die Seite „akutelle_fotos.php“ eingebettet.

Befehl: <iframe src="http://localhost/pfarre%20schwadorf/Bildergalerie/aktuelle _fotos.html" width="100%" height="650" name="SELFHTML_in_a_box"> </iframe>

Birgit Wolf & Katharina Mazur

Seite 34 von 46


Abbildung 13: aktuelle_fotos.php

Abbildung 14: archiv.php

Birgit Wolf & Katharina Mazur

Seite 35 von 46


4.9 Unterschied statische und dynamische Webseite Im Gegensatz zu statischen Webseiten, die technisch ein HTMLDokument 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 beispielsweise Börsenkurse oder Wettervorhersagen enthalten soll. 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. Die Möglichkeit, Webseiten dynamisch in Abhängigkeit von Benutzereingaben 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 Webbrowser.11

11

o.V.:http://de.wikipedia.org/wiki/Dynamische_Webseite#Dynamische_Websei ten

Birgit Wolf & Katharina Mazur

Seite 36 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 37 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 38 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 wiedergegeben 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 39 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 40 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 Ă&#x201E;nderungen vornehmen.

Abbildung 18: ankuendigungsliste.php

Birgit Wolf & Katharina Mazur

Seite 41 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 vorhandene Datensätze zu ändern.

Abbildung 20: ank_bearbeiten.php

Birgit Wolf & Katharina Mazur

Seite 42 von 46


Die Seite „loeschen.php“ ermöglicht es, Datensätze unwiderruflich 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 43 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 termingerecht 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 Programmiersprachen 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 44 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 45 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

Birgit Wolf & Katharina Mazur

Seite 46 von 46


Redesign der Homepage "Pfarrgemeinde Schwadorf"  

Fachspezifische Themenstellung in ICS aus dem Schuljahr 2012/13

Advertisement
Read more
Read more
Similar to
Popular now
Just for you