Les générateurs JavaScript sont des interfaces graphiques (en HTML) conçues pour permettre de générer facilement, et sans réelle connaissance du langage généré, du code utilisable (en copier/coller le plus souvent) dans une page HTML. Simplement, elle permet aux non-codeurs d'avoir accès aux possibilités créatives des codeurs.

Nous vous proposons ici un premier générateur, conçu pour permettre à ceux qui ne connaissent pas PHP de pouvoir utiliser l'application de diagrammes PHP/SWF Charts, dont nous avions déjà parlé dans notre article "Des diagrammes avec le couple PHP/Flash".
Notre générateur est réduit à sa plus simple expression : il ne permet pour le moment que de préciser quelques options du diagramme, quand de nombreuses autres sont disponibles. Nous laissons au lecteur le soin de le modifier selon ses besoins... En revanche, nous avons conçu ce générateur de telle sorte que n'importe quel tableau de données puisse être utilisé, cela grâce à quelques formulaires et boucles.

Découpage
Notre générateur est composé de trois parties. La première est un formulaire nous permettant de préciser le nombre de colonnes et lignes du tableau de données. La seconde présente ce tableau avec toutes les cases à remplir, et les options que nous pouvons préciser. La dernière, enfin, affiche le code-source PHP, prêt à être copié dans une page de la même extension.
Ces différentes parties sont affichées et cachées selon les besoins automagiquement via JavaScript et les CSS. Chacune dispose donc d'une id.

Le code étant trop long pour être copié ici de manière lisible, nous vous suggérons de le télécharger directement pour l'étudier.

Première partie

Notre bouton est relié à la fonction JavaScript grille(), qui récupère le nombre de lignes et de colonnes voulues, et génère le tableau dynamiquement dans le div "grille" (situé dans le second formulaire), grâce à deux boucles while() imbriquées et à la méthode innerHTML. Ceci fait, cette première partie disparaît et la seconde est affichée, via CSS.

Seconde partie

La fonction utilisée est generer(), qui récupère les diverses données entrées dans le tableau (invisible ici car créé dynamiquement par JavaScript).

Troisième partie

Forum

Réagissez dans les forums de JDN Développeurs

Le résultat s'affiche dans ce champ texte. Le code qui y est généré est directement copiable dans une page PHP classique. Vos utilisateurs peuvent ainsi construire des diagrammes élaborés (selon les transformations que vous apportez au script) sans pour autant devoir programmer en PHP.

Vous pouvez tester directement le générateur, et en lire la source.