De manière "primaire", il est possible de remplir un tableau de données provenant d'une base de données via un seul fichier PHP. Toutefois, ce fichier PHP devra alors également construire toute la page web.

Vu la manière "professionnelle" utilisée ci-dessous, il est très important que les strings renvoyées par la base de données soit encodées en UTF-8 vu l'exigence imposée par la fonction PHP json_encode().

Cette fonction PHP exige que les valeurs du tableau qui lui est passé en paramètre soient codées en UTF-8. Cela implique que la base de données envoye les données encodées en UTF-8. D'où l'indispensable SET NAMES utf8 lors de la connexion à la base de données.

Aussi, les champs de type TEXT ont comme interclassement : utf8-general-ci
à l'exclusion de tout autre interclassement (au risque de gros problèmes ...)

Le fichier HTML contenant un formulaire (et des champs TEXT), servant à alimenter la base de données, aura aussi dans son head : <meta charset="UTF-8" />

La méthode proposée ici fait appel à trois fichiers : *.htm, *.js et *.php.

Par commodité (et logique), ces trois fichiers porteront le même nom (hormis l'extension) et seront situés dans le même dossier.

1. Le fichier HTML assurera la présentation (comme pour les autres pages web du site). C'est lui qui contiendra les fameuses doubles accolades, {{ }} et qui appellera le fichier JS.
2. Le fichier JS appellera le fichier PHP et, après réception du résultat, appellera la méthode w3.displayObject().
3. Le fichier PHP d'interrogera la base de donnés (via une requête SQL), recevra le résultat dans un tableau (de tableaux), passera ce résultat à la fonction fonction PHP json_encode(), pour, finalement, créer un data-object et de le renvoyer au JS appelant (via la fonction/méthode echo).

A priori, cette méthode professionnelle de remplir un tableau semble complexe. Mais, une fois les petits codes HTML, JS et PHP compris, il suffit pratiquement de faire du copier/coller de ces codes pour remplir tout tableau de manière professionnelle. Ces codes sont petits mais très puissants, grâce au framework w3P.js

monTableau.htm :

    ...
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="w3P.css" />
    <script src="w3P.js"></script>
  </head>
  ...
      <table class="w3-table-all w3-hoverable" id="tableau">
        <thead>
          <tr class="w3-black">
            <th onclick="w3.sortHTML('#tableau', '.item', 'td:nth-child(1)')">
              Prénom
            </th>
            <th onclick="w3.sortHTML('#tableau', '.item', 'td:nth-child(2)')">
              Nom
            </th>
            <th>
              GSM
            </th>
            <th>
              E-mail
            </th>
            <th>
              E-mail privé
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="item" data-w3-repeat="lignes">
            <td>
              {{a}}
            </td>
            <td>
              {{b}}
            </td>
            <td>
              {{c}}
            </td>
            <td>
              <a href="mailto:{{d}}">{{d}}</a>
            </td>
            <td>
              <a href="mailto:{{e}}">{{e}}</a>
            </td>
          </tr>
        </tbody>
      </table>
      ...
    <script src="monTableau.js"></script>
  </body>
</html>

Points importants :

• Le fichier HTML doit être encodé (enregistré) en UTF-8.
• charset="UTF-8" : nécessaire puisque la page est encodée en UTF-8.
• w3P.js : Le fichier HTML doit pointer vers le framework JS dont l'appel doit être placé dans le head.
• w3P.css : Pour faire joli, le fichier HTML peut aussi pointer vers un fichier CSS
• tableau : La balise table doit disposer de l'attribut id et la valeur doit correspondre au premier paramètre de la méthode w3.displayObject() utilisée dans le fichier JS.
• data-w3-repeat : La ligne tr à répéter doit disposer de l'attribut (non HTML) data-w3-repeat dont la valeur doit être la clé utilisée dans le data-object retourné par le fichier PHP et utilisé comme second paramètre de la méthode w3.displayObject() utilisée dans le fichier JS.

• {{ }} : Ces doubles accolades sont placées dans le contenu de la bailse identifiée par la valeur du premier paramètre de la méthode w3.displayObject() utilisée dans le fichier JS.

  Ces doubles accolades placées comme valeur d'un attribut HTML peut provoquer une erreur lors de la validation du code HTML, lorsqu'elles sont placées comme valeur d'un attribut.

• tableauPro.js : Enfin, le fichier HTML doit pointer vers le fichier JS utilisant la méthode w3.displayObject() utilisée dans le fichier JS dont l'appel est placé en fin de fichier (juste avant </body>)

Ici, il est possible de trier en cliquant sur le titre des colonnes 1 et 2.

monTableau.js :

w3.getHttpObject("monTableau.php", myFunction);
function myFunction(myObject) {w3.displayObject("tableau", myObject);}

Ce code ne contient que 2 variables (à modifier pour l'adapter à votre site web)

1. tableau : la valeur de l'identifiant de la balise HTML visée par les remplacements
2. monTableau.php : le nom du fichier PHP qui fournira le résultat extrait de la base de données

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    w3.displayObject("tableau", this.responseText);
  }
};
xmlhttp.open("POST", "monTableau.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();

monTableau.php :

<?php
//header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
require("connexion.php");
$sql = "SELECT prenom AS a,nom AS b,num_gsm AS c,e_mail AS d,e_mail_prive AS e FROM ...";
$rep=$bdd->query($sql);
if ($rep===FALSE) sortir(1,"");
$data=$rep->fetchAll(PDO::FETCH_ASSOC);
echo "{\"lignes\":".json_encode($data)."}";
// print_r("{\"lignes\":".json_encode($data)."}");
?>

Ce code ne contient que 2 variables (à modifier pour l'adapter à votre site web)

1. connexion.php : le fichier PHP contenant le code pour se connecter à la base de données.
2. votre requête SQL
   Notez que l'utilisation d'alias permet de rendre le data-object moins lourd.
3. lignes : Nom de la clé présente dans le code HTML

Notez que le code if ($rep===FALSE) sortir(1,""); fait appel à la méthode sortir() définie dans le fichier PHP connexion.php.

Notez également que le code PHP ci-dessus suppose que le module PDO soit installé.

connexion.php :

<?php
$typDB="mysql";
$domaine="https://www.mondomaine.be/"; // ne pas oublier le slash final

$email_gestionnaire="prenom.nom@mondomaine.be"; /* l'adresse doit être valide ! */

if($_SERVER['HTTP_HOST']=="mondomaine.be"){
  $host="";
  $dbname="";
  $root="";
  $password="";
  $prefixT=""; // préfixe des tables
}else{
  $host="localhost";
  $dbname="";
  $root="";
  $password="";
  $prefixT=""; // préfixe des tables
}

$cnx=$typDB.":host=".$host.";dbname=".$dbname;
$options = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8');

try { $bdd = new PDO($cnx, $root, $password, $options); }
catch (Exception $e) { die('Erreur : ' . $e->getMessage()); }

function sortir(){
   // mon code si une requête SQL se passe mal
}
?>