CMS-bewerkknoppen verbinden met PHP en MySQL

Vereisten en doel

Je hebt een ontwikkelaarsaccount voor het bluetronix CMS nodig en de voorbeeldpagina uit de vorige PHP- en MySQL-tutorial. Deze leest een record uit een MySQL-tabel en toont zijn inhoud via $LayoutHTML op de website.

We verbinden nu dit record met een bewerkknop. In de getoonde screenshots heet de tabel Test, het weergegeven record heeft de ID 1. Je voegt eerst het PHP-script toe en dan de HTML-code van je voorbeeldpagina.

1. PHP-script: record en ID uitlezen

Open op je voorbeeldpagina het gedeelte PHP-code. Gebruik het volgende script als compleet SELECT-voorbeeld. De bestaande databaseverbinding $mysqli en de CMS-variabele $LayoutHTML zijn al beschikbaar. Extra PHP-tags heb je hier niet nodig.

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

De query laadt ID, Datum, Titel, Beschrijving en Afbeelding uit de tabel Test. Nieuw voor de Bewerken-knop is vooral de gelezen ID. PHP vervangt vervolgens de placeholder __DB_ID__ in $LayoutHTML door de werkelijke record-ID. De overige placeholders worden zoals voorheen gevuld met datum, titel, beschrijving en afbeeldingspad.

De waarden voor datum, titel, beschrijving en afbeeldingspad worden met htmlspecialchars() voor weergave in HTML gemaskeerd. $ID = 1 dient hier alleen als vaste voorbeeld-ID; voor andere records gebruik je de corresponderende waarde.

Als er uit de vorige tutorial nog een automatisch uitgevoerd UPDATE-voorbeeld aanwezig is, deactiveer het dan voor deze test. Anders kan het de wijzigingen die je later via de bewerkknop opslaat, bij de volgende paginaoproep opnieuw overschrijven.

2. HTML-script: bewerkknop invoegen

Open nu de HTML-code van dezelfde pagina. Het volgende voorbeeld toont het volledige paginagedeelte met afbeelding, datum, titel en beschrijving. Het is opgebouwd als een leesbaar HTML-voorbeeld aan de hand van je screenshot. Bestaande CSS-klassen en je afbeeldingsrij kun je op je eigen pagina behouden.

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

De cruciale nieuwe regel staat direct achter de datum: de Bewerken-knop als HTML-commentaar. Deze bevat het knop-type bxEB_DSedit, de tabelnaam Test en de placeholder __DB_ID__. Het bluetronix CMS verwerkt deze opmerking en toont in de bewerkingsmodus de bijbehorende Bewerken-stift.

Neem de bewerkknopregel inclusief de opmerkingstekens exact over. Tabelnaam en ID moeten overeenkomen met het PHP-script. Als je eigen tabel anders heet, vervang dan Test zowel bij de SELECT-query als bij de bewerkknop.

3. Zo werken PHP en HTML samen

Bij het openen van de pagina leest PHP eerst het record uit Test. Vervolgens vervangt het script de placeholders __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ en __DB_Image__ in de HTML. Uit de Bewerken-knopregel met __DB_ID__ wordt in ons voorbeeld de toewijzing aan de tabel Test en de record-ID 1.

Hierdoor toont de pagina nog steeds de afbeelding en teksten uit de database. Bovendien weet de Edit-knop welk record hij moet openen. De eindklant hoeft hiervoor geen PHP of HTML te bewerken.

4. Resultaat: record direct op de website bewerken

Sla eerst de PHP- en HTML-code op. Laad de voorbeeldpagina opnieuw in de bewerkingsmodus. Naast de datum verschijnt nu de Edit-Pen, zoals op de eerste screenshot te zien is.

Tik op de Edit-Pen. Het CMS opent het bewerkingsmasker voor Test – ID: 1. Daar kun je datum, titel, beschrijving en afbeelding wijzigen. Voor de afbeelding is de bestaande BX-Image-knop beschikbaar.

Tik op Opslaan en laad de website opnieuw. PHP leest de bijgewerkte waarden uit MySQL en plaatst ze in dezelfde HTML-plaatsvervangers. De lay-out blijft ongewijzigd; alleen de bewerkte inhoud wordt bijgewerkt.

Samenvatting

Voor de verbinding met een Bewerken-knop voeg je je bestaande SELECT-query toe met ID, geef deze door met $LayoutHTML aan __DB_ID__ en voeg de Bewerken-knop-markering in de HTML naast de gewenste inhoud in. Daarna kan het bijbehorende record direct via de website worden bewerkt.