[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)

9 mars 2008 par Antoine

Ça y est, la suite est enfin là! Dans la première partie de ce tutoriel nous avions vu comment faire un drag’n drop avec jQuery. Maintenant nous allons voir comment effectuer notre sauvegarde automatique grâce à l’AJAX. Il y a deux modifications majeures à apporter à notre code. La première est la partie base de données : création des tables, des requêtes,etc… La seconde est l’ajout d’un traitement lors d’un drop d’ingrédient dans une recette. Autrement dit, effectuer les requêtes au bon moment.

La BDD

Notre base sera composée de 3 tables :

la table recette sera composée d’un identifiant (id_recette) et d’un nom de recette (recette).

la table ingrédient avec un identifiant (id_ingredient) et le nom de l’ingrédient (ingredient).

la table recette_ingredient qui contiendra les compositions de nos recettes sous la forme de couples id_recette,id_ingredient.

Cette organisation vient de nos cardinalités : un ingrédient peut être dans plusieurs recettes et une recette peut contenir plusieurs ingrédients.

Voici le code SQL pour créer les tables :

CREATE DATABASE `tuto_drag` ;
CREATE TABLE `recettes` (
`id_recette` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`recette` VARCHAR( 50 ) NOT NULL
) ENGINE = innodb;
CREATE TABLE `ingredients` (
`id_ingredient` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`ingredient` VARCHAR( 50 ) NOT NULL
) ENGINE = innodb;
CREATE TABLE `recette_ingredient` (
`refid_ingredient` INT NOT NULL ,
`refid_recette` INT NOT NULL
) ENGINE = INNODB CHARACTER SET latin1 COLLATE latin1_swedish_ci
ALTER TABLE `recette_ingredient` ADD PRIMARY KEY ( `id_ingredient` , `id_recette` )
INSERT INTO `ingredients` ( `id_ingredient` , `ingredient` )
VALUES (NULL,’oeuf’),(NULL,’sucre’),(NULL,’farine’),(NULL,’sel’),(NULL,’lait’);
INSERT INTO `recettes` ( `id_recette` , `recette` )
VALUES (NULL,’Pâte à crêpe’),(NULL,’Pâte brisée’);

Les traitements coté serveur

Maintenant que nous avons une base de données il faut créer les scripts qui vont nous permettre d’interagir avec elle. Nous devons pouvoir ajouter une recette, un ingrédient et faire nos sauvegarde de composition de recette. Appelons notre fichier “traitement.php”.

<?php
// on se connecte à MySQL
$mysql_link=mysql_connect(”localhost”, “root”, “”);
//on selectionne notre base de donnée
mysql_select_db(”tuto_drag”, $mysql_link);
//une petite fonction qui permet de proteger votre bdd des injections SQL
function protection($string){
if(get_magic_quotes_gpc()) {
if(ini_get(’magic_quotes_sybase’)) {
$string = str_replace(”””, “‘”,$string);
} else {
$string = stripslashes($string);
}
}
return mysql_real_escape_string($string);
}
//nous switchons suivant le parametre “action” vers le cas qui nous interesse
switch($_REQUEST['action']){
//je pense que les case sont assez clair
case ‘ajout_ingredient_recette’:
$id_recette=substr($_GET['id_recette'],1,1);
$id_ingredient=$_GET['id_ingredient'];
$sql=’insert into recette_ingredient values(\”.$id_recette.’\',\��.$id_ingredient.’\')’;
$req=mysql_query($sql) or die(’Erreur SQL !’.$sql.’’.mysql_error());
break;
case ’suppression_ingredient_recette’:
$id_recette=substr($_GET['id_recette'],1,1);
$id_ingredient=$_GET['id_ingredient'];
$sql=’delete from recette_ingredient where refid_recette=’.$id_recette.’ and refid_ingredient=’.$id_ingredient;
$req=mysql_query($sql) or die(’Erreur SQL !’.$sql.’’.mysql_error());
break;
}
?>

Modification de notre page XHTML

Alors qu’allons nous faire de cette page…Vu que nous voulons ajouter des ingrédients et des recettes dans notre base de données, il faut que nous générions notre page “creation-recette.html” dynamiquement. La première chose à faire est donc de renommer notre fichier en “creation-recette.php”. Ensuite deux petites requêtes, avec deux boucles et en avant guingammmmmmmpppppp!

<?php
// on se connecte à MySQL
$mysql_link=mysql_connect(”localhost”, “root”, “”);
//on selectionne notre base de donnée
mysql_select_db(”tuto_drag”, $mysql_link);
//requete pour les recettes
$sql=’select * from recettes order by recette’;
$req_recettes=mysql_query($sql);
//requete pour les ingredients
$sql=’select * from ingredients order by ingredient’;
$req_ingredients=mysql_query($sql);
echo’
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”interface.js”></script>
<script type=”text/javascript” src=”script.js”></script>
<link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”/>
</head>
<body>
<div>
<h1>Waouuuuuuuhhhhhh</h1>
<div class=”ingredient”>’;
//une petite boucle pour afficher les ingredients
while($data=mysql_fetch_assoc($req_ingredients)){
echo’
<div id=”‘.$data['id_ingredient'].’” class=”drag”>’.$data['ingredient'].’</div>
’;
}
echo’
</div>
’;
//une autre boucle pour afficher les recettes…
while($data=mysql_fetch_assoc($req_recettes)){
echo’
<div class=”recette” id=”‘.$data['id_recette'].’”>
<h3>’.$data['recette'].’</h3>
<div class=”recette_ingredient”>’;
//…si les recettes ont des ingredients il faut les récuperer et les afficher…
$sql=’select * from recette_ingredient left join ingredients on refid_ingredient=id_ingredient where refid_recette=’.$data['id_recette'];
$req_compo_recette=mysql_query($sql);
//…avec une boucle! sans oublié de rajouter l’attribut recette sinon les drop de suppression ne marcherons plus! Allez y testez!
while($data1=mysql_fetch_assoc($req_compo_recette)){
echo’
<div id=”‘.$data1['id_ingredient'].’” class=”drag” recette=”‘.$data['id_recette'].’”>’.$data1['ingredient'].’</div>
’;
}
echo’
</div>
</div>
’;
}
echo’
</div>
</body>
</html>’;
?>

Notre script avec l’AJAX (hyper simple au passage :-p)

On reprend le script du premier tutoriel en rajoutant la méthode get qui nous permet de faire de l’AJAX très simplement grâce à jQuery pooooowwwwwaaaaaaaa.

//on créé uen fonction pour rendre nos éléments draggable (merci piouPiouM ^^)
function addDraggable(el){
el.Draggable(
{
revert: true,
zIndex: 1000,
ghosting: true,
opacity: 0.7
}
)
};
$(document).ready(
function()
{
//Nos élements draggable sont définis ici. Ce sont tous les éléments avec la class CSS ‘.drag’.
addDraggable($(’.drag’));
//le div avec la class ‘.ingredient’ est notre première zone droppable. Elle contient nos ingrédients (original hein!).
$(’.ingredient’).Droppable(
{
//elle accept les élément ayant la class ‘drag’
accept : ‘drag’,
//ici cela affecte des classes css suivant que la zone est active ou hover. Pratique pour changer de style au survol.
//activeclass: ‘activeEmplacement’,
//hoverclass: ‘hoverEmplacement’,
//plusieurs zone de tolérance existe. Allez faire un tour sur la doc.
//Ici nous choisissons de pouvoir dropper un élément quand le pointeur de la souris est dans la zone.
tolerance: ‘pointer’,
//on définit ce qu’il va se passer lorsqu’on drop un élément dans la zone. On passe l’élément draggé en paramètre.
ondrop: function (drag)
{
//on récupère l’attribut recette si le drag en possede un
var id_recette=$(drag).attr(’recette’);
//et l’id de l’ingredient pour le cas de la suppression
var id_ingredient=$(drag).attr(’id’);
//si il en possède un on suprime le drag. Cela correspond à si un ingredient d’une recette est enlevé de sa recette.
//supprimez le bloc et testez!
if(id_recette){
$(drag).remove();
//nous utilisons la methode get sur l’objet jQuery ($).
//le premier parametre est la page de script (dans notre cas “traitement.php”)
//le second est un tableau d’arguments sous la forme clé/valeur
$.get(”traitement.php”,{action:”suppression_ingredient_recette”,id_ingredient:id_ingredient,id_recette:id_recette});
}
},
fit: true
}
);
//Ici nous allons dropper nos ingrédient pour construire nos recettes.
$(’.recette_ingredient’).Droppable(
{
accept : ‘drag’,
activeclass: ‘activeEmplacement’,
hoverclass: ‘hoverEmplacement’,
tolerance: ‘pointer’,
ondrop: function (drag)
{
//nous récuperons l’id de la recette. Il est contenu dans le div parent de la zone droppabe (allez revoir le xhtml ;-p).
var id_recette=$(this).parents().attr(’id’);
//on clone l’élément draggable. Cela permet de réutiliser un autre élément pour une autre recette!
var drag1 = $(drag).clone();
//nous ajoutons un attribut recette ayant pour valeur l’id de la recette.
$(drag1).attr(’recette’,id_recette);
//puis nous récuperons l’id de l’ingredient…
var id_ingredient=$(drag1).attr(’id’);
//…pour verifier qu’il ne soit pas déjà présent!
if (!$(this).children().is(’#’ + id_ingredient)) {
//s’il n’est pas présent on l’ajoute
$(this).append(drag1);
//on rend notre “clone” draggable
addDraggable(drag1);
//même combat pour l’ajax ^^
$.get(”traitement.php”,{action:”ajout_ingredient_recette”,id_ingredient:id_ingredient,id_recette:id_recette});
//avec un petit effet pour l’apaprition :p
$(drag1).fadeIn(”slow”);
}
},
fit: true
}
);
}
);

Le CSS

Bon ben là je vous renvoi vers la première partie du tutoriel :-).

Voila! C’est fini! Bon j’aurais pu optimiser un peu le code par moment…en factorisant la connexion à la base, en evitant la requette pour chaque recette…mais bon ce n’était pas le but du tuto hein :-p. Si vous voulez vous entrainer vous pouvez par exemple rajouter deux champ qui permettent d’ajouter une recette et un ingrédient en AJAX!

Si vous avez des questions, comme d’hab’ n’hésitez pas je me ferais un plaisir d’essayer d’y répondre! Et montrez moi vos essais!

Partagez cet article : Ces icônes sont des liens vers des sites de partage de signet sociaux où les lecteurs peuvent partager et découvrir de nouveaux liens.

Laissez un commentaire

28 commentaires pour “[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)”

bruno bichet, le 9 mars, 2008 à 0:41 dit:

Bon, là, maintenant, il faut que je me bouge un peu pour tester et comprendre tout ça Merci.
Guiral antoine, le 9 mars, 2008 à 0:45 dit:

De rien!

Si tu as besoin de précision n’hésite pas (twit moi ou gtalk) j’ai commenté un peu rapidement certaine partie (notamment le SQL)…

bon courage! Mais avec tes talent de designer tu va pouvoir faire des truc de ouf! :-p
killartem, le 11 mars, 2008 à 20:29 dit:

J’ai une question toute à fait stupide : à quoi servent les “$” dans le code javascript ?
Il est difficile de faire une recherche la-dessus …
Cependant, j’ai trouvé ça dans la doc officielle :
You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.

A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters “A” through “Z” (uppercase) and the characters “a” through “z” (lowercase).

C’est pas très clair…

Merci par avance, Yves.
Guiral antoine, le 11 mars, 2008 à 20:34 dit:

Ici nous utilisons un framework javascript qui s’appelle jQuery. Tous les objets jQuery sont identifiés grâce à la variable “$”. Par exemple $(”p”) va retourner un objet jQuery contenant tous les paragraphes (balises p) du document.

Je répond à ta question?

A bientôt! (et aucun question n’est stupide!)
David Linotte, le 2 avril, 2008 à 14:45 dit:

Hello,

Très joli tuto que celui-là. Cela fait pas mal de temps que je cherche un tutoriel de ce genre et je suis donc très content de trouver celui-ci.
J’aurais néanmoins une petite requête. Ce que je veux faire est un peu différent. J’ai une liste d’objets “dragables” dont je veux pouvoir changer la position en glissant un objet à une autre place dans la liste et en enregistrant la modification dans une base de donnée. En gros, si je prends le 5ième élément et que je le glisse en 2ième, celui-ci reçoit la position 2, le 2 glisse en 3, le 3 en 4 et le 4 en 5. J’espère que je suis assez clair…

Existerait-il quelque part un tuto pour faire ce genre de chose ou quelqu’un aurait-il une idée sur la façon de procéder ? Je suis en effet incapable de développer ça tout seul… (snif)

Merci d’avance !
Guiral antoine, le 2 avril, 2008 à 14:58 dit:

Salut david,

oui je vois ce que tu veux faire. Tu parle de liste, tu as une liste au sens html? c’est à dire balise ul/li ou ol/li?

Merci pour les compliments sur le tuto
A bientôt
David Linotte, le 2 avril, 2008 à 15:38 dit:

En fait là je les ai mis dans un div mais à la base c’est une liste.

<img src="../images/gestion/icone_page.png" alt="" width="80" height="80" /><a href="contenu.php?id= ">

C’est un while qui parcourt la base de données et sort toutes les pages. Ces pages ont un champs position sur lequel je veux faire des modifications.

Merci pour l’aide (et rapide en plus).
Guiral antoine, le 2 avril, 2008 à 15:41 dit:

Tu aurais une page d’exemple? Si c’est une liste il existe des truc tout fais pour ça tu n’aurais plus qu’à t’occuper de la partie sauvegarde en bdd. Dès que j’ai un exemple de ce que tu veux faire je t’envoie les liens (pour être sûr que c’est ce que tu veux :-)).
David Linotte, le 2 avril, 2008 à 16:18 dit:

