Repetitive excerpts of HTML

1

How to assign blocks (or redundant sections) of HTML to a variable to save lines and simplify use? Imagine several DIV or TABLE CELLS that are practically identical at 90%. How to save a snippet of HTML and retrieve it just by mentioning its variable?

    
asked by anonymous 27.03.2018 / 05:08

2 answers

2

This response is basically a disagreement over the @Sveen response . The idea is the same, but I do not like this API by adding code. It hinders maintenance and, in my opinion, makes readability worse.

So, my solution? Same thing, only with function in place of inclusion. I'm not going to repeat what Sveen put in his answer as it would be unnecessary. His response is really good and I would not have much to add.

To begin with, the main file's style (% w / o%) would look like this:

<?php include_once "profileLayout.php" ?>
<html>
    <head> 
        <?PHP include "head.php"; ?>
    </head>
    <body>
       <?PHP
            $usuarioLista = $banco->obterUsuarios();
            foreach($usuarioLista as $usuario){
               imprimeProfileLayout($usuario);
            }
        ?>
    </body>
 </html>

And I would implement the function that prints things using the so called index.php ( another example ). Here is the heredoc file that defines the profileLayout.php function:

<?php
    function imprimeProfileLayout($usuario) {
    echo <<<EOT
<img src='{$usuario['foto_perfil']}'/>
<div class='nomeusuario'>{$usuario['nome']}</div>
<div class='controles'>
    <button>Seguir</button>
    <button>Adicionar aos Amigos</button>
    <button>Bloquear</button>
</div>
EOT;
  }
?>
    
27.03.2018 / 06:31
2

Place the html inside a PHP file and make the include, which will print everything in it. Basic example of user listing:

profileLayout.php (to perform include)

<img src='<?= $usuario['foto_perfil'] ?>'/>
<div class='nomeusuario'> <?= $usuario['nome'] ?> </div>
<div class='controles'>
    <button>Seguir</button>
    <button>Adicionar aos Amigos</button>
    <button>Bloquear</button>
</div>

head.php (to perform include)

<link href="css/estilo.css" rel='stylesheet'/>
<script src="js/jquery.min.js" type='text/javascript'></script>
<script src="js/jquery-ui.min.js" type='text/javascript'></script>

index.php (source)

<html>
    <head> 
        <?PHP include "head.php"; ?>
    </head>
    <body>
       <?PHP
            $usuarioLista = $banco->obterUsuarios();
            foreach($usuarioLista as $usuario){
               include "profileLayout.php";
            }
        ?>
    </body>
 </html>

In this case you could reuse the head file to create a list of javascript files and style sheet in other pages of your system. The same for profileLayout.php that could provide you with a standard html to display cards on the users. That way you would not have to rewrite the same code several times.

But remember that in the end result, there will always be repeated divs in HTML. Just like an image (final product), you do not remove the pixels by being repeated.

    
27.03.2018 / 05:24