Nous allons voir dans ce tutoriel comment ajouter à notre site dynamique un formulaire d'upload d'image dédier à chaque article. Comme vous l'avez constaté, le logiciel CKeditor ne possède pas directement cette fonction et nous allons donc y pallier :). Bon, ne vous attendez pas à un truc qui "déchire grave" mais au moins, ça aura le mérite d'être fonctionnelle .
Pourquoi dédier un dossier image à chaque article?
Juste pour vous prendre la tête ^^... mais non, je plaisante. Quand je dis "dédié à chaque article", c'est parce que nous allons faire en sorte que chaque article créé dispose de son propre dossier d'images et vous allez vite comprendre pourquoi .

Ce que nous devons faire ou plutôt, ce que le code doit faire:

• Créer un dossier image automatiquement pour chaque article.
• Pouvoir uploader des images.
• Pouvoir effacer des images.
• Pouvoir visualiser les images.
• Renommer automatiquement les images si elles possèdent des caractères bizarres ou autre.
• Effacer l'intégralité des images et le dossier si on supprime un article.

Dans quelle fichier allons nous intervenir?

• Fichier ajouter-page.php.
• Fichier modifier-article.php.
• Fichier supprimer-article.php.
• Fichier fonctions.php.

Commençons par le fichier ajouter-page.php. Nous allons dans un premier temps créer un formulaire d'upload que l'on va intégrer après le formulaire déjà présent dans la page :

<form method="post" action="#ancre_formulaire" enctype="multipart/form-data">
<fieldset>
<legend>Uploadez vos images:</legend>
<a name="ancre_formulaire"></a>
<p><label for="photo">Image :</label>
<input type="file" size="65" name="photo" /></p>
<p><input type="submit" name="envoi" value="Envoyer l'image" /></p>
</fieldset>
</form>

Pour créer un dossier spécifique à chaque article, nous devons connaitre le prochain "id" qui s'incrémentera en base de données. En effet, chaque dossier image sera nommé de cette façon : "images-numéro id de l'article" soit "images-1", "images-2", etc... Pour ce faire, nous allons faire une simple requête qui va récupérer le prochain numéro "id". Le code ci-dessous est à placer juste entre la connexion à la BD et le traitement du formulaire :

<?php
//On va chercher le dernier numéro id
//SHOW TABLE STATUS fournit des informations sur les tables
$res = mysql_query("SHOW TABLE STATUS LIKE 'CONTENU'");
$status_table = mysql_fetch_array($res);
//$idplusun correspond au prochain id
$idplusun = $status_table['Auto_increment'];
//on construit le nom du dossier et son adresse sur le serveur
$dossier_upload = "../images-$idplusun";
//si le dossier n'existe pas, on le créé
if (!file_exists($dossier_upload)) {
//on créé automatiquement un dossier d'upload d'image 
mkdir ("$dossier_upload", 0777);
}
?>

SHOW TABLE STATUS permet de fournir des informations sur la table concernée.
En réalisant un print_r($status_table); nous obtenons un tableau qui nous sort une multitude de données dont notamment le prochain numéro id en auto incrément [Auto_increment] => 1 de notre table CONTENU .

echo '<pre>';
  print_r($status_table);
echo '</pre>';

$dossier_upload = "../images-$idplusun"; indique le nom du dossier et l'endroit ou il doit se trouver. Le "../" indique que le dossier se trouve à la racine du site. Je vous rappel que le dossier admin est protégé et que par conséquent si nous créons les dossiers images dans le dossier admin, les images ne s'afficherait pas aux visiteurs et qu'en plus une boîte d'alerte leurs demanderaient pseudo et mot de pass!

if (!file_exists($dossier_upload)) permet de vérifier si le dossier existe ou pas.

mkdir() : c'est le mot magique ^^ pour créer un dossier automatiquement selon les argument qui lui sont données.

mkdir ("$dossier_upload", 0777); : en gros, on demande qu'un dossier soit créé à l'adresse $dossier_upload, portant le nom images-$idplusun et dont les droits sur le dossier (0777->CHMOD) soit total.

Nous passons maintenant à la partie de traitement du formulaire qui consiste à la vérification des extensions des images, la mise en forme du nom de l'image, de l'upload de l'image et du traitement des erreurs.

