Tutoriel générateur de présentation

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Tutoriel générateur de présentation

Message par Cali93110 le Jeu 23 Avr 2015 - 21:41

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Voilà bien longtemps que j'avais testé cela sur un forum, et j'aurai besoin d'installer ce système à nouveau. Pourtant, pas moyen de remettre la main sur un tuto complet.

Pour être plus clair, c'est la même chose que ceci : http://forum.forumactif.com/t322387-generateur-de-presentation

que je recherche, mais copier/coller un code ne m'appartenant pas ne m'aidera pas à m'y retrouver, et je risque de perdre du temps.

Quelqu'un aurait-il donc un lien vers un tuto, ou bien pourrait me rapporter de rapides explications sur les étapes et le contenu du code de la page html principale ? Notamment au niveau du traitement des données.
A l'heure actuelle, je possède le HTML du résultat final d'une fiche de présentation remplie et envoyée. Et bien sûr, le formulaire ne doit être proposé seulement lorsque l'on clique sur "Nouveau" dans le sous-forum "Présentations des personnages" (je crois que ça se gère avec l'ID de ce sous-forum ?)

Merci d'avance !


Dernière édition par Cali93110 le Mar 28 Avr 2015 - 17:31, édité 1 fois

Cali93110
*****

Féminin
Messages : 510
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel générateur de présentation

Message par Scoubifitz le Jeu 23 Avr 2015 - 22:11

Bonjour ,

le résultat final est-il différent de celui proposé il y a quelques mois ?

http://forum.forumactif.com/t373772-creer-un-formulaire-pour-un-nouveau-sujet

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel générateur de présentation

Message par Cali93110 le Ven 24 Avr 2015 - 10:04

Ah non c'est bien ça ! Donc c'est bien ici que j'avais ouvert un topic à ce sujet. Je ne parvenais plus à remettre la main dessus.

Par contre, j'ai toujours un peu de mal pour le Javascript, afin d'obtenir le résultat escompté... D'autant plus que vous m'aviez conseillé de faire un tableau normal et de gérer en css ensuite. Aujourd'hui, la mise en page que j'ai est peut être un peut trop poussée pour s'arrêter au tableau.

Pouvez-vous m'aider, du coup ?

Voilà le code que j'ai actuellement. J'ai fait le formulaire de la page html pour l'instant.
Code:
<script type="text/javascript">
function CompleteMessage(form)
{
txtmessage="<div class='fiche'><img src='" + form.image.value + "' />\n"
+ "[table class='contentfiche'][tr][td class='titre tiers']PRENOM[/td]\n"
+ "[td class='titre tiers']ÂGE[/td]\n"
+ "[td class='titre tiers']SEXE[/td]\n"
+ "[/tr]\n[tr][td]" + form.nom.value + "[/td]\n"
+ "[td]" + form.age.value + "[/td]\n"
+ "[td]" + form.sexe.value + "[/td]\n"
+ "[/tr]\n[tr][td class='titre']CLAN[/td]\n"
+ "[td class='titre']RANG[/td]\n"
+ "[/tr]\n[tr][td]" + form.clan.value + "[/td]\n"
+ "[td]" + form.rang.value + "[/td]\n"
+ "[/tr]\n[/table]\n"
+ "[table class='contentfiche'][tr][td class='titre demi']CARACTÈRE[/td]\n"
+ "[td class='titre demi']HISTOIRE[/td]\n"
+ "[/tr]\n[tr][td height='300'][justify]" + form.caractere.value + "[/justify]\n"
+ "[/td]\n[td height='300'][justify]" + form.histoire.value + "[/justify]\n"
+ "[/td]\n[/tr]\n[/table]\n</div>";
 
form.message.value = txtmessage;
}
</script>
<form enctype="multipart/form-data" name="post" method="post" action="/post" style="padding: 5px 50px 5px 50px;" onsubmit="CompleteMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="f" value="8" />
<input type="hidden" name="subject" value="Inscription à l'évènement" />


