Opentext CMS - Erstellung eines Kontaktformulars

Einleitung

Die kanadische Firma Open Text ist auf Content Management Systeme spezialisiert und vertreibt unter anderem auch das von RedDot erworbene CMS unter dem Namen Open Text CMS. Die Architektur von Open Text CMS besteht im wesentlichen aus zwei Komponenten, dem Management Server und dem Delivery Server. Am Management Server, der üblicherweise im Intranet liegt, werden die Inhalte erstellt und gewartet. Diese Inhalte werden dann auf den Delivery Server, der meist in der DMZ liegt, publiziert. Der Delivery Server liefert schließlich die Inhalte an den Besucher der Web Site aus.

Im folgenden Artikel möchte ich Schritt für Schritt demonstrieren, wie man ein Kontaktformular im CMS implementieren kann. Dieses Kontaktformular soll es Besuchern der Seite erlauben, ihre Kontaktdaten zu hinterlassen. Der Einfachheit halber sind das in diesem Beispiel der Vorname, der Nachname und die Email-Adresse. Diese Daten werden automatisch an eine definierte Email-Adresse zur Weiterverarbeitung gesandt.

Für dieses Beispiel wurde der Management Server in der Version 10.1 Build 10.1.2.321 und der Delivery Server in der Version 10.1 Build 10.1.2.436 SP2 HF2_201202140913 eingesetzt. Zum Nachvollziehen des Beispiels wird vorausgesetzt, dass bereits eine Installation des Management- und des Delivery-Servers besteht und ein CMS-Projekt exisitert, in das man die Kontaktseite einhängen kann.

Big Picture

Um den Redakteuren die Möglichkeit zu geben, die Kontaktseite in in den Webauftritt einzubauen, müssen wir eine Content Klasse erstellen. Jede konkrete Seite in Open Text basiert auf eine solche Content Klasse. Dabei ist wichtig, zu verstehen, dass eine Seite im CMS nicht einer Webseite entspricht. Eine Seite im CMS kann durchaus nur ein Teilbereich einer Webseite sein. So kann unser Kontaktformular zum Beispiel als Box in die rechte Sidebar eingebaut werden oder aber auch im mittleren Content Bereich der Webseite. Diese Entscheidung obliegt dann dem Redakteur. Bei der Erstellung der Content Klasse müssen wir unter anderem folgende Entscheidungen treffen:

  1. Welche Teile der Seite sollen vom Redakteur editierbar sein? Also: welche Texte sollen veränderbar sein, welche Bilder sollen auswählbar sein, welche Links oder Listen von Links soll der Redakteuer verändern können?
  2. Soll die Seite in der Navigation erscheinen können? Dann müssten wir das Template als Mastertemplate definieren.
  3. Wie soll die Seite optisch aufbereitet sein? Wir müssen hier ein geeignetes CSS erstellen, falls dieses nicht schon im Rahmen des CMS-Projektes vorhanden ist.
  4. Benötigen wir clientseitige Dynamik in Form von JavaScript (zum Beispiel zur Feldvalidierung)?
  5. Benötigen wir serverseitige Dynamik mit den Mitteln, die uns der Delivery Server zur Verfügung stellt?

Wir wollen diese Fragen im Vorfeld für unser Kontaktformular klären:

  1. Der Redakteur soll den Titel und einen Einleigungstext editieren können, aber nicht die Elemente des Kontaktformulars.
  2. Die Seite muss nicht in der Navigation erscheinen können.
  3. CSS existiert bereits, wir müssen es nur etwas ergänzen.
  4. Clientseitige Validierung ist der Einfachheit halber nicht vorgesehen, obwohl dies für die Email wohl sinnvoll wäre.
  5. Serverseitig müssen wir den Email-Versand implementieren.

Erstellung des Content auf Basis von HTML

In einem ersten Schritt wollen wir das reine HTML für das Kontaktformular erstellen. Dazu benötigen wir eine neue Content Klasse. Diese erstellen wir im Management Server indem wir Start / Content-Klassen bearbeiten auswählen und im Aktionsmenü "Content-Klassen mit Template erstellen" anklicken. Es öffnet sich ein Editor in dem wir das Template für die Content-Klasse erstellen. Hier bauen wir uns also das HTML-Gerüst auf:

<h1>Kontaktformular</h1>
 
<p>Bitte geben Sie Ihre Daten ein.</p>
 
