¿Contador de clicks como un me gusta?

:

:

¿Cómo podría hacer un contador (botón) de clicks como un botón de me gusta?, ejemplo: yo creo un botón la cual lo clickeo y mostrará un numero a lado, fui el primero en dar el click y luego aparece un numero la cual es el 1 por ser el primero y luego viene otro y es el 2 así sucesivamente pero que luego de haber dado click que ya no pueda dar más y que no pueda descontar el click previamente dado.

Respuesta
4

Te paso un contador que puede serte útil de la cantidad de gente a la que le gusta lo que ve y la cantidad de gente a la que no le gusta lo que ve.

Para hacerlo, me he basado en un poco de Javascript (mediante jQuery), Ajax y PHP. Básicamente, es presentar por cada entrada o artículo o foto una imagen con un pulgar para arriba y otra para abajo y el número de votos recibidos, tanto positivos como negativos.

La particularidad de este sistema es que no bloquea el voto para siempre, sino que una vez votado por ME GUSTA o por NO ME GUSTA, habilitará una Cookie que durará unas 2 horas donde bloqueará un nuevo voto en la misma entrada o foto.

El tiempo de vida de esta cookie es configurable en el archivo PHP, pero la idea no es bloquear para siempre sino hacer que la cantidad de votos recibidos crezca, de ahí el motivo del poco tiempo de vida.

Esta cookie se creará única para cada entrada, lo que permitirá a un usuario votar en tantas entradas, fotos o lo que sea como quiera sin restricciones. Eso sí, sólo podrá votar por SI o NO cada 2 horas.

Te dejo los códigos que se separan en 3 partes :

  1. El primero es la tabla, porque siempre me piden las tablas MySQL usadas, aunque te valdría cualquiera donde le agregues 2 campos de tipo INT llamados LIKES y HATES.
  2. En segundo lugar, tenemos el HTML que muestra los artículos o imágenes
  3. En tercer lugar tenemos el PHP llamado mediante AJAX para hacer la votación y devolver la cantidad nueva o un mensaje de error.

PD: Como te faltará la imagen, te la dejo a continuación (Guardar como..):

Código 1 - SQL
CREATE TABLE IF NOT EXISTS `posts` (
  `id` int(255) NOT NULL AUTO_INCREMENT,
  `likes` int(5) NOT NULL,
  `hates` int(5) NOT NULL,
  `titulo` varchar(255) NOT NULL,
  `resumen` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
/* No olvides crear entradas! */
Código 2 - HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sistema de votación Me gusta o No me gusta con PHP</title>
<style type="text/css">
.contenedor{width:600px;margin-right:auto;margin-left:auto;font-family:Georgia;font-size:13px;line-height:135%}
h3{color: #979797;border-bottom: 1px dotted #DDD;font-size:21px;padding:0 0 10px 0;clear:both}
/*voting style */
.votos {float:right;width:138px;margin:0 0 10px 40px;border:2px solid #eee;padding:10px;list-style:none;}
.votos .dw_button {background: url(images/votos.png) -64px 0 no-repeat;float: left;height: 42px;width: 64px;cursor:pointer;margin:0 0 0 10px}
.votos .dw_button:hover {background: url(images/votos.png) no-repeat -64px -42px;}
.votos .up_button {background: url(images/votos.png) 0 0 no-repeat;float: left;height: 42px;width: 64px;cursor:pointer;}
.votos .up_button:hover{background: url(images/votos.png) no-repeat 0 -42px;}
.voting_btn{float:left;}
.voting_btn span{font-size: 11px;font-family:Arial,sans-serif;margin:10px 0 0 37px;display:block;width:27px;height:22px;line-height:22px;text-align:center}
.likes_votado{background: url(images/votos.png) no-repeat 0 -42px !important;}
.hates_votado{background: url(images/votos.png) no-repeat -64px -42px !important;}
</style>
</head>
<body style="zoom: 1;">
 <div class="contenedor">
  <h3>30 plugins jQuery que vale la pena mirar</h3>
   <ul class="votos">
    <li class="voting_btn up_button likes_votado" data-voto="likes" data-id="6"><span>VOTOS POSITIVOS</span></li>
    <li class="voting_btn dw_button" data-voto="hates" data-id="6"><span>VOTOS NEGATIVOS</span></li>
    <span class="votado" style="display: none;">Gracias!</span>
    <span class="votado" style="display: none;">Ya has votado!</span>
    <span class="votado" style="display: none;">Ya has votado!</span>
    <span class="votado" style="display: none;">Ya has votado!</span>
    <span class="votado">Ya has votado!</span>
    <span class="votado">Ya has votado!</span>
   </ul>
 </div>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 
{
    $(".votos .voting_btn").click(function (e) 
    {
         e.preventDefault();
        var voto_hecho = $(this).data('voto');
        var id = $(this).data("id"); 
        var li = $(this);
        if(voto_hecho && id)
        {
            $.post('ajax_voto.php', {'id':id, 'voto':voto_hecho}, function(data) 
            {
                if (data!="voto_duplicado") 
                {
                    li.addClass(voto_hecho+"_votado").find("span").text(data);
                    li.closest("ul").append("<span class='votado'>Gracias!</span>");
                }
                else li.closest("ul").append("<span class='votado'>Ya has votado!</span>");
            });
            setTimeout(function() {$('.votado').fadeOut('fast');}, 3000);
        }
    });
});
</script>
</body>
</html>
Código 3 - PHP
/* ARCHIVO CONFIG.PHP */
$db_username = 'USUARIO';
$db_password = 'CLAVE';
$db_name = 'BASE_DE_DATOS';
$db_host = 'localhost';
$db = new mysqli($db_host, $db_username, $db_password,$db_name) or die('No puedo conectarme a la base de datos');
/* ARCHIVO AJAX_VOTO.PHP */
require_once("config.php");
if($_POST)
{
    $voto = trim($_POST["voto"]);
    $id = filter_var(trim($_POST["id"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
    if (isset($_COOKIE["votado_".$id]))
    {
        echo "voto_duplicado";
    }
    else
    {
        $total_votos=$db->query("select ".$voto." from posts WHERE id='$id' limit 1");
        if ($fila=$total_votos->fetch_array()) $numero=$fila[$voto];
        $votado=$db->query("UPDATE posts SET ".$voto."=".$voto."+1 WHERE id='$id'");
        setcookie("votado_".$id, 1, time()+7200);
        echo ($numero+1);
    }
}

Esperamos haberte ayudado y no olvides de votar la respuesta ;))

Un saludo desde Barcelona!

Presupuesto Web Gratis de Crear tu Página Web con WordPress

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas