Afficher données BDD et PDO

**ideal23** · 11/09/2014, 14h34

Bonjour,
je développe une petite galerie images et j'ai un souci pour afficher les images dans un tableau avec PDO qui est nouveau pour moi , je suis un peu perdu.
ma bdd mysql à 2 champs nom et titre
Voici le code de récupération de la base:

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
<?php
require('connect.php');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Galerie</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />	
<script type="text/javascript" src="zoombox/jquery.js"></script>
<script type="text/javascript" src="zoombox/zoombox.js"></script> 
<link rel="stylesheet" type="text/css" href="theme/style.css" /> 
<link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id="content">			
	<div id="gallerie">			
	<?php
	$req = $bdd->prepare('SELECT * FROM upload ORDER BY id DESC');
	$req->execute();
	while($data = $req->fetch(PDO::FETCH_OBJ)):?>			
	<div class="img"><a href="images/fullsize/<?php echo $data->nom;  ?> " rel="zoombox[galerie]"><img src="images/min/<?php echo $data->nom;?>" /></a> </div>       
	<?php endwhile;?>
	<?php $req->closeCursor();?>         
	</div>	
</body>
</html>

cette méthode affiche les images horizontalement comme je veux , mais je souhaiterai les inclure dans un tableau pour pouvoir améliorer le désign des cellules.
Avez-vous une idée, Merci

**Spartacusply** · 11/09/2014, 15h12

Tableau pour placer des éléments : pas bien !

C'est une liste d'image que tu affiches, pas une ensemble ordonnée de données (auquel cas les tableaux sont bien utiles).

Mais tout ça c'est en HTML/CSS que ça se passe, pas en PHP !

**Celira** · 11/09/2014, 15h20

Je plussoie Spartacusply : faire une galerie d'images dans un tableau, c'est comme si tu utilisais Excel pour faire un diaporama

On va donc rediriger la question vers nos collègues CSS

**ideal23** · 11/09/2014, 17h35

Je précise que les images sont dans un répertoire, et les éléments nom et titre dans la table et je voudrais que les images s'affichent horizontalement:

**Celira** · 12/09/2014, 10h05

Si tu as réussi à faire l'affichage, c'est que la récupération des données fonctionne. Le seul problème qui reste c'est comment bidouiller le HTML pour afficher esl données comme tu veux.

**ideal23** · 12/09/2014, 11h44

ce code affiche les données , mais je butte pour faire remonter les images.

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	$req = $bdd->prepare('SELECT * FROM upload ORDER BY id DESC');
	$req->execute();	
 
// On affiche le resultat
while ($donnees = $req->fetch()){
    //On affiche les données dans le tableau
    echo "</tr>";    
    echo "<td> $donnees[nom] </td>";
    echo "</tr>";
}
?>
  <?php $req->closeCursor();?>

**black-hawk-down** · 12/09/2014, 11h46

Salut,

Merci de nous l'avoir renvoyé par ici.

Quelle compatibilité de navigateur tu souhaites assurer ? Notamment pour IE.

Montre nous aussi l'HTML généré ainsi que ton CSS, s'il te plait.

Merci.

**ideal23** · 12/09/2014, 12h10

Salut
compatibilité ie, chrome firefox
html:

Code php :

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
<?php
require('connect.php');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Galerie</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />	
<script type="text/javascript" src="zoombox/jquery.js"></script>
<script type="text/javascript" src="zoombox/zoombox.js"></script> 
<link rel="stylesheet" type="text/css" href="theme/style.css" /> 
<link href="zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id="content">			
	<div id="gallerie">			
	<?php
	$req = $bdd->prepare('SELECT * FROM upload ORDER BY id DESC');
	$req->execute();	
 
// On affiche le resultat
while ($donnees = $req->fetch())
{
    //On affiche les données dans le tableau
    echo "</tr>";    
    echo "<td> $donnees[nom] </td>";
    echo "</tr>";
}
?>
  <?php $req->closeCursor();?>        
 
	</div>	
</body>
</html>

css:

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
html, body { border: 0; margin: 0; padding: 0; }
body { background:#F2F2F2; font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; min-width: 100%; color: #777; }
 
#content{width:900px; margin-right:auto; margin-left:auto; margin-top:200px; background:#FFF; padding:20px; border:#777 1px solid;}
 
#content p, label, legend { font: 1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; }
 
 
/* Form style */
 
#content label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 155px; font-size: 1.5em; }
#content input.submit { display:block; margin-top:20px; width: 85px; cursor: pointer; border: 1px solid #222; background:#333; color:#fff; -moz-border-radius: 5px; -webkit-border-radius:5px; }
#content input.submit:hover { background:#444; }
 
/* Style for the error message */
 
.error{color:#FF6262; font-size:1.1em;}
 
.success{color:green; font-size:25px;}
 
.img{display:inline-block;}
 
#gallerie{margin-top:50px; width:900px;}

Merci

**NoSmoking** · 12/09/2014, 15h21

Bonjour,

mais je souhaiterai les inclure dans un tableau pour pouvoir améliorer le désign des cellules.

pas sûr que le résultat soit mieux

Quoiqu'il arrive il te faut écrire la structure minimum suivante pour tout mettre sur la même ligne

Code html :

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

1
2
3
4
5
6
7
8
<table>
  <tr>
    <td><img src="" alt=""></td>
    <td><img src="" alt=""></td>
    <td><img src="" alt=""></td>
    <!-- etc .. -->
  </tr>
</table>

à mettre donc en place dans ta boucle PHP.

**black-hawk-down** · 12/09/2014, 15h25

Quelle version de IE ?

Si IE8+ tu peux passer par un display: table-cell pour simuler des cellules sans passer par un tableau.

Afficher données BDD et PDO

CSS

Discussions similaires

Partager

Partager