Fachspezifische Themenstellung

Miriam Emich und JessicaKrikler

Quartett der Zentralmusikschule Neusiedl am See

Fachspezifische Themenstellung Information & Communication Solutions 2012

Miriam Emich & Jessica Krikler Seite 2 von 45

Auftraggeber:

Quartett der Zentralmusikschule Neusiedl am See

Projektleiterin:

Miriam Emich

Projektteammitglied:

Jessica Krikler

Schuljahr:

2011/2012, Pannoneum Neusiedl am See


I N H A L T S V E R Z E I C H N I S

1. Abbildungsverzeichnis ........................................................................ 5

2. Vorwort ............................................................................................... 7

3. Preface ............................................................................................... 8

4. Projektmanagement ............................................................................ 9

4.1. Projektmanagementprozess ......................................................... 9

4.2. Begriffsdefinition „Projekt“ ............................................................. 9

4.3. Projektplanung ............................................................................ 11

4.4. Projektabschluss ......................................................................... 20

5. Grundlagen ....................................................................................... 22

5.1. HTML – Hypertext Makeup Language ........................................ 22

5.2. PHP ............................................................................................ 23

5.3. MySQL ........................................................................................ 24

5.4. CSS – Cascarding Style Sheets ................................................. 24

5.5. Java Script .................................................................................. 25

6. Verwendete Programme ................................................................... 26

6.1. Adobe Photoshop ....................................................................... 26

6.2. Notepad ++ ................................................................................. 27

6.3. WebFTP ...................................................................................... 28

6.4. GIMP........................................................................................... 29

6.5. php-MyAdmin .............................................................................. 30

6.6. Audacity ...................................................................................... 31

7. Aufbau unserer Website ................................................................... 32

7.1. Template ..................................................................................... 32

7.2. Kopf- und Fußbereich ................................................................. 33


7.3. Home .......................................................................................... 34

7.4. Über uns ..................................................................................... 35

7.5. Mitglieder .................................................................................... 36

7.6. Bildergalerie ................................................................................ 37

7.7. Kontakt ........................................................................................ 38

7.8. Impressum .................................................................................. 39

7.9. Termine ....................................................................................... 39

7.10. Backend-Bereich ..................................................................... 40

7.11. Ausloggen................................................................................ 43

8. Nachwort ........................................................................................... 44

9. Literaturverzeichnis ........................................................................... 45


1 . A B B I L D U N G S V E R Z E I C H N I S

Abbildung 1: Projektstrukturplan .............................................................. 12

Abbildung 2: Logo von Notre Quatre ........................................................ 19

Abbildung 3: HTML .................................................................................. 22

Abbildung 4: Grundstruktur von einem HTML-Dokument ........................ 22

Abbildung 5: einfaches PHP-Skript .......................................................... 23

Abbildung 6: MySQL ................................................................................ 24

Abbildung 7: CSS ..................................................................................... 24

Abbildung 8: JavaScript ........................................................................... 25

Abbildung 9: Logo Photoshop ................................................................. 26

Abbildung 10: Adobe Photoshop.............................................................. 26

Abbildung 11: Logo Notepad++ ............................................................... 27

Abbildung 12: Notepad++ ........................................................................ 27

Abbildung 13: Logo WebFTP ................................................................... 28

Abbildung 14: WebFTP Loginfenster ....................................................... 28

Abbildung 15: GIMP Programmübersicht ................................................. 29

Abbildung 16: Logo GIMP ........................................................................ 29

Abbildung 17: Logo phpMyAdmin ............................................................ 30

Abbildung 18: phpMyAdmin Loginfenster ................................................ 30

Abbildung 19: Logo Audacity ................................................................... 31

Abbildung 20: Audacity Programmübersicht ............................................ 31

Abbildung 21: Template Combination ...................................................... 32

Abbildung 23: Fußbereich ........................................................................ 33

Abbildung 22: Kopfbereich ....................................................................... 33

Abbildung 24: Startseite ........................................................................... 34

Abbildung 25: Seite "Über uns" ................................................................ 35

Abbildung 26: Seite "Mitglieder" ............................................................... 36

Abbildung 27: Steckbrief von Gloria Gasser ............................................ 36

Abbildung 28: Bildergalerie ...................................................................... 37

Abbildung 29: Album Fotoshooting .......................................................... 37

Abbildung 30: Bild in Großformat ............................................................. 38


Abbildung 31: Seite "Kontakt" .................................................................. 38

Abbildung 32: Seite "Impressum" ............................................................. 39

Abbildung 33: Seite "Termine" ................................................................. 39

Abbildung 35: check.php .......................................................................... 40

Abbildung 34: Loginbereich ..................................................................... 40

Abbildung 37: Datenbankanbindung ........................................................ 41

Abbildung 36: Backend-Bereich ............................................................... 41

Abbildung 38: while-Schleife .................................................................... 42

Abbildung 39: Formular "Termin bearbeiten" ........................................... 42

Abbildung 40: Formular "Termin hinzufügen" ........................................... 42

Abbildung 41: Backend schützen ............................................................. 43

Abbildung 42: ausloggen.php .................................................................. 43


2 . V O R W O R T

Im Zuge unseres Ausbildungsschwerpunktes Information und

Communication Solutions erarbeiteten wir eine Website für das Quartett

der Zentralmusikschule Neusiedl am See.

Wir haben unsere Website mittels HTML-Editor entworfen und an unser

Corporate Design angepasst.

Unser Ziel war es eine benutzerfreundliche Homepage zu entwickeln, in

der Termine und aktuelle Informationen gut ersichtlich sind und Interes-

senten Kontakt mit dem Quartett aufnehmen können.

Wir haben darauf geachtet die Wünsche des Auftraggebers so gut wie

möglich zu berücksichtigen.

Mit der Hilfe unseres Professors, Mag. Heinz Wurzinger, haben wir ein

informationsreiches und anwendungstaugliches Internetportal geschaffen.


3 . P R E F A C E

In the course of our subject Information and Communication Solutions we

created a website for the quartet of the local music school “ZMS Neusiedl

am See”.

We constructed it with the aid of an HTML-editor and we fit it to our corpo-

rate design.

Our aim was to create a user-friendly website where interested persons

find current information about the quartet. Furthermore people should

have the possibilities to get to know the quartet and to contact them.

We tried to work closely with the quartet.

With the help of our teacher Mag. Heinz Wurzinger we managed to design

a well-structured and modern website.


4 . P R O J E K T M A N A G E M E N T1

Unter dem Begriff Projektmanagement versteht man die Planung, Kontrol-

le, Steuerung und Organisation von Projekten.

4.1. Projektmanagementprozess

Dieser Prozess setzt sich zusammen aus

dem Projektstart,

der Projektdurchführung,

dem Projektmarketing,

dem Projektcontrolling und

dem Projektabschluss.

4.2. Begriffsdefinition „Projekt“

Projekte sind einmalige Vorhaben, die zeitlich, sachlich und sozial abge-

grenzt sind und ein konkretes Ziel verfolgen.

4.2.1. Ist-Situation / Projektantrag

Das Quartett der Zentralmusikschule Neusiedl am See wurde erst im Jahr

2010 ins Leben gerufen. Es ist noch keine Website vorhanden und die

Quartettmitglieder haben keine genauen Vorstellungen bezüglich des

Corporate Designs.

4.2.2. Zeitliche Abgrenzung

Projektstart: Donnerstag, 15. September 2011

Projektende: Freitag, 30. März 2012

1 AINF Skriptum, PDF-Datei, Mag. Heinz Wurzinger


4.2.3. Sachliche Abgrenzung

Ziele:

Logo mit Wiedererkennungswert entwerfen

passendes Template wählen

informative Website gestalten

übersichtliche Gliederung bieten

aktuelle Informationen liefern

Bildergalerie und Hörbeispiel erstellen

Informationen über die Mitglieder sind vorhanden

Nichtziele:

Website funktioniert nicht

falsche Informationen bereitstellen

Auftraggeber ist unzufrieden

Website wird nicht verwendet

4.2.4. Soziale Abgrenzung

Auftraggeber: Quartett der Zentralmusikschule Neusiedl am See

Projektleiterin: Miriam Emich

Teammitglied: Jessica Krikler


4.3. Projektplanung2

Die zweite der vier Hauptphasen eines Projektes ist die Projektplanung.

Während dieser Phase bereitet man die eigentliche Projektdurchführung

so gut wie möglich vor.

4.3.1. Projektstrukturplan

Der Projektstrukturplan dient als grobe Übersicht über das Projekt. Man

erkennt auf einen Blick, die gegliederten Meilensteine mit den zugehörigen

Arbeitspakten.

4.3.1.1. Meilensteine

Die Meilensteine sind meistens an die Fertigstellung eines bedeutenden

Projektergebnisses gebunden. Sie sind wichtige Zwischenziele, die si-

cherstellen, dass das Projekt auf dem richtigen Kurs ist. Projektstart und

Projektende sind immer Meilensteine. Sechs bis sieben Zwischenziele pro

Projekt reichen aus.

4.3.1.2. Arbeitspakete

Die Arbeitspakete sind genaue Tätigkeitsbeschreibungen und der Inhalt,

das Ziel und das Nichtziel werden festgelegt. Bei den Arbeitspaketen soll-

te man darauf achten, dass sie nicht zu umfangreich sind.

2 o.V.: http://de.wikipedia.org/wiki/Projektplanung


Abbildung 1: Projektstrukturplan


Meilenstein 1: Konzept erstellt

Arbeitspaket 1.1.: Idee besprechen

Ziel: durchführbares und interessantes Thema finden

Nichtziel: kein Auftraggeber

Beginn: 8.9.2011

Ende: 15.9.2011

benötigte Ressourcen: Laptop, Internetzugang

Verantwortliche: Miriam Emich, Jessica Krikler

Arbeitspaket 1.2.: Corporate Design erstellen

Ziel: einheitliches und schönes Design anfertigen

Nichtziel: grelle Farben, zu viele verschiedene Schriften und Auftraggeber

ist unzufrieden

Beginn: 22.9.2011

Ende: 22.9.2011

benötigte Ressourcen: Laptop, Software, Zeit


Meilenstein 2: Entwurf erstellt

Arbeitspaket 2.1.: Logo erstellen

Ziel: ein zum Thema passendes Logo kreieren

Nichtziel: ein bereits vorhandenes Logo übernehmen

Beginn: 29.9.2011

Ende: 13.10.2011

benötigte Ressourcen: Laptop, Adobe Photoshop, Internet

Verantwortliche: Jessica Krikler

Arbeitspaket 2.2.: Template auswählen

Ziel: ein gratis Template finden

Nichtziel: Template selbst erstellen

Beginn: 6.10.11


Ende: 13.10.2011



Arbeitspaket 2.3.: Template anpassen

Ziel: Template erfolgreich an unser Corporate Design anpassen

Nichtziel: nicht funktionierendes Template

Beginn: 13.10.2011

Ende: 3.11.2011

benötigte Ressourcen: Laptop, HTML-Editor, Internetzugang


Arbeitspaket 2.4.: Websiteentwurf erstellen

Ziel: Website ist soweit fertig, dass nur noch die Inhalte eingebunden

werden müssen

Nichtziel: Website ist unübersichtlich aufgebaut

Beginn: 10.11.2011

Ende: 22.12.2011



Meilenstein 3: Unterlagen gesammelt

Arbeitspaket 3.1.: Entstehungsgeschichte verfassen

Ziel: verständlichen Text schreiben

Nichtziel: Text aus dem Internet kopieren

Beginn: 10.11.2011

Ende: 22.12.2011

benötigte Ressourcen: Laptop, Software

Verantwortliche: Miriam Emich


Arbeitspaket 3.2.: Steckbriefe organisieren

Ziel: kurze und informative Steckbriefe von den Mitgliedern organisieren

Nichtziel: vollständiger Lebenslauf von den Mitgliedern

Beginn: 10.11.2011

Ende: 10.02.2012

benötigte Ressourcen: Laptop, Software, Internetzugang


Arbeitspaket 3.3.: Hörbeispiel organisieren

Ziel: gut verständliches Hörbeispiel bekommen

Nichtziel: Hörbeispiel von einem fremden Quartett verwenden

Beginn: 10.11.2011

Ende: 10.02.2012

benötigte Ressourcen: Laptop, Audacity


Arbeitspaket 3.4.: Fotos machen

Ziel: schöne und professionelle Fotos machen lassen

Nichtziel: selber Fotos mit der Digitalkamera machen

Beginn: 10.11.2011

Ende: 10.02.2012

benötigte Ressourcen: Fotografen


Arbeitspaket 3.5.: Fotos bearbeiten

Ziel: Fotos richtig zuschneiden und komprimieren

Nichtziel: unscharfe Fotos

Beginn: 10.11.2011

Ende: 10.02.2012

benötigte Ressourcen: Laptop, GIMP



Meilenstein 4: Inhalte eingebunden

Arbeitspaket 4.1.: Bildergalerie erstellen

Ziel: passende Bildergalerie finden

Nichtziel: Bilder brauchen zu lange zum Laden

Beginn: 10.02.2012

Ende: 08.03.2012



Arbeitspaket 4.2.: Hörbeispiel einbinden

Ziel: Interessenten einen ersten Eindruck vermitteln

Nichtziel: keinen funktionierenden Player finden

Beginn: 10.02.2012

Ende: 08.03.2012



Arbeitspaket 4.3.: Texte einbinden

Ziel: Texte werden übersichtlich dargestellt

Nichtziel: Rechtschreibfehler sind vorhanden

Beginn: 10.02.2012

Ende: 08.03.2012

benötigte Ressourcen: Laptop, HTML-Editor, MySQL Verbindung, Inter-

netzugang


Meilenstein 5: Website getestet

Arbeitspaket 5.1.: Website präsentieren

Ziel: Auftraggeber ist zufrieden

Nichtziel: unvollständige Website wird präsentiert

Beginn: 15.03.2012


Ende: 15.03.2012



Arbeitspaket 5.2.: Website überarbeiten

Ziel: Änderungsvorschläge umsetzen

Nichtziel: Fehler können nicht behoben werden

Beginn: 15.03.2012

Ende: 22.03.2012


netzugang


Arbeitspaket 5.3.: Website fertiggestellt

Ziel: Website ist fertig und funktioniert

Nichtziel: Auftraggeber ist unzufrieden

Beginn: 22.03.2012

Ende: 30.03.2012


netzugang


Meilenstein 6: Website veröffentlicht

Arbeitspaket 6.1.: Domainnamen aussuchen

Ziel: gewünschter Domainname ist noch vorhanden

Nichtziel: Website weiterhin mit einer Subdomain von der Schule

ansurfen

Beginn: 22.03.2012

Ende: 30.03.2012




Arbeitspaket 6.1.: Website veröffentlichen

Ziel: Website erfüllt ihren Nutzen

Nichtziel: Website ist unvollständig und funktioniert nicht

Beginn: 30.03.2010

Ende: 31.03.2012




4.3.2. Corporate Design

Zielgruppe:

regional

Jugendliche und Erwachsene, die sich für

klassische Musik interessieren

Logo:

Notenschlüssel mit Violine vereinen

Name vom Quartett klar ersichtlich

Schriftarten:

Arial, Helvetica

keine Serifenschrift

Zeilenabstand

Form:

übersichtlich gestaltet

mindestens 1 Bild pro Seite

modern

Farben:

HTML-Notationen: 458d1f

RGB: 69/141/31

CMYK: 80/22/100/9

HTML-Notationen: 2c2723

RGB: 44/39/35

CMYK: 73/59/63/65

HTML-Notationen: b5d252

RGB: 181/210/82

CMYK: 40/3/78/0

HTML-Notationen: 5c4f46

RGB: 92/79/70

CMYK: 60/54/59/36

Abbildung 2: Logo von Notre Quatre


4.4. Projektabschluss3

Der Projektabschluss ist die letzte der vier Hauptprojektphasen eines Pro-

jektes und umfasst 3 Schritte:

Produktabnahme,

Projektabschlussanalyse und

Projektauflösung.

4.4.1. Produktabnahme

Die Produktabnahme leitet den Projektabschluss ein und die Übergabe an

den Projektauftraggeber findet statt. Außerdem sollte die zukünftige Be-

treuung der Website besprochen werden.

4.4.2. Projektabschlussanalyse

In der Projektabschlussanalyse wird eine Nachkalkulation durchgeführt.

Abweichungen bezüglich Soll- und Ist-Terminen werden sichtbar.

Meilenstein SOLL-Termin IST-Termin

1. Konzept erstellt 22.09.2011 22.09.2011

2. Entwurf erstellt 03.11.2011 22.12.2011

3. Unterlagen gesammelt 22.12.2011 10.02.2012

4. Inhalte eingebunden 26.01.2012 08.03.2012

5. Website getestet 23.03.2012 23.03.2012

6. Website veröffentlicht 30.03.2012 30.03.2012

3 o.V.: http://de.wikipedia.org/wiki/Projektabschluss


4.4.3. Projektauflösung

Die Projektauflösung ist der allerletzte Schritt im Projektmanagement. Es

ist wichtig, dass jedes Projekt einen klar definierten Anfang und ein ein-

deutiges Ende hat.


5 . G R U N D L A G E N

5.1. HTML – Hypertext Makeup Language4

5.1.1. Definition:

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

nem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhal-

ten einer Webseite enthält HTML zusätzliche Angaben in Form von Meta-

informationen.

5.1.2. Struktur:

Ein HTML-Dokument besteht aus drei Bereichen:

der Dokumenttypdeklaration (Doctype) ganz am Anfang der Datei,

die die verwendete Dokumenttypdefinition angibt

dem HTML-Kopf (HEAD), der hauptsächlich technische oder doku-

mentarische Informationen enthält

dem HTML-Körper (BODY), der die anzuzeigenden Informationen

enthält

4 o.V.: http://de.wikipedia.org/wiki/Hypertext_Markup_Language

Abbildung 3: HTML

Abbildung 4: Grundstruktur von einem HTML-Dokument

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

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


5.2. PHP

PHP wurde 1995 von Rasmus Lerdorf entwickelt und stand damals für

Personal Home Page Tools. Heute wird PHP mit Hypertext Preprocessor

übersetzt. PHP ist eine Skriptsprache die hauptsächlich zur Erstellung von

dynamischen Webseiten und Webanwendungen verwendet wird. PHP

wird als freie Software unter der PHP-Lizenz verbreitet. PHP zeichnet sich

durch die breite Datenbankunterstützung und Internet-Protokolleinbindung

sowie die Verfügbarkeit zahlreicher Funktionsbibliotheken aus.

PHP wird auf ca. 75 % aller Websites als serverseitige Programmierspra-

che eingesetzt und ist damit die am häufigsten verwendete Sprache beim

Erstellen von Websites

5.2.1. Funktionsweise

Abbildung 5: einfaches PHP-Skript


5.3. MySQL

5.3.1. Definition:

MySQL wurde seit 1994 vom schwedischen Unternehmen MySQL AB

entwickelt und ist das populärste Open-Source5-

Datenbankverwaltungssystem der Welt. SQL steht für Structured Query

Language6. Ein bevorzugtes Einsatzgebiet von MySQL ist die Datenspei-

cherung für Webservices.

5.4. CSS – Cascarding Style Sheets

CSS ist eine Sprache zur Definition einzelner Formateigenschaften und

wird häufig zusammen mit HTML oder XML eingesetzt. CSS gilt als Stan-

dardschriftsprache für Webseiten.

Mit Hilfe von CSS lassen sich nicht nur Farben und Schriften definieren,

sondern auch einzelne Bilder positionieren. Man kann in einer CSS-Datei

alle Angaben zur Formatierung machen und danach in jeder Webseite

einen Verweis auf die CSS-Datei erstellen. Die festgelegten Formatierun-

gen werden für alle Webseiten übernommen und bei gewünschten Ände-

rungen braucht man diese nur in der CSS-Datei vorzunehmen.

5 Software, deren Quelltext öffentlich zugänglich ist und dadurch jeder an der Software

weiterprogrammieren kann 6 strukturierte Abfragesprache

Abbildung 6: MySQL

Abbildung 7: CSS

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


5.5. Java Script

JavaScript ist eine Programmiersprache die zur

Optimierung von Webseiten dient. JavaScripts werden entweder direkt in

ein HTML-Dokument oder in eine separate Datei geschrieben. JavaScripts

werden hauptsächlich für das DOM-Scripting7 auf Webseiten eingesetzt.

5.5.1. Typische Anwendungsgebiete von JavaScript sind:

Senden und Empfangen von Daten, ohne dass der Browser die

Seite neu laden muss

sofortiges Vorschlagen von Suchbegriffen

Banner oder Laufschriften

Verschleierung von E-Mail-Adressen zur Bekämpfung von Spam

Bildergalerien

7 bezeichnet bestimme Webdesigne-Methoden, bei denen während der Anzeige einer

Webseite diese selbst, ausgelöst durch Benutzereingaben, verändert wird

Abbildung 8: JavaScript

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

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

http://de.wikipedia.org/wiki/E-Mail-Adresse

http://de.wikipedia.org/wiki/Spam#Verschleierung_von_E-Mail-Adressen


6 . V E R W E N D E T E P R O G R A M M E

6.1. Adobe Photoshop

ist ein kommerzielles Bildbearbeitungsprogramm des US-

amerikanischen Softwarehauses Adobe Systems

ist im Bereich der professionellen Bildbearbeitung Marktführer

ist Teil der Adobe Creative Suite, einer Sammlung von Grafik- und

Designprogrammen, und wie die meisten anderen Adobe-

Anwendungen für die Betriebssysteme Mac OS und Microsoft Win-

dows verfügbar

Abbildung 9: Logo Photoshop

Abbildung 10: Adobe Photoshop

http://de.wikipedia.org/wiki/Grafiksoftware#Bildbearbeitungsprogramme

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

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

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

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

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

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

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


6.2. Notepad ++8

Notepad ist ein freier Texteditor für Windows und kompatible Betriebssys-

teme. Es basiert auf Scintilla9 und ist in der Programmiersprache C++10

geschrieben. Neben einfachen Textdateien können auch Quelltexte bear-

beitet werden.

8 Vgl. Don Ho, 2011, http://notepad-plus-plus.org/

9 ist eine Open-Source-Editor-Komponente

10

steht für eine höhere Programmiersprache

Abbildung 11: Logo Notepad++

Abbildung 12: Notepad++

http://notepad-plus-plus.org/


6.3. WebFTP

ist ein von einem FTP-Server angebotener Dienst, der den Zugriff

auf einen Webserver mittels eines Webbrowsers ermöglicht

wird zum selben Zweck angeboten wie ein FTP-Client: nämlich um

auf einen entfernten Datei-Server u.a. Dateien hochzuladen bzw.

von dort herunterzuladen, um Dateien zu löschen, umzubenennen

oder auch um Unterverzeichnisse zu erzeugen und zwischen sol-

chen Verzeichnissen hin- und herzuwechseln

erspart dem Anwender allerdings die Einarbeitung in die Verwen-

dung eines FTP-Clients, insbesondere muss eine derartige Soft-

ware-Anwendung nicht auf dem lokalen Rechner installiert sein

Abbildung 13: Logo WebFTP

Abbildung 14: WebFTP Loginfenster


6.4. GIMP

heißt GNU Image Manipulation Program

ist ein kostenloses und freies Bildbearbeitungsprogramm

der Schwerpunkt der Software ist die intensive Bearbeitung einzel-

ner Bilder, wofür vielfältige Effekte zur Verfügung stehen

Abbildung 16: Logo GIMP

Abbildung 15: GIMP Programmübersicht


6.5. php-MyAdmin

ist eine freie PHP-Applikation zur Administration von MySQL-

Datenbanken

es können auch Datenbanken auf fremden Rechnern über eine

Netzwerkverbindung oder über das Internet administriert werden

für die Nutzung des Programms sind keine Kenntnisse in SQL11

notwendig

11

ist eine Datensprache zur Definition von Datenstrukturen in relationalen Datenbanken sowie zum Bearbeiten und Abfragen von darauf basierenden Datenbeständen

Abbildung 17: Logo phpMyAdmin

Abbildung 18: phpMyAdmin Loginfenster


6.6. Audacity

ist ein freier Audioeditor und -rekorder

es können auf beliebig vielen Spuren Audiodateien gemischt und

bearbeitet werden

wurde in C++ programmiert und nutzt die wxWidgets-Bibliothek12,

um auf verschiedenen Betriebssystemen die gleiche grafische Be-

nutzeroberfläche zur Verfügung zu stellen

12

ist eine quelloffene Klassenbibliothek zur Entwicklung graphischer Benutzeroberflä-chen

Abbildung 19: Logo Audacity

Abbildung 20: Audacity Programmübersicht


7 . A U F B A U U N S E R E R W E B S I T E

7.1. Template

Nach dem Erstellen unseres Konzepts machten wir uns auf die Suche

nach einem passenden Template. Wir entschieden uns für das Template

„Combination“, da es am besten zu unseren Vorstellungen passte.

Abbildung 21: Template Combination


7.2. Kopf- und Fußbereich

Diese zwei Bereiche sind auf unseren Webseiten gleich. Das Logo dient

nicht nur zur Wiedererkennung, sondern kann auch als Home-Button ver-

wendet werden.

Der Footer enthält die Links um zur „Login“-Seite, zur „Impressum“-Seite

und zur „Kontakt“-Seite zu gelangen.

Abbildung 23: Fußbereich

Abbildung 22: Kopfbereich


7.3. Home

Als Startseite entschieden wir uns eine „Home“-Seite zu gestalten. Sie

enthält nicht nur kurze Informationsberichte, sondern auch ein Hörbeispiel

und ein Gruppenfoto.

Abbildung 24: Startseite


7.4. Über uns

Diese Seite enthält eine allgemeine Definition, was man unter einem

Quartett versteht und die Entstehungsgeschichte von Notre Quatre.

Um die Seite ansprechender zu gestalten haben wir ein Foto von den Mu-

sikerinnen eingebunden.

Abbildung 25: Seite "Über uns"


7.5. Mitglieder

Natürlich sollte unsere Website auch Informationen zu den Musikern ent-

halten. Deshalb haben wir eine eigene Seite „Mitglieder“ erstellt.

Durch einen Klick auf ein Foto erhält man nähere Angaben über das Mit-

glied.

Abbildung 26: Seite "Mitglieder"

Abbildung 27: Steckbrief von Gloria Gasser


7.6. Bildergalerie

Um die Bildergalerie übersichtlicher zu gestalten, haben wir sie in 2 Berei-

che gegliedert. Der 1. Bereich enthält alle vorhandenen Alben.

Mit einem Klick auf das gewünschte Album gelangt man in den 2. Bereich

von unserer Bildergalerie. Dieser weist alle Fotos auf, die im Album enthal-

ten sind.

Abbildung 28: Bildergalerie

Abbildung 29: Album Fotoshooting


Man hat auch die Möglichkeit die Bilder bzw. das gewünschte Bild im

Großformat zu betrachten.

7.7. Kontakt

Auf unserer „Kontakt“-Seite haben wir sowohl die Kontaktperson als auch

alternative Kontakt- und Informationsmöglichkeiten angegeben. Außerdem

haben wir auf der beliebten Social Network Seite „Facebook“ eine Gruppe

für das Quartett erstellt.

Abbildung 30: Bild in Großformat

