Système de fichiers "profil"

**Masamune56** · 10/07/2013, 11h51

Bonjour

Je suis développeur amateur et ai réussi à développer un simulateur en ligne.

Tout marche impeccable mais l'utilisation répétitive du site devient rapidement lourde du fait de devoir réentrer à chaque visite les quelques 20-30 données nécessaires à la simulation.

Je souhaite donc implémenter un système de fichier "profil" stocké sur le PC client contenant ces données, ceci afin que le client puisse les recharger à sa prochaine visite, via un bouton LOAD.

Le problème est que javascript/jquery n'autorise pas le "Save as" directement chez le client ...

La solution utilisée actuellement ne fonctionne que sous Firefox via une page intermédiaire dont les balises contiennent ces fameuses données grâce à data-* . Mais ce n'est pas compatible sur les autres navigateurs récents (je m'en fous des vieux navigateurs)

Je me suis renseigné et apparemment les 2 méthodes les + répandues seraient JSON ou XML, laquelle me conseilleriez-vous pour mon application ? (avec exemple/tutoriel svp)

Merci d'avance.

**beekeep** · 10/07/2013, 15h53

Bonjour,

tu peux utiliser le localStorage tout simplement.

**Masamune56** · 10/07/2013, 18h01

Ok merci de l'info, mais j'ai 2 questions :

Question 1:
Es-t-il possible avec LocalStorage de stocker PLUSIEURS objets "ProfilA {keyA1:valueA1 , keyA2:valueA2 , ... , keyAn:valueAn} , ProfilB {keyB1:valueB1 , keyB2:valueB2 , ... , keyBn:valueBn} , etc..." ?

Question 2:
Comment l'utilisateur fait-il pour retrouver les données d'un profil donné (dont il connait le nom) ? ceci pour pouvoir le charger sur le simulateur, ou pour le partager sur un forum ou à un autre utilisateur.

**SpaceFrog** · 11/07/2013, 08h37

1) chiche essaye ...
localStorage (tout comme cookies) => string

http://jsfiddle.net/snyWJ/1/

2) un array littéral, un json ?
cf l'exemple ci-dessus, toutes les données sont accessibles ...

**Masamune56** · 11/07/2013, 09h53

Ok merci pour la réponse à la question1, si j'adapte le JSfiddle, je pourrait écrire pour un bouton "SAVE PROFILE" une fenêtre modale demandant un nom de profil nécessairement différent de ceux existant déjà dans le localstorage pour donner quelquechose du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
localStorage['Profil1']='{"user":"31321564321654","type":"cesna 130", "heures":150, "altitude":500}'
localStorage['Profil2']='{"user":"2537462776","type":"cesna 120", "heures":200, "altitude":1000}'
...
localStorage['ProfilN']='{"user":"9623182243","type":"cesna 150", "heures":60, "altitude":1500}'

... et du coup la question du nettoyage se pose: comment l'utilisateur peut-il clear son localStorage ? ou du moins supprimer seulement ceux dont il n'a plus besoin)

Pour la question 2 (et par extension ma question ci-dessus) : je pourrais écrire une fenêtre modale affichant une liste des profils existants avec 2 boutons "LOAD" et "DELETE":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
LOAD: window.localStorage.getItem('ProfilSélectionné');
DELETE: window.localStorage.removeItem('ProfilSélectionné');

Dites moi si j'ai bien compris vos réponses, merci.

Ma dernière question 3 : Quels sont les risques pour l'utilisateur de perdre tous ses profils ? un coup de Ccleaner ? Fermer le navigateur ? Le localStorage est-il vraiment permanent ?

**SpaceFrog** · 11/07/2013, 11h20

ça dépend du navigateur, le localStorage est soit géré comme les cookies, soit comme du cache. Mais dans tous les cas il est sujet a effacement lors du nettoyage des fichiers temporaires ou du cache ...

**Masamune56** · 11/07/2013, 12h30

Aïe c dommage... cette solution me semblait sympathique en effet...

Bon... je n'ai pas le choix comme je le "sentait" depuis le début je dois me tourner vers un système de fichiers en local, mais grâce à vos explications je sais pourquoi.

Es-ce que ce code est correct ou y a mieux ?
index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
 	<input type="file" id="Save" />
</body>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){     
 	$('#Save').click(function(e) { 
 		var dataString = /* je construit un string contenant toutes les
					paires id:value à sauvegarder, au format XML */;
		$.ajax({
      			type: "POST",
      			url: "Save.php",
      			data: dataString,
 			success: function() {
    				/* Comment implémenter une Dialogbox "Save as..."
				avec le nom du fichier XML retourné par Save.php ? */}
		});
		return false;
	});
});

