Quelltext der Seite Einfaches Gästebuch

[[Category: Erste_Schritte]]
{{AppliesTo|Version=ab 2.9}}
{{stub}}

==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 [http://demo.contao.org/contao/ 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|Die erste Webseite]] bereits umgesetzt hat.

==Überblick / Kurzbeschreibung==

Hier ein Überblick über die ToDos. Wer sich schon ein wenig in Contao umgesehen hat kommt vielleicht schon mit diesen Stichpunkten ans Ziel.
*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
*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
<code>
 <?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(); ?>''
</code>

Der include-Befehl muss vor den implode-Befehl. Der Code sollte nun so aussehen:
<code>
 <?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(); ?>''
</code>

Das Selbe nun mit dem html5-Code:
<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(); ?>
</code>

So sollte der Code nach der Änderung aussehen:
<code>
 <?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(); ?>
</code>

====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:

# Link um Formular einzublenden<br>
<pre><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></pre>
<br><br>
Link um Formular auszublenden<br>
<pre><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>
</pre>

<br>
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.

====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.
{{msgWarning|under construction}}