Inhalt
- Vorwort
- Einfaches Voting
- HTML- und JavaScript-Teil
- PHP-Teil des Votings
- votes.json
- Fazit
Vorwort
Votings sind überaus beliebt, denn Sie stellen eine einfache Interaktion mit dem Leser und Besucher dar. Zudem geben sie dem Redakteur die Möglichkeit bestimmte Beiträge zu überarbeiten oder zu verändern, um Bewertungen durch die Leser zu verbessern. In den folgenden Absätzen wird ein Voting-System vorgestellt, das je Beitrag in das eigene Content Management System eingehängt werden kann.
Einfaches Voting
Das Voting in diesem Beitrag nutzt kein klassisches Formular, verwendet stattdessen die neue fetch()
Funktion des JavaScripts. Das folgende Coding setzt sich aus einem Script-Anteil und HTML-Anteil zusammen, der problemlos in die meisten Templates der gängigen CMS eingehängt werden kann. Aber auch in reinen HTML-Seiten lässt er sich genau so verwenden.
HTML- und JavaScript-Teil
Der folgende Code, bestehend aus HTML und JavaScript, kann in jeder HTML-Seite oder Template eingebunden werden und ruft via POST
das PHP-Programm vote.php
auf. Im POST-Array befindet sich eine ID
des betreffenden Beitrags den es zu bewerten gilt (ein Beitragstitel).
<script>
function vote(postId) {
fetch('vote.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ postId: postId })
})
.then(response => response.json())
.then(data => {
if (data.success) {
document.getElementById('votes-' + postId).textContent = data.votes;
} else {
alert('Fehler: ' + data.message);
}
});
}
</script>
<h1>Beitrags-Voting</h1>
<ul>
<?php foreach ($posts as $post): ?>
<li>
<h2><?= htmlspecialchars($post['title']) ?></h2>
<button onclick="vote(<?= $post['id'] ?>)">Abstimmen</button>
<span id="votes-<?= $post['id'] ?>">
<?= $votes[$post['id']] ?? 0 ?>
</span> Stimmen
</li>
<?php endforeach; ?>
</ul>
Einfaches Voting System
Im folgenden PHP-Programm vote.php
wird zunächst klassisch auf die mthode POST abgefragt, um diese von GET-Requests zu unterscheiden. Im Anschluss daran wird der Eingabestrom direkt mit php://input
gelesen und durch JSON
decodiert.
PHP-Teil des Votings
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = json_decode(file_get_contents('php://input'), true);
$postId = $input['postId'] ?? null;
if (!$postId) {
echo json_encode(['success' => false, 'message' => 'Ungültige Anfrage.']);
exit;
}
$votesFile = 'votes.json';
if (!file_exists($votesFile)) {
file_put_contents($votesFile, '{}');
}
$votes = json_decode(file_get_contents($votesFile), true);
if (!isset($votes[$postId])) {
$votes[$postId] = 0;
}
$votes[$postId]++;
file_put_contents($votesFile, json_encode($votes));
echo json_encode(['success' => true, 'votes' => $votes[$postId]]);
} else {
echo json_encode(['success' => false, 'message' => 'Nur POST-Anfragen erlaubt.']);
}
Voting Schema
Der restliche Code ist nun recht selbsterklärend. Existiert keine POST-ID erfolgt die Rückgabe einer Fehlermeldung an das JavaScript, ansonsten wird die Datei votes.json
erzeugt und der Beitragsname mit einer +1
bewertet.
votes.json
{
"Beitrag-1":128,
"Beitrag-2":24,
"Beitrag-3":19
}
Fazit
Das gezeigte Codebeispiel ist vollkommen funktionsfähig und bewertet einzelne Beiträge vollkommen korrekt und sauber. Allerdings ist es nicht sehr leistungsfähig und hat hier und da ein paar Schwächen, denn der Besucher kann so viele Bewertungen abgeben wie er will - das ist nicht so gut.
Oliver Lohse
2024-01-28
Beitrag,Sortieren,Datum,Titel,ASC,DESC
post
32