Im Rahmen einer kompletten Umgestaltung habe ich meine Webseite mit dem Kirby CMS vollständig neu aufgebaut. Als erstes neues Feature nach dem Relaunch kam nun die Möglichkeit hinzu, Artikel auf der Seite mit "Gefällt mir" zu markieren.
Für das neue Feature hatte ich zwei funktionale Anforderungen:
Die gesamte Anzahl der Likes sollte gespeichert werden
Den einzelnen Besucher:innen soll angezeigt werden, ob sie einen Artikel geliked haben
In diesem Artikel erkläre ich, wie ich das Ganze mithilfe des Kirby CMS einfach und sicher umsetzen konnte.
Markieren eines Artikels als "Gefällt mir"
Speichern der Likes direkt im Artikel
Das flexible Datenmodell von Kirby erlaubt es mir, beliebige Daten in den Feldern meiner Seiten zu speichern. Bis dato bestand das Datenmodell eines Artikels wie diesem hier vor allem aus den Text- und Bildinhalten sowie einigen Meta-Daten, wie etwa, wann der Artikel geschrieben wurde und ob er zu einem bestimmten Projekt gehört.
Für die "Gefällt Mir"-Funktion benötigen wir genau eine neue Information, nämlich eine Zahl, die die Anzahl der Likes speichert. Folgender Code-Ausschnitt zeigt die simple Definition mittels eines Number-Felds.
fields:
likes:
type: number
disabled: true
default: 0
help: Dieses Feld wird durch Interaktion der Seitenbesucher aktualisiertDieser neue Wert kann jetzt verwendet werden, um die aktuelle Anzahl der Gefällt-Mir-Angaben anzuzeigen, wie etwa im obigen Video zu sehen.
Wie die Anzahl der Likes erhöht wird, wenn der Like-Button betätigt wird, schauen wir uns später an. Zunächst widmen wir uns dem Speichern der eigenen Likes für jede:n Seitenbesucher:in.
Speichern der eigenen Likes in einem Cookie
Die Webseite kommt grundsätzlich ohne Cookies aus, die leider einen sehr schlechten Ruf genießen. Das Speichern der Likes ist allerdings ein sinnvoller Anwendungsfall für Cookies und daher entschied ich mich, das Ganze damit umzusetzen. Daher zunächst eine kurze Erklärung, was Cookies sind und wie sie funktionieren.
Bei Cookies ist immer von kleinen Text-Dateien die Rede, die vom Browser gespeichert werden. Ein Cookie hat grundsätzlich einen Namen und einen Wert, beides sind beliebige Texte. Außerdem ist ein Cookie immer einer Domain zugeordnet, die den Geltungsbereich eingrenzt. Neben einigen weiteren Attributen kann unter anderem noch ein Ablaufdatum gesetzt werden. Welche Cookies der Browser aktuell gespeichert hat, kann man sich jederzeit anschauen (etwa mit den Devtools des Browsers).
Wenn ein Browser eine Anfrage an einen Server schickt, werden die relevanten Cookies (anhand der Domain) mit der Anfrage als sogenannter Header mitgesendet, sodass der Server einsehen kann, welche Cookies der anfragende Browser gesetzt hat.
Im Gegenzug kann ein Server in seiner Antwort an den Browser mit einem Response-Header die Anweisung geben, gewisse Cookies zu setzen, die dann wiederum bei der nächsten Anfrage wieder mitgeschickt werden.
Auf diese Weise bekommen Browser und Server ein gemeinsames "Gedächtnis", über das sie Informationen merken und austauschen können. Ein gängiger Anwendungsfall für Cookies ist etwa ein Warenkorb in einem Onlineshop, bei dem die Artikel nach und nach gesammelt werden und schließlich vom Server in einer Bestellung verarbeitet werden.
Das Verfahren mache ich mir zunutze, indem ich die von einer Person als "Gefällt Mir"-markierten Artikel in einem Cookie speichere. Wird nun die Seite eines Artikels von derselben Person wieder aufgerufen, ist der Artikel nach wie vor geliked.
Einwilligung für Cookie-Nutzung einholen
Da es sich bei dem zum Einsatz kommenden Cookie um keinen funktionalen Cookie etwa im Sinne des Digitale-Dienste-Gesetztes handelt (der Cookie ist also nicht notwendig für die Verwendung der Seite), habe ich mich entschieden, das ganze sauber und nur mit Einverständnis der Besucher:innen zu speichern.
An dieser Stelle möchte ich nochmal betonen, dass Cookies per se nur eine nützliche Funktion des Webs sind - erst ihr vermeintlicher Missbrauch für das seitenübergreifende Tracking von Personen im Internet etwa zu Werbezwecken hat zu ihrer negativen Darstellung geführt. In unserem Fall ist der Einsatz völlig unproblematisch, da keinerlei personenbezogene Informationen übertragen oder gespeichert werden.
Bevor also der Cookie zum Speichern der markierten Artikel zum Einsatz kommt, frage ich die Nutzer:innen, ob sie mit der Speicherung von Cookies einverstanden sind und speichere diese Einverständnis in einem weiteren Cookie, damit ich beim nächsten Mal nicht wieder nachfragen muss.
Einholen der Einverständnis zum Speichern von Cookies
Kirby-API-Plugin zum Entgegennehmen der Likes
Damit auch wirklich Likes gespeichert werden können, muss beim Klick auf den Button diese Information an den Server, in dem Fall an Kirby, übertragen werden. Zu diesem Zweck habe ich eine API-Extension erstellt, welche die Anfrage zum Like entgegennimmt, prüft, ob die Person der Nutzung von Cookies zugestimmt hat und schließlich die im ersten Schritt definierte Zahl der Likes erhöht oder verringert.
Folgender unvollständiger und Code-Ausschnitt zeigt vereinfacht, wie das Verfahren funktioniert (Erklärungen in den Kommentaren). Die Details sowie den "Gefällt mir nicht mehr"-Fall habe ich hier der Einfachheit halber entfernt.
Kirby::plugin('volkmann-design-code/vdc-likes', [
'api' => [
'routes' => [
[
'pattern' => 'vdc/likes',
'method' => 'POST',
'auth' => false,
'action' => function () {
// 1. Hat der User die Cookies akzeptiert?
assertCookieConsent();
// 2. Laden des Artikels, der geliked werden soll
$pageId = get('page');
$page = getPageByUuid($pageId);
// 2.1. Abbrechen, wenn der Artikel nicht existiert
if ($page === null) {
return [
'success' => false
];
}
// 3. Abbrechen, wenn der Artikel schon geliked wurde
assertNotLiked($page);
// 4. Erhöhen des "like"-Feldes, das wir
// im ersten Kapitel angelegt haben.
updateLikeCount($page, 1);
// 5. Setzen eines "Set-Cookie"-Headers,
// um den neuen Zustand zurück zum Browser zu senden.
updateAndSetCookie($pageId, true);
return [
'success' => true
];
}
]
]
]
]);
// ...Fazit
Das neue "Gefällt mir"-Feature der Webseite ist eine schöne Ergänzung, die zu mehr Interaktivität führen kann und den Artikeln etwas mehr Leben einhaucht. Die Funktion kann auch einfach ausgeweitet werden auf andere Seiten-Typen neben den Artikeln (etwa die Begriffserklärungen) oder als Kirby-Plugin allgemein bereitgestellt werden.
Das Kirby Content-Management-System bietet mit seinem offenen Datenmodell die perfekte Grundlage, um solch ein Feature schnell und einfach und ohne neue Abhängigkeiten wie etwa eine Datenbank umzusetzen. Auch das Lesen und Schreiben von Cookies sowie der Aufbau eigener API-Funktionen ist einfach und produktiv und macht Lust darauf, ähnliche Features auch in anderen Projekten miteinfließen zu lassen.
Ich bin gespannt, wie die neue Funktion angenommen wird. Also, wenn es interessant war, lass doch gerne ein "Gefällt mir" da!