HTML <TEMPLATE> Tag for code blocks repeats

Asked

Viewed 35 times

0

In a document .PHP I have a piece of .HTML over 20 DIV practically identical (see below the code).

I wanted a way to declare a DIV "repeats" only once and where necessary to repeat it throughout the document, make only its reference by passing through parameters what differentiates it from the "sisters". This would greatly reduce code and facilitate maintenance.

There is something better or more appropriate than the tag HTML TEMPLATE for that? If not, how would you? Thank you in advance....

<div class="form-group">
   <label>Nome de produto</label>
   <input type="text" class="form-control"  placeholder="Nome" required maxlength="30" name="prod-name">
</div>

<div class="form-group">
   <label>Modelo</label>
   <input type="text" class="form-control"  placeholder="Modelo" required maxlength="30" name="prod-model">
</div>

<div class="form-group">
   <label>Marca</label>
   <input type="text" class="form-control"  placeholder="Marca" required maxlength="30" name="prod-marca">
</div>

<div class="form-group">
   <label>Unidades disponíveis</label>
   <input type="text" class="form-control"  placeholder="Unidades" required maxlength="20" pattern="[0-9]{1,20}" name="prod-stock">
</div>

php javascript html html5

1 answer

1


You can use a Heredoc to store a chunk in a variable. With it you can easily save multiple lines.

Just use:

<<<[IDENTIFICADOR]
Texto
Aqui
[IDENTIFICADOR];

To use label and placeholder customized, just wrap the above code in a function and use the variables (used as parameters) to customize these values.

Example:

function buildCodeHtml($name, $model, $marca, $stock) {
    $html = <<<HTML
    <div class="form-group">
       <label>$name</label>
       <input type="text" class="form-control"  placeholder="$name" required maxlength="30" name="prod-name">
    </div>

    <div class="form-group">
       <label>$model</label>
       <input type="text" class="form-control"  placeholder="$model" required maxlength="30" name="prod-model">
    </div>

    <div class="form-group">
       <label>$marca</label>
       <input type="text" class="form-control"  placeholder="$marca" required maxlength="30" name="prod-marca">
    </div>

    <div class="form-group">
       <label>$stock</label>
       <input type="text" class="form-control"  placeholder="$stock" required maxlength="20" pattern="[0-9]{1,20}" name="prod-stock">
    </div>
HTML;

    return $html;
}

/* Imprime */
echo buildCodeHtml("Nome 2", "Modelo 2", "Marca 2", 123456);
echo buildCodeHtml("Nome 3", "Modelo 3", "Marca 3", 1);

Demonstration: https://ideone.com/mHpoEA

Robust alternative:

With this alternative you can have more autonomy in editing the fields (label, placeholder and name), but the code gets bigger.

In this option, I made a basic modification, instead of giving the field name and placeholder similarly, I decided to pass on this information as array, so you have more freedom.

function buildCodeHtml($name, $model, $marca, $stock) {
    $html = <<<HTML

    <div class="form-group">
       <label>{$name['label']}</label>
       <input type="text" class="form-control"  placeholder="{$name['placeholder']}" required maxlength="30" name="{$name['name']}">
    </div>

    <div class="form-group">
       <label>{$model['label']}</label>
       <input type="text" class="form-control"  placeholder="{$model['placeholder']}" required maxlength="30" name="{$model['name']}">
    </div>

    <div class="form-group">
       <label>{$marca['label']}</label>
       <input type="text" class="form-control"  placeholder="{$marca['placeholder']}" required maxlength="30" name="{$marca['name']}">
    </div>

    <div class="form-group">
       <label>{$stock['label']}</label>
       <input type="text" class="form-control"  placeholder="{$stock['placeholder']}" required maxlength="20" pattern="[0-9]{1,20}" name="{$stock['name']}">
    </div>
HTML;

    return $html;
}

/* Imprime */
echo buildCodeHtml([
    "name"        => "name2",
    "label"       => "Label Nome - 2",
    "placeholder" => "Placeholder Nome - 2",
], [
    "name"        => "model2",
    "label"       => "Label Model - 2",
    "placeholder" => "Placeholder Model - 2",
], [
    "name"        => "marca2",
    "label"       => "Label Marca - 2",
    "placeholder" => "Placeholder Marca - 2",
], [
    "name"        => "stock2",
    "label"       => "Label Stock - 2",
    "placeholder" => "Placeholder Stock - 2",
]);

Demonstration: https://ideone.com/tLreO9

If you don’t want to work applying HTML via Javascript, is a good way.

In the case of tag template, you need to add a function in Javascript to add the code in a particular place in your HTML document, it may seem complicated, but it is quite simple.

Example:

/* Captura e armazena o conteúdo do template na variável */
const template = document.querySelector("#meu-template");

/* Adiciona evento de clique no Botão */
document.querySelector("button").addEventListener("click", _ => {

  for(let i = 0; i < 5; i++) {
  
    /* Clona o template. Isso fará com que possa inclui-lo no documento inúmeras vezes */
    let fragment = document.importNode(template.content, true);
  
    /* Adiciona o fragmento na div #codigo */
    document.querySelector("#codigo").appendChild( fragment )
  }

});
<template id="meu-template">
<div class="form-group">
   <label>Nome de produto</label>
   <input type="text" class="form-control"  placeholder="Nome" required maxlength="30" name="prod-name">
</div>

<div class="form-group">
   <label>Modelo</label>
   <input type="text" class="form-control"  placeholder="Modelo" required maxlength="30" name="prod-model">
</div>

<div class="form-group">
   <label>Marca</label>
   <input type="text" class="form-control"  placeholder="Marca" required maxlength="30" name="prod-marca">
</div>

<div class="form-group">
   <label>Unidades disponíveis</label>
   <input type="text" class="form-control"  placeholder="Unidades" required maxlength="20" pattern="[0-9]{1,20}" name="prod-stock">
</div>

<hr />
</template>

<div id="codigo"></div>

<button>Adicionar código</button>

  • Excellent, @Valdeir Psr, even for me that I am a beginner, I could understand well, you have a lot of domain. I confess that HEREDOC was more interesting to me. Via creation of Javascript code (by the TEMPLATE feature), depending on what you need, if the focus is line reduction, ends up leaving 6 by half dozen, agree?

  • How could I change via HEREDOC (or not) the LABEL, PLACEHOLDER and NAME of each DIV?

  • @Mayafiuza I updated my example. I used a function (with some parameters), so you can customize the values every time you print the content.

  • Thank you so much, @Valdeir Psr! Sensational!!!! :^)

Browser other questions tagged php javascript html html5

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