Code à placer au dessus du formulaire d'upload :

<?php
//on vérifie l'extension des images et on arrange la mise en forme du nom
if(isset($_FILES['photo']))
{
	unset($erreur);
//Extension autorisé
	$extensions_ok = array('png', 'gif', 'jpg', 'jpeg', 'JPG', 'bmp');
//Chemin du dossier image
	$dest_dossier = '../images-'.$idplusun.'/';
	// vérifications
if( !in_array( substr(strrchr($_FILES['photo']['name'], '.'), 1), $extensions_ok ) )
	{
		$erreur = '<a name="ancre_formulaire"></a><div class="erreur">Veuillez 
sélectionner un fichier de type png, gif, bmp ou jpg !</div>';  
	}
	// copie du fichier
	if(!isset($erreur))
	{
		$dest_fichier = basename($_FILES['photo']['name']);
		// formatage nom fichier
		$dest_fichier = strtr($dest_fichier, 'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèé
êëìíîïðòóôõöùúûüýÿ', 'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
		// remplacer les caracteres autres que lettres, chiffres et point par _
		$dest_fichier = preg_replace('/([^.a-z0-1]+)/i', '_', $dest_fichier);
		// copie du fichier
	move_uploaded_file($_FILES['photo']['tmp_name'], $dest_dossier . $dest_fichier);
	}
}
//Erreur
if(isset($erreur)){
  echo $erreur;
}
?>

Reste plus qu'à pouvoir visualiser et supprimer les images.

Code à placer en dessous du formulaire d'upload :

<?php
//Adresse du dossier.
$adresse = "../images-$idplusun/";
//Si $_GET['nom'] existe, on supprime le fichier...
if(isset($_GET['nom']))
{
     if ($Fichier != "." && $Fichier != "..") 
     {
          $nom=''.$adresse.$_GET['nom'].'';
          @unlink($nom);
     echo '<div class="erreur">Le fichier "'.$_GET['nom'].'" a été effacé !</div><br/>';
     }
} 
//Ouverture du dossier. 
$dossier = opendir($adresse);
echo '<h2>Liste des images</h2>';
//on boucle pour l'affichage des images
while ($Fichier = readdir($dossier))
{  
     if ($Fichier != "." && $Fichier != "..") 
     { 
      echo '<div class="cadre"><img style="float:left;margin: 5px 10px 5px 5px; width: 
90px; height: 90px;" alt="image" src="'.$adresse.$Fichier.'"/><ul><li><b>
<a href="ajouter-page.php?nom='.$Fichier.'">Supprimer cette image</a></b></li><li><b>
<a href='.$adresse.$Fichier.' target="_blank">Visualiser cette image</a></b></li><li><b>
Url :</b> '.$adresse.$Fichier.'</li></ul></div>'; 
     }
}
//Fermeture du dossier. 
closedir($dossier);
?>

Passons maintenant à la modification du fichier modifier-article.php. C'est quasiment la même chose à quelques exceptions près... vous pouvez donc faire un copier/coller du code sous le formulaire déjà présent sans la partie PHP permettant de récupérer le prochain id.

Vous cherchez la ligne :

$id_transmit=$_GET['id'];

et vous ajoutez juste en dessous :

//on crée le nom du dossier
$dossier_upload = "../images-$id_transmit";
//si le dossier n'existe pas, on le créé
if (!file_exists($dossier_upload)) {
//on créé automatiquement un dossier d'upload d'image 
mkdir ("$dossier_upload", 0777);
}

Cette partie permet de vérifier l'existence du dossier image et de le créer si il n'existe pas.

Ensuite, cherchez la ligne :

$dest_dossier = '../images-'.$idplusun.'/';

et remplacez par :

$dest_dossier = '../images-'.$id_transmit.'/';

Puis cherchez la ligne :

$adresse = "../images-$idplusun/";

et remplacez par :

$adresse = "../images-$id_transmit/"

et enfin cherchez la ligne :

<a href="ajouter-page.php?nom='.$Fichier.'">

et remplacez par :

<a href="modifier-article.php?id='.$id_transmit.'&nom='.$Fichier.'">Supprimer cette image</a>

A ce stade, nous pouvons donc ajouter et supprimer des images. Reste plus qu'à pouvoir supprimer le dossier image et son contenu si on supprime un article. Pour commencer, nous ouvrons donc le fichier fonctions.php et nous ajoutons le code suivant qui permet de supprimer l'intégralité du contenu d'un dossier et le dossier lui même selon les argument qui lui sont données :

//fonction pour supprimer un dossier et son contenu
function advRmDir( $dir )
{
 // ajout du slash a la fin du chemin s'il n'y est pas
 if( !preg_match( "/^.*\/$/", $dir ) ) $dir .= '/';
 
 // Ouverture du répertoire demande
 $handle = @opendir( $dir );
 
 // si pas d'erreur d'ouverture du dossier on lance le scan
 if( $handle != false )
 {
 
  // Parcours du répertoire
  while( $item = readdir($handle) )
  {
   if($item != "." && $item != "..")
   {
    if( is_dir( $dir.$item ) )
     advRmDir( $dir.$item );
    else unlink( $dir.$item );
   }
  }
 
  // Fermeture du répertoire
  closedir($handle);
 
  // suppression du répertoire
  $res = rmdir( $dir );
  //pour les utilisateur de free.fr, on renomme le répertoire
  rename($dir,"../supprime-moi"); 
 }
 else $res = false;
 
 return $res;
 
}

Pour les utilisateur de Free.fr :
Free.fr bride l'utilisation de certaines fonctions comme rmdir() qui permet de supprimer un répertoire via PHP. Pour pallier à ce manque, on ajoute la fonction rename($dir,"../supprime-moi"); qui à pour fonction de renommer un dossier. Ainsi, chaque dossier image qui devrait théoriquement être éffacé sera renommé automatiquement en dossier portant le nom "supprime-moi". Je vous rassure tout de suite, si vous éffacez 50 articles, donc suppression de 50 dossiers, vous n'aurrez qu'un seul et unique dossier "supprime-moi" à la place. Etant donné que le dossier existera dès la suppréssion du premier article, il ne sera pas re créé .

Pour ceux et celles qui possèdent un nom de domaine, pensez à supprimer cette même ligne rename($dir,"../supprime-moi"); qui ne vous sera d'aucune utilitée.

Ceci fait, passons maintenant à la modification du fichier supprimer-article.php. Dans un premier temps, il faut inclure la fonction permettant de supprimer un repertoire et son contenu.

On cherche la ligne :

include('../connexion_bd.php');

et on insère juste après :

//on inclue le fichier des fonctions
include('../fonctions.php');

Ensuite, on met en place l'appel à notre fonction.

On cherche la ligne :

else {

et on insère juste en dessous :

//on attribue la bonne valeur à la variable $dir qui est dans le fichier des fonctions
$dir = '../images-'.$id.'';
//on supprime le dossier image et son contenu
 advRmDir($dir);

Voila, enregistrez vos documents et envoyez les sur votre serveur (pour les étourdits ) puis admirez. Note : Il existe néanmoins un petit inconvenient à ce formulaire. Vous devez uploader vos images avant d'écrire quoi que soit, sinon, vos écrits seront effacés puisque le formulaire "recharge" la page.

Catégorie Créer un site dynamique

Introduction à la création d'un site web dynamiqueStructure et mise en page du siteCréation de la base de donnéesCréation de la page d'accueil de l'administrationCréation et enregistrement des catégoriesModification et enregistrement des catégoriesSuppression des catégoriesModification et suppression des articles par catégoriesCréation de la page pour la rédaction des articlesModification et enregistrement des pagesSuppression des pagesMise en place du menuCréation de la page d'accueil du siteCréation de la page affichant les articlesCréation de la page catégorieNavigation du sitePagination des catégoriesProtection de l'administrationCréation d'un sitemap dynamiqueCréation d'un flux rss dynamiqueCréation d'un moteur de recherchesComment rendre la page d'accueil dynamique?Formulaire d'upload d'imagesComment créer un fil d'ariane pour notre site dynamique?Comment mettre en avant un article en page d'accueil?Intégration du formulaire d'upload CKFinder à l'éditeur CKEditorComment afficher des articles similairesComment rewriter notre site dynamique?Création du fichier contenant la fonction pour l'url rewritingDirective du fichier htaccessModification des liens et inclusion des fonctions