Sauvegarde de données

Version imprimable

Bonjour à tous,

J'ai un problème de sauvegarde côté PHP d'une partie de mes éléments qui ont une variable commune. Je souhaiterais modifier un titre, une image, un lien et son titre et enregistrer la modification en bd dans ma table qui a la structure suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
/ Structure de la table `newsletter`
CREATE TABLE IF NOT EXISTS `newsletter` (
  `newsletter_id` int(11) NOT NULL AUTO_INCREMENT,
  `url_lien` varchar(255) NOT NULL,
  `titre_url_lien` varchar(255) NOT NULL,
  `titre` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `image` varchar(255) NOT NULL,
  PRIMARY KEY (`newsletter_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
// Contenu de la table `newsletter`
INSERT INTO `newsletter` (`newsletter_id`, `url_lien`, `titre_url_lien`, `titre`, `description`, `image`) VALUES
(1, 'http://link-j-en-profite', 'J''en profite', 'Item 1', 'Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.', 'image_01.jpg'),
(2, 'http://link-contact', 'Contact', 'Item 2', 'Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.', 'image_02.jpg'),
(3, 'http://link-a-propos', 'A propos', 'Item 3', 'Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.', 'image_03.jpg');

Le code HTML est le suivant :

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
 
<div>
  <h4 class="row-edit" data-type="title" data-id="<?=$row['newsletter_id']; ?>"><?=$row['titre'];?></h4>
  <p class="row-edit" data-type="image" data-id="<?=$row['newsletter_id']; ?>"><img src="<?=$row['image'];?>"></p>
  <p class="row-edit" data-type="text" data-id="<?=$row['newsletter_id']; ?>><?=$row['description'];?></p>
  <div ><a href="<?=$row1['url_lien']; ?>" class="row-edit" data-type="link" data-id="<?=$row['newsletter_id']; ?>"><?= $row['titre_url_lien']; ?></a></div>
</div>
<!-- Modale -->
<div class="edit" id="edit-title">
  <div class="edit-box" style="">
    <div class="edit-box-title">Edit Link</div>
    <div class="edit-box-content">
      <div class="edit-box-content-text">Title</div>
      <div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input title"/></div>
      <div class="edit-box-content-text">URL:<span>(full address including    http://)</span></div>
 
      <div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input url"/></div>
    </div>
    <div class="edit-box-buttons">
      <div class="edit-box-buttons-save">Save</div>
      <div class="edit-box-buttons-cancel">Cancel</div>
    </div>
  </div>
</div>
<div class="edit" id="edit-link">
  <div class="edit-box" style="">
    <div class="edit-box-title">Edit Link</div>
    <div class="edit-box-content">
      <div class="edit-box-content-text">Title</div>
      <div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input title"/></div>
      <div class="edit-box-content-text">URL:<span>(full address including    http://)</span></div>
 
      <div class="edit-box-content-field"><input type="text" class="edit-box-content-field-input url"/></div>
    </div>
    <div class="edit-box-buttons">
      <div class="edit-box-buttons-save">Save</div>
      <div class="edit-box-buttons-cancel">Cancel</div>
    </div>
  </div>
</div>
<!-- Fin Modale -->

Le code JS :

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
 
console.clear();
(function hover_edit(){
    var big_parent;  
  $(".row-edit").hover(
    function() {
        $(this).append('<span class="row-edit-hover"><i class="fa fa-pencil" style="line-height:30px;"></i></span>');
    }, 
    function() {
        $(this).children(".row-edit-hover").remove();
    }
  )
  $("a").click(function(e) {e.preventDefault()});
  $("body").on('click', ".row-edit-hover i", function(e) {
        e.preventDefault();
        big_parent = $(this).parent().parent();
 
       //edit title
       if(big_parent.attr("data-type")=='title'){
           $("#edit-title .title").val(big_parent.text());
           $("#edit-title").fadeIn(500);
           $("#edit-title .edit-box").slideDown(500);
       }    
       //edit link
       if(big_parent.attr("type")=='link'){
          $("#edit-link .title").val(big_parent.text());
          $("#edit-link .url").val(big_parent.attr("href"));
          $("#edit-link").fadeIn(500);
          $("#edit-link .edit-box").slideDown(500);
       }
       $(".edit-box-buttons-save").click(function() {
           var toSave = {};
           $(this).parents('.edit').fadeOut(500).children().slideUp(500);
           [#red]big_parent.text($("#edit-title .title").val());[/#]
           big_parent.text($("#edit-text .text").val());
           big_parent.attr("href",$("#edit-link .url").val());
           big_parent.attr("src",$("#edit-image .image").val());
           toSave = {
                'id'   : big_parent.data('id'),
                'url'  : big_parent.attr('href'),
                'img' : big_parent.attr('src'),
               [#darkred] 'text' : big_parent.text()[/#]
           }
           console.info(toSave);
           $.post("page-update.php", toSave, function(response) {
                if(response.status) {
                    $("#msg").removeClass('danger');
                    $("#msg").addClass('success').html(response.msg);
                } else {
                    $("#msg").removeClass('success');
                    $("#msg").addClass('danger').html(response.msg);
                }
             }, 'json');
        });
    });
})();

Le code PHP :

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
 
// page-update.php
function update_newsletter($url,$img,$text,$id){
  $sql = "UPDATE newsletter SET url_lien = :url, titre_url_lien = :text, titre = :text, description = :text,  image = :img WHERE newsletter_id = :id";
  $datas = array(":url"=>$url, ":img"=>$img, ":text"=>$text, ":id"=>$id);
  return queryExec($sql,$datas);
}
function queryExec($sql,$datas){
 global $db;
 try {
    $req = $db->prepare($sql);
    $res = $req->execute($datas);
    $result = array(
           'status'=> $res,
           'msg'=>'Saisie enregistrée avec success !',
           'debug'=>array("requete"=>$sql, "datas"=>$datas)
          );
  } catch (Exception $e) {
    //erreur dans la requete
    $result = array(
           'status'=>false,
           'msg'=>'Erreur ! '.$e->getMessage(),
           'debug'=>array("requete"=>$sql, "datas"=>$datas)
     );
  } 
   return $result;
}
if($id){
   $msg = update_newsletter($url,$img,$text,$id); 
} else {
  //pas d'ID
  $msg = array( 'status'=>false,
       'msg'=>"Erreur ! ID de ligne vide !",
       'debug'=>$_POST
   );
}      
// send data as json format
echo json_encode($msg);

J'ai une même variable texte pour le titre et le titre du lien : $text = isset($_POST['text']) ? $_POST['text'] : "";. Après sauvegarde la console m'affiche ceci :
{"status":true,"msg":"Saisie enregistrée avec success !","debug":{"requete":"UPDATE newsletter
SET titre = :text WHERE newsletter_id = :id","datas":{":text":"",":id":"11"}}}. Pourtant je récupère bien mon élément dans la popup mais il enregistre un champ vide. Et c'est idem pour le titre du lien. Merci pour votre aide.
Cordialement,

24/07/2017, 13h58
gene69
quelque part dans ton code tu dois avoir un "étage" qui sécurise les valeurs présente dans GET et POST. idéalement avec filter_input.

A ta place de mettrait des var_dump en entree et sortie de cet étage pour voir ce que javascript envoie effectivement au serveur.
Code:

1 2 $text = isset($_POST['text']) ? $_POST['text'] : "";
ça te protege d'aucune injection de balises et de script :(
24/07/2017, 14h22
mOscar007
Re,

@gene69 merci d'avoir pris le temps de me répondre.
Un var_dump($text) me renvoi ceci :
string '' (length=0)
{"status":true,"msg":"Saisie enregistrée avec success !","debug":{"requete":"UPDATE newsletter SET titre = :text WHERE newsletter_id = :id","datas":{":text":"",":id":"11"}}}

Je pense que le problème est au niveau de la récupération de la variable pour la passer en $_POST. En javascript je récupère les valeurs de mes variables textes, le titre, le titre du lien et la description de cette façon :
Code:

1 2 3 big_parent.text($("#sim-edit-title .title").val()); big_parent.text($("#sim-edit-text .text").val());
Et ensuite dans mon tableau :
Code:

1 2 3 4 5 6 toSave = { .......... 'text' : big_parent.text() };
Est-ce que ce n'est pas dû au fait la fonction text() ne sait pas quel contenu récupérer ? Puisqu'elle est utilisée pour plusieurs élément, du coup elle met le champ vide. Par exemple : pour l'image et le lien la sauvegarde marche très bien. Pour la variable je l'ai échapée :

Code:

$text = isset($_POST['text']) ? htmlspecialchars($_POST['text']) : "";
24/07/2017, 22h34
gene69

salut

bon pour moi htmlspecialchar n'est pas adapté à une époque ou php prépare autre chose que du html (on prepare du json ou du pdf qui ne s'échappe pas tout a fait pareil). pour moi il ne faudrait pas hésiter a faire le travail en 2 fois. la premiere enlever les caracteres nuisibles binairement et tout ce qu'on ne veux jamais voir (par exemple des ../../../ dans des chemins ou valider que le mail saisi est bien un mail. Apres tu refais une passe spécifique quand tu affiches du html pour que le > s'affiche correctement :D html 5 n'est pas autant impitoyable que xhtml. je chipotte parce que tu as un code assez bien écrit :D

passons.

je seche un peu pour dire vrai.
je ne comprends pas le $('body').parent().parent();
je ne comprends pas du tout ou tu as mis le var_dump(); coté php
je suis curieux de la valeur de console.info(toSave)/console.log(toSave); dans la console de débug du navigateur.

apres je suis aussi curieux que tu verifies les parametres qu'on voit transiter dans l'appel ajax sur le volet réseau, comme ça on sera sur de quel coté est l'erreur.
25/07/2017, 18h12
mOscar007

Re @gene69,

Pour répondre à tes questions :
Cette ligne

Code:

big_parent = $('body').parent().parent();

n'est pas celle que j'ai écrit dans mon précédent code.
J'ai écrit ceci dans mon code :

Code:

big_parent = $(this).parent().parent();

, le $(this) correspond à tous les éléments à l'intérieur du body qui ont la classe : .row-edit-hover i d'ou la ligne suivante :

Code:

$("body").on('click', ".row-edit-hover i", function(e){}

.

Le var_dump(); était sur la variable $titre sur laquelle j'ai fait mon test qui a renvoyé le résultat de la console suivant :

"status":true,"msg":"Saisie enregistrée avec success !","debug":{"requete":"UPDATE newsletter
SET titre = :text WHERE newsletter_id = :id","datas":{":text":"",":id":"11"}}}
Object {id: 11, url: "", img: "", text: ""}

Il n'y a pas de message d'erreur puisque la requête renvoie un message de success. C'est juste comme elle ne récupère pas les contenu, elle enregistre un champ vide.

Cdlt,
25/07/2017, 21h22
gene69
salut,

donc si on verifie la valeur des entrées php, est ce que la valeur vide vient de là?
Code:

1 2 3 4 5 var_dump($_POST); //.... $text = isset($_POST['text']) ? htmlspecialchars($_POST['text']) : ""; var_dump($text);
ensuite je suis toujours pas assez fort pour faire sans la sortie de la console JS du navigateur (ctrl+Maj+K sous firefox)

Code:

console.info(toSave);
25/07/2017, 23h12
mOscar007

Je n'ai pas dit que le problème vient du var_dump($text); puisque qu'il ne renvoi rien. J'ai bien précisé que c'est probablement un problème de récupération du contenu pour le passer en POST. Peut être que je n'ai pas assez de recul parce que je bosse déçu. C'est pour ça que je suis là pour avoir un avis extérieur. Je n'ai pas réussi à mettre le doigt sur l'origine mais pour l'exemple de l'url et l'img marchent bien. C'est juste le text qui cause problème.

salut

je voulais controler d'une maniere ou d'une autre que le pb était bien du coté javascript de la force.
si $text est vide dans var_dump() on est bien dans un contexte d'anomalie.

maintenant je veux bien le résultat du console.info() un c/C devrait fonctionner.

Est ce que tu sais faire un pas-à pas en javascript avec firefox (Ctrl+Maj+S) ? il faudrait un point d'arret un peu avant

Code:

1
2
3
4
5
6
7
8
9
10
 
           big_parent.text($("#edit-text .text").val());
           big_parent.attr("href",$("#edit-link .url").val());
           big_parent.attr("src",$("#edit-image .image").val());
           toSave = {
                'id'   : big_parent.data('id'),
                'url'  : big_parent.attr('href'),
                'img' : big_parent.attr('src'),
               'text' : big_parent.text()
           }

est ce que tu pourrais pas sécuriser le tout en réduisant le nombre d'appel jquery.

Code:

1
2
3
4
5
6
7
8
9
10
           toSave = {
                id   : big_parent.data('id'),
                url  : $("#edit-link .url").val(),
                img : $("#edit-image .image").val(),
               text : $("#edit-text .text").val() // t'es sur que c'est .val() et non .text() ?
           }
           console.log(toSave);//à supprimer avant de passer en prod.
           big_parent.text(toSave.text);
           big_parent.attr("href",toSave.url);
           big_parent.attr("src",toSave.img);

Re @gene69,

Code:

text : $("#edit-text .text").val() // t'es sur que c'est .val() et non .text() ?

Il s'agit bien du .val() et non .text() puisque c'est la valeur de l'élément input qui a cette classe :

Code:

$("#edit-text .text")

qui est appelé lors de l'affichage de la modale. J'ai bien mis ci-haut les éléments HTML correspondants aux différentes modales.

Avec la modification que j'ai fait l'enregistrement marche mais le seul souci ce qu'il faut recharger la page pour afficher le contenu modifié. C'est le cas par exemple du : $text, $img, $url et $titre. Pourtant c'est un traitement avec de l'ajax, le contenu est censé se mettre à jour sans rechargement de la page.

Pourrait-on avec cette méthode mettre les éléments d'un même bloc par exemple sur une seule ligne dans la table (un seul id par bloc d'élément html) pour qu'on puisse ensuite déplacer les blocs et les ré-organiser pour sauvegarder (voir ci-dessous le contenu de la table) ? Je rappelle bien les blocs n'ont pas la même structure (donc pas de boucle).
Code:

1 2 3 4 5 6 7 8 // Contenu de la table `newsletter` INSERT INTO `newsletter` (`newsletter_id`, `url_lien`, `titre_url_lien`, `titre`, `description`, `image`) VALUES (2, 'http://link-contact', 'Contact', 'Item 2', 'Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.', 'image_02.jpg'), (3, 'http://link-a-propos', 'A propos', 'Item 3', 'Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.', 'image_03.jpg'), (1, 'http://link-j-en-profite', 'J''en profite', 'Item 1', 'Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.', 'image_01.jpg');

28/07/2017, 08h55
gene69

Citation:

Envoyé par dinolam81

Re @gene69,
Pourtant c'est un traitement avec de l'ajax, le contenu est censé se mettre à jour sans rechargement de la page.

déjà si ta sauvegarde fonctionne, c'est un premier pas. ça fait plaisir.

Pour le reste je ne suis pas sur de comprendre.
pour le côté "censé" je suis réservé, JS ne fait que suivre les instructions que tu lui donnes.je n'arrive pas à identifier ce fragment de code dans tes extraits. maintenant que tu as un un objet JS toSave qui a les bonnes valeurs il suffit de les réutiliser une 2e fois pour changer des valeurs dans la table.

Citation:

Pourrait-on avec cette méthode mettre les éléments d'un même bloc par exemple sur une seule ligne dans la table (un seul id par bloc d'élément html) pour qu'on puisse ensuite déplacer les blocs et les ré-organiser pour sauvegarder (voir ci-dessous le contenu de la table) ? Je rappelle bien les blocs n'ont pas la même structure (donc pas de boucle).

pas sur de comprendre.
si tu veux réorganiser ta page, tu dois y arriver sans passer par ta base de donnée: est ce que tu parles de déplacer des blocs (draggable()?) . Si tes objets sont compliqués, pour moi le plus simple c'est de lire le html comme pour la sauvegarde, organiser tes objects JS, épurer le code HTML, et regénérer le html dans le bon sens avec les bonnes valeurs.
28/07/2017, 11h02
mOscar007

Re @gene69,

Citation:

je n'arrive pas à identifier ce fragment de code dans tes extraits.

Tu parles de quel fragment de code ? Est-ce la partie traitement Ajax ?

Citation:

maintenant que tu as un un objet JS toSave qui a les bonnes valeurs il suffit de les réutiliser une 2e fois pour changer des valeurs dans la table.

Je ne comprends pas ce que tu veux dire par réutiliser une 2e fois pour changer des valeurs dans la table.

Citation:

pas sur de comprendre.
si tu veux réorganiser ta page, tu dois y arriver sans passer par ta base de donnée: est ce que tu parles de déplacer des blocs (draggable()?)

Oui je voudrais réorganiser les blocs de ma page par draggable. Mais ça c'est fait, je souhaiterais sauvegarder la réorganisation pour que quand on passe à l'étape suivante ou au chargement de la page qu'on ne perd pas cette réorganisation. C'est pour ça que je demande, faut-il identifier chaque bloc par un ID et le rang pou qu'on puisse les enregistrer ?

Cordialement,
28/07/2017, 13h12
gene69

salut
quelqu'un de plus expérimenté que moi pourra te dire s'il existe des outils tous fait pour draggable().
En fonction de l'importance de d'ordre, tu peux stocker coté navigateur ou dans ta base de donnée... mais de mémoire draggable() déplace les élements sur l'écran (donc le positionnement) mais pas l'ordre des noeuds sur le document html.

pour le reste je ne sais pas comment reformuler.
31/07/2017, 11h39
mOscar007

Re @gene69,

Pour ce qui est de draggable() il est déjà fait. Je peux réorganiser mes blocs comme je veux. Dès que je recharge ma page la réorganisation disparaisse puis qu'il s'agit uniquement d'un traitement js. Je souhaiterais enregistrer l'ordre pour la conserver lors la prochaine utilisation. Il y a une possibilité de reprendre son ancienne newsletter pour la rééditer.

Citation:

maintenant que tu as un un objet JS toSave qui a les bonnes valeurs il suffit de les réutiliser une 2e fois pour changer des valeurs dans la table.

Peux-tu m'expliquer avec un exemple cette partie ? Merci

Cdlt,
02/08/2017, 15h44
mOscar007

@gene69,

Pour la partie draggable(), j'aimerais faire la même chose que ce qu'il y a sur ce lien : http://www.sebastienangot.fr/blog/de...se-de-donnees/

Mais seulement dans mon cas ça ne marche pas puisque je ne récupère pas mes blocs dans une boucle. Mes blocs n'ont pas la même structure html donc je suis obligé de récupérer dynamiquement chaque bloc avec sa propre requête. Ce qui cause à mon avis le problème de positionnement. Existe-il un moyen de le faire sans passer par la boucle ? Merci

Cdlt,