[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > PHP > Base de données > Lecture du tutoriel

Stocker des images sous MySQL

	Auteur : United Créé : le 19/03/2007 20:00:13 Modifié : le 04/07/2008 17:59:15 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Tout au long de ce tutoriel, je vais vous apprendre à stocker des images directement dans votre SGBDR. Nous utiliserons ici MySQL. Il existe deux méthodes :

en gardant l'arborescence web,
sans l'arborescence : l'image est stockée directement dans le SGBDR sous forme de données binaires.

Le stockage d'images dans une base de données est très lourd, c'est pourquoi je vous déconseille d'utiliser cette méthode. Elle n'est présentée ici qu'à titre informatif.

Si vous êtes prêts, suivez le guide.

Sommaire du chapitre :

1e méthode : avec l'arborescence web
2e méthode : stocker dans le SGBDR

1e méthode : avec l'arborescence web

Je ne vous expliquerai pas cette méthode, mais je vous signale qu'elle existe. Il s'agit d'uploader l'image sur le serveur et de la stocker dans un dossier images, par exemple. On stocke le lien dans la base, et on fait appel à lui pour afficher l'image.

Exemple

Imaginez une table image avec un champ up_name qui contient le nom + l'extension (campagne.gif, par exemple) de l'image stockée sur le serveur, dans un dossier images. Pour afficher l'image, vous aurez un code comme celui-ci :

Code : PHP

1
2
3

<?php
     echo '<img src="images/'.$infos[up_name].'" alt="" title="" />';
?>

Ceci est une brève présentation. Si vous voulez plus d'informations sur cette méthode, consultez le tutoriel de DHKold - Upload de fichiers par formulaire.

Je vous explique dans la prochaine partie le pourquoi du tutoriel : stocker une image directement dans le SGBDR.

2e méthode : stocker dans le SGBDR

Avant tout chose, il faut que vous sachiez que cette méthode est très lourde. Je vous la présente principalement pour le fun si vous ne savez pas quoi faire de votre temps.

Le principal inconvénient est que ces images prennent de la place dans notre base de données. Elles vont considérablement l'alourdir. Gardez bien cela en tête.
Deuxièmement, comme elles sont stockées dans notre base, pour les afficher, il faut faire appel à une requête. Donc ralentissement considérable de votre site.
Perte de l'arborescence comme ci-dessous :

Script et principe

Voici la structure de la table avec laquelle nous allons travailler.

Code : SQL

CREATE TABLE `images` (
   `id_img` INT NOT NULL AUTO_INCREMENT,
   `nom` VARCHAR(50) NOT NULL,
   `description` text NOT NULL,
   `img` BLOB NOT NULL,
   `extension` VARCHAR(25) NOT NULL,
   PRIMARY KEY (`id_img`)
)

Je ne pense pas qu'il y ait de problème de compréhension, sauf sur un point peut-être : le champ de type BLOB.

Le type BLOB, ou Binary Large OBject, est un type de donnée permettant le stockage de données binaires.

Le formulaire : page traitement.php

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Envoyer une image</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <style type="text/css">
		label {
			display:block;
			width:150px;
			float:left;
		}
	   </style>
   </head>
   <body>
	<h1>Envoyer une image</h1>
	<form enctype="multipart/form-data" action="traitement.php" method="post">
		<p>
			<label for="nom">Nom : </label><input type="text" name="nom" id="nom" /><br />
			<label for="description">Description : </label><textarea name="description" id="description" rows="10" cols="50"></textarea><br />
			<label for="image">Image : </label><input type="file" name="image" id="image" /><br />
			<label for="validation">Valider : </label><input type="submit" name="validation" id="validation" value="Envoyer" />
		</p>
	</form>
</body>
</html>

Ce code nous donne l'aperçu suivant :

Aperçu du formulaire de saisie

La partie enctype="multipart/form-data" est celle qui permet d'indiquer que l'on souhaite uploader un fichier.
Ensuite, il suffit de rajouter un champ de saisie de type file comme ceci :
Code : HTML

1	<input type="file" name="image" />

Il permet l'affichage de la boîte Parcourir pour chercher une image (ou un autre fichier) sur notre ordinateur.

Le traitement

Maintenant que l'on a le formulaire, il faut faire le traitement. Nous le ferons dans la même page, mais vous pouvez le séparer sur une seconde page, bien évidemment. Nous l'intégrerons juste après la balise <body>.

Code : PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Envoyer une image</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <style type="text/css">
		label {
			display:block;
			width:150px;
			float:left;
		}
	   </style>
   </head>
   <body>
	
<?php
  if(isset($_POST['validation'])) {
	 
	 //Indique si le fichier a été téléchargé
	 if(!is_uploaded_file($_FILES['image']['tmp_name']))
		echo 'Un problème est survenu durant l opération. Veuillez réessayer !';
	 else {
		//liste des extensions possibles    
		$extensions = array('/png', '/gif', '/jpg', '/jpeg');
		
		//récupère la chaîne à partir du dernier / pour connaître l'extension
		$extension = strrchr($_FILES['image']['type'], '/');
		
		//vérifie si l'extension est dans notre tableau            
		if(!in_array($extension, $extensions))
			echo 'Vous devez uploader un fichier de type png, gif, jpg, jpeg.';
		else {         

			//on définit la taille maximale
			define('MAXSIZE', 300000);        
			if($_FILES['image']['size'] > MAXSIZE)
			   echo 'Votre image est supérieure à la taille maximale de '.MAXSIZE.' octets';
			else {
				//on se connecte (remplacer les paramètres de connexion)
				$connexion = mysql_connect("localhost", "root", "") or exit (mysql_error());
				$database = mysql_select_db("tata") or exit (mysql_error());
				
				//récupération des infos saisies
				$nom = mysql_escape_string($_POST['nom']);
				$description = mysql_escape_string($_POST['description']);
				
				//Lecture du fichier. On doit utiliser la fonction mysql_escape_string car les données binaires contiennent des caractères spéciaux.
				$image = mysql_escape_string(file_get_contents($_FILES['image']['tmp_name']));
				
				//Il ne reste qu'à insérer tout ça dans notre table.
				mysql_query("INSERT INTO images(nom, description, img, extension) VALUES('".$nom."', '".$description."', '".$image."', '".$_FILES[image][type]."')") or exit (mysql_error());
				mysql_close();
				echo 'L insertion s est bien déroulée !';
			 }
		  }
	  }
  }
?>
	
	<h1>Envoyer une image</h1>
	<form enctype="multipart/form-data" action="traitement.php" method="post">
		<p>
			<label for="nom">Nom : </label><input type="text" name="nom" id="nom" /><br />
			<label for="description">Description : </label><textarea name="description" id="description" rows="10" cols="50"></textarea><br />
			<label for="image">Image : </label><input type="file" name="image" id="image" /><br />
			<label for="validation">Valider : </label><input type="submit" name="validation" id="validation" value="Envoyer" />
		</p>
	</form>
</body>
</html>

Le code est, je pense, assez clair.

On vérifie si l'image a été téléchargée. Sinon, on affiche un message d'erreur. Si tout se passe bien, on fait le traitement. On commence par contrôler l'extension du fichier. En fonction de la réponse, message d'erreur ou passage à la suite. Vérification de la taille de l'image : si elle est supérieure à celle définie dans notre constante 'MAXSIZE', on affiche un message d'erreur. Si par contre elle est conforme, on se connecte, on lit l'image et on enlève les antislash, puis on insère toutes nos données dans notre table. Facile comme tout, vous voyez.

Une galerie : page galerie.php

Stocker des images, c'est bien, mais les afficher, c'est encore mieux. Non ? :-°

Voyons comment faire cela grâce à une galerie (niveau graphisme, ce sera très sommaire, à vous de l'agrémenter avec du CSS

).
Code : PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Ma galerie d'images</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <style type="text/css">
		body {
			width: 95%;
		}
			
		div {
			width: 22%;
			float: left;
			text-align: center;
			border: 1px solid black;
			margin: 5px;
			padding:  5px;
		}
			
		p {
			text-align: left;
		}
			
		a {
			color: #000000;
			text-decoration: none;
		}
	   </style>
   </head>
   <body>
	
	<h1>Ma galerie d'images</h1>
	
	<?php
	    $connexion = mysql_connect("HOTE", "USER", "PASS") or exit (mysql_error());
	    $database = mysql_select_db("BASE") or exit (mysql_error());
	    
	    $affichage = mysql_query("SELECT id_img, nom, description FROM images") or exit (mysql_error());
	    while($result = mysql_fetch_assoc($affichage)) {
	       
		echo '<div>';
		echo '<a href="apercu.php?id_img='.$result[id_img].'"><img src="apercu.php?id_img='.$result[id_img].'" alt="'.$result[nom].'" title="'.$result[nom].'" /></a>';
		echo '<p>Description : '.$result["description"].'</p>';
		echo '</div>';
	    }
	    mysql_close();
	?>

</body>
</html>

Je reviens sur un point dans la partie suivante sur cette ligne de code :
Code : PHP

1
2
3

<?php
     echo '<a href="apercu.php?id_img='.$result[id_img].'"><img src="apercu.php?id_img='.$result[id_img].'" alt="'.$result[nom].'" title="'.$result[nom].'" /></a>';
?>

Pas de commentaires à faire sur le reste, elle est simple à comprendre. En cas de problème, relisez le cours de M@teo21 à ce sujet.

Au final, vous obtenez le rendu suivant :

Aperçu de la galerie

Affichage de l'image : page apercu.php

Souvenez vous de ce code :
Code : PHP

1
2
3

<?php
     echo '<a href="apercu.php?id_img='.$result[id_img].'"><img src="apercu.php?id_img='.$result[id_img].'" alt="'.$result[nom].'" title="'.$result[nom].'" /></a>';
?>

Pour afficher une image, il n'y a aucun changement par rapport à ce que vous connaissez à savoir :
Code : HTML

1	<img src="monImage.Extension" alt="unNom" title="unNom" /></a>';

Seulement, notre image n'est plus présente physiquement dans notre arborescence, mais dans notre base de données. Il faut donc réaliser un script PHP qui va récupérer notre image à partir de son identifiant. (Pour vous aidez à comprendre le principe si vous êtes perdu, il est exactement le même dans un système de news, vous remplacez le mot "news" par "image" tout simplement (voir ce tuto)).
Voici donc notre page apercu.php sur laquelle nous allons récupérer notre image à partir de l'identifiant.

Code : PHP

<?php
    //si nous avons une image
    if(!empty($_GET['id_img'])) {
		
	//connexion à la base de données
        $connexion = mysql_connect("HOTE", "USER", "PASS") or exit (mysql_error());
	$database = mysql_select_db("BASE")or exit (mysql_error());
		
	//on sécurise notre donnée
        $idImg = intval($_GET['id_img']);
		
	//la requète qui récupère l'image à partir de l'identifiant
        $apercu = mysql_query("SELECT extension, img FROM images WHERE id_img = ".$idImg) or exit (mysql_error());
		
	//si le résultat est différent de 1
        if(mysql_num_rows($apercu) != 1)
		echo 'L image n existe pas !';
	else {
		//on stocke les données dans un tableau
                $reponse = mysql_fetch_assoc($apercu);
		//on indique qu'on affiche une image
                header ("Content-type: ".$reponse['extension']);
                //on affiche l'image en elle même
		echo $reponse['img'];
	}
        mysql_close();
    } else
       echo 'Vous n avez pas sélectionné d image !';
?>