Comment correctement indenter PHP/code HTML mélangé?

Question

Lors du mélange PHP et HTML, quel est le style d'indentation approprié à utiliser? Dois-je indenter afin que le HTML sorti ait une indentation correcte, ou que le mélange PHP/HTML soit correctement formaté (et donc plus facile à lire)? Par exemple, disons que j'ai une ligne foreach générant des lignes de table. Lequel ci-dessous est correct?

PHP/mix 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> 

en sortie 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> 

J'ai trouvé que quand je cours dans cette situation (assez souvent), 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 pensées des autres développeurs.

Answer 1

Le PHP et le code HTML doivent chacun être en retrait de sorte qu'ils sont corrects par rapport à eux-mêmes sous forme source, indépendamment les uns des autres et de la forme en 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> 

Answer 2

En général, je mets ouverture balises php au début de la ligne, mais indenter tout ce qui est à l'intérieur des balises pour correspondre à la mise en forme html. Je ne fais pas cela, cependant, pour de simples déclarations d'écho puisque j'utilise des balises à ouverture courte. Je pense que cela simplifie 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> 

Answer 3

1. réponse directe à votre question: Si vous avez besoin de lire la sortie HTML souvent, il pourrait être une bonne chose à la sortie HTML bien échancré. 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.

Answer 4

Vous pouvez toujours utiliser un peu d'espace pour faciliter la lecture. Construire sur le chaos' indentation:

<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 avec c'est si vous avez beaucoup code mixte, il peut faire votre document deux fois plus longtemps, ce qui rend pour plus défilement. Bien que si vous avez ce code mélangé beaucoup, vous pouvez envisager un moteur de template.

Answer 5

J'ai souvent réfléchi à cette question aussi, mais j'ai alors réalisé, qui se soucie de ce à quoi ressemble la sortie HTML? Vos utilisateurs ne devraient pas regarder votre HTML de toute façon. 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 les outils de développement Chrome, Firebug ou même les outils F12.

Answer 6

Vous ne devriez pas être dérangé par l'indentation de balisage dans l'environnement de production. Vous ne devriez pas non plus utiliser Tidy ou d'autres purificateurs HTML. Il existe des cas d'utilisation valides, par ex. lorsque vous autorisez l'entrée HTML (mais pensez à utiliser Markdown à la place), bien que ce soit rare.

La plupart du temps, les filtres HTML sont utilisés pour masquer les problèmes sous-jacents du code. Ne pas. Corrigez votre balisage manuellement.

Si vous devez mettre en retrait votre code uniquement dans l'environnement de développement, vous pouvez utiliser l'un des éléments ci-dessus. Cependant, sachez que ces bibliothèques tenteront de réparer votre balisage (c'est leur but 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> 

à 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> 

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