Système de Profils

Version imprimable

18/02/2013, 14h13
Masamune56

Système de Profils

Bonjour,

J'ai développé récemment un FanSite qui marche bien mais lourd à l'utilisation du fait de devoir set de nombreux paramètres à chaque visite. Il n'y a que du HTML5 CSS3 et JQuery (base de données XML).

Mon idée est donc de mettre en place un système de profils stockant les données entrées par l'utilisateur, afin qu'il puisse recharger tous ses paramètres aux visites suivantes.

Concrètement je pense faire d'une pierre 2 coups:
sur clic du bouton "Sauvegarder", création d'un rapport sur une autre page html vierge, qui contiendra toutes les données de la page principale sous forme de texte simple.
- 1er intérêt: pouvoir copier-coller sur un forum.
- 2e intérêt: l'utilisateur pourra faire "Enregistrer la page sous..." sur son PC, puis plus tard, utiliser le bouton "Charger" pour ré-utiliser ce profile.html et les données qu'il contient dans la page index.html principale

Pour l'instant, j'ai réussi à implémenter la fonction "Sauvegarder", mais la nouvelle page de rapport créée n'est pas enregistrable (option click droit "Enregistrer sous..." grisée). Comment faire pour autoriser l'enregistrement?
En ce qui concerne la fonction "Charger un profil" je n'ai absolument aucune idée comment coder ca ?

Quelqu'un pourrait-il me conseiller une piste simple pour "pomper" les données utilisateur d'une page vers une autre ? Merci d'avance.

Cordialement

EDIT: mon niveau est débutant, même si ce site parait bien foutu, j'ai pas mal "bricolé" :s

Re-bonjour,

Bizarre je ne peut plus éditer mon message d'origine ? je voulait changer le titre vu que personne ne semble lire... titre trop vague ?

Je voulais également mettre à jour le statut de développement:

- 1er problème: la page de "rapport" créée via le bouton "Sauvegarder" est enregistrable en local sous Firefox mais pas Chrome (non testé sous IE). Apparemment je doit cliquer 3x sur Sauvegarder pour tomber enfin sur une page enregistrable... Pourquoi et surtout quelle solution devrais-je envisager ?

- 2e problème: j'ai commencé à faire des recherches pour la fonction "Charger un profil", et je suis tombé sur pas mal de références au "Filereader" ou "FormData", comme par exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //Chargement du profil $("#Load").click(function() { $("#choose").click(); }); $("#choose").change(function() { var file = $("#choose").files[0], fr = new FileReader(); fr.onprogress = function() {$("#DIVresultat").html("Chargement...")}; fr.onerror = function() {$("#DIVresultat").html("Oups, une erreur s\'est produite...")}; fr.onload = function() { alert("Success!"); $("#DIVresultat").html(""); DIVresultat.appendChild(document.createTextNode(fr.result)); }; fr.readAsText(file); });
Explications:
"Load" est un lien <a> masquant le <input type=file id="choose"> pour des raisons de style.
Objectif: charger, dans une variable ou DIV, les balises HTML du fichier importé, car elles contiennent des data-* contenant les données utilisateur enregistrées précédemment. Puis je pourrai écrire un code traitant cette var (ou DIV) pour extraire ces data-* et les réimplanter dans les divers inputs du site.
Ce code ne fonctionne pas: le alert retourne rien du tout, et la DIVresultat reste vide. Pourquoi et que dois-je faire ?

Je précise que RIEN n'est enregistré sur le serveur ! TOUT se fait côté client et ne regarde que le client, le serveur lui ne sert qu'à héberger le site c tout.

22/02/2013, 23h19
danielhagnoul

Bonsoir

Session et LocalStorage : https://developer.mozilla.org/en-US/docs/DOM/Storage.
23/02/2013, 15h58
Masamune56

Bonjour et merci pour votre réponse mais....

... c'est bien gentil de m'envoyez sur un lien ultra-technique alors que je suis amateur :s

Ce serait LocalStorage que vous me suggérez? et encore il semble parler d'utiliser les cookies... mais il me semble que c nul: il suffit que l'utilisateur fasse un nettoyage de ses cookies il perds tout non?

Je ne vois pas du tout comment adapter le contenu de cet article en termes d'enregistrement/chargement d'un fichier local .html ne contenant que des balises textes.

En gros je n'ai rien compris :s
23/02/2013, 23h43
danielhagnoul

Bonsoir

