PHP - MySQL [Retour au menu]
Tableau d'affichage

Affichage élégant des champs d'une table sous forme de tableau

Admettons que nous disposions d'une table ZZ_Celebrite dans la base de données info3000, dont le contenu est ici, qui contient donc 100 enregistrements (Des gens célèbres), avec pas mal de champs, mais notamment 3 champs qui nous intéressent ici : NomCelebrite, Prenom et Salaire. L'idée est de représenter l'ensemble des personnes sous forme d'un tableau un peu comme ceci :

Nom et prénom Salaire
Marcel Dupont 8'500
Robert Durand 14'500
Michael Snort 9'600

avec comme petite particularité : Les salaires supérieurs à 10'000 doivent être affichés avec un fond rose. N'oublions pas que la première ligne doit être la ligne de titre.

Il n'y aura donc qu'une seule feuille affichage.php que vous pouvez directement visualiser ici, qui va contenir ce tableau, et il n'y a aucune interaction possible : C'est juste un affichage statique.

On commence par récupérer les données

Bon ben ça, c'est habituel : On récupère l'ensemble des enregistrements de ZZ_Celebrite dans une variable $Resultat :

<?
  mysql_connect("localhost", "info3000", "MonMotDePasse");
  mysql_select_db("info3000");
  $Resultat = mysql_query("SELECT * FROM ZZ_Celebrite;");
  mysql_close();
?>

Rappel de la syntaxe d'un tableau en HTML

Maintenant, il s'agit de contruire notre tableau en HTML. Comme un tableau se compose-t-il ? Admettons le tableau suivant :

Gauche1 Droite1
Gauche2 Droite2
Gauche3 Droite3

Il est composé de 2 colonnes X 3 lignes. Il mesure 300 pixels de large en tout, la première colonne mesurant 180 pixels, et la 2ème 120 pixels. Il s'écrit comme ceci :

<table width="300">
  <tr>
    <td width="180">Gauche1</td>
    <td width="120">Droite1</td>
  </tr>

  <tr>
    <td>Gauche2</td>
    <td>Droite2</td>
  </tr>

  <tr>
    <td>Gauche3</td>
    <td>Droite3</td>
  </tr>

</table>

Je ne pense pas que ça demande des explications supplémentaires... Les balises <tr> </tr> représentent les différentes lignes. Le tableau va de toute façon commencer par <table width="300"> et se terminer par </table>

Le premier bloc

  <tr>
    <td width="180">Gauche1</td>
    <td width="120">Droite1</td>
  </tr>

Va donc simplement être remplacé par

  <tr>
    <td width="180">Nom et prénom</td>
    <td width="120">Salaire</td>
  </tr>

Ensuite, comme on est pas sensé connaître le nombre d'enregistrements existants dans ZZ_Celebrite, il va y avoir un nombre X de blocs :

  <tr>
    <td> <? echo mysql_result($Resultat , 0 , "NomCelebrite"); ?></td>
    <td> <? echo mysql_result($Resultat , 0 , "Salaire"); ?></td>

  </tr>
  <tr>
    <td> <? echo mysql_result($Resultat , 1, "NomCelebrite"); ?></td>
    <td> <? echo mysql_result($Resultat , 1, "Salaire"); ?></td>

  </tr>

  <tr>
    <td> <? echo mysql_result($Resultat , 2, "NomCelebrite"); ?></td>
    <td> <? echo mysql_result($Resultat , 2, "Salaire"); ?></td>

  </tr>
  Etc.......

En remplaçant le 0, 1,2 etc. automatiquement par l'enregistrement courant, évidemment. En utilisant une instruction for !

Si je voulais simplement écrire OK autant de fois qu'il existe d'enregistrements dans ZZ_Celebrite, j'écrirais ceci :

$NombreEnregistrement = mysql_numrows($Resultat);
for ($Compteur = 1 ; $Compteur <= $NombreEnregistrement ; $Compteur ++)
  {
  echo "OK";
  }

Si maintenant je voulais écrire les noms des gens les uns en dessous des autres, j'écrirais ceci :

$NombreEnregistrement = mysql_numrows($Resultat);
for ($Compteur = 0 ; $Compteur < $NombreEnregistrement ; $Compteur ++)
  {
  echo mysql_result($Resultat , $Compteur , "NomCelebrite");
  echo "<BR>";
  }

Il suffit de corriger un tout petit peu ce code pour avoir la répétition des lignes du tableau :

$NombreEnregistrement = mysql_numrows($Resultat);
for ($Compteur = 0 ; $Compteur < $NombreEnregistrement ; $Compteur ++)
  {
  echo "<TR>";
    // PREMIERE COLONNE : Le prénom, un espace, le nom :
    echo "<TD>";
      echo mysql_result($Resultat , $Compteur , "Prenom");
      echo " ";
      echo mysql_result($Resultat , $Compteur , "NomCelebrite");
    echo "</TD>";

    // DEUXIEME COLONNE : Le salaire
    echo "<TD>";
      echo mysql_result($Resultat , $Compteur , "Salaire");
    echo "</TD>";

  echo "</TR>";
  }

J'ai bien essayé d'écrire les instructions en une seule ligne, comme ceci :

echo "<TD> mysql_result($Resultat , $Compteur , 'Salaire') </TD>";

Et malgré que j'aie bien pensé à remplacer les guillemets de Salaire par des apostrophes, j'ai une erreur à l'exécution.

Listing complet sans les mises en forme

Maintenant, il nous reste à ajouter le début du tableau une seule fois et la fin du tableau. Bon, dans la boucle for, j'ai pensé que c'était plus pratique de me débrouiller avec des echo dans PHP, mais le début et la fin du tableau, on peut peut être se permettre de les placer avant et après le code PHP. Voici la page complète :

<body>
  <table width="300">
  <tr>
    <td width="180">Nom et prénom</td>
    <td width="120">Salaire</td>
  </tr>

  <?
    mysql_connect("localhost", "info3000", "MonMotDePasse");
    mysql_select_db("info3000");
    $Resultat = mysql_query("SELECT * FROM ZZ_Celebrite;");
    $NombreEnregistrement = mysql_numrows($Resultat);
    mysql_close();

    for ($Compteur = 0 ; $Compteur < $NombreEnregistrement ; $Compteur ++)
      {
      echo "<TR>";
        echo "<TD>";
          echo mysql_result($Resultat , $Compteur , "Prenom");
          echo " ";
          echo mysql_result($Resultat , $Compteur , "NomCelebrite");
        echo "</TD>";
        echo "<TD>";
          echo mysql_result($Resultat , $Compteur , "Salaire");
          echo "</TD>";
      echo "</TR>";
      }
  ?>
  </table>
</body>

Constatez que la ligne mysql_close(); est située AU DESSUS du tableau. On aurait pu imaginer qu'une fois la base fermée, on ne puisse plus appeler des fonctions comme mysql_result, mais paradoxalement, ça fonctionne très bien comme ça.

Mise en forme : Le titre en gras sur fond gris

La première ligne de titre doit être écrite en gras, avec un fond gris clair : c'est facile, il suffit de corriger le HTML du départ du tableau comme suit :

<table width="300">
  <tr bgcolor="#CCCCCC">
    <td width="180"><B>Nom et prénom</B></td>
    <td width="120"><B>Salaire</B></td>
  </tr>
  ...

Attention aux balises <B> et </B>, elles doibent bien encadrer chaque ligne, sinon, ça ne fonctionne pas (si on en met une ouvrante avant Nom et prénom et une fermante après Salaire par exemple)

Mise en forme : Les salaires élevés sur fond rose

Concernant les salaires à mettre sur fond rose en cas de salaire supérieur à 10000, il faut inclure un if directement dans la boucle for :

for ($Compteur = 0 ; $Compteur < $NombreEnregistrement ; $Compteur ++)
  {
  echo "<TR>";
  echo "<TD>";
  echo mysql_result($Resultat , $Compteur , "Prenom");
  echo " ";
  echo mysql_result($Resultat , $Compteur , "NomCelebrite");
  echo "</TD>";
  if (mysql_result($Resultat , $Compteur , "Salaire") <= 10000)
    echo "<TD>";
  else
    echo "<TD bgcolor='#FF00FF'>";

  echo mysql_result($Resultat , $Compteur , "Salaire");
  echo "</TD>";
  echo "</TR>";
}

---