Comment modifier dynamiquement les images sur son site web en PHP

Comment modifier des images dynamiquement en PHP pour faire un caroussel

Quand on débute en développement web des choses apparemment toutes simples peuvent paraître très compliquées à mettre en place. Par exemple gérer plusieurs images dynamiquement pour faire un carrousel, ou pour changer d’image chaque jour, etc. C’est compliqué, car il faut modifier des choses sur les trois nœuds d’un site web dynamique : le navigateur, le serveur web et la base de données. Je vous propose ici de découvrir comment gérer des images dynamiques sur votre site web, en PHP.

Nous allons regarder ce qu’il y a à faire sur chaque partie, client, serveur web et base de données.

 

Modifications sur la base de données

Pour pouvoir afficher des images dynamiques sur notre site web, nous devons les stocker d’une manière ou d’une autre dans une table de notre base de données. Il y a 2 grandes techniques pour les stocker en base.

 

Stocker les images directement dans un champ

La plupart des bases de données supportent le fait de mettre des fichiers binaires directement dans un champ. Ainsi il vous suffit de récupérer les données de l’image pour les intégrer directement dans le résultat HTML. Cette technique peut sembler plus simple, cependant elle comporte des inconvénients.

  • Stocker l’image directement sous forme d’un champ binaire dans la base n’apporte aucun avantage. Poser-vous la question est-ce que vous allez pouvoir faire des recherches dessus ? Est-ce que vous allez l’analyser ? Les trier ? Cela augmente la taille de la table et donc le travail du serveur de base de données alors que vous n’en tirez aucun bénéfice…
  • Stocker l’image dans la base de données vous force à télécharger l’image entre le serveur web et le serveur de base de données. Vous ajoutez ainsi un délai supplémentaire dans le traitement de la requête de votre utilisateur. Si cet aspect n’est pas clair pour vous, je vous laisse lire l’article qui explique comment fonctionne un site web dynamique.

En bref, peu d’avantages et de gros inconvénients.

Regardons la seconde technique.

 

Stocker uniquement les noms de fichier

Dans cette technique vous stockez uniquement le nom du fichier dans une table dans la base de données. Le fichier, lui, est stocké directement sur le serveur web. Cette technique semble plus complexe de prime abord, mais elle a plusieurs avantages.

  • Alléger la taille de la table et donc le travail nécessaire pour le serveur de base de données. De plus, les données sont stockées sous forme de texte, ce qui est analysable en SQL. Il est ainsi très simple de chercher toutes les images de type JPG ou PNG, ou encore les images contenant “chaise” dans leur nom. Il est même possible d’ajouter des descriptions complémentaires dans la table comme la taille de l’image, des informations sur la prise de vue, des catégories, des mots clés…
  • Vu qu’il y a moins de données stockées en base, il y a moins de données à échanger entre le serveur web et le serveur de base de données. Votre requête est plus rapide.

Voici une comparaison des deux techniques sous forme de schéma. Nous imaginons ici qu’un utilisateur demande à afficher la page et nous regardons toutes les requêtes que cela génère. J’ai également représenté la taille des données sous forme de fichier binaire et textes de taille plus ou moins grosse.

Comparaison des techniques de stockage des images

 

La deuxième technique est celle utilisée par la plupart des sites web. Nous allons utiliser cette deuxième technique dans cet article.

 

La table et l’initialisation de celle-ci

La table dont nous avons besoin est vraiment toute simple. Une colonne identifiant et une colonne chemin suffisent. Si vous le souhaitez, vous pouvez ajouter une colonne “date d’ajout”, une colonne “date de dernière modification” et une colonne “type de fichier”. Dans la plupart des cas cela ne me semble pas nécessaire. Je vais donc partir dans le cas simple de 2 colonnes.

Contenu de la table dans MySql

Création de la table :

create table ref_images ( id INT PRIMARY KEY NOT NULL, nom_fichier VARCHAR(255) );