<form>
  <table>
    <tr><td>Vorname:</td><td><input type="text" name="vorname"/></td></tr>
    <tr><td>Zuname:</td><td><input type="text" name="zuname" /></td></tr>
    <tr><td>Email:</td><td><input type="text" name="email" /></td></tr>
    <tr><td></td><td><input type="submit" value="absenden"></td></tr>
  </table>
</form>

Nachdem wir das Template erstellt haben, ist es notwendig im Aktionsmenü für das neue Template "Templatebearbeitung abschließen" und "Template freigeben" auszuwählen. Schließlich muss für die Strukturelemente anderer Content-Klassen definiert werden, dass dort die neue Content-Klasse verwendet werden darf. Dies geschieht über das Aktionsmenü "Content-Klassen vorbelegen".

Eine erste Vorschau unseres Templates können wir nun erhalten, indem wir die Content-Klasse auswählen und dann im Aktionsmenü "Template-Vorschau" klicken.

Damit wir das Template testen können, müssen wir nun eine Seite im CMS, die auf diesem Template beruht, anlegen. Im produktiven Betrieb würde das der Redakteur tun. In der Entwicklung muss diese Aufgabe der Entwickler übernehmen, um überhaupt testen zu können. Wir legen also an einer geeigneten Stelle im CMS-Projekt eine neue Seite an. Das können wir zum Beispiel tun, indem wir die neue Seite mit einem Container verknüpfen. Dazu wählen wir unter Start / Projektstruktur verwalten diesen Container aus und aktivieren dann im Aktionsmenü "Seite erstellen und verknüpfen".

Nun können wir eine Vorschau im Kontext der gesamten Website samt Anwendung von bereits bestehendem CSS anzeigen, indem wir die Seite auswählen und das Aktionsmenü "Seitenvorschau zeigen" aktivieren.

Styling mit CSS

Wir gehen davon aus, dass das CSS im wesentlichen bereits exisiert. Allerdings haben wir in der Vorschau gesehen, dass der Submit-Button nicht rechtsbündig mit den Eingabefeldern ausgerichtet ist. Das wollen wir korrigieren. Dazu ergänzen wir das in der entsprechenden Masterpage eingebundene CSS-File um folgende Definition:

td.right
{
  text-align: right;
}

Damit diese Definition auch auf das Tabellenfeld mit dem Submit-Button angewendet wird, müssen wir das Template für das Kontaktformular ändern:

<h1>Kontaktformular</h1>
 
<p>Bitte geben Sie Ihre Daten ein.</p>
 
<form>
  <table>
    <tr><td>Vorname:</td><td><input type="text" name="vorname"/></td></tr>
    <tr><td>Zuname:</td><td><input type="text" name="zuname" /></td></tr>
    <tr><td>Email:</td><td><input type="text" name="email" /></td></tr>
    <tr><td></td><td class="right"><input type="submit" value="absenden"></td></tr>
  </table>
</form>

Aufbereitung der Seite für den Redakteur

Nun müssen wir die Seite so aufbereiten, dass der Redakteur die variablen Teile (das sind die Inhaltselemente) der Seite bearbeiten kann. Wir haben oben festgelegt, dass der Redakteur den Titel und einen Einleitungstext ändern können muss. Dazu muss man für jedes änderbare Element einen Platzhalter einfügen. Ein Platzhalter für den Einleitungstext kann zum Beispiel durch <%txt_einleitung%> definiert werden. Für jeden Platzhalter muss ein Reddot eingebaut werden. Dieser stellt sich dem Redakteur als roter Punkt dar. Wenn der Redakteur den Punkt anklickt, dann öffnet sich ein Fenster, in dem der Inhalt bearbeitet werden kann. In unserem Beispiel benötigen wir drei Reddots: Einen, um die gesamte Seite zur Bearbeitung zu öffnen, einen, um den Titel zu ändern, und einen, um den Einleitungssatz zu bearbeiten. Einen Reddot fügt man zum Beispiel mittels <!IoRedDot_txt_einleitung> ein. Dieser Reddot bezieht sich auf ein Inhaltselement mit dem Namen txt_einleitung. Den Reddot zum Öffnen der ganzen Seite erstellt man mit <!IoRedDotOpenPage>. Will man zu einem Reddot noch eine Anmerkung dazu schreiben, so darf diese Anmerkung natürlich nicht auf der publizierten Webseite sichtbar sein, sondern nur für den Redakteuer während der Bearbeitung der Seite. Das kann man mit dem Blockelement <!IoRangeRedDotMode></!IoRangeRedDotMode> erreichen. Alles, was zwischen diesen beiden Tags steht, wird nur dem Redakteur angezeigt, aber nicht publiziert.