<table class="tableauform" width="500" border="0">
  <tr>
    <td colspan="3"><h3>Identité du personnage</h3></td>
  </tr>
  <tr>
    <td width="250"><span>Url de l'avatar</span><br /><input type="text" id="image" value="" /></td>
    <td width="250"></td>
  </tr>
  <tr>
    <td width="250"><span>Nom</span><br /><input type="text" id="nom" value="" /></td>
    <td width="250"><span>Célébrité</span><br /><input type="text" id="celebrite" value="" /></td>
  </tr>
  <tr>
    <td width="250"><span>Prénom</span><br /><input type="text" id="prenom" value="" /></td>
    <td width="250"><span>Âge</span><br /><input type="text" id="age" value="" /></td>
  </tr>
  <tr>
    <td width="250"><span>Date de naissance</span><br /><input type="text" id="datenaissance" value="" /></td>
    <td width="250"><span>Lieu de naissance</span><br /><input type="text" id="lieunaissance" value="" /></td>
  </tr>
  <tr class="lignechoix">
    <td>
      <span>Type de sang</span><br />
      <label><input type="radio" id="sangpur" name="sangpur" value=""> Sang pur</label><br />
      <label><input type="radio" id="sangmele" name="sangmele" value=""> Sang-mêlé</label><br />
      <label><input type="radio" id="moldu" name="moldu" value=""> Ascendance Moldu</label><br />
      <label><input type="radio" id="cracmol" name="cracmol" value=""> Cracmol</label>
    </td>
    <td>
      <span>Rang</span><br />
      <label><input type="radio" id="eleve" name="eleve" value=""> Élève</label><br />
      <label><input type="radio" id="personnel" name="personnel" value=""> Personnel</label><br />
      <label><input type="radio" id="professeur" name="professeur" value=""> Professeur</label><br />
      <label><input type="radio" id="employe" name="employe" value=""> Employé</label><br />
      <label><input type="radio" id="autre" name="autre" value=""> Autre</label>
    </td>
  </tr>
  <tr>
    <td colspan="2"><span>Caractère - 20 lignes min.</span><br />
      <textarea id="caractere" value="" style="width: 350px; height: 250px;" ></textarea>
    </td>
    <td colspan="2"><span>Histoire - 30 lignes min.</span><br />
      <textarea id="histoire" value="" style="width: 350px; height: 250px;"></textarea>
    </td>
  </tr>
</table>
<br />
<table class="tableauform" width="500" border="0">
  <tr>
    <td colspan="3"><h3>La baguette</h3></td>
  </tr>
  <tr>
    <td width="250"><span>Bois</span><br /><input type="text" id="boisbaguette" value="" /></td>
    <td width="250"><span>Composant</span><br /><input type="text" id="composantbaguette" value="" /></td>
    <td width="250"><span>Taille</span><br /><input type="text" id="tailebaguette" value="" /> cm</td>
  </tr>
</table>
<br />
<table class="tableauform" width="500" border="0">
  <tr>
    <td colspan="2"><h3>L'animal</h3></td>
  </tr>
  <tr>
    <td width="250"><span>Nom</span><br /><input type="text" id="nomanimal" value="" /></td>
  </tr>
  <tr>
    <td width="250">
      <label><input type="radio" id="chat" name="chat" value=""> Chat</label>
      <label><input type="radio" id="hibou" name="hibou" value=""> Hibou</label>
      <label><input type="radio" id="rat" name="rat" value=""> Rat</label>
      <label><input type="radio" id="crapeau" name="crapeau" value=""> Crapeau</label>
    </td>
  </tr>
</table>
<br />
<center><input type="submit" value="Envoyer" name="post" /></center><br />
* L'avatar doit faire 200*320<br /></form>

Ma mise en page finale doit ressembler à ceci :
http://i19.servimg.com/u/f19/12/03/49/16/captur10.png

Avec ce code HTML :


Et ce code CSS :


Par ailleurs, à quoi correspondent les premiers + en début de ligne, dans la partie JS ? Merci beaucoup ! Smile

Cali93110
*****

Féminin
Messages : 510
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel générateur de présentation

Message par Cali93110 le Dim 26 Avr 2015 - 9:35

Up.

Cali93110
*****

Féminin
Messages : 510
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel générateur de présentation

Message par Scoubifitz le Dim 26 Avr 2015 - 23:17

bonsoir,

le code corrigé :

Code:
<script type="text/javascript">
function CompleteMessage(form)
{
var txtmessage="<div class='fiche'>\n\n"
+ "<div class='containerphoto'>\n"
+ "<span class='nomperso'>" + form.nom.value + " " + form.prenom.value + "</span>"
+ "<span class='feat'>" + form.celebrite.value + "</span>"
+ "<img src='" + form.image.value + "' class='photoperso' />"
+ "<div class='identity'>\n"
+ "Date de naissance : " + form.datenaissance.value + "\n"
+ "Lieu de naissance : " + form.lieunaissance.value + "\n"
+ "Âge : " + form.age.value + "\n";
for(var i = 0; i < form.sang.length; i++)
{
if(form.sang[i].checked) { txtmessage += form.sang[i].value + '\n'; }
}
txtmessage += "\n";
for(var j = 0; j < form.rang.length; j++)
{
if(form.rang[j].checked){ txtmessage += form.rang[j].value + '\n'; }
}
txtmessage += "\n</div>\n<div class='caractere'>"
+ "<span class='champs'>Caractère —</span> " + form.caractere.value
+ "</div>\n</div>\n<div class='histoire'>"
+ "<span class='champs'>Histoire —</span> " + form.histoire.value + "</div>\n\n"
+ "<div class='titre'>Baguette</div>\n"
+ form.boisbaguette.value + " — "
+ form.composantbaguette.value + " — "
+ form.taillebaguette.value + " cm \n\n"
+ "<div class='titre'>Animal</div>\n"
+ "[b]" + form.nomanimal.value + " —[/b] ";
for(var k = 0; k < form.animal.length; k++)
{
if(form.animal[k].checked)
{ txtmessage += form.animal[k].value + '\n'; }
}
txtmessage += "\n<div class='titre'>Admission</div>\n";
for(var l = 0; l < form.admis.length; l++)
{
if(form.admis[l].checked) { txtmessage += form.admis[l].value + '\n'; }
}
txtmessage += "\n</div>\n</div>\n";

form.message.value = txtmessage;
}
</script>
<form enctype="multipart/form-data" name="post" method="post" action="/post" style="padding: 5px 50px 5px 50px;" onsubmit="CompleteMessage(this)">
<input type="hidden" name="lt" value="0" />
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="topictype" value="0" checked="checked" />
<input type="hidden" name="message" value="" />
<input type="hidden" name="f" value="8" />
<input type="hidden" name="subject" value="Inscription à l'évènement" />