Save.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
	if(!empty($_POST['dataString'])){
		$full_path = '...'; // chemin système (local) vers le fichier
		$file_name = basename($full_path);
 
		ini_set('zlib.output_compression', 0);
		$date = gmdate(DATE_RFC1123);
 
		header('Pragma: public');
		header('Cache-Control: must-revalidate, pre-check=0, post-check=0, max-age=0');
 
		header('Content-Tranfer-Encoding: none');
		header('Content-Length: '.filesize($full_path));
		header('Content-MD5: '.base64_encode(md5_file($full_path)));
		header('Content-Type: application/octetstream; name="'.$file_name.'"');
		header('Content-Disposition: attachment; filename="'.$file_name.'"');
 
		header('Date: '.$date);
		header('Expires: '.gmdate(DATE_RFC1123, time()+1));
		header('Last-Modified: '.gmdate(DATE_RFC1123, filemtime($full_path)));
 
		$ProcessedDataString = /* Je me renseignerai pour la syntaxe de traitement
						pour le $_POST dataString au format XML */
 
		file_put_contents('Profile.xml', $ProcessedDataString);
 
		readfile($full_path);
		exit; // nécessaire pour être certain de ne pas envoyer de fichier corrompu
	}
}
?>

Si je lis correctement ce Save.php, j'ai comme l'impression qu'au lieu de retourner le fichier "Profile.xml" vers l’utilisateur, il sauvegarde sur le serveur ou je me trompe ?
Si je ne me trompe pas, que dois-je corriger ?

**SpaceFrog** · 11/07/2013, 12h56

fichier local de sauvegarde ?
javascript n'a pas accès au disque local pour y sauvegarder des fichiers !

**Masamune56** · 11/07/2013, 13h25

Envoyé par SpaceFrog

fichier local de sauvegarde ?
javascript n'a pas accès au disque local pour y sauvegarder des fichiers !

Je sais merci ... c pour ça je vous demande si les codes snippets proposés fonctionnent pour contourner le Same-Domain Policy ?

**SpaceFrog** · 11/07/2013, 13h40

a ton avis si la SOP existe...

**Masamune56** · 11/07/2013, 13h52

Ok je vais reformuler d'une autre manière :

Sur la majorité des sites ayant une section "Download", ou encore les sites de la CAF/PoleEmploi, quel code utilisent-ils générer et produire les fichiers que l'utilisateur télécharge en local ?

**SpaceFrog** · 11/07/2013, 14h07

ils peuvent télécharger un fichier depuis le serveur distant et le sauvergarder sur leur disque local
La aucun souci
mais tu ne peux pas ensuite ré-expoliter le fichier téléchargé dans une page web.
A moins de l'uploader à nouveau sur le serveur ...

**Masamune56** · 11/07/2013, 15h19

Envoyé par SpaceFrog

ils peuvent télécharger un fichier depuis le serveur distant et le sauvegarder sur leur disque local
Là aucun souci

Pour moi si, c un souci car je ne sais pas faire ... enfin j'essaie cf. mon post#7

Envoyé par SpaceFrog

mais tu ne peux pas ensuite ré-exploiter le fichier téléchargé dans une page web.
A moins de l'uploader à nouveau sur le serveur ...

Pour la lecture des données à partir d'un fichier local, je pense pouvoir adapter mon code actuel:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#Load").click(function(e) {
	var profile = $("#Load").get(0).files[0], fr = new FileReader();
	fr.readAsText(profile); /* ou en XML ou JSON selon format ? */
	fr.onprogress = function() {$("#DIVresultat").html("Chargement...")};
	fr.onerror = function() {$("#DIVresultat").html("Oups, une erreur s\'est produite...")};
	fr.onload = function() {
		$("#DIVresultat").html($(fr.result)); /* <div/> invisible en bas du <body> */
		/* Je traite les données importées pour les ré-insérer
			chacune dans leur input dont l'id corresponds. */
		$("#DIVresultat").empty(); /* je vide quand j'ai fini d'importer les données */
		CalculStats(); /* Je lance la simulation avec les stats importées */
	};
});

C'est pas bon ?

**SpaceFrog** · 11/07/2013, 16h13

pour le forcedownlaod du fichier
http://php.developpez.com/faq/langag..._forcedownload

mais après une fois que le client recupère sont fichier il ne sera pas accessible depuis une page web
tu ne peux pas lire un fichier local !!!!!!!!!!!!!!!!!

**Masamune56** · 11/07/2013, 16h55

Merci pour le snippet mais ca n'apporte que des précisions de sécurité que je rajouterai à mon code mais je ne sais toujours pas si je l'ai bien implémenté, comme par exemple c la bonne commande FILE_PUT_CONTENT ?
Au risque de me répéter je ne sais toujours pas quesqui ne va pas dans mon code posté au post7... d'un point de vue purement syntaxique
EDIT: je viens d'éditer le code du Save.php du post#7 mais je ne suis pas sûr du tout de la syntaxe...
je n'ai rien compris à ces headers, en particulier le header de date d'expiration c quoi ?
idem entre les variables $FullPath et $ProcessedDataString, faut-il les concaténer pour le readfile ?

Envoyé par SpaceFrog

mais après une fois que le client récupère son fichier il ne sera pas accessible depuis une page web
tu ne peux pas lire un fichier local !

Ben si je viens de vous donner un snippet qui fonctionne actuellement avec du texte contenant des data-* ... pourquoi ca ne marcherait pas avec un fichier xml ?
je ne comprends pas...
EDIT: voici un exemple de fichier-profil local, chargez le sur mon site vous verrez ... testé sous Firefox, Chrome et IE10

**Masamune56** · 12/07/2013, 01h53

Envoyé par SpaceFrog

pour le forcedownload du fichier
http://php.developpez.com/faq/langag..._forcedownload

J'ai un petit problème: ca ne marche pas quand j'applique ce code "tel quel".
La principale question que je me pose par rapport à ce code est :

" Où je mets mon DataString là-dedans ? "

DataString étant une variable de type texte contenant toutes les données à sauvegarder, générée par $("#SaveButton").click().

Merci.

**SpaceFrog** · 12/07/2013, 10h07

dans le lien donné sur le forcedownlaod ...
les données du fichier envoyées au client sont envoyées à cette ligen là

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

readfile($full_path);

readfile ecrit les données du fichier
a toi de faire l'echo de tes données à cet endroit là

Je viens d'aller voir sur ton site ...
Dans le module de chargement des données tu fais un upload ... donc oui tu recupères bien les données, mais le fichier n'est pas accessible par la page web il est uploadé sur le serveur et c'est le serveur qui recupère les données.
Au passage les popup c'est un peu dépassé ... d'autant plus quand derrière ça balance de la pub ...

**Masamune56** · 12/07/2013, 13h55

Bonjour,

Merci de m'accorder de votre temps.

Pour la pub, oui c nouveau et ca m'agace aussi, c apparu automatiquement depuis 2 semaines et je suspecte le script de compteur de visites que j'avais rajouté il y a 1 mois... mais je n'ai pas de preuves que c bien ce script qui me balance cette pub et non pas une autre portion de code ?
EDIT: ct bien le compteur, je l'ai viré...

Pour les pop-ups, ben vu que je suis amateur j'ai juste fait pareil qu'un logiciel standard qui utilise une pop-up pour "A propos" et les messages d'erreurs, je ne connais pas la nouvelle tendance, en quoi consiste - t - elle ?

Pour l'écriture de profil, comme je n'ai pas d'autre serveur pour tester je me sert -temporairement- du bouton "Rapport" au milieu de la barre de navigation. En bas du body, il y a le formulaire. le hic c que je ne comprends pas lequel "part" en 1er vers le script php: le action="Save.php", ou la requête asynchrone de mon javascript (qui contient le datastring). Je me demande s'il y a vraiment besoin d'un formulaire, un simple input file suffirait non ? (cf. post#7)

Comme je ne connais rien en php, g du mal à savoir si le script Save.php génère correctement le fichier à sauvegarder, avant même de parler de forcedownload. Je pense qu'il s'agit de la ligne :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

echo $FILE = file_put_contents('Profile.html', $_POST['DataString']);

Mais quand j'actualise mon répertoire serveur via Filezilla, je ne vois pas de fichier écrit, RIEN. Donc forcément le script ne risque pas de proposer quoique ce soit à l'utilisateur...

Ensuite, la variable $full_path, le commentaire précise qu'il s'agit du chemin LOCAL mais sous quel point de vue: client ou serveur ? A priori je pensais qu'il s'agit du chemin par défaut sur le PC client donc j'ai laissé tel quel vu que c l'utilisateur lui-même qui choisira où mettre ses profils.
Mais quand je lis votre explication sur le readfile(), ce serait plutôt le contraire et donc devrais-je écrire :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

$full_path = "Saved/".$FILE;

?

Bref, j'ai du mal à comprendre la dynamique des données entre le html (input file), le javascript (ajax DataString) et le php (génération du fichier physique + forcedownload).

EDIT: j'ai changé d'avis concernant le format du fichier à générer: ca restera du texte html, comme ca, je n'aurai rien à adapter sur le code de Load.

**boboss123** · 12/07/2013, 14h04

Salut,

Pourquoi sauvegardes-tu les données chez le client ? ça ne serait pas plus utile des les sauvegarder sur le serveur (au moins les données pourraient etre partagées et mise facilement sur des forums) ?

**Masamune56** · 12/07/2013, 14h20

Envoyé par boboss123

...sur le serveur (au moins les données pourraient etre partagées et mise facilement sur des forums) ?

La 1ere raison est la taille à moyen-long terme:ces fichiers profils semblent peser que quelques ko mais après 4mois de mise en ligne et le compteur de visites que j'ai installé m'indique déjà 4k en moins d'1 mois.
Donc si je suppose que les gens laissent leurs profils trainer sur mon ftp perso free limité à 10Mo, je ferai pas l'année... à moins de nettoyer régulièrement au grand dam des utilisateurs qui râleraient "Y SONT OU MES PROFILS ?!"

Ensuite, si je comprends bien ta suggestion, tu suggère de faire une sorte de cloud ? Par rapport à mon niveau amateur, ca me semble dépasser largement mes compétences, par rapport à une simple fenêtre "Enregistrer sous..." .
A moins que j'ai mal compris ta suggestion, concrètement ?

Système de fichiers "profil" [AJAX]

jQuery

Partager

Partager