Confection d'un compteur de visiteurs - Yhernam/Stage GitHub Wiki

Création d'un compteur de visiteurs du site

Etape 1 : Configurer la base de données

Créer une table pour stocker le compteur des visiteurs.

CREATE TABLE visitors (
 id INT AUTO_INCREMENT PRIMARY KEY,
 count INT NOT NULL
);

Initialiser le compteur à 0.

INSERT INTO visitors (count) VALUES (0);

Etape 2 : Mettre à jour le compteur de visiteurs

Créer un script PHP pour mettre à jour le compteur.

Créer un fichier appelé maj_compteur.php.

<?php
$host = 'localhost';
$dbname = 'nkformation';
$dbusername = 'root';
$dbpassword = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $dbusername, $dbpassword);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Connexion réussie.<br>";
} catch (PDOException $e) {
    die("Erreur de connexion : " . $e->getMessage());
}

$sql = "UPDATE visitors SET count = count + 1 WHERE id = 1";
$stmt = $pdo->prepare($sql);

if ($stmt->execute()) {
    echo "Compteur mis à jour.<br>";
} else {
    echo "Erreur de mise à jour du compteur.<br>";
}
?>

Inclure ce script dans index.html.

Utiliser une requête AJAX pour appeler maj_compteur.php chaque fois que index.html est chargé.

<script>
document.addEventListener("DOMContentLoaded", function() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "admin/maj_compteur.php", true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("Compteur mis à jour avec succès.");
    } else if (xhr.readyState === 4) {
      console.log("Erreur de mise à jour du compteur.");
    }
  };
  xhr.send();
});
</script>

Etape 3 : Afficher le compteur admin.html

Créer un script PHP pour récupérer le compteur de visiteurs.

Créer un fichier appelé compteur.php.

<?php
$host = 'localhost';
$dbname = 'nkformation';
$dbusername = 'root';
$dbpassword = '';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $dbusername, $dbpassword);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Erreur de connexion : " . $e->getMessage());
}

$sql = "SELECT count FROM visitors WHERE id = 1";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$result = $stmt->fetch(PDO::FETCH_ASSOC);

echo $result['count'];
?>

Inclure ce script dans admin.html pour afficher le nombre de visiteurs.

<script>
document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM entièrement chargé et analysé");
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "compteur.php", true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        console.log("Requête terminée avec le readyState: " + xhr.readyState);
          if (xhr.status === 200) {
            console.log("Compteur récupéré avec succès: " + xhr.responseText);
            document.getElementById("visitor-count").innerText = xhr.responseText;
          } else {
            console.log("Erreur de récupération du compteur. Statut: " + xhr.status);
          }
      }
    };
      xhr.send();
  });
</script>

Afficher ce compteur sur index.html :

<div class="container">
 <h2 class="mt-5">Tableau de bord Admin</h2>
 <p>Nombre total de visiteurs : <span id="visitor-count"></span></p>
</div>
⚠️ **GitHub.com Fallback** ⚠️