Stocker valeur compteur de clics

**lolo34140** · 09/12/2012, 19h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 09/12/2012, 20h49

Bonjour,

Envoyé par lolo34140

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

Oui.

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

**lolo34140** · 09/12/2012, 22h28

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!

**lolo34140** · 10/12/2012, 01h30

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)

xxxxxxxxxxxxxxxx

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!

Invité · 10/12/2012, 09h44

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

Quel est ton niveau de connaissances en programmation ?

**lolo34140** · 10/12/2012, 13h21

Alors voici les codes:

Javascript (compteur-click.js):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Invité · 10/12/2012, 14h13

1/

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>";
        }
    }
}

2/

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Stocker valeur compteur de clics

JavaScript

Vue hybride

Discussions similaires

Partager

Partager