Ajouter des champs (input, textarea) dynamiques

Version imprimable

05/10/2013, 08h59
vinceom92

Ajouter des champs (input, textarea) dynamiques

Bonjour,

Je reviens vers vous pour vous poser une question.

J'aimerais faire un système où l'utilisateur pourra poster un contenu (son cours) avec des questions sous forme de chapitre.

Actuellement, j'ai fait un système où un utilisateur peut poster le cours et les questions (comme il l'aura présenté) mais le problème est que j'enregistre le contenu du cours et les questions dans le même champs SQL (donc même table SQL). Ce qui va poser problème lors de la gestion des questions.

Il serait mieux que je sépare le cours en lui-même et les questions dans deux tables différentes (cours et questions) ce qui permettra une meilleure gestion des questions. Je le sais, ce qui me pose problème est la question de la présentation.

Ce qui me pose problème est :
- comment faire une interface graphique pour gérer l'insertion des questions ? Avec plusieurs zones de texte (ça dépend du nombre) ? Actuellement, j'ai fait un système où l'utilisateur peut choisir le style pour les questions dans un éditeur TINYMCE (le même où l'utilisateur écrit son cours).
- si j'enregistre le contenu du cours et les questions dans deux tables différentes, comment je gère leur affichage pour qu'elles se mettent au bon endroit (par rapport aux chapitres) ?

En une phrase : comment séparer le contenu des cours (par rapport aux chapitres) et les questions tout en conservant une présentation adéquate (exemple : première question dans le premier chapitre, deux questions dans le second chapitre, cinq questions dans le troisième chapitre, etc…) ?

Pour information, après chaque question je mettrai un champs texte pour pouvoir répondre…

Si je rajoute un champs SQL dans lequel je mets le numéro du chapitre ça pourrait le faire non ? Mais même, comme l'utilisateur doit écrire son cours dans un éditeur TNYMCE comment récupérer les numéros des chapitres (pour information : la numérotation des chapitres se fait avec une fonction JAVASCRIPT). Après ça, il ne manquerait plus qu'à gérer l'insertion des questions…

Sinon si je fait une requête SQL qui permet de rechercher une chaine de caractères dans un champs SQL. Actuellement les questions commencent par

Code:

<div class="exercice">

et se terminent par

Code:

</div>

.

Est-ce qu'il est possible, judicieux pour faire ce que je veux, de faire une requête SQL (avec l'opérateur

Code:

LIKE

) qui permettrait de trouver une chaine de caractères qui commence par

Code:

<div class="exercice">

et se termine par

Code:

</div>

dans un champs (avec comme type

Code:

LONGTEXT

) SQL ?
05/10/2013, 09h29
sabotage

Il te faut un input standard pour saisir le numéro du chapitre en plus de ton input tinymce pour la saisie du contenu.
05/10/2013, 10h22
vinceom92

C'est juste pour vous dire :

Pour gérer les titres, sous-titre, etc..., j'ai fait une fonction JAVASCRIPT qui récupère chaque

Code:

<h1>

jusqu'à

Code:

<h6>

posté par l'utilisateur (c'est pour cela que j'ai ajouté un système dans l'éditeur TINYMCE) et fait une numérotation automatique (ce n'est pas l'utilisateur qui s'en occupe).

L'utilisateur écrit en l'état actuel son cours en intégralité uniquement dans l'éditeur TINYMCE.
Pour les titres, sous-titres, etc... : actuellement, ça fait

Code:

<h1>Titre</h1>

jusqu'à

Code:

<h6>Sous, sous, sous, sous, sous, sous titre</h6>

.
Pour les exercices : actuellement, ça fait

Code:

<div class="exercice"><p>Questions/Exercices</p></div>

.

Le mieux, ce serait qu'il écrive l'intégralité de son cours (avec les Questions/Exercices) dans le même éditeur TINYMCE (comme maintenant) mais que le contenu de son cours s'enregistre dans la table cours et que ses questions/exercices s'enregistrent dans la table questions.

Avec ce que tu me dit, je viens à dire qu'il faudrait faire un

Code:

<input type="hidden" name="" value="" />

dans lequel on copierait les titres, sous-titres, etc... (puisque la numérotation se fait automatiquement en JAVASCRIPT) saisis dans l'éditeur TINYMCE. Ca voudrait dire qu'il faudrait faire un système d'ajout de champs texte caché à chaque titre, sous-titre, etc... ?
05/10/2013, 11h02
Invité
Bonjour,

SOLUTION 1
je vais partir dans une autre direction :
=> 3 TABLEs SQL : T_cours - T_chapitres - T_questions
- T_cours (id_cours, titre_cours,...)
- T_chapitres (id_chapitre, id_cours, titre_chapitre, contenu_chapitre,...)
- T_questions (id_question, id_chapitre, titre_question, contenu_question reponse_question,...)
Citation:
1/ Création d'un cours
-> enregistré dans T_cours (INSERT + on récupère l'id_cours créé)
2/ "Ajouter un chapitre"
-> enregistré dans T_chapitres (INSERT ... WHERE id_cours = 'id_cours_créé' + + on récupère l'id_chapitre créé)
on crée alors un "bloc chapitre", avec :

un textareapour écrire le contenu "cours" du chapitre
un bouton: "Ajouter une question à ce chapitre"
un bouton: "Ajouter un nouveau chapitre"

3/ "Ajouter une question à ce chapitre"
-> enregistré dans T_questions (INSERT ... WHERE id_chapitre = 'id_chapitre_créé' + on récupère l'id_chapitre créé)
-> Via Ajax/JavaScript, on insère :

"question :" + texteara,
"réponse :" + input,
+ bouton : "Autre question ?"

4/ "Ajouter un nouveau chapitre"
-> Via Ajax/JavaScript, on insère :

un nouveau "bloc chapitre"
N.B.C'est moins compliqué qu'il n'en a l'air.

Citation:

Envoyé par vinceom92

Le mieux, ce serait qu'il écrive l'intégralité de son cours (avec les Questions/Exercices) dans le même éditeur TINYMCE (comme maintenant)

SOLUTION 2
Si je poursuis ce que tu as déjà mis en place :
=> 2 TABLEs SQL : T_cours - T_questions
- T_cours (id_cours, titre_cours,...)
- T_questions (id_question, id_cours, id_chapitre, titre_question, question_question, reponse_question,...)
Citation:
UN SEUL textarea "principal" (timymce)
1 bouton "Ajouter une question"

1/ Rédaction du "cours" dans le textarea, avec des balises titre <h1>, <h2>,...
2/ Via JavaScript (grâce au script que tu as déjà réalisé) :

AJOUT automatique d'un identifiant à chaque balise titre : <h1 id="id_cours-xx">, <h2 id="id_cours-yy">,... (chaque id sera ici appelé "id_chapitre"

3/ on positionne le curseur là où on veut insérer la question, puis on clique sur le bouton "Ajouter une question" :

récupération de la position du curseur dans le textarea,
récupération des id_cours + id_chapitre (celui dans lequel est le curseur !)
ouverture d'une popup "question-réponse",

Dans la popup :

"Question : " + textarea(ou input)
"Réponse : " + textarea(ou input)
inputhidden "id_cours"
inputhidden "id_chapitre"
input"Valider"

4/clic sur "Valider", via Ajax :

enregistrer la question dans la TABLE T_questions
insérer automatiquement DANS le textarea, à l'endroit où on a cliqué :
JUSTE un code [[id_cours;id_chapitre=xxx;id_question=yyy]]
C'est, grosso-modo, le principe utilisé dans Wordpress (par exemple), pour insérer une galerie-photos dans un article.

Bonjour,

Ok, on va partir sur cette idée.

Voici les trois

Code:

CREATE TABLE

:

test_site_cours_v2 :

Code:

1
2
3
4
5
CREATE TABLE IF NOT EXISTS `test_site_cours_v2` (
  `id_cours` int(11) NOT NULL AUTO_INCREMENT,
  `titre_cours` varchar(255) CHARACTER SET utf8 NOT NULL,
  PRIMARY KEY (`id_cours`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

test_site_chapitres_v2 :

Code:

1
2
3
4
5
6
7
CREATE TABLE IF NOT EXISTS `test_site_chapitres_v2` (
  `id_chapitre` int(11) NOT NULL AUTO_INCREMENT,
  `id_cours` int(11) NOT NULL,
  `titre_chapitre` varchar(255) CHARACTER SET utf8 NOT NULL,
  `contenu_chapitre` longtext CHARACTER SET utf8 NOT NULL,
  PRIMARY KEY (`id_chapitre`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

test_site_questions_v2 :

Code:

1
2
3
4
5
6
7
8
CREATE TABLE IF NOT EXISTS ` test_site_questions_v2` (
  `id_question` int(11) NOT NULL AUTO_INCREMENT,
  `id_chapitre` int(11) NOT NULL,
  `titre_question` varchar(255) CHARACTER SET utf8 NOT NULL,
  `contenu_question` varchar(255) CHARACTER SET utf8 NOT NULL,
  `reponse_question` varchar(255) CHARACTER SET utf8 NOT NULL,
  PRIMARY KEY (`id_question`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Jusque là, est-ce que c'est bon ? Je pense que oui…

En ce qui concerne les pages WEB, je vais repartir tout à zéro non ? Il faudra que tu m'aides ;) !!!

05/10/2013, 12h12
Invité
J'ai mis à jour mon message précédent avec SOLUTION 1 / SOLUTION 2

La SOLUTION 1 me semble (à tort ?) plus facile à mettre en place.
Elle permet au moins :
- de séparer/identifier clairement les chapitres et les questions.
- de faciliter la gestion des chapitres/questions (Ajout/modification/suppression)
- de facilité la gestion de l'affichage 1 cours -> des chapitres -> des questions (pour chaque chapitre)
Et elle consiste essentiellement à ajouter via Ajax de nouveaux input, textearea dans le formulaire initial.

Du coup, ton script de "récupération des titres" n'est plus utile.
Citation:
LE FORMULAIRE
1/ Rédiger un cours :
------------------------

Titre du cours : [input]
Intro du cours : [textarea] (éventuellement + autres champs utiles : "date de rédaction", "auteur", "publier le cours", ....)
[button] "Ajouter un chapitre"

------------------------

2/ clic sur le button "Ajouter un chapitre" :
via Ajax -> Ajout d'un "bloc chapitre"
------------------------

chapitre XX (numérotation automatique ? ou [input])
Contenu du chapitre : [textarea] (peut contenir des balises <h.>, on n'en tiendra pas compte)
[button] "Ajouter une question"

------------------------

3/ clic sur le button "Ajouter une question" :
via Ajax -> Ajout d'un "bloc question"
------------------------

question YY (numérotation automatique ? ou [input])
La question : [textarea] ou [input]
La réponse : [textarea] ou [input]
[button] "Ajouter une nouvelle question à ce chapitre"

------------------------

4/ clic sur le button "Ajouter une nouvelle question à ce chapitre" :
via Ajax -> Ajout d'un nouveau "bloc question"

Citation:

Envoyé par jreaux62

J'ai mis à jour mon message précédent avec SOLUTION 1 / SOLUTION 2

La SOLUTION 1 me semble (à tort ?) plus facile à mettre en place.
Elle permet au moins :

de séparer/identifier clairement les chapitres et les questions.
de faciliter la gestion des chapitres/questions (Ajout/modification/suppression)
de facilité la gestion de l'affichage 1 cours -> des chapitres -> des questions (pour chaque chapitre)

Et elle consiste essentiellement à ajouter via Ajax de nouveaux input, textearea dans le formulaire initial.

Du coup, ton script de "récupération des titres" n'est plus utile.

J'ai fait une nouvelle page où je vais faire la nouvelle version.

J'ai fait la première étape. voici le code en intégralité de cette page :

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
<form action="" method="post">
  <center>
    <b>Poster un Cours/TP</b> <br />
    <u>Matière :</u>
    <select name="matieres">
      <?php
// Variables de session - DEBUT
$query_recuperation_identifiant_connecte=$_SESSION['id_utilisateur'];
// Variables de session - FIN
$matiere = "
SELECT matiereenseignee_utilisateur
FROM test_site_utilisateur
WHERE id_utilisateur='$query_recuperation_identifiant_connecte'"; 
$result = mysql_query($matiere)
or die("Erreur sur la requête SQL concernant la matière du professeur.");
echo '<option value="">Choisissez votre matière.</option>';
while ($row=mysql_fetch_array($result)) // mysql_fetch_array = Retourne une ligne de résultat MySQL sous la forme d'un tableau associatif, d'un tableau indexé, ou les deux
{ 
 echo '<option value="'.$row['0'].'">'.$row['0'].'</option>';
}  
?>
    </select>
    <br />
    <u>Classe :</u>
    <select name="classes">
      <?php
$classes = "
SELECT classe_utilisateur
FROM test_site_utilisateur,  test_site_classe
WHERE classe_utilisateur=classe_nom"; 
$result = mysql_query($classes)
or die("Erreur sur la requête SQL concernant les classes.");
echo '<option value="">Choisissez une de vos classes.</option>';
while ($row=mysql_fetch_array($result)) // mysql_fetch_array = Retourne une ligne de résultat MySQL sous la forme d'un tableau associatif, d'un tableau indexé, ou les deux
{ 
 echo '<option value="'.$row['0'].'">'.$row['0'].'</option>';
} ?>
    </select>
    <table width="1122" border="1">
      <tr>
        <td>Date de publication</td>
        <td><input type="text" name="date_publication_tp" size="200" value='<?php $jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");$dateDuJour = $jour[date("w")]." ".date("d")." ".$mois[date("n")]." ".date("Y"); echo $dateDuJour;?>'/></td>
      </tr>
        <td>Date de clôture des validations de ce Cours/TP (Pas obligatoire)</td>
        <td><input type="date" name="date_cloture_validation_cours_tp" /></td>
      </tr>
      <tr>
        <td>Titre</td>
        <td><input name="titre_cours_tp" type="text" size="200" /></td>
      </tr>
      <tr>
        <td>Nom du professeur/formateur</td>
        <td><input name="auteur_cours" type="text" size="200" value="<?php if(isset($_SESSION['pseudo_utilisateur'])) {echo $_SESSION['pseudo_utilisateur'];}?>"/></td>
      </tr>
      <tr>
        <td width="400"><input type="submit" name="ajout_chapitre_cours_tp" value="Ajouter un chapitre ?" /></td>
        <td width="300" align="right"><input type="reset" value="Effacer" /></td>
      </tr>
    </table>
  </center>
</form>

Est-ce que c'est bon ?

Si oui, passons à la deuxième étape : comment faire apparaitre en AJAX un "bloc chapitre" quand l'utilisateur clique sur le bouton de soumission "Ajouter un chapitre" ?

05/10/2013, 13h51
Invité

Code:

<table width="1122" border="1">

NON ! Pas de <table> ! :nono:
Il est préférable d'utiliser des <div>, en leur mettant des identifiants !

Code:

<input type="submit" name="ajout_chapitre_cours_tp" value="Ajouter un chapitre ?" />

re-NON !

Il faut un simple lien <a> ou un <input type="button"...>.
Au clic, on appelle une fonction JavaScript d'Ajout de "bloc chapitre"

Code:

<a href="javascript:void(0);" onclick="Ajout_block_chapitre();">Ajouter un chapitre ?</a>

Code:

<input type="button" onclick="Ajout_block_chapitre();" value="ajouter un champ"/>

Fais une recherche :recherch: :google2: => "javascript ajout dynamique input" ou "javascript formulaire dynamique"

Voici le nouveau code :

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
<form action="" method="post">
  <b>Poster un Cours/TP</b> <br />
  <u>Matière :</u>
  <select name="matieres">
    <?php
// Variables de session - DEBUT
$query_recuperation_identifiant_connecte=$_SESSION['id_utilisateur'];
// Variables de session - FIN
$matiere = "SELECT matiereenseignee_utilisateur
FROM test_site_utilisateur
WHERE id_utilisateur='$query_recuperation_identifiant_connecte'"; 
$result = mysql_query($matiere)
or die("Erreur sur la requête SQL concernant la matière du professeur.");
echo '<option value="">Choisissez votre matière.</option>';
while ($row=mysql_fetch_array($result)) // mysql_fetch_array = Retourne une ligne de résultat MySQL sous la forme d'un tableau associatif, d'un tableau indexé, ou les deux
{ 
 echo '<option value="'.$row['0'].'">'.$row['0'].'</option>';
}  
?>
  </select>
  <br />
  <u>Classe :</u>
  <select name="classes">
    <?php
$classes = "SELECT classe_utilisateur
FROM test_site_utilisateur,  test_site_classe
WHERE classe_utilisateur=classe_nom"; 
$result = mysql_query($classes)
or die("Erreur sur la requête SQL concernant les classes.");
echo '<option value="">Choisissez une de vos classes.</option>';
while ($row=mysql_fetch_array($result)) // mysql_fetch_array = Retourne une ligne de résultat MySQL sous la forme d'un tableau associatif, d'un tableau indexé, ou les deux
{ 
 echo '<option value="'.$row['0'].'">'.$row['0'].'</option>';
} ?>
  </select>
  <br />Date de publication
  <input type="text" name="date_publication_tp" size="200" value='<?php $jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");$dateDuJour = $jour[date("w")]." ".date("d")." ".$mois[date("n")]." ".date("Y"); echo $dateDuJour;?>'/>
  <br />
  Date de clôture des validations de ce Cours/TP (Pas obligatoire)
  <input type="date" name="date_cloture_validation_cours_tp" />
  <br />
  Titre
  <input name="titre_cours_tp" type="text" size="200" />
  <br />Nom du professeur/formateur
  <input name="auteur_cours" type="text" size="200" value="<?php if(isset($_SESSION['pseudo_utilisateur'])) {echo $_SESSION['pseudo_utilisateur'];}?>"/>
  <a href="javascript:void(0);" onclick="Ajout_block_chapitre();">Ajouter un chapitre ?</a>
  <input type="reset" value="Effacer" />
</form>

Voici le bloc pour ajouter un chapitre :

Code:

1
2
 
<div id="chapitre" style="display:none;"><b>Ajouter un chapitre</b><br /><form action="" />Titre du chapitre : <input type="text" name="titre_chapitre" /><br />Contenu du chapitre : <input type="text" name="contenu_chapitre" /></form></div>

Voici la fonction JAVASCRIPT :

Code:

1
2
3
4
5
6
7
 
<script type="text/javascript">
    function Ajout_block_chapitre()
    {
	document.getElementById("chapitre").style.display="block";
    }
</script>

Est-ce que ça va ?

05/10/2013, 14h35
Invité

Si tu te contentes d'afficher/masquer des <div> EXISTANTE, ça ne va pas le faire...
Autant les afficher directement.

NON.
Le principe est de CREER le div et les label / input / textarea DYNAMIQUEMENT via JavaScript.

Je t'ai dit de faire une recherche. L'as-tu faite ? J'en doute...
Voici un lien parmi d'autres.

Voici la fonction JAVASCRIPT :

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
 
function ajout(element){
      var formulaire = window.document.formulaire_poster_cours_tp;
      // On clone le bouton d'ajout
      var ajout = element.cloneNode(true);
      // Crée un nouvel élément de type "input"
      var champ = document.createElement("input");
      // Les valeurs encodée dans le formulaire seront stockées dans un tableau
      champ.name = "champs[]";
      champ.type = "text";
 
      var sup = document.createElement("input");
      sup.value = "supprimer un champ";
      sup.type = "button";
      // Ajout de l'événement onclick
      sup.onclick = function onclick(event)
         {suppression(this);};
 
      // On crée un nouvel élément de type "p" et on insère le champ l'intérieur.
      var bloc = document.createElement("p");
      bloc.appendChild(champ);
      formulaire.insertBefore(ajout, element);
      formulaire.insertBefore(sup, element);
      formulaire.insertBefore(bloc, element);
   }
 
   function suppression(element){
   var formulaire = window.document.formulaire_poster_cours_tp;
 
   // Supprime le bouton d'ajout
   formulaire.removeChild(element.previousSibling);
   // Supprime le champ
   formulaire.removeChild(element.nextSibling);
   // Supprime le bouton de suppression
   formulaire.removeChild(element);
}

Voici le formulaire :

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
 
<form action="" method="post" name="formulaire_poster_cours_tp" id="formulaire_poster_cours_tp">
  <b>Poster un Cours/TP</b> <br />
  <u>Matière :</u>
  <select name="matieres">
    <?php
// Variables de session - DEBUT
$query_recuperation_identifiant_connecte=$_SESSION['id_utilisateur'];
// Variables de session - FIN
$matiere = "SELECT matiereenseignee_utilisateur FROM test_site_utilisateur WHERE id_utilisateur='$query_recuperation_identifiant_connecte'"; 
$result = mysql_query($matiere) or die("Erreur sur la requête SQL concernant la matière du professeur.");
echo '<option value="">Choisissez votre matière.</option>';
while ($row=mysql_fetch_array($result)) // mysql_fetch_array = Retourne une ligne de résultat MySQL sous la forme d'un tableau associatif, d'un tableau indexé, ou les deux
{ 
 echo '<option value="'.$row['0'].'">'.$row['0'].'</option>';
}  
?>
  </select>
  <br />
  <u>Classe :</u>
  <select name="classes">
    <?php
          // A modifier
$classes = "SELECT classe_utilisateur FROM test_site_utilisateur,  test_site_classe WHERE classe_utilisateur=classe_nom"; 
$result = mysql_query($classes) or die("Erreur sur la requête SQL concernant les classes.");
echo '<option value="">Choisissez une de vos classes.</option>';
while ($row=mysql_fetch_array($result)) // mysql_fetch_array = Retourne une ligne de résultat MySQL sous la forme d'un tableau associatif, d'un tableau indexé, ou les deux
{ 
 echo '<option value="'.$row['0'].'">'.$row['0'].'</option>';
} ?>
  </select>
  <br />
  Date de publication
  <input type="text" name="date_publication_tp" size="200" value='<?php $jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");$dateDuJour = $jour[date("w")]." ".date("d")." ".$mois[date("n")]." ".date("Y"); echo $dateDuJour;?>'/>
  <br />
  Date de clôture des validations de ce Cours/TP (Pas obligatoire)
  <input type="date" name="date_cloture_validation_cours_tp" />
  <br />
  Titre
  <input name="titre_cours_tp" type="text" size="200" />
  <br />
  Nom du professeur/formateur
  <input name="auteur_cours" type="text" size="200" value="<?php if(isset($_SESSION['pseudo_utilisateur'])) {echo $_SESSION['pseudo_utilisateur'];}?>"/>
  <input type="button" onclick="ajout(this);" value="Ajouter un chapitre"/>
  <input type="reset" value="Effacer" />
</form>

Il faudrait lors de l'ajout d'une zone de texte, ajouter deux textes : Titre du chapitre, Contenu du chapitre et ajouter une autre zone de texte pour pouvoir saisir le contenu du chapitre, la nommer pour pouvoir l'utiliser lors du traitement php.

05/10/2013, 15h38
vinceom92

Le javascript est le langage que j'utilise le moins, je fais des recherches... Sur les formulaires dynamique avec la gestion du name pour pouvoir ensuite traiter les champs en PHP...

J'ai trouvé ces liens :
- http://www.saaraan.com/2013/03/addre...ly-with-jquery
- http://www.icietla.net/plugin-jquery...laire-clonable
05/10/2013, 15h58
Invité

Oui, notamment le 2ème lien : Plugin jQuery : Clonable
Ca peut être un moyen rapide d'arriver à tes fins, sans avoir trop de connaissance en jQuery.

Par contre, cette discussion n'a plus rien à voir avec le forum PHP.

Je vais demander à ce qu'elle soit redirigée dans le forum JavaScript ou jQuery.

Dois-je faire quelque chose pour déplacer cette discussion ?

Sinon, je pense que j'ai réussi à insérer le plugin "Clonage".

Voici les codes :
dans le head :

Code:

1
2
3
4
5
6
7
8
<script type="text/javascript" src="../ressources_site/javascript/jquery.min.js"></script>
<link href="../ressources_site/css/jquery.icietla.clonable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../ressources_site/javascript/jquery.icietla.clonable.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".ajout_chapitre").clonable();
});
</script>

dans le body, voici l'intégralité du formulaire :

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
 
<form action="" method="post">
  <b>Poster un Cours/TP</b> <br />
  <u>Matière :</u>
  <select name="matieres">
    <?php
// Variables de session - DEBUT
$query_recuperation_identifiant_connecte=$_SESSION['id_utilisateur'];
// Variables de session - FIN
$matiere = "
SELECT matiereenseignee_utilisateur
FROM test_site_utilisateur
WHERE id_utilisateur='$query_recuperation_identifiant_connecte'"; 
$result = mysql_query($matiere)
or die("Erreur sur la requête SQL concernant la matière du professeur.");
echo '<option value="">Choisissez votre matière.</option>';
while ($row=mysql_fetch_array($result)) // mysql_fetch_array = Retourne une ligne de résultat MySQL sous la forme d'un tableau associatif, d'un tableau indexé, ou les deux
{ 
 echo '<option value="'.$row['0'].'">'.$row['0'].'</option>';
}  
?>
  </select>
  <br />
  <u>Classe :</u>
  <select name="classes">
    <?php
$classes = "
SELECT classe_utilisateur
FROM test_site_utilisateur,  test_site_classe
WHERE classe_utilisateur=classe_nom"; 
$result = mysql_query($classes)
or die("Erreur sur la requête SQL concernant les classes.");
echo '<option value="">Choisissez une de vos classes.</option>';
while ($row=mysql_fetch_array($result)) // mysql_fetch_array = Retourne une ligne de résultat MySQL sous la forme d'un tableau associatif, d'un tableau indexé, ou les deux
{ 
 echo '<option value="'.$row['0'].'">'.$row['0'].'</option>';
} ?>
  </select>
  <br />
  Date de publication
  <input type="text" name="date_publication_tp" size="200" value='<?php $jour = array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");$mois = array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");$dateDuJour = $jour[date("w")]." ".date("d")." ".$mois[date("n")]." ".date("Y"); echo $dateDuJour;?>'/>
  <br />
  Date de clôture des validations de ce Cours/TP (Pas obligatoire)
  <input type="date" name="date_cloture_validation_cours_tp" />
  <br />
  Titre
  <input name="titre_cours_tp" type="text" size="200" />
  <br />
  Nom du professeur/formateur
  <input name="auteur_cours" type="text" size="200" value="<?php if(isset($_SESSION['pseudo_utilisateur'])) {echo $_SESSION['pseudo_utilisateur'];}?>"/>
  <div class="ajout_chapitre">
    <label>Titre du chapitre :</label>
    <input type="text"  />
    <br />
    Contenu du chapitre :
    <textarea id="" rows="" cols=""></textarea>
    <label ><br />
      Question(s) du chapitre:</label>
    <textarea id="" rows="" cols=""></textarea>
  </div>
</form>

Ce qui me parait bizarre c'est quand je regarde le code source de la page si entre temps j'insère les deux zones de texte, il n'y a pas de différence.
Est-ce que c'est normal ?

Bonjour,

Bien que j'ai des doutes concernant l'ajout des zones de texte, aucun changement s'effectue dans le code source de la page, j'ai commencé le traitement PHP.

On est bien d'accord, je suis sur la page qui servira à poster des cours.

J'ai fait deux requêtes SQL pour récupérer les identifiants d'un cours et d'un chapitre :
- récupérer l'identifiant du cours créé :
Code:

1 2 3 4 SELECT id_cours FROM test_site_cours_v2 WHERE id_cours=)
. Je ne suis pas sûr que cette requête SQL doit être faite sur cette page puisque comment je fais pour récupérer l'identifiant d'un cours pas encore posté ?!
- récupérer l'identifiant du chapitre crée du cours
Code:

1 2 3 4 SELECT id_chapitre FROM test_site_chapitres_v2 WHERE id_chapitre=)
. Je ne suis pas sûr que cette requête SQL doit être faite sur cette page puisque comment je fais pour récupérer l'identifiant d'un chapitre pas encore posté ?!

J'ai fait trois requêtes SQL pour insérer un cours, un chapitre, une question.
- insertion d'un cours :
Code:

1 2 3 INSERT INTO test_site_cours_v2 (id_cours,titre_cours) VALUES ('idducoursafaire','$titre_cours_tp')
. Il faut que j'ai l'identifiant du cours.
- insertion d'un chapitre :
Code:

1 2 3 INSERT INTO test_site_chapitres_v2 (id_cours,titre_chapitre,contenu_chapitre) VALUES ('idducoursafaire','$titre_chapitre','$contenu_chapitre' WHERE id_cours = '$query_selection_identifiant_cours_tp' )
. $query_selection_identifiant_cours_tp=

Code:

1 2 3 SELECT id_cours FROM test_site_cours_v2 WHERE id_cours=)

.
- insertion des questions :
Code:

1 2 3 INSERT INTO test_site_questions_v2 (id_chapitre,titre_question,contenu_question) VALUES ('idduchapitreafaire','afaire','$questions_chapitre' WHERE id_chapitre = '$query_selection_identifiant_chapitre')
avec ce que tu m'as dit :

Code:

WHERE id_chapitre = '$query_selection_identifiant_chapitre'

.

Voici les

Code:

CREATE TABLE

des trois tables :
test_site_chapitres_v2 :
Code:

1 2 3 4 5 6 7 CREATE TABLE IF NOT EXISTS `test_site_chapitres_v2` ( `id_chapitre` int(11) NOT NULL AUTO_INCREMENT, `id_cours` int(11) NOT NULL, `titre_chapitre` varchar(255) CHARACTER SET utf8 NOT NULL, `contenu_chapitre` longtext CHARACTER SET utf8 NOT NULL, PRIMARY KEY (`id_chapitre`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
test_site_cours_v2 :
Code:

1 2 3 4 5 CREATE TABLE IF NOT EXISTS `test_site_cours_v2` ( `id_cours` int(11) NOT NULL AUTO_INCREMENT, `titre_cours` varchar(255) CHARACTER SET utf8 NOT NULL, PRIMARY KEY (`id_cours`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
test_site_questions_v2 :
Code:

1 2 3 4 5 6 7 8 CREATE TABLE IF NOT EXISTS ` test_site_questions_v2` ( `id_question` int(11) NOT NULL AUTO_INCREMENT, `id_chapitre` int(11) NOT NULL, `titre_question` varchar(255) CHARACTER SET utf8 NOT NULL, `contenu_question` varchar(255) CHARACTER SET utf8 NOT NULL, `reponse_question` varchar(255) CHARACTER SET utf8 NOT NULL, PRIMARY KEY (`id_question`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Je sais qu'il y a beaucoup de problèmes mais c'est pour te dire où j'en suis. Je suis même pas sûr que le clonage fonctionne avec les id.

PS : A mon avis :
- les deux requêtes SQL qui permettent de récupérer l'identifiant du cours et de récupérer l'identifiant d'un chapitre ne sont pas à mettre sur la page qui servira à poster des cours mais sur la page qui affichera le cours et les questions (avec les zones de textes correspondantes, le bouton qui permettra de valider la réponse de l'élève), non ?
- les trois requêtes SQL qui permettent d'insérer des cours,d'insérer des chapitres et d'insérer des questions sont au bon endroit, c'est-à-dire sur la page qui servira à poster un cours, non ? Elles nécessitent toutefois des modifications, surtout pour l'identifiant du cours et l'identifiant du chapitre mais aussi le titre des questions.

06/10/2013, 14h05
Invité

Citation:

Envoyé par vinceom92

..., aucun changement s'effectue dans le code source de la page,

C'est tout-à-fait normal, puisqu'il s'agit de modifications dynamique.
Le code source affiché ("ctrl" + "U" ne montre que le code initial).

Le code modifié est visible dans Firebug (sous Firefox) :
clic-droit puis "Inspecter élément avec Firbug".

Pour Chrome : clic-droit puis "Inspecter l'élément".
06/10/2013, 14h18
vinceom92

Citation:

Envoyé par jreaux62

C'est tout-à-fait normal, puisqu'il s'agit de modifications dynamique.
Le code source affiché ("ctrl" + "U" ne montre que le code initial).

Le code modifié est visible dans Firebug (sous Firefox) :
clic-droit puis "Inspecter élément avec Firbug".

Pour Chrome : clic-droit puis "Inspecter l'élément".

Je suis sous Chrome, quand je fais "Procéder à l'inspection de l'élément", il ajoute/supprime

Code:

<div class="ajout_chapitre clonable" data-clonable-id="1" style="display: block;">...</div>

.

En ce qui concerne le traitement PHP, comment faire pour traiter les éléments dynamiques ? En ce qui concerne les requêtes SQL (le message de ce matin), est-ce qu'on est d'accord ? Comment faire pour récupérer les identifiants d'un cours et d'un chapitre pour pouvoir les utiliser dans les requêtes SQL ?
J'imagine que pour récupérer les identifiants d'un cours et d'un chapitre, il faut faire une requête SQL sur la page qui affiche le cours qui sélectionnera l'identifiant du cours ou du chapitre, non ?

Je te mets les requêtes SQL.

Pour l'instant, je n'ai rien changé sur la page qui liste les cours. Est-ce qu'il faut faire des modifications sur cette page ?

Sur la page qui permet de poster des Cours/TP :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // Insertion du Cours/TP dans la base de données - Deuxième version $query_insertion_cours_tp=mysql_query(" INSERT INTO test_site_cours_v2 (titre_cours) VALUES ('$titre_cours_tp')") or die('Erreur lors de l\'insertion d\'un Cours/TP'.mysql_error()); // Envoie une requête à un serveur MySQL // Insertion des chapitres du Cours/TP dans la base de données - Deuxième version $query_insertion_chapitre_cours_tp=mysql_query(" INSERT INTO test_site_chapitres_v2 (titre_chapitre,contenu_chapitre) VALUES ('$titre_chapitre','$contenu_chapitre' WHERE id_cours = '$query_selection_identifiant_cours_tp' )") or die('Erreur lors de l\'insertion d\'un chapitre du Cours/TP'.mysql_error()); // Envoie une requête à un serveur MySQL, Récupération de l'identifiant du chapitre créé // Insertion des questions du Cours/TP dans la base de données - Deuxième version $query_insertion_question_cours_tp=mysql_query(" INSERT INTO test_site_questions_v2 (contenu_question) VALUES ('$questions_chapitre') WHERE t1.id_chapitre IN ( SELECT t1.id_chapitre FROM test_site_chapitres_v2 t1, test_site_cours_v2 t2 WHERE t1.id_cours=t2.id_cours'))") or die('Erreur lors de l\'insertion d\'un chapitre du Cours/TP'.mysql_error()); // Envoie une requête à un serveur MySQL, Récupération de l'identifiant du chapitre crée
J'ai l'erreur suivante :
Erreur lors de l'insertion d'un chapitre du Cours/TPYou have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'WHERE id_cours = '' )' at line 1.

Sur la page qui affiche un Cours/TP :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 // Récupération de l'identifiant du Cours/TP créé dans la base de données - Deuxième version $query_selection_identifiant_cours_tp=mysql_query(" SELECT t2.id_cours FROM test_site_chapitres_v2 t1, test_site_cours_v2 t2 WHERE t1.id_cours=t2.id_cours") or die('Erreur lors de la sélection de l\'identifiant du Cours/TP'.mysql_error()); // Envoie une requête à un serveur MySQL // Récupération de l'identifiant du chapitre du Cours/TP dans la base de données - Deuxième version $query_selection_identifiant_chapitre=mysql_query(" SELECT t1.id_chapitre FROM test_site_chapitres_v2 t1, test_site_cours_v2 t2 WHERE t1.id_cours=t2.id_cours") or die('Erreur lors de la sélection de l\'identifiant d\'un chapitre d\'un Cours/TP'.mysql_error()); // Envoie une requête à un serveur MySQL
Je n'ai pas fait la requête SQL qui permet de récupérer les questions. Comme tu peux le voir, j'ai fait des conditions que sur les identifiants.

Qu'en penses-tu ? Je suis sûr qu'il y a des erreurs car ça ne fonctionne pas.

A noter que sur la page qui permet de poster un Cours/TP, quand je clique sur le bouton pour ajouter un chapitre, un champs texte apparait (pour le titre du chapitre) dans lequel je peux écrire et deux éditeurs TINYMCE pour écrire le contenu du chapitre et les questions du chapitre... Quand je clique sur un éditeur TINYMCE pour écrire, il ne veut pas. En une phrase, je ne peux pas écrire dans les éditeurs TINYMCE clonés...

07/10/2013, 09h51
mandrake_of_mandregas

Bonjour,

à ta place je n'utiliserait aucun éditeur externe et je ne ferais pas confiance à l'utilisateur. il peut oublier de mettre un titre ou de formater convenablement son entrée de données.

Le mieux est de lui créer :

une une interface pour la rubrique cours. qui contient titre (input) et description (text area)
Une autre interface pour la rubrique chapitres qui contient cours (select box)
titre chapitre (input), description_chapitre (text_area)

Une autre interface pour les question qui contient : cours (select), chapitre (select qui dépend du cours selectionné, en utilisant ajax) puis titre_question puis description (text area)

après s'il y'a des réponses à gérer tu peux ajouter la rubrique réponses : cours (select), chapitre (select dépendant du cours), question (select dependant du chapitre) et puis réponse et statut_réponse (Vrai/Faux).
07/10/2013, 10h00
Invité

La discussion a été déplacée depuis le forum PHP vers le forum JavaScript.
07/10/2013, 19h34
vinceom92

Citation:

Envoyé par mandrake_of_mandregas

Bonjour,

à ta place je n'utiliserait aucun éditeur externe et je ne ferais pas confiance à l'utilisateur. il peut oublier de mettre un titre ou de formater convenablement son entrée de données.

Je teste le contenu des zones de texte en faisant des tests PHP, tu ne ferais pas comme ça mandrake_of_mandregas ?

Citation:

Envoyé par jreaux62

La discussion a été déplacée depuis le forum PHP vers le forum JavaScript.

Merci jreaux62 concernant mon message d'hier soir, qu'en penses-tu (bien que la discussion a été déplacée vers le forum JavaScript) ?
07/10/2013, 20h03
Invité
Je ne peux que te conseiller de rédiger à fond ta méthodologie de travail :
- enchainement des actions à réaliser à chaque étape ?
- de quoi tu auras besoin (Ajax ? ... ?) => cours Ajax
- quelles données doivent être transmises d'une étape à l'autre ?
- ...
Et aussi :
- vérification des données
- protection contre injection SQL => mysql_real_escape_string() puisque tu utilises mysql_
+ comprendre les messages d'erreur :

Citation:

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'xxxxxxxx = '' )' at line yyy.

La ligne de l'erreur est indiquée.
07/10/2013, 20h13
Invité

Si tu ne veux pas trop t'embêter, ou que tu penses que tes connaissances sont actuellement encore trop limitées (en JavaScript, Ajax,...),
tu peux déjà proposer une version SIMPLE, comportant DÈS LE DÉPART TOUS LES CHAMPS à remplir :

Citation:

"Rédigez votre cours"
Titre du cours : [input]
Auteur : [input]
Date : [input]
.... (autres ?)
Introduction : [textarea]
------------------------
"Chapitre 1"
Titre du chapitre 1 : [input]
Contenu du chapitre 1 : [textarea]
------
"Questions/Réponses"
Question 1-1 : [input]
Réponse 1-1 : [input]
Question 1-2 : [input]
Réponse 1-2 : [input]
Question 1-3 : [input]
Réponse 1-3 : [input]
Question 1-4 : [input]
Réponse 1-4 : [input]
Question 1-5 : [input]
Réponse 1-5 : [input]
------------------------
"Chapitre 2"
Titre du chapitre 2 : [input]
Contenu du chapitre 2 : [textarea]
------
"Questions/Réponses"
Question 2-1 : [input]
Réponse 2-1 : [input]
Question 2-2 : [input]
Réponse 2-2 : [input]
Question 2-3 : [input]
Réponse 2-3 : [input]
Question 2-4 : [input]
Réponse 2-4 : [input]
Question 2-5 : [input]
Réponse 2-5 : [input]
------------------------
... (autant de chapitre que tu veux : tu peux proposer jusqu'à 5-10 chapitres, par exemple)
------
... (autant de questions/réponses que tu veux par chapitre : tu peux proposer jusqu'à 5-10 questions par chapitre, par exemple)
------------------------
Conclusion : [textarea]
------------------------
"Valider" : [input(type=submit)]

Pas besoin d'Ajax ni de jQuery.
C'est très simple et rapide à mettre en place !
(en plus, ça évite à l'auteur de devoir cliquer sur des boutons pour ajouter des blocs... : il voit tout de suite la trame !)

Si des champs (Titre du chapitre, Question x-x) sont vides => inutile de les enregistrer.

Pour le reste, le système des 3 TABLE SQL fonctionne.

Pour peu que tu mettes les identifiants adéquates aux input/textarea, ce sera aussi très simple à Ajouter/modifier/supprimer en Bdd.

Comme tu le constates : tout est question de méthodologie ! (et de cogitation, en fonction de ses moyens !!)

Il faut savoir rester humble par rapport à ses connaissances ; se qui n'empêche pas, dans un 2ème temps, d'améliorer ses connaissances, et son script !

Médite sur cette maxime (pleine de poésie !) :

Citation:

"Quand on veut péter plus haut que son c..., on risque de puer derrière les oreilles."
09/10/2013, 08h13
vinceom92

Citation:

Envoyé par jreaux62

Si tu ne veux pas trop t'embêter, ou que tu penses que tes connaissances sont actuellement encore trop limitées (en JavaScript, Ajax,...),
tu peux déjà proposer une version SIMPLE, comportant DÈS LE DÉPART TOUS LES CHAMPS à remplir :

Pas besoin d'Ajax ni de jQuery.
C'est très simple et rapide à mettre en place !
(en plus, ça évite à l'auteur de devoir cliquer sur des boutons pour ajouter des blocs... : il voit tout de suite la trame !)

Si des champs (Titre du chapitre, Question x-x) sont vides => inutile de les enregistrer.

Pour le reste, le système des 3 TABLE SQL fonctionne.

Pour peu que tu mettes les identifiants adéquates aux input/textarea, ce sera aussi très simple à Ajouter/modifier/supprimer en Bdd.

Comme tu le constates : tout est question de méthodologie ! (et de cogitation, en fonction de ses moyens !!)

Il faut savoir rester humble par rapport à ses connaissances ; se qui n'empêche pas, dans un 2ème temps, d'améliorer ses connaissances, et son script !

Médite sur cette maxime (pleine de poésie !) :

Bonjour,

Tu as raison, je vais partir sur cette idée, je vais faire en sorte que le principal fonctionne. Après, on verra pour l'améliorer en ajoutant des boutons "Ajouter/Supprimer un chapitre", "Ajouter/Supprimer des questions".

Du coup puisque je mets en suspend la version en Javascript/Ajax, est-ce que j'ouvre une discussion sur le forum PHP et je ferme cette discussion ?
09/10/2013, 08h45
Invité

Bonjour,
si tu as d'autres questions, tu peux toujours ouvrir une autre discussion, en mettant celle-ci en lien.

Mais en l’occurrence, tout a été dit.
Ce n'est plus qu'un formulaire très ordinaire.

Prend soin de bien concevoir les identifiants, de telles sorte qu'il serait facile de les générer/traiter (plus tard) via Ajax, par exemple.

Bonjour,

Après avoir ouvert cette discussion http://www.developpez.net/forums/d13...-d-formulaire/, je n'arrive toujours pas à faire une boucle pour gérer le formulaire.

Mais, je reviens dans cette discussion pour vous demander si pour gérer les éléments clonés, il ne faut pas les traiter avec AJAX donc :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type='text/JavaScript'> function init_xhr() { if (window.XMLHttpRequest) // Firefox xhr = new XMLHttpRequest(); else { if (window.ActiveXObject) // Internet Explorer xhr = new ActiveXObject("Microsoft.XMLHTTP"); else // XMLHttpRequest non supporté par le navigateur { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } } return xhr; }
J'ai besoin de votre aide pour traiter ce formulaire (regardez dans l'autre sujet SVP).

Merci d'avance.

Fuseau horaire GMT +2. Il est actuellement 03h01.