Page 1 sur 1

Problème mise en forme

Posté : 03 févr. 2012, 23:24
par atome13
Bonsoir à tous

Voila, j'ai un petit problème, je récupére sous Php - Mysql des noms de console dans une liste déroulante, quand je clique sur une console, elle affiche tous les jeux lui correspondant en dessous.
Cf : php-debutant/liste-deroulante-resultat-t262367.html

Ces jeux sont accompagnés de leur image et du type de jeu.

Cependant j'ai besoin d'avoir une certaine mise en forme mais je n'y arrive pas, j'aimerais avoir une mise en forme comme ci-dessous en 3 colonnes :

premier jeux quatrième jeux septième jeux
deuxième jeux cinquième jeux huitième jeux
troisième jeux sixième jeux neuvième jeux

Je n'ai réussi pour l'instant qu'a faire un tableau.

Il me faut donc une mise en forme, ou je puisse avoir une miniature du jeu - le nom - le type sur 3 colonnes, donc 3 jeux par lignes.

Auriez vous une petite idée ?

D'avance merci. Cordialement.

Re: Problème mise en forme

Posté : 04 févr. 2012, 13:27
par Ryle
Pour cela, il te faut récupérer tes données dans un tableau et utiliser les index pour déterminer l'élément à afficher.

En effet, si tu affiches tes données directement, tu vas afficher les éléments 1, 2, 3 puis 4, 5, 6 etc. Si tu colles celles-ci dans un tableau indexé au préalable, tu peux l'interroger en lui demandant d'afficher l'index que tu souhaite au moment où tu le souhaite. Ce que tu dois faire alors c'est afficher les éléments ainsi :

Code : Tout sélectionner

1, 1+(nb_jeux_total/nb_colonne), 1+(nb_jeux_total/nb_colonne)*2 , ... 2, 2+(nb_jeux_total/nb_colonne), 2+(nb_jeux_total/nb_colonne)*2 , ... 3, 3+(nb_jeux_total/nb_colonne), 3+(nb_jeux_total/nb_colonne)*2 , ...
(nota : il faut arrondir le résultat de la division au nombre supérieur pour avoir un index entier :))

Tu obtiens alors pour un tableau de 8 éléments affichés sur 3 colonnes :

Code : Tout sélectionner

1 , 1+(8/3) , 1+(8/3)*2 = 1, 4, 7 2 , 2+(8/3) , 2+(8/3)*2 = 2, 5, 8 3 , 3+(8/3) , 3+(8/3)*2 = 3, 6, N/A
Est-ce que ça te semble clair ? :)

Re: Problème mise en forme

Posté : 04 févr. 2012, 20:17
par atome13
Je comprends à peu près ce que tu veux dire, mais je ne sais pas comment m'y prendre.

Je dois faire du php ou autre chose ?

J'ai déja essayé par le biais du css ou du html, mais ça faisait moche.

Re: Problème mise en forme

Posté : 05 févr. 2012, 10:39
par Ryle
Faut un peu des deux... le php te permet de manipuler des données dynamiquement (interroger ta base de données, lire les résultats, les afficher à l'écran ...). html et css vont te permettre de gérer la présentation des données affichée à l'écran.

Dans ton cas, le plus simple pour la mise en page est de constituer un tableau html (<table>), pour lequel chaque ligne (<tr>) sera constitué de 3 cellules (<td>) pour constituer les 3 colonnes :
<table>
   <tr> <-- première ligne -->
      <td></td>  <-- ligne 1; cellule 1 -->
      <td></td>  <-- ligne 1; cellule 2 -->
      <td></td>  <-- ligne 1; cellule 3 -->
   </tr>
   <tr>
      <td></td>  <-- ligne 2; cellule 1 -->
      <td></td>  <-- ligne 2; cellule 2 -->
      <td></td>  <-- ligne 2; cellule 3 -->
   </tr>
   ...
</table>
Il te faut ensuite utiliser php pour générer ce tableau et son contenu à partir des données que tu récupères (en base de données ou ailleurs). Dans chaque cellule (<td>) tu pourras ajouter le code html qui te permet d'afficher l'image, le type de jeu etc.

Le problème de ce type de tableau, c'est que tu affiches les résultats en ligne et non pas en colonnes. Il faut donc utiliser la méthode indiquée ci-dessus pour que php affiche les éléments 1, 4 et 7 sur la première ligne au lieu des 1, 2 et 3 :)

N'hésite pas à essayer et nous montrer ce que tu as fait, ça sera peut être plus facile à partir d'un code concret :)

Re: Problème mise en forme

Posté : 06 févr. 2012, 19:17
par atome13
Donc si je suis ton code html : je dois écrire autant de ligne que j'ai de jeux en base de donnée ?

Re: Problème mise en forme

