Einfaches Gästebuch: Unterschied zwischen den Versionen
Aus Contao Community Documentation
Lucina (Diskussion | Beiträge) (→Typo, Satzbau) |
(→Überblick / Kurzbeschreibung) |
||
(14 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
[[Category: Erste_Schritte]] | [[Category: Erste_Schritte]] | ||
{{AppliesTo|Version=ab 2.9}} | {{AppliesTo|Version=ab 2.9}} | ||
− | + | ||
==Einleitung== | ==Einleitung== | ||
Zeile 14: | Zeile 14: | ||
==Überblick / Kurzbeschreibung== | ==Überblick / Kurzbeschreibung== | ||
− | Hier ein Überblick über die ToDos | + | 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) | *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 | *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 Text hinzufügen. Dieses mit der Überschrift "Gästebuch" und ein paar einleitenden Worte füllen | ||
*Ein neues Inhaltselement vom Typ "Kommentar" hinzufügen | *Ein neues Inhaltselement vom Typ "Kommentar" hinzufügen | ||
+ | *"Kommentar"-Template kopieren, bearbeiten und verwenden | ||
+ | *Kommentar-Formular ein- und ausblenden mit Javascript | ||
*Fertig! | *Fertig! | ||
Zeile 27: | Zeile 29: | ||
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. | 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. | Ü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.<br> | ||
+ | [[Datei:Bildschirmfoto 2015-12-28 um 16.54.31.png|200x200px]] | ||
+ | |||
+ | 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: | ||
+ | <pre><div class="form"> | ||
+ | <form action="index.php/gaestebuch.html" id="com_tl_content_8" method="post"></pre> | ||
+ | |||
+ | ====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: | ||
+ | <pre>hide_elements('com_tl_content_8'); show_elements('linkShow_css')</pre> | ||
+ | <br> | ||
+ | Unter "zusätzliche head-Tags" folgenden Code einfügen: | ||
+ | <pre> | ||
+ | <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> | ||
+ | </pre> | ||
+ | <br><br> | ||
+ | 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. |
Aktuelle Version vom 28. Dezember 2015, 18:21 Uhr
betrifft | |
---|---|
Contao Version | ab 2.9 |
Inhaltsverzeichnis
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:
- 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.