Planning avec zone modifiable

**Marie08** · 15/09/2016, 13h40

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"

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 :

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
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

**sabotage** · 15/09/2016, 23h52

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é.

**Marie08** · 16/09/2016, 06h27

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

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 ?

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

**sabotage** · 16/09/2016, 09h01

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().

**Marie08** · 17/09/2016, 13h24

Bonjour Sabotage,

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

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
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

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

Merci Sabotage

Planning avec zone modifiable [PHP 5.0]

Langage PHP

Discussions similaires

Partager

Partager