Posté : 06 févr. 2012, 21:41
par Boro64
Faut un peu des deux... le php te permet de manipuler des données dynamiquement (interroger ta base de données, lire les résultats, les afficher à l'écran ...). html et css vont te permettre de gérer la présentation des données affichée à l'écran.

Il te faut ensuite utiliser php pour générer ce tableau et son contenu à partir des données que tu récupères (en base de données ou ailleurs). Dans chaque cellule (<td>) tu pourras ajouter le code html qui te permet d'afficher l'image, le type de jeu etc.

Le problème de ce type de tableau, c'est que tu affiches les résultats en ligne et non pas en colonnes. Il faut donc utiliser la méthode indiquée ci-dessus pour que php affiche les éléments 1, 4 et 7 sur la première ligne au lieu des 1, 2 et 3 :)

N'hésite pas à essayer et nous montrer ce que tu as fait, ça sera peut être plus facile à partir d'un code concret :)
Ryle a tout dit. Ton code serait le bienvenue...sinon, pas d'inquiétude, une boucle réalisera le tableau de Ryle

Re: Problème mise en forme

Posté : 06 févr. 2012, 22:44
par atome13
J'ai récupéré le code des colonnes sur un site, voici le premier test que j'ai pu faire, enfin voila la page compléte :
<center><?php
// On inclut le fichier config pour la connexion a la bdd
 		include('../inc/config.php');

		$choix = isset($_POST['choix']) ? $_POST['choix'] : '';
 
// Connexion à la base de donnée
mysql_connect(DB_HOST, DB_LOGIN, DB_PASS) or die('<h1>Connexion au serveur impossible !</h1>');
mysql_select_db(DB_BDD) or die('<h1>Connexion impossible à la base</h1>');

 
// Selection des consoles
echo '<center>';
$query = mysql_query("SELECT DISTINCT console FROM jeux ORDER BY console;") or die (mysql_error());
if ($query) {
    echo '<form method="post">';
   	 echo '<select name="choix" onchange="this.form.submit()">>';
    while ($array = mysql_fetch_assoc($query)) {
        if ($choix == $array["console"]) {
            echo '<option value="' . $array['console'] . '" selected>' . $array['console'] . '</option>';
        } else {
            echo '<option value="'.$array['console'] . '">' . $array['console'] . '</option>';
        }
    }
    echo '</select>'; // ferme la balise select

    echo '</form>';
	echo '</br>';

}

// Affichage de la console selectionnee
 if ($choix) {
    $query = mysql_query("SELECT * FROM jeux WHERE console='$choix';") or die (mysql_error());
    $array = mysql_fetch_assoc($query);
    echo 'Voici les jeux de la : ' . $array['console'];
		echo '</center>';
}

echo '</br>';
echo '</br>';


	$sql="SELECT * FROM jeux WHERE console='$choix'";
	$req= mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
	while($data=mysql_fetch_assoc($req)){


$nbCols = 3; // nombre de colonnes du tableau 
$cpt = 0; // compteur d'éléments 
?>

<table> 
  <tr>
    <th style="width:<?php echo round(100/$nbCols);?>%;">Colonne 1</th> 
    <th style="width:<?php echo round(100/$nbCols);?>%;">Colonne 2</th> 
    <th style="width:<?php echo round(100/$nbCols);?>%;">Colonne 3</th> 
  </tr>
<?php

// Nota : on pourrait tout aussi bien parcourir les éléments d'un tableau ou les fichiers d'un dossier

while ($row=mysql_fetch_assoc($req)) { // parcours des résultats 

    // début d'une ligne 
    if ($cpt%$nbCols==0) // on divise le nb d'élément par le nb de colonnes. Si le reste est de 0 ... 
        echo '<tr>'; // ..., alors on est sur le premier élément d'une ligne 


    // On place chaque élément dans une cellule du tableau 
    echo '<td>';
  	// affichage de tout ce qu'on veut dans la cellule 
		echo '<img src="'.$data["image"].'" width="50" height="50" />';
		echo "<p>{$data["jeux"]}</p>";
		echo "<p>{$data["description"]}</p>";
    echo '</td>'; 


    // fin d'une ligne
    if ($cpt%$nbCols==($nbCols-1)) // on divise le nb d'élément par le nb de colonnes. Si le reste est de ($nbCols-1) ... 
        echo '</tr>'; // ..., on est sur le dernier élément d'une ligne

    $cpt++; // on incrémente le compteur pour savoir où on en est
} 

// Au cas où ...
if ($cpt!=0 && $cpt%$nbCols!=0) { // S'il n'y a pas eu assez de cellules dans la boucle pour finir la ligne ...
    echo '<td colspan="'.($nbCols - ($cpt%$nbCols) ).'">&nbsp;</td>'; // ... on complète avec une cellule vide de la bonne taille...
    echo '</tr>'; // ... et on ferme la ligne
}

		}

// fermeture de la session
mysql_close();
 

?>
</table></center>
Quand j’exécute cette page, j'ai bien 3 colonnes, avec l'image, le nom en dessous et encore en dessous le type du jeu.

Cependant, c'est le même jeu qui se répète tout le temps, ce jeu est le premier dans ma base de donnée, mais la requête tri bien le type de console

Il n'y a que du html et du PHP dans cette page.

Re: Problème mise en forme

Posté : 06 févr. 2012, 23:10
par Ryle
J'ai déjà vu cette gestion de colonnes quelque part ;)

Il faut que tu enlèves ton
while($data=mysql_fetch_assoc($req)){
et que tu le mette à la place de mon
while ($row=mysql_fetch_assoc($req)) { // parcours des résultats 
Ca devrait mieux fonctionner :)

Re: Problème mise en forme

Posté : 07 févr. 2012, 12:28
par atome13
Merci pour ton aide, problème résolue.