Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1293 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1882217
charlelech​auve
Posté le 08-05-2009 à 20:37:35  profilanswer
 

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

mood
Publicité
Posté le 08-05-2009 à 20:37:35  profilanswer
 

n°1883703
gelatine_v​elue
Posté le 12-05-2009 à 14:36:06  profilanswer
 

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
n°1883899
charlelech​auve
Posté le 12-05-2009 à 23:19:47  profilanswer
 

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

n°1884039
gelatine_v​elue
Posté le 13-05-2009 à 11:01:20  profilanswer
 

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
n°1884110
charlelech​auve
Posté le 13-05-2009 à 13:21:43  profilanswer
 

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  
 

n°1888165
charlelech​auve
Posté le 26-05-2009 à 19:23:20  profilanswer
 

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

n°1888235
gelatine_v​elue
Posté le 26-05-2009 à 21:51:05  profilanswer
 

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
n°1888718
phosphorel​oaded
Posté le 27-05-2009 à 19:37:16  profilanswer
 

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

n°1889353
charlelech​auve
Posté le 29-05-2009 à 11:33:12  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Fixer la largeur maximale des lignes d'une page HTMLcoller des textes grâce à une touche
code recherche d'une page en htmlCreer un "pele mele" sur une page
Actualisation d'une page avec des imagesActualisation d'une page avec des images
Actualisation de la page / Cookiephp:récupérer des données d'une autre page
password pour page HTML/PHPMettre à jour une page toutes les heures
Plus de sujets relatifs à : Générer des schémas avec textes dans page web


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR