IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Optimisation de code


Sujet :

JavaScript

  1. #1
    Membre averti
    Homme Profil pro
    Directeur Hôtelier
    Inscrit en
    Janvier 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Directeur Hôtelier
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Janvier 2011
    Messages : 48
    Par défaut Optimisation de code
    Bonjour à tous.

    Je vais vous exposer ma demande le plus clairement possible. J'essais actuellement de faire une feuille de calcul de caisse (pour parfaire mes connaissances personnelles). Je suis parti un peu dans tous les sens pour mes débattre avec ce que j'ai pu voir sur des forums ou des sites de tutoriels. Je me suis tellement débattu que je me retrouver avec un code fonctionnel mais que j'aimerais optimiser afin de ne plus avoir tant de fichiers differents.

    J'ai donc :
    • calcul.php (formulaire de calcul)
    • Result.php (page imprimable du tout calculé)
    • calculs.js (qui effectue les calculs)
    • Verif.js (qui vérifie que la caisse est bonne)
    • nan.js (qui vérifie les inputs afin qu'il n'y ai que des chiffres compatible)


    Globalement à chaque perte de focus sur un des champs j'ai la fonction cal() qui calcul... Après je clique sur un bouton "vérifier" (#verification) pour lancer la vérification, qui charge également, avec les résultats un autre formulaire (caché) que j'envoie sur la page Result.php avec un bouton submit "imprimer"...

    Tout est très long et complètement brouillon. C'est pourquoi je viens vers vous aujourd'hui pour apprendre un peu plus et essayé de ranger, d'améliorer et d'optimiser. Par exemple est ce que tout les DOCS.JS peuvent être transformés un un seul qui travaillera pour chaque fonction ? puis-je me séparer d'un des deux boutons en ne faisant partir les fonctions que via le bouton imprimer ?

    Je vous laisse les fichiers listés si vous souhaitez visualiser le "bordel" j'ai pas contre évité le css donc pas de panic c'est juste moche

    Merci d'avance à tous ceux qui prendrons un peu de temps pour m'expliquer et me montrer deux ou trois astuces.

    caisse.rar <-- Pièce jointe modifiée

    Cordialement, Nicolas

  2. #2
    Rédacteur

    Avatar de autran
    Homme Profil pro
    Développeur Java
    Inscrit en
    Février 2015
    Messages
    1 241
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2015
    Messages : 1 241
    Billets dans le blog
    55
    Par défaut
    ta pièce jointe ne fonctionne pas
    Développeur Java
    Site Web

  3. #3
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Bonjour Nicolas,

    je vais jeter un coup d'œil. Tu auras mon commentaire dans un an ou deux
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  4. #4
    Membre averti
    Homme Profil pro
    Directeur Hôtelier
    Inscrit en
    Janvier 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Directeur Hôtelier
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Janvier 2011
    Messages : 48
    Par défaut
    Bonjour et merci de t'y pencher déjà ! 👍
    un an ou deux !? C'est si mauvais que ça !? 😧
    J'espère quand même que j'ai fais deux ou trois trucs bien dedans ... en même temps j'essaie d'apprendre donc deux ou trois tuto pourraient bien m'aider. Je vais essayer de lire en même temps.

    Bon dimanche, Nicolas

  5. #5
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Après une première lecture rapide, j'ai quelques remarques.

    D'abord, il manquait la classe JFactory, mais j'ai pu me débrouiller sans. J'ai quand même fait une recherche et j'ai vu que c'était lié à Joomla. Si tu veux mon avis (très) personnel : si tu as vraiment l'intention d'apprendre à coder proprement, que ce soit en PHP ou en JS, fuis les CMS comme la peste. Ils ne t'apporteront que des ennuis.

    Ensuite, les styles. Comme tu l'as fait remarquer, il n'y en a pas. Le problème, c'est qu'il y en a quand même :

    – Les <br> qui se suivent traduisent une volonté de créer une marge, un espacement, bref : c'est de la mise en page. De manière générale, jamais plus d'un <br> à la fois dans le code HTML. La mise en page c'est le domaine de CSS, donc fais les espacements dont tu as besoin avec du code CSS.

    – Même remarque pour les &nbsp;. Tiens au passage, culture gé : &nbsp; c'est le no-break space, en français l'espace insécable (et quand on parle d'espace en typographie, le mot est féminin : on dit une espace insécable). C'est une espace qu'on met aux endroits où on ne veut pas qu'il y ait un saut de ligne. Son emploi en HTML est largement abusif en général

    – Tu peux éviter les problèmes de guillemets les plus simples si tu utilises la vraie apostrophe. Tu peux la copier depuis un traitement de texte (ils font la substitution automatiquement) ou bien aller sur le site que je viens de lier et apprendre à la taper sur ton clavier pour aller plus vite. Ou alors tu peux aussi utiliser l'entité &rsquo;.
    Plus besoin de blackslash dans 'L\'Abbé de L\'Isle' si tu peux écrire 'L’Abbé de L’Isle' ou 'L&rsquo;Abbé de L&rsquo;Isle'.

    – Les infobulles : il y a moyen d'en faire sans JS… En mettant simplement un attribut title ! On a le droit de le mettre quasiment partout. Les utilisateurs ont l'habitude de voir apparaître une infobulle sur les éléments qui sont soulignés en pointillés et sur lesquels le curseur prend la forme d'un curseur d'aide, deux choses qui sont facilement réalisables en CSS. Du coup je te conseille de créer une règle CSS :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    *[title] {
      border-bottom: dotted thin black;
      cursor: help;
    }
    Un peu comme la balise <abbr>.
    Ainsi tu pourras remplacer par exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span class="type" onMouseOver="infobulle(this, 'Total des encaissements en chèques vacances');">Total ANCV :</span>
    Par :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span class="type" title="Total des encaissements en chèques vacances">Total ANCV :</span>

    – La balise <q> ! Il n'y aura jamais assez de <q> sur Internet. désolé…
    Pour indiquer une citation courte ou une expression. Je pense que tu peux l'utiliser à cet endroit :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    &ndash;&nbsp;Entrez les informations du journal de caisse demandée et
      remplissez votre feuille de caisse. Lorsque vous avez terminé vous
      pouvez la <q><strong>vérifier</strong></q> et
      l&rsquo;<q><strong>imprimer</strong></q>.
    Tu l'auras compris, elle remplace les guillemets. L'intérêt est que tu peux changer le style des guillemets à volonté en les spécifiant dans le CSS :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    q {
      quotes: '\00AB\00A0' '\00A0\00BB';
    }
    On a une déclaration en deux parties, la partie « guillemet gauche » et la parte « guillemet droit ». 00AB est l'unicode pour «, 00BB est l'unicode pour ». Quant à 00A0, il s'agit de notre amie l'espace insécable

    Tu peux ne pas aimer la balise <q> car avec elle, les guillemets ne sont pas séléctionnables. Ça peut être vu comme un avantage ou un défaut, selon le point de vue. En tout cas ils apparaissent bien à l'impression (du moins dans l'aperçu).

    – Dernière remarque : tes doctypes sont invalides, il y a des &nbsp; dedans. En parlant de ça, tu peux passer ton code HTML à la moulinette du validateur, il te dira plein de trucs, souvent utiles, dont tu as le droit de tenir compte ou pas.

    – Allez, deuxième dernière remarque (après j'arrête, promis) : les attributs align et les attributs style. Tout ça c'est de la mise en page donc il faut essayer d'en avoir le moins possible dans le code HTML. Cela dit, il y a certains aspects des tableaux qui sont difficiles à reproduire avec CSS, du coup je reconnais que certains usages de align (et surtout valign en fait) se justifient.

    Voilà pour les styles, et un petit peu de typographie aussi. Je passe au code PHP et je te dis ce que j'en pense
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  6. #6
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Dans ton code PHP, tu as beaucoup de redondance, en particuler avec les noms de variable qui se terminent par un chiffre comme $nb1, $nb2, etc. C'est un cas où il faudrait utiliser un tableau.

    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    // depuis PHP 5.4, on déclare les tableaux comme en JS
    $nb = [];
     
    // si tu n'as pas accès à une version récente de PHP
    $nb = array();
    Ensuite, tu peux factoriser ton code (c'est-à-dire éliminer les répétitions) dans un boucle for.
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for ($i = 1; $i <= 15; $i++) {
      $nb[$i] = empty($_POST["nombre{$i}t"]) ? 0 : $_POST["nombre{$i}t"];
    }
    Attention, j'ai fait commencer la boucle à 1 et non pas à 0 comme on fait d'habitude, pour que les index correspondent aux noms de tes variables.
    Par la suite, tu accèdes à tes variables par la notation index : <?php echo $nb[9]; ?> au lieu de <?php echo $nb9; ?>
    La même chose avec $tt.

    Autres trucs en vrac :

    – La fonction date accepte des caractères échappés, tu peux donc faire par exemple : echo date('H \h i'); pour afficher l'heure sous la forme 21 h 54 (le h du milieu n'est pas interprété). D'ailleurs, au début de ton code, tu as une déclaration superflue de la variable $heure.

    – Tu ne vérifies pas l'existence de tous les paramètres POST, ça génère des tas d'alertes. Si tu as désactivé les alertes, c'est mal ! Un bon code PHP ne produit aucun message ni d'alerte ni d'erreur. Cela ne veut pas dire qu'il ne fait jamais d'erreur ; mais les erreurs qui s'y produisent sont traitées au bon moment et ne remontent pas jusqu'à l'utilisateur. Et interdit de tricher avec l'opérateur @ !
    En l'occurence, tu testes déjà une partie de tes paramètres avec empty. C'est un bon début, et je te conseille de faire subir le même traitement aux autres paramètres.

    – Attention toutefois avec empty : un 0 sera considéré de la même manière qu'un paramètre absent. Si tu veux prendre en compte les 0, il vaut mieux utiliser isset.

    – Pour revenir aux histoires d'alertes, tu peux t'assurer de les voir toutes, quelle que soit la config du serveur, en plaçant ceci ligne au tout début de ton script :
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <?php
    error_reporting(-1);

    – Un point sur la sécurité : tu le sais sans doute, les données provenant du client sont susceptibles de contenir du code malveillant. Comme les valeurs que tu attends sont toutes des nombres (si je me trompe pas), tu peux te protéger facilement en convertissant explicitement toutes tes valeurs en type numérique, avec intval.

    Voici un début de code qui valide les paramètres, ne génère pas d'alerte et gère correctement les 0 :
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $nb = [];
    $tt = [];
    for ($i = 1; $i <= 15; $i++) {
      $nb[$i] = isset($_POST["nombre{$i}t"]) ?
                              intval($_POST["nombre{$i}t"]) : 0;
      $tt[$i] = isset($_POST["tot{$i}t"]) ?
                              intval($_POST["tot{$i}t"]) : 0;
    }

    – Je reviens un petit coup sur le HTML : le validateur signale des attributs id qui ne contiennent que des chiffres. C'est déconseillé, mais la plupart du temps ça marche quand même. À toi de voir. Moi je pense que ça ne bouleversera pas ton application si tu les enlèves purement et simplement.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  7. #7
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Un mot à propos de cette lib DD_roundies que tu utilises. Elle a été déclarée morte par son auteur, et si on en croit la date de la dernière version (2009), ça fait déjà un paquet de temps. La techno sous-jacente, VML, a été supplantée par SVG.
    Et aujourd'hui pour faire des coins arrondis, il y la propriété CSS border-radius dont le support est largement répandu !


    J'en profite pour faire une remarque rapide à propos des changements de style dynamiques. Par exemple quand tu changes en rouge la bordure des inputs dont le format est invalide.
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    … .css("border", "2px solid #FF0000")
    Il me semble que les couches sont mieux séparées quand tu changes une classe au lieu de changer un style. Ça te permet d'avoir toujours la même signification (« ce champ est invalide ») tout en ayant la possibilité de changer l'apparence sans toucher au code JS.
    Par exemple :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    … .addClass("invalid");

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    input.invalid { border: solid 2px red; }
    Le résultat est le même, sauf que le contrôle de l'apparence est rendu au CSS, et en même temps ton code JS a gagné un petit peu en signification.

    Pour ton inquiétude à propos du grand nombre de fichiers, je peux déjà te répondre : c'est un problème ou un avantage, selon le point de vue que tu adoptes. Avoir des fichiers séparés par thème te permet de mieux t'organiser, à condition que la séparation soit faite de manière cohérente. Tu peux t'aider de dossiers pour mieux hiérarchiser les scripts. On retrouve couramment un dossier nommé js dans lequel sont regroupés les scripts, avec éventuellement un sous-dossiers lib pour les scripts de tierce-partie.

    Voici un exemple de hiérarchie :
    Code txt : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    / (racine)
        theme/
            style.css
            help.gif
            ...
        js/
            lib/
                jquery-1.8.2.js
                jquery-alerts.js
                ...
            calcul.js
            verif.js
            ...
        calculs.php
        result.php

    En production, si ton serveur supporte peu la charge ou si tu as une forte fréquentation, il est recommandé de concaténer les scripts pour diminuer le nombre de requêtes HTTP. On utilise une ligne de commande ou un petit batch pour coller bout-à-bout le contenu des différents scripts et les envoyer en un seul fichier. Je te déconseille de faire ça pendant la phase de développement car ça te ferait perdre beaucoup de temps pour rien. Ce travail peut-être automatisé par des outils tels que Grunt.


    J'ai d'autres remarques mais je vais terminer de regarder tous tes fichiers avant, pour te compiler tout ça en quelque chose de pas trop confus
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  8. #8
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Nicolas,

    j'attends ta réponse pour m'assurer que je ne suis pas en train de bénévoler dans le vide.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  9. #9
    Membre averti
    Homme Profil pro
    Directeur Hôtelier
    Inscrit en
    Janvier 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Directeur Hôtelier
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Janvier 2011
    Messages : 48
    Par défaut
    Bonjour Watilin et désolé pour le temps de réponse je viens seulement de finir le gros de ma saison (dur dur Juillet / Août en hôtellerie)

    Citation Envoyé par Watilin Voir le message
    Après une première lecture rapide, j'ai quelques remarques.

    D'abord, il manquait la classe JFactory, mais j'ai pu me débrouiller sans. J'ai quand même fait une recherche et j'ai vu que c'était lié à Joomla. Si tu veux mon avis (très) personnel : si tu as vraiment l'intention d'apprendre à coder proprement, que ce soit en PHP ou en JS, fuis les CMS comme la peste. Ils ne t'apporteront que des ennuis.
    Pour l'instant je suis sur joomla pour plusieurs raisons (manque de temps pour d'autres applications) qui n'ont rien à voir avec la page de calcul de caisse, un peu moins urgente, puisque, bien que mal codée, elle est fonctionnelle. J'essaye de m'en débarrasser au fur et à mesure.

    Citation Envoyé par Watilin Voir le message
    Ensuite, les styles. Comme tu l'as fait remarquer, il n'y en a pas. Le problème, c'est qu'il y en a quand même :
    [indent]
    – Les <br> qui se suivent traduisent une volonté de créer une marge, un espacement, bref : c'est de la mise en page. De manière générale, jamais plus d'un <br> à la fois dans le code HTML. La mise en page c'est le domaine de CSS, donc fais les espacements dont tu as besoin avec du code CSS.
    Merci du conseil. Peu de sites d'apprentissage html expliquent que les <br/> d’affilé ne sont pas propres . pour certains ils nous expliquent juste que c'est un saut de ligne. et pour être honnête même moi j'était dérangé à la re-lecture de mes codes avec tous ces <br/>.

    Citation Envoyé par Watilin Voir le message
    – Même remarque pour les &nbsp;. Tiens au passage, culture gé : &nbsp; c'est le no-break space, en français l'espace insécable (et quand on parle d'espace en typographie, le mot est féminin : on dit une espace insécable). C'est une espace qu'on met aux endroits où on ne veut pas qu'il y ait un saut de ligne. Son emploi en HTML est largement abusif en général
    Alors là, tu ne pouvais pas me faire plus plaisir ! Ma nature curieuse, qui m'a d’ailleurs poussé à apprendre le html et qui m'a poussé à aller plus loin est friande de culture Gé !
    Pour info: mon utilisation (surement abusive) du&nbsp; est due au fait que certain espace ne sont pas prix en compte sur le page. Je n'ai pas trouvé de meilleurs moyen de les faire apparaître.

    Citation Envoyé par Watilin Voir le message
    – Les infobulles : il y a moyen d'en faire sans JS… En mettant simplement un attribut title ! On a le droit de le mettre quasiment partout. Les utilisateurs ont l'habitude de voir apparaître une infobulle sur les éléments qui sont soulignés en pointillés et sur lesquels le curseur prend la forme d'un curseur d'aide, deux choses qui sont facilement réalisables en CSS. Du coup je te conseille de créer une règle CSS :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    *[title] {
      border-bottom: dotted thin black;
      cursor: help;
    }
    Un peu comme la balise <abbr>.
    Ainsi tu pourras remplacer par exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span class="type" onMouseOver="infobulle(this, 'Total des encaissements en chèques vacances');">Total ANCV :</span>
    Par :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <span class="type" title="Total des encaissements en chèques vacances">Total ANCV :</span>
    J'ai l'air très bête... En effet pourquoi faire compliqué quand on peut faire simple ? je ne connaissais absolument pas le title c'est même plus propre ! moins de javascript donc plus lisible et plus rapide !

    Citation Envoyé par Watilin Voir le message
    – Dernière remarque : tes doctypes sont invalides, il y a des &nbsp; dedans. En parlant de ça, tu peux passer ton code HTML à la moulinette du validateur, il te dira plein de trucs, souvent utiles, dont tu as le droit de tenir compte ou pas.
    J'en tiendrais compte. Je le faisais avant et ça peut m'apprendre plein de trucs sympas.

    Citation Envoyé par Watilin Voir le message
    – Allez, deuxième dernière remarque (après j'arrête, promis) : les attributs align et les attributs style. Tout ça c'est de la mise en page donc il faut essayer d'en avoir le moins possible dans le code HTML. Cela dit, il y a certains aspects des tableaux qui sont difficiles à reproduire avec CSS, du coup je reconnais que certains usages de align (et surtout valign en fait) se justifient.
    Difficiles à reproduire mais pas impossible. Cela dit je ferais ça certainement en dernier lorsque tout le reste sera rectifié.

    _______________________________________________________

    Citation Envoyé par Watilin Voir le message
    Dans ton code PHP, tu as beaucoup de redondance, en particuler avec les noms de variable qui se terminent par un chiffre comme $nb1, $nb2, etc. C'est un cas où il faudrait utiliser un tableau.

    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    // depuis PHP 5.4, on déclare les tableaux comme en JS
    $nb = [];
     
    // si tu n'as pas accès à une version récente de PHP
    $nb = array();
    Ensuite, tu peux factoriser ton code (c'est-à-dire éliminer les répétitions) dans un boucle for.
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for ($i = 1; $i <= 15; $i++) {
      $nb[$i] = empty($_POST["nombre{$i}t"]) ? 0 : $_POST["nombre{$i}t"];
    }
    Attention, j'ai fait commencer la boucle à 1 et non pas à 0 comme on fait d'habitude, pour que les index correspondent aux noms de tes variables.
    Par la suite, tu accèdes à tes variables par la notation index : <?php echo $nb[9]; ?> au lieu de <?php echo $nb9; ?>
    La même chose avec $tt.
    Alors, je suis en PHP 5.5.
    J'ai toujours louché sur les déclarations tableau... ces [code=PHP]for ($i = 1; $i <= 15; $i++). Tous les sites que j'ai utilisé pour apprendre le reste (plutôt facilement) font comme si tout le monde sortait d'école. personnellement si on ne m'explique les choses (comme tu le fais depuis le début, clairement avec des mots simples, je fini par m'embrouiller et rien ne fonctionne.
    Moi on me parle de boucle mais il faut bien la stopper un jour cette boucle !? Pourquoi les sites donnent des exemple qui commence à 0 alors que je n'ai pas de variable "0" ? à quoi sert ce "i" que tout le monde utilise ? Bref je suis perdu ....


    Citation Envoyé par Watilin Voir le message
    – Tu ne vérifies pas l'existence de tous les paramètres POST, ça génère des tas d'alertes. Si tu as désactivé les alertes, c'est mal ! Un bon code PHP ne produit aucun message ni d'alerte ni d'erreur. Cela ne veut pas dire qu'il ne fait jamais d'erreur ; mais les erreurs qui s'y produisent sont traitées au bon moment et ne remontent pas jusqu'à l'utilisateur. Et interdit de tricher avec l'opérateur @ !
    En l'occurence, tu testes déjà une partie de tes paramètres avec empty. C'est un bon début, et je te conseille de faire subir le même traitement aux autres paramètres.

    – Attention toutefois avec empty : un 0 sera considéré de la même manière qu'un paramètre absent. Si tu veux prendre en compte les 0, il vaut mieux utiliser isset.
    Si un Zéro est considéré comme un caractère absent et que je le re-transforme en zéro en php pour la version imprimable ce n'est pas correcte ? Je n'ai pas désactivé les messages d'alertes ... enfin je ne pense pas.
    En fait j'autorise le client (Mon staff de l'hôtel) à ne pas rentrer les quantités égales à zéros dans le tableau. Je prend donc le empty pour les ré-afficher en zéro dans la feuille imprimable.

    Citation Envoyé par Watilin Voir le message
    – Un point sur la sécurité : tu le sais sans doute, les données provenant du client sont susceptibles de contenir du code malveillant. Comme les valeurs que tu attends sont toutes des nombres (si je me trompe pas), tu peux te protéger facilement en convertissant explicitement toutes tes valeurs en type numérique, avec intval.

    Voici un début de code qui valide les paramètres, ne génère pas d'alerte et gère correctement les 0 :
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $nb = [];
    $tt = [];
    for ($i = 1; $i <= 15; $i++) {
      $nb[$i] = isset($_POST["nombre{$i}t"]) ?
                              intval($_POST["nombre{$i}t"]) : 0;
      $tt[$i] = isset($_POST["tot{$i}t"]) ?
                              intval($_POST["tot{$i}t"]) : 0;
    }
    Je suis au courant qu'il ne faut pas faire confiance au client on le répète tout le temps sur les sites d'apprentissage. Est ce que ma sécurité javascript qui génère une alerte et empêche l'envoi de la page en cas de caractères qui ne correspondent pas à des nombres est suffisante ? je n'ai pas utilisé de PHP sur la première feuille mais bon dans un futur proche, j'aimerais bien en plus d'imprimer la feuille, l'enregistrer dans une BDD. peut être que je devrais tout faire en PHP.

    Citation Envoyé par Watilin Voir le message
    Un mot à propos de cette lib DD_roundies que tu utilises. Elle a été déclarée morte par son auteur, et si on en croit la date de la dernière version (2009), ça fait déjà un paquet de temps. La techno sous-jacente, VML, a été supplantée par SVG.
    Et aujourd'hui pour faire des coins arrondis, il y la propriété CSS border-radius dont le support est largement répandu !
    Oui je suis au courant, mais vu que j'utilisais l'infobulle en même temps je l'utilisais surtout pour ça. Maintenant je vais utiliser title donc je vais gérer les arrondis en CSS directement.

    Citation Envoyé par Watilin Voir le message
    J'en profite pour faire une remarque rapide à propos des changements de style dynamiques. Par exemple quand tu changes en rouge la bordure des inputs dont le format est invalide.
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    … .css("border", "2px solid #FF0000")
    Il me semble que les couches sont mieux séparées quand tu changes une classe au lieu de changer un style. Ça te permet d'avoir toujours la même signification (« ce champ est invalide ») tout en ayant la possibilité de changer l'apparence sans toucher au code JS.
    Par exemple :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    … .addClass("invalid");
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    input.invalid { border: solid 2px red; }
    Le résultat est le même, sauf que le contrôle de l'apparence est rendu au CSS, et en même temps ton code JS a gagné un petit peu en signification.
    C'est une très bonne idée. En fait j'ai hésité sur les deux. Je comprend un peu mieux comment tu fonctionnes et je sais que tu as raison. je devrais mettre tous les styles dans le CSS.

    Citation Envoyé par Watilin Voir le message
    J'ai d'autres remarques mais je vais terminer de regarder tous tes fichiers avant, pour te compiler tout ça en quelque chose de pas trop confus
    Tes remarques étant constructives, JE PRENDS, JE PRENDS !!!!

    Merci beaucoup, Nicolas

  10. #10
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Citation Envoyé par Smoky184 Voir le message
    Bonjour Watilin et désolé pour le temps de réponse je viens seulement de finir le gros de ma saison (dur dur Juillet / Août en hôtellerie)
    Je comprends. Je peux imaginer que l'hôtellerie te prend tout ton temps, ou te laisse sur les rotules à la fin de la journée

    Alors, je suis en PHP 5.5.
    J'ai toujours louché sur les déclarations tableau... ces [code=PHP]for ($i = 1; $i <= 15; $i++). Tous les sites que j'ai utilisé pour apprendre le reste (plutôt facilement) font comme si tout le monde sortait d'école. personnellement si on ne m'explique les choses (comme tu le fais depuis le début, clairement avec des mots simples, je fini par m'embrouiller et rien ne fonctionne.
    Moi on me parle de boucle mais il faut bien la stopper un jour cette boucle !? Pourquoi les sites donnent des exemple qui commence à 0 alors que je n'ai pas de variable "0" ? à quoi sert ce "i" que tout le monde utilise ? Bref je suis perdu ....
    Excuse-moi, j'avais, comme les autres, supposé que tu connaissais la syntaxe des boucles for. Ce n'est pas très différent d'une boucle while ; on y a simplement rajouté des facilités pour travailler avec des tableaux, ou faire tout autre genre de travail avec un index (le fameux i), aussi appelé compteur, qui change de valeur de manière régulière.

    Dans une boucle for, il y a trois instructions et un corps. Le corps, c'est ce qui est entre les accolades, et qui sera répété. Les trois instructions qui se trouvent dans la première ligne ont respectivement le rôle d'initialisation, de test de sortie de boucle, et de mise à jour du compteur.
    Code pseudo-JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    for (initialisation; testSortie; majCompteur) {
    
      ... corps
    
    }
    L'initialisation est exécutée seulement une fois, juste avant d'entrer dans la boucle. Elle sert typiquement à initialiser le compteur, mais rien n'interdit de faire autre chose à cet endroit-là.
    Le test de sortie est une expression booléenne qui est recalculée à la fin de chaque itération (une itération = un « tour » de boucle). Tant qu'elle donne true, on continue, mais dès qu'elle donne false, on sort de la boucle. Très souvent le test va porter sur la valeur du compteur, et on le compare à une constante donnée (la taille du tableau sur lequel on travaille, le nombre d'itérations qu'on veut que la boucle fasse, etc.). Dans le code que je t'ai donné, j'ai choisi $i <= 15, ce qui fait qu'à la fin de chaque itération, tant que $i est inférieur ou égal à 15, on continue : on retourne dans la boucle et on exécute le corps une fois de plus.
    La mise à jour du compteur est une instruction exécutée à la fin de chaque itération, mais avant le test de sortie. Tu peux considérer qu'elle est rajoutée à la fin du corps de la boucle. Elle peut être n'importe quelle instruction, mais en général on y met à jour la valeur de $i. Dans notre exemple, on a $i++ qui équivaut à $i = $i + 1.

    À présent, prenons cette boucle :
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for (var i = 0; i < 3; i++) {
      (corps de la boucle)
    }

    Et « déroulons-là » pour voir ce qui se passe vraiment :

    1. Initialisation : Déclaration de i et initialisation à 0

    2. Entrée dans la boucle : exécution du corps avec i = 0

    3. Mise à jour du compteur : i passe à 1

    4. Test de sortie : on regarde si i < 3.
    Ça renvoie true car i = 1
    on continue la boucle

    2. exécution du corps avec i = 1
    3. i passe à 2
    4. Le test renvoie encore true on continue

    2. exécution du corps avec i = 2
    3. i passe à 3
    4. i n'est plus strictement inférieur à 3 (car i = 3) ; le test renvoie false on sort de la boucle.

    Comme tu peux le voir, si on part de 0 et qu'on s'arête juste avant 3, on aura fait exactement 3 itérations. Dans beaucoup de langages, on commence à 0 car les tableaux sont indexés à partir de 0. Cela signifie que le premier objet du tableau est situé à l'index 0 (et non pas 1).

    Dans ton cas, c'est un peu différent car à l'origine il n'y avait pas de tableau, et tu as décidé de nommer tes variables en comptant à partir de 1. J'ai donc fait une boucle à partir de 1 pour que tu ne sois pas embrouillé par des noms de variables qui auraient été tous décalés. Du coup, pour adapter ma boucle, j'ai initialisé i à 1 et j'ai changé le test $i < 15 en $i <= 15. Au lieu de s'arrêter juste avant 15, on accepte cette valeur et on fait un tour de plus. De 1 à 15 inclus, on a bien 15 itérations au total.

    J'aurais pu écrire $i < 16 ; à vrai dire, comme je rencontre rarement des situations où on part de 1, je ne sais pas s'il y a une pratique plus recommandée que l'autre. Mon argument est qu'il vaut mieux faire en sorte que le nombre d'itérations soit visible au premier coup d'œil à la lecture du code.

    Si un Zéro est considéré comme un caractère absent et que je le re-transforme en zéro en php pour la version imprimable ce n'est pas correcte ? Je n'ai pas désactivé les messages d'alertes ... enfin je ne pense pas.
    En fait j'autorise le client (Mon staff de l'hôtel) à ne pas rentrer les quantités égales à zéros dans le tableau. Je prend donc le empty pour les ré-afficher en zéro dans la feuille imprimable.
    Ok, si tu autorises les cases vides c'est bien, tu peux laisser comme c'est.

    Je suis au courant qu'il ne faut pas faire confiance au client on le répète tout le temps sur les sites d'apprentissage. Est ce que ma sécurité javascript qui génère une alerte et empêche l'envoi de la page en cas de caractères qui ne correspondent pas à des nombres est suffisante ?
    Non, justement car JavaScript est du côté client : on peut le désactiver, ou modifier les variables avec un débogueur (trouvable dans les menus « outils de développement » de tout navigateur actuel). Des gens encore plus motivés peuvent même utiliser un outil pour créer des requêtes HTTP (par exemple cURL, qui est notamment disponible en tant que bibliothèque de PHP) avec des données entièrement de leur cru. JavaScript n'est pas une sécurité ; son rôle est d'aider l'utilisateur. Tu lui fais gagner du temps en lui indiquant quels champs sont mal remplis avant qu'il n'envoie la requête, mais s'il est suffisamment motivé (et a un minimum de connaissances), il peut envoyer quand même la requête avec des données invalides.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  11. #11
    Membre averti
    Homme Profil pro
    Directeur Hôtelier
    Inscrit en
    Janvier 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Directeur Hôtelier
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Janvier 2011
    Messages : 48
    Par défaut
    Bonjour Watilin

    tout d'abord merci de prendre du temps pour moi et de ta compréhension quant à mon manque de temps ces deux derniers mois.

    J'ai refait la page de calculs en plus propre comme mentionné plus haut en commançant par un index 0 pour les id's :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <table id="pieces" class="comptage">
    <caption>Pièces</caption>
    <tr>
    <td class="type">0,01€ X</td>
    <td><input type="text" class="nombre" name="nb0" id="nb0" size="3" onChange="cal();"/></td>
    <td>= <input type="text" class="total" disabled="disabled"  name="tt0" id="tt0" size="3"/></td>
    </tr>
     
    <tr>
    <td class="type">0,02€ X</td>
    <td><input type="text" class="nombre" name="nb1" id="nb1" size="3" onChange="cal();"/></td>
    <td>= <input type="text" class="total" disabled="disabled"  name="tt1" id="tt1" size="3"/></td>
    </tr>
    ...........
    Maintenant je vais refaire ma fonction de calcul en JS avec boucle comme tu me l'as proposé. et voir ce que ça donne si j'y arrive ou pas. Par la suite je commencerais le result.php avec un tableau de résultat et une vérification côté serveur.
    Dès que j'ai le temps de terminer je reviens te le montrer.

    Nicolas

  12. #12
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Il faut que je t'avertisse avant que ça t'arrive : tu risques d'avoir des erreurs d'arrondis si tu utilises des nombres à virgule pour manipuler les montants en euros. Ce n'est pas ta faute, ni celle de JavaScript : c'est la représentation des nombres à virgule, appelés nombre à virgule flottante, qui est incapable de représenter exactement certains nombres, notamment souvent ceux qui se terminent par .1 ou .9 (plus d'infos sur Wikipédia si tu es curieux).
    Par exemple, ouvre ta console et essaye ceci :
    En arithmétique normale, si on n'est pas une quiche absolue en calcul, on s'attend à obtenir 0.1. Mais en virgule flottante ça ne marche pas comme ça. Je te laisse la surprise…

    Pour éviter ce problème, stocke tous tes prix en cents (ex. 15 euros = 1500 cents). Avec les cents, tu manipules des nombres entiers, tu n'auras donc pas de problème d'arrondi.
    Pour convertir en euros, il suffit de diviser par 100, mais essaye si possible d'attendre toujours le dernier moment (par exemple le moment d'afficher le montant dans la page).
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  13. #13
    Membre averti
    Homme Profil pro
    Directeur Hôtelier
    Inscrit en
    Janvier 2011
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Directeur Hôtelier
    Secteur : Tourisme - Loisirs

    Informations forums :
    Inscription : Janvier 2011
    Messages : 48
    Par défaut
    Bnjour à tous et merci pour votre patience. Le projet ayant changé je suis passé à du Php / MySql et j'ai donc ouvert un nouveau post. Merci pour votre aide très précieuse.
    Cordialement, AZHAR Nicolas

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. optimiser le code d'une fonction
    Par yanis97 dans le forum MS SQL Server
    Réponses: 1
    Dernier message: 15/07/2005, 08h41
  2. Optimiser mon code ASP/HTML
    Par ahage4x4 dans le forum ASP
    Réponses: 7
    Dernier message: 30/05/2005, 10h29
  3. optimiser le code
    Par bibi2607 dans le forum ASP
    Réponses: 3
    Dernier message: 03/02/2005, 14h30
  4. syntaxe et optimisation de codes
    Par elitol dans le forum Langage SQL
    Réponses: 18
    Dernier message: 12/08/2004, 11h54
  5. optimisation du code et var globales
    Par tigrou2405 dans le forum ASP
    Réponses: 2
    Dernier message: 23/01/2004, 10h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo