Stocker valeur compteur de clics

**lolo34140** · 10/12/2012, 21h31

Mon problème n'est pas la compréhension ou la logique du problème.

J'ai compris qu'il faut stocker les noms de mes compteur dans une variable puis ensuite rechercher la variable dans le fichier ligne par ligne. Si elle est présente sur une ligne alors on incrémente le nombre de clic, on écrase la précédente valeur, on récupère la valeur et on sauve le fichier.

Mon réel problème est que je ne sais pas vraiment écrire tout cela.

Est ce quelque chose du genre qu'il faut écrire?

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
20
21
22
23
24
25
26
27
28
29
<?php
 
sleep(1);
 
$nbr = 1;
 
$str = @fopen('./clickcount.data', "w");
$compteurId = $_GET['compteurId'];
 
$i = 1;
while (!feof($str)) {
 
$ligne = fgets($str, 1024)
 
if ($compteurId = TRUE) 
{
$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 $i;
file_put_contents('./clickcount.data', serialize($nbr));
 
?>

Merci encore!

**lolo34140** · 10/12/2012, 23h46

J'ai aussi essayé en ajoutant plusieurs fichiers textes (1 pour chaque compteur).
Mais je n'y arrive pas vraiment.

Mon erreur se trouve au niveau de la variable contenant le nom du fichier data.
Car quand je clic ça me créé un fichier ".data" sans nom dans lequel ça compte bien.

Je sais pas comment écrire ce code.
Mais je pense que ca doit être assez simple et j'ai l'impression que ça devrait marcher.

Voici le code php :

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;
    $fichier= $_GET['compteurId'];
    $str = @file_get_contents($fichier.".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($fichier.".data", serialize($nbr));
?>

Je crois que je n'arriverai pas à trouver la solution avant très longtemps!

**lolo34140** · 12/12/2012, 13h30

Personne pour m'aider?
Ça fait un petit moment que je cherche la solution mais je trouve pas!
Merci

Invité · 12/12/2012, 14h16

Pour t'aider, oui.
Pour faire le travail à ta place, non.

Je t'ai mis des liens, pour le lecture/écriture de fichier. Les as-tu lu ?
Les réponse s'y trouvent.
Et je pense t'avoir indiqué la méthodologie à suivre.

**lolo34140** · 12/12/2012, 16h14

Bien sur que j'ai lu les liens.
Malgré cela je ne peux pas apprendre le php en quelques jours.
Je ne souhaite pas non plus être un expert en php mais j'ai simplement besoin de ce petit compteur.

J'ai très bien compris la logique permettant de faire ce que je veux.
Je ne sais pas encore l'écrire malheureusement pour moi...

Voici ce que j'ai fait pour l'instant (après des heures de recherches):

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
20
21
22
23
24
25
26
27
28
29
<?php
    sleep(1);
 
    $nbr = 1;
    $compteurId = $_GET['compteurId'];
    $str = fopen('./clickcount.data','r+');
    $i=0;
 
 
while (!feof($str)) { 
$i++;
$position=explode(";",fgets($str,255)); 
 
if($position[1]==$compteurId) { 
$nbr=$position[2];
$nbr=$nbr++;
 
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;
 
}
}
 
?>

mon fichier txt a donc la structure suivant :

Code :

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

1
2
compteur1;1
compteur2;2

Je pense qu'un code de ce genre devrait peut être marcher. Pour l'instant c'est pas le cas par contre.
J'ai l'impression que j'y suis pas trop loin?

Tes liens m'aident beaucoup! merci!

Il me manque l'expérience...

Invité · 12/12/2012, 16h46

Tu es à ~~1 poil de Q~~ 1% du résultat !
Bravo ! Tu as bien bossé (99%), tu mérites une récompense

N.B. Il faut juste savoir que explode() crée un tableau (array), et qu'un array commence à l'index 0 (pas 1) :

(en ajoutant quelques tests,) ça donne :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
//   sleep(1); // quel interêt ?!? (à SUPPRIMER)
$nbr = 1;
$trouver = false;
if(isset($_GET['compteurId']))
{
	$compteurId = $_GET['compteurId'];
	$str = fopen('./clickcount.data','r+');
	$i = 0;
	while ($str && !feof($str))
	{
		$i++;
		$position = explode(";",fgets($str,255)); // séparation : nom_compteur;nombre_clic
		if(isset($position[0]) && $position[0]==$compteurId) {
			$nbr = $position[1];
			// incrémentation du compteur (nombre de clics)
			$nbr++;
			// on enregistre la nouvelle valeur dans le fichier
			// ??? PARTIE MANQUANTE !
			// on affiche à l'écran
			echo $nbr;
			// intérêt des header ?!? (à SUPPRIMER)
			//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");
		}
		if($trouver == true) {
			break; // on arrete la recherche (sortie du while)
		}
	}
}
?>

Oups ! Il manque une étape :
=> écrire dans le fichier : $nbr++; (incrémenter le nombre de clic sur la ligne concernée).
C'est ton nouveau défi !

**lolo34140** · 12/12/2012, 17h34

Merci beaucoup!

Pour l'écriture je pensais à ça :

Code :

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

fwrite($str,$nbr);

Mais ça ne marche pas!
Je continue de chercher

Invité · 12/12/2012, 18h02

Tiens, c'est cadeau :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
$nbr = 1;
$trouver = false;
if(isset($_GET['compteurId']))
{
	$compteurId = $_GET['compteurId'];
	$fichier = './clickcount.data';
	$str = fopen($fichier,'r+');
	$i = 0;
	$newline = array();
	while ($str && !feof($str))
	{
		$i++;
		$line = fgets($str,255);
		$position = explode(";",$line); // séparation : nom_compteur;nombre_clic
		if(isset($position[0]) && $position[0]==$compteurId) {
			// incrémentation du compteur (nombre de clics)
			$nbr = $position[1]+1;
			// on enregistre la nouvelle ligne
			$newline[] = $position[0].';'.$nbr.PHP_EOL; // PHP_EOL = passage à la ligne
			// on affiche à l'écran
			echo $nbr;
		} else {
			// sinon, on garde la ligne
			$newline[] = $line;
		}
	}
	// On ré-écrit le fichier
	$newlines = implode('', $newline);
	$new = fopen($fichier,'r+');
	$ok = fwrite($new, $newlines);
	fclose($new); 
}
?>

N.B. Crois-le ou pas, mais je n'en connaissais pas beaucoup plus que toi en lecture/écriture de fichier en PHP...

Par contre, j'ai cherché (comme toi !), et trouvé (ce que tu aurais faire par réussir)
Maintenant, je sais. Et toi aussi.

**lolo34140** · 12/12/2012, 18h19

merci.

Par contre ça marche toujours pas.

Les compteurs ne s'incrémentent pas et n'affichent rien.
Les compteurs dans le fichier data ne bougent pas.

J'ai l'impression que ça vient pas vraiment du php mais du 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
function gestionClic(id_clics)
{
	http.send('compteurId='+id_clics);
    http = createRequestObject();
    http.open('get', './compteur/compteur.php5', true);
    http.onreadystatechange = handleAJAXReturn(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>";
        }
    }
}

J'ai l'impression que c'est l'identifiant du compteur qui va pas qui n'est pas reconnu dans le php.

Enfin c'est qu'une impression

Invité · 12/12/2012, 18h55

Voici une version optimisée du script (une autre façon de s'y prendre) :

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
20
21
22
23
24
25
26
27
28
29
30
<?php
$nbr = 1;
$trouver = false;
if(isset($_GET['compteurId']))
{
	$compteurId = $_GET['compteurId'];
	$fichier = './clickcount.data';
	$lines = file($fichier); // Place le contenu du fichier dans un tableau (on suppose que le fichier existe sous peine d'avoir une erreur)
	foreach($lines as $index => $line)
	{
		$split = explode(";",$line); // séparation : nom_compteur;nombre_clic
		if(isset($split[0]) && $split[0]==$compteurId) {
			// incrémentation du compteur (nombre de clics)
			$nbr = $split[1]+1;
			// on enregistre la nouvelle ligne
			$lines[$index] = $split[0].';'.$nbr.PHP_EOL; // PHP_EOL = passage à la ligne
			// on affiche à l'écran
			echo $nbr;
			$trouver = true;
		}
		if($trouver == true){
			break;
		}
	}
	// On ré-écrit le fichier
	$newfile = implode('', $lines);
	$new = fopen($fichier,'r+');
	$ok = fwrite($new, $newfile);
}
?>

Ce script PHP fonctionne.
Pour vérifier si tu récupères bien le nom du compteur, tu peux ajouter :

Code php :

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

1
2
			// on affiche à l'écran
			echo $compteurId.' : '.$nbr;

Sinon, montre-nous le fichier contenant le HTML et le JavaScript
ans le fichier JavaScript, ajoute aussi :

Code :

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

alert(id_clics);

**lolo34140** · 12/12/2012, 19h15

ok.

Bon j'ai changer le php.
Avec le display alert on voit bien que les id des compteurs sont les bons quand je clic sur ma page : http://freakyshape.com/

Cependant le fichier clickcount.data ne se met pas à jour. Les compteurs ne sont pas incrémenté.

voici mes codes (pour le html alors la je suis pas sur du tout sur du code, c'est toujours celui d'origine...):

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
<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 $str;
    else
        echo 0;
?>
</span> Views
</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 $str;
    else
        echo 0;
?>
</span> Views
</div>
</div>

pour le 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
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('compteurId='+id_clics);
	alert(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 php est le même que précédement.

Pour le fichier clickcount.data (au cas ou je me plante) :

Code :

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

1
2
compteur1;1
compteur2;1

**lolo34140** · 13/12/2012, 14h19

Bon je pense que dans le code html, l'affichage du compteur ne va pas.
Il faut, je pense, changer cette partie en php :

Code php :

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

1
2
3
4
5
6
7
<?php
    $str = @file_get_contents('./compteur/clickcount.data');
    if($str !== FALSE)
        echo $str;
    else
        echo 0;
?>

Par contre je comprends toujours pas pourquoi ça ne compte pas à chaque clic.
Mon fichier data ne s'incrémente toujours pas.

Invité · 13/12/2012, 15h01

Tu peux faire une fonction d'affichage, sur le même modèle que celui d'incrémentation :
(à toi de comparer, pour voir les changements)

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
20
<?php
function affiche_compteur($compteurId)
{
	$trouver = false;
	$fichier = './clickcount.data';
	$lines = file($fichier); // Place le contenu du fichier dans un tableau (on suppose que le fichier existe sous peine d'avoir une erreur)
	foreach($lines as $index => $line)
	{
		$split = explode(";",$line); // séparation : nom_compteur;nombre_clic
		if(isset($split[0]) && $split[0]==$compteurId) {
			// on affiche à l'écran
			return $nbr; // retourne le nombre (compteur)
			$trouver = true;
		}
		if($trouver == true){
			break;
		}
	}
}
?>

Et dans le HTML :

Code php :

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

<div id="compteur1"><?php affiche_compteur('compteur1'); ?></div>

**lolo34140** · 13/12/2012, 15h31

Merci encore!

Mais la je comprends vraiment pas.

Ni ça ne s'affiche ni ça compte. Je vois pas pourquoi.

Code html :

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

1
2
3
4
5
6
7
<div id="s-shapewaysshop" class="leaf snapshot shapewaysshop blog" onclick="gestionClic('compteur1');">
<div id="viewnumber-container">
<div id="compteur1">
<?php affiche_compteur('compteur1'); ?>
</div> Views
</div>
</div>

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(id_clics)
{
 
    http = createRequestObject();
    http.open('get', './compteur/compteur.php5', true);
    http.onreadystatechange = handleAJAXReturn(id_clics);
    http.send('compteurId='+id_clics);
    alert(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>";
        }
    }
}

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
20
21
22
23
24
25
26
27
28
29
30
<?php
$nbr = 1;
$trouver = false;
if(isset($_GET['compteurId']))
{
	$compteurId = $_GET['compteurId'];
	$fichier = './clickcount.data';
	$lines = file($fichier);
	foreach($lines as $index => $line)
	{
		$split = explode(";",$line); // séparation : nom_compteur;nombre_clic
		if(isset($split[0]) && $split[0]==$compteurId) {
			// incrémentation du compteur (nombre de clics)
			$nbr = $split[1]+1;
			// on enregistre la nouvelle ligne
			$lines[$index] = $split[0].';'.$nbr.PHP_EOL; // PHP_EOL = passage à la ligne
			// on affiche à l'écran
			echo $compteurId.' : '.$nbr;
			$trouver = true;
		}
		if($trouver == true){
			break;
		}
	}
	// On ré-écrit le fichier
	$newfile = implode('', $lines);
	$new = fopen($fichier,'r+');
	$ok = fwrite($new, $newfile);
}
?>

Invité · 13/12/2012, 16h33

Mais la je comprends vraiment pas.
Ni ça ne s'affiche ni ça compte. Je vois pas pourquoi.

Ce n'est pas ça qui nous aidera à comprendre... ni à résoudre le problème.

Fais un minimum d'effort/recherche de solution personnels :

mets des echo (PHP), des alert (Javascript),...
les variables sont-elles bien transmises ?
les fonctions sont-elles bien appelées ?
les chemins vers les fichiers sont-ils corrects ?
...

Bref, apprends à tester/vérifier/déboguer seul tes scripts.

Code :

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

    http.open('get', './compteur/compteur.php5', true);

Je vois que "compteur.php5" est dans un dossier "compteur".
=> il faut donc vérifier TOUS les chemins relatifs (vers clickcount.data).

Code :

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

	$fichier = './clickcount.data';

Et si ça ne suffit pas, mets-nous la totalité de ton code (et pas juste des bouts par ci, par là).
En tout cas, le code nécessaire est suffisant, en incluant la structure HTML/PHP/JS des fichiers.
Qu'on vérifie au moins que tout est à sa place.

**lolo34140** · 13/12/2012, 17h00

Merci encore pour ces conseils!

Ce qui semble être bon d'après mes informations :

- les chemins semblent être bon puisque quand je cherchais le code php pour incrémenter le compteur, de temps en temps j'arrivais à modifier le fichier clickcount.data (soit il devenait vide, soit un N; s'affichait sur la première ligne (les autres étant effacées))

A savoir que dans mon dossier compteur il y a le fichier data et php.

- j’appelle bien dans mon code html le javascript compteur-click.

-En cliquant sur ma page, je récupère bien le bon identifiant du compteur.

Pourtant ni ça ne compte ni ça ne s'affiche.

Ces deux problèmes sont apparus depuis que le javascript a été modifié.
Depuis que id_clics entre les parenthèses de

Code :

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

function gestionClic(id_clics)

est apparu plus rien ne marche. Pourtant cela est nécessaire pour plusieurs compteur.

Le compteur que j'avais trouvé au départ (qui ne marchait que pour un seul compteur) marchait bien avec la même structuration, les mêmes noms de fichiers et répertoires.

Je joins mes fichiers sources "utiles" où sont présent les codes nécessaires à la fonction compteur.

Invité · 13/12/2012, 17h44

Mets tes scripts ici.
Je ne vais pas ouvrir l'archive.

**lolo34140** · 13/12/2012, 17h59

ok.

index.html (code complet):

Code html :

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html class="no-js" lang="en"> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
<head>
 
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<meta name="description" content="@description"> 
<meta name="author" content="Sho Rust"> 
<meta name="keywords" content="Design,Interactive,Motion,Illustration,Creative Direction,Art Director"> 
 
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/index_light.css" type="text/css"  media="screen, tv, projection, handheld"/> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 
<style type="text/css">
                body {
        min-height: 100%;
        background-size: cover;
        background-image: url(freakyshapefont.jpg);
        background-repeat: no-repeat;
        background-position: top;
        background-color: #d9d9d9;
}
</style>     
 
 
</head>
 
<body lang="en">
 
<div id="container">
<div id="outer-container">
 
<div id="outer-container2">
<Dtext contenteditable="true">FREAKYSHAPE</Dtext>
</div>
<div id="outer-container3">
<Etext contenteditable="true">Design, Tech & Art</Etext>
</div>
 
    <div id="tags" class="noselect">
    <div class="thick-divider"></div>
    <div class="nest snapshot-nest parent-is-snapshot blog-nest  products-nest        download-nest  shop-nest">
 	<div class="tag snapshot-tag blog" id="blog">Blog</div>
	<div class="tag snapshot-tag products" id="products">Products</div>
	<div class="tag snapshot-tag download" id="download">Download</div>
	<div class="tag snapshot-tag shop" id="shop">Shop</div>
    <div class="tag snapshot-tag" id="snapshot">All</div>
	<div class="thin-divider"></div></div>
  	<div class="nest blog-nest parent-is-blog">
	<div class="thin-divider"></div></div>
	<div class="nest products-nest parent-is-products">
	<div class="thin-divider"></div></div>
    <div class="nest download-nest parent-is-download">
    <div class="thin-divider"></div></div>
    <div class="nest shop-nest parent-is-shop">
	<div class="thin-divider"></div>
    </div>
    <div class="nohide nosort options">
  <!--<input id="search-field" type="text" name="Search" />-->
  <span class="sorting">
    <span id="sbd" class="sort-option" title="Sort by Date"></span>
    <span id="sbc" class="sort-option" title="Sort by Category"></span>
    <span id="sbr" class="sort-option" title="Shuffle"></span>
  </span>
</div>
</div>
 
 
 
<div id="snapshot-container"  class="noselect" sorting="category"  >
 
<div id="s-shapewaysshop" class="leaf snapshot shapewaysshop blog" onclick="gestionClic('compteur1');">
<a class="snapshot-link" href="javascript:window.open('http://www.shapeways.com/shops/FreakyShape','_newtab');"><img src="http://www.freakyshape.com/Post%20thumbnail%20images/Dock.jpg" width="350" height="262" class="projectThumb"/><div class="projectFrame">
<h3><span class="projectTitle">iPhone 5 Dock</span><span class="projectDescription" ><p style="margin: 9px 0 0">Dock compatible with the lightning cable. You just need to put in place the lightning cable and to plug your iPhone!</p></span>
<span class="projectDate" ><h><hr>10 Oct 2012 |</span></h3>
</div></a>
<div id="viewnumber-container">
<div id="compteur1">
<?php affiche_compteur('compteur1'); ?>
</div> Views
</div>
<div id="social-container">
<a id="facebook" title="Share on Facebook" href="javascript:window.open('http://www.facebook.com/share.php?u=http://shpws.me/lmkx',width=650,height=300);" onclick="return fbs_click()" target="_blank" ><img  src="images/blank.png" alt="share" class="facebook" /></a>
<a id="twitter" title="Tweet" href="javascript:window.open('https://twitter.com/share?url=http://shpws.me/lmkx',width=650,height=300);" onclick="return fbs_click()" target="_blank" ><img src="images/blank.png" alt="tweet" class="twitter"/></a>
<a id="google" title="Share on Google+" href="javascript:window.open('https://plusone.google.com/_/+1/confirm?hl=fr&url=http://shpws.me/lmkx',width=650,height=300);" onclick="return fbs_click()" target="_blank" ><img src="images/blank.png" alt="plusone" class="google"/></a>
</div>
</div>
 
<div id="s-iphone5dock" class="leaf snapshot iphone5dock products" onclick="gestionClic('compteur2');">
<a class="snapshot-link" href="javascript:window.open('http://www.shapeways.com/shops/FreakyShape','_newtab');"><img src="Post thumbnail images/Freakyshape shop.jpg" width="400" height="250" class="projectThumb" alt="Quadrant"/><div class="projectFrame">
<h3><span class="projectTitle">Product</span><span class="projectDate"> &mdash; TBA</span></h3><div class="ribbon-wrapper">
<div class="ribbon">New!</div></div>
</div></a><p></p>
<div id="viewnumber-container">
<div id="compteur2">
<?php affiche_compteur('compteur2'); ?></div> Views
</div>
</div>
 
<div id="s-3Dprinter" class="leaf snapshot 3Dprinter blog">
<a class="snapshot-link" href="http://www.shapeways.com/shops/FreakyShape"><img src="Post thumbnail images/Freakyshape shop.jpg" width="250" height="150" class="projectThumb" alt="Quadrant"/><div class="projectFrame">
<h3><span class="projectTitle">Blog</span><span class="projectDate"> &mdash; TBA</span></h3>
</div></a>
</div>
 
<div id="s-vgraphenecase" class="leaf snapshot vgraphenecase shop">
<a class="snapshot-link" href="http://www.shapeways.com/shops/FreakyShape"><img src="Post thumbnail images/Freakyshape shop.jpg" width="250" height="150" class="projectThumb" alt="Quadrant"/><div class="projectFrame">
<h3><span class="projectTitle">Shop</span><span class="projectDate"> &mdash; TBA</span></h3>
</div></a>
</div>
 
<div id="s-rspbcase1" class="leaf snapshot rspbcase1 download">
<a class="snapshot-link" href="http://www.shapeways.com/shops/FreakyShape"><img src="Post thumbnail images/Freakyshape shop.jpg" width="350" height="175" class="projectThumb" alt="Quadrant"/><div class="projectFrame">
<h3><span class="projectTitle">Download</span><span class="projectDate"> &mdash; TBA</span></h3><div class="ribbon-wrapper">
<div class="ribbon">New!</div></div>
</div></a>
</div>
 
<div id="s-iphone5dock" class="leaf snapshot iphone5dock products">
<a class="snapshot-link" href="http://www.shapeways.com/shops/FreakyShape"><img src="Post thumbnail images/Freakyshape shop.jpg" width="350" height="175" class="projectThumb" alt="Quadrant"/><div class="projectFrame">
<h3><span class="projectTitle">Product</span><span class="projectDate"> &mdash; TBA</span></h3><div class="ribbon-wrapper">
<div class="ribbon">New!</div></div>
</div></a>
</div>
 
</div>
 
 
           <div id="footer-wrapper" class="noselect">
<div id="footer">
      <span class="goto-top switch" style="font-size:10px;letter-spacing:1px;text-transform:uppercase;">Top</span>
      <p class="smaller" style="font-size:10px;letter-spacing:1px;text-transform:uppercase;"><span class="MoveUp">&copy; Copyright FreakyShape 2012 
      <span class=share" style="margin-left:20px;font-size:10px;letter-spacing:1px;text-transform:uppercase;">SOCIAL → <a href="https://twitter.com/freakyshape">Twitter</a> </span>
      </span><span id="footer-creds">
      <br /><br />
<a href="http://www.imingo.net" target=_top>
<img src="http://www.imingo.com/services/compteur/icptgr.php?id=freakyshape"
 name="imingo.com" border="0" alt="un compteur pour votre site"></a>
</div>
</div>
 
 
 
 
</div>
<script type="text/javascript">
document.getElementById('footer').style.display = 'none';
</script>        
<script type="text/javascript">
document.getElementById('outer-container').style.display = 'none';
</script>
 
 
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
 
<script type="text/javascript" src="js/jquery.freetile.min.js"></script>
<script type="text/javascript" src="js/jquery.tinysort.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/init.min.js"></script>
<script type="text/javascript" src="js/compteur-click.js"></script>
<script type="text/javascript" src="js/affiche_compteur.js"></script>
</body>
 
</html>

code 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(id_clics)
{
 
    http = createRequestObject();
    http.open('get', './compteur/compteur.php5', true);
    http.onreadystatechange = handleAJAXReturn(id_clics);
	http.send('compteurId='+id_clics);
	alert(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>";
        }
    }
}

code 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
20
21
22
23
24
25
26
27
28
29
30
31
<?php
$nbr = 1;
$trouver = false;
if(isset($_GET['compteurId']))
{
	$compteurId = $_GET['compteurId'];
	$fichier = './clickcount.data';
	$lines = file($fichier);
	foreach($lines as $index => $line)
	{
		$split = explode(";",$line); // séparation : nom_compteur;nombre_clic
		if(isset($split[0]) && $split[0]==$compteurId) {
			// incrémentation du compteur (nombre de clics)
			$nbr = $split[1]+1;
			// on enregistre la nouvelle ligne
			$lines[$index] = $split[0].';'.$nbr.PHP_EOL; // PHP_EOL = passage à la ligne
			// on affiche à l'écran
			echo $compteurId.' : '.$nbr;
			$trouver = true;
		}
		if($trouver == true){
			break;
		}
	}
	// On ré-écrit le fichier
	$newfile = implode('', $lines);
	$new = fopen($fichier,'r+');
	$ok = fwrite($new, $newfile);
}
 
?>

code affiche_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
20
<?php
function affiche_compteur(compteurId)
{
	$trouver = false;
	$fichier = './clickcount.data';
	$lines = file($fichier); // Place le contenu du fichier dans un tableau (on suppose que le fichier existe sous peine d'avoir une erreur)
	foreach($lines as $index => $line)
	{
		$split = explode(";",$line); // séparation : nom_compteur;nombre_clic
		if(isset($split[0]) && $split[0]==$compteurId) {
			// on affiche à l'écran
			return $nbr; // retourne le nombre (compteur)
			$trouver = true;
		}
		if($trouver == true){
			break;
		}
	}
}
?>

fichier de données clickcount.data :

Code :

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

1
2
compteur1;9
compteur2;8

structure des dossiers :

/index.html
/compteur/clickcount.data
/compteur/compteur.php5
/compteur/affiche_compteur.php5
/js/compteur-click.js

Invité · 13/12/2012, 19h28

Bon.
J'ai réécrit entièrement ces fichiers :

compteur-click.js (voir Web 2.0, allez plus loin avec AJAX et XMLHttpRequest) :

Code javascript :

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
// Création de l'objet XmlHttpRequest
function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest) { 		/* Firefox et autres */
		xhr = new XMLHttpRequest(); 
	} else if(window.ActiveXObject) { 	/* Internet Explorer */
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	} else { 	/* XMLHttpRequest non supporté par le navigateur */
		   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		   xhr = false; 
	} 
	return xhr;
};
// gestion des Clics : incrémentation/modification/affichage
function gestionClic(id_clics)
{
	var xhr = getXhr();
	xhr.onreadystatechange = function()
	{
		// si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			// on affiche le résultat (html) dans le div
			document.getElementById(id_clics).innerHTML = xhr.responseText;
		}
	};
	// fichier a executer et envoi des parametres par POST
	xhr.open('POST', './compteur/compteur.php', true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// on poste les parametres
	xhr.send('compteurId='+id_clics);
}

