Mise à jour d'un tableau via BDD suite à un drag and drop

Version imprimable

Bonjour à tous,

Je viens vers vous car je sèche complètement. Pour vous expliquer :

J'ai repris un script de tableau en drag and drop. Je parviens à enregistrer les positions en BDD après avoir traiter les données au format JSON.
Voila un exemple de ce que je récupère avant l'entrée en base

Id=d3c0 Row=2 Cell=2
Id=d5c0 Row=4 Cell=2
Id=d7c0 Row=4 Cell=3

Dans la BDD je stocke les données de cette manière : id_data(clé primaire), id, row, cell.

Je voudrais pouvoir remplir le tableau dynamiquement en faisant appel aux données contenues dans la base. Le problème est que je ne sais pas comment me servir de mes données row et cell pour remplir les bonnes cellules. Est-ce que quelqu'un a une petite idée ?

Voila le code du tableau :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div id="redips-drag">
	<table id="table1">
		<colgroup><col width="200"/><col width="200"/><col width="200"/><col width="200"/></colgroup>
		<tr>
			<td class="redips-mark">Jour</td>
			<td class="redips-mark">Date</td>
			<td class="redips-mark">Matin</td>
			<td class="redips-mark">Arpès-Midi</td>
		</tr>
		<tr style="background-color: #eee">
			<td class="redips-mark"></td>
			<td class="redips-mark"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td class="redips-mark"></td>
			<td class="redips-mark"></td>
			<td></td>
			<td></td>
		</tr>
		<tr style="background-color: #eee">
			<td class="redips-mark"></td>
			<td class="redips-mark"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td class="redips-mark"></td>
			<td class="redips-mark"></td>
			<td></td>
			<td></td>
		</tr>
		<tr style="background-color: #eee">
			<td class="redips-mark"></td>
			<td class="redips-mark"></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<table id="table3">
		<colgroup><col width="200"/><col width="200"/><col width="200"/></colgroup>
		<tr style="background-color: #eee">
			<td id="message" class="redips-mark" title="You can not drop here">Table3</td>
			<td><div id="d1" class="redips-drag t3 redips-clone" title="infinite cloning">Thierry Zobel</div></td>
			<td><div id="d2" class="redips-drag t3 redips-clone" title="infinite cloning">Agathe Nadimi</div></td>
		</tr>
		<tr>
			<td><div id="d3" class="redips-drag t3 redips-clone" title="infinite cloning">Philippe Maudieu</div></td>
			<td><div id="d4" class="redips-drag t3 redips-clone" title="infinite cloning">Thierry Delbasse</div></td>
			<td><div id="d5" class="redips-drag t3 redips-clone" title="infinite cloning">F. Micheak</div></td>
		</tr>
		<tr>
			<td><div id="d6" class="redips-drag t3 redips-clone" title="infinite cloning">Fabrice Laviec</div></td>
			<td><div id="d7" class="redips-drag t3 redips-clone" title="infinite cloning">Didier Leduc</div></td>
			<td><div id="d8" class="redips-drag t3 redips-clone" title="infinite cloning">Frédérique De Boissieu</div></td>
		</tr>
		<tr style="background-color: #eee">
			<td><div id="d9" class="redips-drag t3 redips-clone" title="infinite cloning">Julien Marfisi</div></td>
			<td><div id="d10" class="redips-drag t3 redips-clone" title="infinite cloning">Dominique Beaulieu</div></td>
			<td class="redips-trash" title="Trash">Trash</td>
		</tr>
	</table>

Merci

Il faut :
-classer tes données provenant de la base comme un tableau
- construire ton tableau HTML dynamiquement avec deux boucles imbriquées ligne, colonne.

Code:

