Einfaches Gästebuch: Unterschied zwischen den Versionen

Aktuelle Version vom 28. Dezember 2015, 18:21 Uhr

Einleitung

Ein einfaches Gästebuch kann mit der Kommentarfunktion von Contao erstellt werden: Man braucht lediglich eine neue Seite mit 2 Inhaltselementen - und ist damit eigentlich schon fertig. Die folgende Anleitung zeigt die Schritte mit Screenshots aus der Online-Demo unter Music Academy.

Voraussetzung

Diese Anleitung setzt einige einfache Voreinstellungen voraus. Es sollte bereits ein generelles Layout, ein paar Seiten in der Seitenstruktur und eine einfache Navigation geben. Gut gerüstet ist man, wenn man die Anleitung Die erste Webseite bereits umgesetzt hat.

Überblick / Kurzbeschreibung

Hier ein Überblick über die ToDos.

• Anlegen einer regulären Seite "Gästebuch" an geeigneter Stelle im Seitenbaum (damit sollte die Seite auch in der Navigation sichtbar sein)
• dabei wird automatisch ein Artikel "Gästebuch" erstellt, der noch keine Inhalte hat
• Ein neues Inhaltselement Text hinzufügen. Dieses mit der Überschrift "Gästebuch" und ein paar einleitenden Worte füllen
• Ein neues Inhaltselement vom Typ "Kommentar" hinzufügen
• "Kommentar"-Template kopieren, bearbeiten und verwenden
• Kommentar-Formular ein- und ausblenden mit Javascript
• Fertig!

Einrichten des Gästebuches im Detail

Eine neue Seite

Zuerst erstellt man im Backend eine neue Seite. Diese beherbergt alle Zutaten für das Gästebuch. Unter

• Backend-Module > Layout > Seitenstruktur

findet man eine Übersicht aller bisher angelegten Seiten. Sieht man nichts oder vermisst man Seiten, können diese über "Alle öffnen/schließen" eingeblendet werden. Über "Neue Seite" wird eine neue Seite angelegt. Über die nun eingeblendeten gelben Pfeile, kann man bestimmen, wo in der Seitenstruktur das Gästebuch eingehängt wird.

Artikel bearbeiten

Nachdem die neue Seite erstellt ist, kann der Artikel unter

• Backend-Module > Inhalte > Artikel

bearbeitet werden. Nach einem Klick auf den Stift wird der Artikel geöffnet. Ich habe als erstes ein Text-Element mit der Überschrift "Gästebuch" und einem kurzen einleitenden Text eingefügt. Als nächstes wird das Kommentar-Element eingefügt. Jetzt ist das Gästebuch zwar fertig, jedoch noch nicht ganz optimal.

Kommentar-Template bearbeiten

Bei dem Kommentar-Modul ist das Formular für ein neues Kommentar am Ende der Kommentare. Für das Gästebuch sollte es am Anfang sein. Dafür muss das Template angepasst werden.

neues Template erstellen

Unter *Layout > Templates auf neues Template klicken. In der der Liste taucht "ce_comments" zweimal auf. Sowohl von der xhtml als auch von der html5-Version eine Kopie erstellen. Das Zielverzeichnis kann "templates" bleiben.

Template bearbeiten

Mit einem klick auf den Stift wird das Template umbenannt. Ich habe es ce_guestbook genannt. Nun muss das Template bearbeitet werden. Mit einem klick auf bearbeiten öffnet sich der Quell-Code:

xhtml-Version

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <?= implode(, $this->comments) ?>
  <?= $this->pagination ?>
  <?php include $this->getTemplate('mod_comment_form', 'xhtml'); ?>

<?php $this->endblock(); ?>

Der include-Befehl muss vor den implode-Befehl. Der Code sollte nun so aussehen:

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <?php include $this->getTemplate('mod_comment_form', 'xhtml'); ?>
  <?= implode(, $this->comments) ?>
  <?= $this->pagination ?>

<?php $this->endblock(); ?>

Das Selbe nun mit dem html5-Code:

<?php $this->extend('block_searchable'); ?>

 <?php $this->block('content'); ?>

   <?= implode(, $this->comments) ?>
   <?= $this->pagination ?>
   <?php include $this->getTemplate('mod_comment_form', 'html5'); ?>

