Stocker valeur compteur de clics

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

Je suis entrain de réaliser un site internet (en tant que grand débutant) et je souhaiterai avoir un compteur de clic ( ou de nombre vue lorsque quelqu'un clique sur un article ou un thumbnail).

J'ai récupéré un code javascript sur internet qui fonctionne très bien pour le compteur de clique.
Seulement celui ci se réinitialise à 0 a chaque rafraîchissement.

J'aimerai que mon compteur ne revienne jamais à 0 et continu de compter le nombre de clic de tous les internautes.

Je me demandais si il est possible de stocker une valeur en dur via le javascript ou autre. Par contre je ne souhaite pas faire ça en php car tout mon site est en html. Et je ne veux pas non plus utiliser un service en ligne de compteur.

voici le code javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!--//
var date_exp = new Date (); //aujourd'hui
/*
abdelaziz Rejeb Elalia 7016 Tunisie
site : http://abdelaziz.site.voila.fr
pour tout contact : http://siv.site.voila.fr
Elalia le 10/06/2008
*/
date_exp.setTime (date_exp.getTime() + (365*24*3600)); // expire dans 24H 
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""Click G
var comptClicXG = LitCookie("ClicXG");
if (comptClicXG==null) comptClicXG="0";
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""Click D
var comptClicXD = LitCookie("ClicXD");
if (comptClicXD==null) comptClicXD="0";
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""Objet info
var rrrrrrr = LitCookie("ClicRF");
if (rrrrrrr==null) rrrrrrr="*";
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""
function LitCookie(Clq) 
{
var mon_cookie = document.cookie;
var debut = mon_cookie.indexOf(Clq+"=");
var taille = debut + Clq.length + 1;
if ((!debut) && (Clq != mon_cookie.substring(0,Clq.length))) return null;
if (debut == -1) return null;
var fin = mon_cookie.indexOf(";",taille);
if (fin == -1) fin = mon_cookie.length;
return unescape(mon_cookie.substring(taille, fin));
}
 
function EcritCookie(Clq, valeur, expire, chemin, domaine, secure)
{
document.cookie = Clq + "=" + escape(valeur) + ( (expire) ? ";expires=" +expire.toGMTString() : "") + ( (chemin) ? ";path=" + chemin : "") + ( (domaine) ? ";domain=" + 
domaine : "") + ( (secure) ? ";secure" : "");
}
 
function validerForme() //appelé par le clic sur ce que vous voulez
{
EcritCookie("ClicXG",document.bayanat.TTclicG.value,date_exp);
EcritCookie("ClicXD",document.bayanat.TTclicD.value,date_exp);
EcritCookie("ClicRF",document.bayanat.TTclicRF.value,date_exp);
//history.go(0);
}
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""
 
function comptclickD() 
{ 
clicD = document.bayanat.TTclicD.value; 
clicD ++ 
document.bayanat.TTclicD.value = (clicD); 
validerForme()
}
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""
function comptclickG() 
{ 
clicG = document.bayanat.TTclicG.value; 
 
clicG ++ 
document.bayanat.TTclicG.value = (clicG); 
validerForme()
}
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""//Les titres des lient
L1 ='arte.gif'
L2 = 'Tunisie.gif'
L3 = 'Traveaux_p.gif'
L4 ='lien N°1'
L5 = 'lien N°2'
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""//le compt des lien
a1 = 0
a2 = 0
a3 = 0
a4 = 0
a5 = 0
//""""""""""""""""""""""""""""""""""""""""""""""""""""""""//enregistrement des liens cliqués
function Obej_Rf(RF) 
{ 
if(RF==1)
{
a1 ++;
document.bayanat.TTclicRF.value = document.bayanat.TTclicRF.value +(a1)+ ' - ' + L1 + ' : ' + new Date ()+ 'QqQ'
}
if(RF==2){
a2 ++;
document.bayanat.TTclicRF.value = document.bayanat.TTclicRF.value +(a2)+ ' - ' + L2 + ' : ' +  new Date () + 'QqQ' 
}
if(RF==3){
a3 ++;
document.bayanat.TTclicRF.value = document.bayanat.TTclicRF.value +(a3)+ ' - ' + L3 + ' : ' + new Date ()+ 'QqQ' 
}
if(RF==4){
a4 ++;
document.bayanat.TTclicRF.value = document.bayanat.TTclicRF.value +(a4)+ ' - ' + L4 + ' : ' + new Date () + 'QqQ' 
}
 
if(RF==5){
a5 ++;
document.bayanat.TTclicRF.value = document.bayanat.TTclicRF.value +(a5)+ ' - ' + L5 + ' : ' + new Date ()+ 'QqQ' 
}
 
validerForme()
}

et celui que j'ai sur ma page en html :

Code:

1
2
3
4
5
<div id="s-shapewaysshop" onClick="comptclickG(),Obej_Rf(4)" oncontextmenu="comptclickD()" class="leaf snapshot shapewaysshop blog">
<form name="bayanat">
<input class="ch" type="text" name="TTclicG" size="5">
</form>
</div>

Merci d'avance

Loïc

09/12/2012, 20h49
Invité

Bonjour,

Citation:

Envoyé par lolo34140

Je me demandais si il est possible de stocker une valeur en dur via le javascript ou autre.

Oui.

Citation:

Par contre je ne souhaite pas faire ça en php car tout mon site est en html. Et je ne veux pas non plus utiliser un service en ligne de compteur.

Alors, non (quoique...).

JavaScript agit coté "client", pas coté "serveur".
Or toi, tu voudrais stocker des valeurs sur le serveur (en base de données, ou fichier txt). Ce que PHP pourrait faire.

"quoique..." :
en JavaScript, tu peux faire appel (via Ajax) à un fichier PHP qui va se charger de l'enregistrement des données.
Via Ajax, ce fichier n'est pas "en relation directe" avec le fichier d'appel.
En clair, PAS BESOIN de changer les extensions .html de tes fichiers !

=> Les meilleurs cours et tutoriels AJAX
09/12/2012, 22h28
lolo34140

1 pièce(s) jointe(s)

Merci beaucoup pour ces explications.

J'ai trouvé sur internet quelques chose qui semble être ce que je recherche du coup (en utilisant le mot clé AJAX en plus dans mes recherches).

Cependant, je n'arrive pas à le faire fonctionner sur mon ordi an local (je pense que ça vient du référencement des chemins des fichiers contenu dans le php5 et javascript). J'ai un peu de mal avec ça encore.

voici le lien : http://www.squalenet.net/fr/pc/artic...miers-pas.php5

Je joins mes fichiers (que j'ai restructuré) permettant de créer le compteur de clics.

Par contre je me posais une autre question: Dans ma page je dois insérer plusieurs compteurs de clic, cela ce fait il facilement (par exemple avec l'exemple de dessus).

Merci!
10/12/2012, 01h30
lolo34140

C'est bon ça marche très bien. En fait je savais pas que ça marche seulement sur le site en ligne!

Voici ce que ça donne avec le nombre de vue affichées sur la première vignette (iphone5 dock) :xxxxxxxxxxxxxxxxx

J'ai quand même un problème, le compteur ne s'affiche pas au chargement de la page. Il s'affiche seulement quand je clic dessus. Si je rafraîchis le compteur disparaît.

Par contre je ne sais pas comment ajouter plusieurs compteur à partir du script!
10/12/2012, 09h44
Invité

Montre-nous ici uniquement le code "utile" et "nécessaire" à la résolution du problème.

Quel est ton niveau de connaissances en programmation ?

Alors voici les codes:

Javascript (compteur-click.js):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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()
{
    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 = "<strong>N/A</strong>";
        }
    }
}

code en php5 (compteur.php5):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
    sleep(1);
 
    $nbr = 1;
 
    $str = @file_get_contents('./clickcount.data');
    if($str !== FALSE)
        $nbr = unserialize($str)+1;
 
    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;
 
    file_put_contents('./clickcount.data', serialize($nbr));
?>

le code dans ma page index.html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="s-shapewaysshop" class="leaf snapshot shapewaysshop blog" onclick="gestionClic()">
<div id="viewnumber-container">
<span id="nbr_clics">
<?php
    $str = @file_get_contents('compteur/clickcount.data');
    if($str !== FALSE)
        echo unserialize($str);
    else
        echo 0;
?></span> Views
</div>
</div>

mon niveau de connaissance en programmation est assez faible.
Je sais, par contre assez, bien coder en VBA (du genre des macro).

Je viens d'apprendre le html, que je comprends bien maintenant.
Par contre pour ce qui est du php5 et du js je sais pas trop encore mais ça m'a pas l'air pas trop compliqué. J'arrive à comprendre un peu le code en le lisant mais je ne suis pas capable de taper du code pour l'instant.

Citation:

je ne sais pas comment ajouter plusieurs compteur à partir du script

Remplacer les fonctions, en mettant id_clics en paramètre :

Code:

1
2
3
<div id="s-shapewaysshop" class="leaf snapshot shapewaysshop blog" onclick="gestionClic('nbr_clics1');">
<!-- ...... -->
<div id="s-shapewaysshop" class="leaf snapshot shapewaysshop blog" onclick="gestionClic('nbr_clics2');">

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function gestionClic(id_clics)
{
    http = createRequestObject();
    http.open('get', './compteur/compteur.php5', true);
    http.onreadystatechange = handleAJAXReturn(id_clics);
    http.send(null);
}
function handleAJAXReturn(id_clics)
{
    if(http.readyState == 4)
    {
        if(http.status == 200)
        {
            document.getElementById(id_clics).innerHTML = http.responseText;
        } else {
            document.getElementById(id_clics).innerHTML = "<strong>N/A</strong>";
        }
    }
}

Citation:

J'ai quand même un problème, le compteur ne s'affiche pas au chargement de la page.

Code:

1
2
<body onload="gestionClic(id_clics1); gestionClic(id_clics2);">
<!-- ...... -->

Je viens d'essayer les codes.
Maintenant plus rien ne s'affiche au niveau du compteur.
J'ai vérifié dans le fichier texte et ça compte bien par contre.

J'ai l'impression que ça vient des id_clics.
D'après ce que j'ai compris tout mes nbr_clics dans mes codes sont remplacés par id_clics (plus numéro si plusieurs compteur) (pour l'ajout de plusieurs compteurs).

Alors je sais pas aussi mes des fois il y a des parenthèses ' ' et des fois non. J'ai essayé avec et sans mais ça ne change rien.

voici les codes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 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(id_clics) { http = createRequestObject(); http.open('get', './compteur/compteur.php5', true); http.onreadystatechange = handleAJAXReturn(id_clics); http.send(null); } function handleAJAXReturn(id_clics) { if(http.readyState == 4) { if(http.status == 200) { document.getElementById(id_clics).innerHTML = http.responseText; } else { document.getElementById(id_clics).innerHTML = "<strong>N/A</strong>"; } } }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id="s-shapewaysshop" class="leaf snapshot shapewaysshop blog" onclick="gestionClic(id_clics1);"> <div id="viewnumber-container"> <span id="id_clics1"> <?php $str = @file_get_contents('./compteur/clickcount.data'); if($str !== FALSE) echo unserialize($str); else echo 0; ?></span> Views </div> </div>
Code:

<body lang="en" onload="gestionClic(id_clics1);">

le onload dans le body marche très bien par contre avec l'ancienne structure! Mais ça compte du coup à chaque rafraîchissement. Ce que je ne souhaite pas.

merci

10/12/2012, 16h03
Invité
Mea culpa.
J'aurais dû changer les noms, pour éviter la confusion.
1/ dans les fonctions JavaScript, il s'agit d'un nom de VARIABLE. Donc pas de '...'
Code:

1 2 3 function gestionClic(id_clics) { ...}
2/ Dans le code, c'est un IDENTIFIANT (remplacé ici par 'tatayoyo1', avec '...')
Code:

1 2 3 <div id="s-shapewaysshop" class="leaf snapshot shapewaysshop blog" onclick="gestionClic('tatayoyo1');"> <div id="viewnumber-container"> <span id="tatayoyo1">
3/ sur le onload, il suffit de créer une AUTRE fonction, qui se contente d'AFFICHER le compteur (SANS l'incrémenter).

Code:

<body onload="afficheClic('tatayoyo1');">
10/12/2012, 16h27
lolo34140

Je viens d'essayer les codes mais j'ai toujours le même problème.

Cela ne viendrait il pas du php5 qui serait aussi à modifier?

Merci
10/12/2012, 16h31
Invité
Il faudrait penser à envoyer le bon identifiant au fichier PHP :
Code:

1 2 3 http.open('get', './compteur/compteur.php5', true); http.onreadystatechange = handleAJAXReturn(id_clics); http.send('identifiant_clics='+id_clics);
Et dans compteur.php5,tu récupères :

Code:

$_GET['identifiant_clics']

compteur.php5 doit être modifié pour incrémenter le "bon" compteur.

ok.

Bon je sais pas si j'ai bien compris pour le compteur.php5 .
Faut il un fichier php5 par compteur, et aussi 1 fichier data par compteur?

et le $_GET['identifiant_clics'] peut il se placer n'importe ou dans le php5 :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <?php sleep(1); $nbr = 1; $_GET['identifiant_clics'] $str = @file_get_contents('./clickcount.data'); if($str !== FALSE) $nbr = unserialize($str)+1; 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; file_put_contents('./clickcount.data', serialize($nbr)); ?>
et concernant le : identifiant_clics , ça veut dire qu'il faut que je mette à la place le nom que j'ai choisi pour chaque compteur?

Désolé je suis vraiment pas très bon.

En tout cas merci beaucoup

10/12/2012, 16h57
Invité

As-tu, par curiosité, déjà ouvert le fichier clickcount.data ?
A priori, il ne contient qu'un nombre (le nombre de clic).
la fonction sert à :
- lire le nombre inscrit dans le fichier ;
- l'incrémenter de 1 ;
- enregistrer le nouveau nombre.

Aucune trace d'un identifiant permettant de savoir à quoi se rapporte ce nombre.

Par conséquent, la modification est plus... conséquente !

1/ Soit autant de fichiers que d'identifiant/produit ; (pas terrible comme solution !)
- et on lit dans le "bon" fichier ;

2/ Soit un seul fichier, avec plusieur lignes ; (bonne solution)
- sur chaque ligne :
identifiant/produit:nombre;
ex. :
machun:35;
machdeux:86;
machtrois:42;
...
- il faut alors extraire la "bonne" ligne ;
- et en extraire le "bon" nombre.

Il faut alors modifier le fichier PHP pour :
- récupérer l'identifiant recherché ;
- ouvrir le fichier clickcount.data ;
- le lire ligne par ligne, jusqu'à trouver sur quelle ligne se trouve cet identifiant ;
- extraire le nombre situé sur cet ligne (celui qu'on veut afficher) ;
- l'afficher.

Plus : si la ligne n'est pas trouvée, il faut l'ajouter pour cet identifiant... :
newidrecup:1;

Citation:

Envoyé par lolo34140

... réaliser un site internet (en tant que grand débutant)...

Mais bon. Tout ça me parait bien ambitieux.

Et je dois dire qu'une BONNE REFLEXION/CONCEPTION dès le départ te faciliterait grandement la vie.

Par exemple, au lieu d'un fichier txt, pourquoi ne pas enregistrer dans une base de données ?

Ok. Oui j'avais compris pour le fichier data.
Mon gros problème c'est que j'ai du mal a placer les lignes de code au bon endroit. Je comprend le code dans sont ensemble et quelle est la logique derrière mais pour l'instant je suis pas capable de bien le modifier.

Voici ce que j'ai modifié (sachant que ça ne marche toujours pas):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="s-shapewaysshop" class="leaf snapshot shapewaysshop blog" onclick="gestionClic('compteur1');">
<div id="viewnumber-container">
<span id="compteur1">
<?php
    $str = @file_get_contents('compteur/clickcount.data');
    if($str !== FALSE)
        echo unserialize($str);
    else
        echo 0;
?></span> Views
</div>
</div>
 
<div id="s-iphone5dock" class="leaf snapshot iphone5dock products" onclick="gestionClic('compteur2');">
<div id="viewnumber-container">
<span id="compteur2">
<?php
    $str = @file_get_contents('./compteur/clickcount.data');
    if($str !== FALSE)
        echo unserialize($str);
    else
        echo 0;
?></span> Views
</div>
</div>

dans le php5

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
    sleep(1);
 
    $nbr = 1;
    $_GET['compteur1']
    $_GET['compteur2']
    $str = @file_get_contents('./clickcount.data');
    if($str !== FALSE)
        $nbr = unserialize($str)+1;
 
    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;
 
    file_put_contents('./clickcount.data', serialize($nbr));
?>

dans le js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function gestionClic(id_clics)
{
    http = createRequestObject();
    http.open('get', './compteur/compteur.php5', true);
    http.onreadystatechange = handleAJAXReturn(id_clics);
    http.send('compteur1='+id_clics);
	http.send('compteur2='+id_clics);
}
function handleAJAXReturn(id_clics)
{
    if(http.readyState == 4)
    {
        if(http.status == 200)
        {
            document.getElementById(id_clics).innerHTML = http.responseText;
        } else {
            document.getElementById(id_clics).innerHTML = "<strong>N/A</strong>";
        }
    }
}

et le fichier clickcount.data est le suivant:

Code:

1
2
compteur1:9;
compteur2:15;

merci beaucoup, je commence à mieux comprendre!

10/12/2012, 17h28
Invité

Citation:

Je comprend le code dans sont ensemble et quelle est la logique derrière mais pour l'instant je suis pas capable de bien le modifier.

C'est juste que tu prends le problème à l'envers :
-> tu essaie d'adapter tes besoins au code (celui que tu as trouvé et téléchargé)
=> au lieu d'adapter le code à tes besoins (ce qui suppose une "bonne" réflexion en amont).
penses-y la prochaine fois.
10/12/2012, 17h33
Invité

Il y a encore beaucoup de choses que tu ne maitrises pas (en PHP, ou JavaScript).

Le meilleur conseil à te donner est encore de te dire de lire des tutos, de faire des exercices, et de progresser étape par étape.
=> PHP : Le tutoriel pour grands débutants pressés
10/12/2012, 17h36
lolo34140

Je sais très bien que je prends le problème à l'envers.
Pour l'instant je suis obligé de faire de cette façon car je ne sais pas coder ce genre de chose.
Mon niveau ne me permet pas de partir du début ni même de modifier à ma guise le code. Je prends ce que je trouve sur internet et j'essai de la modifier afin de mieux comprendre et apprendre.

J'avais fais de même lorsque j'ai appris le VBA et maintenant je le maîtrise très bien.

par contre j'ai toujours pas résolu mon problème...

Merci pour ton aide!
10/12/2012, 17h49
Invité

=> FAQ PHP : ouverture/lecture/écriture... d'un fichier.
10/12/2012, 19h35
lolo34140

Ok, merci pour ces conseils.

J'ai beau chercher mais la je bloque pas mal.
Je suis sur que la solution n'est plus très loin en plus!
10/12/2012, 19h54
Invité

Ton erreur est une erreur de compréhension : on n'"envoie" pas TOUS les id de compteurs... mais un seul.

Code:

http.send('compteurId='+id_clics);

On récupère

Code:

$compteurId = $_GET['compteurId'];

A partir de là :

Citation:

- ouvrir le fichier clickcount.data ;
- le lire ligne par ligne, jusqu'à trouver sur quelle ligne se trouve cet identifiant ($compteurId) ;
- extraire le nombre situé sur cet ligne (celui qu'on veut afficher) ;

Lire/écrire... dans un fichier : voir mon précédent message (lien vers la FAQ).

Voir 40 message(s) de cette discussion en une page