Das beinah perfekte Gästebuch mit Drupal

Post von Michi on Saturday, 27 June 2009

Nach dem ich vor einiger Zeit einen Post erstellt habe, in dem ich zeigte, wie einfach ein Blog mit Drupal aufgebaut werden kann, will ich dies nun weiterführen und zeigen, wie einfach man ein eigenes Gästebuch mit Drupal bauen kann. Klar, es gibt verschiedene Gästebuch-Module für Drupal, doch selber bauen ist nicht wirklich schwierig und der Lernfaktor ist um einiges grösser als mit der blossen Installation eines Modules.

Also zeige ich hier nun Schritt für Schritt, wie ein eigenes Gästebuch mit Drupal erstellt werden kann.

Wer das Gästebuch schon mal im voraus anschauen möchten, klicke doch bitte hier!

Folgender Code und Module werden für das Gästebuch verwendet.

Drupal 6.12

CCK	E-Mail Field	Link
Comment (Core)	Views	Content Template

Als Theme habe ich das sehr gute Acquia Marina Theme verwendet. Und zu guter letzt noch je ein Icon als Symbol für eine E-Mail Adresse und eines für eine Webseite . Diese können natürlich nach belieben ausgetauscht werden. So nun aber genug der Vorbereitung, jetzt gehts los.

Als erstes erstellt man ein Formular, damit der Gast einen Eintrag machen kann. Ich habe dies mit CCK gelöst. So wird jeder Eintrag im Gästebuch als Node angelegt und man kann bequem per Views darauf zu greifen.
Man muss einen neuen Inhaltstyp anlegen mit Namen Gästebuch. Im gleich Fenster sollte man jetzt noch unter "Einstellungen für das Eingabeformular" das Tite-l und Textkörperfeld in "Betreff" und "Inhalt" umbenennen.

Unter "Einstellungen für den Arbeitsablauf" sollte nur der Haken bei "Veröffentlicht" stehen. Wir wollen ja nicht gleich, allle Einträge auf der Startseite anzeigen lassen.

Nun kann der Inhaltstyp ein erstes mal gespeichert werden.
Anschliessend müssen noch zusätzliche Felder hinzugefügt werden:

Hier gilt vorallem darauf zu achten, dass für das E-Mail und das Website-Feld den richtige Feldtyp ausgewählt wird. Um das Ganze noch ein wenig aufzulockern, habe ich die persönlichen Angaben noch gruppiert.
Nach dem Speichern des Inhaltstyps, sollte man gleich noch die Berechtigungen für die soeben erstellen Felder vergeben, ansonsten sieht der Gast ausser dem Betreff- und dem Inhaltsfeld nichts. Dies wird unter den Berechtigungen ⇒ content_permissions-Modul erledigt.

Jetzt kann man bereits unter /node/add/gaestebuch erste Gästebucheinträge hinzufügen.

Als nächstes machen wir uns nun daran, die eingetragenen Einträge schön darzustellen. Dazu müssen wir eine neue View und ein passendes Viewstemplate erstellen.
Die passende View zu erstellen ist kein Problem. Folgende Einstellungen müssen beachtet werden:

Filter
- Node: Typ = Gästebuch
- Node: Veröffentlicht Ja
Basiseinstellungen
- Darstellung: unformatiert
- Zeilendesign: Node
  - Darstellung für die Zeilen: Vollständiger Beitrag
    
    Dies Einstellung ist sehr wichtig, da man damit die Möglichkeit hat, die View selber zu themen
- Kopfbereich: Link zum Gästebuchformular erstellen
Sortierkriterium: Node, Beitragsdatum absteigend

Jetzt muss noch eine Anzeige hinzugefügt werden und diese mit einem Pfad und einem Menüpunkt versehen. Schlussendlich sieht die komplette View so aus:

Nicht vergessen die View nun zu speichern!!

Jetzt gehen wir daran, die View zu themen. Keine Angst ist nicht schwierig. Kennt man die kleinen Details wird es sogar sehr einfach. Damit wir die View nach unseren Wünschen gestalten können, müssen wir eine neue tpl Datei anlegen. Diese muss einen ganz bestimmten Namen haben, damit wir später mit den Variablen aus dem Content Template arbeiten können. Also, gehe nun per FTP auf deinen Webserver in dein Verzeichnis mit dem verwendeten Theme und erstelle die Datei: node-view-gaestebuch.tpl.php. Der Teil "gaestebuch" bezieht sich auf den Namen der View.

Nach dem diese Datei erstellt wurde, öffnet man das Content Template. Dies ist über Inhaltverwaltung ⇒ Content Template zu finden.

Klicke nun auf "create template" ⇒ "Textkörper" ⇒ "Body Variables" ⇒ Jetzt erscheinen sämtliche Variablen des Nodes "Gästebuch"

Als erstes wollen wir den Betreff, also den Titel, des Eintrages ausgeben. Dazu muss die Variable $node->title;
verwendet werden. Diese kann nun in die oben erstellte Datei eingefügt werden. Unsere tpl Datei sieht nun also folgendermassen aus:

<?php
print $node->title;
?>

Wenn man jetzt wieder in die View geht und sich die Vorschau anzeigen lässt, erscheinen nur die Betreffzeilen der jeweiligen Einträge. So kann jetzt natürlich die ganze View nach belieben weiter entwickelt und mit HTML und CSS aufgepimpt werden.
Mein tpl File sieht schlussendlich so aus:

    <div class="g_titel">
        <?php
            print $node->title;
        ?>
    </div>
    <div class='g_datum'>
        <?php
            print format_date($node->created);
        ?>
    </div>

    <div class="g_link">
        <?php
            if($node->field_email[0]['safe'])
                {
                    print " <a href='mailto:".$node->field_email[0]['safe']."'><img src='sites/gaestebuch.redpanda.ch/files/icons/email.png' border='0'></a> ";
                }
            if($node->field_website[0]['url'])
                {
                    print " <a target=_blank rel='nofollow' href='".$node->field_website[0]['url']."'><img src='sites/gaestebuch.redpanda.ch/files/icons/world.png' border='0'></a> ";
                }
        ?>
    </div>
    <div class="g_name">
        <?php
            print $node->field_vorname[0]['value'] ." ". $node->field_name[0]['value'];
        ?>
    </div>
    <br style="clear:both;" />
    <div class="g_text">
        <?php
            print $node->content['body']['#value'] ;
        ?>
    </div>

    <?php
    if($comm)
        {
            print "<div class='g_comment'>Der Admin meint:<br>". $comm ."</div>";
        }
    ?>

</div>

Und das dazu gehörige CSS File:

.border_gaestebuch {
    background-color: #ffffff;
    border: 1px solid #144A6E;
    -moz-border-radius:8px;
    -khtml-border-radius:8px;
    margin: 0 0 10px 0;
    padding: 10px 0 10px 0;
}

.g_titel{
    background-color:#94CE18;
    text-transform:uppercase;
    text-shadow:1px 1px #545454;
    font-size:150%;
    color:#ffffff;
    margin: 5px 0 5px 0;
    padding: 5px 5px 5px 10px;
}

.g_datum {
    text-shadow:1px 1px #545454;
    font-size:10px;
    color:#fff;
    text-align: right;
    margin: -29px 10px 10px 0;
    font-weight: bold;
}

.g_name {
    font-size:1.2em;
    color:#144A6E;
    text-transform:capitalize;
    padding:3px 0 0 10px;
    float:left;
    margin:0 0 5px;
}

.g_link {
    text-align:right;
    padding: 0 10px 0 0;
    float:right;
    margin:3px 0;
}

.g_text{
    background-color: #94CE18;
    border: 1px solid #94CE18;
    -moz-border-radius:8px;
    -khtml-border-radius:8px;
    margin: 3px 10px 5px 10px;
    padding: 0 10px 0 10px;
    color:#ffffff;
}

.g_comment{
    background-color: #144A6E;
    border: 1px solid #144A6E;
    -moz-border-radius:8px;
    -khtml-border-radius:8px;
    margin: 10px 10px 5px 10px;
    padding: 10px;
    color:#ffffff;
}

Die Views sollte jetzt in etwa so aussehen:

Die Icons für die Webseite oder die E-Mail Adresse erscheinen nur wenn auch wirklich etwas eingegeben wurde.

Und schon haben wir ein kleines aber feines, selbstgemachtes Gästebuch mit wenig Aufwand erstellt. Wer das Gästebuch mal live anschauen möchten, klicke doch bitte hier!

Was jetzt noch fehlt, ist ein Administationsansicht mit der Möglichkeit, die Einträge zu kommentieren. Dazu mehr aber im zweiten Teil vom "Das beinah perfekte Gästebuch".

Kommentare

Gast

22. October 2009 - 21:26