Discussion :

[robert-dev]

Bonjour , j'ai un soucis j'ai fait une fonction en php qui récupère un id depuis une bd et les affiches dans une div .
Mon soucis et que la boucle while affiche bien tout , mais les div sont placer les une sous les autres . Or je voudrais afficher 4 div par ligne .
Problème Je ne sais pas du tout comment faire cela .

Le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<link rel="stylesheet" href="../css/style-shop.css">
 
<div class="shop">
<?php
try
{
    $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
    $bdd = new PDO('mysql:host=localhost;dbname=bdtest', 'root', '', $pdo_options);
 
 
$reponse = $bdd->query('SELECT * FROM ref');
 
while ($donnees = $reponse->fetch())
{
    echo "<div class='products__item' id=".$donnees['ref'].">";
    echo "<article class='product'>";
    echo "<h1 class='product__title'> $donnees[ref] </h1>";
    ?>
    <p class='product__text'>
    <a class="button js-add-product" href="#" title="Add to cart">
    Add to cart
        </a>
      </p>
    </article>
</div>
<?php
 
}
?>
<?php
 
$reponse->closeCursor();
}
catch(Exception $e)
{
    die('Erreur : '.$e->getMessage());
}
?>
</div>

Merci d'avance

[Freudd]

Bonjour,

Réalisé un affichage en grille en HTML est quelque chose d'assez courant, mais à traduire en PHP peut-être un peu plus chiant je le consens ^^.
Je te propose un script pour t'expliquer une façon de découper un ensemble de résultat en grille de 4 colonnes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
/* Les données que l'on souhaite afficher. */
$response  = [
    [ 'ref' => 1 ],
    [ 'ref' => 2 ],
    [ 'ref' => 3 ],
    [ 'ref' => 4 ],
    [ 'ref' => 5 ],
    [ 'ref' => 6 ]
    /* ... */
];
/* Le nombre de colonnes pour chaque ligne. */
$nbColumns = 4;
/* Le nombre de ligne à afficher en fonction du nombre des données. */
$nbRow     = ceil(count($response) / $nbColumns);
?>
 
<!-- 4 colonnes = 1/4 d'espace pour chaque item avec un alignement à gauche. -->
<style>
    .products__item{
        float: left;
        width: 25%;
    }
</style>
 
<!-- Je parcours toutes mes lignes. -->
<?php for( $keyRow = 0; $keyRow < $nbRow; ++$keyRow ): ?>
    <div class="products__row">
 
        <!-- Pour chaque ligne je calcule la clé courante de mon tableau de données en fonction du nombre ligne. -->
        <?php for( $keyCol = $keyRow * $nbColumns; $keyCol < $nbColumns * ($keyRow + 1); $keyCol++ ): ?>
 
            <!-- Dans le cas ou il y a pas assez de données pour boucler la dernière ligne, je quitte la boucle. -->
            <?php if( !isset($response[ $keyCol ]) ): break;endif; ?>
            <div class="products__item" id="<?php echo $response[ $keyCol ][ 'ref' ]; ?>">
                <article class="product">
                    <h1 class="product__title"><?php echo $response[ $keyCol ][ 'ref' ]; ?></h1>
                    <p class="product__text">
                        <a class="button js-add-product" href="#" title="Add to cart">
                            Add to cart
                        </a>
                    </p>
                </article>
            </div>
    <?php endfor; ?>
    </div>
<?php endfor; ?>

Bien évident il va falloir l'adapter à ton projet (la récupération des données par un ->fetchAll(), choisir le nom de ta classe CSS pour tes colonnes et lignes...)

Bon courage

[Invité]

Bonjour,

• Affichage de données dans un tableau HTML

[robert-dev]

Bonjour , merci beaucoup Freudd ta solution à super bien marché , je passe le sujet en résolu