Compteur de clics sans reset (avec php) Résolu

Question

Bonjour,

je souhaiterais, sur mon site, que les personnes intéressées par un projet se comptent en cliquant sur un bouton.

J'ai trouvé le script en html/java, mais le compteur se remet à zéro quand on quitte la page.

J'ai compris qu'il fallait que j'utilise php pour garder le nombre affiché, mais je ne maitrise pas du tout (bidouilleur, mais pas champion champion).

Quelqu'un pourrait-il m'expliquer (simplement) comment faire? Avec des exemples de scripts, tant qu'à faire.

Je demande beaucoup, je sais, mais j'apprends vite...

Très cordialement,

letocest · Answer

C'est encore moi. Je viens de voir qu'il fallait peut-etre que j'utilise Ajax. Mais à part Sophocle, Ajax...

jordane45 · Answer

Bonjour,

Alors oui, il va te falloir du javascript, de l'ajax, et un langage serveur (tel que le php).

Ensuite, la première question à se poser est : où veux tu conserver les données de ce compteur ? une base de donnée ou un simple fichier ?

Si base de données, il te faudra aussi apprendre le SQL pour pouvoir faire des requêtes INSERT ou UPDATE

Voici des exemples de scripts  Javascript (jquery) Ajax : https://codes-sources.commentcamarche.net/source/102253-exemple-ajax-en-jquery

Tu en trouveras certainement des plus simples un peu partout sur le net ..

Reviens nous voir avec tes tentatives si tu rencontres un souci .. on verra pour t'aider à le corriger

letocest · Answer

Merci beaucoup. J'ai déjà touvé un exemple sur un autre site, avec php et tout. Le compteur s'affiche mais se s'incrémente pas. Je vais regarder ton lien et je suis sur que je vais finir par mettre les bouts ensemble. À bientot. Merci encore.

letocest · Answer

Bonjour, voici des fichiers que j'ai trouvés pour mon compteur. D'après ce que je comprends, les données sont enregistrées sur des fichier (PHP5 et clickcount.data) et non sur une base de données. C'est bien ça? 1) Index AJAX : Exemple de client

Cliquez ici ! (Nombre de clics : )

2) /compteur/clickcount.data 0 3) /compteur/compteur.php5 4) /js/compteur-click.js var http; // Notre objet XMLHttpRequest function createRequestObject() { var http; if(window.XMLHttpRequest) { // Mozilla, Safari, ... http = new XMLHttpRequest(); } else if(window.ActiveXObject) { // Internet Explorer http = new ActiveXObject("Microsoft.XMLHTTP"); } return http; } function gestionClic() { document.getElementById('nbr_clics').innerHTML = 'Chargement...'; http = createRequestObject(); http.open('get', '.compteur/compteur.php5', true); http.onreadystatechange = handleAJAXReturn; http.send(null); } function handleAJAXReturn() { if(http.readyState == 4) { if(http.status == 200) { document.getElementById('nbr_clics').innerHTML = http.responseText; } else { document.getElementById('nbr_clics').innerHTML = "N/A"; } } } J'ai plusieurs problèmes: bien que les fichiers PHP5 et clickcount.data s'incrémentent, le résultat est N/A. J'ai bien vu la phrase de code sur le fichier compteur-click.js Extraits: (...) function handleAJAXReturn() { if(http.readyState == 4) { if(http.status == 200) { document.getElementById('nbr_clics').innerHTML = http.responseText; } else { document.getElementById('nbr_clics').innerHTML = "N/A"; } } (...) je ne sais pas ce qui cloche et ce que je dois changer. Par ailleurs, j'ai voulu, avec Kompozer, modifier le texte, la casse des caractères etc sur la page principale (index), et tout a disparu. Ce qui est un problème car, bien évidemment, je souhaite insérer ce compteur dans un coin de la page principale avec un texte qui l'annonce et qui l'accompagne. Également, en actualisant index, avec fileZilla, il semble que l'incrémentation ne continue pas celle du jour précédent, ce qui est, pour le coup un gros gros problème, car je souhaite modifier régulièrement la page principale (index) et garder l'incrémentation. Voilà où j'en suis. Ça avance... Si c'est utile, l'adresse est http://letaucestnous.lescigales.org

letocest · Answer

Bonjour, voici des fichiers que j'ai trouvés pour mon compteur. D'après ce que je comprends, les données sont enregistrées sur des fichier (PHP5 et clickcount.data) et non sur une base de données. C'est bien ça? 1) Index AJAX : Exemple de client

Cliquez ici ! (Nombre de clics : )

2) /compteur/clickcount.data 0

letocest · Answer

3) /compteur/compteur.php5 4) /js/compteur-click.js var http; // Notre objet XMLHttpRequest function createRequestObject() { var http; if(window.XMLHttpRequest) { // Mozilla, Safari, ... http = new XMLHttpRequest(); } else if(window.ActiveXObject) { // Internet Explorer http = new ActiveXObject("Microsoft.XMLHTTP"); } return http; } function gestionClic() { document.getElementById('nbr_clics').innerHTML = 'Chargement...'; http = createRequestObject(); http.open('get', '.compteur/compteur.php5', true); http.onreadystatechange = handleAJAXReturn; http.send(null); } function handleAJAXReturn() { if(http.readyState == 4) { if(http.status == 200) { document.getElementById('nbr_clics').innerHTML = http.responseText; } else { document.getElementById('nbr_clics').innerHTML = "N/A"; } } }

letocest · Answer

J'ai plusieurs problèmes:
bien que les fichiers PHP5 et clickcount.data s'incrémentent, le résultat est N/A.
J'ai bien vu la phrase de code sur le fichier compteur-click.js

Extraits:
(...)

function handleAJAXReturn()
{
    if(http.readyState == 4)
    {
        if(http.status == 200)
        {
            document.getElementById('nbr_clics').innerHTML = http.responseText;
        }
        else
        {
            document.getElementById('nbr_clics').innerHTML = "<strong>N/A</strong>";
        }
    }
(...)

(...)
je ne sais pas ce qui cloche et ce que je dois changer.

Par ailleurs, j'ai voulu, avec Kompozer, modifier le texte, la casse des caractères etc sur la page principale (index), et tout a disparu. Ce qui est un problème car, bien évidemment, je souhaite insérer ce compteur dans un coin de la page principale avec un texte qui l'annonce et qui l'accompagne.

Également, en actualisant index, avec fileZilla, il semble que l'incrémentation ne continue pas celle du jour précédent, ce qui est, pour le coup un gros gros problème, car je souhaite modifier régulièrement la page principale (index) et garder l'incrémentation.

Voilà où j'en suis. Ça avance... (je l'ai fais en plusieurs messages car en entier cela ne passait pas)

jordane45 · Answer

Commence par renommer ton fichier compteur.php5 en compteur.php

Ensuite, remplace ton code JS par celui ci

var http; // Notre objet XMLHttpRequest
var urlAjax = './compteur/compteur.php';