Damit wir die Platzhalter in das Template einfügen können, müssen sie vorher in der Content-Klasse definiert werden. Das geschieht durch Auswahl von "Inhaltselemente" und Ausführen des Aktionsmenüs "Element erstellen". Wir wollen nun zwei Elemente erstellen:

  1. txt_ueberschrift: Hier wählen wir den Typ Standardfeld, da es sich um einen kurzen Text ohne Formatierungserfordernisse handelt.
  2. txt_einleitung: Hier wählen wir den Typ Text, da es sich um einen beliebig langen Text handelt, der unter Umständen auch speziell formatiert werden muss (Fettschrift,...).

Nachdem wir die Inhaltselemente definiert haben, können wir sie im Template verwenden und mit Reddots versehen. Für unser Kontaktformular ergibt sich dann zum Beispiel:

<!IoRedDotOpenPage>
<!IoRedDot_txt_ueberschrift>
<h1><%txt_ueberschrift%></h1>
 
<!IoRedDot_txt_einleitung>
<p><%txt_einleitung%></p>
 
<form>
  <table>
    <tr><td>Vorname:</td><td><input type="text" name="vorname"/></td></tr>
    <tr><td>Zuname:</td><td><input type="text" name="zuname" /></td></tr>
    <tr><td>Email:</td><td><input type="text" name="email" /></td></tr>
    <tr><td></td><td class="right"><input type="submit" value="absenden"></td></tr>
  </table>
</form>

Nun müssen wir noch prüfen, wie sich das Template aus Sicht des Redakteurs anfühlt. Dazu wechseln wir zum Reiter "SmartEdit", rufen die Seite dort auf und editieren die Inhaltselemente (Überschrift, Einleitung). Das ist jetzt der richtige Zeitpunkt, um zu überlegen, ob dem Redakteur hier noch etwas fehlen könnte. Gibt es Inhalte, die er noch gerne editieren würde? Ist klar, worauf sich die Reddots beziehen? Soll man die Reddots noch mit Kommentaren versehen? Ist ein Blindtext für die Inhaltselemente sinnvoll?

Einbau des Emailversands

Immer wenn etwas zur Echtzeit, also wenn der Besucher der Website etwas tut, dynamisch passieren muss (eine Berechnung durchführen, etwas in die Datenbank schreiben, oder eben eine Email versenden), dann muss das über eine Komponente des Delivery Servers passieren. Diese Komponenten spricht man über so genannte DynaMents an. Welche DynaMents es konkret gibt, kann man der Dokumentation des Delivery Servers entnehmen. Das flexibelste aller DynaMents ist das Iolet-DynaMent. Mit diesem kann man eine selbst geschriebene Java-Klasse aufrufen und hat damit die volle Bandbreite an Möglichkeiten, die Java bietet. Grundsätzlich könnten wir den Email-Versand über ein solches Iolet realisieren. Allerdings bietet der Delivery Server für diesen Zweck bereits ein spezialisiertes DynaMent an, das Message DynaMent. Dieses wollen wir hier einsetzen und ersparen uns damit das Schreiben einer eigenen Java-Klasse.

Mit dem Message Dynament kann man folgendermaßen eine Email verschicken, wenn man SMTP vorher entsprechend konfiguriert hat:

<rde-dm:message mode="smtp" name="smtp-abv" send-type="direct">
  <rde-rd:email>
    <rde-rd:recipients>
        <rde-rd:recipient type="to">admin@example.com</rde-rd:recipient>
    </rde-rd:recipients>
    <rde-rd:subject>Neue Kontaktanfrage CMS</rde-rd:subject>
    <rde-rd:body type="text/plain">
<![CDATA[
Neuer Kontakt
Vorname: Max
Zuname: Mustermann
Email: max.mustemann@example.com
]]>
      </rde-rd:body>
  </rde-rd:email>
</rde-dm:message>

Jetzt müssen wir uns noch vergegenwärtigen, dass der Prozess, den wir hier abbilden, aus zwei Schritten besteht. Im ersten Schritt wird das Formular angezeigt, das dann vom Anwender ausgefüllt und abgeschickt wird. Durch das Abschicken der Daten wird die Seite ein zweites Mal aufgerufen. Nun soll aber das Formular nicht mehr erscheinen, sondern eine Email geschickt und dem Anwender mitgeteilt werden, dass die Daten übermittelt wurden. Die Seite muss also beim ersten Aufruf ganz etwas anderes tun als beim zweiten. Wie können wir in der Seite unterscheiden, ob es sich um einen ersten oder zweiten Aufruf handelt? Dazu müssen wir nur schauen, ob Daten wie der Vorname, der Zuname und die Email-Adresse geschickt wurden oder nicht. Die in einem HTML-Formular erfassten Daten werden über Request-Parameter geschickt. Diese müssen wir abfragen. Und das erfolgt grundsätzlich über das Attribute DynaMent mit mode=read. Wenn wir die Request-Parameter innerhalb von DynaMent-Aufrufen verwenden, müssen wir die Inline Notation für die Abfrage solcher Parameter verwenden. Um den Request-Parameter vorname abzufragen schreibt man in der Inline Notation [#request:vorname]. Leider kann man mit dem Attribute DynaMent nicht unmittelbar unterscheiden, ob ein Wert gesetzt ist oder ein leerer Wert übergeben wurde. Wir ergänzen unser Formular daher mit einem versteckten Feld, dessen Wert wir dann abfragen können. Setzt man das alles zusammen, ergibt sich folgender Code:

<!IoRedDotOpenPage>
<!IoRedDot_txt_ueberschrift>
<rde-dm:attribute source="request" attribute="eingabe_erfolgt"
                  mode="condition" op="ne" value="true">
  <rde-dm:if>
    <h1><%txt_ueberschrift%></h1>
    <!IoRedDot_txt_einleitung>
    <p><%txt_einleitung%></p>
    <form>
      <table>
        <input type="hidden" name="eingabe_erfolgt" value="true" />
        <tr><td>Vorname:</td><td><input type="text" name="vorname"/></td></tr>
        <tr><td>Zuname:</td><td><input type="text" name="zuname" /></td></tr>
        <tr><td>Email:</td><td><input type="text" name="email" /></td></tr>
        <tr><td></td><td class="right"><input type="submit" value="absenden"></td></tr>
      </table>
    </form>
  </rde-dm:if>
  <rde-dm:else>
    <rde-dm:message mode="smtp" name="smtp-abv" send-type="direct">
      <rde-rd:email>
        <rde-rd:recipients>
            <rde-rd:recipient type="to">admin@example.com</rde-rd:recipient>
        </rde-rd:recipients>
        <rde-rd:subject>Kontaktanfrage CMS</rde-rd:subject>
        <rde-rd:body type="text/plain">
<![CDATA[
Neuer Kontakt
Vorname: [#request:vorname#]
Zuname: [#request:zuname#]
Email: [#request:email#]
]]>
          </rde-rd:body>
      </rde-rd:email>
    </rde-dm:message>
    <p>Vielen Dank, Ihre Daten wurden übermittelt.</p>
  </rde-dm:else>
</rde-dm:attribute>

In Zeile 3 prüfen wir, ob der Request-Parameter eingabe_erfolgt auf true gesetzt ist. Wenn das nicht der Fall ist, werden die Zeilen 5-16 ausgeführt und das Eingabeformular angezeigt. In Zeile 10 setzen wir den Request-Parameter eingabe_erfolgt auf true. Beim zweiten Aufruf ist der Request-Parameter eingabe_erfolgt folglich gesetzt, und es werden die Zeilen 19-35 ausgeführt. Somit wird beim zweiten Aufruf eine Email verschickt und dem Anwender ein Dank für die Datenübermittlung ausgesprochen.

Die dynamischen Elemente, die wir nun in Form von DynaMents eingefügt haben, lassen sich in der Vorschau des Management Servers nicht mehr testen. Wir müssen das Projekt auf den Delivery Server publizieren. Dazu müssen allerdings erst die neu erstellten Seiten freigegeben werden. Nach erfolgreicher Publizierung testen wir die Applikation auf dem Delivery Server. Und bevor wir in einen Freudentaumel verfallen, weil alles so funktioniert wie gedacht, sollten wir noch einmal über die Sicht des Redakteurs nachdenken. Kann der Redakteur alle notwendigen Parameter der Applikation konfigurieren? Sollte er nicht vielleicht den Text, der nach erfolgreicher Datenübermittlung angezeigt wird, ändern können? Sollte er nicht die Email-Adresse des Empfängers ändern können? Die Betreffzeile der Email? Und schon sind wir wieder dabei, Platzhalter und Reddots in unser Template einzufügen... Aber das überlasse ich dem geneigten Leser.

Get in touch