Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Web Café > Code (JS, PHP, CSS etc.), techniques etc.
  Nouveaux messages Nouveaux messages Fil RSS  - Ajout nouveau module+sauvegarde en BD
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Ajout nouveau module+sauvegarde en BD

 Répondre Répondre
Auteur
Message
mecano31 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 08 Août 2017
Pays: France
Status: Inactif
Points: 4
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer mecano31 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Ajout nouveau module+sauvegarde en BD
    Envoyé : 08 Août 2017 à 18:15
Bonjour à tous,
 
Je suis en train de réaliser un système d'édition de newsletter en ligne. J'aurais la possibilité de rajouter des nouveaux modules, les supprimer, gérer l'ordre des éléments et les sauvegarder. J'ai deux blocs : bloc_1 et bloc_2. Le bloc_1 contient les modules à ajouter au bloc_2. Le bloc_2 contient l'ensemble des modules : les anciens et les nouveaux. J'ai la possibilité d'organiser mes modules (blocs) et les sauvegarder dans le bloc_2. Le bloc menu sert d'affichage des éléments sous forme d'image en miniature. Le bloc dropdown affiche l'élément au survole correspondant au module.
 
Je mets un lien qui illustre ce que je souhaiterais faire :  https://topol.io/editor/5984cdb91dc32/edit . Dans ce lien c'est par glisser-déposer pour ajouter un élément mais dans mon cas l'élément est ajouté lorsqu'on le survole et clique sur "Insert".
 
Pour l'insertion d'un nouveau module (DIV) ça marche, la réorganisation (glisser-déplacer) marche aussi. Le problème c'est quand je rajoute un nouveau module je ne pourrai pas le sauvegarder. Pour infos mes modules sont enregistrés en base de données mais ils n'ont pas la même constitution des éléments (c-à-d structure différente). Je veux afficher mes éléments dans l'ordre du 1er au dernier. Hors quand je rajoute un nouveau élément dans le bloc_2, il casse l'ordre puisqu'il n'existait pas dans la boucle.
 
Merci
Cdlt,
 
Exemple ci-dessous traite juste la partie ajout de module. Une fois ajouté je n'ai pas réussi à sauvegarder l'ajout et la réorganisation :
<?PHP
// connexion BD
require_once('db.php');
 
$sql = 'SELECT * FROM maTable ORDER BY position';
$req = $db->prepare($sql);
$req->execute($q) or die(print_r($req->errorInfo()));
$rows = $req->fetchAll();
?>
<html>
<div id="modules">
    <div id="menu">
        <div id="mod01"><img src="image-mod01.jpg"></div>
        <div id="mod02"><img src="image-mod02.jpg"></div>
        <div id="mod03"><img src="image-mod03.jpg"></div>
    </div>
    <div id="dropdown">
        <div class="div_mod" data-type="mod01" data-id="1">nouveau contenu 1</div>
        <div class="div_mod" data-type="mod02" data-id="2">nouveau contenu 2</div>
        <div class="div_mod" data-type="mod03" data-id="3">nouveau contenu 3</div>
    </div>   
</div>
<div id="container">
    <div id="bloc_1">
        <div id="div_mod01" class="row" data-id="1">contenu div 1</div>
        <div id="div_mod02" class="row" data-id="2">contenu div 2</div>
        <div id="div_mod03" class="row" data-id="3">contenu div 3</div>
    </div>
    <div id="bloc_2">
       <?php  foreach ($rows as $row){
            switch ($row['id']) {
                case 1:
                    <div id="div_1">contenu_div1</div>
                break;
                case 2:
                    <div id="div_2">contenu_div2</div>
                break;
                case 3:
                    <div id="div_3">contenu_div3</div>
                break;
                    ...
                default:
                    echo '';
            }
        } ?>
    </div>
</div>
</html>
<script>
(function(){
                $("#mod01").hover(function() {
                    $(".div_mod[data-type='mod01']").show();
                    $(".div_mod[data-type='mod02']").hide();
                    $(".div_mod[data-type='mod03']").hide();
                });   
                $("#mod02").hover(function() {
                    $(".div_mod[data-type='mod01']").hide();
                    $(".div_mod[data-type='mod02']").show();
                    $(".div_mod[data-type='mod03']").hide();
                });   
                $("#mod03").hover(function() {
                    $(".div_mod[data-type='mod01']").hide();
                    $(".div_mod[data-type='mod02']").hide();
                    $(".div_mod[data-type='mod03']").show();
                });   
        
                $(".div_mod").hover(
                    function() {
                        $(this).append('<div class="add"><i class="fa fa-plus"></i>Insert</div>');
                        $('.add').click(function() {
                            $("#div_1").prepend($("#bloc_1 .row[data-id='"+$(this).parent().attr("data-id")+"']").clone());
                            $("#dropdown").fadeOut(200);
                        });
                      }, function() {
                        $(this).children(".add").remove();
                      }
                );
        })();
