Générateur de factures (Html/Css)

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

Résolu Générateur de factures (Html/Css)

Message par undertaker999 le Sam 6 Juil 2013 - 0:08

Bonjour, je vous explique le plus clairement possible mon problème, ainsi que les moyens utilisés pour résoudre sans résultat mon problème.
Afin d'être le plus précis et le plus clair possible, je me permettrai de séparer ma question en deux sections différentes.

1.

Le code 1:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-ca" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>LOGO</title>
<style type="text/css">
.auto-style6 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
}
.auto-style15 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 background-color: #dadfd8;
 font-variant: small-caps;
 text-align: center;
}
.auto-style17 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 background-color: #dadfd8;
 text-align: center;
}
.auto-style18 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 background-color: #dadfd8;
 text-align: right;
 font-variant: small-caps;
}
.auto-style1 {
 border-left: 1px solid #C0C0C0;
 border-top: 1px solid #C0C0C0;
 text-align: center;
 border-right-style: solid;
 border-right-width: 1px;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 font-variant: small-caps;
}
.auto-style13 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 background-color: #dadfd8;
 font-variant: small-caps;
 text-align: left;
}
.auto-style19 {
 border-right-width: 0;
 border-bottom-width: 0;
 border-left-color: #C0C0C0;
 border-left-width: 0;
 border-top-color: #C0C0C0;
 border-top-width: 0;
}
.auto-style21 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 text-align: center;
}
.auto-style22 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 text-align: left;
}
.auto-style23 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 text-align: right;
}
</style>
</head>

<body>

<table style="width: 70%; height: 750px;" class="auto-style19" align="left">
 <tr>
 <td colspan="5" style="height: 248px" >
 <table style="width: 100%" class="auto-style19">
 <tr>
 <td class="auto-style1" style="height: 75px; width: 30%;">[LOGO
100 * 200]</td>
 <td class="auto-style1" colspan="4" style="height: 75px; width: 70%;">FACTURE</td>
 </tr>
 <tr>
 <td class="auto-style13" style="width: 30%">[Nom de
l'entreprise]</td>
 <td class="auto-style15" style="width: 15%" rowspan="2"># de Facture</td>
 <td class="auto-style15" style="width: 15%" rowspan="2">DATE</td>
 <td class="auto-style15" style="width: 15%" rowspan="2">Code Client</td>
 <td class="auto-style15" style="width: 25%" rowspan="2">Client</td>
 </tr>
 <tr>
 <td class="auto-style13" style="width: 30%">[COntinent, Pays]</td>
 </tr>
 <tr>
 <td class="auto-style22" style="width: 30%; height: 44px;"> </td>
 <td class="auto-style21" style="width: 15%; height: 44px;">
 VSG[Date]</td>
 <td class="auto-style21" style="width: 15%; height: 44px;">
 [Date]</td>
 <td class="auto-style21" style="width: 15%; height: 44px;">
 #[#Client]</td>
 <td class="auto-style21" style="width: 25%; height: 44px;">[Nom
du Client]<br />
 [Continent, Pays]</td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td colspan="5" >
  </td>
 </tr>
 <tr>
 <td class="auto-style15" style="width: 10%">Code</td>
 <td class="auto-style15" style="width: 50%">Description</td>
 <td class="auto-style15" style="width: 10%">Quantité</td>
 <td class="auto-style15" style="width: 10%">PU /
 $ HT</td>
 <td class="auto-style15" style="width: 20%">Montant /
 $ HT</td>
 </tr>
 <tr>
 <td class="auto-style21" style="height: 50px; width: 10%;">0001</td>
 <td class="auto-style21" style="height: 50px; width: 50%;">[Produit]</td>
 <td class="auto-style21" style="height: 50px; width: 10%;">[Quantité]</td>
 <td class="auto-style21" style="height: 50px">[Prix unité]</td>
 <td class="auto-style21" style="height: 50px; width: 20%;">[Quantité *
Prix Unité]</td>
 </tr>
 <tr>
 <td class="auto-style6" style="height: 50px; width: 10%;"></td>
 <td class="auto-style6" style="height: 50px; width: 50%;"></td>
 <td class="auto-style6" style="height: 50px; width: 10%;"></td>
 <td class="auto-style6" style="height: 50px"></td>
 <td class="auto-style6" style="height: 50px; width: 20%;"></td>
 </tr>
 <tr>
 <td class="auto-style6" style="height: 50px; width: 10%;"></td>
 <td class="auto-style6" style="height: 50px; width: 50%;"></td>
 <td class="auto-style6" style="height: 50px; width: 10%;"></td>
 <td class="auto-style6" style="height: 50px"></td>
 <td class="auto-style6" style="height: 50px; width: 20%;"></td>
 </tr>
 <tr>
 <td class="auto-style6" colspan="2" rowspan="6"> </td>
 <td class="auto-style18" colspan="2">Sous-Total</td>
 <td class="auto-style23">[Quantité * Prix unité]</td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="2">Taxe de Vente Provinciale</td>
 <td class="auto-style23">[5% du sous-total]</td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="2">Taxe de Vente Fédérale</td>
 <td class="auto-style23">[10% du sous-total]</td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="2">Port &amp; Manutention</td>
 <td class="auto-style23">[Prix du transport]</td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="2">Frais de Douane</td>
 <td class="auto-style23">[Prix frais de douane]</td>
 </tr>
 <tr>
 <td class="auto-style15" colspan="2">Net à Payer</td>
 <td class="auto-style17">[Sous-Total + TVP + TVF + P&amp;M + FD]</td>
 </tr>
 <tr>
 <td class="auto-style6" colspan="2" rowspan="2"><em>Les conditions de vente sont
déterminées dans le contrat général de vente de l'entreprise. </em></td>
 <td colspan="3"> </td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="3">Vous êtes le patron © 2013</td>
 </tr>
 </table>

</body>

</html>

Le résultat attendu (Html + CSS) (Page Html offert par Forumactif): http://www.vous-etes-le-patron.net/h4-facturation
Le résultat réel à l'intérieur d'un message sur le forum: http://www.vous-etes-le-patron.net/t2782-test-de-facturation#11989

Les problèmes et tentatives:
a) On remarque que la facture se retrouve très loin en bas de l'écran.
- Je ne comprend pas d'où peut venir le problème. Il n'y a pas de saut de ligne, il n'y a pas de <div> superflu (Il fonctionne bien dans une page html). Le Html est bel et bien activé.
b) Le Css n'est pas géré.
- J'ai essayé d'héberger le code css avec archive-host. La prévisualisation fonctionne très bien, mais une fois envoyé, le résultat est décevant (aucun style).

--- Je vous demande donc votre aide pour corriger le problème (MERCI ! Very Happy) ----

2.

Le code 2:

Code:
 <div class="contenu_onglet" id="contenu_onglet_cat1">
    <span class="titre_article">Coût Total de la Transaction</span>


    <form action="" method="post" name="trans">
    <div align="center">
    <table>
    <tbody>
    <tr align="left" bgcolor="#eaeaea">
    <th align="left" colspan="5">
    <div align="center"><font color="#6b6b6b">SAISIE des données</font></div>
    </th>
    </tr>
    <tr bgcolor="#e0e0e0">
    <td align="center" colspan="4">Coût Total de la Transaction</td>
    </tr>
    <tr bgcolor="#e0e0e0">
    <td width="25%"><label>Quantité de produit<input size="5" name="Quantite" type="text" value="0" /> </label></td>
    <td width="25%"><label>Coût par unité<input size="5" name="Unite" type="text" value="0" /> </label></td>
    <td width="25%"><label>Coût pour le Transport<input size="5" name="Transport" type="text" value="0"/> </label></td>
    <td width="25%"><label>Coût pour la douane<input size="5" name="douane" type="text" value="0"/> </label></td>
    </label></td>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr align="left" bgcolor="#eaeaea">
    <th align="left" colspan="4">
    <div align="center"><font color="#6b6b6b">Résultats </font></div>
    </th>
    </tr>
    <tr bgcolor="#e0e0e0">
    <td align="left" width="100%">Coût Total de la Transaction <input size="5" name="transaction" type="text" /> $</td>
    </tr>
    </tbody>
    </table>
    </div>
    <p align="center"><input class="bouton" type="button" onClick="
    quantit =  parseInt(Somme=(parseInt(document.forms['trans'].Quantite.value)));
    unit =  parseFloat(Somme=(parseFloat(document.forms['trans'].Unite.value)));
    transp =  parseInt(Somme=(parseInt(document.forms['trans'].Transport.value)));
    douan =  parseInt(Somme=(parseInt(document.forms['trans'].douane.value)));
    transac = (quantit*unit)+((quantit*unit)*0.15)+transp+douan;
    document.forms['trans'].transaction.value=(Somme=Math.round((parseFloat(transac))*1000)/1000);
    " name="Submit" value="Calculer" /></p>

    <p align="center"><input type="button" value="Générer le code pour le copier" onclick="
    quantit = parseInt(Somme=(parseInt(document.forms['trans'].Quantite.value)));
    unit = parseFloat(Somme=(parseFloat(document.forms['trans'].Unite.value)));
    transp = parseInt(Somme=(parseInt(document.forms['trans'].Transport.value)));
    douan = parseInt(Somme=(parseInt(document.forms['trans'].douane.value)));
    prod = quantit*unit;
    tax = (quantit*unit)*0.15;
    transac = (quantit*unit)+tax+transp+douan;
    Volreel = Math.round(parseInt(Somme=(parseInt(transac)))*1000)/1000;
    document.trans.cod1.style.display='block';
    document.trans.cod1.value='<strong>Coût pour les produits : </strong>'+prod+' $\n<strong>Taxe (15%): </strong>'+tax+' $\n<strong>Douane: </strong>'+douan+' $\n<strong>Coût pour le transport: </strong>'+transp+' $\n<strong>Coût total pour la transaction:  </strong>'+transac+' $\n';document.getelementbyid('validate').disabled=(document.getelementbyid('code').value!='')?false:true;" />
    <input type="reset" value=" Réinitialiser la page"/><input type="button" name="lien" value="Retour au Forum" onClick="self.location.href='http://www.velp.monempire.net/'" />
    <br><br>
    <textarea class="post" style="width: 700px;" id="code" name="cod1" wrap="virtual" onselect="storecaret(this);" tabindex="3" cols="35" rows="25"  onkeyup="storecaret(this);document.getelementbyid('validate').disabled=(this.value!=''&&document.getelementbyid('code').value!='')?false:true;" onclick="storecaret(this);" style="width: 250px; height: 250px; border: 1px solid #98d0cd;" readonly="true">
    </textarea>
    <a href="http://www.velp.monempire.net">Retour au forum</a></p>
    </form>
    </div>
    <script type="text/javascript">
    //<!--
    var anc_onglet = 'cat1';
    change_onglet(anc_onglet);
    //-->
    </script>

      </div>
