[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 php/sql] sécuriser ses requêtes SQL : sortez couvert!

Aujourd’hui rien de transcendant, mais plutôt quelque chose d’utile que j’utilise à chaque fois que je fais une requête vers une de mes bases de données. Je me protège des injections SQL.

J’utilise cette fonction pour chacune des variables que j’utilise dans mes requêtes.

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

}

Pas grand chose à expliquer coté algo : on applique un traitement différent selon que les magic_quotes soient activées ou non sur votre serveur. Dans les deux cas vos variables seront protégées!

Pour l’utiliser rien de plus simple. Quand vous récupérez vos variables, vous les faites passer à la moulinette puis vous construisez votre requête ;-). Un petit exemple vaut mieux qu’un long discours :

if(isset($_REQUEST['new_editeur'])){
            $editeur= protection($_REQUEST['new_editeur']);
            $sql='INSERT editeur VALUES(\'0\',\''.$editeur.'\')';
            $req=mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
        }

Avec ça vous allez pouvoir dormir sur vos deux oreilles!! Cependant je vous conseille de continuer à faire des sauvegardes TRÈS régulièrement de vos bases.

[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 ^_^’