 http://mawel.free.fr : Site d'informations pratiques pour la mise en place de sites dynamiques en php |
|
|
| > Tutoriels |
|
| Erreurs courantes |
|
| Saisie de texte riche |
|
| Structure de données |
|
| Ajout/Modif/Suppression |
|
| Résoudre un problème |
|
| Soumission de données |
|
| Pseudo-templates |
|
| Enregistrement de fichiers |
|
| Liens relatifs |
|
|
| > Cours |
|
| 1. Structure de site |
|
|
| Contact |
|
| Votre avis |
|
|
|
| Liens |
|
| Inventons! |
|
|
Introduction Il arrive très souvent lors de la réalisation d'un site web, que l'on souhaite manipuler des liste de données. Par exemple : une liste d'abonnés a une mailing-liste, une liste de matériel, etc… La manipulation de liste comprend généralement les éléments suivants :
Ces listes sont le plus souvent accessible en lecture et modification a l'administrateur du système, et en lecture simple aux utilisateurs. Types de listes Selon la nature des informations enregistrées, on peut organiser les informations de plusieurs manières. Par exemple, dans le cas d'une liste d'abonnés ne comprenant que peu de champs (e-mail, date d'inscription), on peut mettre en place un système sur une seule page contenant l'ensemble des fonctions décrites ci-dessus. Dans le cas plus classique ou les nombre de champs est plus important, on met en place un système avec plusieurs pages :
Le schéma de navigation au sein de la liste est alors le suivant :  C'est la réalisation de ce type de liste qui est ensuite pris en exemple. Structure de données La mise en place d'une liste " plate " nécessite d'avoir une structure de données cohérente. En général, on trouve :
L'identifiant unique est indispensable, car il va servir partout pour désigner facilement une ligne de données. Pour rappel, les principales caractéristiques d'un identifiant unique sont :
Note : Les données peuvent être stockées dans une bases de données, ou dans des fichiers (comme décrit dans la méthode d'enregistrement), le principe est identique dans les deux cas. Construction des pages - Affichage de la liste La page de d'affichage de la liste doit effectuer les opérations suivantes :
Dans la page "Liste", on va se servir des titres des lignes pour positionner les liens vers les documents. Pour pouvoir désigner de manière unique le document, on utilise l'identifiant unique. Les liens ressemblent alors à : <a href=VoirDoc.php?IdDoc=165> dans lequel 165 correspond a l'identifiant du document en cours de visualisation. C'est cet identifiant qui va ensuite nous permettre de récupérer les valeurs du document. - Ajouter un document Cette page permet d'ajouter un document a la liste. Il faut donc mettre en place un formulaire qui va permettre a l'utilisateur de saisir ses informations. On retrouve donc un formulaire standard, en méthode post. La manière la plus simple pour effectuer les contrôles de saisie est de placer l'action du formulaire sur le formulaire lui-même. Le schéma de fonctionnement est le suivant :
En pratique, le script effectue donc les opérations suivantes :  On voit que dans les deux premiers cas, il faut afficher le formulaire, soit vierge, soit pré-rempli avec les valeurs erronées saisies par l'utilisateur. Il serait redondant de placer deux fois le code html correspondant au champs du formulaire, alors que ceux-ci sont identiques. Le plus simple est alors de créer, lorsque les données précédemment saisies ne sont pas valides (cas central) un tableau associatif, que l'on peut appeler " $Data ", et dans lequel on placera les valeurs saisies par l'utilsateur, ainsi que les éventuelles erreurs. On l'initialisera par exemple de la manière suivante : $Data['Nom'] = $HTTP_POST_VARS['Nom']; $Data['Date'] = $HTTP_POST_VARS['Date']; Il ne reste ensuite plus, lors de l'affichage du formulaire, qu'a faire de simples : <input type=text name=Nom value= " $Data['Nom']"> De cette manière :
Note : L'exemple fourni ici est le plus simple, il part du principe que les données saisies le sont dans des champs textes ou zone de texte (textarea). Le problème se complique un peu lorsque l'on utilise des champs " select ", " radio " ou " file ". Si ce principe d'enregistrement peut sembler lourd et complexe a mettre en œuvre, il convient de garder à l'esprit que :
- Voir un document Cette page permet d'afficher les données en lecture. Elle doit donc effectuer les opérations suivantes :
Par ailleurs, cette page contient aussi les liens/boutons " modifier " et " supprimer ". (éventuellement, un lien " retour " vers la liste). Les liens "modifier" et "supprimer" fonctionnent sur le même principe que le lien vers le document, en passant l'identifiant du document a traiter. Le lien ressemble donc a : <a href=NvDoc.php?IDDoc=165> et <a href=SupprimeDoc?IDDoc=165>. Note : On pourrait imaginer un système dans lequel cette page serait dans le même fichier que la modification de données, quelques " if " bien placés permettraient d'afficher soit des champs, soit des données brutes. En pratique, c'est rarement le cas, car on ne présente souvent pas les informations de la même manière en lecture et en écriture. Par exemple, lorsque l'on saisit une adresse, on place plusieurs lignes : N° dans la voie, Rue, Immeuble, code postal, ville. En création ou en modification, on a donc 5 lignes. En lecture en revanche, on place tout dans une seule ligne. Il est donc souvent - mais pas toujours - préférable de séparer en deux fichiers. - Modifier un document Cette page est en fait la plupart du temps identique a la page de saisie. Elle permet d'afficher l'ensemble des données du document dans un formulaire de modification. Elle doit donc effectuer les opérations suivantes :
Comme on l'a vu précédemment, on a tout intérêt a ne réaliser qu'une seule page pour la création et la modification d'un document. On est ainsi certain que les tests effectués lors de la validation des données seront identiques aux tests lors de la mise a jour. Le schéma complet de fonctionnement du script NvDoc.php modifié est alors le suivant :  Les différences sont donc :
Note : Pour cette méthode, il convient de passer l'identifiant du document parmi les champs du formulaire du document affiché en modification. Le plus simple et le plus efficace est de le passer dans un champs " Hidden ". Supprimer un document La suppression d'un document est la plus simple de toutes les opérations. Les actions a accomplir sont :
En pratique, on peut procéder de deux manières, soit en créant un fichier SupDoc.php, qui effectue ensuite une redirection vers la liste, soit en intégrant ce script dans la page de la liste elle même. L'url de suppression est alors du type : " Liste.php3?IDDocSup=165 " Elements annexes - Javascript et les tests de validation de saisie En règle générale, on souhaite placer des tests afin de valider la saisie des informations utilisateur. On distingue deux niveaux de tests :
En pratique, dans un formulaire d'inscription ou l'utilisateur doit créer un login et un mot de passe, le fait de vérifier qu'il a effectivement rempli la case " login " est un test de cohérence, le fait de vérifier que le login n'existe pas déjà dans la base de données est un test d'intégration. Il est important de remarquer que Javascript ne peut être utilisé que pour les tests de premier niveau. Javascript peut vérifier que le fait que l'utilisateur a rempli le champs, mais ne peut déterminer si le login a déjà été choisi par une autre personne. L'avantage de Javascript en revanche est d'être exécuté en local sur le serveur, donc de ne pas nécessiter un temps de rechargement de la page. Toutefois, les tests javascript n'excluent aucunement d'effectuer des tests de cohérence avant l'insertion dans la base de données. Il est en effet très facile de contourner des tests Javascript (par exemple, en désactivant l'option Javascript du navigateur). Les tests Javascript ne constituent qu'une commodité pour l'utilisateur, jamais une sécurité pour l'application. Il doivent toujours être doublés des mêmes tests avant l'enregistrement. - Retour sur l'ergonomie On a vu précédemment qu'il existait au moins deux types de listes, selon que l'on place tout sur une seule page, ou séparé sur plusieurs pages. On compare ici différentes ergonomies possibles. Dans les séquences, chaque passage d'un numéro a l'autre correspond a un rechargement de page (donc, a une attente utilisateur). Supposons un cycle complet sur un document : Création, Visualisation, Modification, Suppression. Dans le cas d'une utilisation de plusieurs pages, la séquence d'ajout est :
Séquence de Visualisation :
Séquence de modification :
Séquence de suppression :
Il est particulièrement important de comprendre que l'ordre de ces séquence n'est pas immuable, mais dépend d'une situation précise, et d'un " comportement utilisateur " vis a vis de la liste bien particulier. Dans le cas ou l'on fait tout sur une seule page contenant aussi le formulaire, les séquences sont beaucoup plus courtes. Dans la séquence d'ajout, on supprime ainsi l'étape 2 (accès au formulaire d'ajout) et la redirection de l'étape 3. On supprime aussi la séquence de visualisation, puisque tout est directement visible. La séquence de modification est beaucoup plus simple, un clic sur une ligne provoque l'ouverture de la page (ou d'une fenêtre Javascript) directement en modification (cela n'aurait pas d'intérêt de la présenter en lecture). Seule la séquence de suppression reste identique, même s'il est possible de placer une icone " Supprimer " au bout de chaque ligne, pour accélérer encore le processus. Entre ces deux " extremes " peuvent se positionner de nombreuses autres manières de séquencer la gestion des documents. Le choix des séquences doit dépendre de plusieurs facteurs :
Bref, le choix d'une ergonomie résulte d'un compromis entre plusieurs facteurs que ne peuvent déterminer qu'ensemble le développeur et les utilisateurs. Enfin, quelque soit le choix effectué, il est toujours plus prudent de le consigner par écrit pour le garder en tète. Conclusion La gestion des listes et la soumission de données sont des éléments très couramment rencontrés lorsque l'on réalise des sites web dynamiques, ou des intranets. La plus grande difficulté lors de la mise en place de ce système réside dans la définition des séquences d'ordonnancement des différentes tâches, et c'est donc sur ce point qu'il convient d'être le plus attentif avant de commencer a coder. |