L’exemple de code SQL donné ici est standard, testé sous MySql. Dites moi dans les commentaires si vous rencontrez des difficultés.

Remplissage de la table :

insert into ref_images values (1,“pyramides.png”);
insert into ref_images values (2,“elephant.jpg”);
insert into ref_images values (3,“lion.jpg”);
insert into ref_images values (4,“tour_eiffel2.jpeg”);

Vous noterez que nous stockons dans la table seulement le nom du fichier image. Vu que nous connaissons le répertoire dans lequel se trouve les images pas besoin de tout stocker.

Vous pouvez bien sûr ajouter plus d’images !

 

Le stockage des fichiers images

Mettez vos images dans un dossier unique, dans votre site web, accessible depuis l’extérieur via une URL. Par exemple, j’ai stocké mes images dans le répertoire suivant :

C:\wamp64\www\site1\images

Cet exemple est sous Windows avec le logiciel Wamp64. Le nom de mon site web de test est “site1“. La racine de tous mes sites web est C:\wamp64\www\.

Votre chemin sera différent en fonction de vos choix, de votre installation locale et de votre système d’exploitation. Adaptez !

Vous devez également identifier quelle est l’URL d’accès à vos images. C’est avec l’URL qu’un internaute va visualiser vos images. Dans mon cas, l’URL est la suivante :

http://localhost/site1/images/

Vous remarquerez que la fin des deux chemins est identique, c’est le cas le plus courant et vous devriez avoir la même chose. Si votre serveur web le permet, cette URL affiche le contenu du répertoire ce qui vous permet de choisir une image. Si le serveur web est configuré différemment, l’affichage du répertoire est interdit (ce qui est préférable du point de vue de la sécurité).

Par contre, que votre serveur web soit sécurisé ou pas, vous devez être capable d’afficher une image en connaissant son URL exacte. Par exemple :

Affichage d'un image

Pour faire cela, prenez l’URL de base et ajoutez le nom d’un des fichiers images que vous avez mis dans le répertoire. Pour moi, l’URL de base est http://localhost/site1/images/ et un de mes fichiers est nommé elephant.jpg. Cela donne l’URL suivante :

http://localhost/site1/images/elephant.jpg

Testez l’affichage d’une de vos images.
Si vous n’arrivez pas à l’afficher, vous avez un problème dans votre URL ou dans la configuration de votre serveur web.
Stoppez là et fixez ce problème ! Vous ne pourrez pas faire fonctionner les images dynamiques tant que vous n’arrivez pas à en afficher une.

 

Récupération des informations utiles

Ici nous devons écrire le code qui permet de se connecter à la base de données pour ensuite extraire les informations utiles.

 

La connexion à la base de données

Quel que soit le langage, la connexion à la base de données fonctionne à peu près de la même manière et surtout nécessite les mêmes informations :

  • Le nom du serveur de base de données,
  • Optionnellement, le numéro de port de ce serveur,
  • L’identifiant de l’utilisateur de la base de données,
  • Le mot de passe de cet utilisateur,
  • Le nom de la base de données (un serveur peut héberger plusieurs bases).

Ayant ses informations, il nous reste à utiliser la méthode de connexion préconisée dans notre cas. Cette méthode dépend du langage et de notre base de données.

La base de données que j’utilise est MySql. Pour notre code en PHP je vous propose d’utiliser la librairie mysqli. Nous aurions pu faire un autre choix vu qu’il existe 3 librairies PHP pour se connecter à MySql. Je vous laisse lire la documentation à ce sujet pour en savoir plus : http://php.net/manual/fr/mysqlinfo.api.choosing.php. Mon choix est arbitraire, PDO_MYSQL est bien aussi. En revanche, n’utilisez pas la librairie mysql, elle est dépréciée (c’est à dire périmée) !

$mysqli = new mysqli("localhost","root","","site1_db");
if ($mysqli -> connect_errno) {
    printf("Problème de connexion : %s\n", $mysqli->connect_error);
    exit();
}

