slideshow_2

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:

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 :

CREATE TABLE slider (
  id tinyint(4) NOT NULL auto_increment,
  titre varchar(100) NOT NULL,
  lien varchar(100) NOT NULL,
  texte tinytext NOT NULL,
  img varchar(100) NOT NULL,
  PRIMARY KEY  (id)
) TYPE=MyISAM ;

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

<body class="admin">
<div id="pageContainer">
<h1>Administration</h1>
    <a href="javascript:ajouteSlideVide()" class="ajoutSlide">Ajouter un slide</a>
<div id="formulaires">
					<?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 slider ORDER BY id";
					$result = mysql_query($requete);
					if(mysql_num_rows($result)){
						while($cur_item = mysql_fetch_assoc($result)){
							echo '
<;form method="post" enctype="multipart/form-data">
<fieldset>
<legend>'.$cur_item['id'].'</legend>
<input type="hidden" name="slide" id="idslide" value="'.$cur_item['id'].'" />
<input type="hidden" name="modif" id="modif" value="true" />
										<label>Titre</label>
<input type="text" name="titre" value="'.htmlspecialchars($cur_item['titre']).'"/>
										<label>Lien</label>
<input type="text" name="lien" value="'.htmlspecialchars($cur_item['lien']).'" />
										<label>Description</label><textarea name="description">'.htmlspecialchars($cur_item['texte']).'</textarea>
										<label>Image</label>
<input name="image" type="file" />
										<img class="miniature" src="'.htmlspecialchars($dossierImages.$cur_item['img']).'" alt="image du slide" />
										<button>Modifier</button>
										<a class="supprimer" href="javascript:void(0)">Supprimer</a>
										<a class="positionplus" href="javascript:void(0)">+</a>
										<a class="positionmoins" href="javascript:void(0)">-</a>

							';
						}

					} else{
						echo '
<form enctype="multipart/form-data" method="post">
<fieldset>
<legend>1</legend>
<input id="idslide" name="slide" type="hidden" value="1" />
										<label>Titre</label>
<input name="titre" type="text" />
										<label>Lien</label>
<input name="lien" type="text" />
										<label>Description</label><textarea name="description"></textarea>

										<label>Image</label>
<input name="image" type="file" />
										<button>Ajouter</button>
										<a class="supprimer" href="javascript:void(0)">Supprimer</a>
										<a class="positionplus" href="javascript:void(0)">+</a>
										<a class="positionmoins" href="javascript:void(0)">-</a></fieldset>
</form>

';
					}
mysql_close();

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.

function ajouteSlideVide(){
	var numeroSlide = $('#formulaires form').length+1;
	$("#formulaires form:last").clone().appendTo('#formulaires').hide().fadeIn();
	//Réinitialise les valeurs du formulaire
	$('#formulaires form:last legend').html(numeroSlide);
	$('#formulaires form:last input').val('');
	$('#formulaires form:last textarea').val('');
	$('#formulaires form:last img').remove();
	$('#formulaires form:last #idslide').val(numeroSlide);
	$('#formulaires form:last #modif').val('false');
	$('#formulaires form:last button').text('Ajouter');
}

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

<?php
define('ROOT','../');
$dossierImages = ROOT.'img/images-slider/';

require(ROOT.'config/config.php');
require('SBImage.php');

function verifieTypeMime($type){
			$typesacceptes = array('image/jpeg','image/jpg','image/png','image/gif','image/pjpeg');
			if(in_array($type,$typesacceptes)) return true;
				else return false;
}

$connect = mysql_connect(MYHOST, MYUSER, MYPASS)  or die ('Identifiants incorrects');
mysql_select_db(MYDB) or die ('Base de données incorrecte');

if(isset($_POST) &amp;&amp; !empty($_POST)){
	if(
		!empty($_POST['slide'])&amp;&amp;
		!empty($_POST['titre'])&amp;&amp;
		!empty($_POST['lien'])&amp;&amp;
		!empty($_POST['description'])){

		$import = false;
		if(isset($_FILES['image'])){
			if(verifieTypeMime($_FILES['image']['type'])){
				$import = true;
				$fichier = $dossierImages.$_FILES['image']['name'];
				copy($_FILES['image']['tmp_name'],$fichier);
				SBImage::resize($fichier,210,160,true);

			}
		}
		$requete = '';
		$reqFile = '';
		if($_POST['modif'] == "true"){
			if($import)
				$reqFile = ",img='".$_FILES["image"]["name"]."'";
				$requete .= "UPDATE slider SET titre='".$_POST['titre']."',lien='".$_POST['lien']."',texte='".$_POST['description']."'".$reqFile." WHERE id='".$_POST['slide']."'";
		}else{
			if($import)
				$reqFile = $_FILES["image"]["name"];
			$requete = "INSERT INTO slider(id,titre,lien,texte,img)
					VALUES('".$_POST['slide']."',
							'".$_POST['titre']."',
							'".$_POST['lien']."',
							'".$_POST['description']."',
							'".$reqFile."'
							)";
		}
		mysql_query($requete);
	}
}
?>

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 :

$(document).ready(function(){
				$('.supprimer').live('click',function(){
					var idSup = $(this).parent().find('legend').html() * 1;
					var form =  $(this).parent().parent();

					$.get("ajax.php",{idSup: idSup},
										function(data){
											form.fadeOut('fast',function(){
												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 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.

<?php
define('ROOT','../');
$dossierImages = ROOT.'img/images-slider/';
require(ROOT.'config/config.php');

$connect = mysql_connect(MYHOST, MYUSER, MYPASS)  or die ('Identifiants incorrects');
mysql_select_db(MYDB) or die ('Base de données incorrecte');

if(isset($_GET['idSup']) &amp;&amp; is_numeric($_GET['idSup'])){
   	//Suppression de l'image et de la ligne dans la bdd
	$result = mysql_query('SELECT img FROM slider WHERE id="'.$_GET['idSup'].'"');

		//Supprimer l'image associée (ou pas si elle est utilisée dans un autre slide)
		$cur = mysql_fetch_assoc($result);
		$resultImageIdentique = mysql_query('SELECT COUNT(*) FROM slider WHERE img="'.$cur['img'].'"');
		$count = mysql_fetch_assoc($resultImageIdentique);
		if($count['COUNT(*)']<=1)
			unlink($dossierImages.$cur['img']);

	mysql_query('DELETE FROM slider WHERE id="'.$_GET['idSup'].'"');
	mysql_query('UPDATE slider SET id=id-1 WHERE id>'.$_GET['idSup']);
	mysql_close();
}
?>

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.

$('.positionplus').live('click',function(){
	var position = $(this).parent().find('legend').html();
	var form =  $(this).parent().parent();
	if (form.is(':last-child')) {
		alert('Eh oh je veux rester sur le diaporama moi!');
		return false;
	}
	position++;
	var positionplus = position;
	position--;
	var positionmoins = position;

	$(form.next()).after(form);
	form.find('legend').text(positionplus);
	form.find('#idslide').val(positionplus);
	$(form.prev()).find('legend').text(positionmoins);
	$(form.prev()).find('#idslide').val(positionmoins);

	$.get("ajax.php",{idChange1: positionplus,
			  idChange2:positionmoins
	});
});

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:

$('.positionmoins').live('click',function(){
					var position = $(this).parent().find('legend').html();
					var form =  $(this).parent().parent();
					if (form.is(':first-child')) {
						alert('Quoi? tu veux l\'afficher avant le début???');
						return false;
					}
					position--;
					var positionmoins = position;
					position++;
					var positionplus = position;

					form.insertBefore(form.prev());
						form.find('legend').text(positionmoins);
						form.find('#idslide').val(positionmoins);
						$(form.next()).find('legend').text(positionplus);
						$(form.next()).find('#idslide').val(positionplus);

					$.get("ajax.php",{idChange1: positionplus,
									  idChange2:positionmoins
									  });
				});
			});

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:

if(isset($_GET['idChange1'])&amp;&amp; is_numeric($_GET['idChange1'])
	&amp;&amp; isset($_GET['idChange2'])&amp;&amp; is_numeric($_GET['idChange2'])){
		$result = mysql_query('SELECT id,titre,lien,texte,img FROM slider WHERE id='.$_GET['idChange1'].' OR id='.$_GET['idChange2'].'');
		while($cur_item = mysql_fetch_assoc($result)){
			if($cur_item['id'] == $_GET['idChange1'])
				$id = $_GET['idChange2'];
			else
				$id = $_GET['idChange1'];

				mysql_query('UPDATE slider SET titre = "'.$cur_item['titre'].'",
											   lien = "'.$cur_item['lien'].'",
											   texte = "'.$cur_item['texte'].'",
											   img = "'.$cur_item['img'].'"
										   WHERE id="'.$id.'"');

		}
	}

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:

/***********
 * Admin
 * ****************/
.ajoutSlide{
	display:block;
	background-image:url('img/ajoute_slider.png');
	width:119px;
	height:22px;
	text-indent:-9999px;
	outline:none;
}
.admin{
	background-image:none;
}

.admin #pageContainer{
	width:80%;
	margin:auto;
}
.admin #pageContainer h1{
	background:transparent url(img/admin.png) no-repeat top left;
}
.miniature{
	height:50px;
	clear:left;
	display:block;
	position:relative;
	left:80px;
	height:60px;
	padding:3px;
	margin:3px 0px 3px 0px;
	background-color:#555;
}
.supprimer{
	background: transparent url('img/btn_suppr.png') no-repeat;
	width:14px;
	height:15px;
	display:block;
	text-indent:-9999px;
	outline:none;
	float:right;
}
form{
	display:block;
	float:left;
	width:300px;
}
fieldset{
	border:1px solid #525050;
	padding:7px;
	margin:3px;
}
legend{
	font-size:1.8em;
	display:block;
	margin-left:250px;
	position:absolute;
}
label{
	display:block;
	float:left;
	width:70px;
	text-align:right;
	margin:3px;
}
button{
	display:block;
	clear:left;
	color:#555;
	margin-left:80px;

}
input,textarea{
	float:left;
	width:180px;
	margin:3px;
	color:#555;
}
textarea{
	height:100px;
}

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:

<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">
		<?php
		define('ROOT','./');
		$dossierImages = ROOT.'img/images-slider/';

		require(ROOT.'config/config.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 slider ORDER BY id";
		$result = mysql_query($requete);
					if(mysql_num_rows($result)){
						while($cur_item = mysql_fetch_assoc($result)){
							?>
<div class="slide">
<h2><?php echo $cur_item['titre'];?></h2>

									<?php
										if(!empty($cur_item['lien']) &amp;&amp; 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'];?>

</div>

							<?php
						}
					}

		?>
    </div>
</div>

  <!-- Slideshow HTML -->

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é.

41 commentaires

S'abonner au RSS des commentaires
  1. NwK
    Posté le 26/04/2010 à 17h12

    J’ai rencontré le même problème que toi j’ai du retaper une bonne partie du code Admin. ce que je peux te conseiller c’est de prendre ta page index.php et de retirer toute la partie qui travail avec ta base et de la retaper. c’est ce que j’ai fait je n’ai pas trouvé d’autre solutions

  2. xam1311
    Posté le 26/04/2010 à 16h10

    bonjour,

    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 …)

  3. NwK
    Posté le 23/04/2010 à 11h07

    Je viens de réaliser que je n’avais pas mis les http:// devant mon url dans le précédent post du coup je répond avec cette fois ci la bonne url pour ceux qui désirent le voir en prod il sera en ligne très bientot

  4. NwK
    Posté le 23/04/2010 à 11h05

    Bonjour,

    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.

  5. Petit_fwanz
    Posté le 03/02/2010 à 16h11

    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

  6. Petit_fwanz
    Posté le 03/02/2010 à 16h09

    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

  7. Jutix
    Posté le 01/02/2010 à 10h49

    Énorme!!

    Merci beaucoup pour ce tutoriel ;-)

  8. Stephane
    Posté le 20/01/2010 à 21h33

    [citation][de]Réponse à Cor:[/de]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.[/citation]
    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.

  9. Cor
    Posté le 20/01/2010 à 16h27

    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.

  10. François
    Posté le 24/11/2009 à 23h59

    A ne pas s’embeter avec du HTML, et mettre un site à jour rapidement… pour des clients par exemple

  11. Nouipoz
    Posté le 24/11/2009 à 22h13

    Bonjour , SUPER tuto , mais j’ai pas compris sa sère a quoi de faire sa ?

    merci

  12. D-LAN
    Posté le 30/08/2009 à 16h44

    [citation][de]Réponse à D-LAN:[/de]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[/citation]

    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.

  13. D-LAN
    Posté le 30/08/2009 à 16h28

    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

  14. François
    Posté le 30/08/2009 à 15h46

    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…

  15. D-LAN
    Posté le 30/08/2009 à 13h59

    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 ^^.

  16. François
    Posté le 29/07/2009 à 20h06

    C’est quoi comme erreur exactement?
    Vérifies ta requêtes dans phpmyadmin, sinon ca doit etre au niveau de ta boucle…
    tchao

  17. angesacret84
    Posté le 29/07/2009 à 13h45

    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

  18. kakashi
    Posté le 16/07/2009 à 6h19

    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

  19. kakashi
    Posté le 16/07/2009 à 5h57

    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

  20. mixka13
    Posté le 27/06/2009 à 16h44

    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.

  21. François
    Posté le 27/06/2009 à 12h50

    [citation][de]Réponse à mixka13:[/de]L’idée est pas mal, mais c’est plein de bugs… Donc plus de test avant les publications ne serait pas un luxe.[/citation]

    Ce qui serait cool c’est de nous dire quels sont les bugs et sur quels navigateurs

    Merci d’avance

  22. mixka13
    Posté le 27/06/2009 à 11h32

    L’idée est pas mal, mais c’est plein de bugs… Donc plus de test avant les publications ne serait pas un luxe.

  23. Hugo
    Posté le 19/06/2009 à 13h08

    Félicitations !!
    Je n’ai pas encore lu tout les tutoriels, mais en tout cas ça s’annonce bien smile
    Merci beaucoup !

  24. Cmoi
    Posté le 17/06/2009 à 9h42

    Bonjour Francois

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

    Merci beaucoup

  25. François
    Posté le 16/06/2009 à 21h02

    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

  26. Cmoi
    Posté le 16/06/2009 à 17h20

    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

  27. François
    Posté le 13/06/2009 à 12h44

    Exact! Merci j’ai corrigé ca!

  28. Thomas
    Posté le 13/06/2009 à 10h42

    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

  29. François
    Posté le 12/06/2009 à 12h29

    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…

  30. jmt
    Posté le 12/06/2009 à 12h24

    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 ?

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>