Recherche Tuto compteur de clic

**jeicko** · 06/06/2021, 10h58

Bonjour à tous,

Récemment, on m'a aidé à concevoir une animation qui permet de télécharger un fichier au hasard. Je souhaiterais ajouter une fonctionnalité à ce code :
Un compteur de clic. Ce compteur me permettrait de voir la popularité des téléchargements de chaque fichier (6 au total). Dans l'idéal il serait lié à ma base de donnée.
J'aimerais qu'au clic ça appel une page PHP qui va faire +1 en BDD.

Mon problème : Je n'arrive pas à trouver des tutoriels recents, les seuls qui m'intéressent utilisent des vieilles méthodes obsolètes.

Je vous montre mon code, si jamais quelqu'un a connaissance d'un tutoriel RECENT qui puisse s'adapter à mon code..

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
<div class="hasard-choix anim-f">
            <a href="#">
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
            </a> 
           </div>
 
<div class="hasard-choix anim-g">
            <a href="#">
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
            </a> 
          </div>

Code JS :

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
function melanger(tableau) {
        for (let i = tableau.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          const element = tableau[i];
          tableau[i] = tableau[j];
          tableau[j] = element;
        }
      }
 
      const ar_liens = ["images/test1.zip", "images/test2.zip", "images/test3.zip"];
      const ar_liens2 = ["images/test4.zip", "images/test5.zip", "images/test6.zip"];
 
      const dureeRafrRef = 1000 / 25;
*
      function groupe(liens, parent) {
        let nombClig = 10;
        const ob_cont = document.querySelector(parent);
        const ob_lien = ob_cont.querySelector("a");
        ob_lien.onclick = ev => ev.preventDefault();
        const nl_images = ob_cont.querySelectorAll("svg");
 
        const ar_ordreIndexClig = [];
 
        for (let i = nl_images.length - 1; i >= 0; i--) {
          ar_ordreIndexClig[i] = i;
          const index = i;
          nl_images[i].onclick = function () {
            for (const ob_image of nl_images) {
              ob_image.onclick = null;
            }
 
            let compteur = 0;
            let decalage = 0;
            melanger(ar_ordreIndexClig);
            while (ar_ordreIndexClig[decalage] !== index) {
              decalage++;
            }
 
            let delai = 0;
            const ob_imageClic = this;
            let ob_imageClig = null;
 
            window.requestAnimationFrame(function animation() {
              const tempEcouleNouv = performance.now();
              const dureeRafr = Math.min(tempEcouleNouv - tempsEcoule, dureeRafrRef);
              tempsEcoule = tempEcouleNouv;
 
              if ((delai -= dureeRafr) <= 0) {
                if (nombClig > 0) {
                  nombClig--;
                  if (ob_imageClig !== null) {
                    ob_imageClig.style.visibility = "";
                  }
                }
                let i =
                  ar_ordreIndexClig[(compteur + decalage) % ar_ordreIndexClig.length];
                if (nombClig === 0) {
                  while (nl_images[i].style.visibility === "hidden") {
                    compteur++;
                    i =
                      ar_ordreIndexClig[
                        (compteur + decalage) % ar_ordreIndexClig.length
                      ];
                  }
                }
                (ob_imageClig = nl_images[i]).style.visibility = "hidden";
                if (++compteur >= ar_ordreIndexClig.length) {
                  compteur = 0;
                  melanger(ar_ordreIndexClig);
                  decalage = Number(ar_ordreIndexClig[0] === i);
                }
                delai = 2 * dureeRafrRef;
              }
 
              for (const ob_image of nl_images) {
                if (ob_image.style.visibility !== "hidden") {
                  window.requestAnimationFrame(animation);
                  return;
                }
              }
 
              nl_images[(nl_images.length - 1) * 0.5].style.visibility = "";
 
              const lien = liens[index];
              ob_lien.href = lien;
              ob_lien.onclick = null;
              ob_lien.download = lien.substr(lien.lastIndexOf("/") + 1);
              ob_lien.click();
            });
 
            let tempsEcoule = performance.now();
          };
        }
      }
 
      groupe(ar_liens, ".anim-g");
      groupe(ar_liens2, ".anim-f");

Merci de m'avoir lu

**jeicko** · 08/06/2021, 13h44

Bonjour,

Je suis en train de faire un test avec un tutoriel. Est-ce que quelqu'un pourrait m'aider à adapter mon code aux méthodes PDO svp ?

Code HTML :

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

<a href="https://monsite.com/myclickscript.php?id=34">test clic</a>

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
<?php
 
$connect = new PDO('***');
 
 
if (isset($_GET['id']) && intval($_GET['id']) > 0) {
    $delay = 12*3600;
    $sql_check = sprintf("SELECT COUNT(*) AS test FROM clicks WHERE link_id = %d AND visitor_ip = '%s' AND UNIX_TIMESTAMP(click_at) + %d > UNIX_TIMESTAMP(NOW())", $_GET['id'], $_SERVER['REMOTE_ADDR'], $delay);
    if (mysql_result(mysql_query($sql_check), 0, "test") == 0) {
        $country_sql = "SELECT country FROM ip2nation WHERE ip < INET_ATON('".$_SERVER['REMOTE_ADDR']."') ORDER BY ip DESC LIMIT 0,1";
        $country = mysql_result(mysql_query($country_sql), 0, "country");
        $sql_insert = sprintf("INSERT INTO clicks (link_id, visitor_ip, click_at, country, on_page) VALUES (%d, '%s', NOW(), '%s', '%s')", $_GET['id'], $_SERVER['REMOTE_ADDR'], $country, $_SERVER['HTTP_REFERER']);
        mysql_query($sql_insert);
    }
    $sql_url = sprintf("SELECT url FROM link_table WHERE id = %d", $_GET['id']);
    $url = mysql_result(mysql_query($sql_url), 0, "url");
    header("Location: ".$url);
    exit;
} else {
    header("Location: https://monsite.com/");
    exit;
}
?>

Code SQL :

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
CREATE TABLE IF NOT EXISTS `links` (
  `id` int(11) NOT NULL auto_increment,
  `titel` varchar(75) NOT NULL default '',
  `naam` varchar(35) NOT NULL default '',
  `url` varchar(150) NOT NULL default '',
  `description` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
CREATE TABLE IF NOT EXISTS `clicks` (
  `id` int(10) NOT NULL auto_increment,
  `link_id` int(10) NOT NULL default '0',
  `visitor_ip` varchar(15) NOT NULL default '',
  `click_at` datetime NOT NULL default '0000-00-00 00:00:00',
  `country` char(2) NOT NULL default '',
  `on_page` varchar(50) NOT NULL default '',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Recherche Tuto compteur de clic

PHP & Base de données

Discussions similaires

Partager

Partager