Inserire votazione sotto ciascuna immagine

[mandroid]

Ciao,
Ho questo script che mi carica le immagini in una galleria

<?php
$directory = "RootDir/*.jpg";
$files=glob($directory);
$files=array_map("basename", $files);
foreach($files as $ch => $file){
        echo "<li><a href=\"RootDir/Category/$file\"><img class=\"lazy\" src=\"loader/loader.gif\" data-original=\"RootDir/Categoria/Miniatura/$file\" alt=\"Nome Categoria $ch\"> 
</a></li>";
}
?>

mi piacerebbe inserire un semplice sistema di voto sotto ciascuna immagine ed ho trovato e modificato questo:
http://codepen.io/anon/pen/drnCH/
Come faccio?
Ho provato anche a trasformarlo in un cuore con questo senza nessun risultato:

<style>
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #0060A0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
</style>
<div id="heart"></div>

Grazie.

 

[borgo italia]

ciao
ho dato un occhio al link che hai postato, ma sarebbe da capire se vuoi "ricordare il punteggio", se sì devi ricorrere ad un db

 

[mandroid]

Ciao
Grazie per la risposta
Si il punteggio deve rimanere in modo tale che tutti gli user possano vedere....
Un database?

 

[borgo italia]

ciao
è il sistema più semplice, non hai mysql?

 

[mandroid]

è semplice per chi ci capisce
si ho mysql (che uso per wordpress)

 

[borgo italia]

ciao
ti schematizzo
vicino alla miniatura metti un link di votazione che trasmetta il nome del file immagine

<?php
//....
$directory = "RootDir/*.jpg";
$files=glob($directory);
$files=array_map("basename", $files);
foreach($files as $ch => $file){
        echo "<li><a href=\"RootDir/Category/$file\"><img class=\"lazy\" src=\"loader/loader.gif\" data-original=\"RootDir/Categoria/Miniatura/$file\" alt=\"Nome Categoria $ch\"> 
		</a>&nbsp;<a href=\"elabora_voto.php?cosa=$file\">vota</></li>";
}
//.....
?>

poi ti fai una tabella votazioni, es

nome varchar(250) primarykey
voti int(6) default 0

nella pag elabora_voto.php

<?php
//dati di connessione al db
$votato=$_GET['cosa'];//recuperi il nome
//qui ci vogliono dei controlli il get è sempre potenzialmente pericoloso
// e poi controllerei anche che a quel nome corrisponda il suo file immagine
if(file_exists("RootDir/$votato"){
	$query="INSERT INTO vatazioni VALUES('$votato', 1) ON DUPLICATE KEY voti=voti+1";
	mysqli_query($conn,$query);
}
header ('location:pagina_immagini.php');
exit();
?>

se l'utente clicca sul link relativo ad un immagine trasmette il nome del file
se è il primo voto il record non esiste quindi viene creato e per quel nome (primarykey) viene attrubuito un voto
se invece il nome del file esiste di già (gia votato) il campo voti del record si incrementa di uno
però stai attento dovresti mettere anche dei controlli che lo stesso utente non continui a votare, potresti usare i cookie con un certo tempo di vita in modo che se il cookie esiste non possa votare

 

[mandroid]

Ciao,
allora ho provato credo a ceare un database :crying:


poi i dati per accedere al database nel file elabora_voto.php

        $serverIp="";
	$userName="";
	$password="";
	$dbname="";

ed il link sotto le immagini.

Risultato:
Mi appare la scritta vota sotto l'immagine ma quando ci clicco sopra mi rimanda ad'una immagine che non esiste.

 

[borgo italia]

ciao
intanto scusa mi era rimasto nella 'penna', correggi

$query="INSERT INTO vatazioni VALUES('$votato', 1) ON DUPLICATE KEY voti=voti+1";

in

$query="INSERT INTO vatazioni VALUES('$votato', 1) ON DUPLICATE KEY UPDATE voti=voti+1";

mancava UPDATE

poi cosa intendi che ti rimanda ad un'immagine che non esiste?

 

[borgo italia]

ciao
puoi postare quello che hai fatto nella pagina elabora_voto.php ?
passando col mouse su "vota" si vede che mandi alla pagina quindi dovrebbe esere lì l'errore.
poi attento il link che hai postato NON ricorda la votazione puoi usare ajax o jq per evitare di far ricaricare la pagina, ma per ricordare il voto devi avere il db

 

[mandroid]

ciao ecco il codice
elabora_voto.php:

 <?php
//dati di connessione al db
session_start();
{
$serverIp="";
$userName="";
$password="";
$dbname="vote";

}

$votato=$_GET['cosa'];//recuperi il nome
//qui ci vogliono dei controlli il get è sempre potenzialmente pericoloso
// e poi controllerei anche che a quel nome corrisponda il suo file immagine
if(file_exists("RootDir/$votato"){
 $query="INSERT INTO vatazioni VALUES('$votato', 1) ON DUPLICATE KEY UPDATE voti=voti+1";  
 mysqli_query($conn,$query);
}

header ('location:jqmanimal.php');
exit(); 
?>