function createRequestObject()
{
  if(window.XMLHttpRequest) { // Mozilla, Safari, ...
    http = new XMLHttpRequest();
  } else if(window.ActiveXObject){ // Internet Explorer
    http = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return http;
}

function gestionClic()
{
  document.getElementById('nbr_clics').innerHTML = '<em>Chargement...</em>';
  http = createRequestObject();
  http.open('get', urlAjax, true);
  http.onreadystatechange = handleAJAXReturn;
  // Error Handling:
  http.onerror = function(error){
    console.error( 'Erreur AJAX', error );
  } 
  http.send(null);
}

function handleAJAXReturn()
{
  if(http.readyState == 4) {
    if(http.status == 200){
      document.getElementById('nbr_clics').innerHTML = http.responseText;
    } else {
      document.getElementById('nbr_clics').innerHTML = "<strong>N/A</strong>";
      console.error( 'Erreur AJAX', http.status, http.responseText );
    }
  }
}

Et pense à regarder dans la console de ton navigateur ce qui s'affiche lorsque tu clic sur ton bouton..

letocest · Answer

Formidable! Ça marche! Et ça va rester meme si je modifie l'index? Pour le reste je vais faire des tests, et si tu as quelques idées... Merci beaucoup!

letocest · Answer

Le problème qui me reste est la modification du format (taille du texte, éventuellement du bouton ect) pour insérer ce compteur dans un coin de la page principale avec un texte qui l'annonce et qui l'accompagne. Avec Kompozer, j'ai changé le texte et tout a disparu en ligne. Bizarre...

letocest · Answer

Je viens de retourner sur le site et le nombre de clics n'est pas affiché. Il ne s'affiche que si je clique sur le bouton (avec +1). C'est ennuyeux car je souhaiterais que le nombre (de participants) soit toujours affiché. C'est important.

letocest · Answer

La phrase est

$str = @file_get_contents('clickcount.data');

(sans compteur/) que j'ai remplacée par

$str = file_get_contents('./clickcount.data');

(sans @) mais ça n'a rien changé

jordane45 · Answer

Tu es sûr du chemin ?

Peux tu modifier le code comme ceci

<?php

$cmptFile =  __DIR__ . '/clickcount.data';
if(!file_exists($cmptFile)){
  echo "Erreur .. Fichier " . $cmptFile . "manquant ou introuvable...";
} else {

$str = file_get_contents($cmptFile); 
  var_dump($str); // le temps des tests pour voir ce que contient ta variable 
   
  if($str !== FALSE) {
    echo unserialize($str);
  } else {
    echo 0;
  }
}
?>

letocest · Answer

Merci de ta réponse. En fait, les fichiers ne sont pas très différents que les premiers que j'ai montrés (avec tes modifs). Il y a 4 fichiers (je vais peut-etre les mettre en plusieurs fois); 1) index.html 2) /compteur/compteur.php 3) /compteur/clickcount.data 4) /js/compteur-click.js et d'abord... 1) index.html (le passage du compteur) (...)

(Nous sommes : ) (...) c'est bizarre l'adresse de la source src (une image) a disparu du code ici. 2) /compteur/compteur.php

jordane45 · Answer

Ton fichier se nomme index.html  ?

C'est étonnant ... il est rare que le paramétrage du serveur permette l'exécution de code PHP dans un fichier .html.

Renomme le en index.php .. ça devrait mieux marcher.

Si ça ne marche toujours pas mieux,  poste nous le code COMPLET de ton fichier index.php  ainsi que le code source généré de celui ci. ( pour avoir le code source généré, il faut afficher la page dans ton navigateur puis utiliser le raccourci clavier CTRL+u   le copier et nous le coller ici )

letocest · Answer

Ça ne marche plus... Je suis perdu dans tous mes fichiers. Je les ai tous essayés et en ayant (je crois) remis ceux d'hier, quand je clique sur l'image du compteur, la page remonte en haut.

Je n'arrive pas à mettre le lien du site mais en faisant malin malin:

letaucestnous point lescigales point org (pour l'instant avec index.html puisque ça marchait) pour que tu vois par toi-meme si c'est possible

letocest · Answer

Je viens de me rendre compte que c'est le bazar dans les messages, car j'écrivais des messages qui n'apparaissaient pas, mais qui en fait sont apparus plus tard. Et comme j'ai essayé plusieurs fois.... En ce qui concerne html ou php, le compteur marche pour les deux mais l'encodage de la page pour php est un peu tordu. Je veux bien mettre la page entière de l'index et son code source, je ne savais pas qu'ils différaient. Par ailleurs, j'ai essayé de remettre une image à la place de "cliquer ici", j'y avais réussi et je n'y arrive plus (lecompteur ne marche plus - il fonctionnait pourtant, ce doit etre la chance du débutant). Donc, recommençons: 1) index.html Index maquette

