Amélioration progressive

Version imprimable

26/06/2014, 17h46
Crackerz

Amélioration progressive

Bonjour,

Actuellement j'ai écris un code entièrement en PHP, plusieurs interaction sont faîtes qui généralement sont réalisé avec de l'ajax pour une meilleur expérience utilisateurs. Il s'agit tout simplement d'un formulaire, qui contrôle la saisie, fait apparaître de nouveau champ à la validation d'un bouton,etc...

Mais maintenant je voudrai par dessus ajouter du JavaScript afin que celui-ci donne une meilleur expérience à l'utilisateur comme énoncé plus haut, les messages d'erreurs apparaissent directement, les champ également ( sans rafraichir la page ).

Cependant est-ce que cela ne sera pas lourd au niveau des performances ?
Par exemple, JS vérifia directement en base de donnée si l’e-mail existe déjà mais lorsque je validerai cette même requête sera répété (alors qu'elle est "inutile" à ce moment là.

Cependant sans cela si le JS est désactiver ces l'ouverture au n'importe quoi. J'ai donc pensez à la balise <noscript></noscript> qui enverrait un GET marquant l’absence de JS, enfin bref je voudrais juste votre avis sur la manière dont vous avez l'habitude de faire.

Merci pour les retour.

Bonne journée.
27/06/2014, 10h39
iakou

Bonjour.

Il faut toujours faire :

- une vérification de syntaxe des données saisies, en Javascript, et cela dans votre page formulaire.
- un traitement côté serveur des données transmises (method="POST").

L'avantage réside dans la rapidité des contrôles côté client (immédiat puisque de l'ordre de la milliseconde). Cela évite des A.R inutiles qd la saisie n'est pas bonne (de l'ordre de la seconde puisque le serveur est distant).

Prenons l'exemple d'une adresse-mail :
- Le client rentre cette donnée ; JS en vérifie la syntaxe et affiche immédiatement l'éventuelle erreur, et ce en 1 milliseconde.
- En revanche le contrôles PHP coté serveur demeure INCONTOURNABLE (votre traitement devra vérifier l'existence de l'adresse-mail en BDD, pour savoir si on est en création-client ou en modification-client).

Comme vous l'avez déjà pressenti, le client peut désactiver JS (par erreur ou intentionnellement). Vous ne pouvez pas l'éviter, néanmoins il existe des solutions de contrôle, afin d'éviter ces désagréments.

Vous avez aussi évoqué l'utilisation d'AJAX, c'est effectivement possible si vous envisagez un formulaire modulable (qui s'adapte en fonction des réponses du client) mais vous vous embarquez inévitablement dans de la sophistication. Vous pouvez prévoir des choses + simples (par conséquent + robustes).

Bon développement.
27/06/2014, 11h29
Crackerz

Bonjour,

Merci pour votre réponse iakou, cependant une question persiste.

Prenons un exemple,

L'utilisateur peut choisir trois statuts, lorsqu'il en choisit un (champ de type radio) il valide en envoyant le formulaire (submit) en fonction de son choix la suite du formulaire apparaît. Comme vous pouvez vous en doutez aucun JavaScript est présent. Pour les utilisateurs ayant JavaScript d'activer le choix du statut dois faire apparaître la suite du formulaire sans rechargement de page (sans envoi du formulaire).

Comment dois-je m'y prendre ? La couche de JavaScript supplémentaire doit-elle supprimer du DOM les éléments inutile en cas de JS présent ? (dans mon exemple précédent je fais référence au premier formulaire permettant le choix du statut. Dans le cas contraire, les utilisateurs n'ayant pas JS d'activer pour une quelconque raison peuvent toujours naviguer et interagir sur l'application.

C'est la première fois que j'essaye d'utiliser l'amélioration progressive et cela change mes habitudes, afin de ne pas faire n'importe quoi je demande votre avis.
27/06/2014, 12h12
iakou

Via google tapez : javascript formulaire dynamique (Il y a bcp d'exemples de ce que vous voulez réaliser...)
Cdlt
27/06/2014, 14h11
SylvainPV

Amélioration progressive n'est pas le bon mot, il s'agit simplement de validation côté client. JavaScript est désactivé sur moins d'1% des postes d'après Yahoo, donc on peut présumer que cette validation côté client soit l'expérience par défaut.

La première validation très simple, ne nécessitant même pas JavaScript, est de mettre à profit les attributs type, pattern et required des <input> en HTML5.

Pour des contrôles plus poussés, vous pouvez vous servir de l'API de validation. Voici un très bon tuto: http://dmouronval.developpez.com/tut...te-validation/

Si des champs sont liés (un choix dans un champ modifie la suite du formulaire), je trouve que c'est une bonne idée de séparer ça en plusieurs pages, en fonctionnant avec un système d'étapes. Ça évite les confusions quand certains utilisateurs remplissent le formulaire de bas en haut (c'est du déjà vu :) ). Aussi, on retrouvera un comportement homogène avec ou sans JS activé.
27/06/2014, 15h57
Crackerz

Citation:

Si des champs sont liés (un choix dans un champ modifie la suite du formulaire), je trouve que c'est une bonne idée de séparer ça en plusieurs pages, en fonctionnant avec un système d'étapes. Ça évite les confusions quand certains utilisateurs remplissent le formulaire de bas en haut (c'est du déjà vu ). Aussi, on retrouvera un comportement homogène avec ou sans JS activé.

Justement, comment faîtes vous pour obtenir un tel résultat en fonction du même exemple que vous avez choisis ( ce rapportant à ma situation ).

Citation:

Amélioration progressive n'est pas le bon mot, il s'agit simplement de validation côté client. JavaScript est désactivé sur moins d'1% des postes d'après Yahoo, donc on peut présumer que cette validation côté client soit l'expérience par défaut.

Pour avoir du JS non intrusif je suis partis de la logique inverse, j'ai réaliser les choses uniquement coté serveur et maintenant je veux dire " Si JS est activé laisse le dynamise à JS qui le fera mieux que toi ".

Citation:

Via google tapez : javascript formulaire dynamique (Il y a bcp d'exemples de ce que vous voulez réaliser...)

Le problème ne réside pas dans le fait de créer un formulaire dynamique mais bien de répondre à ma phrase ci-dessus.
27/06/2014, 16h51
SylvainPV

Oui mais avec ou sans JS, HTML5 propose de la validation côté client. Ce n'est pas de l'amélioration progressive, c'est une norme que les navigateurs respectent ou ne respectent pas selon leur obsolescence. A la rigueur, on peut parler de dégradation gracieuse.

Si on sépare les étapes sur plusieurs pages, chaque soumission de page fait un aller-retour serveur, ce qui te permet de valider les saisies et de renvoyer la nouvelle étape en fonction des choix précédents. La validation HTML5/JavaScript servira uniquement à bloquer les soumissions si un format ou une condition n'est pas respectée. Elle ne se substitue pas à la validation côté serveur, il faut toujours une validation côté serveur pour la sécurité.

Je n'ai pas de problème avec ce que vous avez dit plus haut, au contraire j'étais déjà au courant, je pense mieux comprendre en écrivant un code d'exemple directement.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <?php //Si une variable get est présent (on suppose qu'elle contient ce qu'on attend : on masque le choix de la personne ). if(empty($_GET)) {?> <form action="" method="post" name="choix_type_personne" id="choix_type_personne"> <fieldset> <div> <input type="radio" name="type_personne" id="person1" value="person1" /><label for="person1">Personne1</label> <input type="radio" name="type_personne" id="person2" value="person2"/><label for="person2">Personne2</label> </div> <?php if(isset($erreurs['type_personne'])) echo '<div class="form-erreur">'.$erreurs['type_personne'].'</div>'; ?> <div> <input type="submit" value="Valider" name="valider_type_personne"/> </div> </fieldset> </form> <?php }?>
En fonction du choix entre person1 ou person2 la suite du formulaire est généré... Pourquoi je parle d'amélioration progressive ? Tout simplement car j'ai commencé par un formulaire basique puis le JS viens ensuite améliorer l'expérience de l'utilisateur. La dégradation gracieuse à mon sens correspond à écrire le JS en premier puis avoir une solution de replis...

Maintenant je bloque sur l'étape de l'ajout du JS, car il me faut d'abord masquer la partie générer par php à l'arriver sur la page à savoir le formulaire ci-dessous. La seule solution que j'ai (qui me paraît lourde) est de supprimer le formulaire ainsi que toutes les balises enfant du DOM.

Cas n°1 : JavaScript est désactiver ? Le formulaire est présent permettant de choisir le type de personne qui génère la suite du formulaire.
Cas n°2 : JavaScript est activer ? Il supprime toutes les balises inutiles pour faire le travail lui même( ces ici que je vous demande votre aide pour une solution).

Il est possible que je n'ai tout simplement pas compris et que vous m'avez donné la réponse à mon problème dans ce dernier cas, pourriez-vous, s'il vous plaît, me donner un petite exemple ou me rediriger vers un lien ?

Merci.

28/06/2014, 09h25
iakou

Bonjour.

Je pense que vos soucis proviennent du fait que vous voulez tout faire dans une même page.
Votre code va vite devenir inextricable, et je n'imagine même pas la maintenance...

La suggestion de Sylvain était de bon sens :

Citation:

Si des champs sont liés (un choix dans un champ modifie la suite du formulaire), je trouve que c'est une bonne idée de séparer ça en plusieurs pages, en fonctionnant avec un système d'étapes.

Maintenant vous pouvez quand-même poursuivre votre "amélioration progressive", car dépourvue de JS, votre application a inévitablement des mauvais temps de réponse. Prenez garde néanmoins à l'inconvénient précité...

Citation:

La seule solution que j'ai (qui me paraît lourde) est de supprimer le formulaire ainsi que toutes les balises enfant du DOM.

Il est inutile de supprimer ce que votre formulaire génère. Puisqu'en JS peut atteindre facilement ces objets, les tester et les modifier.

Bonne continuation.