Conectar botões de edição do CMS com PHP e MySQL

Pré-requisitos e objetivo

Você precisa de um acesso de desenvolvedor ao CMS bluetronix e da página de exemplo do tutorial de PHP e MySQL. Ele lê um registro de uma tabela MySQL e mostra seu conteúdo através de $LayoutHTML no site.

Agora vamos conectar este registro a um botão de edição. Nos screenshots mostrados, o nome da tabela é Teste, o registro exibido possui a ID 1. Primeiro, você irá complementar o script PHP e depois o código HTML da sua página de exemplo.

1. Script PHP: ler registro e ID

Abra na sua página de exemplo a seção Código PHP. Use o seguinte script como um exemplo completo de SELECT. A conexão do banco de dados existente $mysqli e a variável CMS $LayoutHTML já estão disponíveis. Você não precisa de tags PHP adicionais aqui.

$ID = 1; // Beispiel: der Datensatz, der auf dieser Seite angezeigt wird

//---- SELECT ----
$stmt = $mysqli->prepare("SELECT ID, `Date`, Title, Description, Image FROM Test WHERE ID = ?");
$stmt->bind_param("i", $ID);
$stmt->execute();
$result = $stmt->get_result();

if($row = $result->fetch_assoc()) {
   $ID = $row["ID"];
   $Date = $row["Date"];
   $Title = $row["Title"];
   $Description = $row["Description"];
   $Image = $row["Image"];

   $LayoutHTML = str_replace("__DB_ID__", $ID, $LayoutHTML);
   $LayoutHTML = str_replace("__DB_Date__", htmlspecialchars($Date, ENT_QUOTES, "UTF-8"), $LayoutHTML);
   $LayoutHTML = str_replace("__DB_Title__", htmlspecialchars($Title, ENT_QUOTES, "UTF-8"), $LayoutHTML);
   $LayoutHTML = str_replace("__DB_Description__", htmlspecialchars($Description, ENT_QUOTES, "UTF-8"), $LayoutHTML);
   $LayoutHTML = str_replace("__DB_Image__", htmlspecialchars($Image, ENT_QUOTES, "UTF-8"), $LayoutHTML);
}

$stmt->close();

A consulta carrega ID, Data, Título, Descrição e Imagem da tabela Teste. O novo recurso do botão de edição é principalmente o ID lido junto. O PHP, em seguida, substitui o marcador __DB_ID__ em $LayoutHTML pelo ID do registro real. Os outros marcadores são preenchidos como antes com data, título, descrição e caminho da imagem.

Os valores para data, título, descrição e caminho da imagem são escapados com htmlspecialchars() para a saída HTML. $ID = 1 serve aqui apenas como um ID de exemplo fixo; para outros registros, você deve inserir o valor apropriado.

Se houver um exemplo de UPDATE que foi automaticamente executado do tutorial anterior, desative-o antes deste teste. Caso contrário, ele pode sobrescrever as alterações que você salvar depois através do botão de edição na próxima carga da página.

2. Script HTML: inserir botão de edição

Agora abra o Código HTML da mesma página. O seguinte exemplo mostra a seção completa da página com imagem, data, título e descrição. Está estruturado como um exemplo HTML legível baseado na sua captura de tela. Você pode manter as classes CSS existentes e sua linha de imagem na sua própria página.

<section class="section py-5 sectionAll">
   <div class="container py-4">
      <div class="row g-5 align-items-center">
         <div class="colAll col-lg-6 wowOff fadeInLeft">
            <div class="ratio ratio-4x3 rounded-4 overflow-hidden">
               <img src="/CMS/cgi-bin/IMG.pl?__DB_Image__=700=500=1=100=1" class="w-100 h-100 object-fit-cover" alt="">
            </div>
         </div>
         <div class="colAll col-lg-6 wowOff fadeInRight">
            <span class="badge text-bg-secondary text-white mb-3">__DB_Date__</span>
            <!--bxEB_DSedit Test __DB_ID__ bxEB_DSedit-->
            <h2>__DB_Title__</h2>
            <p>__DB_Description__</p>
            <a href="#" class="btn btn-primary">Mehr erfahren</a>
         </div>
      </div>
   </div>
</section>

A nova linha decisiva fica logo após a data: o botão de edição como comentário HTML. Ele contém o tipo de botão bxEB_DSedit, o nome da tabela Teste e o marcador __DB_ID__. O CMS bluetronix processa esse comentário e exibe, no modo de edição, o lápis de edição correspondente.

Copie a linha do botão de edição, incluindo os caracteres de comentário, exatamente. O nome da tabela e o ID devem corresponder ao script PHP. Se sua tabela tiver um nome diferente, substitua Teste tanto na consulta SELECT quanto no botão de edição.

3. Como PHP e HTML trabalham juntos

Ao acessar a página, o PHP lê primeiro o registro da Teste. Em seguida, o script substitui os marcadores __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ e __DB_Image__ no HTML. Da linha do botão de edição com __DB_ID__, no nosso exemplo, é feita a associação com a tabela Teste e com o ID do registro 1.

Assim, a página continua mostrando a imagem e os textos do banco de dados. Além disso, o botão de edição sabe qual registro abrir. O cliente final não precisa editar nem PHP nem HTML.

4. Resultado: editar o registro diretamente no site

Primeiro, salve o código PHP e HTML. Recarregue a página de exemplo em modo de edição. Ao lado da data, agora aparece o ícone de edição, como visto na primeira captura de tela.

Toque no ícone de edição. O CMS abre a máscara de edição para Teste – ID: 1. Lá você pode alterar a data, o título, a descrição e a imagem. Para a imagem, você tem o botão de imagem BX disponível.

Toque em Salvar e recarregue a página da web. O PHP lê os valores atualizados do MySQL e os insere nos mesmos marcadores de posição HTML. O layout permanece inalterado; apenas os conteúdos editados são atualizados.

Resumo

Para conectar com um botão de edição, você deve complementar sua consulta SELECT existente com ID, passar isso com $LayoutHTML para __DB_ID__ e adicionar a marcação do botão de edição no HTML ao lado do conteúdo desejado. Depois disso, o registro correspondente pode ser editado diretamente pelo site.