Home >Documents >Redesign der Homepage "Pfarrgemeinde Schwadorf"

Redesign der Homepage "Pfarrgemeinde Schwadorf"

Date post:01-Mar-2016
Category:
View:219 times
Download:0 times
Share this document with a friend
Description:
Fachspezifische Themenstellung in ICS aus dem Schuljahr 2012/13
Transcript:
  • 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 Seitenbersicht ................................................ 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 Grundgerst .................................................... 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 dafr 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 Ablufe

    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 Menfhrung

    einhalten der Meilensteinliste

    einhalten des Zeitplans

    bersichtliche Struktur der Website

    dynamische Elemente mit einer Datenbankanbindung

    3.3.2 Nichtziele

    unbersichtliche 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 verffentlicht

  • Birgit Wolf & Katharina Mazur Seite 7 von 46

    3.4.2 Arbeitspakete

    3.4.2.1 Meilenstein 1: Konzept erstellen

    Arbeitspaket: 1.1 Projektantrag

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: Go-Entscheidung des Auftraggebers

    Nichtziele: Auftraggeber verweigert Go-Entscheidung

    Start: 21. September 2012

    Ende: 24. September 2012

    Bentigte Ressourcen: Laptop, Internet

    Arbeitspaket: 1.2 Ideen sammeln

    Zustndige: 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

    Bentigte Ressourcen: Laptop, Internet, Zeit

  • Birgit Wolf & Katharina Mazur Seite 8 von 46

    Arbeitspaket: 1.3 Projektkoordination

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: Erstellen eines Projektstrukturplans; Ziele und Nichtziele

    fr das gesamte Projekt definiert

    Nichtziele: unbersichtlicher Projektstrukturplan

    Start: 27. September 2012

    Ende: 27. September 2012

    Bentigte Ressourcen: Laptop

    3.4.2.2 Meilenstein 2: Entwurf der Website

    Arbeitspaket: 2.1 Corporate Design festlegen

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: passendes Corporate Design fr die Pfarre finden

    Nichtziele: unangemessenes Layout erstellen

    Start: 11. Oktober 2012

    Ende: 08. November 2012

    Bentigte Ressourcen: Laptop, Internet

  • Birgit Wolf & Katharina Mazur Seite 9 von 46

    Arbeitspaket: 2.2 Template suchen

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: passendes Template fr die Pfarre finden

    Nichtziele: veraltetes Template finden

    Start: 04. Oktober 2012

    Ende: 04. Oktober 2012

    Bentigte Ressourcen: Laptop, Internet

    Arbeitspaket: 2.3 Template bearbeiten

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: Template an das Corporate Design anpassen; Dropdown

    Menleiste in das vorhandene Template einbinden; Startseite

    anpassen; Include-Befehl fr die Menleiste einfgen

    Nichtziele: Template fr den Auftraggebern nicht zufriedenstel-

    lend anpassen

    Start: 11. Oktober 2012

    Ende: 08. November 2012

    Bentigte Ressourcen: Laptop, Internet

  • Birgit Wolf & Katharina Mazur Seite 10 von 46

    3.4.2.3 Meilenstein 3: Seiten erstellen

    Arbeitspaket: 3.1 Seite Home

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: Bildwechsel einfgen; passende berschrift

    Nichtziele: zu viele, verschiedene Farben; zu schneller Bildwech-

    sel

    Start: 11. Oktober 2012

    Ende: 18. Oktober 2012

    Bentigte Ressourcen: Laptop, Internet,

    Arbeitspaket: 3.2 Seite Aktuelles

    Zustndige: 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. Jnner 2013

    Bentigte Ressourcen: Laptop, Internet,

  • Birgit Wolf & Katharina Mazur Seite 11 von 46

    Arbeitspaket: 3.3 Seite ber uns

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: bersichtliche, leicht lesbare Texte verfassen; dazugehri-

    ge Bilder einfgen

    Nichtziele: Rechtschreibfehler in den Texten; zu lange Texte

    Start: 18. Oktober 2012

    Ende: 24. Jnner 2013

    Bentigte Ressourcen: Laptop, Internet,

    Arbeitspaket: 3.4 Seite Bildergalerie

    Zustndige: 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

    Bentigte Ressourcen: Laptop, Internet, Bilder

  • Birgit Wolf & Katharina Mazur Seite 12 von 46

    Arbeitspaket: 3.5 Seite Informationen

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: einfach, verstndliche Texte mit den wichtigsten Informa-

    tionen;

    Nichtziele: Falsche Informationen

    Start: 24. Jnner 2013

    Ende: 24. Jnner 2013

    Bentigte Ressourcen: Laptop; Internet

    3.4.2.4 Meilenstein 4: berarbeitung der Website

    Arbeitspaket: 4.1 Website dem Pfarrgemeinderat prsen-

    tieren

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: Zufriedener Auftraggeber; Die Website soll den Anforde-

    rungen vom Auftraggeber entsprechen

    Nichtziele: Dass die Website ein totales NoGo fr den Pfarrge-

    meinderat ist; Schlechte Prsentation

    Start: 04. Jnner 2013

    Ende: 04. Jnner 2013

    Bentigte Ressourcen: Laptop; Internet; Block; Stift

  • Birgit Wolf & Katharina Mazur Seite 13 von 46

    Arbeitspaket: 4.2 Website berarbeiten

    Zustndige: 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

    Bentigte Ressourcen: Laptop; Internet;

    Arbeitspaket: 4.3 Website fertigstellen

    Zustndige: 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

    Bentigte Ressourcen: Laptop; Internet;

  • Birgit Wolf & Katharina Mazur Seite 14 von 46

    3.4.2.5 Meilenstein 5: Verffentlichen der Website

    Arbeitspaket: 5.1 Bisherige Homepage durch die Neue er-

    setzen

    Zustndige: Katharina Mazur und Birgit Wolf

    Ziele: Website ersetzen und verffentlichen

    Nichtziele: Problem bei der Verffentlichung

    Start: Februar 2013

    Ende: Februar 2013

    Bentigte 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 mssen, 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 fr 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

    prsentieren

    Website berarbeiten

    Website fertigstellen

    Verffentlichen 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 gendert

    berschrift 1 formatiert (zentriert?)

    Vorhandenen Text teilweise gelscht, gekrzt

    Im Unterricht:

    Verffentlichen von Webseiten

    MindMap erstellt

    http://www.freecsstemplates.org/css-templates/
  • Birgit Wolf & Katharina Mazur Seite 17 von 46

    18.10.2012

    ndern der Menleiste

    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 Windelhpfer

    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 Hlfte 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 vorlufigen Text:

    Diese Seite befindet sich in Arbeit!

    20.12.2012

    Plan fr die dynamische Website Ankndigung 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 hinzugefgt:

    Orgel

    24.01.2013

    Restlichen Seiten Informationen

    Dynamische Website

  • Birgit Wolf & Katharina Mazur Seite 19 von 46

    31.01.2013

    Dynamische Website

    o Geschtzt

    06.02.2013

    Bilder zu den jeweiligen Seiten hinzugefgt

    Seite Unsere Pfarrkirche und Alter Pfarrhof erstellt

    Seite Links fertig gestellt

  • Birgit Wolf & Katharina Mazur Seite 20 von 46

    3.5.3 Seitenbersicht

  • 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-Identitt und beinhaltet das gesamte, einheitliche Erschei-

    nungsbild eines Unternehmens oder einer Organisation. Dazu

    gehren vorrangig die Gestaltung der Kommunikationsmittel

    aber auch Geschftspapiere, 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

    Fr die Schriftarten haben wir serifenlose Schriften gewhlt, da

    diese fr 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 whlen, 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 Groteil

    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 Grundgerst5

    Eine gewhnliche HTML-Datei besteht grundstzlich aus folgen-

    den Teilen:

    Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-

    Version)

    Das HTML-Wurzelelement , und darin

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

    Body (Krper - 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:

    Beschreibung der Seite

    4.2 CSS (Cascading Style Sheets)

    CSS ist eine deklarative Sprache fr 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, whrend mittels CSS

    weitgehend unabhngig davon die konkrete Darstellung (Farben,

    Layout, Schrifteigenschaften usw.) der Teile festgelegt wird.

    Elemente eines Dokumentes knnen z. B. aufgrund ihres Ele-

    mentnamens, ihrer ID oder auch aufgrund ihrer Position in die-

    sem Dokument identifiziert werden. Mithilfe von CSS-Regeln

    knnen deshalb fr jedes Element die konkreten Werte fr 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

    Hinweis

    Sie haben sich erfolgreich angemeldet.

    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 plattformunabhngig

    und knnen auf verschiedenen Hardware-Systemen ausgefhrt

    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 fr den Privatge-

    brauch oder Schulen (nichtkommerzielle Nutzung) kostenloses

    Programm zum Erstellen von HTML-Dokumenten unter

    Windows.8

    Es ist einfach zu bedienen und verfgt ber viele Funktionen. Zur

    Bedienung des Programms bentigt man gewisse Vorkenntnisse,

    jedoch gibt es einige gute Seiten im Web, welche einem jederzeit

    weiterhelfen knnen.

    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 fr verschiedene Betriebssysteme verfgbar und

    bildet die Grundlage fr 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

    Datenstze eingefgt:

    Abbildung 6: Tabelle ankuendigung Datenstze

  • Birgit Wolf & Katharina Mazur Seite 31 von 46

    4.6.2 Tabelle kategorie

    Felder erstellt:

    Abbildung 7: Tabelle kategorie Struktur

    Datenstze eingefgt:

    Abbildung 8: Tabelle kategorie Datenstze

  • 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 ermglicht 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 fr die verschiedenen Betriebssysteme, auf

    denen es eingesetzt werden kann.

    XAMPP ist nicht fr den Einsatz als Produktivsystem (z. B. als f-

    fentlicher Webserver) gedacht, sondern fr Entwickler, die mg-

    lichst schnell ein kompaktes Testsystem aufsetzen mchten.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.

    Fr die Bedienung von jAlbum muss man sich lediglich nur mit

    den Grundeinstellungen befassen, zum Beispiel die Bilder aus

    dem gewnschten Ordner auswhlen. Die weiteren Schritte gibt

    das Programm vor.

    Unsere erstellten Alben haben wir per FTP-Programm verffent-

    licht.

    4.8.1 Die Anwendung von jAlbum

    Wenn man mit jAlbum eine Bildergalerie erstellen mchte, muss

    man zunchst ein neues Album erstellen.

    Anschlieend werden Ordner mit

    den gewnschten 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

    Auerdem gibt es die Mglichkeit eines fr

    die Homepage passendes Layout zu wh-

    len.

    Ist man mit dem Erstellen des Albums

    fertig, klickt man zunchst auf Album

    erstellen und anschlieend auf Uplo-

    ad.

    Nach dem Upload unserer Bildergalerie, haben wir diese mit ei-

    nem - Befehl in die Seite akutelle_fotos.php einge-

    bettet.

    Befehl:

    Abbildung 11: Layout whlen

    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

    hufig auch dynamisch oder aktiv im Moment der Anforderung

    erzeugt.

    Das ist dann sinnvoll, wenn eine Webseite sehr aktuelle Informa-

    tionen wie beispielsweise Brsenkurse oder Wettervorhersagen

    enthalten soll.

    In diesem Fall fhrt der Webserver ein Programm aus, das vor-

    her spezifisch fr diese Aufgabe entwickelt wurde.

    Es trgt 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 Mglichkeit, Webseiten dynamisch in Abhngigkeit von Be-

    nutzereingaben und Datenbankinhalten zu generieren, machte

    das Web schnell zu einer universellen Plattform fr viele Arten

    von Anwendungen.

    Die Vorteile liegen in Unabhngigkeit 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

    Windelhpfer

    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

    Dizese

    Ntzliches

  • Birgit Wolf & Katharina Mazur Seite 39 von 46

    6 Backend

    Im Backendbereich sind alle Seiten mit Sessions geschtzt und

    daher nicht direkt zugnglich.

    Hier knnen die Inhalte, welche aus einer Datenbank wiederge-

    geben werden, verndert werden.

    Der Backendbereich bietet die Mglichkeit folgende Dinge zu tun:

    Ankndigungen hinzufgen

    Ankndigungen bearbeiten

    Ankndigungen lschen

    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 geschtzten Backend weitergeleitet.

    In diesem geschtzten 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 mglich, bereits vor-

    handene Datenstze zu ndern.

    Abbildung 20: ank_bearbeiten.php

  • Birgit Wolf & Katharina Mazur Seite 43 von 46

    Die Seite loeschen.php ermglicht es, Datenstze unwiderruf-

    lich zu lschen.

    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, fr 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 fr den weiteren

    Lebensweg gebracht. Wir konnten unsere Teamfhigkeit unter

    Beweis stellen und unsere Fhigkeiten in den Programmierspra-

    chen PHP, HTML und CSS verbessern.

    Mit Untersttzung 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-Grundgerst

    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

    http://de.wikipedia.org/wiki/Projektmanagementhttp://de.wikipedia.org/wiki/Projektstrukturplanhttp://de.wikipedia.org/wiki/Corporate_Designhttp://de.wikipedia.org/wiki/Hypertext_Markup_Languagehttp://de.selfhtml.org/html/allgemein/grundgeruest.htmhttp://de.wikipedia.org/wiki/Cascading_Style_Sheetshttp://www.php-programmierer.de/definition-php/http://de.wikipedia.org/wiki/HTML-Editor_Phase_5http://de.wikipedia.org/wiki/Xampphttp://www.computerbild.de/download/JAlbum-929362.htmlhttp://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 Datenstze ..................... 30

    Abbildung 7: Tabelle kategorie Struktur ................................ 31

    Abbildung 8: Tabelle kategorie Datenstze ............................ 31

    Abbildung 9: XAMPP Control Panel Application ....................... 32

    Abbildung 10: Ordner erstellen ............................................ 33

    Abbildung 11: Layout whlen .............................................. 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

    file:///C:/Users/Birgit/Documents/Schule/5.%20Klasse/ICS/Maturaprojekt/theorie/Fachspezifische%20Themenstellung.docx%23_Toc350419578file:///C:/Users/Birgit/Documents/Schule/5.%20Klasse/ICS/Maturaprojekt/theorie/Fachspezifische%20Themenstellung.docx%23_Toc350419579file:///C:/Users/Birgit/Documents/Schule/5.%20Klasse/ICS/Maturaprojekt/theorie/Fachspezifische%20Themenstellung.docx%23_Toc350419580file:///C:/Users/Birgit/Documents/Schule/5.%20Klasse/ICS/Maturaprojekt/theorie/Fachspezifische%20Themenstellung.docx%23_Toc350419581
of 47/47
Redesign der Homepage „Pfarrgemeinde Schwadorf“ Fachspezifische Themenstellung Information & Communication Solutions Birgit Wolf und Katharina Mazur Pannoneum Neusiedl am See Schuljahr 2012/13
Embed Size (px)
Recommended