Eine Art "Gefällt mir"-Button erstellen

elmaex

Hallo Leute,

ich hab (mal wieder) eine Frage

Ich hätte gerne einen Art "Gefällt mir"-Button auf meiner Seite (unter geschriebenen Artikeln). Natürlich soll das nichts mit Facebook zu tun haben! Jedes Mal, wenn jemand daraufgklickt, soll sich der Wert um 1 erhöhen und direkt daneben stehen. Etwa so vom Aussehen:

HTML

<html>
<head></head>
<body>
<input type="button" value="+1"><input type="text"  value="22" style="text-align:center;width:20px;">
</body>
</html>

Wie kann man das praktisch realisieren? Hat jemand ein Tutorial bzw. kann mir helfen?

Vielen Dank

lukasn

Soll das ein globaler Wert sein, also für alle Seitenbesucher gleich? In dem Fall müsstest du den Wert mit einer serverseitigen Programmiersprache abspeichern.

Für die Clientseitige Inmplementation verwendest du am besten jQuery.

Tobse

Zitat von lukasn

Für die Clientseitige Inmplementation verwendest du am besten jQuery.

Wo sich jetzt für mich die Frage stellt was das clientseitig bringen soll...

aber JavaScript brauchst du auf jeden Fall bzgl. Ajax etc.

lukasn

Zitat von Tobse

Wo sich jetzt für mich die Frage stellt was das clientseitig bringen soll...

Da hab ich auch in erster Linie die Clientseite des Server/Client dings gemeint. Aber vielleicht schreibt er ja eine Clientseitige Applikation, da muss nicht undbedingt mit dem Server geredet werden, wär dann eher ein Fall für local storage.

Wie auch immer, eine ganz grundlegende Implementation mit Server/Client in jQuery und PHP könnte so aussehen:

html-code:

HTML

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>forum-hilfe | elmaex counter</title>
</head>
<body>
	<h1>Server Counter Beispiel</h1>
	<p>
		<button id="increment">+1</button>
		<span id="current"></span>
	</p>


	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="script.js"></script>
</body>
</html>

Alles anzeigen

script.js

Code

$(document).ready(function($) {


	// Initialen Wert vom Server abfragen
	$.get('server.php', function(data) {
		$("#current").html(data);
	})


	// Buttonklick ausführen
	$("#increment").click(function(event) {
		// HTTP Post Request an server um den Wert zu erhöhen
		$.post('server.php', null, function(data, textStatus, xhr) {
			// Neune Wert in das DOM schreiben
			$("#current").html(data);
		});
	});
});

Alles anzeigen

server.php

PHP

<?php
<?php


// Bisherigen wert abfragen. storage.dat kann ein leeres File mit schreibrechten sein
$data = file_get_contents('storage.dat');


// Wenn noch kein Wert bekannt auf 0 setzen
if ( ! is_numeric($data) )
{
	$data = 0;
}


// falls der Request ein POST ist, Wert um 1 erhöhen und neu abspeichern.
if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
	$data++;
	file_put_contents('storage.dat', $data);
}


// Zählerwert ausgeben
echo $data;

Alles anzeigen

Tags