[tuto jQuery] navigation en ajax non-intrusif (1/2)

Ca y est, il arrive. Le tutoriel sur la navigation en ajax non-intrusif débarque sur vos écrans! Le but est donc de proposer une navigation en ajax (on ne rechergera que le contenu de la page) qui soit non-intrusive. Cela veut dire que si le javascript n’est pas activé le site fonctionnera toujours. Un petit exemple

Nous allons commencer par faire notre site de manière classique, celle qui sera affichée quand le javascript sera désactivé. Afin de factoriser le code je vais utiliser du php pour afficher le contenu, mais le fonctionnement serait le même en utilisant différent fichiers.

[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/