Partie admin d'un slideshow

Partie admin d'un slideshow

09 jun | Catégorie: PHP | Rédigé par François | 3786 lectures

Voici la suite du dernier tutoriel sur le slideshow jQuery. Ici nous allons nous intéresser à faire en sorte qu'on ait pas besoin d'entrer dans le code html pour mettre à jour les différents slides. Très pratique, car vous n'aurez plus besoin de redimensionner vos images à la main, ou encore passer par FTP pour modifier votre fichier. Et enfin, c'est indispensable si vous voulez proposer cette solution à un client et qu'il ne veut en aucun cas bidouiller le code.

 

 

 

Ce tutoriel est comme le précédent basé sur celui de Six Revisions (partie front-end statique). D'ailleurs si vous n'êtes pas allé voir le premier tutoriel je vous recommande très fortement d'aller y faire un tour!

Qu'allons nous faire?

Une question qui se doit d'être posée, puisqu'il est important de savoir quelles fonctionnalités nous allons développer avant de toucher à quelque chose.

Cette partie administration permettra donc de:

  • Ajouter un slide vide (jQuery)
  • Ajouter un slide (avec Titre, lien, description et image redimensionnée) (PHP/MySQL)
  • Supprimer un slide (jQuery-Ajax)
  • Modifier un slide (PHP/MySQL)
  • Changer l'ordre des slides. (jQuery-Ajax)

Suivant les fonctionnalités nous utiliserons 2 technologies: PHP et jQuery, qui avec de l'Ajax, permettra de ne recharger qu'une partie de la page.

Nous ne traiterons pas de la protection de l'accès à la page d'administration, puisque cela a déjà été l'objet d'un tutoriel. Voici comment nous allons organiser nos fichiers:

Arborescence du tuto

Ne prenez pas du tout ce modèle pour une vérité absolue, il est conçu pour une meilleur compréhension du tuto pour ne pas avoir trop de fichiers. Ainsi une fois ce tutoriel intégré à votre site, il sera préférable par exemple d'inscrire vos scripts javascript dans des fichiers externes, avoir 2 feuilles de styles différentes pour la partie site et administration. Bref c'est à vous de l'adapter à vos besoins et vos exigences :)

Etape 1 : La base de données

Nous allons stocker les différentes informations contenues dans les slides dans une base de données. Pour cela, nous allons avoir besoin de créer une table SQL contenant ces champs:

  • id : l'identifiant du slide
  • titre : titre du slide
  • lien : lien hypertexte
  • texte : description du slide
  • img : nom de l'image à afficher

Le script pour créer cette table est le suivant, vous pouvez l'intégrer avec PHPMyAdmin :


Etape 2 : Structure de la page d'administration

Voici la structure PHP/HTML avec laquelle nous allons partir, chaque slide correspondra à un formulaire que nous appelons et affichons dynamiquement via une requête SQL

