Générer des schémas avec textes dans page web

Générer des schémas avec textes dans page web - HTML/CSS - Programmation

Marsh Posté le 08-05-2009 à 20:37:35    

Bonjour,
 
je souhaite créer un site web qui consiste à faciliter l'élaboration de comptes rendus de TP (de chimie, biochimie et autre).  
 
Dans un premier temps, ce site ne servira qu'a générer des schémas de dosage. En effet, il est parfois fatiguant de redessiner sur le PC chaque schéma de dosage, surtout lorsque le TP en contient une multitude. (dans un second temps, j'essayerais d'y integrer un programme qui calcul les concentrations en fonction des produits et chutes de burettes)  
 
Donc comme vous pouvez le voir sur la photo ci jointe, il y aura divers images, pour le style et le type de materiel à modéliser, qu'il faudra sélectionner (en cliquant sur un des points en dessous des images; je ne me rappel plus du nom^^)
 
Une fois le type et le style de materiel choisi, comme vous le voyez sur la photo, je souhaite créer des zones de texte à remplir par l'utilisateur.
 
Une fois apres avoir cliqué sur le bouton "Valider", je souhaite que mon site génère le schéma demandé afin que l'utilisateur puisse copier cette image (au format jpg ou autre) qu'il pourra coller tres facilement dans son compte rendu (donc open office, word, ...).
 
Donc comme vous le voyez sur le fichier que j'ai mis en liens, le texte que l'utilisateur à tapé dans la zone de texte doit apparaitre sur le schéma dans l'accolade (si possible je souhaiterais que l'accolade grandisse en fonction du nombre de ligne)
 
Mon probléme : je ne suis qu'un débutant ! J'ai reussi à faire un site en HTML où j'ai des connaissances de base dans ce type de langage. Donc en gros je sais créer des sites tres simple, mais dans ce que je souhaite faire sur ce site je ne sais pas :
- comment faire générer mon schéma en fonction des types et styles  de matériel cochés  
- créer ces zones de texte à remplir par l'utilisateur
- faire que ces textes tapés par l'utilisateur appparaissent sur le schéma généré (et si possible avec l'accolade grandissante)
 
Dans le fichier présent dans mon lien, ce que j'ai écris en vert est un exemple de ce qui pourrait etre tapé et selectionner par un utilisateur. Donc le bécher ainsi créé est un bécher car l'utilisateur a coché "becher" dans le choix du materiel.  
 
S'il vous plait, aidez moi !!
 
Merci :)
 
 
lien représentatif de mon idée : http://www.imagup.com/imgs/1241831689.html

Reply

Marsh Posté le 08-05-2009 à 20:37:35   

Reply

Marsh Posté le 12-05-2009 à 14:36:06    

Je vois deux solutions:
-Soit tu fais une image par composant et tu superposes le tout à la fin. Ex: Une image pour le becher, une image pour l'accolade, et du texte par dessus pour la légende. Bien que ce ne soit pas une seule image, en général le copier coller vers word marche bien. A tester.
-Soit tu génères l'image avec la légende en php, grâce à une librairie de type GD. Je te laisse regarder un tutoriel GD. Vérifier que ton hébergeur permet l'utilisation de GD.


Message édité par gelatine_velue le 12-05-2009 à 14:38:04
Reply

Marsh Posté le 12-05-2009 à 23:19:47    

AH, génial, je pensais qu'on me repondrais jamais :p. Je dois dire ce n'est peut etre pas une question tres simple.  
 
Je viens de regarder un tutoriel sur du GD, je dois dire, c'est plutot compliqué mais vu comme c'est détaillé c'est réalisable : ca permet la superposition de deux images dans mon cas.  
 
Donc en gros je viens de penser à un truc : dans un premier temps je voulais que, en fonction de ce que choisis l'utilisateur, par exemple il selectionne le becher + la burette, mon systeme me créeé une image avec mon becher et ma burette ensemble. Mais c'est tres compliqué alors qu'il y a beaucoup plus simple : je créer une bibliotheque d'image avec deja toutes les associations possibles (becher seul, becher + burette, ballon + burette, erlen + burette, ....) et en fonction de ce que selectionne l'utilisateur, ca lui sorte l'image contenant l'association désirée (pour le texte a l'interieur j'utiliserais le GD c'ets sur ou presque)
 
