CMS Edit-Buttons mit PHP und MySQL verbinden

Voraussetzungen und Ziel

Du benötigst einen Entwicklerzugang zum bluetronix CMS und die Beispielseite aus dem vorherigen PHP- und MySQL-Tutorial. Sie liest einen Datensatz aus einer MySQL-Tabelle und zeigt seine Inhalte über $LayoutHTML auf der Webseite an.

Jetzt verbinden wir diesen Datensatz mit einem Edit-Button. In den gezeigten Screenshots heißt die Tabelle Test, der angezeigte Datensatz besitzt die ID 1. Du ergänzt zunächst das PHP-Skript und danach den HTML-Code deiner Beispielseite.

1. PHP-Skript: Datensatz und ID auslesen

Öffne auf deiner Beispielseite den Bereich PHP Code. Verwende das folgende Skript als vollständiges SELECT-Beispiel. Die bestehende Datenbankverbindung $mysqli und die CMS-Variable $LayoutHTML stehen bereits zur Verfügung. Zusätzliche PHP-Tags benötigst du hier nicht.

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

Die Abfrage lädt ID, Date, Title, Description und Image aus der Tabelle Test. Neu für den Edit-Button ist vor allem die mit ausgelesene ID. PHP ersetzt anschließend den Platzhalter __DB_ID__ in $LayoutHTML durch die tatsächliche Datensatz-ID. Die übrigen Platzhalter werden wie bisher mit Datum, Titel, Beschreibung und Bildpfad gefüllt.

Die Werte für Datum, Titel, Beschreibung und Bildpfad werden mit htmlspecialchars() für die HTML-Ausgabe maskiert. $ID = 1 dient hier nur als feste Beispiel-ID; für andere Datensätze setzt du den passenden Wert ein.

Falls aus dem vorherigen Tutorial noch ein automatisch ausgeführtes UPDATE-Beispiel vorhanden ist, deaktiviere es vor diesem Test. Sonst könnte es die Änderungen, die du später über den Edit-Button speicherst, beim nächsten Seitenaufruf wieder überschreiben.

2. HTML-Skript: Edit-Button einfügen

Öffne jetzt den HTML Code derselben Seite. Das folgende Beispiel zeigt den vollständigen Seitenabschnitt mit Bild, Datum, Titel und Beschreibung. Es ist anhand deines Screenshots als lesbares HTML-Beispiel aufgebaut. Vorhandene CSS-Klassen und deine Bildzeile kannst du bei deiner eigenen Seite beibehalten.

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

Die entscheidende neue Zeile steht direkt hinter dem Datum: der Edit-Button als HTML-Kommentar. Er enthält den Button-Typ bxEB_DSedit, den Tabellennamen Test und den Platzhalter __DB_ID__. Das bluetronix CMS verarbeitet diesen Kommentar und blendet im Bearbeitungsmodus den passenden Edit-Stift ein.

Übernimm die Edit-Button-Zeile einschließlich der Kommentarzeichen exakt. Tabellenname und ID müssen mit dem PHP-Skript übereinstimmen. Wenn deine eigene Tabelle anders heißt, ersetze Test sowohl bei der SELECT-Abfrage als auch beim Edit-Button.

3. So arbeiten PHP und HTML zusammen

Beim Seitenaufruf liest PHP zuerst den Datensatz aus Test. Anschließend ersetzt das Skript die Platzhalter __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ und __DB_Image__ im HTML. Aus der Edit-Button-Zeile mit __DB_ID__ wird bei unserem Beispiel die Zuordnung zur Tabelle Test und zur Datensatz-ID 1.

Damit zeigt die Seite weiterhin das Bild und die Texte aus der Datenbank an. Zusätzlich weiß der Edit-Button, welchen Datensatz er öffnen soll. Der Endkunde muss dafür weder PHP noch HTML bearbeiten.

4. Ergebnis: Datensatz direkt auf der Webseite bearbeiten

Speichere zunächst den PHP- und den HTML-Code. Lade die Beispielseite im Bearbeitungsmodus erneut. Neben dem Datum erscheint jetzt der Edit-Stift, wie auf dem ersten Screenshot zu sehen ist.

Tippe auf den Edit-Stift. Das CMS öffnet die Bearbeitungsmaske für Test – ID: 1. Dort kannst du Datum, Titel, Beschreibung und Bild ändern. Für das Bild steht dir der vorhandene BX-Image-Button zur Verfügung.

Tippe auf Speichern und lade die Webseite erneut. PHP liest die aktualisierten Werte aus MySQL und setzt sie in dieselben HTML-Platzhalter ein. Das Layout bleibt unverändert; nur die bearbeiteten Inhalte werden aktualisiert.

Zusammenfassung

Für die Verbindung mit einem Edit-Button ergänzt du deine bestehende SELECT-Abfrage um ID, übergibst diese mit $LayoutHTML an __DB_ID__ und fügst die Edit-Button-Markierung im HTML neben dem gewünschten Inhalt ein. Danach kann der zugehörige Datensatz direkt über die Webseite bearbeitet werden.