<?php $this->endblock(); ?>

So sollte der Code nach der Änderung aussehen:

<?php $this->extend('block_searchable'); ?>

 <?php $this->block('content'); ?>

   <?php include $this->getTemplate('mod_comment_form', 'html5'); ?>
   <?= implode(, $this->comments) ?>
   <?= $this->pagination ?>

<?php $this->endblock(); ?>

Template im Element einbinden

Das Einbinden des Templates im Element ist sehr einfach. Unter

• Inhalte > Artikel

bearbeiten wir nochmal den Gästebuch-Artikel und dort das Kommentar-Element. Unter

• Template-Einstellungen

Kann unter Individuelles Template das ce_guestbook-Template ausgewählt werden. Speichern und sich das Ergebnis anschauen.

Kommentar ein- und ausblenden

Um das Formularfeld ein- und auszublenden nutze ich einen kleinen Javascript-Code und zwei Links.

Links einfügen

Es werden 2 Links als Inhaltselemente vom Typ "HTML" eingefügt:

1. Link um Formular einzublenden
   

<div id="linkShow_css" style="display: none">
                <a title="Anzeigen" onclick="show_elements('com_tl_content_8','linkHide_css');hide_elements('linkShow_css')">Eintrag erstellen</a>
</div>

Link um Formular auszublenden

<div id="linkHide_css" style="display: none">
 		<a title="Verbergen" onclick="show_elements('linkShow_css');hide_elements('linkHide_css','com_tl_content_8')">Abbruch</a>
 </div>

Beide Links haben keine href-Eintrag. Damit wird verhindert, das die Seite neu geladen wird. Beide vom Displaytyp: none. Durch ein Javascript-Code werden diese dann geändert. Wurde Javascript deaktiviert, so erscheinen beide Links nicht.

Der Eintrag "com_tl_content_8" muss individuell angepasst werden. Bei dem Beispiel handelt es sich um das Inhaltselement mit der ID 8 - Das Kommentarformular. Wenn man sich den Seitenquelltext anzeigen lässt, kann man es auch dort ablesen:

<div class="form">
            <form action="index.php/gaestebuch.html" id="com_tl_content_8" method="post">

Seitenlayout duplizieren

Damit der verwendetete Javascript nicht in jeder Seite aufgerufen wird und somit Fehler verursacht, habe ich das Seitenlayout dupliziert und "Gästebuch" genannt. Dort kann man nun den Javascript-Code einbinden und onload-Funktionen aufrufen. Aber eins nach dem anderen.

Javascript-Code einfügen

Nun muss noch der Javascript-Code in dem Seitenlayout eingefügt werden. Unter Body Onload folgenden Code einfügen:

hide_elements('com_tl_content_8'); show_elements('linkShow_css')

Unter "zusätzliche head-Tags" folgenden Code einfügen:

<script type="text/javascript">

function show_elements()
 {
  var elementNames = show_elements.arguments;
  for (var i=0; i<elementNames.length; i++)
   {
     var elementName = elementNames[i];
     document.getElementById(elementName).style.display='block';
   }
 }

function hide_elements()
 {
 	var sErr = document.getElementsByClassName("error");
 	
              var elementNames = hide_elements.arguments;
              for (var i=0; i<elementNames.length; i++)
                    {
                        var elementName = elementNames[i];
                        if (!sErr[0]){ 
                        document.getElementById(elementName).style.display='none';
                        } else {
                        	
                        		document.getElementById('linkShow_css').style.display='none';
                        
                        }
                        
                    }
 }
 </script>

Hier noch ein paar Worte zur Erläuterung. Die Funktion show_elements ändert den Display-Typ auf "block" und macht Elemente sichtbar die vorher den Status "hide" hatten. Die Funktion hide_elements macht genau das Gegenteil. In der Body-onload wird das Formular ausgeblendet und der Link zum Einblenden des Formulars eingeblendet. Im Skript sind die beiden Funktionen definiert, wobei die Hide-Funktion noch einen Sonderfall berücksichtigt: Sollte beim Formular ein Fehler auftauchen und Elemente der Klasse "Error" erscheinen, wird das Formular nicht ausgeblendet. Jetzt sollte alles funktionieren.