Remplir une modal dynamiquement à l'aide de la base de données

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

J'avoue ne pas m'en sortir car je m'y perds dans les SELECT à l'appel de la base de données.

Je vous donne donc toutes les infos.

Le modèle de ma base de données :
Pièce jointe 300882

Les tables 'familles', 'unites', 'ingredients' fonctionnent.
Maintenant je veux m'occuper du reste !

J'ai donc ce visuel :

Pièce jointe 300883

Le bouton 'Ajouter' appelle une modal avec lequel je veux créer/ajouter une recette.
Cette modal n'est pas terminée :

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
 
<!-- Modal pour ajouter une recette à la base de données  -->
<div id="add_recettes" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Ajouter une recette à la base de données</h4>
         </div>
         <div class="modal-body">
            <form method="post" id="insert_form">
              <label>Choisir la catégorie</label>
              <select name="categories_id" id="categories_id" class="form-control">
                  <option value="1">Apéritifs</option>  
                  <option value="2">Entrées</option>
                  <option value="3">Plats</option>
                  <option value="4">Desserts</option>
                  <option value="5">Sauces</option>
                  <option value="6">Divers</option>
              </select>
              <br />
              <label>Nom de la recette</label>
              <input type="text" name="recettes_id" id="recettes_id" class="form-control" required />
              <br />
              <label>Choisir la famille</label>
              <select name="familles_id" id="familles_id" class="form-control">
                  <option value="1">Boucherie</option>  
                  <option value="2">Crèmerie</option>
                  <option value="3">Légumes</option>
                  <option value="4">Liquides</option>
              </select>
              <br />
              <input type="submit" name="insert" id="insert" value="Valider" class="btn btn-primary" />
 
            </form>
         </div>
         <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
         </div>
      </div>
   </div>
</div>

J'ai donc le champs pour lier la recette à une catégorie, un champ pour choisir un nom à cette recette, (je pourrais sans doute mettre le nombre de personnes), mais là suite je ne sais pas du tout comment faire, il faut que je choisisse les ingrédients qui composent cette recette (table ingredients).
Comment je vois les choses, il faut d'abord que je choisisse la famille de l'ingrédients (boucherie, crèmerie, liquide, ...) et suivant le choix, on m'affiche la liste des ingrédients qui se trouvent dans ma base de données.
Une fois le choix fait, je valide, la recette doit être créer ?
Mais LA question, où est-elle inscrite ? Quand je fais ajouter la quantité des ingrédients, où vont-ils être enregistrés ?
Et lorsque je vais attaquer la partie calculs, où vont-ils être mémorisés ?

Pour la partie ingrédients, j'ai réussi à faire ma connexion à la base de données et à faire mon SELECT, là, je ne sais pas du tout comment faire, voici le fichier :

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
 
<?php
 $connect = mysqli_connect("localhost", "root", "", "cuisine");
 $query = "SELECT C.categories, R.recettes, R.nbpersonnes, I.ingredients, I.prix  FROM categories C, recettes R, ingredients I, composition_recettes CR WHERE I.id=CR.ingredients_id AND R.id=CR.recettes_id AND C.id=R.categories_id";
 $result = mysqli_query($connect, $query);
?>
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 
    <title></title>
 
    <!-- Bootstrap -->
           <script src="js/jquery.js"></script> 
           <script src="js/jquery.dataTables.min.js"></script>
           <script src="js/dataTables.bootstrap.min.js"></script>
           <script src="js/bootstrap.min.js"></script>
           <script src="js/jquery.tabledit.min.js"></script>
 
           <link rel="stylesheet" href="css/bootstrap.min.css">
           <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
           <link rel="stylesheet" href="css/style.css">
 
 
  </head>
  <body>
 
      <div class="container">
 
          <!-- Titre -->
          <h3 align="center">Gestion des sauces</h3>  
 
 
          <!-- Bouton Ajouter une recette -->
          <div>
            <div>
              <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_recettes" class="btn btn-primary">Ajouter</button>
            </div>
          </div>
          <br />
 
          <div class="table-responsive col-md-4">
          <h4 class="sub-header">Liste des recettes</h4>
              <div class="table-responsive">
                  <table id="composition_recettes" class="table table-bordered table-hover">
                      <thead>
                          <tr>
                              <th>Recettes</th>
                          </tr>
                      </thead>
                        <?php
                          while($row = mysqli_fetch_array($result))
                          {
                               echo '
                               <tr>
                                    <td>'.$row["recettes"].'</td>
                               </tr>
                               ';
                          }
                        ?>
                  </table>
              </div>
          </div>
 
          <div class="table-responsive col-md-5">
          <h4 class="sub-header">Détail de la recette</h4>
              <div class="table-responsive">
                  <table  id="composition_recettes" class="table table-striped table-bordered">
                      <thead>
                          <tr>
                              <th>Ingrédients</th>
                              <th width="10%">Quantités</th>
                              <th width="20%">Prix au kg</th>
                              <th width="15%">Coûts</th>
                          </tr>
                      </thead>
                      <tfoot>
                          <tr>
                              <td colspan="3" align="right">Coût de revient de la recette HT - TOTAL</td>
                              <td></td>
                          </tr>
                      </tfoot>
                      <tbody>
                        <?php
                          while($row = mysqli_fetch_array($result))
                          {
                               echo '
                               <tr>
                                    <td>'.$row["ingredients"].'</td>
                                    <td>'.$row["quantites"].'</td>
                                    <td>'.$row["prix"].'</td>
                                    <td>'.$row[""].'</td>
                               </tr>
                               ';
                          }
                        ?>
                      </tbody>
                  </table>
              </div>
          </div>
 
          <div class="table-responsive col-md-3">
          <h4 class="sub-header">Calculs</h4>
              <div class="table-responsive-vertical">
                  <table id="recettes" class="table table-stripped table-bordered">
                      <tr>
                         <th width="70%">Nombre de personnes</th> 
                         <td><?php while($row = mysqli_fetch_array($result))
                            { ?>
                          <td><?php echo $row["nbpersonnes"]; ?></td>
                          <?php
                          }
                          ?></td>
                      </tr>
                      <tr>
                         <th width="70%">Coût de revient / pers.</th>
                         <td><?php echo $row[""]; ?></td>
                      </tr>
                      <tr>
                         <th width="70%">Marge</th>
                         <td><?php echo $row[""]; ?></td>
                      </tr>
                      <tr>
                         <th width="70%">Prix de vente TTC</th>
                         <td><?php echo $row[""]; ?></td>
                      </tr>
                  </table>
              </div>
          </div>
 
      </div>
 
 
 
  </body>
