Dreamweaver nous offre la possibilité d'afficher des images dynamique, provenant d'une base de données, nous allons voir comment afficher une ou des images dans une page web.

En général ce n'est pas le fichier image qui est inséré dans la base de données mais le chemin de cette image sur le serveur web ou simplement son nom, ce qui est bien moins lourd et surtout plus rapide à traiter pour le serveur de base de données. Il est alors possible de traiter ces images de manière dynamique, comme par exemple créer des imagettes, etc.

Vous pouvez télécharger la base de données ainsi que les images utilisées dans ce tutorial.

• La base de données : db_video.zip (3.04 KB)
  
• Les images :  images.zip (62.88 KB)

Création du jeu d'enregistrement

On crée tout d'abord un jeu d'enregistrement, en sélectionnant les informations qui nous intéresse, en triant le résultat dans l'ordre voulu.

Insertion de l'image

Via le menu Insertion > Commun ou le raccourci clavier CTRL+Alt+I on insère l'image dynamique.

On sélectionne la source de l'image, en cochant la case Source de données puis en cliquant sur le champ de l'image, à savoir jaquette.

Il nous faut ensuite spécifier le dossier où se trouvent les images, on ajoute dans l'URL le nom de ce dossier, ici images.

Bien sûr, vous devez tenir compte de l'arborescence du dossier images, dans l'exemple celui-ci se trouve en racine du serveur.

Ajout d'informations

Il peut être nécessaire d'ajouter des informations concernant notre image, comme sa taille ou l'attribut alt (permet d'afficher un texte alternatif en cas de non-affichage de l'image) par exemple, pour ce faire il faut passer en mode source et taper ce code à la main :

<img src="/images/<?php echo $row_rsVideo['jaquette']; ?>" alt="<?php echo $row_rsVideo['titre']; ?>" width="200" height="278" />

Conditions d'affichage

Si le champ jaquette de la base de données est renseigné et si l'image existe dans le dossier spécifié (/images) alors l'image sera affiché, dans le cas contraire c'est une croix rouge inesthétique qui apparaîtra, effet non voulu, il est donc nécessaire de faire une condition afin de palier aux différentes erreurs possibles.

Nous allons encapsuler notre image à l&#8217;intérieur d'une condition avant de l'afficher, pour ce faire on passe en mode source :

<?php //afficher si le fichier existe
  if (file_exists('/images/'.$row_rsVideo['jaquette'])) { ?>
    <p><img src="/images/<?php echo $row_rsVideo['jaquette']; ?>" alt="<?php echo $row_rsVideo['titre']; ?>" width="200" height="278" /></p>
<?php } // fin show if file exist ?>

On peut ajouter une seconde condition plus bas, qui elle va nous permettre d'afficher un message si l'image n'existe pas :

<?php //afficher si le fichier n'existe pas
  if (!file_exists('/images/'.$row_rsVideo['jaquette'])) { ?>
    <p>Pas d'image dans la base.</p>
<?php } // fin show if file not exist  ?>

Région répétée

Si on veut afficher plusieurs images il nous faut faire une région répétée, qui lira les enregistrements présents dans la base de données en boucle, suivant le nombre d'enregistrements spécifiés à afficher.
Afin de garder les conditions d'affichage, on doit bien sûr sélectionner celles-ci en même temps que l'image afin de les inclure dans la région répétée.

Vous pouvez accéder à cette fonction via la fenêtre Application > Comportements de serveur ou via le menu Insertion > Applications dynamique.

Puis on choisit le nombre d'enregistrements à afficher.