Générateur souhaité: http://www.vous-etes-le-patron.net/h12-generateur-complet-pour-comptable
Résultat réel: Je n'arrive pas du tout à coder la partie pour que le générateur fonctionne bien.

Je vous explique l'intérêt du générateur.
a) En entrant les données dans le générateur, celles-ci sont directement incluses dans la mise en forme de la facture et cela permet d'offrir une jolie mise en page au membre, sans qu'il n'ait à chercher à modifier le code.
b) Pour le moment, le générateur n'offre qu'une liste des résultats.
c) Je souhaiterais de tout cœur arriver à lier la mise en forme de la facture relever en 1 à ce générateur de sorte que le résultat du générateur donnerait un code qui se rapproche à celui relever en 1, mais avec les informations qui ont été entrées dans le générateur.
d) Je n'arrive pas à jumeler les deux. Les tentatives que j'ai fait n'ont pas abouties, je ne suis pas parvenue à faire apparaitre une donnée du générateur dans le code relever en 1. Si vous me le permettez, je me passerai de vous montrer mes tentatives au risque d'être plus complexe à comprendre.
e) Ce que j'ai compris: Évidemment, il faut ajouter des bandes de données dans le générateur. Les voici:
- Logo (Lien image) entre les balises <img> => donne une image sur la facture (Si possible, mettre une limitation de taille de 100*200)
- Nom de mon entreprise
- Mon continent
- Mon Pays
- La Date
- Le numéro du client
- Le nom de l'entreprise du client
- Le continent du client
- Le pays du client
- Le nom du produit
- La quantité du produit
- Le prix à l'unité du produit
- Le coût pour le transport et la manutention
- Les frais de douane
- Le taux en % de Taxe de vente provinciale
- Le taux en % de Taxe de vente fédérale

Ensuite, je comprends qu'il faut que le générateur interprète les données de la sorte à répondre à d'autres catégories de données.

- [La quantité de produit] * [Le prix à l'unité] => Le Montant HT et le Sous-Total
- [Le sous-total] * [Le pourcentage de taxe de vente provinciale] = [Le montant de la taxe de vente provinciale]
- [Le sous-total] * [Le pourcentage de taxe de vente fédérale] = [Le montant de la taxe de vente fédérale]
-  [Sous-Total + TVP + TVF + P&M + FD] => Le montant net à payer

f) Les boutons - calculer - générer le code pour le copier - réinitialiser la page - retour au forum - doivent toujours se retrouver sur la page du générateur.

g) Croyez-vous pouvoir m'aider à réaliser ce projet? Est-il possible de réaliser un tel projet?

Je vous remercie déjà pour l'attention que vous porterez à mes questions et à mon problème. Smile 

Au plaisir,
VSG.


Dernière édition par undertaker999 le Ven 19 Juil 2013 - 1:06, édité 1 fois

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par undertaker999 le Dim 7 Juil 2013 - 5:40

Un petit up : votre aide sera très apprécié.
VSG.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Dim 7 Juil 2013 - 14:47

@undertaker999 a écrit:Bonjour, je vous explique le plus clairement possible mon problème, ainsi que les moyens utilisés pour résoudre sans résultat mon problème.
Afin d'être le plus précis et le plus clair possible, je me permettrai de séparer ma question en deux sections différentes.

1.

Le code 1:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-ca" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>LOGO</title>
<style type="text/css">
.auto-style6 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
}
.auto-style15 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 background-color: #dadfd8;
 font-variant: small-caps;
 text-align: center;
}
.auto-style17 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 background-color: #dadfd8;
 text-align: center;
}
.auto-style18 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 background-color: #dadfd8;
 text-align: right;
 font-variant: small-caps;
}
.auto-style1 {
 border-left: 1px solid #C0C0C0;
 border-top: 1px solid #C0C0C0;
 text-align: center;
 border-right-style: solid;
 border-right-width: 1px;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 font-variant: small-caps;
}
.auto-style13 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 background-color: #dadfd8;
 font-variant: small-caps;
 text-align: left;
}
.auto-style19 {
 border-right-width: 0;
 border-bottom-width: 0;
 border-left-color: #C0C0C0;
 border-left-width: 0;
 border-top-color: #C0C0C0;
 border-top-width: 0;
}
.auto-style21 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 text-align: center;
}
.auto-style22 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 text-align: left;
}
.auto-style23 {
 border-left: 1px solid #C0C0C0;
 border-right-style: solid;
 border-right-width: 1px;
 border-top: 1px solid #C0C0C0;
 border-bottom-style: solid;
 border-bottom-width: 1px;
 text-align: right;
}
</style>
</head>

<body>

<table style="width: 70%; height: 750px;" class="auto-style19" align="left">
 <tr>
 <td colspan="5" style="height: 248px" >
 <table style="width: 100%" class="auto-style19">
 <tr>
 <td class="auto-style1" style="height: 75px; width: 30%;">[LOGO
100 * 200]</td>
 <td class="auto-style1" colspan="4" style="height: 75px; width: 70%;">FACTURE</td>
 </tr>
 <tr>
 <td class="auto-style13" style="width: 30%">[Nom de
l'entreprise]</td>
 <td class="auto-style15" style="width: 15%" rowspan="2"># de Facture</td>
 <td class="auto-style15" style="width: 15%" rowspan="2">DATE</td>
 <td class="auto-style15" style="width: 15%" rowspan="2">Code Client</td>
 <td class="auto-style15" style="width: 25%" rowspan="2">Client</td>
 </tr>
 <tr>
 <td class="auto-style13" style="width: 30%">[COntinent, Pays]</td>
 </tr>
 <tr>
 <td class="auto-style22" style="width: 30%; height: 44px;"> </td>
 <td class="auto-style21" style="width: 15%; height: 44px;">
 VSG[Date]</td>
 <td class="auto-style21" style="width: 15%; height: 44px;">
 [Date]</td>
 <td class="auto-style21" style="width: 15%; height: 44px;">
 #[#Client]</td>
 <td class="auto-style21" style="width: 25%; height: 44px;">[Nom
du Client]<br />
 [Continent, Pays]</td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td colspan="5" >
  </td>
 </tr>
 <tr>
 <td class="auto-style15" style="width: 10%">Code</td>
 <td class="auto-style15" style="width: 50%">Description</td>
 <td class="auto-style15" style="width: 10%">Quantité</td>
 <td class="auto-style15" style="width: 10%">PU /
 $ HT</td>
 <td class="auto-style15" style="width: 20%">Montant /
 $ HT</td>
 </tr>
 <tr>
 <td class="auto-style21" style="height: 50px; width: 10%;">0001</td>
 <td class="auto-style21" style="height: 50px; width: 50%;">[Produit]</td>
 <td class="auto-style21" style="height: 50px; width: 10%;">[Quantité]</td>
 <td class="auto-style21" style="height: 50px">[Prix unité]</td>
 <td class="auto-style21" style="height: 50px; width: 20%;">[Quantité *
Prix Unité]</td>
 </tr>
 <tr>
 <td class="auto-style6" style="height: 50px; width: 10%;"></td>
 <td class="auto-style6" style="height: 50px; width: 50%;"></td>
 <td class="auto-style6" style="height: 50px; width: 10%;"></td>
 <td class="auto-style6" style="height: 50px"></td>
 <td class="auto-style6" style="height: 50px; width: 20%;"></td>
 </tr>
 <tr>
 <td class="auto-style6" style="height: 50px; width: 10%;"></td>
 <td class="auto-style6" style="height: 50px; width: 50%;"></td>
 <td class="auto-style6" style="height: 50px; width: 10%;"></td>
 <td class="auto-style6" style="height: 50px"></td>
 <td class="auto-style6" style="height: 50px; width: 20%;"></td>
 </tr>
 <tr>
 <td class="auto-style6" colspan="2" rowspan="6"> </td>
 <td class="auto-style18" colspan="2">Sous-Total</td>
 <td class="auto-style23">[Quantité * Prix unité]</td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="2">Taxe de Vente Provinciale</td>
 <td class="auto-style23">[5% du sous-total]</td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="2">Taxe de Vente Fédérale</td>
 <td class="auto-style23">[10% du sous-total]</td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="2">Port & Manutention</td>
 <td class="auto-style23">[Prix du transport]</td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="2">Frais de Douane</td>
 <td class="auto-style23">[Prix frais de douane]</td>
 </tr>
 <tr>
 <td class="auto-style15" colspan="2">Net à Payer</td>
 <td class="auto-style17">[Sous-Total + TVP + TVF + P&M + FD]</td>
 </tr>
 <tr>
 <td class="auto-style6" colspan="2" rowspan="2"><em>Les conditions de vente sont
déterminées dans le contrat général de vente de l'entreprise. </em></td>
 <td colspan="3"> </td>
 </tr>
 <tr>
 <td class="auto-style18" colspan="3">Vous êtes le patron © 2013</td>
 </tr>
 </table>

</body>

</html>

Le résultat attendu (Html + CSS) (Page Html offert par Forumactif): http://www.vous-etes-le-patron.net/h4-facturation
Le résultat réel à l'intérieur d'un message sur le forum: http://www.vous-etes-le-patron.net/t2782-test-de-facturation#11989

Les problèmes et tentatives:
a) On remarque que la facture se retrouve très loin en bas de l'écran.
- Je ne comprend pas d'où peut venir le problème. Il n'y a pas de saut de ligne, il n'y a pas de <div> superflu (Il fonctionne bien dans une page html). Le Html est bel et bien activé.
b) Le Css n'est pas géré.
- J'ai essayé d'héberger le code css avec archive-host. La prévisualisation fonctionne très bien, mais une fois envoyé, le résultat est décevant (aucun style).

--- Je vous demande donc votre aide pour corriger le problème (MERCI ! Very Happy) ----

2.

Le code 2:

Code:
  <div class="contenu_onglet" id="contenu_onglet_cat1">
    <span class="titre_article">Coût Total de la Transaction</span>


    <form action="" method="post" name="trans">
    <div align="center">
    <table>
    <tbody>
    <tr align="left" bgcolor="#eaeaea">
    <th align="left" colspan="5">
    <div align="center"><font color="#6b6b6b">SAISIE des données</font></div>
    </th>
    </tr>
    <tr bgcolor="#e0e0e0">
    <td align="center" colspan="4">Coût Total de la Transaction</td>
    </tr>
    <tr bgcolor="#e0e0e0">
    <td width="25%"><label>Quantité de produit<input size="5" name="Quantite" type="text" value="0" /> </label></td>
    <td width="25%"><label>Coût par unité<input size="5" name="Unite" type="text" value="0" /> </label></td>
    <td width="25%"><label>Coût pour le Transport<input size="5" name="Transport" type="text" value="0"/> </label></td>
    <td width="25%"><label>Coût pour la douane<input size="5" name="douane" type="text" value="0"/> </label></td>
    </label></td>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr align="left" bgcolor="#eaeaea">
    <th align="left" colspan="4">
    <div align="center"><font color="#6b6b6b">Résultats </font></div>
    </th>
    </tr>
    <tr bgcolor="#e0e0e0">
    <td align="left" width="100%">Coût Total de la Transaction <input size="5" name="transaction" type="text" /> $</td>
    </tr>
    </tbody>
    </table>
    </div>
    <p align="center"><input class="bouton" type="button" onClick="
    quantit =  parseInt(Somme=(parseInt(document.forms['trans'].Quantite.value)));
    unit =  parseFloat(Somme=(parseFloat(document.forms['trans'].Unite.value)));
    transp =  parseInt(Somme=(parseInt(document.forms['trans'].Transport.value)));
    douan =  parseInt(Somme=(parseInt(document.forms['trans'].douane.value)));
    transac = (quantit*unit)+((quantit*unit)*0.15)+transp+douan;
    document.forms['trans'].transaction.value=(Somme=Math.round((parseFloat(transac))*1000)/1000);
    " name="Submit" value="Calculer" /></p>

    <p align="center"><input type="button" value="Générer le code pour le copier" onclick="
    quantit = parseInt(Somme=(parseInt(document.forms['trans'].Quantite.value)));
    unit = parseFloat(Somme=(parseFloat(document.forms['trans'].Unite.value)));
    transp = parseInt(Somme=(parseInt(document.forms['trans'].Transport.value)));
    douan = parseInt(Somme=(parseInt(document.forms['trans'].douane.value)));
    prod = quantit*unit;
    tax = (quantit*unit)*0.15;
    transac = (quantit*unit)+tax+transp+douan;
    Volreel = Math.round(parseInt(Somme=(parseInt(transac)))*1000)/1000;
    document.trans.cod1.style.display='block';
    document.trans.cod1.value='<strong>Coût pour les produits : </strong>'+prod+' $\n<strong>Taxe (15%): </strong>'+tax+' $\n<strong>Douane: </strong>'+douan+' $\n<strong>Coût pour le transport: </strong>'+transp+' $\n<strong>Coût total pour la transaction:  </strong>'+transac+' $\n';document.getelementbyid('validate').disabled=(document.getelementbyid('code').value!='')?false:true;" />
    <input type="reset" value=" Réinitialiser la page"/><input type="button" name="lien" value="Retour au Forum" onClick="self.location.href='http://www.velp.monempire.net/'" />
    <br><br>
    <textarea class="post" style="width: 700px;" id="code" name="cod1" wrap="virtual" onselect="storecaret(this);" tabindex="3" cols="35" rows="25"  onkeyup="storecaret(this);document.getelementbyid('validate').disabled=(this.value!=''&&document.getelementbyid('code').value!='')?false:true;" onclick="storecaret(this);" style="width: 250px; height: 250px; border: 1px solid #98d0cd;" readonly="true">
    </textarea>
    <a href="http://www.velp.monempire.net">Retour au forum</a></p>
    </form>
    </div>
    <script type="text/javascript">
    //<!--
    var anc_onglet = 'cat1';
    change_onglet(anc_onglet);
    //-->
    </script>

      </div>
Générateur souhaité: http://www.vous-etes-le-patron.net/h12-generateur-complet-pour-comptable
Résultat réel: Je n'arrive pas du tout à coder la partie pour que le générateur fonctionne bien.

Je vous explique l'intérêt du générateur.
a) En entrant les données dans le générateur, celles-ci sont directement incluses dans la mise en forme de la facture et cela permet d'offrir une jolie mise en page au membre, sans qu'il n'ait à chercher à modifier le code.
b) Pour le moment, le générateur n'offre qu'une liste des résultats.
c) Je souhaiterais de tout cœur arriver à lier la mise en forme de la facture relever en 1 à ce générateur de sorte que le résultat du générateur donnerait un code qui se rapproche à celui relever en 1, mais avec les informations qui ont été entrées dans le générateur.
d) Je n'arrive pas à jumeler les deux. Les tentatives que j'ai fait n'ont pas abouties, je ne suis pas parvenue à faire apparaitre une donnée du générateur dans le code relever en 1. Si vous me le permettez, je me passerai de vous montrer mes tentatives au risque d'être plus complexe à comprendre.
e) Ce que j'ai compris: Évidemment, il faut ajouter des bandes de données dans le générateur. Les voici:
- Logo (Lien image) entre les balises <img> => donne une image sur la facture (Si possible, mettre une limitation de taille de 100*200)
- Nom de mon entreprise
- Mon continent
- Mon Pays
- La Date
- Le numéro du client
- Le nom de l'entreprise du client
- Le continent du client
- Le pays du client
- Le nom du produit
- La quantité du produit
- Le prix à l'unité du produit
- Le coût pour le transport et la manutention
- Les frais de douane
- Le taux en % de Taxe de vente provinciale
- Le taux en % de Taxe de vente fédérale

Ensuite, je comprends qu'il faut que le générateur interprète les données de la sorte à répondre à d'autres catégories de données.

- [La quantité de produit] * [Le prix à l'unité] => Le Montant HT et le Sous-Total
- [Le sous-total] * [Le pourcentage de taxe de vente provinciale] = [Le montant de la taxe de vente provinciale]
- [Le sous-total] * [Le pourcentage de taxe de vente fédérale] = [Le montant de la taxe de vente fédérale]
-  [Sous-Total + TVP + TVF + P&M + FD] => Le montant net à payer

f) Les boutons - calculer - générer le code pour le copier - réinitialiser la page - retour au forum - doivent toujours se retrouver sur la page du générateur.

g) Croyez-vous pouvoir m'aider à réaliser ce projet? Est-il possible de réaliser un tel projet?

Je vous remercie déjà pour l'attention que vous porterez à mes questions et à mon problème. Smile 

Au plaisir,
VSG.

bonjour,

1 a) - pour ne pas avoir le vide au-dessus du tableau , il faut impérativement mettre le code sur une seule ligne ...
chaque retour à la ligne dans le code correspond à un retour à la ligne dans le messga .

voilà le tableau à placer dans le message :

Code:
<table style="width: 70%; height: 750px;" class="auto-style19" align="left"> <tr> <td colspan="5" style="height: 248px" > <table style="width: 100%" class="auto-style19"> <tr> <td class="auto-style1" style="height: 75px; width: 30%;">[LOGO 100 * 200]</td> <td class="auto-style1" colspan="4" style="height: 75px; width: 70%;">FACTURE</td> </tr> <tr> <td class="auto-style13" style="width: 30%">[Nom de l'entreprise]</td> <td class="auto-style15" style="width: 15%" rowspan="2"># de Facture</td> <td class="auto-style15" style="width: 15%" rowspan="2">DATE</td> <td class="auto-style15" style="width: 15%" rowspan="2">Code Client</td> <td class="auto-style15" style="width: 25%" rowspan="2">Client</td> </tr> <tr> <td class="auto-style13" style="width: 30%">[COntinent, Pays]</td> </tr> <tr> <td class="auto-style22" style="width: 30%; height: 44px;"> </td> <td class="auto-style21" style="width: 15%; height: 44px;"> VSG[Date]</td> <td class="auto-style21" style="width: 15%; height: 44px;">[Date]</td> <td class="auto-style21" style="width: 15%; height: 44px;">#[#Client]</td> <td class="auto-style21" style="width: 25%; height: 44px;">[Nom du Client]<br /> [Continent, Pays]</td> </tr> </table> </td> </tr> <tr> <td colspan="5" > </td> </tr> <tr> <td class="auto-style15" style="width: 10%">Code</td> <td class="auto-style15" style="width: 50%">Description</td> <td class="auto-style15" style="width: 10%">Quantité</td> <td class="auto-style15" style="width: 10%">PU / $ HT</td> <td class="auto-style15" style="width: 20%">Montant / $ HT</td> </tr> <tr> <td class="auto-style21" style="height: 50px; width: 10%;">0001</td> <td class="auto-style21" style="height: 50px; width: 50%;">[Produit]</td> <td class="auto-style21" style="height: 50px; width: 10%;">[Quantité]</td> <td class="auto-style21" style="height: 50px">[Prix unité]</td> <td class="auto-style21" style="height: 50px; width: 20%;">[Quantité * Prix Unité]</td> </tr> <tr> <td class="auto-style6" style="height: 50px; width: 10%;"></td> <td class="auto-style6" style="height: 50px; width: 50%;"></td> <td class="auto-style6" style="height: 50px; width: 10%;"></td> <td class="auto-style6" style="height: 50px"></td> <td class="auto-style6" style="height: 50px; width: 20%;"></td> </tr> <tr> <td class="auto-style6" style="height: 50px; width: 10%;"></td> <td class="auto-style6" style="height: 50px; width: 50%;"></td> <td class="auto-style6" style="height: 50px; width: 10%;"></td> <td class="auto-style6" style="height: 50px"></td> <td class="auto-style6" style="height: 50px; width: 20%;"></td> </tr> <tr> <td class="auto-style6" colspan="2" rowspan="6"> </td> <td class="auto-style18" colspan="2">Sous-Total</td> <td class="auto-style23">[Quantité * Prix unité]</td> </tr> <tr> <td class="auto-style18" colspan="2">Taxe de Vente Provinciale</td> <td class="auto-style23">[5% du sous-total]</td> </tr> <tr> <td class="auto-style18" colspan="2">Taxe de Vente Fédérale</td> <td class="auto-style23">[10% du sous-total]</td> </tr> <tr> <td class="auto-style18" colspan="2">Port &amp; Manutention</td> <td class="auto-style23">[Prix du transport]</td> </tr> <tr> <td class="auto-style18" colspan="2">Frais de Douane</td> <td class="auto-style23">[Prix frais de douane]</td> </tr> <tr> <td class="auto-style15" colspan="2">Net à Payer</td> <td class="auto-style17">[Sous-Total + TVP + TVF + P&amp;M + FD]</td> </tr> <tr> <td class="auto-style6" colspan="2" rowspan="2"><em>Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise. </em></td> <td colspan="3"> </td> </tr> <tr> <td class="auto-style18" colspan="3">Vous êtes le patron © 2013</td> </tr> </table>

b) - le CSS devra être placé dans la feuille de style du panneau admin :

Code:
.auto-style6 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.auto-style15 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
font-variant: small-caps;
text-align: center;
}
.auto-style17 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
text-align: center;
}
.auto-style18 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
text-align: right;
font-variant: small-caps;
}
.auto-style1 {
border-left: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
text-align: center;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
font-variant: small-caps;
}
.auto-style13 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #dadfd8;
font-variant: small-caps;
text-align: left;
}
.auto-style19 {
border-right-width: 0;
border-bottom-width: 0;
border-left-color: #C0C0C0;
border-left-width: 0;
border-top-color: #C0C0C0;
border-top-width: 0;
}
.auto-style21 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: center;
}
.auto-style22 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: left;
}
.auto-style23 {
border-left: 1px solid #C0C0C0;
border-right-style: solid;
border-right-width: 1px;
border-top: 1px solid #C0C0C0;
border-bottom-style: solid;
border-bottom-width: 1px;
text-align: right;
}

on peut naturellement simplifier le CSS et le tableau , on peut aussi mettre le tableau en BBcode pour éviter de tout mettre sur une seule ligne .

2 - si j'ai bien compris , vous voulez que ce tableau soit généré comme "le générateur du cout des transactions" , avec des champs à remplir ?



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: Générateur de factures (Html/Css)

Message par undertaker999 le Dim 7 Juil 2013 - 16:35

1- Merci beaucoup, votre nouveau code fonctionne parfaitement.
2- C'est exactement comme vous l'avez présenté.

Merci beaucoup pour votre aide. Smile
VSG.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par undertaker999 le Lun 8 Juil 2013 - 18:33

Petit up, pour ne pas me retrouver sur la deuxième page Wink

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Mar 9 Juil 2013 - 12:15

Vous n'êtes pas oublié , rassurez vous ! ^^

Il me faudra juste un peu de temps pour faire le générateur ... et bizarrement , le temps , c'est ce qui nous manque le plus en été ! What a Face 


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: Générateur de factures (Html/Css)

Message par undertaker999 le Mar 9 Juil 2013 - 19:17

Génial !

En effet, et je tiens à ce que vous en profitiez bien Very Happy

Bien à vous,
VSG.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Sam 13 Juil 2013 - 15:31

bonjour ,

désolé pour le retard de réponse ...

avant de fournir le générateur , je voudrais être sûr de ce que vous souhaitez , voici déjà la fiche à mettre dans la page HTML :

Code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>LOGO</title>
<style type="text/css">
#fact {
width: 800px;
margin:auto;   
}
#fact td {
border: 1px outset #999999;
padding:0 5px; 
}
#fact .caps {
font-variant: small-caps;
}
#fact .right {
text-align: right;
}
.center {
text-align: center;
}
#fact .bg {
background-color: #dadfd8;
}
#fact .bordernone {
border: none!important;
}
</style>
</head>
<script>
function calcul(form)
{
var quant1 = form.quant1.value;
var PUHT1 = form.PUHT1.value;
var STHT1 = Number(quant1*PUHT1);
form.STHT1.value = STHT1;
}
</script>
<body>
<form action="" method="post">
<table id="fact" border="0">
<tr>
<td class="caps center" style="height: 100px;">[LOGO 100 * 200]<br /><input type="text" class="caps" size="30" placeholder="[Url de l'image]" /></td>
<td class="caps center" colspan="4">FACTURE</td>
</tr>
<tr>
<td class="caps bg" style="width:210px"><input type="text" class="caps"  size="25" placeholder="[Nom de l'entreprise]" /></td>
<td class="caps center bg" style="width:110px" rowspan="2"># de Facture</td>
<td class="caps center bg" style="width:50px" rowspan="2">Date</td>
<td class="caps center bg" style="width:105px" rowspan="2">Code Client</td>
<td class="caps center bg" rowspan="2">Client</td>
</tr>
<tr>
<td class="caps bg"><input type="text" class="caps" size="25" placeholder="[Continent, Pays]" /></td>
</tr>
<tr>
<td class="center"> </td>
<td class="center"><input type="text" class="caps" size="10" placeholder="VSG[Date]" /></td>
<td class="center"><input type="text" class="caps" size="5" placeholder="[Date]" /></td>
<td class="center"><input type="text" class="caps" size="10" placeholder="#[#Client]" /></td>
<td class="center"><input type="text" class="caps" size="20" placeholder="[Nom du Client]" /><br />
<input type="text" class="caps" size="20" placeholder="[Continent, Pays]" /></td>
</tr>
</table><br />

<table id="fact" style="height: 500px;" border="0">
<tr>
<td class="caps center bg" style="width:50px">Code</td>
<td class="caps center bg">Description</td>
<td class="caps center bg" style="width:110px">Quantité</td>
<td class="caps center bg" style="width:110px">PU / $ HT</td>
<td class="caps center bg" style="width:110px">Montant / $ HT</td>
</tr>
<tr>
<td class="center">0001</td>
<td class="center"><input type="text" class="caps" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant1" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT1" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT1" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0002</td>
<td class="center"><input type="text" class="caps" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant2" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT2" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT2" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0003</td>
<td class="center"><input type="text" class="caps" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant3" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT3" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT3" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="bordernone" colspan="2" rowspan="6"> </td>
<td class="caps right bg" colspan="2">Sous-Total</td>
<td class="center"><input type="text" class="right" name="totalHT" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Provinciale <a title="5% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVP" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Fédérale <a title="10% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVF" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Port &amp; Manutention <a title="Prix du transport">[?]</a></td>
<td class="center"><input type="text" class="right" name="transport" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Frais de Douane</td>
<td class="center"><input type="text" class="right" name="douane" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps center bg" colspan="2">Net à Payer<br />
<input class="bouton" type="button" onClick='
var quant1=parseInt(Somme=(parseInt(form.quant1.value)));
var PUHT1=parseFloat(Somme=(parseFloat(form.PUHT1.value)));
var STHT1=parseFloat(quant1*PUHT1);
form.STHT1.value=(Somme=(parseFloat(parseFloat(STHT1))));
var quant2=parseInt(Somme=(parseInt(form.quant2.value)));
var PUHT2=parseFloat(Somme=(parseFloat(form.PUHT2.value)));
var STHT2=parseFloat(quant2*PUHT2);
form.STHT2.value=(Somme=(parseFloat(parseFloat(STHT2))));
var quant3=parseInt(Somme=(parseInt(form.quant3.value)));
var PUHT3=parseFloat(Somme=(parseFloat(form.PUHT3.value)));
var STHT3=parseFloat(quant3*PUHT3);
form.STHT3.value=(Somme=(parseFloat(parseFloat(STHT3))));
var totalHT=parseFloat(STHT1+STHT2+STHT3);
form.totalHT.value=(Somme=(parseFloat(parseFloat(totalHT))));
var TVP=parseFloat(totalHT*0.05);
form.TVP.value=(Somme=(parseFloat(parseFloat(TVP))));
var TVF=parseFloat(totalHT*0.10);
form.TVF.value=(Somme=(parseFloat(parseFloat(TVF))));
var transport=parseInt(Somme=(parseInt(form.transport.value)));
var douane=parseInt(Somme=(parseInt(form.douane.value)));
var total=parseFloat(totalHT+TVP+TVF+transport+douane);
form.total.value=(Somme=(parseFloat(parseFloat(total))));
' name="Submit" value="Calculer" /><input type="reset" value=" Réinitialiser la page"/></td>
<td class="center bg"><input type="text" class="right" name="total" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><em>Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise. </em></td>
<td class="bordernone" colspan="3"> </td>
</tr>
<tr>
<td class="caps right bg" colspan="3">Vous êtes le patron © 2013</td>
</tr>
</table>
</form>
</body>
</html>

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: Générateur de factures (Html/Css)

Message par undertaker999 le Sam 13 Juil 2013 - 16:17

WOW !

Comme à tous les coups, vous savez comment nous épater !

Cela est tout à fait en accord avec ma demande. Je vous en suis très reconnaissant, et même, j'irais jusqu'à dire que vous avez su comment simplifier la rentrée des données.

En conformité avec ce qui précède, je vous autorise à fournir le générateur, mais bien entendu je vous laisse le temps qu'il vous faut pour le réaliser.

----

Petite question: Seriez-vous en mesure de me dire pour quelle raison est-ce que l'affichage du CSS est disponible uniquement en prévisualisation dans le message suivant : http://www.vous-etes-le-patron.net/t2782-test-de-facturation#11989

En effet, lorsque je prévisualise je peux voir facilement la facture avec le css. Or, lorsque j'enregistre, je vois la facture, mais sans le css.

Merci de votre aide Smile
VSG.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Dim 14 Juil 2013 - 0:25

en fait , seule une partie du CSS est prise en compte , mais une de vos pages script prend le dessus sur les fonds de cellule ...

Retrouvez la page javascript qui contient ceci , et désactivez là :

Code:
$(function(){$('tr.post:has(".fondstaff") td').css('background-color','#ffffff')});

vérifiez que le fond du tableau est revenu ...

ensuite , remplacez le CSS du tableau par celui ci :

Code:
/* debut CSS facture */
#fact { width: 700px; margin:auto; }
#fact td { border: 1px outset #999999; padding:4px 5px; }
#fact .caps { font-variant: small-caps; }
#fact .rgt {text-align: right;}
#fact .center { text-align: center; }
#fact .bg { background-color: #dadfd8; }
#fact .bordernone { border: none!important; }
/* fin CSS facture */

et faites un test avec ce tableau :

Code:
[table id="fact" border="0"][tr][td class="caps center" style="height: 100px;"][LOGO 100 * 200][/td]
[td class="caps center" colspan="4"]FACTURE[/td]
[/tr]
[tr][td class="caps bg" style="width:210px"][Nom de l'entreprise][/td]
[td class="caps center bg" style="width:110px" rowspan="2"]# de Facture[/td]
[td class="caps center bg" style="width:50px" rowspan="2"]Date[/td]
[td class="caps center bg" style="width:105px" rowspan="2"]Code Client[/td]
[td class="caps center bg" rowspan="2"]Client[/td]
[/tr]
[tr][td class="caps bg"][Continent, Pays][/td]
[/tr]
[tr][td class="center"][/td]
[td class="center"]VSG[Date][/td]
[td class="center"][Date][/td]
[td class="center"]#[#Client][/td]
[td class="center"][Nom du Client]
[Continent, Pays][/td]
[/tr]
[/table]
[table id="fact" border="0"][tr][td class="caps center bg" style="width:50px"]Code[/td]
[td class="caps center bg"]Description[/td]
[td class="caps center bg" style="width:110px"]Quantité[/td]
[td class="caps center bg" style="width:110px"]PU / $ HT[/td]
[td class="caps center bg" style="width:110px"]Montant[/td]
[/tr]
[tr][td class="center"]0001[/td]
[td class="center"][ Nom du Produit ][/td]
[td class="rgt"]0[/td]
[td class="rgt"]0.00[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="center"]0002[/td]
[td class="center"][ Nom du Produit ][/td]
[td class="rgt"]0[/td]
[td class="rgt"]0.00[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="center"]0003[/td]
[td class="center"][ Nom du Produit ][/td]
[td class="rgt"]0[/td]
[td class="rgt"]0.00[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="bordernone" colspan="2" rowspan="6"][/td]
[td class="caps rgt bg" colspan="2"]Total Hors-Taxe[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Provinciale[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Fédérale[/td]
[td class="rgt"][/td]
[/tr]
[tr][td class="caps rgt bg" colspan="2"]Port &amp; Manutention[/td]
[td class="rgt"]0.00[/td]
[/tr]
[tr][td class="caps rgt bg" colspan="2"]Frais de Douane[/td]
[td class="rgt"]0.00[/td]
[/tr]
[tr][td class="caps center bg" colspan="2"]Net à Payer[/td]
[td class="rgt bg"]0.00[/td]
[/tr]
[tr][td colspan="2" rowspan="2"]Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise.[/td]
[td class="bordernone" colspan="3"]
[/td]
[/tr]
[tr][td class="caps rgt bg" colspan="3"]Vous êtes le patron © 2013[/td]
[/tr]
[/table]

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: Générateur de factures (Html/Css)

Message par undertaker999 le Dim 14 Juil 2013 - 5:00

Plus que parfait Very Happy

J'espère qu'il sera possible d'obtenir facilement le code par le générateur... Je ne sais comment vous remercier pour votre aide... C'est tout simplement fantastique !!!

Merci !

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Lun 15 Juil 2013 - 16:53

dernières questions ...

la case du logo peut-elle rester vide ?
doit-elle être remplacée par une image par défaut ?
le maximum du logo est-il de 100 de haut , 200 de large ?

Quel est le format de la date ? (dd/mm/yyyy ?)

pouvez-vous me donner plus d'infos sur : VSG[Date] , #[#Client] ? ( un exemple pour la mise en forme )

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: Générateur de factures (Html/Css)

Message par undertaker999 le Mar 16 Juil 2013 - 4:50

la case du logo peut-elle rester vide ?
doit-elle être remplacée par une image par défaut ?
-> En effet, puisque vous en parlez, j'aimerais bien que l'image par défaut soit celle-ci :
http://i35.servimg.com/u/f35/13/09/19/90/logo_v10.png

le maximum du logo est-il de 100 de haut , 200 de large ?
-> Oui, bien 100 de haut et 200 de large

Quel est le format de la date ? (dd/mm/yyyy ?)
-> Oui, bien dd/mm/yyyy

pouvez-vous me donner plus d'infos sur : VSG[Date]
-> En fait, ce qui serait plus judicieux de faire finalement serait de mettre les 3 premières lettres du nom de l'entreprise (si cela est possible). Cela dans le but d'archiver les factures de chaque entreprise.
Par exemple:
1) L'entreprise 1 se nomme Forumactifs
2) La date est 15/07/2013
2) Le numero de la facture pourrait être FOR-15-07-2013 (Si bien sur quelques choses du genre est possible)

, #[#Client] ? ( un exemple pour la mise en forme )
-> Le numero du client identifie chaque membre du forum.
Par exemple:
1) Le membre 1 possède le numero 0001
2) Et pour faire plus jolie, j'ai ajouter un "#".
3) Donc, le numero de cette entreprise est #0001

Merci pour votre bon travail,
VSG.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Mar 16 Juil 2013 - 23:09

Bonsoir,

premier code , celui-ci est pour éviter un logo trop grand ...

à rajouter au CSS :

Code:
#fact img { max-height:100px;max-width:200px; }
ensuite le code du générateur ...

à mettre dans la page HTML , dites moi s'il y a des choses à modifier (j'avoue que je me suis fait plaisir sur ce coup là ):

Code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>FACTURE</title>
<style type="text/css">
#fact,#code {
width: 800px;
margin:auto;   
}
#fact td {
border: 1px outset #999999;
padding:0 5px; 
}
#fact .caps {
font-variant: small-caps;
}
#fact .right {
text-align: right;
}
.center {
text-align: center;
}
#fact .bg {
background-color: #dadfd8;
}
#fact .bordernone {
border: none!important;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
<!--
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
autoSize: true,
dateFormat: "dd/mm/yy",
altField: "#alternate",
altFormat: "-dd-mm-yy",
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre" ],
monthNamesShort: [ "Janv", "Fevr", "Mars", "Avril", "Mai", "Juin", "Juil", "Aout", "Sept", "Oct", "Nov", "Dec" ],
showAnim: "fadeIn"
});
});

function idem(form){

var meme = form.firm.value;
var coupe = meme.substring(0,3);
form.VSGdate.value = coupe;
}

function calcul(form){

var quant1=parseInt(Somme=(parseInt(form.quant1.value)));
var PUHT1=parseFloat(Somme=(parseFloat(form.PUHT1.value)));
var STHT1=parseFloat(quant1*PUHT1);
form.STHT1.value=Math.round(STHT1*100)/100;
var quant2=parseInt(Somme=(parseInt(form.quant2.value)));
var PUHT2=parseFloat(Somme=(parseFloat(form.PUHT2.value)));
var STHT2=parseFloat(quant2*PUHT2);
form.STHT2.value=Math.round(STHT2*100)/100;
var quant3=parseInt(Somme=(parseInt(form.quant3.value)));
var PUHT3=parseFloat(Somme=(parseFloat(form.PUHT3.value)));
var STHT3=parseFloat(quant3*PUHT3);
form.STHT3.value=Math.round(STHT3*100)/100;
var totalHT=parseFloat(STHT1+STHT2+STHT3);
form.totalHT.value=Math.round(totalHT*100)/100;
var TVP=parseFloat(totalHT*0.05);
form.TVP.value=Math.round(TVP*100)/100;
var TVF=parseFloat(totalHT*0.10);
form.TVF.value=Math.round(TVF*100)/100;
var transport=parseInt(Somme=(parseInt(form.transport.value)));
var douane=parseInt(Somme=(parseInt(form.douane.value)));
var total=parseFloat(totalHT+TVP+TVF+transport+douane);
form.total.value=Math.round(total*100)/100;
}

function collecte(form){

var logo=form.logo.value;
var firm=form.firm.value;
var firmpays=form.pays.value;
var VSGdate=form.VSGdate.value;
var alternate=form.alternate.value;
var date=form.datepicker.value;
var codeclient=form.codeclient.value;
var client=form.client.value;
var paysclient=form.paysclient.value;
var prod1=form.prod1.value;
var quant1=form.quant1.value;
var PUHT1=form.PUHT1.value;
var STHT1=form.STHT1.value;
var prod2=form.prod2.value;
var quant2=form.quant2.value;
var PUHT2=form.PUHT2.value;
var STHT2=form.STHT2.value;
var prod3=form.prod3.value;
var quant3=form.quant3.value;
var PUHT3=form.PUHT3.value;
var STHT3=form.STHT3.value;
var totalHT=form.totalHT.value;
var TVP=form.TVP.value;
var TVF=form.TVF.value;
var transport=form.transport.value;
var douane=form.douane.value;
var total=form.total.value;
var facture ='[table id="fact" border="0"][tr]\n'
+'[td class="caps center" style="height: 100px;"]' + (logo ?'[img]' + logo + '[/img]':'[img]http://i35.servimg.com/u/f35/13/09/19/90/logo_v10.png[/img]') + '[/td]\n'
+'[td class="caps center" colspan="4"]FACTURE[/td]\n[/tr]\n'
+'[tr][td class="caps bg" style="width:210px"]' + firm + '[/td]\n'
+'[td class="caps center bg" style="width:110px" rowspan="2"]# de Facture[/td]\n'
+'[td class="caps center bg" style="width:50px" rowspan="2"]Date[/td]\n'
+'[td class="caps center bg" style="width:105px" rowspan="2"]Code Client[/td]\n'
+'[td class="caps center bg" rowspan="2"]Client[/td]\n[/tr]\n'
+'[tr][td class="caps bg"]' + firmpays + '[/td]\n[/tr]\n'
+'[tr][td class="center"][/td]\n'
+'[td class="caps center"]' + VSGdate + alternate + '[/td]\n'
+'[td class="center"]' + date + '[/td]\n'
+'[td class="center"]#' + codeclient + '[/td]\n'
+'[td class="center"]' + client + '\n' + paysclient + '[/td]\n[/tr]\n[/table]\n'
+'[table id="fact" border="0"][tr]'
+'[td class="caps center bg" style="width:50px"]Code[/td]\n'
+'[td class="caps center bg"]Description[/td]\n'
+'[td class="caps center bg" style="width:110px"]Quantité[/td]\n'
+'[td class="caps center bg" style="width:110px"]PU / $ HT[/td]\n'
+'[td class="caps center bg" style="width:110px"]Montant[/td]\n[/tr]\n'
+'[tr][td class="center"]0001[/td]\n'
+'[td class="center"][ Nom du Produit ]' + prod1 + '[/td]\n'
+'[td class="rgt"]' + quant1 + '[/td]\n'
+'[td class="rgt"]' + PUHT1 + '[/td]\n'
+'[td class="rgt"]' + STHT1 + '[/td]\n[/tr]\n'
+'[tr][td class="center"]0002[/td]\n'
+ (quant2=="0"?'[td class="center"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[/tr]\n':'[td class="center"]' + prod2 + '[/td]\n[td class="rgt"]' + quant2 + '[/td]\n[td class="rgt"]' + PUHT2 + '[/td]\n[td class="rgt"]' + STHT2 + '[/td]\n[/tr]\n')
+'[tr][td class="center"]0003[/td]\n'
+ (quant3=="0"?'[td class="center"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[/tr]\n':'[td class="center"]' + prod3 + '[/td]\n[td class="rgt"]' + quant3 + '[/td]\n[td class="rgt"]' + PUHT3 + '[/td]\n[td class="rgt"]' + STHT3 + '[/td]\n[/tr]\n')
+'[tr][td class="bordernone" colspan="2" rowspan="6"][/td]\n'
+'[td class="caps rgt bg" colspan="2"]Total Hors-Taxe[/td]\n'
+'[td class="rgt"]' + totalHT + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Provinciale[/td]\n'
+'[td class="rgt"]' + TVP + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Fédérale[/td]\n'
+'[td class="rgt"]' + TVF + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Port &amp; Manutention[/td]\n'
+'[td class="rgt"]' + transport + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Frais de Douane[/td]\n'
+'[td class="rgt"]' + douane + '[/td]\n[/tr]\n'
+'[tr][td class="caps center bg" colspan="2"]Net à Payer[/td]\n'
+'[td class="rgt bg"]' + total + '[/td]\n[/tr]\n'
+'[tr][td colspan="2" rowspan="2"]Les conditions de vente sont déterminées dans le contrat général de vente de l\'entreprise.[/td]\n'
+'[td class="bordernone" colspan="3"]\n[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="3"]Vous êtes le patron © 2013[/td]\n[/tr]\n[/table]\n';
form.code.value = facture;
}
-->
</script>
</head>
<body>
<form action="" method="post">
<table id="fact" border="0">
<tr>
<td class="caps center" style="height: 100px;">[LOGO 200 * 100]<br />
<input type="text" name="logo" size="30" placeholder="de type:http://liendelimage.jpg" /><br />
(facultatif)</td>
<td class="caps center" colspan="4">FACTURE</td>
</tr>
<tr>
<td class="caps bg" style="width:210px"><input type="text" class="caps" name="firm" size="25" placeholder="[Nom de l'entreprise]" onkeyup="idem(this.form)" /></td>
<td class="caps center bg" style="width:120px" rowspan="2"># de Facture</td>
<td class="caps center bg" style="width:90px" rowspan="2">Date</td>
<td class="caps center bg" style="width:90px" rowspan="2">Code Client</td>
<td class="caps center bg" rowspan="2">Client</td>
</tr>
<tr>
<td class="caps bg"><input type="text" class="caps" name="pays" size="25" placeholder="[Continent, Pays]" /></td>
</tr>
<tr>
<td class="center"> </td>
<td class="center"><input type="text" class="caps" name="VSGdate" size="3" maxlength="3" readonly="readonly" /><input type="text" id="alternate" size="9" readonly="readonly" /></td>
<td class="center"><input type="text" name="datepicker" id="datepicker" size="7" /></td>
<td class="center">#<input type="text" class="caps" name="codeclient" size="10" placeholder="[#Client]" /></td>
<td class="center"><input type="text" class="caps center" name="client" size="20" placeholder="[Nom du Client]" /><br />
<input type="text" class="caps center" name="paysclient" size="20" placeholder="[Continent, Pays]" /></td>
</tr>
</table><br />