Chaque formulaire contient 2 champs de type hidden, c'est à dire des champs contenant des informations mais pas affichées à l'écran. L'un contiendra le numero du slide, l'autre informera s'il s'agit d'un ajout ou d'une modification (le traitement n'est pas le même en fonction). Notez aussi les 3 liens (supprimer, position+ et position -) qui ne renvoient pas véritablement de fonctions, mais dans le code Javascript nous leur attribuerons des évènements de type clic en fonction de leur classe.

Enfin dernier petit point, il est indispensable d'ajouter un attribut enctype="multipart/form-data" à votre formulaire, afin de pouvoir uploader des images via celui-ci.

Etape 3 : Ajouter un slide vide

Nous allons commencer la partie Javascript en renseignant la fonction ajouteSlide(). Comme nous allons travailler avec la librairie jQuery, il est essentiel de l'inclure avant de l'utiliser. Pensez aussi à bien vérifier que vous avez une version de jQuery supèrieure à la 1.3.


Tout d'abord, on récupère la position du dernier slide (et par conséquent cela définira l'identifiant du nouveau. L'instruction $("#formulaires form:last").clone().appendTo('#formulaires').hide().fadeIn(); peut paraître un peu barbare, mais elle signifie juste qu'on prend le dernier formulaires de notre liste, on le copie, puis on le colle en dernier dans notre liste de formulaires. Et comme j'aime bien les trucs jolis je le cache directement, et le fais apparaitre en fondu.

Une fois qu'on a ce nouveau formulaire, il faut réinitialiser ses valeurs. Pour manipuler ces informations, il faut principalement utiliser des méthodes jQuery comme html() ou val() qui change l'attribut value d'un champ ou le contenu d'un textarea. Et enfin, la méthode remove() pour supprimer un élément.

Etape 4 : Ajouter et modifier (PHP)

Voici le code à placer au début de votre fichier index.php

Quelques explications s'impsent: En premier lieu, nous définissons une constante qui déterminera l'emplacement du répertoire racine par rapport au répertoire dans lequel on se trouve, ici comme on est dans le répertoire admin, il faut remonter d'un niveau donc : '../' . Puis on définit le chemin vers les images et l'on inclut le fichier de configuration et la classe qui gère les images.

La fonction verifieTypeMime, comme son nom vérifie le type Mime des images uploadées, cela garantit une sécurité accrue puisque vous serez sur d'avoir affaire à de véritables images.

Les 2 lignes suivantes servent à se connecter à la base de donnée. Le reste du code est éxécuté si et seulement si un formulaire a été validé et qu'il contient tous les éléments. De la même manière que pour récupérér des valeurs avec la variable superglobale $_POST, on récupère un fichier uploadé avec la variable $_FILES, ['image'] correspondant dans cette situation à l'attribut name du champ input de type File. Ensuite il suffit de copier ce fichier (par défaut il se copie automatiquement dans un dossier temporaire de votre serveur) dans le bon répertoire et d'effectuer un traitement dessus avec la méthode Resize de la classe SBImage, disponnible en fichier texte, ou en téléchargeant directement la source.

A partir de là, on veut savoir s'il s'agit d'une modification ou d'une insertion. C'est là qu'entre en compte le champ caché que nous avions mis dans notre formulaire. Selon sa valeur la requête SQL n'aura pas du tout la même tête: Dans un cas on utilise INSERT INTO maTable(meschamps,a,b,c) VALUES(valA,valB,...) et dans l'autre cas: UPDATE maTable SET monChampA=valA, ... WHERE id=idDuSlide.

Etape 5 : Supprimer un slide (JS)

Comme vous avez pu le voir au début de ce tutoriel, j'ai parlé de certaines fonctionnalités qui seront développées avec Ajax, la suppression de slide en fait partie. Si vous souhaitez en savoir plus sur l'Ajax et son fonctionnement, je vous recommande d'aller voir un tutoriel qui vous initiera à cette technologie. Le principe est ici de faire en sorte que tous les clics qui seront effectuées sur des balises qui porteront la classe "supprimer" renverront vers une fonction javascript qui contiendra un appel Ajax vers un script PHP. Je suis sur qu'avec le code vous comprendrez mieux :


La première ligne signifie que ce code sera éxécuté dés que le document (l'arbre DOM) sera complètement chargé. Ce détail a toute son importance, sinon il ne reconnaitra aucune classe "supprimer" et passera à la suite.

La méthode "live" utilisée est en fait l'équivalent de "bind", la première permet (depuis jQuery 1.3) d'ajouter aussi des écouteurs aux objets qui sont crées par la suite en Javascript. Dans notre cas, cette démarche est essentielle puisqu'il peut être utile de vouloir supprimer un formulaire qu'on vient d'ajouter (même si cela paraît un peu idiot). En résumé, cette fonction live permet donc d'ajouter un écouteur qui comme son nom l'indique écoute et éxécute la fonction si les objets qui ont la classe "supprimer" ont reçu un évènement : en l'occurence, un clic ici.

Une fois dans cette fonction, il faut récupérer l'identifiant du slide qui y est associé. Le procédé est là aussi un peu compliqué: On récupère l'objet actuel ($(this)), puis son élément parent (parent()), qui n'est rien d'autre que le formulaire et enfin on cherche la balise legend (find('legend')) puis sa valeur (html()) que l'on multiplie par 1 (petite astuce Javascript pour convertir une chaîne en nombre).

Enfin la requête Ajax qui apelle le fichier PHP : "ajax.php", avec comme paramètre (passé en variable $_GET), l'identifiant du slide que l'on veut supprimer. Le 3ème paramètre est la fonction que l'on éxécute lorsque la requête est terminée. Nous n'aurons plus qu'à faire disparaître le formulaire. Puis modifier les identifiants des formulaires qui suivent. Attention, ici on ne change que l'HTML, si on ne fait rien dans notre script "ajax.php", les slides auront les mêmes identifiants, et aucun ne sera supprimé.

Etape 6 : Supprimer un slide (PHP)

La dernière étape a consisté à supprimer visuellement un slide, ici nous le supprimerons dans la Base de données, et nous le ferons dans le script "ajax.php" qui est appelé en Ajax.


Dans un premier temps, on supprime l'image qui est associée au slide que l'on veut supprimer avec la fonction unlink(). Une fois cette opération faite il suffira de supprimer de la Base de donnée la ligne du slide (avec DELETE FROM maTable WHERE id=idDuSlideaSupprimer). Enfin on met a jour les identifiants de tous les slides suivant: afin de toujours avoir une suite continue. Ce traitement se fait avec la requête SQL : UPDATE maTable SET id=id-1 WHERE id>idASupprimé.

Etape 7 : Changer la position d'un slide (JS)

L'intérêt d'avoir une partie administration est aussi de pouvoir changer la position d'un slide très facilement. Nous verrons dans cette étape, comment changer la position d'un formulaire dans l'arbre DOM avec jQuery, puis dans l'étape suivante les opérations à effectuer côté serveur.

Une fois de plus, le code peut sembler un peu barbare mais ce sont les mêmes méthodes jQuery qui reviennent souvent. Pour cette fonction, il faut biensur vérifier si le slide n'est évidemment pas le dernier de la liste auquel cas on informe l'utilisateur qu'il n'y aura aucun changement de position.On utilise donc pour cela, la fonction is(':last-child') qui retourne true s'il s'agit bien du dernier formulaire se trouvant dans la div #formulaires.

Autre subtilité : pour replacer le formulaire à sa bonne place, on utilise $(form.next()).after(form);. form.next() récupère le formulaire suivant, et on lui indique de le placer après celui ci avec .after().

Voici la fonction inverse:

Comme vous pouvez le voir le fonctionnement est très semblable à la fonction précédente.

Etape 8 : Changer la position d'un slide (PHP)

Maintenant nous allons nous occuper de la partie PHP et dans le fichier "ajax.php", faire en sorte d'intervertir 2 identifiants dans notre base de données. Voici le bout de code à placer à la suite de ce qui est déjà écrit:

En fait l'identifiant étant un champ unique, on ne peut pas effectuer d'opérations simples comme un UPDATE sur l'identifiant, car 2 champs seraient à un instant donné équivalents, ce qui provoquerait une erreur logique. L'alternative consiste donc à modifier tous les autres champs (titre, lien,texte, img).

Etape 9 : Et le CSS

Enfin, pour embellir notre page d'administration je vous propose ce CSS:

Dernière étape : Le slideshow

A partir de là il faut reprendre le 1er tutoriel et au lieu d'y inscrire les div à la main, nous allons faire une boucle PHP/SQL pour les afficher dynamiquement ce qui nous donnera ceci:

Ce tutoriel est enfin terminé. Il est un peu difficile et surtout très long mais il permet de bien réviser les bases de PHP. De plus il est un excellent exercice pour s'approprier jQuery. Merci encore à SixRevisions et à Jacob Gube pour la base qu'il a apporté.

Creative Commons License
Cette création par Snoupix.com est mise à disposition selon les termes de la licence Creative Commons.
Partager ce tutoriel :
wikio scoopeo fuzz diggfr digg-design blogmemes delicious tapemoi yoolink bluegger pioche

26 Commentaires

gravatar
le 12 juin à 12h24 jmt Répondre salut snoupix j'ai une petite question en css tu a mis :"('img/btn_suppr.png');"
et "(img/admin.png)" sans guillemets quelle est la différence ?
gravatar
le 12 juin à 12h29 François Répondre Salut,
aucune, les 2 fonctionnent et donnnent le même résultat.
Je préfère quand même les guillemets car ca se rapproche de la syntaxe PHP...
gravatar
le 13 juin à 10h42 Thomas Répondre Salut,
J'ai remarqué une petite erreur dans l'index.php (le slideshow)
Tu n'affiche pas le texte le titre

# <?php
# if(!empty($cur_item['lien']) && is_file($dossierImages.$cur_item['img'])){
# echo '<a href="'.$cur_item['lien'].'" title="'.$cur_item['lien'].'">
# <img src="'.$dossierImages.$cur_item['img'].'" alt="'.$cur_item['lien'].'"/></a>';}
# echo $cur_item['titre'];?>
# </p>


Je te les modifier

<?php
if(!empty($cur_item['lien']) && is_file($dossierImages.$cur_item['img'])){
echo '<a href="'.$cur_item['lien'].'" title="'.$cur_item['lien'].'">
<img src="'.$dossierImages.$cur_item['img'].'" alt="'.$cur_item['lien'].'"/></a>';}
echo $cur_item['texte'];?>

Ligne 147 à 151

Sinon super boulot j'essaye d'y ajouter un système de sessions pour plus de sécurité wink
gravatar
le 13 juin à 12h44 François Répondre Exact! Merci j'ai corrigé ca!
gravatar
le 16 juin à 17h20 Cmoi Répondre Bonjour,
J'ai une erreur
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /home/login/www/testSlide/admin/SBImage.php on line 11

Sinon tout est genial smile et d'une grande qualité, MERCI
gravatar
le 16 juin à 21h02 François Répondre Salut!
En fait tu dois travailler avec PHP 4 (vérifie avec un phpinfo()), si tu es un serveur mutualisé il y'a toujours une petite manip à faire pour activer le PHP5 sur le serveur.
Sinon si t'as vraiment pas envie (et dans ce cas là c'est pas bien...) tu vires les attribut public dans tes function resize...etc...
Sinon, heureux que ca te plaise!
Tchao
gravatar
le 17 juin à 09h42 Cmoi Répondre Bonjour Francois

Exact wink j'ai ajouté SetEnv PHP_VER 5 dans mon htacces et tout fonctionne bien

Merci beaucoup
gravatar
le 19 juin à 13h08 Hugo Répondre Félicitations !!
Je n'ai pas encore lu tout les tutoriels, mais en tout cas ça s'annonce bien smile
Merci beaucoup !
gravatar
le 27 juin à 11h32 mixka13 Répondre L'idée est pas mal, mais c'est plein de bugs... Donc plus de test avant les publications ne serait pas un luxe.
gravatar
le 27 juin à 12h50 François Répondre Réponse à mixka13:L'idée est pas mal, mais c'est plein de bugs... Donc plus de test avant les publications ne serait pas un luxe.

Ce qui serait cool c'est de nous dire quels sont les bugs et sur quels navigateurs
Merci d'avance
gravatar
le 27 juin à 16h44 mixka13 Répondre Ce ne sont pas des bugs d'affichage sur tel ou tel navigateurs, mais des bugs montrant certains cas non traités par le code : par exemple lorsque l'on supprime tous les slide il est impossible d'en rajouter avec le bouton prévu à cette effet, ou bien des décalages disgracieuse après de multiples ajout de slide vides.
gravatar
le 16 juillet à 05h57 kakashi Répondre Bonjour,
Vraiment cool ton tuto, mais j'arrive pas a supprimer dans IE, ajax.php semble ne recevoir aucune instruction...
As tu une idée?
Merci
gravatar
le 16 juillet à 06h19 kakashi Répondre Le probleme vent d'ici:
$.get("ajax.php",{idSup: idSup} (dans supprimer un slide JS)
Il faut modifier en :
$.get("ajax.php",{idSup0: idSup} et mettre $_GET['idSup0'] (dans supprimer un slide PHP)
Firefox fait la différence mais IE comme d'hab...
Merci wink
gravatar
le 29 juillet à 13h45 angesacret84 Répondre merci pr ce tuto j ai utiliser ce tuto pr une pub sur un site mes j ai 3 chand de pub quand je fais l exécution il marche seulment 1 et les autre il y a 2 erreur
une sur la lien : define('ROOT','./');
<?php
define('ROOT','./');
$dossierImages = ROOT.'../img/pub2/';

require(ROOT.'cnx_industriel.php');
$connect = mysql_connect(MYHOST, MYUSER, MYPASS) or die ('Identifiants incorrects');
mysql_select_db(MYDB) or die ('Base de données incorrecte');
$requete = "SELECT id,titre,lien,texte,img FROM pub1 ORDER BY id";
$result = mysql_query($requete);
$i=0;
while ($ligne=mysql_fetch_array($result))
{
$i++ ;
?>
et la 2 sur la connexion la lien define("MYHOST","localhost");

j ai changer les variables mes le souci persiste merci
gravatar
le 29 juillet à 20h06 François Répondre C'est quoi comme erreur exactement?
Vérifies ta requêtes dans phpmyadmin, sinon ca doit etre au niveau de ta boucle...
tchao
gravatar
le 30 août à 13h59 D-LAN Répondre Bonjour,

Tout d'abord je tiens à féliciter l'auteur de ce tutoriel, tout y est très bien expliqué !

Par contre quand je transfert le tout sur mon FTP je me retrouve avec le message d'erreur suivant : "Base de données incorrecte". Ai-je loupé une étape ? je ne pense pas puisque j'ai aussi essayé avec la demo' mise à disposition =/.Quelqu'un à une réponse ?

PS: Je ne suis pas du tout calé niveau php et sql, je nage complet depuis 2h pour arriver à résoudre mon problème ^^.
gravatar
le 30 août à 15h46 François Répondre Salut!
En fait il faut que tu changes le fichier de configuration pour que ca marche sur ton serveur (config/config.php)
Après tu mets les bons identifiants et tout...
gravatar
le 30 août à 16h28 D-LAN Répondre Je pense avoir mis les bons identifiants, c'est bien ça le problème =S . Est-ce que ça peut pas être au niveau de la classe du slideshow ?

J'ai re-vérifié et mes identifiants sont bons. Que dois-je marquer pour la bdd ?

<?php
define("MYHOST","blabla");
define("MYUSER","houhou");
define("MYPASS","hihihi");
define("MYDB","?????????????????");
?>

A la place des "?" j'ai tapé "slider", c'est à dire le même nom que porte ma classe. Je suis bon ou totalement à côté de la plaque ? XD
gravatar
le 30 août à 16h44 D-LAN Répondre Réponse à D-LAN:Je pense avoir mis les bons identifiants, c'est bien ça le problème =S . Est-ce que ça peut pas être au niveau de la classe du slideshow ?

J'ai re-vérifié et mes identifiants sont bons. Que dois-je marquer pour la bdd ?



A la place des "?" j'ai tapé "slider", c'est à dire le même nom que porte ma classe. Je suis bon ou totalement à côté de la plaque ? XD


Autant pour moi, j'avais mal compris le sens de "MYDB". Ca marche nickel smile. Continuez comme ça, votre site est super bien foutu wink.
gravatar
le 24 novembre à 22h13 Nouipoz Répondre Bonjour , SUPER tuto , mais j'ai pas compris sa sère a quoi de faire sa ?

merci
gravatar
le 24 novembre à 23h59 François Répondre A ne pas s'embeter avec du HTML, et mettre un site à jour rapidement... pour des clients par exemple
gravatar
le 20 janvier à 16h27 Cor Répondre Bonjour. Great work Stephane.
As my french is very bad, is there any chance the tutorial will become available in english? I’m especially interested in the admin tool and also the start/pause function in the slideshow tutorial.
Thanks.
gravatar
le 20 janvier à 21h33 Stephane Répondre Réponse à Cor:Bonjour. Great work Stephane.


As my french is very bad, is there any chance the tutorial will become available in english? I’m especially interested in the admin tool and also the start/pause function in the slideshow tutorial.


Thanks.

Sorry, I'm not planning on translating it in english because it would take too much time and most of our readers are French.


But give a try to Google translation tool : here is the URL to this page translated in English : http://translate.google.com/translate?hl=fr&langpair=fr|en&u=http://www.snoupix.com/partie-admin-dun-slideshow_tutorial_29.html



Just don't pay attention to the code, watch it in the original page.
gravatar
le 01 février à 10h49 Jutix Répondre Énorme!!

Merci beaucoup pour ce tutoriel ;-)
gravatar
le 03 février à 16h09 Petit_fwanz Répondre Petit soucis Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in /homez.314/webetcon/www/me/portfolio/admin/index.php on line 160
gravatar
le 03 février à 16h11 Petit_fwanz Répondre et g sa sur index.php: Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in /homez.314/webetcon/www/me/portfolio/index.php on line 141

Requête en cours, veuillez patienter...

Ajouter un commentaire