Come chiaramente ha specificato Andrea, la parte più sostanziale riguarda il codice lato server. Tuttavia, prendendo un qualche script già pronto, tipo quello che hai linkato, non è così complesso buttare giù qualcosa su cui iniziare a ragionare.
Ti posto una soluzione funzionante da cui puoi prendere spunto.
Il tutto è composto da quattro file inseriti in una stessa cartella:
- index.html (la tua pagina html con uno script jQuery/Ajax)
- contatore.php (il file php che incrementa il valore del contatore)
- contatore.dat (un file testuale che fungerà da database, in cui sarà registrato il semplice valore del contatore)
- immagine.jpg (l'immagine cliccabile)
Crea un file "index.html" e inserisci questo codice:
codice HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$.ajaxSetup({cache:false});
$(function(){
$("#contaclick").load("contatore.dat"); // visualizzo il contaclick sulla pagina in base al valore letto dal file dati
$("#imgclick").click(function(){ // al click sull'immagine
$("#contaclick").load("contatore.php",function(responseTxt){ // aggiorno il file dati e visualizzo il valore restituito
if (isNaN(responseTxt)) $(this).html("..."); // se ci sono errori nel valore restituito, visualizzo un testo alternativo
});
});
})
</script>
</head>
<body>
<img id="imgclick" src="immagine.jpg" title="Se ti piace clicca su questa immagine" alt="immagine cliccabile">
<p>Questa immagine è stata cliccata <span id="contaclick">...</span> volte.</p>
</body>
</html>
Il codice è abbastanza semplice. Tieni conto che sto usando jQuery e in particolare il metodo load, che non fa altro che fare una chiamata Ajax. Ho commentato la parte interessata ma se serve "qualche" chiarimento chiedi pure. Ovviamente se non conosci jQuery ti consiglio di iniziare a studiare su qualche guida.
Per il file php ho utilizzato lo script che tu stessa hai linkato, recuperando e adeguando giusto la parte che legge e aggiorna il valore sul file dati.
Crea un file "contatore.php" e inserisci questo codice:
Codice PHP:
<?php
// il file dati
$filedati = 'contatore.dat';
// se non esiste, creo il file dati automaticamente
if (!file_exists($filedati)) {
$aprifile = fopen($filedati,'w');
fwrite($aprifile,'0');
}
// leggo e aggiorno il valore sul file dati
$aprifile = fopen($filedati,'r');
$conta = fgets($aprifile);
$hostvisit = $HTTP_SERVER_VARS["HTTP_HOST"];
if(!strstr($HTTP_SERVER_VARS['HTTP_REFERER'], $hostvisit)) {
$conta++;
$aprifile = fopen($filedati,'w');
fwrite($aprifile,$conta);
}
// restituisco il valore aggiornato
echo $conta;
?>
In questo caso ho inserito un echo che restituisce il valore appena aggiornato. Servirà per visualizzare direttamente il valore sulla pagina html nel momento in cui viene aggiornato sul file dati, senza doverlo recuperare dallo stesso file dati (vedi la parte jQuery dove c'è load("contatore.php"...)
Sul file "contatore.dat" puoi scrivere semplicemente il valore 0. Puoi anche non creare questo file perché verrà creato automaticamente dal php se non sarà trovato.
Infine inserisci un'immagine con nome "immagine.jpg"
Per concludere:
Ovviamente questo è solo un semplice esempio, che preso così com'è, presenta diverse carenze.
Ad esempio non c'è un controllo che identifichi il click per singolo utente. Per cui è possibile cliccare più e più volte sull'immagine, e il contatore si aggiorna comunque. Allo stesso modo, se si apre la pagina php richiamandola direttamente dal browser, il contatore verrà comunque aggiornato.
Chiaramente è possibile (se non necessario) aggiungere degli ulteriori controlli per rendere il tutto più funzionale. Dipende comunque dalle tue esigenze. Intanto hai qualcosa da cui puoi partire.
Rispondi quotando
