Grâce à l'AJAX, nous pouvons échanger des informations avec un second site web !

Or, un espace pour créer un simple site web statique est souvent "offert" à l'achat d'un nom de domaine. Si vous (ou un ami) disposez d'un site dynamique, votre site - bien qu'initialement statique - pourra échanger des informations avec ce site dynamique et devenir à son tour dynamique !

Toutefois, la gestion d'un site dynamique impose des pré-requis.

Pré-requis

Avoir suivi le mini-cours consacré aux bases de données
Avoir suivi le mini-cours consacré au PHP

Envoyer une information, par exemple, pour incrémenter un compteur de visites de la page d'accueil du site web "statique" vers un second site qui, lui, est "dynamique".

Compteurs

Pour incrémenter un compteur, l'information envoyée peut être vide ! Il s'agit alors d'un simple appel d'une page — souvent écrite en PHP — située sur un autre site (dynamique), mais dédiée à la page web statique ou non (souvent d'un site autonome).

Compteur de clics : JS-PHP-TXT

Exemple : Compter le nombre de téléchargements par mois. Par exemple :

index.htm
index.js
incrementer.php
compteur_wNi8t.txt
compteur_wNi8t.php

Le suffixe _wNi8t garantit la confidentialité.
Il est inutile de suffixer le fichier incrementer.php car son nom apparaît dans le code source JS (accessible).

En résumé,

Le fichier JS ne transmet rien au fichier PHP. Il se contente de l'appeler.
Cet appel lance le code PHP qui trouve la date du jour, y extrait le mois. ("03;") et l'ajoute au fichier TXT.

1. Fichier HTML (sur un site statique ou non. Par exemple : index.htm) :

         <a href="executable.exe" download="unBonProgramme.exe" onclick="incrementer()">téléchargement</a>
      ...
    <script src="index.js"></script>
  <body>
<html>

Un clic sur le lien appelle la fonction incrementer().

Le lien ne peut pas appeler directement le fichier PHP, sinon s'afficherait une nouvelle page web (ou téléchargerait un fichier, comme pour tout lien).

2. Fichier JS (sur un site statique ou non. Par exemple : index.js) :

/* var xhr = null; */

/* Pour éviter de lancer une requête avant que le résultat de la précédente ne soit arrivé
=> xhr soit une variable globale (définie hors de la fonction) */

function incrementer() {

  /* car il n'est pas attendu de réponse */
  /*if (xhr && xhr.readyState != 0) xhr.abort();*/

  xhr = new XMLHttpRequest(); /* ne fonctionne que "on-line" */
  /*xhr.open("GET", "http://www.nomDuSiteDynamique/incrementer.php", true); */
  xhr.open("GET", "incrementer.php", true); /* dans le même dossier que le fichier HTML */
  xhr.send();
}

La fonction incrementer() envoie une requête vide
(= appelle un fichier PHP situé sur un serveur (site dynamique)).

3. Fichier PHP (sur un site dynamique. Par exemple : incrementer.php) :

// script appelé par "index.js" situé sur un site statique
<?php
  $f=fopen("compteur_wNi8t.txt","a"); fwrite($f,date("m;")); fclose($f);
?>

Par exemple, 03; sera ajouté au fichier TXT (si l'appel du fichier PHP a lieu au mois de mars).

4. Fichier TXT (sur un site dynamique. Par exemple : compteur_wNi8t.txt)

02;03;03;03;03;

5. Fichier PHP (sur un site dynamique. Par exemple : compteur_wNi8t.php)

Les fichiers PHP et TXT pourraient avoir un suffixe différent, mais cela n'améliorerait pas la confidentialité.

<?php

/* Appel direct de ce fichier (sécurisé par un suffixe)

NB : Le fichier "compteur_XXXXX.txt" doit contenir au moins 2 dates
 pour permettre une comparaison : $tab[$i] < $tab[$i+1] */

// 1.----- déclarer et remplir $contenu (= contenu du fichier)

// Les deux infos à personnaliser :
$fichier = "compteur_wNi8t.txt"; // au format : 03;03;04;06;06; ... 12;12;01;01
$aaaa = 2022; // année de départ

//$fichier = "compteur_test.txt";
// Si le fichier est vide => erreur
$f = fopen($fichier, "r"); $contenu = fread($f, filesize($fichier)); fclose($f);
//echo $contenu;

// Nombre total d'enregistrements
$tab = explode(";", $contenu); // tableau contenant des 03 04 06 06 ... 12 12 01 01
$nb_dates = count($tab) - 1; // -1 à cause du dernier ";"
echo "Nombre total de téléchargements : $nb_dates

";

if ($nb_dates<2) exit; /* Le fichier *.txt doit contenir au moins 2 dates
pour permettre une comparaison : $tab[$i] < $tab[$i+1] */

$mois=intval($tab[0]); // premier mois = la première donnée
$mois_print = $aaaa . "-" . sprintf("%02d", $mois) . " : "; // prochain libellé
$cpt_mois = 1;
for ($i = 0; $i  < $nb_dates-1; $i++) { // boucle des dates
  if ($tab[$i]  < $tab[$i+1]){ // changement de mois

    echo $mois_print . $cpt_mois . " <br>"; // affichage du résultat

    // réinitialisations (le correcteur lié à RapidPHP considère que "réinitialisation" n'existe pas
    $mois=intval($tab[$i+1]); // changement de mois
    $cpt_mois = 1; // = ré-initialisation du compteur du nombre de calculs
    $mois_print = $aaaa . "-" . sprintf("%02d", $mois) . " : "; // prochain libellé

  }else{
    if ($tab[$i] > $tab[$i+1]) { /* changement d'année
      NB : on suppose qu'il y aura au moins un calcul par an */
      echo $mois_print . $cpt_mois . " <br>"; // affichage du résultat du mois de décembre

      // réinitialisations
      $aaaa++; $cpt_mois = 1; // = réinitialisation du compteur du nombre de calculs
      $mois=intval($tab[$i+1]); // changement de mois
      $mois_print = $aaaa . "-" . sprintf("%02d", $mois) . " : "; // prochain libellé
    }else{
      $cpt_mois++;
    }
  }
}
echo $mois_print . $cpt_mois . " <br>"; // affichage du résultat du dernier mois
?>

Présentation du contenu du fichier TXT :

Nombre total de téléchargements : 5

2022-02 : 1
2022-03 : 4

Compteur de visites : JS-PHP-MySQL

Envoyer une information, par exemple, pour incrémenter un compteur de visites de la page d'accueil du site web "statique" vers un second site qui, lui, est "dynamique" (PHP-MySQL).

Pour incrémenter un compteur, cette information envoyée peut être vide ! Il s'agit alors d'un simple appel d'une page - souvent écrite en PHP - située sur un autre site (dynamique), mais dédiée à la page web statique. Évidemment, le code PHP n'acceptera d'exécuter l'ordre que s'il provient de la page statique.

Fichier HTML (sur le site statique) :

      ...
    <script src="incremente.js"></script>
  <body>
<html>

incremente.js (sur le site statique) :

var xhr = null;

incremente(); /* appel de la fonction qui suit */
function incremente() {

    /* Pour éviter de lancer une requête avant que le résultat de la précédente ne soit arrivé
    => xhr soit une variable globale (définie hors de la fonction) */
    if (xhr && xhr.readyState != 0) xhr.abort();

  xhr = new XMLHttpRequest();
  xhr.open("GET", "http://www.nomDuSiteDynamique/incremente.php", true);
  xhr.send();
}

L'appel du fichier HTML (par le navigateur) appelle le fichier JS (lors de la lecture du code HTML) et qui exécute immédiatement l'instruction incremente(); qui appelle la fonction incremente() qui appelle un fichier PHP situé sur un site dynamique.

incremente.php (sur le site dynamique) :

// script appelé par "incremente.js" situé sur un site statique
<?php
  require("connexion.php");
  $bd->exec("UPDATE compteurs SET nb_clics=nb_clics+1");
?>

connexion.php est le fichier qui crée un objet ($bd) sur lequel on demande l'exécution d'une requête SQL.
Ce code PHP ne tient pas compte de la provenance de l'appel (de l'URL appelante)

La table "compteurs" peut gérer plusieurs compteurs. Pour cela, il suffit d'ajouter un champ supplémentaire : id_compteur. Vous pouvez ainsi gérer des dizaines (et même plus !) de compteurs correspondant à autant de pages web (parfois d'un même site statique)