Je te mets plus de code et je le mets en liste pour que tu voie ce que c’est et un lien vers une image de la page (c’est sécurisé je saurais pas te la montrer).

<img src="../images/gestion/icone_page.png" alt="" width="80" height="80" /><a href="contenu.php?id= ">

L’image

Ce sont les blocs entourés en pointillés.
Guiral antoine, le 2 avril, 2008 à 16:35 dit:

Oui c’est galère de mettre du code dans les commentaires,

je pense que tu trouvera ton bonheur ici : http://interface.eyecon.ro/demos avec les sortables lists ou sortables floats . Ensuite il faut que tu adapte le code pour faire la sauvegarde en bdd. Une fois que tu auras coder le “sortable” contact moi par mail je pourrais te filer un coup de main.

Au passage : le design de ta page est super.
David Linotte, le 2 avril, 2008 à 16:45 dit:

OK je regarde ça demain et je te tiens au courant.
Encore merci !
Guiral antoine, le 2 avril, 2008 à 16:46 dit:

ok ca marche! Avec plaisir!

A bientôt!
David Linotte, le 3 avril, 2008 à 9:07 dit:

Hello,

J’essaye d’implémenter le script interface pour rendre mes blocs tribales mais je n’y arrive pas.

Je ne vois pas ce qui ne fonctionne pas j’ai pourtant suivi cet exemple.

