Quelques explications sur le format Json et le traitement des données en AJAX et PHP
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:
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:
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:
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:
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
