web-dev-qa-db-fra.com

Comment mettre correctement en retrait du code mixte PHP / HTML?

Lors du mélange de PHP et HTML, quel est le style d'indentation approprié à utiliser? Dois-je indenter de sorte que le HTML généré ait une indentation correcte, ou pour que le mélange PHP/HTML semble correctement formaté (et est donc plus facile à lire)?

Par exemple, disons que j'ai une boucle foreach qui produit des lignes de table. Laquelle ci-dessous est correcte?

le mélange PHP/HTML semble correct:

<table>
  <?php foreach ($rows as $row): ?>
    <tr>
      <?php if ($row->foo()): ?>
        <?php echo $row ?>
      <?php else: ?>
        Something else
      <?php endif ?>
    </tr>
  <?php endforeach ?>
</table>

Le HTML généré semble correct:

<table>
<?php foreach ($rows as $row): ?>
  <tr>
  <?php if ($row->foo()): ?>
    <?php echo $row ?>
  <?php else: ?>
    Something else
  <?php endif ?>
  </tr>
<?php endforeach ?>
</table>

J'ai trouvé que lorsque je rencontre cette situation (assez fréquemment), je n'ai pas de style standard à utiliser. Je sais qu'il n'y a peut-être pas de réponse "correcte", mais j'aimerais entendre les réflexions des autres développeurs.

phphtmlindentation
62
James Skidmore

Le PHP et le HTML doivent chacun être mis en retrait afin qu'ils soient corrects par rapport à eux-mêmes sous forme source, indépendamment les uns des autres et de la forme sortie:

<table>
<?php foreach ($rows as $row): ?>
    <tr>
    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>
        Something else
    <?php endif ?>
    </tr>
<?php endforeach ?>
</table>
48
chaos

J'ai souvent réfléchi à cette question aussi, mais je me suis alors rendu compte, à quoi ressemble la sortie HTML? Vos utilisateurs ne devraient de toute façon pas regarder votre code HTML. C'est pour VOUS à lire, et peut-être quelques autres développeurs. Gardez le code source aussi propre que possible et oubliez à quoi ressemble la sortie.

Si vous devez déboguer la sortie, utilisez Chrome Developer Tools, Firebug, ou même F12 Tools.

13
mpen

Je mets généralement ouverture balises php au début de la ligne, mais en retrait tout ce qui se trouve à l'intérieur des balises pour correspondre au formatage html. Je ne fais pas cela, cependant, pour les simples déclarations d'écho car j'utilise des balises à ouverture courte. Je pense que cela le rend plus simple lors de la navigation dans le fichier pour trouver toutes les déclarations.

    <table>
<?  foreach ($foo as $bar): ?>
      <tr>
<?    foreach ($bar as $baz): ?>

         <td><?=$baz?></td>

<?    endforeach ?>
      </tr>
<?  endforeach ?>
    </table>
8
tj111
  1. Réponse directe à votre question: si vous avez besoin de lire souvent la sortie HTML, il peut être judicieux de sortir du HTML bien indenté. Mais le cas le plus courant sera que vous devez lire votre code source php, il est donc plus important que la source soit facilement lisible.
  2. Alternative aux deux options que vous avez mentionnées: Voir chaos ' ou tj111's réponse.
  3. Mieux encore à mon avis: ne mélangez pas HTML et php, utilisez plutôt un moteur de template.
4
Treb

Vous pouvez également toujours utiliser un peu d'espace pour améliorer la lisibilité. S'appuyant sur l'indentation du chaos:

<table>

<?php foreach ($rows as $row): ?>

    <tr>

    <?php if ($row->foo()): ?>
        <?php echo $row ?>
    <?php else: ?>

        Something else

    <?php endif ?>

    </tr>

    <?php endforeach ?>

</table

Le seul inconvénient est que si vous avez beaucoup de code mixte, cela peut rendre votre document deux fois plus long, ce qui rend le défilement plus long. Bien que si vous avez ce code très mélangé, vous voudrez peut-être envisager un moteur de modèles.

2
Etzeitet

Vous ne devez pas vous soucier de l'indentation du balisage dans l'environnement de production. Vous ne devez pas non plus utiliser Tidy ou d'autres purificateurs HTML. Il existe des cas d'utilisation valides, par exemple lorsque vous autorisez la saisie HTML (mais envisagez d'utiliser Markdown à la place), bien que ceux-ci soient rares.

Le plus souvent, les filtres-embellisseurs HTML sont utilisés de manière abusive pour masquer les problèmes sous-jacents du code. Non. Corrigez votre balisage manuellement.

Si vous devez mettre en retrait votre code uniquement dans l'environnement de développement, vous pouvez utiliser l'une des méthodes ci-dessus. Cependant, sachez que ces bibliothèques tenteront de corriger votre balisage (c'est leur objectif principal; l'indentation est un sous-produit). J'ai écrit l'outil d'indentation basé sur l'expression régulière Dindent .

Dindent convertira le balisage comme ceci:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script>
    console.log('te> <st');
    function () {
        test; <!-- <a> -->
    }
    </script>
    <div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <div><table border="1" style="background-color: red;"><tr><td>A cell    test!</td>
<td colspan="2" rowspan="2"><table border="1" style="background-color: green;"><tr> <td>Cell</td><td colspan="2" rowspan="2"></td></tr><tr>
        <td><input><input><input></td></tr><tr><td>Cell</td><td>Cell</td><td>Ce
            ll</td></tr></table></td></tr><tr><td>Test <span>Ce       ll</span></td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></table></div></div>
</body>
</html>

Pour ça:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
    console.log('te> <st');
    function () {
        test; <!-- <a> -->
    }
    </script>
        <div>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <div>
                <table border="1" style="background-color: red;">
                    <tr>
                        <td>A cell test!</td>
                        <td colspan="2" rowspan="2">
                            <table border="1" style="background-color: green;">
                                <tr>
                                    <td>Cell</td>
                                    <td colspan="2" rowspan="2"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input>
                                        <input>
                                        <input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Cell</td>
                                    <td>Cell</td>
                                    <td>Ce ll</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>Test <span>Ce ll</span></td>
                    </tr>
                    <tr>
                        <td>Cell</td>
                        <td>Cell</td>
                        <td>Cell</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

Dindent ne tentera pas de nettoyer ou d'interférer autrement avec votre code au-delà de l'ajout d'une indentation. C'est pour faciliter votre développement/débogage. Pas pour la production.

2
Gajus