Conectar botones de edición del CMS con PHP y MySQL

Requisitos y objetivo

Necesitas un acceso de desarrollador al CMS de bluetronix y la página de ejemplo del anterior tutorial de PHP y MySQL. Este lee un registro de una tabla de MySQL y muestra su contenido a través de $LayoutHTML en la página web.

Ahora conectaremos este registro a un botón de edición. En las capturas de pantalla mostradas, la tabla se llama Test, el registro mostrado tiene la ID 1. Primero, completas el script PHP y luego el código HTML de tu página de ejemplo.

1. Script PHP: Leer registro e ID

Abre en tu página de ejemplo la sección Código PHP. Utiliza el siguiente script como un ejemplo completo de SELECT. La conexión de base de datos existente $mysqli y la variable del CMS $LayoutHTML ya están disponibles. No necesitas etiquetas PHP adicionales aquí.

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

La consulta carga ID, Fecha, Título, Descripción y Imagen de la tabla Test. Lo nuevo para el botón de edición es, sobre todo, la ID leída. PHP luego reemplaza el marcador __DB_ID__ en $LayoutHTML por la verdadera ID del registro. Los otros marcadores se llenan como antes con la fecha, el título, la descripción y la ruta de la imagen.

Los valores para la fecha, el título, la descripción y la ruta de la imagen se escapan con htmlspecialchars() para la salida HTML. $ID = 1 es solo un ID de ejemplo fijo; para otros registros, debes insertar el valor correspondiente.

Si todavía hay un ejemplo de UPDATE ejecutado automáticamente del tutorial anterior, desactívalo antes de esta prueba. De lo contrario, podría sobrescribir los cambios que guardes más tarde a través del botón de edición en la siguiente carga de la página.

2. Script HTML: Insertar botón de edición

Ahora abre el Código HTML de la misma página. El siguiente ejemplo muestra el bloque completo de la página con imagen, fecha, título y descripción. Está diseñado según tu captura de pantalla como un ejemplo HTML legible. Puedes mantener las clases CSS existentes y tu línea de imagen en tu propia 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>

La nueva línea decisiva está justo después de la fecha: el botón de edición como comentario HTML. Contiene el tipo de botón bxEB_DSedit, el nombre de la tabla Test y el marcador __DB_ID__. El CMS bluetronix procesa este comentario y muestra el lápiz de edición correspondiente en modo de edición.

Reproduce la línea del botón de edición, incluidos los signos de comentario, exactamente. El nombre de la tabla y la ID deben coincidir con el script PHP. Si tu propia tabla se llama diferente, reemplaza Test tanto en la consulta SELECT como en el botón de edición.

3. Así trabajan PHP y HTML juntos

Al cargar la página, PHP primero lee el registro de Test. Luego, el script reemplaza los marcadores __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ y __DB_Image__ en HTML. De la línea del botón de edición con __DB_ID__, en nuestro ejemplo se establece la relación con la tabla Test y con la ID del registro 1.

De este modo, la página seguirá mostrando la imagen y los textos de la base de datos. Además, el botón de edición sabe qué registro debe abrir. El cliente final no necesita editar ni PHP ni HTML.

4. Resultado: Editar registros directamente en la página web

Primero, guarda el código PHP y el código HTML. Vuelve a cargar la página de ejemplo en modo de edición. Junto a la fecha aparece ahora el lápiz de edición, como se ve en la primera captura de pantalla.

Toca el lápiz de edición. El CMS abre la máscara de edición para Test – ID: 1. Allí puedes cambiar la fecha, el título, la descripción y la imagen. Para la imagen, tienes disponible el botón BX-Image existente.

Toca Guardar y vuelve a cargar la página web. PHP lee los valores actualizados de MySQL y los inserta en los mismos marcadores de posición HTML. El diseño permanece sin cambios; solo los contenidos editados se actualizan.

Resumen

Para conectar con un botón de edición, debes complementar tu consulta SELECT existente con ID, pasarla con $LayoutHTML a __DB_ID__ y agregar la marca del botón de edición en HTML al lado del contenido deseado. Después, el registro correspondiente se puede editar directamente a través de la página web.