1
2
3
4
5
6
7
8
9
10
11
while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
    $data[$row['row']][$row['cell']] = $row['id'];
}
for ($ligne = 0; $ligne < 5; $ligne++) {
    echo '<tr>';
    for ($colonne = 0; $colonne < 4; $colonne++) {
          $valeur = isset($data[$ligne][$colonne]) ? $data[$ligne][$colonne] : '';
          echo '<td>' . $valeur . '</td>';
    }
    echo '</tr>';
}

04/06/2015, 09h35
gat91200

Merci pour ta réponse sabotage.

Ce que je ne comprends pas c'est le $sth. Je sais que cela veut dire Statement Handle mais je ne vois pas son utilité. Il est vrai que je n'ai jamais utilisé PDO donc si quelqu'un peut juste m'expliquer la première ligne ca serait top.

Après si je comprends bien le $data correspond au résultat de ma requête, c'est bien ca ? Dans ce cas pourquoi ne fait on pas un fetch_assoc sur le $data ?

Merci à vous.
04/06/2015, 10h16
Celira

Normalement, avant le code de sabotage, il ya une connexion à la base de donnée (via PDO), puis la construction et l'exécution d'une requête préparée.

Ce que fait le code de sab', c'est récupérer les données de la requête (via $sth->fetch) et les arranger dans un tableau indexé selon les données "row" et "cell". Ensuite, on parcourt ce tableau pour construire l'affichage.
04/06/2015, 10h38
sabotage
Si tu utilises la vieille extension mysql, c'est la même chose que
Code:

1 2 3 while ($row = mysql_fetch_assoc($result)) { $data[$row['row']][$row['cell']] = $row['id']; }
Je te conseille de te mettre à PDO, tu vois c'est très semblable dans l'écriture.
04/06/2015, 10h40
gat91200

Bonjour Celira,

Pas de soucis pour la connexion à la BDD et la requête

C'est le $sth et le $data qui me posaient problème. Mais je viens de me rendre compte qu'en fait on définit la variable $data, je ne l'avais pas vu tout de suite.
Je vais tester tout ca et je reviens vers vous.

Par contre est ce que quelqu'un pourrait me traduire la ligne avec le $data ou me dire si j'ai bien compris svp ?
--> Voila ce que je comprend : j'indique que je veux stocker dans $data la valeur des champs row et cell qui correspondent au bon id.
04/06/2015, 10h57
Celira

Citation:

Envoyé par gat91200

--> Voila ce que je comprend : j'indique que je veux stocker dans $data la valeur des champs row et cell qui correspondent au bon id.

C'est ça, même si moi, je l'aurais formulé dans l'autre sens : on indique quel id correspond à quel couple row/cell.
04/06/2015, 11h27
gat91200

Me revoila.

Avec toujours quelques petits soucis malheureusement.

Voila le lien de mon planing en drag and drop: http://www.studio-tennis.fr/test/RED...le01/index.php
Pour tester placez les élements dans le tableau, cliquez sur save au format JSON et après réactualisez la page ;)

Lorsque je place mes items dans le planing et que je sauvegarde tout va bien tout est stocké.

En utilisant le code de sabotage j'arrive a ressortir certaines données de la BDD mais pas toutes j'ai l'impression qu'il se limite à 3.
Comment faire pour qu'il me ressorte tous les résultats sachant que ma requête actuelle est SELECT * FROM drag

Autre problème comment faire pour que les éléments se replacent dans les bonnes cellules ?
04/06/2015, 12h02
sabotage

C'est le code qu'il faut nous montrer.

oups désolé. voila pour le php/html :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content with JavaScript"/>
		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		<script type="text/javascript" src="../redips-drag-min.js"></script>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<!-- tables inside this DIV could have draggable content -->
		<div id="redips-drag">
			<table id="table1">
				<colgroup><col width="200"/><col width="200"/><col width="200"/><col width="200"/></colgroup>
				<tr>
					<td class="redips-mark">Jour</td>
					<td class="redips-mark">Date</td>
					<td class="redips-mark">Matin</td>
					<td class="redips-mark">Arpès-Midi</td>
				</tr>
				<tr style="background-color: #eee">
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
				<tr style="background-color: #eee">
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
				<tr style="background-color: #eee">
					<td class="redips-mark"></td>
					<td class="redips-mark"></td>
					<td></td>
					<td></td>
				</tr>
			</table>
			<table id="table3">
				<colgroup><col width="200"/><col width="200"/><col width="200"/></colgroup>
				<tr style="background-color: #eee">
					<td id="message" class="redips-mark" title="You can not drop here">Table3</td>
					<td><div id="d1" class="redips-drag t3 redips-clone" title="infinite cloning">Thierry Zobel</div></td>
					<td><div id="d2" class="redips-drag t3 redips-clone" title="infinite cloning">Agathe Nadimi</div></td>
				</tr>
				<tr>
					<td><div id="d3" class="redips-drag t3 redips-clone" title="infinite cloning">Philippe Maudieu</div></td>
					<td><div id="d4" class="redips-drag t3 redips-clone" title="infinite cloning">Thierry Delbasse</div></td>
					<td><div id="d5" class="redips-drag t3 redips-clone" title="infinite cloning">F. Micheak</div></td>
				</tr>
				<tr>
					<td><div id="d6" class="redips-drag t3 redips-clone" title="infinite cloning">Fabrice Laviec</div></td>
					<td><div id="d7" class="redips-drag t3 redips-clone" title="infinite cloning">Didier Leduc</div></td>
					<td><div id="d8" class="redips-drag t3 redips-clone" title="infinite cloning">Frédérique De Boissieu</div></td>
				</tr>
				<tr style="background-color: #eee">
					<td><div id="d9" class="redips-drag t3 redips-clone" title="infinite cloning">Julien Marfisi</div></td>
					<td><div id="d10" class="redips-drag t3 redips-clone" title="infinite cloning">Dominique Beaulieu</div></td>
					<td class="redips-trash" title="Trash">Trash</td>
				</tr>
			</table>
			<div><input type="button" value="Save1" class="button" onclick="save('plain')" title="Send content to the server (it will only show accepted parameters)"/><span class="message_line">Save content of the first table (plain query string)</span></div>
			<div><input type="button" value="Save2" class="button" onclick="save('json')" title="Send content to the server (it will only show accepted parameters)"/><span class="message_line">Save content of the first table (JSON format)</span></div>	
		</div>
 
		<?php
			$user = '***';
			$pass = '***';
			$dbh = new PDO('mysql:host=***;dbname=***', $user, $pass);
			$sth = $dbh->prepare("SELECT * FROM drag");
			$sth->execute();
 
			while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
			    $data[$row['row']][$row['cell']] = $row['id'];
			}
			for ($ligne = 0; $ligne < 5; $ligne++) {
			    echo '<tr>';
			    for ($colonne = 0; $colonne < 4; $colonne++) {
			          $valeur = isset($data[$ligne][$colonne]) ? $data[$ligne][$colonne] : '';
			          echo '<td>' . $valeur . '</td>';
			    }
			    echo '</tr>';
			}
		?>
	</body>
</html>

Mon code remplace le tableau écrit actuellement à la main ligne 23-52 ; il faut juste ajouter les styles CSS.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
for ($ligne = 1; $ligne < 6; $ligne++) {
    ?><tr style="background-color: #eee">
             <td class="redips-mark"></td>
	     <td class="redips-mark"></td>
    <?php
    for ($colonne = 2; $colonne < 4; $colonne++) {
          $valeur = isset($data[$ligne][$colonne]) ? $data[$ligne][$colonne] : '';
          echo '<td>' . $valeur . '</td>';
    }
    ?></tr><?php
}

04/06/2015, 12h39
gat91200

Merci beaucoup pour votre aide. La solution était à ma portée mais je cherchais un autre moyen et je commençais à me faire des nœuds au cerveau.

Encore merci et bonne journée à vous.