C’est l’instruction new mysqli() qui permet de se connecter à la base de données. Elle prend en paramètre les informations décrite ci-dessus. Le serveur est localhost, le nom d’utilisateur est root, et la base de données est site1_db.

Vous noterez que juste après le nom d’utilisateur root, il y a un paramètre laissé vide. Il s’agit du mot de passe de l’utilisateur root. A part sur une base de données de développement comme ici, n’utilisez jamais le compte root, et encore moins sans mot de passe !

Là aussi, attention de bien adapter les paramètre à votre situation. Sans cela, le script PHP n’arrivera pas à se connecter.

 

Récupération des informations utiles

Pour obtenir les informations utiles, nous devons utiliser notre langage pour envoyer une requête SQL à la base de données.

Voyons tout d’abord quelle requête SQL nous devons utiliser. Il s’agit d’un select très simple en fonction de l’identifiant de notre image :

Select * from ref_images were ID = 2;

Cette requête fonctionne si vous souhaitez sélectionner l’image numéro 2. Ici, nous souhaitons choisir l’image de manière dynamique. Nous devons donc obtenir l’identifiant à partir d’une variable passée en paramètre de la requête HTTP. Ainsi, d’une requête à l’autre, l’image choisie peut changer. Je détaille cela plus loin.

Le code à faire est donc assez simple, exécuter notre requête SQL et lire le résultat. Voici un exemple en PHP :

if(isset($_GET["image_id"])) $image_asked = $_GET["image_id"];
else $image_asked = 1;

$stmt = $mysqli->prepare("SELECT * FROM ref_images WHERE id = ? ");
$stmt->bind_param('i', $image_asked);
$stmt->execute();

$stmt->bind_result($image_id , $image_file_name);
$stmt->fetch();
// ici, la variable $image_file_name a été remplie avec le nom de fichier sélectionné venant de la base de données.
$stmt->close();

Les deux étapes importantes sont :

  • Exécution de la requête ($mysqli->prepare, $stmt->bind_param et $stmt->execute),
  • Et la récupération du nom de fichier ($stmt->bind_result et $stmt->fetch).

Astuce sécurité : j’ai utilisé des requêtes préparées. Je vous recommande de toujours le faire. Cela interdit tout type d’injection SQL, ce qui augmente considérablement la sécurité de votre code à moindre coût.

Vous avez probablement remarqué la ligne 12 avec le tableau $_GET[]. Si vous ne connaissez pas ce tableau, je vais vous en parler un peu plus loin dans cet article. Gardez ces lignes telles quelles pour le moment.

 

Création du résultat HTML

Maintenant nous devons tout simplement créer le contenu HTML qui permet d’afficher l’image. Tout dépend bien sûr du résultat HTML que vous souhaitez obtenir. Je vous propose ici d’utiliser la balise IMG qui permet d’intégrer une image dans du HTML. Nous pourrions utiliser d’autres techniques, notamment avec la propriété CSS qui permet de modifier l’image de fond d’un bloc.

<img src="https://localhost/site1/images/mon_image.jpg"/>

ou aussi :

<img src="images/mon_image.jpg"/>

Je préfère la seconde version qui est un chemin relatif. Cela a l’avantage de ne pas dépendre de l’URL de base de votre installation.

Voici le code PHP qui devra générer ce résultat :

<img src="images/<?=$image_file_name?>"/>

Vous noterez que dans le code, le contenu HTML attendu a été modifié. Ainsi

mon_image.jpg

a été remplacé par

<?=$image_file_name?>

La création du résultat HTML est assez simple : nous construisons dynamiquement des chaînes de caractères. Pour cela nous utilisons des chaînes littérales, c’est à dire fixes, contenant le code HTML résultat que nous souhaitons obtenir. Nous les combinons avec les variables PHP qui contiennent les bonnes informations, ici le nom de fichier de notre image. Nous utilisons les balises <?= et ?> pour indiquer de remplacer par le contenu d’une variable PHP.

Nous aurions pu faire appel à une vue pour créer ce résultat HTML, c’est même ce qui est recommandé. Je ne l’ai pas fait ici pour ne pas complexifier l’exemple. Retenez qu’une vue fonctionne selon le même principe. La concaténation de chaîne de caractère et de variable pour obtenir le résultat HTML souhaité.

 

Changer d’image en un clic

Nous venons réellement de faire la partie serveur qui nous permettait d’afficher des images dynamiques ! Cependant, il nous manque quelques détails pour que nous puissions réellement changer d’image en 1 clic.

Pour voir cela, je vais tout d’abord revenir sur les paramètres HTTP. Je les avaient passé sous silence pour le moment.

 

Le mystère des paramètres HTTP

Il reste peut-être une partie mystérieuse pour vous : les paramètres HTTP.

Les paramètres HTTP permettent de faire passer de l’information entre l’utilisateur, via son navigateur, et le serveur web. C’est ce qui permet de connaître les choix de l’utilisateur.

Sans le savoir, vous vous en servez tous les jours. C’est ce qui fait que vous pouvez faire une recherche d’article, par exemple un livre sur Amazon. Et qu’ensuite, lorsque vous cliquez sur l’un d’entre eux pour consulter le détail, vous aurez bien la fiche de ce livre, et pas celle d’un autre. Avouez que ce serait assez problématique sinon.

C’est également ce qui vous permet de vous connecter à votre compte email en ligne, à votre compte bancaire, ou de faire un payement. En bref, il y a des paramètres HTTP partout !

Une bonne compréhension des paramètres HTTP est une clé très importante pour bien comprendre le développement web. Tant que vous n’aurez pas compris cette notion, vous aurez régulièrement des comportements bizarres sur vos sites web.

 

Parcours des paramètres HTTP dans le cycle client > serveur > client

Sans en faire une présentation complète et poussée, voyons comment ces paramètres nous sont utiles dans le dialogue entre le client et le serveur.

Chemin des parametres HTTP

Lorsque nous cliquons sur un élément d’une liste, le lien sur lequel nous cliquons contient un identifiant du produit. Celui-ci est passé en paramètre de la requête HTTP, via la méthode GET. Malgré vous, vous avez probablement déjà vu ce type d’URL :

http://localhost/site1/images_dynamiques.php?image_id=2

Tout ce qui suit le ? corresponds à des paramètres HTTP en méthode GET. Ils sont séparés par des & et le nom du paramètre est suivi d’un = puis de la valeur. C’est très simple. Ainsi, dans l’URL ci-dessus, il y a un paramètre image_id dont la valeur est 2.

Notez bien que dans l’exemple d’URL ci-dessus, j’ai installé Wamp64 sur le port 80, c’est-à-dire le port par défaut pour le protocole HTTP. C’est la raison pour laquelle l’URL commence par http://localhost/. Votre URL dépend de votre installation. Une URL typique sur un poste local est http://localhost:8080/. Le port 8080 est souvent utilisé pour les sites web en développement ou en test.

Aujourd’hui je parle seulement des paramètres passés avec la méthode GET. Je ferais bientôt un article pour comparer la méthode GET avec les autres méthodes HTTP.

Ce paramètre est récupérable avec le tableau $_GET[] en PHP. C’est pourquoi j’ai ajouté les lignes suivantes tout à l’heure :

if(isset($_GET["image_id"])) $image_asked = $_GET["image_id"];
else $image_asked = 2;

À la ligne 12 nous commençons par tester si le paramètre image_id existe. Si oui, nous le récupérons dans la variable $image_asked. Si non, nous fixons arbitrairement la variable $image_asked à 2.

Réunissez ces scripts, vous devriez obtenir un site vous permettant d’afficher n’importe quelle image en modifiant directement l’URL. Par exemple, saisissez l’URL suivante pour accéder à l’image 3 :

