Bonjour à tous!

Nous allons voir ici comment réaliser une galerie d’image avec Php et une base de donnée MySQL.

Les images de la galerie seront cliquables et redirigeront vers une page contenant l’image concernée ainsi que les descriptions de celle ci.

Nous verrons également comment créer un formulaire d’upload afin d’ajouter de nouvelles images à votre galerie sans avoir à toucher au code une fois celle-ci fini 😉

Cette galerie est multi-usage : trombinoscope, galerie d’image etc…. à vous de choisir l’utilisation que vous souhaitez en faire ! 🙂

Un petit exemple ici !

J’ai désactivé le formulaire 😉

Bien évidemment il ne s’agis que d’un tuto de base dans lequel je ne ferais qu’un minimum de css ;). Ne soyez donc pas trop méchant et surtout n’hésitez pas à poser des questions si celles ci vous brûlent les lèvres !

Vous aurez besoin pour la réalisation de cette galerie d’image en Php d’un serveur local tel que Wamp (pour pc :p ) et de votre éditeur de texte préféré .

Dans un premier temps nous allons voir la structure de notre base de donnée.

Dans ce tutoriel, nous réaliserons une galerie pour poney 😉

La base de donnée

Dans votre Php My Admin, créez une nouvelle base de donnée que vous appellerez « poney ».

Vous créez ensuite une nouvelle table que vous nommerez « poni » comprenant 4 champs.

Pourquoi me direz vous?

Disons que pour notre superbe galerie de super poni d’amour nous aurons besoin de : leur ID, nom, couleur, taille,  sexe, note et leur photo. (Bien entendu vous pouvez changer le nombre de champs ainsi que leur signification en fonction de vos besoins ! 😉 )

id sera de type int(11) NOT NULL AUTO_INCREMENT 

nom sera de type text NOT NULL

note sera de type int(11) NOT NULL

photo sera de type text NOT NULL (en effet la bdd de contiendra que le nom de l’image; que nous stockerons dans un dossier spécifique.)

--
-- Base de données: `poney`
--

-- --------------------------------------------------------

--
-- Structure de la table `testponi`
--

CREATE TABLE IF NOT EXISTS `testponi` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `nom` text NOT NULL,
 `note` int(11) NOT NULL,
 `photo` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=23 ;

Nous allons maintenant procéder à la création des fichiers php.

Les fichiers php

Je sépare volontairement en plusieurs fichiers afin de faciliter la compréhension.

Vous aurez besoin de :

config.php (qui contiendra vos informations de connexions à votre base de donnée.)

database.fn.php (fonction de connexion et de déconnexion de base de donnee .)

index.php (…. vous avez besoin d’un index :p )

form.html (qui contiendra votre formulaire html.)

insert_form.php (qui fera l’insertion des informations envoyées via le formulaire dans votre base de donnée.)

gallery.php (qui affichera la galerie sur votre page d’accueil.)

page.php (qui contiendra les informations de chaque poneys.)

infos.php (qui affichera les informations individuelles de chaque poney.)

Rentrons un peu dans le code ! 😉

config.php

Comme dis plus haut, il contient vos information de connexions.


<?php $db = array(); $db['host'] = 'localhost';
$db['user'] = 'root'; // utilisateur
$db['pass'] = ''; //password
$db['base'] = 'poney'; //nom de la base de donnee
if($_SERVER['SERVER_NAME'] != 'localhost'){
$db['host'] = 'xxxx'; $db['user'] = 'xxxx'; // utilisateur
$db['pass'] = 'xxxxx'; //password
$db['base'] = 'xxxx'; //nom de la base de donnee
} ?>

database.fn.php


<?php /** * fonction de connexion de base de donnee * @param $db (array) &gt; mes identifiants de base * @return lien de base */
function database_connect($db){
$link = mysql_connect($db['host'],$db['user'],$db['pass']);
if(!$link) die("erreur de connexion a la base de donnee".mysql_error());
if(!mysql_select_db($db['base'])) die ("selection de la base impossible");
return $link; }/** * fonction de deconnexion de base de donnee * @param $link lien de base * @return rien */
function database_disconnect($link){ mysql_close($link); } ?>

index.php

Contient les liens vers les fichiers de connexion et l’affichage de la galerie

]

<!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" lang="fr-fr">

<head>
<link rel="stylesheet" type="text/css" href="templates/styles.css" type="screen" />
</head>

<body>
<div id="header">
 <a href="form.html"> Rajouter un P0ni</a><br>
 <?php
 include "config.php";
 include "database.fn.php";
 $link = database_connect($db);
 $dir = 'images/';

 /**** on va chercher la boucle afin d'afficher la gallery*/
 include "gallery.php";

 ?>
</div><!–fermeture header –>
</body>

</html>

gallery.php

Ce fichier va afficher votre galerie de poney ! Bien entendu penser à mettre en forme via le css!


<?php
 // on crée la requête SQL : on va chercher id,nom,note,photo de la table "poni" et on les ordonne par note
 $sql = 'SELECT id,nom,note,photo FROM testponi ORDER BY note';
 // on envoie la requête
 $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

 echo "<div id='wrapper'>";
 // on fait une boucle qui va faire un tour pour chaque enregistrement , en gros tant qu'il y aura encore un poney dans la table
 while($data = mysql_fetch_assoc($req))
 {
 // on affiche les informations de l'enregistrement en cours
 echo "<div class='poney'>";
 echo '<h2><a title="'.$data['nom'].'" href="page.php?id='.$data['id'].'">'.$data['nom'].'</a></h2>';
 echo "<img src='".$dir.$data['photo']."'width=200 height=150/>";
 echo "<br> <br>";
 echo "</div>";

 } ;
 echo "<div class='spacer'></div>";
 echo "</div>";
 mysql_close($link);
 ?>

page.php 

Ce fichier va aller récupérer les infos individuelles de chaque poney


<!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" lang="fr-fr">

<head>
<link rel="stylesheet" type="text/css" href="templates/styles.css" type="screen" />
</head>

<body>
<?php
 //On récupère la variable transmit par l'url
 $id_transmit=$_GET['id'];
 $dir = 'images/';
 // on se connecte à la base de données
 include "config.php";
 include "database.fn.php";
 echo "<div id='poney'>";
 // on affiche les données en fonction de l'id transmis
 include "infos.php";
 echo "</div>";
?>
</body>

</html>

infos.php


<?php
$link = database_connect($db);
// on récupère les informations dans la base en fonctionde l id transmis; en fonction du poney choisi quoi :p
$sql = mysql_query("SELECT * FROM testponi WHERE id='".mysql_real_escape_string($id_transmit)."'");
while($data = mysql_fetch_assoc($sql))
 {
 // on affiche les informations de l'enregistrement en cours
 echo '<h2><a title="'.$data['nom'].'" href="page.php?id='.$data['id'].'">'.$data['nom'].'</a></h2><br><br>';
 echo "<img src='".$dir.$data['photo']."'width=200 height=150/><br><br>";
 echo 'Note :';

 // on affiche autant d'étoile que la note donnée
 for($i=0;$i < $data['note'];$i++){
 echo "<img src='images/etoile.png'/>";
 }
 echo '<br> <br><a href="index.php"> Retour à l\'accueil</a><br><br><br><br>';
 } ;
// Fermeture de la connexion à la base de données
mysql_close($link);
?>

Normalement une fois à cette étape, si vous rentrez à la main les informations dans la base de donnée (et que vous mettez les images à la main dans le dossier images), votre galerie fonctionne ! 🙂

Maintenant nous allons passer au formulaire d’upload (avec réécriture du nom des images afin d’éviter les doublons et donc le remplacement d’une image par une autre! 😉 )

 Le formulaire d’upload

Voici la structure Html du formulaire d’upload(appelez le form.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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>
 Demande de devis
 </title>
 <link rel="stylesheet" type="text/css" href="templates/form.css" media="all" />

 </head>
 <body id="main_body">
 <div id="form_container">
 <h1>
 <a>Rajout d'une image dans la gallerie</a>
 </h1>
<form method="post" action="insert_form.php" enctype="multipart/form-data">

 <ul>
 <li class="section_break">
 <h3>Poney presque près à l'upload !</h3>
 </li>
 <li>
 <span><input id="nom" name="nom" class="element text long" type="text" maxlength="255" value="" /><label>Nom</label></span>
 <span><input id="note" name="note" class="element text long" type="text" maxlength="255" value="" /><label>note de 0 a 5</label></span>
 </li>
 <li>
 <label for="image"> Ajouter une photo de ton pôné préféré: </label>
 <input type="hidden" name="MAX_FILE_SIZE" value="300000" >
 <input type="file" id="file" name="image">
 <input type="submit" name="envoyer" value="Ajouter">
 </li>
 </ul>
</form>
 <div id="footer">
 &nbsp;
 </div>
 </div>
 </body>
</html>

insert_form.php


<?php
include "config.php";
include "database.fn.php";
$link = database_connect($db);
// ***** ici on récupère les données et on les stocke dans mysql
$nom = $_POST['nom'];
$note = $_POST['note'];

//******* On renomme l'image de manière aléatoire pour éviter un conflit dans le dossier (2 fois le même nom par exemple
$dir = 'images/';
$ext = strtolower( pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION) );
$file=uniqid().'.'.$ext;

 //**** on bouge l'image
move_uploaded_file($_FILES['image']['tmp_name'], $dir.$file);

$photo = $file;

// on enregistre les données
$result = mysql_query("INSERT INTO testponi VALUES
(
 '',
'".mysql_real_escape_string($nom)."',
'".mysql_real_escape_string($note)."',
'".mysql_real_escape_string($photo)."'
)
");
//Si il y a une erreur, on crie ^^
if (!$result) {
 die('Requête invalide : ' . mysql_error());
}
// on ferme la connection mysql donc ci-dessous plus de sql
mysql_close($link);
?>

Et voila ! vous avez maintenant une galerie d’image utilisant php et MySQL fonctionnelle. Il ne tient qu’ à vous de la customiser via le Css 😉

Si vous constatez des bugs ou avez des questions, n’hésitez pas !

Voici le code source de mon exemple (tel qu’il est décris dans le tuto + le sql) (lien à jour)

Pour la suppressions des images, je vous invite à regarder ce petit article 😉

Le WIB se sociabilise !

Suivez nous sur Twitter et Facebook pour des news lives en tous genres !