<table class="tableauform" width="500" border="0">
<tr>
<td colspan="2"><h3>Identité du personnage</h3></td>
</tr>
<tr>
<td colspan="2"><span>Url de l'avatar</span><br />
<input type="text" id="image" value="" /> * L'avatar doit faire 200*320</td>
</tr>
<tr>
<td width="160"><span>Nom</span><br /><input type="text" id="nom" value="" /></td>
<td><span>Célébrité</span><br /><input type="text" id="celebrite" value="" /></td>
</tr>
<tr>
<td><span>Prénom</span><br /><input type="text" id="prenom" value="" /></td>
<td><span>Âge</span><br /><input type="text" id="age" value="" /></td>
</tr>
<tr>
<td><span>Date de naissance</span><br /><input type="text" id="datenaissance" value="" /></td>
<td><span>Lieu de naissance</span><br /><input type="text" id="lieunaissance" value="" /></td>
</tr>
<tr class="lignechoix">
<td valign="top">
<span>Type de sang</span><br />
<label><input type="radio" name="sang" value=" Sang pur" /> Sang pur</label><br />
<label><input type="radio" name="sang" value=" Sang-mêlé" /> Sang-mêlé</label><br />
<label><input type="radio" name="sang" value=" Ascendance Moldu" /> Ascendance Moldu</label><br />
<label><input type="radio" name="sang" value=" Cracmol" /> Cracmol</label>
</td>
<td>
<span>Rang</span><br />
<label><input type="radio" name="rang" value="Élève" /> Élève</label><br />
<label><input type="radio" name="rang" value="Personnel" /> Personnel</label><br />
<label><input type="radio" name="rang" value="Professeur" /> Professeur</label><br />
<label><input type="radio" name="rang" value="Employé" /> Employé</label><br />
<label><input type="radio" name="rang" value="Autre" /> Autre</label>
</td>
</tr>
</table>
<br />
<table class="tableauform" width="500" border="0">
<tr>
<td colspan="2"><span>Caractère - 20 lignes min.</span><br />
<textarea id="caractere" value="" style="width: 350px; height: 250px;" ></textarea>
</td>
<td colspan="2"><span>Histoire - 30 lignes min.</span><br />
<textarea id="histoire" value="" style="width: 350px; height: 250px;"></textarea>
</td>
</tr>
</table>
<br />
<table class="tableauform" width="500" border="0">
<tr>
<td colspan="3"><h3>La baguette</h3></td>
</tr>
<tr>
<td width="250"><span>Bois</span><br /><input type="text" id="boisbaguette" value="" /></td>
<td width="250"><span>Composant</span><br /><input type="text" id="composantbaguette" value="" /></td>
<td width="250"><span>Taille</span><br /><input type="text" id="taillebaguette" value="" size="3" /> cm</td>
</tr>
</table>
<br />
<table class="tableauform" width="500" border="0">
<tr>
<td colspan="2"><h3>L'animal</h3></td>
</tr>
<tr>
<td width="250"><span>Nom</span><br /><input type="text" id="nomanimal" value="" /></td>
</tr>
<tr>
<td width="250">
<label><input type="radio" name="animal" value="Chat" /> Chat</label>
<label><input type="radio" name="animal" value="Hibou" /> Hibou</label>
<label><input type="radio" name="animal" value="Rat" /> Rat</label>
<label><input type="radio" name="animal" value="Crapaud" /> Crapaud</label>
</td>
</tr>
</table>
<h3>Admission</h3>
<p><input type="radio" name="admis" value="Je souhaite débourser 1.500 gallions et choisir ma Maison à Poudlard." />Je souhaite débourser 1.500 gallions et choisir ma Maison à Poudlard.<br />
<input type="radio" name="admis" value="Je ne débourse rien et laisse le Choixpeau m'attribuer une Maison." />Je ne débourse rien et laisse le Choixpeau m'attribuer une Maison.</p>
<br /><br />
<center><input type="submit" value="Envoyer" name="post" /></center><br />
</form>

Les "+" en début de chaque ligne sont des concatenations , elles sont là pour assembler des chaines de caractères .

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tutoriel générateur de présentation

Message par Cali93110 le Mar 28 Avr 2015 - 17:31

Bonjour,

Super, merci beaucoup pour la correction du code, ainsi que de l'explication. Je mets en résolu. Bonne continuation et encore merci.

Cali93110
*****

Féminin
Messages : 510
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum