0

Em um documento .PHP tenho um trecho de .HTML com mais de 20 DIV praticamente idênticas (vide abaixo o código).

Queria uma forma de declarar uma DIV "repeteco" apenas uma vez e onde necessário fosse repetí-la ao longo do documento, fizesse apenas sua referência passando por parâmetros o que a diferencia das "irmãs". Isso reduziria muito o código e facilitaria sua manutenção.

Há algo melhor ou mais apropriado que a tag TEMPLATE do HTML para isso? Se não, como faria? Obrigada antecipadamente....

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

1 Resposta 1

1

Você pode usar um Heredoc para armazenar um trecho em uma variável. Com ele você poderá salvar múltiplas linhas de maneira fácil.

Basta utilizar:

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

Para utilizar label e placeholder customizados, basta envolver o código acima em uma função e utilizar as variáveis (usadas como parâmetros) para customizar esses valores.

Exemplo:

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);

Demonstração: https://ideone.com/mHpoEA

Alternativa robusta:

Com essa alternativa você consegue ter mais autonomia na edição dos campos (label, placeholder e name), porém o código fica maior.

Nesta opção, fiz uma modificação básica, ao invés de informar o nome do campo e placeholder de forma idêntica, resolvi passar essas informações como array, assim você tem mais liberdade.

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",
]);

Demonstração: https://ideone.com/tLreO9

Caso você não queira trabalhar aplicando o HTML via JavaScript, é uma boa forma.


No caso da tag template, você precisa adicionar uma função em JavaScript para adicionar o código em determinado lugar em seu documento HTML, pode parecer complicado, mas é bastante simples.

Exemplo:

/* 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>

4
  • Excelente, @Valdeir Psr, até para mim que sou uma novata, consegui compreender bem, vc tem muito domínio. Confesso que o HEREDOC me foi mais interessante. Via criação do código Javascript (pelo recurso TEMPLATE), a depender do que vc precisa, se o foco for redução de linhas, acaba saíndo 6 por meia-dúzia, concorda?
    – Maya Fiuza
    Commented 28/03/2018 às 19:35
  • Como poderia mudar via HEREDOC (ou não) o LABEL, PLACEHOLDER e NAME de cada DIV?
    – Maya Fiuza
    Commented 28/03/2018 às 19:39
  • @MayaFiuza Atualizei meu exemplo. Utilizei uma função (com alguns parâmetros), dessa forma você consegue customizar os valores toda vez que imprimir o conteúdo. Commented 28/03/2018 às 19:50
  • Muito obrigada, @Valdeir Psr! Sensacional!!!! :^)
    – Maya Fiuza
    Commented 28/03/2018 às 21:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .