Webseite der Musikhochschule Stuttgart ist online!

Das neue Portal der Musikhochschule Stuttgart wurde in der zum Projektstart aktuellen TYPO3-Version 4.4.4 umgesetzt (mittlerweile aktualisiert auf Version 4.5.6). Da es viele spezielle Anforderungen (wie etwa einen Veranstaltungskalender mit Ticketbestellsystem, ein Empfehlungssystem für einzelne Seiten, ein Personenverzeichnis, einzelne Seitenbereiche mit vom Rest der Seite abweichendem Layout u.v.m.) gab, wurden hier neuartige Technologien zur Programmierung von TYPO3-Extensions - speziell die Fluid Template Engine in Verbindung mit ExtBase, einer TYPO3-Extension, welche die Entwicklung von zukunftsträchtigen Erweiterungen erlaubt, die ohne größeren Aufwand auch in späteren, auf FLOW3 basierten TYPO3-Installationen der Version 5 (Codename "Phoenix") laufen - eingesetzt, um hier effiziente, wartbare Erweiterungen anbieten zu können, welche auch noch nach langer Zeit lauffähig sind.

Im Folgenden eine kleine Auflistung der wichtigsten Kernkomponenten der Webseite, sowie eine kurze Zusammenfassung ihrer Funktionsweise und der Umsetzung:

1. Veranstaltungskalender (eigene TYPO3-Extension):

Der Veranstaltungskalender ist eine wichtige Komponente der Seite. Redakteure können im TYPO3-Backend neue Veranstaltungen eintragen und mit den entsprechenden Details versehen. Die Erweiterung umfasst im Wesentlichen
  • eine Listenansicht mit einer Übersicht der nächsten, anstehenden Veranstaltungen
  • eine Filterfunktion, mit der nach Monat, Jahr oder Kategorie der Veranstaltung gefiltert werden kann
  • eine Vor- und Zurückblätterfunktion, jeweils um einen Monat
  • Detailansichten für die einzelnen Events
  • parameterisierte Bestellfunktion (nur verfügbar bei internen, kostenpflichtigen Veranstaltungen)
  • Veranstaltungen weiterempfehlen: Funktion der separat entwickelten Empfehlungsextension
Der Veranstaltungskalender wurde in einer eigenen Extension mittels Fluid und ExtBase umgesetzt. Sie ist von ihrer Umgebung unabhängig und könnte auch problemlos in anderen TYPO3-Projekten eingesetzt werden (sofern ExtBase und die Fluid Template Engine vorhanden/installiert sind).
Für die integrierte Filterfunktion setzt die Extension auf JavaScript, bzw. im Speziellen auf das JavaScript-Framework jQuery (wie auch weite Teile vom Rest der Seite).

2. Personenverzeichnis (tt_address in Kombination mit wt_directory)

Hier wurde ein umfangreiches Personenverzeichnis erstellt, mit dessen Hilfe alle Personen, die mit der Musikhochschule in Verbindung stehen, verwaltet werden können. 

Das Verzeichnis verwaltet seine Datensätze mit tt_address, wobei die Redakteure für das Anlegen neuer Einträge zuständig sind. Die Ausgabe der Datensätze wird mit einer weiteren Extension, wt_directory, realisiert. Dabei wurden die Templates für die Anzeige erstellt und die Extensions (sowohl tt_address als auch wt_directory!) von werkraum erweitert, um den Anforderungen der Musikhochschule Stuttgart zu entsprechen. Konkret heißt das, dass neue Felder benötigt wurden, um die schulspezifischen Einträge, wie zum Beispiel das Fach, welches unterrichtet wird, angemessen verwalten zu können.

Hier ein kleiner Überblick über die Kernfeatures vom Personenverzeichnis:

  • Filtermaske zum Suchen nach Nachname, Vorname, Funktion, Fach, Kategorie sowie einer alphabetischen Auswahl
  • Suche ohne Seitenreload per JavaScript (wird aktuell nicht genutzt)
  • Listenansicht der gefundenen Einträge mit backendseitig konfigurierbarer Anzeige der Spalten
  • Link der einzelnen Einträge in eine Detailansicht  der jeweiligen Person
  • per JavaScript gesicherte E-Mail Adressen, um vor automatischem Auslesen (Harvesting) und daraus resultierendem Spam zu schützen
  • Verknüpfung der Personendatensätze mit (Audio-) Files/Hörproben

3. Empfehlungssystem für einzelne Seiten der Musikhochschule (Extension entwickelt auf Extbase/Fluid-Basis)

Auf jeder Seite der Musikhochschule sollte es im Footer einen kleinen Button geben, über den man die Seite, auf der man sich gerade befindet, an eine beliebige Person seiner Wahl weiterempfehlen kann. Dazu soll der Benutzer den Button betätigen, woraufhin sich der Hintergrund der Seite (etwa im Lightbox-Stil) verdunkelt und via JavaScript ein Popup auftaucht, welches dem User das Empfehlungsformular präsentiert.
Voreingestellt sind der Titel und die URL, welche mit ein paar individuellen Daten (Name, E-Mail des Absenders sowie eine kurze Nachricht) an den Empfänger versandt werden. Eine Option “Kopie an meine E-Mail Adresse” ist ebenfalls vorhanden.
Für diese Anforderung wurde eine kleine Extension mit ExtBase/Fluid geschrieben, die das Formular sowie Steuerung und Validierung der eingetragenen Daten beinhaltet. Die Logik hinter dem Formular wurde mit dem JavaScript-Framework jQuery (wie sämtliche JavaScript-Anforderungen auf der Seite) umgesetzt.

Kategorien

TYPO3

Das könnte Dich auch interessieren

Hat Dir der Artikel gefallen?

werkraum News