Donc j'ai une question peut etre un peu plus simple maintenant : comment faire (quelles sont les lignes de code a taper) pour qu'en fonction de ce que mon utilisateur a choisi (exemple : selection du becher + selection de la burette), ca lui sorte l'image de la bonne association (donc en gros si il selectionne les images A et B on lui affiche une image C existante) ?  
 
Merci beaucoup pour ta premiere reponse et encore plus merci si tu as le temps de repondre à cette autre question (et les autres aussi !! :p)
 
nb : je ne suis qu'un petit amateur du webmastering, donc excusez moi si je n'utilise pas les bons mots ou si au contraire je détail trop et que vous avez l'impression que je parle à des enfants  :D

Reply

Marsh Posté le 13-05-2009 à 11:01:20    

charlelechauve a écrit :


Donc j'ai une question peut etre un peu plus simple maintenant : comment faire (quelles sont les lignes de code a taper) pour qu'en fonction de ce que mon utilisateur a choisi (exemple : selection du becher + selection de la burette), ca lui sorte l'image de la bonne association (donc en gros si il selectionne les images A et B on lui affiche une image C existante) ?

 

Le formulaire de sélection sera composé dans ton cas de balises input.
ex:

Code :
  1. <form id="maform" action="resultat.php" method="GET">
  2. <input type="radio" name="materiel1" value="burette" /> burette<br/>
  3. <input type="radio" name="materiel1" value="becher" /> becher<br/>
  4. <input type="submit" value="Submit" />
  5. </form>
 

Note: J'ai pas vérifié ce formulaire, ya ptet des erreurs.
En l'occurence ton formulaire comporte deux choix. Au lieu de mettre des noms à droite (burette et becher) tu peux remplacer par des images.
Ce qui va se passer est que la page resultat.php va recevoir en GET (paramètre dans l'url) un paramètre nommé materiel1 et de valeur soit burette soit becher. Ex: resultat.php?materiel1=burette.

 

Dans cette page resultat.php il suffit de récupérer le paramètre en php par $_GET['materiel1'] (ceci vaudra donc "burette" ou "becher" ), et d'afficher l'image correspondante.

 

Pour un exemple dont on est sur il faut regarder ici: http://www.htmlcodetutorial.com/fo [...] ADIO.html.

 

ceci ne sert donc qu'a choisir un element. Pou en choisir deux il suffit de doubler les lignes de code:

 
Code :
  1. <form id="maform" action="resultat.php" method="GET">
  2. Permier:<br/>
  3. <input type="radio" name="materiel1" value="burette" /> burette<br/>
  4. <input type="radio" name="materiel1" value="becher" /> becher<br/>
  5. Deuxième:<br/>
  6. <input type="radio" name="materiel2" value="ballon" /> ballon<br/>
  7. <input type="radio" name="materiel2" value="erlen" /> erlen<br/>
  8. <input type="submit" value="Submit" />
  9. </form>
 

La page resultat recevra alors deux paramètres. Ex: resultat.php?materiel1=burette&materiel2=erlen.
Le sparamètres se récupèrent comme au dessus. IL suffit alors en php de faire un truc du style:

 

<?php
if ($_GET['materiel1']=="burette" && $_GET['materiel2']=="erlen" )
echo '<img src="burette+erlen.jpg"/>';

 

?>

 

etc...
Note: ce qui est code est salement codé, c'est juste pour donner une idée de comment procéder.


Message édité par gelatine_velue le 13-05-2009 à 11:02:16
Reply

Marsh Posté le 13-05-2009 à 13:21:43    

ok, je je vais donc essayé ca, avec le & et tout le reste.  
Pour le resultat je te tiendrais au courant dans 2 semaines si ca a marché car je suis en période d'exam je vasi aps avoir le temps de le mettre en application :(
 
Merciii beaucoup  
 

Reply

Marsh Posté le 26-05-2009 à 19:23:20    

Salut, j'ai fait la mise en page de mon site (fini les exams, au boulot !!), nikel, avec mes images, et en dessous de chaque image une case à cocher, puis en bas de la page j'ai mis un bouton "valider".
 
Voici la ligne de code présente dans ma page (je l'ai raccourci car à l'interieur j'ai inséré des zones de texte et autre donc si tu vois qu'il manque un </tr> ou autre c'est pas un souci car ma mise en page est nikel) :  
 

Code :
  1. <td height="20"><form id="form2" name="form2" method="GET" action="resultat.php">
  2.           <div align="center">
  3.             <input type="checkbox" name="materiel1" value="becher" />
  4.             </div>
  5.         </form>        </td>
  6.         <td><form id="form3" name="form3" method="GET" action="resultat.php">
  7.           <div align="center">
  8.             <input type="checkbox" name="materiel2" value="burette" />
  9.             </div>
  10.         </form>        </td>
  11.            
  12.           </table>
  13.   <br />
  14.     <input type="submit" name="button2" id="button2" value="Valider" /><br />
  15. <?php
  16. if ($_GET['materiel1']=="becher" && $_GET['materiel2']=="burette" )
  17. echo '<img src="burette+becher.jpg"/>';
  18. ?>


 
Cependant quand j'appuis sur le boutton valider il ne se passe rien (et pourtant l'image en question je l'ai copié dans le meme dossier que mon index.html ainsi que dans mon dossier image où toutes mes autres images sont presentes)
 
Alors je ne trouve pas la solution... mais j'ai plusieurs hypotheses :
-il faut que je specifie quelque part le chemin d'acces de mon image
-il faut que j'"edite" mon bouton valider"
-mes lignes de codes sont fausses
-tout ^^
 
Voici ce que tu m'as dit l'autre jour :
 

Citation :

La page resultat recevra alors deux paramètres. Ex: resultat.php?materiel1=burette&materiel2=erlen.


 
Peut etre que c'est ca que je n'arrive pas a faire (nb : je n'ai tapé cette phrase nul part, faut il le faire ou c'est le navigateur qui le fait tout seul ?  Et sinon ne t'inquiete pas j'ai modif des trucs, materiel1=becher et materiel2=burette chez moi :p)
 
 
Merci beaucoup pour tout ce que tu as fais et encore plus si tu continue  :D

Reply

Marsh Posté le 26-05-2009 à 21:51:05    

C'est normal qu'il ne se passe rien.
 - Tu as fait deux formulaires (balises form), avec dans chacune un champ input de type checkbox. Il ne faut qu'une seule balise form avec les deux champs de type checkbox et le champ de type input.
 - Ton bouton type submit doit être impérativement à l'intérieur d'une balise form, et non pas seul à l'abandon.

 

Code corrigé:

 
Code :
  1. <td height="20"><form id="form2" name="form2" method="GET" action="resultat.php">
  2.           <div align="center">
  3.             <input type="checkbox" name="materiel1" value="becher" />
  4.             </div>
  5.      </td>
  6.         <td>
  7.           <div align="center">
  8.             <input type="checkbox" name="materiel2" value="burette" />
  9.             </div>
  10.             <input type="submit" name="button2" id="button2" value="Valider" /><br />
  11.         </form>       
  12.       </td>
  13.            
  14.       </table>
  15.   <br />
  16. <?php
  17. if ($_GET['materiel1']=="becher" && $_GET['materiel2']=="burette" )
  18. echo '<img src="burette+becher.jpg"/>';
  19. ?>
 

Il faut que la page que tu écris soit nommée resultat.php pour que ça fonctionne. Au moment de valider le formulaire le navigaur va te rediriger vers la page resultat.php (c'est à dire elle même) en lui passant tout seul les paramètres sélectionnés. L'url dans la barre d'adresse devrait alors se voir ajoutée les paramètres saisis. Le code php devrait les interpréter si tu as un serveur apache qui tourne sur la machine et qui est bien configuré. ( a moins qu'il n'y en ait un d'inclus d'office dans dreamweaver, mais j'en doute).


Message édité par gelatine_velue le 26-05-2009 à 21:55:22
Reply

Marsh Posté le 27-05-2009 à 19:37:16    

http://www.gliffy.com/examples/technical/ ?
Tu dois pouvoir te préparer des templates avec chacun des montages déjà en place et plus que le texte et les flèches à placer.
 
Ou sur ton PC les logiciels libres Dia et Inkscape (regarde sur Framasoft).

Reply

Marsh Posté le 29-05-2009 à 11:33:12    

J'ai pas bien saisi l'utilité de gliffy pour mon probleme ; il sert juste à fabriquer des schémas, non ?  :heink:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed