Côté client
La page web et le script PHP (côté serveur) qui seront utilisés sont bien sûr spécifiques à l’exemple que j’entends traiter dans ce tutoriel. Avant toute chose, il me semble donc judicieux de donner dès maintenant la structure de la table qui contiendra les données utilisées. Il s’agit d’une simple table recensant les états civils d’utilisateurs fictifs :
CREATE TABLE `inlinemod` (
`id` int(11) NOT NULL auto_increment,
`nom` varchar(255) NOT NULL default »,
`prenom` varchar(255) NOT NULL default »,
`adresse` tinytext NOT NULL,
`code_postal` varchar(5) NOT NULL default »,
`ville` varchar(255) NOT NULL default »,
`enfants` int(11) NOT NULL default ‘0’,
`email` varchar(255) NOT NULL default »,
PRIMARY KEY (`id`)
)
Dans cette table, tous les champs affichés et modifiables sont donc de type texte, à l’exception du champ adresse qui sera de type texte-multi et du champ enfants qui sera de type nombre.
La page web
Le code de la page web de présentation des données est des plus basiques : une connexion à la base pour récupérer les données à afficher, puis une boucle afin de construire le tableau contenant celles-ci. Voici déjà le code complet pour une vue d’ensemble. Nous nous concentrerons ensuite sur les détails importants.
<?php
// Connexion à la base de données
mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die(mysql_error()); mysql_select_db(DB_NAME) or die(mysql_error());
$sql = ‘SELECT * FROM `’.DB_TABLE_NAME.’`’;
$result = mysql_query($sql) or die(__LINE__.mysql_error().$sql);
?>
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.1//EN » « http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd »> <html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr »> <head>
<meta http-equiv= »Content-Type » content= »text/html;charset=iso-8859-1″ />
<title>Modification « inline » de données grâce à XMLHTTPRequest</title>
<link rel= »StyleSheet » type= »text/css » href= »index.css »/> <script type= »text/javascript » src= »inlinemod.js »></script>
</head>
<body>
<h1>Utilisateurs</h1>
<table id= »table-utilisateurs »>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Adresse</th>
<th>Code Postal</th>
<th>Ville</th>
<th>Enfants</th>
<th>Email</th>
</tr>
<?php
while($user = mysql_fetch_assoc($result))
{
?>
<tr>
<td class= »cellule » ondblclick= »inlineMod(<?php echo $user[‘id’]; ?>, this, ‘nom’,
‘texte’) »>
<?php echo $user[‘nom’]; ?>
</td>
<td class= »cellule » ondblclick= »inlineMod(<?php echo $user[‘id’]; ?>, this, ‘prenom’, ‘texte’) »>
<?php echo $user[‘prenom’]; ?>
</td>
<td class= »cellule » ondblclick= »inlineMod(<?php echo $user[‘id’]; ?>, this, ‘adresse’, ‘texte-multi’) »>
<?php echo $user[‘adresse’]; ?>
</td>
<td class= »cellule » ondblclick= »inlineMod(<?php echo $user[‘id’]; ?>, this, ‘code_postal’, ‘texte’) »>
<?php echo $user[‘code_postal’]; ?>
</td>
<td class= »cellule » ondblclick= »inlineMod(<?php echo $user[‘id’]; ?>, this, ‘ville’, ‘texte’) »>
<?php echo $user[‘ville’]; ?>
</td>
<td class= »cellule » ondblclick= »inlineMod(<?php echo $user[‘id’]; ?>, this, ‘enfants’, ‘nombre’) »>
<?php echo $user[‘enfants’]; ?>
</td>
<td class= »cellule » ondblclick= »inlineMod(<?php echo $user[‘id’]; ?>, this, ’email’, ‘texte’) »>
<?php echo $user[’email’]; ?>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
<?php
mysql_close();
?>
Pour votre propre code vous aurez bien évidemment à définir les variables de connexion à la base de données, mais là n’est pas notre sujet.
En premier lieu on remarque l’inclusion du fichierinlinemod.js, qui contiendra les fonctions utilisées pour le mode d’édition et la sauvegarde.
Le plus important se situe au niveau des cellules du tableau, dont nous allons détailler les attributs. Pour référence voici déjà une copie de la la balise d’ouverture de la première cellule :
<td class= »cellule » ondblclick= »inlineMod(<?php echo $user[‘id’]; ?>, this, ‘nom’, ‘texte’) »>
L’attributclass ne fait qu’assigner à la cellule une classe CSS que voici :
td.cellule {
text-align: center;
border: 1px solid #376ef9;
cursor: pointer;
}
La modification de l’apparence du curseur sur les cellules permet de signifier de manière simple à l’utilisateur qu’une action est ici possible.
L’attributondblclick nous plonge plus en avant dans le sujet puisqu’il est le point d’entrée vers le mode d’édition, grâce à la fonction inlineMod. Celle-ci prend quatre paramètres :
1 L’id de l’enregistrement dans la base de données, afin de savoir quoi modifier lors de l’appel du script PHP
2 Une référence sur l’objet qui contient la valeur à modifier. Ici,this est passé pour désigner la balise td
3 Le nom du champ à modifier dans la base de données, toujours pour renseigner le script PHP
4 Le type de la valeur. Ici elle est de type texte, plus bas dans la page vous trouverez également un type texte-multi et un type nombre
Voyons maintenant ce que donne, justement, l’implémentation de cette fonctioninlineMod.
Le Javascript
Mode d’édition
Le code que je vais vous présenter ici ne respecte pas exactement l’ordre de l’analyse présentée ci-dessus. L’esprit est le même bien sûr, mais le mode de fonctionnement du Javascript et notamment les possibilités offertes par la manipulation du DOM permettent de regrouper certaines étapes.
Avant toute chose, afin qu’une seule édition ne soit effectuée à la fois, nous allons introduire une variable globale de type booléen qui nous permettra de valider ou non le passage au mode d’édition suivant qu’une édition est déjà en cours. Un test sur cette variable en début de fonction permettra ce contrôle :
//On ne pourra éditer qu’une valeur à la fois
var editionEnCours = false;
//Fonction de modification inline de l’élément double-cliqué function inlineMod(id, obj, nomValeur, type)
{
if(editionEnCours)
{
return false;
}
else
{
editionEnCours = true;
}
Introduction
I – Première partie : Création du script « simple »
I-1 – Analyse préliminaire
I-2 – Côté client
I-2-a – La page web
I-2-b – Le Javascript
I-2-b-i – Mode d’édition
I-2-b-ii – Sauvegarde
I-3 – Côté serveur
II – Deuxième partie : Généralisation du script, emploi de classes
II-1 – Les modifications apportées
II-1-a – Limites du script actuel
II-1-b – Pourquoi des classes ?
II-2 – Adaptation du code d’origine
II-2-a – Réorganisation des fichiers
II-2-b – Modification de index.php
II-2-c – Fonctionnalités des classes
II-2-d – Modification d’inlinemod.js
II-2-d-i – La fonction inlineMod
II-2-d-ii – La fonction sauverMod
II-2-e – Modification de sauverMod.php
II-3 – Implémentation des classes
II-3-a – L’objet texte
II-3-b – L’objet nombre
II-3-c – L’objet texteMulti
Conclusion
Liens
Addenda
Constantes utilisées pour les accès BDD
Télécharger le cours complet
