Esta es una pregunta difícil de plantear ya que no tengo mucho conocimiento de back-end, así que perdónenme si mi jerga no está a la altura.
Básicamente, tengo una galería de imágenes y necesito que los usuarios puedan "dar me gusta" a una imagen y hacer que incremente un contador que luego se almacena en el servidor. Entonces, si a 50 usuarios les gusta una imagen en particular, mostraría "50" en esa imagen para todos los usuarios.
Supongo que php y ajax son la mejor apuesta aquí.
Cualquier ayuda sería muy apreciada.
Bien, aquí hay un ejemplo de un mecanismo similar muy simple.
NOTA:
Primero necesitamos nuestro marcado de galería:
<ul> <li><a class="likeLink" data-imageid="1"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li> <li><a class="likeLink" data-imageid="2"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li> <li><a class="likeLink" data-imageid="3"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li> <li><a class="likeLink" data-imageid="4"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li> </ul>data-imageid: esta es nuestra referencia para los me gusta establecidos en una imagen
<span class="likes" >: solo un pequeño contenedor que muestra los "me gusta" de una imagen
Ahora necesitamos una "tienda", en este caso de ejemplo, un objeto json simple:
{ "images":[ {"imageId":1,"likes":0}, {"imageId":2,"likes":0}, {"imageId":3,"likes":0}, {"imageId":4,"likes":0} ] }Lo siguiente que necesitamos es un poco de JavaScript:
$(document).ready(function(){ // Initial loading likes for images $.ajax({ type: 'GET', url: 'setlike.php?getAllLikes', success: function (data) { $.each(data.images, function(index, value){ $('.likeLink[data-imageid="'+ value.imageId +'"]').find('.likes').html(value.likes); }); } }); // Set a like for an image $('.likeLink').on('click', function(){ var imageId = $(this).attr('data-imageid'); $.ajax({ type: 'POST', url: 'setlike.php', data: { imageId: imageId }, success: function (data) { $('.likeLink[data-imageid="'+ data.imageId +'"]').find('.likes').html(data.likes); } }); }) })Por último, pero no menos importante, necesitamos un script php que maneje nuestras solicitudes ajax:
header('Content-Type: application/json'); $data = file_get_contents('store.json'); // In this file is our json object if(isset($_GET['getAllLikes'])) { echo $data; } if(isset($_POST['imageId'])) { $jsonObj = json_decode($data); $likedImg = null; foreach($jsonObj->images as $v) { if($v->imageId == $_POST['imageId']) { $v->likes++; $likedImg = $v; } } file_put_contents('store.json', json_encode($jsonObj)); echo json_encode($likedImg); }