Klick auf Button soll Anzahl Klicks speichern und ausgeben (Like/Dislike)
Hallo zusammen
Ich benötige etwas Wissen von euch :D
Meine Vorhaben ist ein Like- und Dislike-Button für die Newsbeiträge. Die Klicks auf die Buttons sollen in einem .txt gespeichert und entsprechend angezeigt werden.
Bevor ich mich ans dynamische mache, so dass bei jeder News die entsprechenden Klicks angezeigt werden, möchte ich erst die Funktion fertigstellen.
Leider klappt das noch nicht so ganz, deshalb bin ich auf euer Wissen angewiesen :)
Aufgebaut ist das Ganze wie folgt:
In einem HTML-Inhaltselement ziehe ich mittels "{{file::click-buttons.php}}" die Datei "click-buttons.php" an:
Darin befindet sich das klickbare Element, also der Button und das PHP das die Klickzahlen aus der Datei "click-counter.txt" entnimmt und auf der Website ausgibt. Der Code soll jede Buchung in ein Array schreiben und weist jede eindeutige ID als Schlüssel zu, auf den auf der Seite leicht verwiesen werden kann.
PHP-Code:
<?php
$clickcount = explode("\n", file_get_contents('click-counter.txt'));
foreach($clickcount as $line){
$tmp = explode('||', $line);
$count[trim($tmp[0])] = trim($tmp[1]);
}
?>
HTML-Code:
<button class="click-trigger" data-click-id="click-001">Gut</button>
<span id="click-001" class="click-count"><?php echo $count['click-001'];?></span>
<br/><br/>
<button class="click-trigger" data-click-id="click-002">Nicht gut</button>
<span id="click-002" class="click-count"><?php echo $count['click-002'];?></span>
Nun wurde im Seitenlayout und "Eigener Java-Script-Code" das folgende Script platziert.
Dies soll schauen, wo die Klasse class = "click-trigger" in der ersten Zeile verwendet wird, um die anklickbaren Elemente zu identifizieren.
In der 4. Zeile wird dann die eindeutige Attribut-ID "data-" data-click-id = "click-001" verwendet, damit AJAX diese Daten in der Datei "click-counter.php" veröffentlichen kann.
PHP-Code:
<script>
var clicks = document.querySelectorAll('.click-trigger');
for(var i = 0; i < clicks.length; i++){
clicks[i].onclick = function(){
var id = this.getAttribute('data-click-id');
var post = 'id='+id; // post string
var req = new XMLHttpRequest();
req.open('POST', '.'click-counter.php'.', true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.onreadystatechange = function(){
if (req.readyState != 4 || req.status != 200) return;
document.getElementById(id).innerHTML = req.responseText;
};
req.send(post);
}
}
</script>
Anschliessend noch das PHP, welche die Klicks in das .txt schreiben soll:
PHP-Code:
<?php
$file = 'click-counter.txt'; // path to text file that stores counts
$fh = fopen($file, 'r+');
$id = $_REQUEST['id']; // posted from page
$lines = '';
while(!feof($fh)){
$line = explode('||', fgets($fh));
$item = trim($line[0]);
$num = trim($line[1]);
if(!empty($item)){
if($item == $id){
$num++; // increment count by 1
echo $num;
}
$lines .= "$item||$num\r\n";
}
}
file_put_contents($file, $lines);
fclose($fh);
?>
Leider funktioniert das Ganze noch nicht so wie es soll. Die Buttons werden zwar angezeigt aber vom Klick an, passiert eigentlich nichts mehr.
Mein Gefühl sagt mir, dass etwas mit den Pfaden zu den Dateien untereinander nicht funktioniert.
Zudem frage ich mich, ob das Ajax im Seitenlayout nicht greift und die eventuell besser auch gleich in der click-counter.php platziert werden sollte.
Ich bin nicht extrem fit in PHP und bin mir nicht sicher, ob ich da allenfalls etwas einer veralteten PHP-Version eingebettet habe :rolleyes:
Schonmal ein grosses Danke für eure Unterstützung!
Edit: Alle drei Files sind im Ordner Templates abgelegt.
