PHP AJAX navigation Tree

Introduction

Ajax? non pas vraiment. Dans la mesure ou nous n'effectuerons pas de requetes vers le serveur, alors cette qualification peut etre un peut abusive.

Mais nous introduisons le sujet et il n'est pas exclu d'en venir à une version Ajaxifiée de cet exemple.

Il s'agit de pouvoir ajouter un élément de niveau 1+ à l'arbre.

Prérequis

Nous considérons que vous avez suivi l'exemple de simple "navtree". D'ailleurs c'est le code de cet exemple qui nous servira de base de départ.

Cahiers des charges fonctionnel

L'utilisateur devra pouvoir ajouter un enfant à un parent de son choix,

• soit en cliquant sur le parent,
  
• soit en entrant le "id" du parent.

Le "navtree" peut etre relativement long, la formulaire doit rester visible, meme si on est en bas de liste et que la liste est très longue.

Implémentation

Javascript, PHP, MySQL.

Comment nous reprenons un exemple tout fait, alors nous sommes tributaires de la technologie utilisée. Nous allons ajouter à cela un peu de JavaScript.

Le formulaire et son positionnement.

Nous allons tout d'abord ajouter un formulaire et le rendre "fixe".

Le remplissage du champ ID

Pour faciliter le boulot du remplisseur, nous allons surligner dans une autre couleur (jaune) le futur parent.

L'utilisateur peut soit entrer un numéro dans le champ qu'il faut, soit cliquer sur le parent choisi.

Pour cela, nous avons affecté un "id" à chaque ligne et fais quelques fonctions JavaScript pour la coloration.

L'ensemble est réparti dans différents fichiers.

Controle de formulaire

Maintenant, nous devons controler un certain nombre de choses:

• Si l'utilisateur entre manuellement un nombre dans le champ "id", alors il ne doit pas être supérieur au nombre d'élément déjà présent dans le navtree.
• On ne doit pouvoir entrer que des lettres majuscules et minuscules dans le champ "nom".

Nous connaissons le nombre total d'élément, nous l'avons avec getElementsByName en donnant "parents" comme argument.

Nous savons l'expression régulière qui correspont à "uniquement des lettres".

Ajout d'un enfant

Maintenant, nous allons traiter l'ajout d'enfant, sous un parent bien déterminé et choisi.

On utilisera le formulaire déjà existant, en choisissant la méthode GET de soumission des informations.

Les vérifications sont encore à l'ordre du jour coté serveur car un visiteur n'ayant pas JavaScript peut soumettre n'importe quoi. Un visiteur qui met aussi les argument dans la l'URL (puisque méthode GET).

Les modifications apportées au code sont mineures.