[Problème] Formulaire dynamique

19 janvier 2017 à 17:26:03

Bonsoir,

Je viens vers vous car j'ai un problème sur un projet professionnel. Pour me présenter rapidement : je suis en 2eme année du titre de niveau 2 "Concepteur Développeur Informatique". Donc je suis un développeur Junior. Je pense clairement que mon problème vient de ma méthodologie...

Présentation du projet:

C'est un outils Php utilisant le Framework Code Igniter (MVC) qui permet aux personnes internes à l'entreprise de faire des demandes de création de machines virtuelles. Le demandeur doit remplir un formulaire pour la configuration de sa VM. Il doit indiquer les informations générales (Filière, Activité, Projet, etc..) et ses informations techniques. Quand il rempli cette partie, les informations génère automatiquement une configuration minimale.

Exemple :

Le demandeur veut un serveur Windows. Il choisit le type d'OS et le nom de l'OS. Le nombre de vCPU, la quantité de RAM et les disques durs sont générés automatiquement.

Quand on choisit une base de donnée (par exemple "MySQL"), les informations se mettent à jour.

On peut modifier la configuration. Ajouter un disque dur, de la Ram, etc..

Une page de configuration (dans une fenêtre modale) permet de paramétrer les informations de la configuration minimale.

Problématique :

C'est la partie avec les disques durs qui me pose le plus gros problème. Aujourd'hui le système ne fonctionne pas correctement. Surement pour cause, ma façon de générer les lignes des disques durs. A chaque fois qu'on clique sur le "+", je rajoute les lignes avec du JavaScript. Donc tout ce fait côté client.

Et pour la configuration des bases de données, j'ai une fenêtre modale pour la configuration des bases de données dans lesquelles il y a une fenêtre modale par OS. Ce qui est très problématique et prise de tête au niveau du développement.

Ma grande question, est-ce que cette méthode fait partit des bonnes pratiques du développement MVC ? Et est-ce qu'il y a une meilleur méthode pour éviter les fenêtres modales en gardant le côté interactif. Est-ce que l'utilisation d'Ajax pour envoyer les événements au contrôleur et que se soit lui qui génère le html est une bonne solution ?

J'espère que mon explication est compréhensible. Si besoin, je peux mettre une partie du code et expliquer la disposition de mes fichiers.

Cordialement,

Anonyme

19 janvier 2017 à 20:57:20

Hum... Je ne comprends pas trop ta demande.

Est-ce que le bouton "+" pour ajouter un HDD fonctionne ?
Le serveur PHP reçoit les données ?
Ou bien est-ce plus une demande de conseil quant à la méthodologie ?

Novax.

thejocker9

19 janvier 2017 à 21:41:13

De se que j'ai comprit, sa ne pose aucun problème, tu va pushé tes inputs dans un array grace à HTML

<input name="dd[]" type="text" />
<input name="dd[]" type="text" />
...

Derrière en php tu récupère un array sur $_POST['dd'], te reste plus qu'a faire le traitement, à moins que je n'ai pas comprit ta question.
Dans se cas, il ne sert a rien d'envoyé les infos à php en ajax, tu ajoute les tags directement avec js, puis quand tu envoie le formulaire complet, php à tout se qu'il lui faut, plus qu'a traité.

-
Edité par thejocker9 19 janvier 2017 à 21:42:29

Les gens qu'on interroge, pourvu qu'on les interroge bien, trouvent d'eux-mêmes les bonnes réponses.

Anonyme

19 janvier 2017 à 21:58:55

Tout ce que tu sais à propos des règles de choix entre sa / se / ça / ce, et les terminaisons en -er / -é... Ne l'oublie pas... Mais il va falloir que tu inverses toutes tes connaissances en la matière...

thejocker9

19 janvier 2017 à 22:06:01

J'ai bien peur de ne pas bien comprendre ce que tu sous entends ?

