Discussion :

[nicdodo]

Bonjour,

Mon poste va certainement sembler bête mais je bloque. Je vais attaquer une formation longue pour devenir développeur web et je me forme tout seul en amont de cette formation sur les technologie javascript et php. Pour ce faire je me fixe des exercices et j'essaye de les réaliser, la pratique me convenant mieux que de la théorie. Cela a pour objectif de m'apprendre à utiliser le mdn ainsi que les méthod essentiels. Je reste sur du javascript pure et n'utilise pas encore la bibliothèque Jquey car j'estime qu'avant de prendre des raccourci il faut d'abord connaitre le chemin. A tord ou à raison j'ai chois cette méthode qui me convient bien pour l'instant

Je me suis donc lancé dans le drag and drop. Jusque la pas de problème mais j'arrive au moment ou je souhaite que mon utilisateur puisse sauvegarder et retrouvé sa page tel qu'il l'avais modélisé. Je ne vais pas cracher tout mon code car j'ai plutôt besoin d'explication pour clarifier ce que je ne comprends pas et qui me bloque.

Voila j'ai deux bloc, une div "dragzone" et une div "dropzone" Dans le div dragzone j'ai un bloc que j'ai nommé dossier :

Code html :

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

1
2
3
4
5
6
<div id = "dragzone">
 
        <div  id = "0" class = "src_file" name = "" value ="" draggable="true" ondragstart="glisser(this,event)">
              <p>fichier</p>
        </div>
</div>

Dans le bloc dropzone j'ai 30 bloc qui serve de réceptacle de drop :

Code html :

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

1
2
3
4
5
6
 <div id = "dropzone" draggable="false">
        <div id = "1" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "2" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
         ......
</div>

A chaque fois que je drag une div fichier dans un bloc drop ça me crée un clone de ce fichier avec un nouvel id incréementer. Donc le premier fichier s'appelera div 1, le deuxieme div 2 etc...

De plus j'ai crée un objet et a chaque fois que je dépose un clone je crée un nouveau objet avec "CreateObject"

Code :

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
33
34
35
36
37
38
39
40
41
var objets = {
type : '',
id : '',
emplacement : '',
name : '',
value : ''    
}
 