Abbildung 31: Seite "Kontakt"


7.8. Impressum

Damit unsere Website auch rechtlich abgesichert ist, haben wir eine „Im-

pressum“-Seite erstellt.

7.9. Termine

Die aktuellen Termine werden auf der „Home“-Seite ausgeben. Um einen

Gesamtüberblick über die Auftritte von Notre Quatre zu erhalten, gelangt

man mittels Link auf die Seite „Termine für 2012“.

Abbildung 32: Seite "Impressum"

Abbildung 33: Seite "Termine"


7.10. Backend-Bereich

Um in den Backend-Bereich zu gelangen, muss man sich zuerst anmel-

den.

Hier werden der Benutzername und das Passwort überprüft.

Abbildung 35: check.php

Wenn die Eingabe richtig

war, dann gelangt man in

den Backend-Bereich.

Bei einer falschen Einga-

be wird man wieder zur

„Login“-Seite geschickt.

Abbildung 34: Loginbereich


Nach der korrekten Eingabe erreicht man den Backend-Bereich. In diesem

Bereich sind alle Termine aufgelistet. Man hat die Möglichkeit einen Ter-

min zu bearbeiten, zu löschen und einen neuen Termin hinzuzufügen.

Die Informationen werden aus der Datenbank „d00a0f20“ und der Tabelle

„termine“ ausgelesen. Die Datenbankanbindung ist auf allen Seiten gleich,

nur der SQL-Befehl variiert.

Abbildung 37: Datenbankanbindung

Abbildung 36: Backend-Bereich


Damit alle Termine aufscheinen, verwendet man eine while-Schleife, in

der die Ausgabe der Datenbankeinträge erfolgt.

Um einen neuen Termin hinzufügen oder einen vorhanden Termin bear-

beiten zu können, haben wir ein Formular erstellt.

Abbildung 38: while-Schleife

Abbildung 40: Formular "Termin hinzu-fügen"

Abbildung 39: Formular "Termin bearbei-ten"


Um sicher gehen zu können, dass nur Personen, die den Benutzernamen

und das Passwort kennen, in den Backend-Bereich gelangen, muss man

alle Backend-Dateien schützen. Es ist wichtig, dass der Befehl ganz am

Anfang jeder Datei steht, noch bevor der Dokumententyp bestimmt wird.

7.11. Ausloggen

Beim Ausloggen wird die aktive Session zerstört und man wird auf die

„Login“-Seite weitergeleitet.

Abbildung 41: Backend schützen

Abbildung 42: ausloggen.php


8 . N A C H W O R T

Zu Beginn unseres Projektes war es schwierig einen Auftraggeber zu fin-

den, da heutzutage schon fast jeder eine eigene Website besitzt.

Wir waren sehr dankbar über den Auftrag des Quartettes der Zentralmu-

sikschule Neusiedl am See und über das Vertrauen, dass sie uns schenk-

ten.

Wir haben uns für einen HTML-Editor entschieden, da wir damit schon im

Unterricht gearbeitet haben. Trotzdem tauchten ab und zu kleinere Prob-

leme auf, die wir aber mit der Hilfe unserer Professoren meisterten.

Bei der Realisierung unsers Projektes konnten wir unser bisheriges Wis-

sen anwenden und neue Kenntnisse sammeln.

Abschließend können wir sagen, dass wir stolz sind, nach monatelanger

Arbeit unserem Auftraggeber eine moderne und funktionsfähige Website

präsentieren zu können.


9 . L I T E R A T U R V E R Z E I C H N I S

4. Projektmanagement

AINF Skriptum, PDF-Datei, Mag. Heinz Wurzinger

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

Projektplanung, Wikipedia vom 13. Februar 2012

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

Projektabschluss, Wikipedia vom 11. Oktober 2011

5. Grundlagen

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

HTML, Wikipedia vom 14. März 2012

6. Verwendete Programme

Don Ho, Notepad++/About, 2011


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

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

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


Fachspezifische Themenstellung

Documents

Transcript of Fachspezifische Themenstellung