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-racinetableur-racine), puis téléchargez son répertoire lesw/ (répertoire lesw de tableurré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 :
<?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)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() :
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 :
<?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() :
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!="" && 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).
//================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 ClaudeLELOUPClaudeLELOUP pour sa relecture attentive, ainsi que verminevermine. Je remercie également ceux qui m'ont aidé pour cet article.