AJAX en clair : tableur

JPBruneau

Tutoriel Ajax en clair - Comment réaliser un mini tableur en AJAX

Cet article fait suite à AJAX en clair, article qui abordait la gestion d'un chat en utilisant AJAX simplement, c'est-à-dire sans Json ni autre *.JS. Sur ce même principe, nous allons réaliser un mini tableur, sans formule de calcul, mais utilisant une gestion totale des lignes et colonnes ainsi que l'édition des cellules.

Commentez

- Titre : AJAX en clair : tableur

- Auteur : JPBruneau

- Parution : 25 juin 2013

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 JPBruneau. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. Prérequis

- III. Découverte de l'article

- IV. Organisation et explication du code

- IV-A. Ajout d'une colonne

- IV-B. Ajout d'une ligne (un data dans la table)

- IV-C. Les suppressions

- V. Remerciements

I - Avant-propos

S'adressant à tous ceux qui maîtrisent la « programmation permettant de gérer un site Web », cet article a pour but d'aller plus loin dans l'utilisation du module AJAX.

Developpez.com possède déjà un grand nombre de tutoriels et d'articles sur AJAX. Le but du présent article reste donc de mettre en évidence la multiple utilisation d'un seul et simple module AJAX.

II - Prérequis

Bon programmeur comme vous l'êtes, vous savez faire un formulaire et en récupérer les saisies. Sont également acquis : le HTML, les feuilles de style et les bases du JavaScript.

III - Découverte de l'article

Le code de l'exemple décrit dans cet article étant téléchargeable, nous n'affichons dans cet article que les parties de code justifiant des commentaires. Aussi, nous vous conseillons de télécharger et d'installer l'exemple, puis de le tester.

Ainsi vous serez en possession du code complet et la lecture de l'article s'en trouvera facilitée.

Téléchargez l'ensemble de la racine du site exemple (tableur-racine), puis téléchargez son répertoire lesw/ (répertoire lesw de tableur).

À l'aide de PHPMYADMIN, importez la table du tableur en utilisant ajax-en-clair-tableur.sql.
Modifiez le fichier lesw/tableur-sql.php en remplaçant le nom de la base de données et le login SQL par vos données :

tableur-sql.php

<?php
if (!isset($moiChri))   {
header('Location: ../index.php');
exit;
}
try {
$bdd = new PDO('mysql:host=localhost;dbname=jplyne', 'root', '');
$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
?>

IV - Organisation et explication du code

Entre index.php et ajax-tableur-pdo.php (PHP appelé par AJAX) plusieurs fonctions sont utilisées avec chacune leurs quatre phases faciles à isoler :

- dans index.php, un ou des éléments HTML appelant une fonction JavaScript ;

- la fonction JavaScript qui va en partie analyser les éléments reçus du HTML puis appeler le moteur AJAX ;

- le moteur AJAX ne fait que passer (ici en POST Asynchrone, voir AJAX en clair (1) ) les éléments à traiter au PHP ajax-tableur-pdo.php ;

- le PHP ajax-tableur-pdo.php contient lui aussi un code spécifique pour chaque action, et souvent une partie commune.

La page HTML telle qu'elle est représentée (plus haut) est décrite dans index.php jusqu'aux images cliquables. Le tableau de bas de page étant généré par ajax-tableur-pdo.php, en effet l'objet de cet article est la manipulation du minitableur, c'est donc la partie variable de la page et, dès l'ouverture d'index.php, la fonction AJAX est appelée sans action précisée et donc renvoie la totalité du tableau de notre minitableur, AJAX l'envoyant dans le DIV id='tableur'

IV-A - Ajout d'une colonne

Donc prenons l'action « ajout d'une colonne ». L'indication affichée pour l'utilisateur est :

Pour ajouter une colonne, tapez son nom en minuscules sans espace, puis choisissez après quelle colonne vous souhaitez cet ajout, puis cliquez sur ajout.

Le visiteur va donc taper un nom dans l'INPUT d'id='untexte' puis sélectionner le champ précédent la colonne qu'il veut créer grâce au SELECT d'id='lacol'. Finalement, il va cliquer cette image :

La fonction appelée étant  un_ajout()  :

Index.php

function un_ajout()
{
var nature=1;
var resultat = document.getElementById("lacol").value;
var LeNom=document.getElementById('untexte' ).value;
if (isNaN(LeNom)) nature=0; //=====pas numerique
if (nature==0 && LeNom!="")
maFonctionAjax(999, resultat,LeNom,'ajout');
/* ===========index champ    valeur action */
}

- nature=1 correspond à une nature de données saisies numériques, 0 si alphanumériques.

- resultat récupère le nom du champ de la table sélectionnée.

- LeNom récupère le nom du nouveau champ à insérer.

- Ensuite la fonction isNaN va déterminer si nous sommes en numérique.

Si tout est correct, alors notre fonction va envoyer en POST les valeurs nécessaires pour l'ajout d'une colonne (un champ dans la table) dans l'ordre : POST index champ valeur action.

Affichons tous les éléments de code qui vont être utilisés dans ajax-tableur-pdo.php pour remplir cette fonction :

ajax-tableur-pdo.php

<?php
session_start();
header('Content-type: text/html; charset=ISO-8859-1');
$moiChri="N";
require("lesw/tableur-sql.php");
$id = (isset($_POST['lindex'])) ? intval($_POST['lindex']) : 9999;
$champ = (isset($_POST['champ'])) ? secur($_POST['champ']) : '';
$valeur = (isset($_POST['valeur'])) ? secur($_POST['valeur']) : '';
$valeur=str_replace(" ","",$valeur);
$action = (isset($_POST['action'])) ? secur($_POST['action']) : '';
//================ajouter une colonne=============
if ($action=="ajout" && $champ!="" && $valeur!="")
{
$result = $bdd->prepare(" ALTER TABLE  `ajax_tableur` ADD  ".$valeur." VARCHAR( 25 ) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL DEFAULT  'texte' AFTER  ".$champ." ");
$result->execute();
}

//========Toujours relecture du tableau résultant=============
$nbr=0;
$rub = array();
$seltitre ="<form action='#' id='LeForm' name='LeForm' >";
$seltitre.="<input name='untexte' id='untexte' type='text' value='' >";
$seltitre.="<select name='lacol' id='lacol'>";
$affiche="<table id='table-utilisateurs' class='centreT'><tr>";
$res = $bdd->prepare("DESCRIBE ajax_tableur");
$res->execute();
while($row1 = $res->fetch()) {
$rub[$nbr]=$row1['Field'];
$affiche.="<th class='cellule'>".$row1['Field']."</th>";
$seltitre.="<option value='".$row1['Field']."' > ".$row1['Field']." </option>";
$nbr++;
}
$seltitre.="</select></form>";
$affiche.="</tr>";
$result = $bdd->prepare("SELECT *  FROM ajax_tableur");
$result->execute();

while ($row = $result->fetch())
{
$affiche.="<tr>";
for ($x=0;$x<$nbr;$x++)
{
$a=$row[''.$rub[$x].''];
if ($x==0) $affiche.="<td id='".$rub[$x]."-".$row['id']."' class='cellule2' >".$a."</td>";
if ($x!=0) $affiche.="<td id='".$rub[$x]."-".$row['id']."'  class='cellule' ondblclick='Lajax(".$row['id'].", this, \"".$rub[$x]."\");'>".$a."</td>";
}
$affiche.="</tr>";
}
echo ($seltitre.$affiche."</table>");
$bdd=NULL;
?>

Ce PHP va donc récupérer les valeurs des _POST, puis va réaliser le ALTER TABLE.
C'est trop enfantin.
Ensuite le PHP va préparer son renvoi de réponse à AJAX par l'echo en dernière ligne du code, à savoir, le FORM avec l'INPUT et le SELECT obtenu via PDO pour obtenir les noms des champs présents dans le SELECT y compris le nouveau champ grâce au DESCRIBE de la table.

IV-B - Ajout d'une ligne (un data dans la table)

De la même façon pour l'action « ajout d'une ligne », l'indication affichée pour l'utilisateur est :

Pour ajouter une ligne, tapez son nom en minuscules, laissez le select à "id", puis cliquez sur nouveau.

Le visiteur va donc taper dans l'INPUT d'id='untexte' une marque de voiture, puis il va cliquer cette image :

La fonction appelée étant  un_ajoutL() :

index.php

var nature=1;
var resultat = document.getElementById("lacol").value;
var LeNom=document.getElementById('untexte' ).value;
if (isNaN(LeNom)) nature=0; //=====pas numerique
if (nature==0 &amp;&amp; LeNom!="" &amp;&amp; resultat=='id')
maFonctionAjax(999, resultat,LeNom,'nouveau');
/* ===========index champ valeur action */

Affichons tous les éléments de code qui vont être utilisés dans ajax-tableur-pdo.php pour remplir cette fonction (nous n'afficherons pas ici la partie commune du PHP déjà vue précédemment).

ajax-tableur-pdo.php

//================nouveau model =============
if ($action=="nouveau" && $valeur!="")
{
$premier = $bdd->prepare("DESCRIBE ajax_tableur");
$premier->execute();
$i=0;
while($row1 = $premier->fetch()) {
if($i==1) $Lui=$row1['Field'];
$i++;
}
$ajout = $bdd->prepare("INSERT  INTO ajax_tableur (".$Lui.") VALUES ( :nom)");
$ajout->bindValue(':nom', $valeur, PDO::PARAM_STR);
$ajout->execute();
}

Précisons que ne connaissant pas le nom des champs de la table, nous allons chercher le deuxième champ, le premier « id » étant auto-incrémenté.

IV-C - Les suppressions

Les suppressions de lignes ou de colonnes sont tout aussi simples. Ces deux fonctions ont également cette structure bien différenciée. Ce qu'il faut en retenir est qu'il y a une grande facilité d'utiliser un module AJAX pour de nombreuses fonctions de ce type.

V - Remerciements

Je remercie ClaudeLELOUP pour sa relecture attentive, ainsi que vermine. Je remercie également ceux qui m'ont aidé pour cet article.