Nachlese revitalisiert
Bevor wir das Programm besprechen, hier eine Darstellung des Endergebnisses:
Seit Bestehen dieses Webs versuchen wir, alle Informationen zu den Veranstaltungen auf einer Seite zusammenzufassen, damit man alle Links beisammen hat. Der Tipp dazu kam von Michael. Wie es oft mit ersten Lösungen ist, wurden diese Link-Sammlungen händisch in HTML kodiert. Das Einfügen einer neuen Veranstaltung war sehr mühsam und unübersichtlich und ist daher auch bald dem Zeitdruck zum Opfer gefallen. Damit das in Zukunft nicht mehr so leicht passiert, wurde heute, knapp vor Weihnachten, das Vorhaben umgesetzt und die Nachlese-Seite neu programmiert, eine Art „Selbst-Geschenk“ zur Weihnachtszeit. Es ist jetzt nicht nur ein HTML-Code sondern ein Programm. Die Daten zu den Veranstaltungen und das Programm zu deren Darstellung wurden sauber voneinander getrennt, sodass jetzt das Editieren der Daten zu einem Kinderspiel geworden ist.
Es gibt pro Jahr eine Seite
Die Seite für das kommende Jahr enthält derzeit nur den Titel und den Link zur Anmeldeseite für die kommenden Veranstaltungen und wird nach und nach mit weiteren Links gefüllt werden.
Bei jeder Veranstaltung gibt es ein oder mehrere Symbole, die zu den verfügbaren Unterlagen verzweigen. Eine solche Linksammlung hat folgendes Aussehen (Ausschnitt aus den Veranstaltungen im Jahr 2016):
Die verwendeten Symbole haben folgende Bedeutung:
 |
Anmeldung |
 |
Vorschau |
 |
Nachlese |
 |
Fotos und Unterlagen |
 |
Videos |
 |
YouTube-Videos |
 |
Audio-Files |
Im Grunde genügt diese Information für einen Anwender. Aber die verwendete Methode kann sowohl von Html-Kodierern als auch von WordPress-Benutzern in ähnlichen Situationen vorteilhaft angewendet werden und wird daher an dieser Stelle genauer beschrieben.
Kodierung vor der „Revitalisierung“
Die Veranstaltungsliste mit den Link-Symbolen ist eine HTML-Tabelle und der Kode dazu schaut auszugsweise so aus:
und hier ist dieselbe Seite im Quellkode:
Man sieht, dass hier Links, Bilder und Tabellenelemente wild verschachtelt sind und dass es beim Kopieren einer Tabellenzelle leicht zu einem Durcheinander kommen kann, weil sich der Kode über viele Zeilen erstreckt. Eine eventuelle Layoutänderung muss praktisch in allen Zellen vorgenommen werden, was ziemlich mühsam ist; mit dem WordPress-Editor ist es überhaupt nicht gut machbar. Es war daher wünschenswert, die Daten von der Darstellung zu trennen. Üblicherweise würde man die Daten in eine Datenbank-Tabelle verbannen, da hier aber bei jeder Veranstaltung die Anzahl und Art der Links sehr verschieden sein kann und es auch mehrfache Links gibt, etwa bei mehreren YouTube-Videos, war eine Datenbanktabelle gar nicht so praktisch und war einfacher, diese Tabelle mit einem JavaScript-Programm zeichnen zu lassen und die zugehörigen Daten aus einem JSON-Objekt-Konstrukt zu holen.
JavaScript zeichnet Tabelle
JSON-Datenkopf (JavaScript Object Notation) ist eine sehr einfache und übersichtliche Art, eine Objektdatenbank zu erstellt, die durch ein JavaScript-Programm weiterverarbeitet werden kann.
JSON-Daten (nachlese-2016.js)
Die Daten bestehen aus dem Array Veranstaltungen. Jede Veranstaltung ist ein Objekt mit den Eigenschaften Date, Type. Title, Persons und Links. Links ist wieder ein Array aus Objekten mit den Eigenschaften type und url. Da die Nachlese und die Fotos (…) immer denselben Basis-Url haben, muss hier nur ein Index angegeben werden, der Rest steht in einer Tabelle.
JS-Programm (nachlese.js)
Das JavaScript-Programm besteht aus einigen Templates, die Platzhalter enthalten, zum Beispiel ##Date## und ##Type##. Diese Platzhalter ersetzt das Programm durch die Daten aus der JSON-Tabelle.
Hätte man nur eine Seite mit einer solchen Tabelle, wären die beiden .js-Dateien in dieser einen Seite eingefügt, eingerahmt durch <script>…</script>. Da aber für jedes Jahr eine eigene Seite vorgesehen ist, wurden zwei Dateien hergestellt: eine für die Daten (nachlese-2016.js) und eine für das Programm (nachlese.js), damit man nur eine Version des Programms verwalten muss.
Besonderheiten von WordPress
Eigentlich müsste man diesen Kode, eingerahmt durch <script>…</script> in einer WordPress-Seite einbetten können. Leider ist dem nicht so, denn der Editor scheint sich nicht in allen Fällen um die Wahrung der in den Templates gespeicherten Html-Fragmente zu halten und formt diese Zeilen eigenhändig um. Das schien zwar zunächst ärgerlich zu sein, stellte sich aber im Nachhinein als Vorteil heraus, denn es wurde schließlich nicht der obige Kode eingebettet sondern nur ein Link auf extern gespeicherte .js-Dateien. Wenn sich daher in der Programmdatei nachlese.js etwas ändert, wird nur die extern Skript-Datei geändert werden und diese Änderung wirkt sich in allen Orten der Einbettung aus, was nicht der Fall gewesen wäre, wenn man den Kode direkt in die WordPress-Seite kopiert hätte.
Daher schaut der Inhalt der WordPress-Seite so aus:
Je nachdem, für welches Jahr die Tabelle gezeichnet werden soll, ändert sich nur der Name der Datentabelle.
Links
Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.
Neueste Kommentare