</html>
 
<!-- Modal pour ajouter une recette à la base de données  -->
<div id="add_recettes" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Ajouter une recette à la base de données</h4>
         </div>
         <div class="modal-body">
            <form method="post" id="insert_form">
              <label>Choisir la catégorie</label>
              <select name="categories_id" id="categories_id" class="form-control">
                  <option value="1">Apéritifs</option>  
                  <option value="2">Entrées</option>
                  <option value="3">Plats</option>
                  <option value="4">Desserts</option>
                  <option value="5">Sauces</option>
                  <option value="6">Divers</option>
              </select>
              <br />
              <label>Nom de la recette</label>
              <input type="text" name="recettes_id" id="recettes_id" class="form-control" required />
              <br />
              <label>Choisir la famille</label>
              <select name="familles_id" id="familles_id" class="form-control">
                  <option value="1">Boucherie</option>  
                  <option value="2">Crèmerie</option>
                  <option value="3">Légumes</option>
                  <option value="4">Liquides</option>
              </select>
              <br />
              <input type="submit" name="insert" id="insert" value="Valider" class="btn btn-primary" />
 
            </form>
         </div>
         <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
         </div>
      </div>
   </div>
</div>
 
 
 <script>
 
$(document).ready(function() {
 
 
      $('#insert_form').on("submit", function(event){
          event.preventDefault();
            $.ajax({
                method:"POST",
                data:$('#insert_form').serialize(),
                success:function(data){
                   location.reload()
                }
            });
      });
 
});
 
 
 </script>

Merci d'avance, parce que là je nage, malgré la recherche d'infos et de tutos !!!

06/08/2017, 22h32
sabotage

Mon conseil c'est de ne pas te lancer dans du jquery si tu ne maitrises pas les principes avec PHP tout seul.

Si tu n'as pas un code de réception des données du formulaire qui fait un INSERT de ces données dans la base, rien ne sera enregistré nul part.
07/08/2017, 09h18
Zulkar

Bonjour et merci.

Dans mon ajax, j'ai rajouté un lien vers un fichier 'insert.php' comme je le fais pour la partie concernant l'enregistrement de mes ingrédients dans la base de données.
Et j'essaie de le modifier en conséquences.

Est-ce que ma table 'composition_recettes' est incomplète ?

Car dans la pratique, les recherches, certains visuels, j'ai besoin :
- à la création d'une recette, la lier à une catégorie,
- quand je veux visualiser une recette en cliquant dessus :
- je dois connaître le nom de la recette et le nombre de personnes,
- je dois voir le détail des ingrédients et le prix d'achat au kg.

Donc, en haut de ma page, comment dois-je construire/modifier l'appel aux bases de données ?

Merci d'avance.

Est-ce que tu as écris la requête INSERT ?
Si oui et qu'elle ne fonctionne pas, quelle résultat obtiens-tu ?

Citation:

je dois connaître le nom de la recette et le nombre de personnes,
- je dois voir le détail des ingrédients et le prix d'achat au kg.

Ce n'est pas déjà ce que fait ta requête en ligne 4 ?
Au passage, fais tes jointures avec JOIN pas dans le WHERE dans la requête.
Code:

1 2 3 4 5 SELECT C.categories, R.recettes, R.nbpersonnes, I.ingredients, I.prix FROM categories C JOIN recettes R ON C.id=R.categories_id JOIN composition_recettes CR ON R.id=CR.recettes_id JOIN ingredients I ON I.id=CR.ingredients_id

Citation:

Envoyé par sabotage

Ce n'est pas déjà ce que fait ta requête en ligne 4 ?
Au passage, fais tes jointures avec JOIN pas dans le WHERE dans la requête.

Je te remercie pour les jointures, c'est vrai que pour mes ingrédients, j'ai utilisé WHERE et AND, donc j'avais fait pareil.

Citation:

Envoyé par sabotage

Est-ce que tu as écris la requête INSERT ?
Si oui et qu'elle ne fonctionne pas, quelle résultat obtiens-tu ?

Je ne sais pas du tout comment je vais faire pour cette partie, j'ai l'impression qu'il y a beaucoup d'informations à gérer, différentes requêtes, différentes relations et il faut que je redirige tout ça au bon endroit pour avoir l'affichage que je veux.

Mon fichier insert.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 39 40 <?php //insert.php $connect = mysqli_connect("localhost", "root", "", "cuisine"); if(!empty($_POST)) { $output = ''; $recettes_id = mysqli_real_escape_string($connect, $_POST["recettes_id"]); $ingredients_id = mysqli_real_escape_string($connect, $_POST["ingredients_id"]); $quantites = mysqli_real_escape_string($connect, $_POST["quantites"]); $query = " INSERT INTO composition_recettes(recettes_id, ingredients_id, quantites) VALUES('$recettes_id', '$ingredients_id', '$quantites') "; if(mysqli_query($connect, $query)) { $select_query = "SELECT * FROM recettes ORDER BY id DESC"; $result = mysqli_query($connect, $select_query); $output .= ' <table id="recettes" class="table table-bordered table-hover"> <thead> <tr> <th>Recettes</th> </tr> </thead> '; while($row = mysqli_fetch_array($result)) { $output .= ' <tr> <td>'.$row["recettes"].'</td> </tr> '; } $output .= '</table>'; } echo $output; } ?>
Je sais qu'il y a des erreurs.

Mais il faut bien que toutes les informations partent de la table 'composition_recettes' ?

Comme sur le poste d'origine, j'ai rempli un peu mes tables 'categories', 'recettes' dans phpmyadmin.
Dans la table composition_recettes, j'ai recettes_id, ingredients_id et quantites.
Dans recettes_id, je peux bien choisir l'ID d'une recette.
Mais dans ingredients_id, il faut que je puisse rentrer une liste de différents ingrédients, hors là, il me propose juste l'ID d'un ingrédient.
Pour les quantités, je verrais pour les rentrer en éditant la recette sur la vue plus haut.

Après, il faut que j'arrive à dispatcher ces informations dans les tableaux correspondant.

07/08/2017, 21h58
sabotage

Je ne sais pas comment dans ton interface on indique les ingrédients mais d'un point de vue PHP/Mysql, dans la table composition_recettes tu fais une insertion pour chaque ingrédient choisi pour la recette.

1 pièce(s) jointe(s)

Regardes comment j'ai fait pour mes ingrédients :
Pièce jointe 301168
Et pour Familles et Unités, j'indique dans la modal l'ID correspondant à la familles et à l'unité :

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
 
<!-- Modal pour ajouter un ingrédient à la base de données -->
<div id="add_ingredients" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Ajouter un ingrédient à la base de données</h4>
         </div>
         <div class="modal-body">
            <form method="post" id="insert_form">
              <label>Choisir une famille</label>
              <select name="familles_id" id="familles_id" class="form-control">
              <option value="1">Boucherie</option>  
              <option value="2">Crèmerie</option>
              </select>
              <br />
              <label>Ingrédients</label>
              <input type="text" name="ingredients" id="ingredients" class="form-control" required />
              <br />
              <label>Fournisseurs</label>
              <input type="text" name="fournisseurs" id="fournisseurs" class="form-control" />
              <br />  
              <label>Prix</label>
              <input type="text" name="prix" id="prix" placeholder="0.00" class="form-control" required />
              <br />  
              <label>Unités</label>
              <select name="unites_id" id="unites_id" class="form-control">
              <option value="1">kilogramme</option>  
              <option value="2">litre</option>
              <option value="3">la pièce</option>
              </select>
              <br />
              <input type="submit" name="insert" id="insert" value="Valider" class="btn btn-primary" />
 
            </form>
         </div>
         <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
         </div>
      </div>
   </div>
</div>

Donc pour toi, il n'y a pas de système pour aller chercher en dropdown (comme Familles et Unités) la table Familles et si je choisis Légumes, il m'affiche en dessous tous les légumes, je fais une multisélection, etc ...

J'ai trouvé cette vidéo, si ça peut t'aider à voir le fonctionnement, il choisit les ingrédients en drag & drop :
http://prix-revient-pizza.fr/

08/08/2017, 07h17
sabotage

Je t'ai répondu d'un point de vue PHP/Mysql. Les élements d'interface c'est en HTML/CSS/Javascript.