Je suppose que j’ai dû faire une erreur mais je ne vois pas où… Une idée ?
David Linotte, le 3 avril, 2008 à 9:23 dit:

Bon décidément ça ne passe pas pour le code.

J’ai mis la page dans un dossier test de manière à ce que tu puisse regarder le code.
Guiral antoine, le 3 avril, 2008 à 15:25 dit:

Je viens de regarder ton code tu as des erreurs de compil. Corrige déjà ca on verra pour la suite J’ai aussi vu que tu avais du html dans un fichier js :s pas tres coherent.. Je te passe mon gmail : guiral[.]antoine[at]gmail[.]com

Courage
Callec Emmanuel, le 4 avril, 2008 à 18:47 dit:

Bonjour,

Bon script, probablement le plus clair parmi tous les tuto fr que j’ai trouvé.
Cependant j’ai deux petites questions :

A quoi ça sert de mettre “substr” ici $id_recette=substr($_GET[’id_recette’],1,1); cat si ton id_recette fait “25″ il ne va te sortir que “2″ !?

Et aussi : $sql=’insert into recette_ingredient values(\”.$id_recette.’\’,\”.$id_ingredient.’\’)’; si tu ne précises pas les champs à remplir comment peut-il enregistrer ?

@+
Manu
Guiral antoine, le 4 avril, 2008 à 19:31 dit:

Bonjour emmanuel,
tout d’abord merci pour le compliment (en plus cela correspond assez bien à ton site ;-))!

Ensuite pour les deux points que tu abordes : en e qui concerne le substr en effet il ne ressortira que le 2. A vrai dire je ne m’ettais même pas posé la quetion la “difficulté” du tuto n’étant pas là. Mais si j’ai le temps un de ces 4 je ferais la modif (ca y est c’est sur mon todo).

Par contre pour la requête cela fonctionne. Ma table contient deux champs, si je lui envoi le bon nombre d’info dans le bon ordre c’est ok. Sinon il faut en effet préciser le noms des champs dans lesquels on veut faire l’insert.
A bientôt!

(
Callec Emmanuel, le 6 avril, 2008 à 15:57 dit:

Bonjour Antoine,

En effet, j’avais oublié qu’il était possible d’écrire un insert into de cette manière, en ce qui me concerne, je ne le fais jamais car j’ai toujours peur qu’en cas de surcharge du serveur ce dernier s’emmêle les pinceaux dans l’interprétation de la requête alors je reste très précis dans ces dernières.

Sinon pour en revenir au script, étant nul en ajax je me creuse la tête depuis plusieurs heures pour ajouter une amélioration, à savoir, lorsque, pour reprendre l’exemple, l’on ajoute un ingrédient pour la recette j’aimerai que cet ingrédient devienne rouge dans la liste des ingrédients (ou n’importe quelle autre couleur), afin de montrer qu’il a déjà été utilisé et de même, retirer la couleur si l’on retire l’aliment de la recette. J’aimerai utilisé ton script de la sorte pour remplir une liste d’objets afin de mieux voir ceux qui ont déjà été ajouté à la liste.

Bref si tu pouvais m’aider sur ce coup ça serai super !

Manu
Guiral antoine, le 7 avril, 2008 à 11:38 dit:

Salut manu,

alors j’ai un peu réfléchit à ce que tu veux faire…la première chose à faire c’est créer les classes CSS que tu appliquera à tes éléments. Ensuite je pense que tu peux procéder de deux manières : la première serait de modifier le script en profondeur et d’associer à chaque zone droppable un array et ensuite de comparer les arrays afin d’appliquer le style aux doublons. La seconde consisterais à appliquer le style au moment ou tu clones ton élément dans ta liste d’objets et à l’enlever au moment ou tu tue ton drag.

Mais dans les deux cas cela sous entend que tu ne gère qu’une recette parce que comment faire comprendre qu’un ingrédient à été utilisé dans une recette parmi celles affichés?

Bon courage et tiens nous au courant de tes avancées

ntoine Guiral : apprenti du web 2.0