Repetitive snippets of HTML

Asked

Viewed 209 times

1

How to assign redundant HTML blocks (or snippets) to a variable to save lines and simplify usage? Imagine multiple Ivds or TABLE CELLS that are nearly identical by 90%. How to save an HTML snippet and retrieve it just by mentioning its variable?

  • Put html inside a PHP file and do include, it will print everything in it

  • Could you give me a small example or link? I’m new to WEB programming. It makes a lot of sense what you recommend, but a small example would be better.

2 answers

2

Put html inside a PHP file and do include, it 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 case you could reuse the head file to create a list of javascript files and stylesheet on other pages of your system. The same for profileLayout.php that could provide you with a standard html to display cards on users. That way you wouldn’t have to rewrite the same code over and over again.

But remember that in the end result, there will always be repeated Ivs in HTML. Just like an image (final product), you don’t take out the pixels by being repeated.

  • I don’t like this solution, but it’s good. Taste is taste, right? I don’t like to communicate between modules through implicit variables (in this case it was the associative vector $usuario). I would still do the client processing by sending a server JSON to the client so that the server didn’t have to worry about what the layout would look like.

  • I didn’t put much in because I don’t want to overload whoever’s starting it right now. I use JSON too, including to update HTML components, is very cool. But it would be several parts that should be explained.

  • But it could have done a function that made the presentation. It would be more "clean". Controlling code flow through imports so requires maturity to stay stable when the project grows.

  • Anyway, I’m very boring, judicious and critical. Even though I disagree with the details of the answer (importing files into a loop), I voted positive and would vote positive again if the situation so asked.

  • In a file. PHP (product registration) that I am studying, the section below repeats at least 10x in the same file, in different locations and changes only some strings... echo' <img src=". /Assets/img/correctofull.png" class="center-all-contens"> <br> <H3>The product has been added to the store successfully! </H3> <p class="lead text-cente"> The page will redirect automatically. Otherwise click the BACK button.<br><br> <a href=".. /configAdmin.php" class="btn btn-Primary btn-lg">BACK to Register</a> </p>' OBS: I haven’t learned yet how to format code here...

  • In the comment you can not format, but you can go trying to encode, and if you encounter problems just create a new question. Note that it is no longer necessary to use echo printing string with html, you can use HTML itself.

  • Thanks for your patience... It’s my first post! :^)

Show 2 more comments

2


Basically, this response is a disagreement about the reply from @Sveen. Same idea, only I don’t like this one API via code inclusion. Makes it difficult to maintain and, in my opinion, makes it more readable.

So, my solution? The same thing, only with function instead of inclusion. I will not repeat what Sveen put in his reply because it would be unnecessary. His answer is really good and I would not have much to add.

For starters, the feature of the main file (index.php) would be so:

<?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 call heredoc (another example). Here is the file profileLayout.php defining the function imprimeProfileLayout:

<?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;
  }
?>
  • Interesting approach this... Thank you.

  • @Mayafiuza for nothing. Don’t forget to browse the questions/answers that Linkei, much knowledge awaits on the other side of the click

  • From what I could understand (and learn) up to the present time is that, the best way to recover HTML lines is through its previous insertion in PHP code, correct?

  • I was looking for something about the TEMPLATE tag whose purpose seemed coherent also with this need...

  • @Mayafiuza, honestly, I’m too amateur in PHP to say what it would be to best way. I understand programming, and in the 11 years that I’ve been more immersed in the area, including college and jobs, I understand that code maintenance is important. I did a cross-check using both [tag:template] and [tag:php] tags, it seems there are more promising things. If you are curious to read my answers, you will see that I often reinvent the wheel in various situations. I may not know which to best solution, but I can manage with XGH

  • I have read, in fact, creativity is more interesting to me by discovering possibilities. Thanks...

Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.