Galerie d'images dynamique

20 fév | Catégorie: PHP | Rédigé par François | 16931 lectures

Le but de ce tutoriel va être de reprendre le tutoriel « Galerie Snoupix Flip » réalisé en Jquery et d'en faire une galerie dynamique avec une petite interface d'administration pour gérer chaque photo. Au programme, vous allez essentiellement travailler avec l'upload d'image en PHP, l'insertion, la sélection et la suppression de données dans une table MySQL. C'est parti...

demo source

Etape 1: Création de la table SQL

Chaque image aura donc comme information: un identifiant unique, un nom et le lien de son image sur le serveur. Ces informations seront inscrites dans la base de données, tandis que l'image et sa miniature seront dans un dossier "images" de votre serveur. Voici le script SQL que vous pouvez éxécuter directement dans PHPMyAdmin (généralement PhpMyadmin se trouve à cette adresse: http://localhost/phpmyadmin/, si vous travaillez en local)

CREATE TABLE `galerie`.`images` (
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
`nom` VARCHAR( 100 ) NOT NULL ,
`lienimage` VARCHAR( 100 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = MYISAM

La base de données s'appelle donc "galerie", et la table se nomme "images". L'identifiant ('id') créé est unique et s'incrémentera automatiquement lors de chaque ajout d'images.

Etape 2: La page d'administration

Tout d'abord spécifions l'arborescence de nos fichiers. J'ai crée pour cette petite application 3 dossiers:

css : reprend tous les fichiers de mise en page.
js : tous les fichiers Javascript qui serviront dans la dernière étape du tuto.
images: contient évidemment toutes les images ainsi qu'un dossier miniatures.

Nous allons créer l'ossature de notre page HTML ("admin.php") situé à la racine de notre projet en utilisant pour l'instant que de l'HTML avec un peu de CSS, histoire de rendre les choses agréables à regarder.

<!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" lang="fr" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Galerie Snoupix Flip | Admin</title>
		<!-- CSS -->
		<link rel="stylesheet" href="css/admin.css" type="text/css" media="screen, projection" />
	</head>
	<body>
		<form method="post" action="admin.php" enctype="multipart/form-data">
			<fieldset>
				<legend>Ajout d'une image</legend>
				<label for="nom">Nom</label>
				<input type="text" id="nom" name="nom"/>
				<label for="image1">Image</label>
				<input type="file" id="image1" name="image1"/>
				<label for="image2">Miniature</label>
				<input type="file" id="image2" name="image2"/>
				<button type="submit">Uploader</button>
			</fieldset>
		</form>
		<table summary="Liste des images de la galerie">
			<caption>Liste des images</caption>
			<tr>
				<th>Id</th>
				<th>Nom</th>
				<th>Supprimer</th>
			</tr>
		</table>
	</body>
</html>

Voilà pour l'HTML, vous pouvez noter dans la balise form, l'attribut enctype dont la valeur est "multipart/form-data" : Cela signifie que le formulaire encode les données de votre formulaire, cela est indispensable pour uploader des images.
Sinon Le tableau est pour l'instant vide car il sera remplit dynamiquement en PHP/SQL par la suite. Voici le fichier CSS ("css/admin.css"), histoire de rendre ce tuto moins monotone ^^.

form{
	width:500px;
	margin:auto;
	background-color:#e5e5e5;
	border-radius:1em; /*Trop cool pour IE :) */
	-moz-border-radius:1em; /*Trop cool pour IE :) */
}
form *{
	font-size:1.0em;
	font-family:georgia;
}
form fieldset{
	border:none;
}

form legend{
	font-size:2em;
	color:#777;
	margin-top:0.3em;
}
form label{
	display:block;
	float:left;
	width:150px;
	text-align:right;
}
form input, form select, form textarea{
	width:300px;
	margin-bottom: 1em;
	margin-left:0.5em;
}
form button{
	position:relative;
	left:160px;
}


table{
width:50%;
margin:auto;
}
table caption{
font-size:2em;
color:#777;
}
table th{
background-color:#ddd;
border:none;
}

Etape 3: Ajouter des images

Maintenant, attaquons le coeur de notre problème et commencons par traiter les données de notre formulaire. Le script PHP se trouvera au tout début de notre page "admin.php", tout simplement parce que l'on a spécifié cette page dans l'attribut action du formulaire. Sachez que pour récupérer une image, il existe une variable appelée "superglobale" $_FILES['nomdevotreinput'] qui fonctionne de la même manière qu'une variable de type $_POST ou $_GET. Maintenant voyons le code avant de rentrer dans les détails:

<?php
include('params.inc.php');
if(!empty($_POST['nom'])){
	$erreurs = array(); //initialise un tableau d'erreurs au cas ou :)
	$nom = mysql_escape_string(trim($_POST['nom'])); //enleve les espaces de chaque côté de la variable
	$lienimage = '';
	$typesacceptes = array('image/jpeg','image/jpg','image/png','image/gif');
	//vérifie si les images existent et qu'elles sont au bon format
	if(!empty($_FILES['image1']['name']) && 
	!empty($_FILES['image2']['name']) && 
	in_array($_FILES['image1']['type'],$typesacceptes) && 
	in_array($_FILES['image2']['type'],$typesacceptes)
	){
		$lienimage = mysql_escape_string($_FILES['image1']['name']);
		copy($_FILES['image1']['tmp_name'],'images/'.$lienimage);
		copy($_FILES['image2']['tmp_name'],'images/miniatures/'.$lienimage);
		
		//connexion à la BDD
		$connect=mysql_connect(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion'); 
		mysql_select_db(MYDB) or die ('erreur de connexion à la base'); 

		$requeteinsert = 'INSERT INTO images(nom,lienimage) VALUES(\''.$nom.'\',\''.$lienimage.'\')';
		$result = mysql_query($requeteinsert,$connect);
		mysql_close($connect);	
	}
	else{
		$erreurs[] = 'Veuillez uploader une image valide (format jpg, png ou gif)!';
	}
}
?>

Vous pouvez noter l'inclusion d'un script PHP ("params.inc.php"), au tout début du programme, celui-ci possède les renseignements pour la connexion à la Base de données et contiendra probablement ceci si vous travaillez en local:

<?php
define("MYHOST","localhost");
define("MYUSER","root");
define("MYPASS","");
define("MYDB","galerie");
?>

Dans un premier temps, nous vérifions si la variable $_POST['nom'] existe et n'est pas vide, auquel cas nous éxécutons la suite du script sinon rien ne se passe. Ensuite nous créons une variable $nom qui reprend la variable du formulaire en la nettoyant un peu à l'aide des fonctions trim() qui enlève les espaces au début et en fin de variable et de la fonction mysql_escape_string() qui assure un minimum de sécurité lors de l'insertion de la variable dans la requête SQL. Comme je l'ai dit auparavant, pour récupérer un fichier d'un formulaire la variable $_FILES est indispensable. Celle_ci est en fait comme $_POST, un tableau associatif avec comme clé la valeur de l'attribut "name" de notre formulaire (ici "image1" par exemple). Cette variable est assez intéressante car elle nous propose aussi plusieurs propriétés de l'élément uploadé disponible de cette façon:

$_FILES['image1']['name'] : nom de votre image.
$_FILES['image1']['size'] : taille de votre fichier (en bits).
$_FILES['image1']['tmp_name'] : Chemin temporaire de votre fichier uploadé.
$_FILES['image1']['error'] : Equivaut à 0 si tout se passe bien, sinon un numéro d'erreur est attribué (taille trop grande, transfert échoué,etc...).
$_FILES['image1']['type'] : Type MIME de votre fichier.

Par la suite, on vérifie donc les images uploadées (si elles ont un nom et un type valide). Pour la validation des types j'utilise la fonction in_array() qui renvoit true si la chaîne passée en premier paramètre correspond à un élément du tableau.

La fonction copy(), comme son nom l'indique copie juste un fichier, en indiquant en 1er paramètre le fichier source, et en 2ème paramètre, la destination. Pour finir on éxécute une requête SQL de type INSERT INTO, avec comme valeurs le nom de l'image et son lien.

Comme vous avez pu le voir, j'ai crée un tableau d'erreurs qui se remplit si le formulaire est mal complété, j'utilise un tableau et non une chaîne, par simple habitude, ici une chaîne aurait suffit. Mais s'il existe plusieurs types d'erreurs, il est intéressant de pouvoir les avoir sous forme de tableau.

Pour afficher ce tableau correctement je vous propose de placer ce code juste avant le formulaire:

<?php
		if(!empty($erreurs)){
			echo '<div class="error">
					<p>Erreurs rencontrées</p>
					<ul>';
			foreach($erreurs as $erreur){
				echo '<li>'.$erreur.'</li>';
			}
			echo '</ul>
			</div>';
		}
?>

Et avec un peu de CSS pour que tout soit joli:

.error,.success{  
	width:50%;
	padding:0.3em;  
	margin:0.3em auto;
}
.error{
	color:#8a1f11;  
	background-color:#fbe3e4;
	border:2px solid #8a1f11;
}
.success{
	border:2px solid #1f9b15;
	color:#1f9b15;
	background-color:#cefcd4;
}

Vous pouvez dorénavant uploader des images sur votre serveur. La prochaine étape consistera à pouvoir les voir et les supprimer à partir de votre tableau.

Etape 4: Gérer ses images

Notre but est maintenant de remplir le tableau, il faudra donc placer le prochain script juste après la balise fermante </tr>

<?php
			$connect=mysql_connect(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion'); 
			mysql_select_db(MYDB) or die ('erreur de connexion à la base'); 

			$requeteselect = 'SELECT id,lienimage,nom FROM images';
			$result = mysql_query($requeteselect, $connect);
			while($image_courante = mysql_fetch_array($result,MYSQL_ASSOC)){
				echo '<tr>
						<td>'.$image_courante['id'].'</td>
						<td>'.stripslashes($image_courante['nom']).'</td>
						<td><a href="admin.php?sup='.$image_courante['id'].'">Supprimer</a></td>
				</tr>';
                                }
?>

Ce script n'est pas très compliqué et reprend beaucoup de fonctions déjà utilisées auparavant. Pour afficher toutes les lignes de notre requête, nous avons besoin de réaliser une boucle while qui éxécute la fonction mysql_fetch_array(). Celle-ci permet de séléctionner les données d'une ligne et de les insérer dans un tableau jusqu'à ce qu'il n'y en ai plus aucune. A noter aussi la fonction stripslashes() sur le nom de l'image, en fait cette fonction permet de supprimer les antislashs que la fonction mysql_escape_string() aura placé devant les caractères tels que " ou ' .

Pour la colonne suppression, j'utilise une URL de type "GET" qui prend en paramètre l'identifiant de l'image qu'on veut supprimer. Cela nécessite un nouveau script à placer juste avant l'affichage des lignes. Si on le place après il faudrait en fait raffraîchir la page pour ne plus voir la ligne supprimée, ce qui n'est pas très judicieux. Voici le code:

if(!empty($_GET['sup']) && is_numeric($_GET['sup'])){
				$requeteselect = 'SELECT lienimage FROM images WHERE id=\''.mysql_escape_string($_GET['sup']).'\'';
				$result = mysql_query($requeteselect, $connect);
				$image_courante = mysql_fetch_array($result,MYSQL_ASSOC);
				unlink('images/'.$image_courante['lienimage']);
				unlink('images/miniatures/'.$image_courante['lienimage']);
				
				$requetesup = 'DELETE FROM images WHERE id=\''.mysql_escape_string($_GET['sup']).'\'';
				$result = mysql_query($requetesup, $connect);
}

Ce bout de code permet donc de supprimer dans la base de données mais aussi de supprimer les images associées sur votre serveur! La fonction qui permet de supprimer est unlink() qui prend pour paramètre l'url relatif de votre fichier à supprimer.

administration galerie

L'administration est enfin terminée, on peut passer maintenant à la galerie proprement dite. Si vous n'avez pas fait le tuto sur la galerie Snoupix Flip, je vous conseille d'aller y jeter un oeil puisque je reprends exactement le même code.

Etape 5: La galerie

J'ai tout simplement repris le code source disponible dans le tuto. En décompressant l'archive dans le dossier dans lequel nous travaillons actuellement (inutile par contre de décompresser le dossier images).

La première étape va consister à renommer l'extension de snoupixFlip.htm en snoupixFlip.php. Vous vous retrouverez donc avec cette page:

<!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" lang="fr">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Snoupix Flip - Demo</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
        <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2.packed.js"></script>
        <script type="text/javascript" src="js/jquery.flip.js"></script>
        <script type="text/javascript" src="js/codeFlip.js"></script>
</head>
<body>
        <div id="header">
                <img src="images/Snoupix_Flip.jpg" alt="Snoupix Flip" />
        </div>
        <div id="conteneur">
                <div id="principale">
                        <div id="flipBox">
                                <div class="grande_image">
                                        <img src="images/TheCube.jpg" alt="Snoupix Flip"/><span>The Cube HDR</span>
                                </div>
                        </div>
                        <div class="miniatures">
                                <a class="flipBT" href="#" title="TheCube HDR">
                                        <img src="images/TheCube_s.jpg" class="chemin" alt="images/TheCube.jpg"/>
                                </a>
                                <a class="flipBT" href="#" title="Audi R8 HDR">
                                        <img src="images/R8_s.jpg" class="chemin" alt="images/R8.jpg"/>
                                </a>
                                <a class="flipBT" href="#"   title="Subaru HDR">
                                        <img src="images/subaru_s.jpg" class="chemin" alt="images/subaru.jpg"/>
                                </a>
                                <a class="flipBT" href="#"  title="Bazzar HDR">
                                        <img src="images/Bazzar_s.jpg" class="chemin" alt="images/Bazzar.jpg"/>
                                </a>
                                <a class="flipBT" href="#"  title="BlueOnFire HDR">
                                        <img src="images/BlueOnFire_s.jpg" class="chemin" alt="images/BlueOnFire.jpg"/>
                                </a>
                                <a class="flipBT" href="#"  title="toyRoom HDR">
                                        <img src="images/ToyRoom_s.jpg" class="chemin" alt="images/ToyRoom.jpg"/>
                                </a>
                                <a class="flipBT" href="#"  title="Trunk HDR">
                                        <img src="images/Trunk_s.jpg" class="chemin" alt="images/Trunk.jpg"/>
                                </a>
                                <a class="flipBT" href="#"  title="WinterTrain HDR">
                                        <img src="images/WinterTrain_s.jpg" class="chemin" alt="images/WinterTrain.jpg"/>
                                </a>
                        </div>
                </div>
        </div>
</body>
</html>

Les différentes miniatures ne nous intéressent plus dorénavant puisque nous allons tout afficher dynamiquement, ce qui nous donne maintenant ceci:

<!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" lang="fr">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Snoupix Flip - Demo</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
        <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2.packed.js"></script>
        <script type="text/javascript" src="js/jquery.flip.js"></script>
        <script type="text/javascript" src="js/codeFlip.js"></script>
</head>
<body>
        <div id="header">
                <h1>Galerie Dynamique</h1>
        </div>
        <div id="conteneur">
                <div id="principale">
                        <div id="flipBox">
                                <div class="grande_image">
                                    <?php
							//remplir par la premiere image
						 ?>
                                </div>
                        </div>
                        <div class="miniatures">
                               <?php
							//remplir par toutes les miniatures
					?>
                        </div>
                </div>
        </div>
</body>
</html>

Et enfin voila la page avec le code PHP:

<div id="flipBox">
	<div class="grande_image">
 	<?php
 	include('params.inc.php');
 	$connect=mysql_connect(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion'); 
 	mysql_select_db(MYDB) or die ('erreur de connexion à la base'); 
 	$requeteselect = 'SELECT id,lienimage,nom FROM images';
 	$result = mysql_query($requeteselect, $connect);
 	$tableau = array();
 	$i = 0;
 	while($image_courante = mysql_fetch_array($result,MYSQL_ASSOC)){
 		//on met toutes les infos dans un tableau
 		$tableau[$image_courante['id']]['nom'] = $image_courante['nom'];
 		$tableau[$image_courante['id']]['lienimage'] = $image_courante['lienimage'];
 		if($i == 0){ //si il s'agit de la première image on l'affiche
 			echo '<img src="images/'.$tableau[$image_courante['id']]['lienimage'].'" 
 alt="'.stripslashes($tableau[$image_courante['id']]['nom']).'"/>
 <span>'.stripslashes($tableau[$image_courante['id']]['nom']).'</span>';
 		}
 		++$i;
 	}
 	mysql_close($connect); 
 	?>
 	</div>
</div>
<div class="miniatures">
	<?php
	foreach($tableau as $image){
		echo '<a class="flipBT" href="#"  title="'.stripslashes($image['nom']).'">
			<img src="images/miniatures/'.$image['lienimage'].'" class="chemin" alt="images/'.$image['lienimage'].'"/>
			</a>';
	}
	?>
</div>

Ce code n'est pas non plus très difficile à appréhender si jusque là vous avez bien tout assimilé. Je remplis en fait un tableau multidimensionnel ($tableau) qui contiendra mes 2 informations essentielles, le nom et le chemin de l'image et dont leurs clés est l'identifiant de l'image.

Ensuite, afin de lister les miniatures, nous utilisons la fonction foreach() qui est une sorte de boucle qui parcourt le tableau, identifiant par identifiant.

Ce tutoriel touche à sa fin, j'espère qu'il vous aura appris certains trucs et qu'il pourra vous donner certaines idées. En tout cas le script final est biensûr à améliorer sur divers points (recadrage dynamique de la miniature, Modification des noms d'image, etc).

Cette création par Snoupix.com est mise à disposition selon les termes de la licence Creative Commons.

Partager ce tutoriel :

62 Commentaires

le 22 février à 11h09 Shackdown Répondre Salutation, merci pour ce tuto. Je le met dans mes favoris on sait jamais ça peut servir ...

tcho

le 22 février à 12h06 ThibZ Répondre C'est super ! Je vais me servir de ce tuto sur mon prochain site, je vous montrerai, c'est vraiment un script sympathique.

le 26 février à 23h28 Baron Répondre Merci beaucoup!!
Je vais tester sa sur un nouveau projet web!

le 27 février à 04h22 MrJulien Répondre Bonsoir, j'ai suivi votre premier tuto super par contre pour la suite ici, j'ai plus de mal, la premiere photo en grand s'affiche puis plus rien ?

Que faire, j'ai chercher pendant des heures mais rien trouver d'anormal, est-ce qu vous avez tester votre tuto ?

Merci d'avance.

Julien.

le 27 février à 13h34 François Répondre Oui je fais mes tutos au fur et à mesure que je les rédige,donc ce script est censé fonctionné.

Pour reprendre ton problème, tu n'as qu'une seule image qui s'affiche (et même pas la miniature qui lui correspond?). Si c'est le cas vérifie que ton dossier 'miniatures' existe bien.

A+!

le 28 février à 09h24 MrJulien Répondre Non, en fait j'ai les miniatures qui s'affichent et la première photo en grand mais lorsque je clique sur une miniature, c'est comme si il ne trouvait plus les grandes photos, la place j'ai le nom de celle-ci mais plus d'images ????

Je m'y remets ce matin on as voir.

Cordialement,

Julien.

le 28 février à 09h27 MrJulien Répondre Réponse à MrJulien:Non, en fait j'ai les miniatures qui s'affichent et la première photo en grand mais lorsque je clique sur une miniature, c'est comme si il ne trouvait plus les grandes photos, la place j'ai le nom de celle-ci mais plus d'images ????

SI vous pouvez vérifier à l'adresse : http://cubana66.comze.com/photos.php

Je m'y remets ce matin on as voir.

Cordialement,

Julien.

le 28 février à 09h38 MrJulien Répondre Excusez moi encore mais je me demandais si le code suivant il ne manquait pas un else car a priori la condition vérifie s'il s'agit de la première image et on l'affiche mais si ce n'est pas la première il se passe quoi ? :

*************************************************************
if($i == 0){ //si il s'agit de la première image on l'affiche
echo '<img src="images/'.$tableau[$image_courante['id']]['lienimage'].'"
alt="'.stripslashes($tableau[$image_courante['id']]['nom']).'"/>
<span>'.stripslashes($tableau[$image_courante['id']]['nom']).'</span>';
}

le 28 février à 11h36 François Répondre Salut, je crois avoir trouvé,
tu as oublié le chemin "admin/photos/" pour tes miniatures (attribut alt), donc il ne reconnait pas les images...

le 28 février à 11h47 ThibZ Répondre Ca serait vraiment plus pratique si les miniatures pouvaientt être générées automatiquement. J'ai regarder un peu sur le net mais bien souvent il y a utilisation de classe php facilitant la procédure, auriez vous une petite astuce à me donner?

le 28 février à 13h19 François Répondre Réponse à ThibZ:Ca serait vraiment plus pratique si les miniatures pouvaientt être générées automatiquement. J'ai regarder un peu sur le net mais bien souvent il y a utilisation de classe php facilitant la procédure, auriez vous une petite astuce à me donner?

Je suis d'accord avec toi, mais je voulais pas donner de code trop compliqué sans l'expliquer enfin si ca t'interesse j'ai une fonction qui fait exactement ca:

// Redimensionne une image
public static function resize($fileAdresse, $largeur_max, $hauteur_max, $respect_ratio, $fileSaveAdresse='', $jpeg_quality = '90') {

if(empty($fileSaveAdresse)) {
$fileSaveAdresse=$fileAdresse;
}

$image = SBImage::loadFromFile($fileAdresse);
if($image == false) {
// Retour avec erreur pour non rechargement de l'image
return -1;
}

// Récupération des dimensions de l'image.
$dim_x = imagesx($image);
$dim_y = imagesy($image);

// Calcul des nouvelles dimensions
$coefficient_theorique = $largeur_max/$hauteur_max;
$coefficient_reel = $dim_x/$dim_y;

if(!$respect_ratio) {

// Redimensionnement de l'image au ratio souhaité
$crop = SBImage::crop($fileAdresse, $largeur_max, $hauteur_max);
if($crop !== 0) {
return (-5+$crop);
}

// Rechargement de l'image
$image = SBImage::loadFromFile($fileAdresse);
if($image == false) {
// Retour avec erreur pour non rechargement de l'image
return -6;
}
$dim_x = imagesx($image);
$dim_y = imagesy($image);
}

if($coefficient_theorique >= $coefficient_reel) {
// Si l'image est plus étirée en hauteur que la théorie.
// On adapte sur la hauteur max
$coefficient_adaptation = $hauteur_max/$dim_y;
} else {
// Si l'image est plus étirée en largeur que la théorie.
// On adapte sur la largeur max
$coefficient_adaptation = $largeur_max/$dim_x;
}

$ndim_x = $coefficient_adaptation*$dim_x;
$ndim_y = $coefficient_adaptation*$dim_y;

$result_image = SBImage::createTransparentImage($ndim_x, $ndim_y);
if(!$result_image) {
return -4;
}

// Redimensionnement
if(imagecopyresampled($result_image, $image, 0, 0, 0, 0, $ndim_x, $ndim_y, $dim_x, $dim_y)) {
// Enregistrement de la nouvelle image.
if(SBImage::saveIntoFile($result_image, $fileSaveAdresse, $jpeg_quality)) {
return true;
}
// Retour d'erreur pour défaut d'enregistrmeent.
return -3;
} else {
// Retour d'erreur pour défaut de redimensionnement.
return -2;
}
}

Si ce genre de fonctions t'intéresse je peux t'en donner plusieurs!

le 07 mars à 16h42 archimede Répondre merci beaucoup pour ton tuto, je viens de le tester, c'est super bien expliqué, super détaillé, ça marche vraiment très bien... Juste une question comment intégrer les fonctions de redimentionnement automatique dans ton script. Merci pour la réponse...
*Archi

le 07 mars à 16h58 François Répondre Alors si tu reprends la fonction resize écrite plus haut... tu effaces déjà les lignes 10 et 12 dans le script d'ajout d'images et la ligne 16 tu la remplaces par
resize('images/'.$lienimage,100,100,true,'images/min/'.$lienimage);

Ca devrait fonctionner comme ca...

En tout cas merci pour tes encouragements!

le 07 mars à 17h14 archimede Répondre (re) ben dit donc, c'est du réactf

, donc si je récap ta réponse, je mets en commentaire les ligne 10, 12 et 16 du script admin (page: admin.php), je place sous la ligne 16 (précedement commentée) ce bout de code "resize('images/'.$lienimage,100,100,true,'images/min/'.$lienimage);"

C'est tout !
Merci pour ta réponse...
*Archi

le 07 mars à 17h21 archimede Répondre (re,re) je viens de tester ce que je te demandais, ben c'est pas bon

j'ai donc pas compris tes explications... Je dois reprendre la fonction rezine que tu decris plus haut (enfin je pense) et je la place à quel niveau et quel fichier ? Désolé d'être un peu cru mais parler de bout de code via un forum n'est pas chose facile

(je parle pour moi). Encore merci pour ta réponse.

*Archi

le 07 mars à 17h47 François Répondre Oulala oui c'est normal en fait, cette fonction vient d'une classe et utilise donc d'autres méthodes de la classe, donc ce que je peux faire c'est te donner cette classe par mail. (mail moi sur contact at snoupix.com)

le 23 mars à 19h00 Tchowy Répondre Pour ceux qui ont la mauvaise habitude de faire des copier coller comme moi, il y a eu une petite erreur d'oubli pendant la retranscription.

Etape 4: Gérer ses images

1. <?php
2. $connect=mysql_connect(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion');
3. mysql_select_db(MYDB) or die ('erreur de connexion à la base');
4.
5. $requeteselect = 'SELECT id,lienimage,nom FROM images';
6. $result = mysql_query($requeteselect, $connect);
7. while($image_courante = mysql_fetch_array($result,MYSQL_ASSOC)){
8. echo '<tr>
9. <td>'.$image_courante['id'].'</td>
10. <td>'.stripslashes($image_courante['nom']).'</td>
11. <td><a href="admin.php?sup='.$image_courante['id'].'">Supprimer</a></td>
12. </tr>';
13. ?>

Entre la ligne 12 et 13 il faut rajouter un crochet fermant " } ".

le 23 mars à 20h04 Francois Répondre Exact, tu fais bien de le signaler

le 30 mars à 08h04 mich83 Répondre Salut

tout d abord félicitation pour tes tutos, il sont clairs et très pratique, ton site aussi d ailleur est très clair, je vous voulai savoir si croit qu'il est possible de faire cette galerie flip mais avec de la vidéo, je en pense, mais peut etre que tu as une solution, ou encore une galerie vidéo dynamique dans le meme esprit,
encore merci, bon continuation

le 30 mars à 08h37 Francois Répondre Merci pour les compliments

On peu effectivement garder le même esprit pour l'affichage des videos, mais je ne pense pas que jQuery et Flash fonctionnent assez bien ensemble...Donc y'aurai peut être des soucis au niveau de la transition...Sinon pour tout ce qui est du PHP c'est pareil (il faut juste que tu changes le type MIME du fichier que tu attends dans l'admin)

le 30 mars à 10h47 mich83 Répondre Salut,

Merci de me répondre si rapidement, je ne souhaite afficher les video en flash mais de l'affichage de video streaming type youtube. Je débute coté PHP, et tes tutos me sont d'une grande aide. Pourrait tu m en dire un peu plus sur le type MIME, comme je te l ai dit je suis vraiment débutant.
Encore merci

le 30 mars à 11h55 Francois Répondre Bah en fait tant que c'est de la vidéo ca sera en Flash (Youtube est en Flash) le type MIME correspond au format de ton fichier, donc si tu reprends le tuto, dans les types acceptés tu pourras rajouter le type "application/octet-stream" pour les vidéos flv.
Si tu souhaites ton propre lecteur Video Streaming renseigne toi ici: http://flv-player.net/players/, tu peux les personnaliser très facilement!
A+

le 30 mars à 13h43 mich83 Répondre Salut,

encore moi tu va pensez que je suis vraiment pénible mais je suis bloqué, j ai bien rajouté le type dans mon fichier admin

$typesacceptes = array('image/jpeg','image/jpg','image/png','image/gif','application/octet-stream');
//vérifie si les images existent et qu'elles sont au bon format
if(!empty($_FILES['image1']['name']) &&
!empty($_FILES['image2']['name']) &&
in_array($_FILES['image1']['type'],$typesacceptes) &&
in_array($_FILES['image2']['type'],$typesacceptes)
){

ensuite de l administratreur j essaye uploader l url de la video (youtube par exemple "http://www.youtube.com/watch?v=5dMqfhsiPgk";

j essaye et ca ne marche, j ai essayé également avec les MIME pour avi, mov ,mpge ect..

toujours rien, peut etre qu'il indiquer dans le fichier snoupix la présence d'une video, lui indiquer une taille, je sais pas ,

Vraiment si tu pouvez encore m aider ca serai cool;

Au faite il serait bien de te mettre une boite à don

encore merci,

le 30 mars à 17h58 Francois Répondre Déjà pour les vidéos tu n'as pas besoin du champ miniature, donc tu peux les enlever dans l'admin...
Sinon pour Youtube l'url que tu donnes n'est pas celui d'une vidéo mais celui d'une page web je crois. Aussi tu peux reprendre le lien qu'ils donnent <object width="480" height="295"><param name...etc, là au moins t'es sur que ca marchera et tu ne seras pas obligé de gérer la vidéo mais juste une chaine de caractères...
Pour les dons c'est en effet peut être à envisager mais on sait pas si beaucoup de monde serait interessé^^

le 02 avril à 12h10 mich83 Répondre Salut francois,

Encore merci pour toutes les tuyaux concernant la video, je te souhaite vraiment une très bonne continuation

Snoupix ca tue

le 16 avril à 19h19 Mrpinpin Répondre Salut,
je dois dire que je ne connais pas grand chose au php, mais grace à ton tuto, j'ai reussi à avoir une galerie dynamique, donc grand merci !
Je voulais savoir si on pouvait avoir la même galerie sans avoir le flip, juste une transition normale en fade ou push. J'ai fait plusieurs essaie, mais aucun ne marche.
merci encore!

le 16 avril à 20h18 François Répondre Oui en fait il suffit juste de changer la composition HTML de la derniere étape, pour des fadeIn et autres effets, va voir le plugin jCycle (je crois qu'il s'appelle comme ca).
A bientôt

le 30 avril à 20h13 LARAKI Répondre Bonsoir, je vous remercies de se tutoriaux mais j'ai un probléme dans mon serveur local aprés que je valide admin.php il me donne le message:

Notice: Use of undefined constant MYHOST - assumed 'MYHOST' in C:\wamp\www\nouvelle cration\admin.php on line 44

Notice: Use of undefined constant MYUSER - assumed 'MYUSER' in C:\wamp\www\nouvelle cration\admin.php on line 44

Notice: Use of undefined constant MYPASS - assumed 'MYPASS' in C:\wamp\www\nouvelle cration\admin.php on line 44

Warning: mysql_connect() [function.mysql-connect]: Unknown MySQL server host 'MYHOST' (11001) in C:\wamp\www\nouvelle cration\admin.php on line 44
erreur de connexion .

voila le code php que j'ai fait:

<!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" lang="fr" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galerie Snoupix Flip | Admin</title>

<link rel="stylesheet" href="css/admin.css" type="text/css" media="screen, projection" />
</head>
<body>
<?php
if(!empty($erreurs)){
echo '<div class="error">
<p>Erreurs rencontrées</p>
<ul>';
foreach($erreurs as $erreur){
echo '<li>'.$erreur.'</li>';
}
echo '</ul>
</div>';
}
?>
<form method="post" action="admin.php" enctype="multipart/form-data">
<fieldset>
<legend>Ajout d'une image</legend>
<label for="nom">Nom</label>
<input type="text" id="nom" name="nom"/>
<label for="image1">Image</label>
<input type="file" id="image1" name="image1"/>
<label for="image2">Miniature</label>
<input type="file" id="image2" name="image2"/>
<button type="submit">Uploader</button>
</fieldset>
</form>
<table summary="Liste des images de la galerie">
<caption>Liste des images</caption>
<tr>
<th>Id</th>
<th>Nom</th>
<th>Supprimer</th>
</tr>
<?php
$connect=mysql_connect
(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion');
mysql_select_db(MYDB) or die ('erreur de connexion à la base');

$requeteselect = 'SELECT id,lienimage,nom FROM images';
$result = mysql_query($requeteselect, $connect);
while($image_courante = mysql_fetch_array($result,MYSQL_ASSOC)){
echo '<tr>
<td>'.$image_courante['id'].'</td>
<td>'.stripslashes($image_courante['nom']).'</td>
<td><a href="admin.php?sup='.$image_courante['id'].'">Supprimer</a></td>
</tr>';
}
?>
</table>
</body>
</html>

je ne sais oû est l'erreur, il me mentionne la ligne 44la voila :

(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion');

le 01 mai à 05h05 Francois Répondre En fait il faut que tu definisses ces constantes, je donne un fichier de config dans le tuto pour te connectes à ta base de données...apres il te suffit de l'inclure... et verifier au passage que ces données sont correctes...

le 10 mai à 15h43 xav64 Répondre Bonjour,
Le tuto est génial, seul petit soucis comme je suis débutant en php , je n'arrive pas à créer ma table sql chez mon hébergeur qui est amen.

Y aurait il une personne qui pourrait me creer un fichier texte avec les paramétrages sql que je puisse intégré dans ma base

Merci

le 11 mai à 12h18 François Répondre Euh le fichier texte existe déjà dans le tuto, il suffit de le copier dans la partie SQL de ton phpmyadmin.
Salut!

le 18 mai à 17h50 archimede Répondre Bonjour François !

Je reviens vers toi car je voudrais utiliser le script mais sans les miniatures, j'arrive a prendre les grandes images pour les miniatures que j'échantillonnes en dur avec un height sur img et des css.

Mon problème est au niveau du formulaire d'envoi, sur le formulaire a proprement parlé, je met en commentaire l'imput avec id2 pour ne pas l'afficher, ensuite et c'est la que c'est le drame, je mets en commentaires les vérifications pour les minuatures dans le php au dessus et là le script il comprends plus rien, comment je pourrais faire pour n'avoir que les images opérationnelles sans les miniatures.

Te remerciant par avance.

Cordialement *Archi

le 18 mai à 18h03 archimede Répondre ok, c'est résolu, il le faut mettre les lignes en commentaire mais les supprimer carrement. Désolé pour le dérangement, je vous mets ici le bout de code que j'utilise. Bien à vous ! <code>if(!empty($_POST['nom'])){
$erreurs = array(); //initialise un tableau d'erreurs au cas ou

$nom = mysql_escape_string(trim($_POST['nom'])); //enleve les espaces de chaque côté de la variable
$lienimage = '';
$typesacceptes = array('image/jpeg','image/jpg','image/png','image/gif');
//vérifie si les images existent et qu'elles sont au bon format
if(!empty($_FILES['image1']['name']) &&
in_array($_FILES['image1']['type'],$typesacceptes)
){
$lienimage = mysql_escape_string($_FILES['image1']['name']);
copy($_FILES['image1']['tmp_name'],'images/'.$lienimage);

//connexion à la BDD
$connect=mysql_connect(MYHOST,MYUSER,MYPASS) or die ('erreur de connexion');
mysql_select_db(MYDB) or die ('erreur de connexion à la base');

$requeteinsert = 'INSERT INTO images(nom,lienimage) VALUES(\''.$nom.'\',\''.$lienimage.'\')';
$result = mysql_query($requeteinsert,$connect);
echo '<p class="success">Votre image a bien été enregistrée!</p>';
mysql_close($connect);
}
else{
$erreurs[] = 'Veuillez uploader une image valide (format jpg, png ou gif)!';
}
}
</code>

le 02 juin à 11h36 nanaixme Répondre Bonjour,

Je suis également intéressée par la classe à utiliser pour le redimensionnement automatique des miniatures si c'est possible merci en tout cas pour les fonctions mises ds les comms.

le 02 juin à 18h41 François Répondre Ah ah ca sera l'objet du prochain tuto... enfin ca en fera parti:
ca sera un slider dynamique en jQuery avec une partie admin ou l'on choisit ses images, la position des slides, les textes de description... le tout avec de l'ajax

.
Le script est pret il me reste plus qu'a l'expliquer^^

le 03 juin à 17h56 rem51 Répondre Bonjour,

J'essaie d'intègre votre galerie dans un projet perso.
cependant pour le redimensionnement automatique de l'image, il faut la classe SBImage. Où la trouve ton ?

Merci

le 30 juin à 23h36 François Répondre Allez voici le lien

http://snoupix.com/demo/slider-jquery/SBImage.txt
Je vous laisse le renommer en .php

le 10 juillet à 21h38 François Répondre Tout dépend comment tu fonctionnes tu le places un peu ou tu veux.
Le top étant de le faire appel avec la fonction autoload qui est tres pratique si tu commences à avoir beaucoup de classes...

le 09 juillet à 18h32 xav64 Répondre Bonjour,
Je suis débutant en php
Ou place t'on cette classe SBimage .php pour dans le dossier ou fichier php galerie pour la gestion des miniatures ??

Merci

le 22 juillet à 18h45 kroswell Répondre salut,
merci pour ton tuto.
mon problème est que je bloque dès le début (arrgh !) pour la requète MySQL.
elle semble bien s'effectuer, mais aucune trace de la base de donnée...
vous aurez compris que je suis débutant... mais j'aimerais bien savoir où elle est.
il suffit juste de faire un copier/coller du code non ?

le 27 juillet à 14h53 kroswell Répondre bon, je vais m'auto-répondre.
un peu de souçi avec wamp, mais je crois bien que j'y suis arrivé. (si si ^^)
j'ai donc une base de données "galerie" avec une table "images"...
voyons voir la suite maintenant.

le 27 juillet à 23h01 francois Répondre Yop désolé de répondre que maintenant...
En fait sous wamp tu accedes a ta bdd avec localhost/phpmyadmin/, mais bon ca tu auras du le deviner vu ton précédent post!
Il te reste plus qu'à remplir la table! n'hésite pas à regarder le code source car les dossiers sont déjà faits...

le 18 août à 09h30 Ether Répondre Bonjour et merci pour ce tutorial avant tout

.

J'ai essaye ton astuce pour le redimensionnement mais je crains ne pas comprendre ou mettre la fonction ?

Merci d'avance.

le 18 août à 22h54 François Répondre Tu mets la classe dans un fichier à part dont tu fais un appel dans ton programme principal via un include('tonfichier.php');...
tchao!

le 01 septembre à 16h54 stephi Répondre bonjour françois et à tous

ce tuto est tres sympa

j ai repris exactement le code. ça fonctionne impec avec des images gif( elles sont bien copiées dans le dossier image et miniature et enregistrées dans ma base mysql) mais pour le jpg j ai le message : 'Veuillez uploader une image valide (format jpg, png ou gif)!'

donc il ne les prends pas.

pourquoi? quelqu un a t il eu ce problême?

merci à tous

stephi

le 25 septembre à 05h15 Shoot Répondre Bonjour, déjà quelques compliments bien mérité : le site est génial, les tuto bien fait et d'une grande qualité, c'est vraiment du bon boulot qui est fait par le(s) webmaster(s). Mais, (il y a toujours un mais ^^), je travaille sur le tuto de la galerie d'image dynamique et j'ai un soucis. Tout fonctionne hormis l'affichage de la grande image. Tout est bien placé, les miniatures sont visibles et l'upload ne pose pas de problème, en revanche, l'affichage de la grande image me donne une partie du haut de l'image et le reste est gris. Je n'ai aucune idée d'ou cela peut venir, j'ai essayé en local avec easyphp2 et 3, cela ne change rien. Si vous aviez une idée, ce serait génial !!! Merci et bonne journée.

le 15 octobre à 15h23 GrafandWeb Répondre Salut, pourquoi sous IE il ne trouve pas mes grandes images, lorsque l'on clique sur une vignette une erreur s'affiche alors que sous firefox pas de problème.

le 12 janvier à 22h01 Vince Répondre Salut,
Tout d'abord merci pour ce super tuto, je vais l'utiliser pour mon site qui va regrouper des photographes, je reviendrais mettre l'URL quand il sera fini.

Sinon je poste juste pour donner une petite remarque, la fonction mysql_escape_string est maintenant déprécié, on utilise mysql_real_escape_string.

++

le 12 janvier à 22h39 Vince Répondre Encore moi, j'ai le même problème que Stephi "j ai le message : 'Veuillez uploader une image valide (format jpg, png ou gif)!'" mais pour tous les formats d'images.
Quand je fais un echo j'ai :
$_FILES['image1']['type'] = image/pjpegimage/pjpeg pour mon image photo1.jpg

Que se passet-t-il?
je mets le test en commentaire en attendant...

le 03 février à 15h20 Petit_fwanz Répondre Bonjour,
J'ai un petit soucis en utilisant la classe qui permet de redimensionner :s
Fatal error: Call to undefined function resize() in /homez.314/webetcon/www/me/portfolio/admin.php on line 17
Pourtant je fais un appel du fichier "resize.php" grace a un "include"
Que faire?
J'ai utilisé la classe fourni dans le tuto

le 03 février à 16h47 Petit_fwanz Répondre Je répond a ma question.
A la place de: resize(...) il faut mettre SBImage::resize(...);

le 03 février à 17h13 Petit_fwanz Répondre Par contre quelqu'un a une solution pour l'upload d'images verticale?
J'ai l'image et la mignature qui se chevauchent :s pas cool!

le 05 février à 09h09 alex Répondre tu as regardé du coté du css ?

genre:

.grande_image img {
margin-bottom:nPX;
}

le 08 février à 13h01 Wave Répondre bonjour,
je suis débutant de php, j'ai une problème de connection à la base de donnée depuis local host
j'ai essayé de résoudre le problème mais je comprendre pas, il met toujours cette erreur à la page admin:

Warning: mysql_connect() [function.mysql-connect]: Acc�s refus� pour l'utilisateur: 'root'@'@localhost' (mot de passe: NON) in C:\Program Files\EasyPHP 3.0\www\zeppo\admin.php on line 74
erreur de connexion

que doit je fais, merci

le 07 avril à 20h17 xav64 Répondre Salut a quel endroit met tu ton include SBImage::resize(...);admin.php ou ailleur ??

le 05 mai à 13h20 bil85 Répondre bien fait

le 10 mai à 14h31 aymeric Répondre Bonjour,
Je souhaiterais rajouter une description avec le titre dans la galerie et l'administration, comment fait on.
Par contre je suis vraiment pas bon en php,
si quelqu'un peu m'aider je le remercie beaucoup

le 14 mai à 08h20 Marie Répondre Bonjour,

Désolé pour le up du topic.
En premier, comme beaucoup, merci pour ce tuto bien expliqué. Un des rares sur le net !
Je n'ai cependant pas réussi à résoudre le problème de Stephi et Vince. Mes images .gif passent mais pas les .jpeg .
Si ceux qui ont eu le même problème repasse par la ...

Ou pour tout ceux qui pensent pouvoir m'aider.
Merci d'avance !

le 14 mai à 09h51 Marie Répondre Double post pour dire que visiblement, ca ne fonctionne pas avec IE mais avec firefox aucun problème.
Je cherche quand même toujours une solution pour Ie ^^

le 14 mai à 10h05 Marie Répondre Et oui troisième post !
Pour ceux qui veulent la solution sous IE :

$typesacceptes = array('image/gif','image/jpg','image/png','image/jpeg')

Il faut rajouter deux types d'images:
-png: 'image/x-png'
-jpeg: 'image/pjpeg'

Voilà encore merci pour ce tuto!

le 17 mai à 21h31 Stephane Répondre Merci pour ta solution.

le 10 juin à 16h49 Gugul Répondre Bonjour !
Aucun souci de mon coté si ce n'est une petite erreur que me signale firebug à chaque clic sur une miniature ( ce serait du au href="#" du <a> de la div miniature apparemment, m'enfin).

Par contre je me demandais, est-t'il possible de charger la grande photo sans avoir à recharger la page ( ce qui la remonte au header, gênant quand la galerie se situe assez bas dans le site).

Merci d'avance !

Galerie d'images dynamique | Snoupix