<table id="fact" style="height: 500px;" border="0">
<tr>
<td class="caps center bg" style="width:50px">Code</td>
<td class="caps center bg">Description</td>
<td class="caps center bg" style="width:110px">Quantité</td>
<td class="caps center bg" style="width:110px">PU / $ HT</td>
<td class="caps center bg" style="width:110px">Montant / $ HT</td>
</tr>
<tr>
<td class="center">0001</td>
<td class="center"><input type="text" class="caps" name="prod1" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant1" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT1" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT1" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0002</td>
<td class="center"><input type="text" class="caps" name="prod2" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant2" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT2" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT2" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0003</td>
<td class="center"><input type="text" class="caps" name="prod3" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant3" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT3" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT3" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="bordernone" colspan="2" rowspan="6"> </td>
<td class="caps right bg" colspan="2">Sous-Total</td>
<td class="center"><input type="text" class="right" name="totalHT" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Provinciale <a title="5% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVP" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Fédérale <a title="10% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVF" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Port &amp; Manutention <a title="Prix du transport">[?]</a></td>
<td class="center"><input type="text" class="right" name="transport" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Frais de Douane</td>
<td class="center"><input type="text" class="right" name="douane" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps center bg" colspan="2">Net à Payer<br />
<input class="bouton" type="button" onClick="calcul(this.form)" name="Submit" value="Calculer" /><input type="reset" value=" Réinitialiser la page" /></td>
<td class="center bg"><input type="text" class="right" name="total" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><em>Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise. </em></td>
<td class="bordernone" colspan="3"> </td>
</tr>
<tr>
<td class="caps right bg" colspan="3">Vous êtes le patron © 2013</td>
</tr>
</table>
<p align="center"><input value="Générer la facture" onclick="collecte(this.form)" type="button" /> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code').focus();document.getElementById('code').select();" /> <input name="lien" value="Retour au Forum" onclick="self.location.href='http://www.velp.monempire.net/'" type="button" /><br><br>
<textarea id="code" name="code"  rows="25" readonly="true"></textarea></p>
</form>
</body>
</html>

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: Générateur de factures (Html/Css)

Message par undertaker999 le Mer 17 Juil 2013 - 8:50

Bonsoir,

Comme d'habitude c'est plus que parfait !!!

Je suis content de voir que vous vous êtes fait plaisir sur ce coup... Toutes vos modifications sont agréables et très appréciées.

Je ne peux qu'être satisfait pour votre merveilleux travail...

Merci beaucoup Smile

Bien à vous,
VSG.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Mer 17 Juil 2013 - 19:07

Avez vous pu tester toutes les fonctionnalités ? Le sujet est-il résolu résolu  ?

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: Générateur de factures (Html/Css)

Message par undertaker999 le Mer 17 Juil 2013 - 21:20

Oui, j'ai bien essayé les fonctions et elles fonctionnent très bien.

J'aurais cependant une quelques questions:
- Est-ce possible de mettre un menu liste dans la section "Continent, Pays" (ex: Tu peux sélectionner Amérique du Nord, Canada ou Europe, France) ?
- Est-ce possible de mettre un menu liste dans la section "Nom de l'entreprise" (et que les trois lettres soient prises en compte pareil ?
- Est-ce possible de mettre une zone de texte qui peut être générée ?
- Est-ce possible de mettre une zone à bouton que l'on peut cliquer et qui peut-être générée ?

Évidemment, ce n'est pas nécessairement pour ce générateur, mais pour les prochains que je pourrais avoir besoin Very Happy

Merci beaucoup.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Jeu 18 Juil 2013 - 12:29

- Est-ce possible de mettre un menu liste dans la section "Continent, Pays" (ex: Tu peux sélectionner Amérique du Nord, Canada ou Europe, France) ?
c'est faisable
- Est-ce possible de mettre un menu liste dans la section "Nom de l'entreprise" (et que les trois lettres soient prises en compte pareil ?
à essayer , mais doit aussi être faisable
- Est-ce possible de mettre une zone de texte qui peut être générée ?
oui ... un textarea ...
- Est-ce possible de mettre une zone à bouton que l'on peut cliquer et qui peut-être générée ?

Évidemment, ce n'est pas nécessairement pour ce générateur, mais pour les prochains que je pourrais avoir besoin Very Happy
là , je ne vois pas ... "zone" ? ... les boutons générés ne fonctionnent pas dans un message (ne sont pas actifs , cause javascript interdit dans un message)

je vous prépare les 3 premières modifs ?

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: Générateur de factures (Html/Css)

Message par undertaker999 le Jeu 18 Juil 2013 - 17:17

Il serait bien en effet d'avoir les parties de codes correspondent aux trois premiers.

Et en ce qui concerne la zone à boutons, je voulais plutôt "Bouton radio".

Merci pour votre aide Smile
VSG.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Générateur de factures (Html/Css)

Message par Scoubifitz le Ven 19 Juil 2013 - 1:02

comme je ne savais pas où mettre un textarea , je l'ai placé dans le nom du premier produit

voici déjà le code pour les trois premiers :

Code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>FACTURE</title>
<style type="text/css">
#fact,#code {
width: 800px;
margin:auto; 
}
#fact td {
border: 1px outset #999999;
padding:0 5px;
}
#fact .caps {
font-variant: small-caps;
}
#fact .right {
text-align: right;
}
.center {
text-align: center;
}
#fact .bg {
background-color: #dadfd8;
}
#fact .bordernone {
border: none!important;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript">
<!--
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
autoSize: true,
dateFormat: "dd/mm/yy",
altField: "#alternate",
altFormat: "-dd-mm-yy",
dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
dayNamesShort: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre" ],
monthNamesShort: [ "Janv", "Fevr", "Mars", "Avril", "Mai", "Juin", "Juil", "Aout", "Sept", "Oct", "Nov", "Dec" ],
showAnim: "fadeIn"
});
});

function idem(form){

var meme = form.firm.value;
var coupe = meme.substring(0,3);
form.VSGdate.value = coupe;
}

function calcul(form){

var quant1=parseInt(Somme=(parseInt(form.quant1.value)));
var PUHT1=parseFloat(Somme=(parseFloat(form.PUHT1.value)));
var STHT1=parseFloat(quant1*PUHT1);
form.STHT1.value=Math.round(STHT1*100)/100;
var quant2=parseInt(Somme=(parseInt(form.quant2.value)));
var PUHT2=parseFloat(Somme=(parseFloat(form.PUHT2.value)));
var STHT2=parseFloat(quant2*PUHT2);
form.STHT2.value=Math.round(STHT2*100)/100;
var quant3=parseInt(Somme=(parseInt(form.quant3.value)));
var PUHT3=parseFloat(Somme=(parseFloat(form.PUHT3.value)));
var STHT3=parseFloat(quant3*PUHT3);
form.STHT3.value=Math.round(STHT3*100)/100;
var totalHT=parseFloat(STHT1+STHT2+STHT3);
form.totalHT.value=Math.round(totalHT*100)/100;
var TVP=parseFloat(totalHT*0.05);
form.TVP.value=Math.round(TVP*100)/100;
var TVF=parseFloat(totalHT*0.10);
form.TVF.value=Math.round(TVF*100)/100;
var transport=parseInt(Somme=(parseInt(form.transport.value)));
var douane=parseInt(Somme=(parseInt(form.douane.value)));
var total=parseFloat(totalHT+TVP+TVF+transport+douane);
form.total.value=Math.round(total*100)/100;
}