Les gens qu'on interroge, pourvu qu'on les interroge bien, trouvent d'eux-mêmes les bonnes réponses.

Anonyme

19 janvier 2017 à 22:13:33

De ce que j'ai compris, ça ne pose aucun problème, tu va pusher tes inputs dans un array grace à HTML.

Derrière en php tu récupères un array sur $_POST['dd'], te reste plus qu'à faire le traitement, à moins que je n'ai pas compris ta question.

Dans ce cas, il ne sert a rien d'envoyer les infos à php en ajax, tu ajoutes les tags directement avec js, puis quand tu envoies le formulaire complet, php a tout ce qu'il lui faut, plus qu'a traiter.

La même faute... Partout...

Diliran

20 janvier 2017 à 15:00:26

Merci pour vos réponses.

Pour mieux illustrer le problème, j’ai fait un genre de diagramme de séquence qui explique ce qui ce passe au chargement de la page. Pour vous donner un exemple.

Au chargement de la page, on appel la fonction hddPanel(osType) situé dans hdd.js, qui injecte l’HTML du formulaire (en jQuery avec .html()) dans la Vue. Par défaut, “osType” est “Windows”, donc les disques vont avoir comme lettres “C:”, “D:”, “E:”, ..
create.js détecte le changement de type d’os (ex : Linux) et l’envoie (avec Ajax) au contrôleur. Le contrôleur récupère osType et l’envoie au modèle. Le modèle le récupère, envoie une requête à la base de données pour récupérer la liste des systèmes d’exploitations disponible et la retourne au contrôleur.

Le contrôleur récupère la liste est parse à une vue oschoice_view. Elle contient :

<label for="text" class="col-lg-4 control-label">Système d'exploitation</label>
    <div class="col-lg-8">
    	<select id="vm_os" class="form-control">
    		{table_os}
    			<option value="{os_name}">{os_name}</option>
    		{/table_os}
    		<option>Autre ...</option>
    	</select>
   </div>

( déjà, à partir de là je me rend compte que j’utilise des méthodes différentes .. ) et la vue est rafraîchie. En parallèle, mon contrôleur envoie le 1er élément de la liste à create.js.

create.js traite et envoie au contrôleur le nom de l’os. Le contrôleur envoie au modèle. Le modèle récupère en base de données, la config minimale lié à l’OS et la retourne au contrôleur. Le contrôleur traite les données et le parse dans la vue confmin_view contenant :

<div id="confMin_osType" class="hidden" value="{$os_type}"></div>
	<div class="row ">
		<div class="form-group">
			<label for="text" class="col-lg-4 control-label">Nombre de vCPU</label>
			<div class="col-lg-8">
				<input class="form-control" id="vm_vcpu_req"  type="number" value="" required/>
				<div class="help-block with-errors"></div>
		 	</div>
		</div>
	</div>
		
	<div class="row ">
		<div class="form-group">
			<label for="text" class="col-lg-4 control-label">Quantité de mémoire RAM</label>
			<div class="col-lg-8">
				<div class="input-group">
		            <input class="form-control" id="vm_ram_req" type="number" value="" required min="0"/>
	                <div class="input-group-addon" >Go</div>
	             </div>
	             <div class="help-block with-errors"></div>
			 </div>
		 </div>
	</div>
	
	<div id="panelHdd"></div>

Et comme pour la liste des systèmes d’exploitations, create.js rafraîchie la partie du formulaire lié à la configuration.

Create.js traite et envoie le nom de l’OS au contrôleur. Le contrôleur, au modèle. Le modèle retourne le tableau des disques durs au contrôleur. Et le contrôleur converti le tableau en JSON et le retourne à create.je
Create.js récupère le JSON pour l’envoyer à hdd.js. Enfin, hdd.js récupère, traite et injecte le code html du tableau dans confmin_view

Je vois que j’ai encore quelques modifications à faire mais est-ce que, dans l’idée, cette méthode s’approche des bonnes pratiques ?

Merci,

Cordialement,