Quelles que soient les méthodes de stockage utilisées, l'utilisateur a toujours le dernier mot, il peut effacer définitivement tout ce qui est stocké chez lui à n'importe quel moment.

Les méthodes de stockage dans le navigateur sont récentes, HTML5, elles ne fonctionnent qu'avec les navigateurs non obsolètes.

Je vous signalais simplement l'existence de cette possibilité, car ce n'est effectivement pas un sujet pour débutant. J'aurais pu vous donner des liens vers un plugin et un exemple d'utilisation, mais je me suis abstenu pour cette raison.

Vous devez commencer par étudier et apprendre à manipuler le JSON.

Je crois que vous n'avez pas bien saisi que l'utilisateur ne veut pas stocker "dans le navigateur".
Pourquoi? Comme expliqué dans l'article que vous m'avez linké, il suffit que l'utilisateur ferme son navigateur, ou ouvre une nouvelle fenêtre, ou fasse le ménage dans ses cookies et il perds tout le profil qu'il vient de passer 10mins a monter sur mon site...
Ensuite c'est bien plus clair pour l'utilisateur d'avoir sur son dur local des fichiers distincts "Profil1" "Profil2" etc... dont il sait très bien où il les a mis... plutôt que des localStorage invisibles ou je ne sais quoi...

Je sait bien que ces attributs data-* sont récents et ne fonctionnent que sous les navigateurs non obsolètes, et j'en suis bien aise :) J'ai donc construit mon site en les utilisant à outrance et cela marche particulièrement bien pour rééditer un item existant par exemple. Ces data-* sont stockés dans le DOM, pas dans le navigateur.

Mais cela reste dans le cadre de la page web en cours, ma question aujourd'hui va au-delà: est-il possible de récupérer ces mêmes data-* (stockés dans un fichierprofil.htm) depuis un repertoire local personnalisé (et non pas les cookies ou autre fichier système) ?
Si oui, comment ? Je précise que seule la partie "chargement" m'embête, le post-traitement avec .data() ca je sais faire.

EDIT: peut-être avec un exemple ce sera plus parlant:
sur le site, prenez une épée (par exemple) cliquez dessus un formulaire apparaitra, tapez une lettre l'autocomplete vous aidera puis validez, puis sauvegardez(1er bouton dans la barre de navigation).
Une nouvelle page "Rapport" sera produite avec en bas votre épée et ses "stats".
Clik droit "afficher la source..." et là normalement vous devriez voir que les balises html de votre épée contiennent des data*- avec ses "stats". Du coup il suffit pour l'utilisateur d'enregistrer cette page telle quel, pour pouvoir la réutiliser plus tard, via la fonction "Charger profil" sensé pouvoir lire ces fameux data-*... ce qui aura pour effet de retrouver votre épée (et les autres équipements) exactement comme vous l'aviez set il y a 1 mois.

EDIT2: autant pour moi, je viens de vérifier le code source de la page "rapport" pour m'apercevoir, dans l'exemple de l'épée donné ci-dessus, que l'id et les data-* n'ont pas été copiés par la commande $(this).clone(), du moins je crois que ca vient de ca, je vais corriger cela... mais cela ne change rien au principe expliqué précédemment.
EDIT3: bon... j'ai corrigé mais c bizarre: alert($(this).hasData()) me retourne "false" mais quand je procède dans le sens inverse en connaissant le data a rechercher $(this).data("NomData") là ca me retourne la valeur attendue... Pareil avec le "Inspecter l'élément" dont je sait qu'il contient des data-*: c invisible o.O

EDIT4: en cherchant sur le site que vous m'avez linké j'ai trouvé ceci: https://developer.mozilla.org/en-US/...b_applications
... ce qui m'a permis de trouver l'erreur dans mon code précédemment posté, à la ligne 6:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 //Chargement du profil $("#Load").click(function() { $("#choose").click(); }); $("#choose").change(function() { var profile = $("#choose").get(0).files[0], fr = new FileReader(), LoadedHTML = ""; fr.onprogress = function() {$("#DIVresultat").html("Chargement...")}; fr.onerror = function() {$("#DIVresultat").html("Oups, une erreur s\'est produite...")}; fr.onload = function() {LoadedHTML.html($.parseHTML(fr.result))}; fr.readAsText(profile); //Post-traitements sur LoadedHTML });
Il fallait écrire avec la syntaxe JQuery, il manquait le .get(0)

... je vais pouvoir commencer le post-traitement du contenu de la var LoadedHTML :)