Discussion :

[vinceom92]

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

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="exercice">

et se terminent par

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

</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 sql :

Sélectionner tout - Visualiser dans une fenêtre à part

LIKE

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="exercice">

et se termine par

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

</div>

dans un champs (avec comme type

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

LONGTEXT

) SQL ?

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

[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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1>

jusqu'à

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

<h1>Titre</h1>

jusqu'à

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

.
Pour les exercices : actuellement, ça fait

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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,...)

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.

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

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

[vinceom92]

Bonjour,

Ok, on va partir sur cette idée.

Voici les trois

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

CREATE TABLE

:

test_site_cours_v2 :

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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"