http://localhost/site1/images_dynamiques.php?image_id=3

Est-ce que cela fonctionne ?

Voici le script complet :

<html>
<head>
</head>
<body>
    <?php
    $mysqli = new mysqli("localhost","root","","site1_db");
    if ($mysqli -> connect_errno) {
        printf("Problème de connexion : %s\n", $mysqli->connect_error);
        exit();
    }

    if(isset($_GET["image_id"])) $image_asked = $_GET["image_id"];
    else $image_asked = 2;

    $stmt = $mysqli->prepare("SELECT * FROM ref_images WHERE id = ? ");
    $stmt->bind_param('i', $image_asked);
    $stmt->execute();

    $stmt->bind_result($image_id , $image_file_name);
    $stmt->fetch();
    // ici, la variable $image_file_name a été remplie avec le nom de fichier sélectionné venant de la base de données.
    $stmt->close();
    ?>

    <img src="images/<?=$image_file_name?>"/>
</body>
</html>

 

Comment ajouter des liens pour changer d’image ?

Maintenant que les paramètres HTTP en méthode GET sont clairs pour vous, quels sont les liens que je dois ajouter des deux côtés de l’image pour finaliser mon carrousel ?

Réfléchissez et modifiez votre code pour l’afficher.

Si si, faîtes le vraiment. C’est en pratiquant que l’on progresse.

Et encore plus en cherchant à faire soi-même ! Arrêtez de lire, et tentez de finir tout seul.

 

C’est bon, vous avez modifié le script ?

Avez-vous réussi à ajouter des liens pour changer l’image ?

Voici ma proposition de solution. Ajoutez les liens “avant” et “apres” comme ci-dessous :

    <a href="images_dynamiques.php?image_id=<?=$image_asked-1?>"> avant </a>
    <img src="images/<?=$image_file_name?>"/>
    <a href="images_dynamiques.php?image_id=<?=$image_asked+1?>"> apres </a>

Voici un fichier ZIP contenant le dossier complet contenant le script et les images.

 

Limitations ?

Vous noterez que je ne gère pas ici les limites quand nous sommes au début et à la fin de la liste d’images. Cela nécessite d’ajouter un test assez simple. Si nous sommes à la dernière ou à la première image, il faut, au choix :

  • Masquer les boutons appropriés,
  • Recommencer avec l’image à l’autre bout de la suite, pour faire un cycle perpétuel,
  • Rester sur la même image.

Je vous propose de mettre la deuxième solution en place.

Mieux : je vous propose de le faire vous-même !

Je mettrai la solution ici si vous me le demandez dans les commentaires.

 

Conclusion

Voilà, vous savez tout ! Finalement nous n’avons pas besoin de beaucoup de code pour faire fonctionner notre carrousel, seulement il faut des petites touches partout.

  • Sur le client, il faut que l’appel à l’image se fasse correctement, avec la bonne URL. Il faut également que les liens contiennent les bons paramètres HTTP.
  • Sur le serveur web, il faut récupérer le paramètre HTTP et l’utiliser pour interroger correctement la base de données. Ensuite, créer la page HTML pour qu’elle s’affiche correctement comme indiqué ci-dessus.
  • Sur le serveur de base de données, il faut que les structures existent et contiennent des informations cohérentes.

C’est bien là toute la complexité du développement web : de nombreux petits changements, un peu partout, qui doivent tous être cohérents les uns par rapport aux autres !

 

Il peut rester des erreurs ou incohérences qui auraient échappé à mes contrôles. Si vous en voyez, n’hésitez pas à les signaler dans les commentaires.

Dites-moi également dans les commentaires ce que vous avez appris en lisant cet article et ce qui vous a surpris. Avez-vous des techniques complémentaires ?

Si vous avez trouvé cet article intéressant, partagez-le.

 

Partager l'article
  •  
  •  
  •  
  •  

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.