compteur.php => extension .php (et pas .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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
$nbr = 1;
$trouver = false;
if(isset($_POST['compteurId']))
{
	$compteurId = $_POST['compteurId'];
	$fichier = './clickcount.data';
	$lines = file($fichier);
	foreach($lines as $index => $line)
	{
		$split = explode(";",$line); // séparation : nom_compteur;nombre_clic
		if(isset($split[0]) && $split[0]==$compteurId) {
			// incrémentation du compteur (nombre de clics)
			$nbr = $split[1]+1;
			// on enregistre la nouvelle ligne
			$lines[$index] = $split[0].';'.$nbr.PHP_EOL; // PHP_EOL = passage à la ligne
			$trouver = true;
		}
		if($trouver == true){
			break;
		}
	}
	if($trouver == true){
		// On ré-écrit le fichier
		$newfile = implode('', $lines);
		$new = fopen($fichier,'r+');
		$ok = fwrite($new, $newfile);
		// on affiche le compteur
		echo $nbr;
	} else {
		echo 'N/A';
	}
}
?>

- Le compteur s'incrémente.
- le fichier data se modifie.

La suite au prochain numéro......
Comme le fichier index.html a l'extension .html (!!), on ne peut pas y mettre du code PHP.
~~<?php affiche_compteur('compteur1'); ?>~~
Pour l'affichage du compteur à l'ouverture de la page, il faudra utiliser JavaScript :

Code html :

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

<body onload="affiche_compteur('compteur1'); affiche_compteur('compteur2');">

Si tu veux essayer toi-même (re-!!), le principe est très similaire à ci-dessus.

Invité · 13/12/2012, 19h38

Allez ! C'est bientôt Noël :

affiche_compteur.php :

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
20
21
22
23
24
25
<?php
$trouver = false;
if(isset($_POST['compteurId']))
{
	$compteurId = $_POST['compteurId'];
	$fichier = './clickcount.data';
	$lines = file($fichier);
	foreach($lines as $index => $line)
	{
		$split = explode(";",$line); // séparation : nom_compteur;nombre_clic
		if(isset($split[0]) && $split[0]==$compteurId) {
			$nbr = $split[1];
			$trouver = true;
		}
		if($trouver == true){
			break;
		}
	}
	if($trouver == true){
		echo $nbr;
	} else {
		echo 'N/A';
	}
}
?>

+ ajoute dans le fichier compteur-click.js :

Code javascript :

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
// affichage des Clics : affichage seul
function affiche_compteur(id_clics)
{
	var xhr = getXhr();
	xhr.onreadystatechange = function()
	{
		// si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			document.getElementById(id_clics).innerHTML = xhr.responseText;
		}
	};
	// fichier a executer et envoi des parametres par POST
	xhr.open('POST', './compteur/affiche_compteur.php', true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// on poste les parametres
	xhr.send('compteurId='+id_clics);
}

+ ajoute dans le fichier index.html :

Code :

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

<body onload="affiche_compteur('compteur1'); affiche_compteur('compteur2');">

Stocker valeur compteur de clics

JavaScript

Discussions similaires

Partager

Partager