Tutorial - Assoziationen

In diesem Tutorial erfahren Sie, wie Sie mit Assoziationen arbeiten können um Ihre Webseite noch dynamischer zu gestalten.

Einleitung

Assoziationen dienen ähnlich einer Artikelansicht dazu, um abhängig von dem in der Navigation angewählten Menüpunkt einen bestimmten Artikel in einem Bereich der Webseite anzuzeigen. Dieser Artikel ist dabei mit dem Menüpunkt, d.h. der entsprechenden Gruppe oder dem Artikel assoziiert. Diese Assoziationen zwischen Gruppen und Artikeln und dem assoziierten Inhalt können Sie im Backend erstellen.

Achtung:

Um dieses Tutorial verstehen zu können, sollten Sie sich zuerst mit der grundlegenden Funktionsweise von Assoziationen vertraut machen. Diese ist im Artikel zu Assoziationen beschrieben.

Code-Beispiel

Im Rahmen dieses Tutorials bieten wir ein Code-Beispiel an. Dieses Frontend bietet eine einfache Webseite mit einer dynamischen Navigation, Inhaltsansichten und einem Bereich in dem assoziierte Inhalte angezeigt werden.

Download: Tutorial Assoziationen.zip

Bemerkung:

Damit das Code-Beispiel bei Ihnen läuft, müssen Sie am Anfang der Datei index.php noch die ID des Artikels angeben, der die dynamische Navigation enthält. Wie Sie eine dynamische Navigation erstellen, erfahren Sie in der Beschreibung zur Einbindung von Modulen und dem Artikel Implementation eines kompletten Hauptmenüs.

Das Frontend

Um Assoziationen verwenden zu können, benötigen wir ein dynamisches Navigationsmenü und einen Bereich, in dem der assoziierte Inhalt angezeigt werden kann. Zu Demonstrationszwecken wurde dem Beispiel-Code zusätzlich eine Gruppenliste, Artikelliste und Artikel-Detailansicht hinzugefügt. Der mit einer Gruppe oder einem Artikel assoziierte Inhalt wird der Übersichtlichkeit und Einfachheit halber in einer Box mit einem schwarzen Rahmen angezeigt.

Zur Darstellung des assoziierten Inhalts wird das folgende Snippet verwendet:

<div class="association">
<?php
  $DynPG->setupTemplate('associations');
  $DynPG->SetParam_AA_Associations(Array("Assoziation"));
  $DynPG->SetParam_AA_fullLoadText(true);
  $DynPG->Write_AllArticles();
  $DynPG->setupTemplate('default');
?>
</div>

• Zeile 1: hier wird das Template zur Darstellung von Assoziationen geladen.
• Zeile 2: hier wird der Name der Assoziation, so wie sie im Backend erstellt wurde, als String-Parameter übergeben.
• Zeile 3: legt fest, dass der gesamte Artikeltext angezeigt werden soll.
• Zeile 4: dadurch wird der assoziierte Inhalt ausgegeben.
• Zeile 5: setzt das Template zurück auf das Standard-Template.

Assoziationen erstellen

Assoziationen können Sie auf einfache Weise im Backend erstellen. In der Gruppenübersicht des Backends finden Sie für jede Gruppe und jeden Artikel einen Link zur Erstellung einer neuen Assoziation. Die im Beispiel verwendete Assoziation hat den Namen "Assoziation" und sollte bei jeder Assoziation angegeben werden, wenn Sie den Beispiel-Code verwenden.

Falls noch nicht geschehen, erstellen sie nun einige Gruppen und Inhaltsartikel, damit diese in der dynamsichen Navigation erscheinen. Testen Sie in der Webseite, ob diese korrekt angezeigt werden. Beachten Sie, dass Sie im Beispiel-Code am Anfang der Datei index.php noch die Variable $navigationArticleID setzen müssen. Geben Sie hier die ID des Artikels an, welcher die dynamische Navigation von DynPG enthält. In der Box am oberen rechten Rand der Webseite sollte während dieser Schritte noch nichts zu sehen sein.

Werden die Gruppen und Inhaltsartikel korrekt angezeigt, können Sie beginnen, die ersten Assoziationen anzulegen. Erstellen Sie dazu einige weitere Artikel, die sie mit einer Gruppe assoziieren möchten. Speichern Sie diese am besten in einer separaten versteckten Gruppe unter "Diverses" ab (Informationen zur sinnvollen Strukturierung Ihre Webseite mit Gruppen finden Sie im Artikel zur empfohlenen Gruppenstruktur). Legen Sie nun eine neue Assoziation an, in dem Sie in der Gruppenübersicht auf das "Assoziation hinzufügen"-Symbol klicken. Geben Sie im erscheinenden Fenster den gewünschten Artikel an und wählen Sie die bzw. erstellen Sie eine Assoziation mit dem Namen "Assoziation". Wenn Sie das Codebeispiel verwenden und hier einen anderen Namen angeben, wird der assoziierte Inhalt nicht angezeigt, da im oben angegebenen Snippet nur die Assoziation mit dem Namen "Assoziation" ausgegeben wird. Wählen Sie nun im Frontend die entsprechende Gruppe an. Der mit der Gruppe assoziierte Artikel sollte nun in der schwarzen Box angezeigt werden. Verfahren Sie genauso mit den anderen Gruppen und Artikeln, um sich die Funktionsweise von Assoziationen zu verdeutlichen.

Assoziationen erstellen und bearbeiten Sie im Backend mit den beiden im Bild markierten Symbolen.