function collecte(form){

var logo=form.logo.value;
var firm=form.firm.value;
var firmpays=form.pays.value;
var VSGdate=form.VSGdate.value;
var alternate=form.alternate.value;
var date=form.datepicker.value;
var codeclient=form.codeclient.value;
var client=form.client.value;
var paysclient=form.paysclient.value;
var prod1=form.prod1.value;
var quant1=form.quant1.value;
var PUHT1=form.PUHT1.value;
var STHT1=form.STHT1.value;
var prod2=form.prod2.value;
var quant2=form.quant2.value;
var PUHT2=form.PUHT2.value;
var STHT2=form.STHT2.value;
var prod3=form.prod3.value;
var quant3=form.quant3.value;
var PUHT3=form.PUHT3.value;
var STHT3=form.STHT3.value;
var totalHT=form.totalHT.value;
var TVP=form.TVP.value;
var TVF=form.TVF.value;
var transport=form.transport.value;
var douane=form.douane.value;
var total=form.total.value;
var facture ='[table id="fact" border="0"][tr]\n'
+'[td class="caps center" style="height: 100px;"]' + (logo ?'[img]' + logo + '[/img]':'[img]http://i35.servimg.com/u/f35/13/09/19/90/logo_v10.png[/img]') + '[/td]\n'
+'[td class="caps center" colspan="4"]FACTURE[/td]\n[/tr]\n'
+'[tr][td class="caps bg" style="width:210px"]' + firm + '[/td]\n'
+'[td class="caps center bg" style="width:110px" rowspan="2"]# de Facture[/td]\n'
+'[td class="caps center bg" style="width:50px" rowspan="2"]Date[/td]\n'
+'[td class="caps center bg" style="width:105px" rowspan="2"]Code Client[/td]\n'
+'[td class="caps center bg" rowspan="2"]Client[/td]\n[/tr]\n'
+'[tr][td class="caps bg"]' + firmpays + '[/td]\n[/tr]\n'
+'[tr][td class="center"][/td]\n'
+'[td class="caps center"]' + VSGdate + alternate + '[/td]\n'
+'[td class="center"]' + date + '[/td]\n'
+'[td class="center"]#' + codeclient + '[/td]\n'
+'[td class="center"]' + client + '\n' + paysclient + '[/td]\n[/tr]\n[/table]\n'
+'[table id="fact" border="0"][tr]'
+'[td class="caps center bg" style="width:50px"]Code[/td]\n'
+'[td class="caps center bg"]Description[/td]\n'
+'[td class="caps center bg" style="width:110px"]Quantité[/td]\n'
+'[td class="caps center bg" style="width:110px"]PU / $ HT[/td]\n'
+'[td class="caps center bg" style="width:110px"]Montant[/td]\n[/tr]\n'
+'[tr][td class="center"]0001[/td]\n'
+'[td class="center"][ Nom du Produit ]' + prod1 + '[/td]\n'
+'[td class="rgt"]' + quant1 + '[/td]\n'
+'[td class="rgt"]' + PUHT1 + '[/td]\n'
+'[td class="rgt"]' + STHT1 + '[/td]\n[/tr]\n'
+'[tr][td class="center"]0002[/td]\n'
+ (quant2=="0"?'[td class="center"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[/tr]\n':'[td class="center"]' + prod2 + '[/td]\n[td class="rgt"]' + quant2 + '[/td]\n[td class="rgt"]' + PUHT2 + '[/td]\n[td class="rgt"]' + STHT2 + '[/td]\n[/tr]\n')
+'[tr][td class="center"]0003[/td]\n'
+ (quant3=="0"?'[td class="center"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[td class="rgt"][/td]\n[/tr]\n':'[td class="center"]' + prod3 + '[/td]\n[td class="rgt"]' + quant3 + '[/td]\n[td class="rgt"]' + PUHT3 + '[/td]\n[td class="rgt"]' + STHT3 + '[/td]\n[/tr]\n')
+'[tr][td class="bordernone" colspan="2" rowspan="6"][/td]\n'
+'[td class="caps rgt bg" colspan="2"]Total Hors-Taxe[/td]\n'
+'[td class="rgt"]' + totalHT + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Provinciale[/td]\n'
+'[td class="rgt"]' + TVP + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Taxe de Vente Fédérale[/td]\n'
+'[td class="rgt"]' + TVF + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Port &amp; Manutention[/td]\n'
+'[td class="rgt"]' + transport + '[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="2"]Frais de Douane[/td]\n'
+'[td class="rgt"]' + douane + '[/td]\n[/tr]\n'
+'[tr][td class="caps center bg" colspan="2"]Net à Payer[/td]\n'
+'[td class="rgt bg"]' + total + '[/td]\n[/tr]\n'
+'[tr][td colspan="2" rowspan="2"]Les conditions de vente sont déterminées dans le contrat général de vente de l\'entreprise.[/td]\n'
+'[td class="bordernone" colspan="3"]\n[/td]\n[/tr]\n'
+'[tr][td class="caps rgt bg" colspan="3"]Vous êtes le patron © 2013[/td]\n[/tr]\n[/table]\n';
form.code.value = facture;
}
-->
</script>
</head>
<body>
<form action="" method="post">
<table id="fact" border="0">
<tr>
<td class="caps center" style="height: 100px;">[LOGO 200 * 100]<br />
<input type="text" name="logo" size="30" placeholder="de type:http://liendelimage.jpg" /><br />
(facultatif)</td>
<td class="caps center" colspan="4">FACTURE</td>
</tr>
<tr>
<td class="caps bg" style="width:210px"><select name="firm" class="caps" onclick="idem(this.form)">
<option value="Forumactif">Forumactif</option>
<option value="Facom">Facom</option>
<option value="Catavana">Catavana</option>
<option value="Jasper">Jasper</option>
<option value="Molette">Molette</option>
</select></td>
<td class="caps center bg" style="width:120px" rowspan="2"># de Facture</td>
<td class="caps center bg" style="width:90px" rowspan="2">Date</td>
<td class="caps center bg" style="width:90px" rowspan="2">Code Client</td>
<td class="caps center bg" rowspan="2">Client</td>
</tr>
<tr>
<td class="caps bg"><select name="pays" class="caps">
<optgroup label="Amérique du Nord">
<option value="Amérique du Nord - New-york">New-york</option>
<option value="Amérique du Nord - Dallas">Dallas</option>
<optgroup label="Canada">
<option value="Canada - Ontario">Ontario</option>
<optgroup label="Europe">
<option value="Europe - France">France</option>
<option value="Europe - Madrid">Madrid</option>
</select></td>
</tr>
<tr>
<td class="center"> </td>
<td class="center"><input type="text" class="caps" name="VSGdate" size="3" maxlength="3" readonly="readonly" /><input type="text" id="alternate" size="9" readonly="readonly" /></td>
<td class="center"><input type="text" name="datepicker" id="datepicker" size="7" /></td>
<td class="center">#<input type="text" class="caps" name="codeclient" size="10" placeholder="[#Client]" /></td>
<td class="center"><input type="text" class="caps center" name="client" size="20" placeholder="[Nom du Client]" /><br />
<input type="text" class="caps center" name="paysclient" size="20" placeholder="[Continent, Pays]" /></td>
</tr>
</table><br />

<table id="fact" style="height: 500px;" border="0">
<tr>
<td class="caps center bg" style="width:50px">Code</td>
<td class="caps center bg">Description</td>
<td class="caps center bg" style="width:110px">Quantité</td>
<td class="caps center bg" style="width:110px">PU / $ HT</td>
<td class="caps center bg" style="width:110px">Montant / $ HT</td>
</tr>
<tr>
<td class="center">0001</td>
<td class="center"><textarea class="caps" name="prod1" placeholder="Nom du Produit et description" cols="30" rows="4"></textarea></td>
<td class="center"><input type="text" class="right" name="quant1" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT1" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT1" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0002</td>
<td class="center"><input type="text" class="caps" name="prod2" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant2" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT2" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT2" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="center">0003</td>
<td class="center"><input type="text" class="caps" name="prod3" size="40" placeholder="[ Nom du Produit ]" /></td>
<td class="center"><input type="text" class="right" name="quant3" size="5"  value="0" /></td>
<td class="center"><input type="text" class="right" name="PUHT3" size="5"  value="0.00" /></td>
<td class="center"><input type="text" class="right" name="STHT3" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="bordernone" colspan="2" rowspan="6"> </td>
<td class="caps right bg" colspan="2">Sous-Total</td>
<td class="center"><input type="text" class="right" name="totalHT" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Provinciale <a title="5% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVP" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Taxe de Vente Fédérale <a title="10% du sous-total">[?]</a></td>
<td class="center"><input type="text" class="right" name="TVF" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Port &amp; Manutention <a title="Prix du transport">[?]</a></td>
<td class="center"><input type="text" class="right" name="transport" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps right bg" colspan="2">Frais de Douane</td>
<td class="center"><input type="text" class="right" name="douane" size="10" value="0.00" /></td>
</tr>
<tr>
<td class="caps center bg" colspan="2">Net à Payer<br />
<input class="bouton" type="button" onClick="calcul(this.form)" name="Submit" value="Calculer" /><input type="reset" value=" Réinitialiser la page" /></td>
<td class="center bg"><input type="text" class="right" name="total" size="10" readonly="readonly" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><em>Les conditions de vente sont déterminées dans le contrat général de vente de l'entreprise. </em></td>
<td class="bordernone" colspan="3"> </td>
</tr>
<tr>
<td class="caps right bg" colspan="3">Vous êtes le patron © 2013</td>
</tr>
</table>
<p align="center"><input value="Générer la facture" onclick="collecte(this.form)" type="button" /> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code').focus();document.getElementById('code').select();" /> <input name="lien" value="Retour au Forum" onclick="self.location.href='http://www.velp.monempire.net/'" type="button" /><br><br>
<textarea id="code" name="code"  rows="25" readonly="true"></textarea></p>
</form>
</body>
</html>

pour les boutons radios et les cases à cocher , ça marche comme dans tout formulaire , il y a quelques exemples sur ce forum ...


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

Résolu Re: Générateur de factures (Html/Css)

Message par undertaker999 le Ven 19 Juil 2013 - 1:06

Comme d'habitude tout est parfait Smile

Merci pour tout !

VSG.

undertaker999
*****

Masculin
Messages : 535
Inscrit(e) le : 20/12/2008

http://vous-etes-le-patron.net
undertaker999 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