</script>
<?php
$parametres = array('div_1','div_3','div_2');
 
for($i=1;$i<count($parametres);$i++){
  UPDATE maTable  SET position = $i WHERE id = $parametres[$i];
}
?>



Edité par mecano31 - 09 Août 2017 à 12:06
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 31 Mai 2012
Status: Inactif
Points: 14010
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Août 2017 à 10:50
Bonjour,

J'espere que vous avez bien mis les balises ouverture/fermeture PHP <?php ... ?> dans le code, car dans votre exemple tout est melangé. Et je ne vois pas du code de deplacement (changement d'ordre), je vois uniquement l'insertion.

Pouvez-vous d'abord publier en ligne quelque part une page qui fonctionne (sauf enregistrement) et donner le lien?

En gros, pour pouvoir enregistrer, il vous faut passer par Ajax - on ne peut pas executer PHP directement dans la page APRES son ouverture dans le navigateur, mais on peut appeler un script/une page PHP "en temps reel" via Ajax, par exemple

$('.button-save').click(function(){
  var params = [], position = 0;
   var $myDivs = $('.div_mod');
  $myDivs.each(function(){
    params.push({id: $(this).attr('id'), position: positiong});
    position++;
  });
  $.get('myscript-save.php?params=' + encodeURIComponent(JSON.stringify(params)));
});


et dans myscript-save.php:

$params = json_decode($_GET['params'], true);
foreach ($params as $row) {
  $id = $row['id'];
  $position = $row['position'];
}


Le code est "brut" juste pour avoir une idee
Haut de la page
mecano31 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 08 Août 2017
Pays: France
Status: Inactif
Points: 4
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer mecano31 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Août 2017 à 22:01
Bonjour @Dmit OE

Merci d'avoir pris le temps de me répondre.

En effet, j'ai 2 blocs :

- un bloc de gauche qui contient les modules à ajouter.
- un bloc de droite qui contient les modules par défaut et les nouveaux rajoutés. 

Dans le bloc de gauche on retrouve 3 éléments permettant au survol d'afficher en bas les modules correspondant pour l'ajout. Chaque élément dispose d'un bouton "Insert" permettant de l'insérer dans le bloc de droite au tout début des éléments existants. Dans le bloc de droite on a la possibilité réorganiser les éléments par glisser-déplacer en cliquant sur le bouton "Modifier la position des éléments" pour changer la position d'un élément et la sauvegarder. 

Mon problème se résume en 2 points :

1. Pouvoir sauvegarder un module après l'avoir ajouté dans le bloc de droite et même après rechargement de la page le nouveau élément reste dans la liste.
2. Pouvoir sauvegarder la réorganisation et récupérer cet ordre après chargement.

Vous trouverez le lien de l'exemple avec la partie ajout de nouveau module et la partie réorganisation : https://jsfiddle.net/mecano/cdq07mjb/7/ . Merci !

Cdlt,



Edité par mecano31 - 09 Août 2017 à 22:12
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 31 Mai 2012
Status: Inactif
Points: 14010
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Août 2017 à 23:13
C'est votre code ou un copie-colle d'une exemple de quelqu'un?

Il y a deja du Ajax pour enregistrer mais dans jsFiddle il ne peut pas marcher, evidemment (sauf si vous utilisez un URL absolute, du genre http://domain.com/saveUpdate.php, et le type: "GET" ("POST" ne marchera pas cross-domain). De toute facon, il faut voir une page OE en ligne, jsFiddle n'est pas assez pratique dans ce cas.

Je vous conseille d'essayer de trouver vous-meme une solutions, c'est un exellent entrainement.


Haut de la page
mecano31 allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 08 Août 2017
Pays: France
Status: Inactif
Points: 4
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer mecano31 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 09 Août 2017 à 23:52
Bien sur que c'est mon code. 
Je suis venu chercher de l'aide sur ce forum parce que j'avais cherché de mon côté sans résultat.
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne