[annonce] prochain tutoriels : de l’ajax avec jQuery

Pfiou! Vacances de folies qui ne me laissent pas autant de temps que je voudrais pour blogger …Au programme : pas mal de boulot pour l’école, récéption de mon nouvel ordinateur portable (j’en parlerais dans un prochain billet) avec tout mon espace de travail à reconfigurer…

Mais j’ai quand même pensé à vous! Je suis en train de préparer deux tutoriels basé sur : l’ajax non-intrusif avec jquery :

[TOP 3] Le mois de mars

Un petit récapitulatif des tutoriels les plus vus au mois de mars :

1. le couple sur les drag’n drop avec sauvegarde automatique en base de données via ajax (partie 1 et partie 2)
2. Comment faire des bordures extensibles valides en xhtml/css
3. faire un mashup avec google maps sur votre site

Ils représentent plus d’un tiers des visites pour ce mois ci (soit un peu plus de 1100 visites).

Si vous avez des besoins spéciaux je suis ouvert à toutes propositions pour la rédaction d’un tutoriel. See you!

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

Ce tutoriel est disponible sur mon nouveau blog (lien direct). Afin d’eviter le duplicate content je vais tronquer une partie de l’article…

Ç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é d’un identifiant (id_recette) et d’un nom de recette (recette).
• la table ingrédient avec un identifiant (id_ingredient) et du nom de l’ingrédient (ingredient).
• la table recette_ingredient qui contiendra les compositions de nos recettes sous la forme de couple 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”.

La suite du tutoriel est disponible sur mon nouveau blog (lien direct). Désolé pour la gêne occasionnée ^_^’

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

Ce tutoriel est disponible sur mon nouveau blog : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/

Bonjour!

Je profite d’un peu de répit ce dimanche pour terminer la première partie de ce tutoriel. Nous allons voir comment faire des drag’n drop (glisser déposer) avec JQuery. Dans un second temps nous verrons comment sauvegarder les modifications directement en base de donnée avec de l’ajax. Pour voir un exemple je vous propose d’aller faire un tour sur mon site de gestion d’une équipe de rugby (projet en cour) : teamManagerXV.

Bon allez on attaque?!

• Le coté client : XHTML

Comme d’habitude le code puis les explications

<html>
<head>
<title>Tuto drag’n drop</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″ />
<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”>
<div id=”1″ class=”drag”>sucre</div>
<div id=”2″ class=”drag”>lait</div>
<div id=”3″ class=”drag”>farine</div>
<div id=”4″ class=”drag”>oeuf</div>
<div id=”5″ class=”drag”>sel</div>
</div>
<div class=”recette” id=”r_1″>
<h3>Pâte à crêpe</h3>
<div class=”recette_ingredient”>
</div>
</div>
<div class=”recette” id=”r_2″>
<h3>Pâte brisée</h3>
<div class=”recette_ingredient”>
</div>
</div>
</div>
</body>
</html>

Alors rien de particulier pour le moment en terme de structure du document. Vous pouvez remarquer que nous avons 3 divs “principaux” : un pour les ingrédients et un pour chaque recette. Celui pour les ingrédients contient nos éléments draggables tandis que ceux pour les recettes contiennent nos récepteurs (zone de drop).

• un peu de style : CSS

div{border:1px solid black}

.drag,.recette_ingredient{height:20px;width:60px}

Pas grand chose ici! Juste des bordures pour que ce soit “compréhensible” et un largeur/hauteur définie pour les zones de drop et les drags.

• Enfin des trucs cool! Le javascript!

Afin de ne pas concurrencer mon nouveau blog, je suis obliger de tronquer l’article. Pour un meilleur confort je vous conseil de lire la suite ici : http://antoine.guiral.info/2008/02/24/tuto-jquery-drag-n-drop-avec-sauvegarde-automatique-en-base-de-donnees-12/

Gest’XV devient teamManagerXV

Je vous parlais il y a quelques jour de mon nouveau projet. Il vient de changer de nom. Je trouve teamManagerXV plus sexy. Bien sur je ne vais pas faire un billet uniquement pour ça!

J’ai pas mal avancé aujourd’hui : création de la charte graphique (enfin plus ou moins), création des formulaires d’ajout d’un club, d’une équipe et d’un joueur. Jusque là rien de très emballant surtout que je n’ai pas encore peaufiner les formulaires (tant au niveau visuel que vérifications).

Par contre je me suis bien amusé pour faire la gestion des effectifs. En effet j’ai géré ça un peu comme flickr avec ses albums photos. C’est à dire avec des drag’n drop des joueurs (grâce à interface et JQuery). Ce que je n’avais jamais fait c’était la sauvegarde automatique en AJAX! Et je trouve que cela a un effet bluffant. Hop j’ajoute un joueur puis je fait glisser mon joueur dans une équipe je change de page, je reviens (ou un petit f5) et magie mes équipes ont été conservées!  Bon d’accord c’est pas nouveau, on l’a tous déjà vu…Certes! Mais dans ce cas je l’ai fait tout seul, juste avec la doc :p! Ne vous inquiétez pas je ferais un petit tutoriel là dessus très prochainement!

Prochaine étape : création d’une feuille de match, gestion de la présence aux entraînements, statistiques de présence, gestion de la session (qui peut faire quoi), puis plein d’autres choses. Vi…j’ai des nouvelles idées toutes les 5 minutes…

Vous aussi vous bossez sur un projet? Parlons en!

A bientôt!!