Matthieu Lombard [ mediabox devblog ]

Sur le forum dreamweaver, une question récurente réapparait fréquemment qui est la mise en page et l'affichage de données à la sortie de base de données.

Simple ? Oui, mais pour les personnes se lançant pied joins dans le domaine de la programmation web, cela parait à première vue beaucoup plus compliqué ;). Et rappelons nous que ce sont finalement nos bases d'apprentissage du couple Php / Mysql

Effectivement, après des heures d'applications de balises Html au milieu de son incompréhensible code Php (j'en fais trop peut-être ? ^^) avec un <td> par-ci, un </tr> par là ... et le résultat ? vous devinez ? oui on est d'accord alors voyons ça calmement

Nous allons effectuez ce test sur une table "stats_navigateur" qui répertorie les statistiques de quelques navigateurs selon quelques critères : Nom (nom), Date de sortie (date_sortie), Pourcentage d'utilisation il a 1 an (pctu_an), Pourcentage d'utilisation le mois dernier (pctu_mois), Evolution (evolution).

• Statique
• Nombre de colonnes

Statique

En sortie, nous allons utilisez un tableau (<table>...</table>) car les données stockées sont de type tabulaires et sémantiquement, le balisage sera conforme aux normes du W3C.

<!-- On commence par écrire l'entête du tableau qui ne va pas se répéter -->
<table summary="Statistiques sur l'utilisation de différents navigateurs">
  <tr>
    <th>Nom</th>
    <th>Date de sortie</th>
    <th>Utilisation il y a un an (%)</th>
    <th>Utilisation il y a un mois (%)</th>
  </tr>

<?php
 
// Connexion à la base de donnée
$connection = mysql_connect('host', 'user', 'pass');
// Sélection de la base de donnée
mysql_select_db('db', $connection);
 
// On récupère le résultat de la requête SQL de sélection des données sur les navigateurs
$resultat = mysql_query('SELECT * FROM tests');
 
// On parcours le tableau $resultat de la requête et on stock chacune des lignes dans le nouveau tableau $tab
while($tab = mysql_fetch_array($resultat))
{
  echo'<tr>
    <td>'.$tab['nom'].'</td>
    <td>'.$tab['date_sortie'].'</td>
    <td>'.$tab['pctu_an'].' %</td>
    <td>'.$tab['pctu_mois'].' %</td> 
  </tr>';
}
 
?>

</table>

Un petit style à ce tableau pour le rendre plus agéable à consulter

table {
  border: 1px solid #ccc;
  color: #333;
  font-size: 8pt;
}
 
th {
  padding: 3px;
  text-align: left;
}
 
td {
  background-color: #eee;
  padding: 2px;
}

Et voilà vos données misent en forme :) :

Par nombre de colonnes

Ceci aussi est beaucoup demandé, l'affichage sur plusieurs colonnes selon le nombre de lcolonnes souhaités à l'affichage. Je détaillerais seulement la partie php car les fioritures seront à votre convenance ;).

Sur la même table "stats_navigateur", nous afficheront sur plusieurs colonnes les noms des navigateurs triés par nom.

<table summary="Nom de différents navigateurs">

<?php
 
// Connexion à la base de donnée
$connection = mysql_connect('host', 'user', 'pass');
// Sélection de la base de donnée
mysql_select_db('db', $connection);
 
// On récupère le résultat de la requête SQL de sélection des données sur les navigateurs
$resultat = mysql_query('SELECT nom FROM tests ORDER BY nom');
 
// Nombre maximum de lignes souhaitées
$max_colonnes = 3;
 
// On compte le nombre de résultat
$nb_resultat = mysql_num_rows($resultat);
 
// On veut un maximum de 2 colonnes donc on calcul le nombre de colonnes en arrondissant à l'entier supérieur
$nb_lignes = ceil($nb_resultat / $max_colonnes);
 
// On cré un tableau par ligne
for($i = 1; $i <= $nb_lignes; $i++)
{
	${'ligne'.$i} = array();
}
 
// On initialise la ligne en cours à 1, première ligne
$ligne_en_cours = 1;
 
// On initialise le nombre de colonne à 1 qui va nous servir de compteur de colonne
$nb_colonnes = 1;
 
// On parcourt le tableau $resultat de la requête et on stock chacune des lignes dans le nouveau tableau $tab
while($tab = mysql_fetch_array($resultat))
{  
  // On insère les résultats dans les tableaux créés ci-dessus
  array_push(${'ligne'.$ligne_en_cours}, $tab['nom']);
  
  // On vérifie si l'on est pas au maximum de ligne souhaité afin de revenir à la première ligne
  if($ligne_en_cours == $nb_lignes)
  {
	$ligne_en_cours = 1;
	
	// On passe à la colonne suivante
	$nb_colonnes++;
	
  // On passe à la ligne suivante s'il reste suffisemment de colonnes pour arriver au $max_colonnes
  // autrement, on laisse l'insertion dans la ligne 1
  } elseif($ligne_en_cours != $nb_lignes && ($nb_resultat - $nb_colonnes) >= $max_colonnes) {
  	$ligne_en_cours++;
  }
}
 
// On commence l'affichage ligne par ligne
for($i = 1; $i <= $nb_lignes; $i++)
{
  if($i != 1)
  {
  	echo'</tr>';
  }
  echo'<tr>';
  
  // On parcourt le tableau de la ligne pour son affichage
  foreach(${'ligne'.$i} as $ligne)
  {
  	echo'<td>'.$ligne.'</td>';
  }
}
 
?>

</table>

Voilà cette technique revient à faire un petit mechanisme dans le code, afin de respecter un ordre de sortie par colonne, qui est inhérant à la structure des tableaux Html qui se veut par ligne.

Statistiques navigateur tirées librement du site w3schools.com