Calque 1 Qu'est-ce que c'est?

Calque 4

Calque 2 Des articles

Calque 7

Site plutôt en construction....

Comptons-nous!
Si vous souhaitez signifier votre participation à
l'étau c'est nous,

Cliquez ici ! (Nous sommes : )

;

Calque 6

Calque 5

Calque 3 Des sites

2) code source index.html Index maquette

Calque 1 Qu'est-ce que c'est?

Calque 4

Calque 2 Des articles

Calque 7

Site plutôt en construction....

Comptons-nous!
Si vous souhaitez signifier votre participation à
l'étau c'est nous,

Cliquez ici ! (Nous sommes : )

;

Calque 6

Calque 5

Calque 3 Des sites

Tout ceci est bien compliqué, désolé. À bientôt,

jordane45 · Answer

Je confirme .. le fait que ton fichier soit index.html et non .php .. le code php n'est pas interprété ....

C'est pour ça que le compteur ne s'affiche pas.

Peux tu, en plus de ton index.html .. créer dans le même dossier un fichier index.php et me prévenir lorsque ça sera fait ?

Il faudra aller voir sur l'url : https://letaucestnous.lescigales.org/index.php si ça marche.

Si vraiment tu ne peux pas modifier ton fichier en .php ... dans ce cas tu n'auras pas d'autres choix que de faire un ajax pour aller lire l'information et l'afficher dans ta page. ( tu pourras fortement te baser sur le script que tu as utiliser pour incrémenter le nombre de clics .. )

Dans ton js, faire une fonction getclic

var http; // Notre objet XMLHttpRequest

var urlAjax = './compteur/compteur.php';
var urlAjax2 = './compteur/compteur2.php';



function createRequestObject()

{

  if(window.XMLHttpRequest) { // Mozilla, Safari, ...

    http = new XMLHttpRequest();

  } else if(window.ActiveXObject){ // Internet Explorer

    http = new ActiveXObject("Microsoft.XMLHTTP");

  }

  return http;

}



function gestionClic()
{
  document.getElementById('nbr_clics').innerHTML = '<em>Chargement...</em>';
  http = createRequestObject();
  http.open('get', urlAjax, true);
  http.onreadystatechange = handleAJAXReturn;
  // Error Handling:
  http.onerror = function(error){
    console.error( 'Erreur AJAX', error );
  } 
  http.send(null);

}

function getClic()
{
  document.getElementById('nbr_clics').innerHTML = '<em>Chargement...</em>';
  http = createRequestObject();
  http.open('get', urlAjax2, true);
  http.onreadystatechange = handleAJAXReturn;
  // Error Handling:

  http.onerror = function(error){
    console.error( 'Erreur AJAX', error );
  } 
  http.send(null);
}

function handleAJAXReturn()
{
  if(http.readyState == 4) {
    if(http.status == 200){
      document.getElementById('nbr_clics').innerHTML = http.responseText;
    } else {
      document.getElementById('nbr_clics').innerHTML = "<strong>N/A</strong>";
      console.error( 'Erreur AJAX', http.status, http.responseText );
    }
  }
}

Et créer un second fichier php

<?php
// './compteur/compteur2.php';
sleep(1);

$nbr = 0;

//$str = @file_get_contents('clickcount.data');
$str = file_get_contents('./clickcount.data');
if($str !== FALSE) {
   $nbr = unserialize($str);
}
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

echo $nbr;

?>

Et dans ton fichier index.html, faire appel à la fonction getClic lorsque la page a fini de charger

document.addEventListener("DOMContentLoaded", function() {
  getClic(); // on fait appel à la fonction getClic une fois que la page est chargée
});

Compteur de clics sans reset (avec php)

18 réponses

Discussions similaires

Newsletters