Partie admin d'un slideshow
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:
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é.
Cette création par Snoupix.com est mise à disposition selon les termes de la licence Creative Commons.
Partager ce tutoriel :
32 Commentaires
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...
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é
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
Ce qui serait cool c'est de nous dire quels sont les bugs et sur quels navigateurs
Merci d'avance
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
Vérifies ta requêtes dans phpmyadmin, sinon ca doit etre au niveau de ta boucle...
tchao
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 ^^.
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...
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
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
. Continuez comme ça, votre site est super bien foutu .
merci
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.
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.
pour ceux que ça interesse j'ai géré le bug qui fait qu'au moment de la suppression d'une fomrulaire si c'est le dernier on ne peut plus en creer. Et j'ai également ajouté une confirmation au moment de la suppression.
Pour la fonction qui gere la suppression ça devien :
$('.supprimer').live('click',function(){
if (confirm('cliquer sur ok pour confirmer la suppression')){
var idSup = $(this).parent().find('legend').text() * 1;
var form = $(this).parent().parent();
$.get("ajax.php",{idSup0: idSup},
function(data){
form.fadeOut('fast',function(){
if ($('#formulaires form').length == 1){
var unFormulaire = $("#formulaires form:last").clone();
form.remove();
unFormulaire.appendTo('#formulaires').hide().fadeIn();
//Reinitialise les valeurs du formulaire
$('#formulaires form:last input').val('');
$('#formulaires form:last textarea').val('');
$('#formulaires form:last img').remove();
$('#formulaires form:last #modif').val('false');
$('#formulaires form:last button').text('Ajouter');
}
else {form.remove();
}
});
for(var i=idSup; i<(Number(form.nextAll().size())+idSup);i++){
$('#formulaires form:eq('+i+')').find('legend').text(i);
$('#formulaires form:eq('+i+')').find('#idslide').val(i);
}
}
);
}});
-------------------------------------------------------------------------------------
La Ligne va gerer la demande de confirmation
if (confirm('cliquer sur ok pour confirmer la suppression'))
------------------------------------------------------------------------------------
cette condition
if ($('#formulaires form').length == 1)
Va gerer le cas ou nous supprimons le dernier formulaire.
encore un grand merci pour ce tuto.
j'essaye de tester ce tutorial , mais je me heute à un souci après avoir convenablement configuré le fichier config.php et crée ma base sous phpmyadmin ,la connexion à l'index.php se déroule sans souci , il ne me marque aucune erreur , par contre quand j'essaye d'aller dans la console d'administration , le navigateur ne me charge pas la page et se mets en boucle infini , impossible d'y accéder , je ne vois pas ce que j'ai mal fait , vu que ma base est correcte (vide certes mais correcte ...)
je vais mettre à jour avec le code que tu proposes pour corriger les soucis d'ajouts quand il n'y a plus de slide de disponible.
et "(img/admin.png)" sans guillemets quelle est la différence ?