Pour tenir compte du numéro du compteur, les codes JavaScript et PHP changent peu

incremente.js :

var xhr = null;

incremente(17) /* 17 = numéro du compteur attribué par le responsable du site dynamique */
function incremente(id_compteur) {

    /* Pour éviter de lancer une requête avant que le résultat de la précédente ne soit arrivé
    => xhr soit une variable globale (définie hors de la fonction) */
    if (xhr && xhr.readyState != 0) xhr.abort();

  xhr = new XMLHttpRequest();
  xhr.open("GET", "http://www.nomDuSiteDynamique/incremente.php?id="+id_compteur, true);
  xhr.send();
}

incremente.php (sur le site dynamique) :

// script appelé par "incremente.js" situé sur un site statique
<?php
if(isset($_GET['id'])) {
  $id=$_GET['id'];
  require("connexion.php");
  $bd->exec("UPDATE led_compteurs SET nb_clics=nb_clics+1 WHERE id_compteur=$id");
}
?>

Pour afficher le nombre de visites sur le site statique, vous pouvez y placer un lien vers un fichier PHP (situé sur le site dynamique).

Code HTML

<a href="http://www.nomDuSiteDynamique/nb_visites.php?id=17">Nombre de visites</a>

Généralement, ce code est placé dans un fichier HTML inconnu du public; voire dans une partie du site, sécurisée par un couple de fichiers spéciaux (.htaccess et .htpasswd)

Code PHP

<?php
if(isset($_GET['id'])) {
  $id=$_GET['id'];
  require("connexion.php");
  $sql="SELECT nb_clics FROM compteurs WHERE id_compteur=$id";
  $rep=$bdd->query($sql);
  if ($rep===FALSE) sortir(1,$sql);
  echo ($rep->fetchColumn());
}
?>

sortir() est une fonction qui permet de sortir proprement (qui affiche - via du code HTML - qu'un problème est survenu)

Adresse IP

Au lieu d'envoyer un numéro de compteur, on peut envoyer l'adresse IP du visiteur qui, par exemple, connaît les codes d'accès à une partie réservée.

L'affichage de l'adresse IP du visiteur est expliqué sur la page ajax_info.htm

Le site dynamique gérera alors une table qui ajoutera automatiquement la date et heure de cette connexion à cette partie sécurisée du site statique.

Fichier HTML (sur le site statique) :

      ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="ip_enreg.js"></script>
  <body>
<html>

Ce fichier est le fichier HTML appelé après avoir donné les bons codes d'accès à la partie sécurisée, généralement un index.htm d'un dossier.
Ce fichier HTML appelle aussi le fichier jquery.min.js

ip_enreg.js (sur le site statique) :

var xhr = null;
var ip_address;

$.getJSON("//freegeoip.net/json/?callback=?", function (data) {
  ip_address=data.ip;

  if (xhr && xhr.readyState != 0) xhr.abort();

  xhr = new XMLHttpRequest();
  xhr.open("GET", "http://www.nomDuSiteDynamique/ip_enreg.php?ip="+ip_address, true);
  xhr.send();

});

ip_enreg.php (sur le site dynamique) :

<?php // script dédié à l'URL : ...

if(isset($_GET['ip'])) {
  $ip=$_GET['ip'];
    require("connexion.php");
    $bdd->exec("INSERT INTO cnx (IP,dattime) VALUES ('$ip',NOW());");
}

?>

Pour afficher les adresses IP de ceux qui sont entrés dans la partie sécurisée du site statique, il suffit de placer un lien tel que :
<a href="http://www.nomDuSiteDynamique/ip_list.php">Liste des adresses IP</a>

ip_list.php (sur le site dynamique) :

<?php // script dédié à l'URL ...
  require("connexion.php");
  $sql="SELECT dattime,IP FROM cnx ORDER BY dattime DESC;";
  $rep=$bdd->query($sql); if ($rep===FALSE) sortir(1,$sql);
?>

<!DOCTYPE html>
<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
<head>
<meta charset="UTF-8" />
  <title>Liste des adresses IP</title>
  <meta name="robots" content="noindex, nofollow" />
</head>
<body>
<p id="titre">Liste des adresses IP</p>
<p>de ceux ayant consulté la partie sécurisée du site</p>
<table>

<?php while ($ligne = $rep->fetch()){
    $temps=$ligne['dattime'];
    $ip=$ligne['IP'];
    echo"<tr><td>$temps</td><td>$ip</td></tr>";
  } ?>

</table></body></html>