Planning avec zone modifiable

Version imprimable

Bonjour

Hier matin, j'ai eu un message URGENT pour un planning en ligne avec la possibilité pour des membres d'une équipe d'insérer des données et pour cela, j'avais un délai de "4 heures" :D mouahah, ils sont mignons....

Monter le tableau ne m'a pas posé de problème, ni faire la zone d'administration pour l'admin. Mais le truc nouveau pour moi, était qu'une case pouvait être éditable par un membre et qu'une fois son info entrée, cela s'enregistrait dans la BDD.

J'ai essayé tout ce que j'ai pu trouvé sur le web : contenteditable, innerHTML, XMLHttpRequest... sans succès.

Je ne connais rien à Javascript et des choses m'échappent ; je ne suis plus certaine non plus de la logique de mon code... je crois que j'ai fait une belle tambouille.

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<?php
include('connexion_sql.php');
?>
 
 
<?php include("haut.php"); ?>
    <header>
        <h1>PLANNING</h1>
    </header>
 
 
 
 
<section id="centre">
    <div id="corps"><a id="ancrecontenu"></a>
 
        <table id="tableau">
            <caption>Planning de</caption>
 
            <thead>
                <tr>
                    <th class="cacher" scope="col" rowspan="2">ID_PC</th>
                    <th scope="col" rowspan="2">Da</th>
                    <th scope="col" rowspan="2">Po</th>
                    <th scope="col" colspan="2">H</th>
                    <th scope="col" rowspan="2">Ve</th>
                    <th scope="col" rowspan="2">CHE</th>
                    <th scope="col" rowspan="2">CHA</th>
                    <th scope="col" colspan="2">S</th>
                </tr>
                <tr>
                    <th scope="col" class="nogras">h_d</th>
                    <th scope="col" class="nogras">h_f</th>
 
                    <th scope="col" class="nogras">s_1</th>
                    <th scope="col" class="nogras">s_2</th>
                </tr>            
            </thead>
 
            <tfoot></tfoot>
 
            <tbody>
                <?php
                $req = $bdd->query('SELECT id_pc, da, po, h_d, h_f, ve, che, cha, s_1, s_2
                                    FROM planning
                                    ORDER BY date')
                                    or die(print_r($bdd->errorInfo()));
 
                define ('TAB', '     ') ;
                while ($donnees = $req->fetch()) {
                    extract ($donnees);
 
                    $id_pc=$donnees["id_pc"];
                    $date=$donnees["da"];
                    $poste=$donnees["po"];
                    $heure_d=$donnees["h_d"];
                    $heure_f=$donnees["h_f"];
                    $vehicule=$donnees["ve"];
                    $chef=$donnees["che"];
                    $chauffeur=$donnees["cha"];
                    $secouriste_1=$donnees["s_1"];
                    $secouriste_2=$donnees["s_2"];
 
 
 
                    echo PHP_EOL . '<tr>';
                    echo PHP_EOL . TAB . '<td class="cacher">' .$id_pc. '</td>';
                    echo PHP_EOL . TAB . '<td scope="row">' .$da. '</td>';
                    echo PHP_EOL . TAB . '<td class="nowrap">' .stripslashes($po). '</td>';
                    echo PHP_EOL . TAB . '<td>' .$h_d. '</td>';
                    echo PHP_EOL . TAB . '<td>' .$h_f. '</td>';
                    echo PHP_EOL . TAB . '<td>' .$ve. '</td>';
                    echo PHP_EOL . TAB . '<td>' .stripslashes($che). '</td>';
                    echo PHP_EOL . TAB . '<td contenteditable="true">' .stripslashes($cha). '</td>';
                    echo PHP_EOL . TAB . '<td contenteditable="true">' .stripslashes($s_1). '</td>';
                    echo PHP_EOL . TAB . '<td contenteditable="true">' .stripslashes($s_2). '</td>';
                    echo PHP_EOL . TAB . "<td><button onclick='modifier(this.parentElement)'>ok</button></td>" ;
                    echo PHP_EOL . '</tr>';
                }
                ?>
                <script type="text/javascript">
                <!--
                function modifier(X) {
                    array = X.getElementsByTagName('TD');
                    xhr = new XMLHttpRequest() ;
                    xhr.open("POST", "maj.php", false) ;
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") ;
                    chaine  = 'id_pc=' + array[1].innerHTML
                            + '&da='  + array[2].innerHTML
                            + '&po=' + array[3].innerHTML
                            + '&h_d='   + array[4].innerHTML
                            + '&h_f='  + array[5].innerHTML
                            + '&ve='  + array[6].innerHTML
                            + '&che='  + array[7].innerHTML
                            + '&cha='  + array[8].innerHTML
                            + '&s_1='  + array[9].innerHTML
                            + '&s_2='  + array[10].innerHTML;
                    xhr.send(chaine);
                }
                -->
                </script>
 
                <?php
                extract($_POST) ;
                $req2 = $bdd->query ("UPDATE planning
                    SET da='$da', po='$po', h_d='$h_d', h_f='$h_f', ve='$ve', che='$che', cha='$cha', s_1='$s_1', s_2='$s_2' WHERE id_pc='$id_pc'") or die(print_r($bdd->errorInfo()));
 
                ?>
            </tbody>
        </table>
 
    </div>
</section>
 
 
<footer id="copyright"><?php include("copyright.php"); ?></footer>
 
<?php include("bas.php"); ?>

Ce matin, j'ai trouvé cela : https://www.webucator.com/tutorial/l...e.cfm#tutorial mais je ne connais pas AJAX .

Il n'y a rien de pire que de chercher à "bidouiller" quand tu ne maîtrises pas certains langages, la perte de temps et d'énergie est énorme :(

Quelqu'un peut/veut-il me dépatouiller svp ? C'est pour une bonne cause :)

Merci

16/09/2016, 00h52
sabotage

C'est bien de l'Ajax qu'il te faut.
Ta requête POST déclenché par l'action onclick va arriver sur le script maj.php qui doit faire la mise à jour de la base données.

Par contre, n'utilise pas extract() en PHP et utilise une requête préparée avec des paramètres pour la sécurité.
16/09/2016, 07h27
Marie08

Oh merci Sabotage de ta réponse, avant toi, c'était le vide sidéral :D

Citation:

C'est bien de l'Ajax qu'il te faut.

Il faudra bien que je m'y mette un jour... Mais dans le code que je t'ai proposé, c'est du Javascript : c'est grave ?

Citation:

Par contre, n'utilise pas extract() en PHP et utilise une requête préparée avec des paramètres pour la sécurité.

Ok, je vais tester ça. Après, ça fonctionnera ? Rien ne t'a choqué dans le code ?

Merci
16/09/2016, 10h01
sabotage

Le "J" de Ajax c'est "Javascript".

Sinon utilise htmlspecialchars() et non stripslashes() : tes données en base ne sont pas censées avoir des slash en trop. Si elles en ont, il faut corriger à la source.

Utilise plutôt les exceptions PDO que des or die().

Bonjour Sabotage,

Finalement, hier après une micro-sieste, j'ai opté pour des formulaire dans mon tableau et ça donne ceci :

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
 
<table id="tableau">
			<caption>Planning</caption>
 
			<thead>
				<tr>
					<th scope="col" rowspan="2">DA</th>
					<th scope="col" rowspan="2">PO</th>
					<th scope="col" colspan="2">HE</th>
					<th scope="col" rowspan="2">VE</th>
					<th scope="col" rowspan="2">CHE</th>
					<th scope="col" rowspan="2">CHA</th>
					<th scope="col" colspan="2">SEC</th>
				</tr>
				<tr>
				<th scope="col" class="nogras">heure_d</th>
				<th scope="col" class="nogras">heure_f</th>
 
				<th scope="col" class="nogras">s_1</th>
				<th scope="col" class="nogras">s_2</th>
			</tr>
 
			</thead>
 
			<tfoot>
			</tfoot>
 
			<tbody>
				<?php
				$req = $bdd->query('SELECT id_pc, da, po, heure_d, heure_f, ve, che, cha, s_1, s_2 
									FROM pc_planning
									ORDER BY date') 
									or die(print_r($bdd->errorInfo()));
 
				while ($donnees = $req->fetch()) {
					echo '
					<form id="tableau" action="maj.php" method="post">
					<tr>
						<td class="cacher"><input type="hidden" name="id_pc" value="' .$donnees['id_pc']. '" /></td>
						<td scope="row"><input type="text" name="da" id="da" value="' .stripslashes($donnees['da']). '" readonly="readonly" /></td>
						<td><input type="text" name="po" id="po" value="' .stripslashes($donnees['po']). '" readonly="readonly" /></td>
						<td><input type="text" name="heure_d" id="heure_d" value="' .stripslashes($donnees['heure_d']). '" readonly="readonly" /></td>
						<td><input type="text" name="heure_f" id="heure_f" value="' .stripslashes($donnees['heure_f']). '" readonly="readonly" /></td>
						<td><input type="text" name="ve" id="ve" value="' .stripslashes($donnees['ve']). '" readonly="readonly" /></td>
						<td><input type="text" name="che" id="che" value="' .stripslashes($donnees['che']). '" readonly="readonly" /></td>
						<td><input type="text" name="cha" id="cha" value="' .stripslashes($donnees['cha']). '" /></td>
						<td><input type="text" name="s_1" id="s_1" value="' .stripslashes($donnees['s_1']). '" /></td>
						<td><input type="text" name="s_2" id="s_2" value="' .stripslashes($donnees['s_2']). '" /></td>
						<td><input class="bouton" type="submit" name="submit" id="submit" value="ok" /></td>
					</tr>
					</form>';
				}
				?>
			</tbody>
		</table>

Le formulaire est envoyé sur une page de traitement, maj.php, qui traite la ligne (tr) modifiée. Pour que cela soit invisible au membre de l'équipe, j'y ai placé une redirection de sorte qu'il ne voit même pas la page de traitement, c'est nickel, transparent, le bonheur quoi.

Voilà, cela m'a pris 5 minutes alors que j'ai perdu 3 jours à tenter de bidouiller du javascript et consort :P Je prends l'expérience comme un avertissement et vais me mettre à apprendre Javascript, Java, JQuery et tutti-quanti rapidement...

En espérant que ce code dépatouille quelqu'un d'autre :D

Merci Sabotage :)