function deposer(objet, event) {
    if (objet.className == 'empty'){
 
        if (t.className == 'src_file'){
            objet.appendChild(t);
            t.className = 'droppedfile'
            var zonefile = document.getElementById('dropzone').querySelectorAll('.droppedfile')
            var l_zonefile = zonefile.length
            t.id = l_zonefile
 
            ///// Je crée un nouvel objet //////
            var dossier = Object.create(objets)
            dossier.type = "Dossier"
            dossier.id = t.id
            dossier.emplacement = objet.id
 
            /////// je rajoute l'objet crée dans un tableau ainsi que l'id de cette object////////////
 
            arrayFile.push(dossier)
            arrayFile.push(dossier.id)
 
            // C'est la méthode que j'ai trouvé pour récupérer les élément de l'objet grâce à l'id car 
// si je crée plusieurs objets et même si ils n'ont pas les même propriétés le console.log me marque 
// arrayfile{Object, Object, etc...} du coup avec cette méthode je peux retrouver mon objet grâce à l'id 
// puisque dans le tableau j'ai arrayfile{Object, 1, Object, 2), je n'ai qu'a recherché l'id de l'object - 1 
// pour récuperer toutes les propriété de l'objet. J'imagine que c'est un peu sale et une petite astuce ne 
// serait pas de refus pour rendre cela un peu plus simple :)
 
            var e = arrayFile.indexOf(t.id)
                if (e != -1){
                arrayFile[e-1].emplacement = objet.id
                console.log(arrayFile[e-1])
                }

Donc voila je me retrouve au final avec des object avec des propriété qui corepondent à :

type : dossier
id : id de l'objet correspond a à l'id de la div fichier dans le DOM
emplacement : id de la div ou est stocké mon fichier dans le DOM
name : l'attribut nom de l'objet
value: la valeur de l'objet.

Voila j’espère m’être bien exprimé et que vous avez compris dans l'ensemble mon projet.

Donc maintenant j'en viens à mon problème. Par quel biais stocker les informations des mes objets et comment les récupérer. L'idée c'est que l'utilisateur, une fois son interface créée appuis sur un bouton, et que les données soient stockés dans une base SQL. Mais comme mes objects sont généré dynamiquement je n'ai pas de fichier ou j'ai objet1{], objet2{} etc, il n'y a que la console qui me montre les info et je ne sais pas comment les récupérer.

En gros si l'utilisateur a un truc du genre dans son DOM

Code html :

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
<div id = "dropzone" draggable="false">
        <div id = "1" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "2" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
               <div id="1" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
                <div id="2" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "4" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "5" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
                <div id="3" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "6" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
</div>

Mon code Javascript va généré dans la console un tableau : Array [ Object, "1", Object, "2", Object, "3" ]

Avec pour Array[0] :
type : dossier,
id : 1,
emplacement : 2,
name : '',
value : ''
}
et ainsi de suite pour l'objet 2 et 3

Comment je peux faire pour enregistrer ses informations, les stockés et faire en sorte que l'utilisateur récupère le DOM tel qu'il l'a laissé?

J'espere avoir été clair dans mes explications, j'ai vraiment besoin d'un coup de main, comme vous le voyez j'ai pas mal bosser dessus, ce n'est pas par faignantise j'ai juste du mal avec certains concept, la meilleur méthode à employé, la création d'un fichier Json en fonction de données dynamique, la relation avec la requête AJAX ET PHP et la récupération de donnée. J'aimerais bien clarifier tout ça dans ma tète pour pouvoir avancé.

Merci beaucoup d'avance

[badaze]

Si j'ai bien compris, tu veux sauvegarder ce qui se trouve dans le DIV "dropzone".
Il y a beaucoup plus facile que de sauvegarder le DOM on peut sauvegarder le HTML.

L'exemple ci-dessous montre comment sauvegarder le HTML présent dans le DIV "dropzone" dans un fichier nommé resultat.txt. Mais aussi de charger le code HTML sauvegardé dans le DIV "dropzone".
J'ai choisi un fichier car le but est de montrer comment envoyer les données pour sauvegarde et comment les récupérer. Après qu'on sauvegarde dans un fichier ou dans une table ce n'est pas ça l'important.

Code :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
 function sauve() {
 
        $.post("test9096b.php",
        {
                result: document.getElementById('dropzone').innerHTML
        });
		document.getElementById('dropzone').innerHTML = 'Appuyer sur le bouton Charge !!!';
		document.getElementById('load').style.display = 'inline';
		document.getElementById('save').style.display = 'none';
 
 }
 
 function charge() {
		res = Math.random();
		$.get('test9096c.php?r='+res, function(data2) {
		$('#dropzone').html(data2);		
		});	 
		document.getElementById('load').style.display = 'none';
		document.getElementById('save').style.display = 'inline';	   
 }
 
</script>
 
 
<div id = "dropzone" draggable="false">
        <div id = "1" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "2" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
               <div id="1" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
                <div id="2" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "4" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "5" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
                <div id="3" class="droppedfile" name="" value="" draggable="true" ondragstart="glisser(this,event)">
                     <p>fichier</p>
               </div>
        </div>
        <div id = "6" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
</div>
<input type="button" id="save" value="Sauve" onclick="sauve()"/>
<input type="button" id="load" value="Charge" onclick="charge()" style="display:none"/>

fichier test9096b.php : ici on sauvegarde dans un fichier mais tu pourrais sauvegarder dans une table.

Code php :

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

1
2
3
<?php
file_put_contents("resultat.txt",$_POST['result']);
die();

fichier test9096c.php : ici c'est le print qui permet de renvoyer le contenu du fichier resultat.txt qui est mis dans data2. Si tu sauvegardes dans une table il suffit de lire la table et de faire un print du champ pour que ça fonctionne.

Code php :

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

1
2
3
<?php
print file_get_contents("resultat.txt");
die();

[nicdodo]

Merci beaucoup pour la réponse je vais essayé ça par contre je ne comprends pas pourquoi on utilise math.random?

Même si cette solution marche je ne pourrai pas mettre résolu car mon objectif sur cet exercice est vraiment de comprendre le json. Franchement je n'y comprends rien et j'ai plus besoin d'une sorte de cours orienté très débutant qu'une solution toute faite.

J'ai vraiment ce problème avec le Json et son fonctionnement et aucun tuto que j'ai lu n'arrive à me déclencher le déclic.

Dans mon projet si je crée des objets en js c'est parce que l'interface créé par l'utilisateur doit être par la suite utilisable en mode API c'est à dire que chaque div qui sera intégré à "dropzone" sera cliquable et aura une valeur liée.

Du coup j'ai 2 choix, soit créer des attribut dans la div par exemple

Code html :

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

<div = '1'  class = 'droppedfile'  name = 'bonbon' value = '4' ></div>

du coup effectivement pas besoin de créer de protype en Js lors du paramétrage, j'enregistre le code HTML brut au format text et lorsque l'utilisateur load sur la page alors le code php envoie le text puis est converti en HTML. Ensuite je boucle sur chaque class droppedfile et je récupère l'id, le name la value, que j'applique à un objet et que je stock dans un tableau.

Soit je crée les objets des le paramétrages et je les stock dans un tableau et ensuite ..... je suis bloqué pour enregistrerais !! c'est cette solution que je veux apprendre je vous mets mon code en pièce jointe : d&d.7z peut être que vous comprendrez mieux d'un, mon niveau très débutant en voyant comment j'ai écrit ça (j'en suis au projet rien n'est factorisé tout est procédural) et 2, mon idée et ou je veux en venir.

PS : il n'y'a que le bouton "fichier" qui marche pour le moment

[badaze]

Math.random est une astuce qui fait qu'à chaque fois l'url change pour faire en sorte que le navigateur n'appelle pas une page en cache.

[nicdodo]

C'est bon j'ai enfin compris merci beaucoup en fait c'était tout bête. J'ai pris votre solution sans le charge.

En gros je pars sur ça

Code :

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

1
2
3
4
5
6
 
 <div id = "dropzone" draggable="false">
 
       <?php include 'modif.txt' ; ?>
 
</div>

j'ai fait un bouton enregistrer et avec le file put contents je sauvegarde le nouveau html dans le fichier txt. Bon niveau sécurité va falloir que je fasse quelque chose j'imagine mais pour l'instant je vais me satisfaire de cette super solution. Merci encore