Propojení CMS editovacích tlačítek s PHP a MySQL

Předpoklady a cíl

Potřebuješ vývojářský přístup k bluetronix CMS a ukázkovou stránku z předchozího PHP a MySQL tutoriálu. Ten načítá záznam z MySQL tabulky a zobrazuje jeho obsah přes $LayoutHTML na webové stránce.

Teď propojíme tento záznam s editovacím tlačítkem. Na uvedených snímcích se tabulka jmenuje Test, zobrazený záznam má ID 1. Nejprve doplníš PHP skript a poté HTML kód tvé ukázkové stránky.

1. PHP skript: Přečíst záznam a ID

Otevři na své ukázkové stránce část PHP Kód. Použij následující skript jako kompletní příklad SELECT. Existující připojení k databázi $mysqli a proměnná CMS $LayoutHTML jsou již k dispozici. Další PHP tagy zde nepotřebuješ.

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

Dotaz načítá ID, Datum, Název, Popis a Obrázek z tabulky Test. Novinkou pro tlačítko Edit je především zpracovaná ID. PHP poté nahradí zástupný znak __DB_ID__ v $LayoutHTML skutečnou ID záznamu. Ostatní zástupné znaky jsou vyplněny jako dosud s datem, názvem, popisem a cestou k obrázku.

Hodnoty pro datum, titulek, popis a cestu k obrázku jsou maskovány pro HTML výstup pomocí htmlspecialchars(). $ID = 1 slouží pouze jako pevné příkladové ID; pro jiné záznamy použij odpovídající hodnotu.

Pokud z předchozího tutoriálu ještě existuje automaticky prováděný příklad UPDATE, deaktivuj ho před tímto testem. Jinak by mohl změny, které později uložíš pomocí editovacího tlačítka, při dalším načtení stránky opět přepsat.

2. HTML skript: Vložit editovací tlačítko

Nyní otevři HTML Kód téže stránky. Následující příklad ukazuje kompletní část stránky s obrazem, datem, titulkem a popisem. Je postaven na základě tvého snímku jako čitelné HTML ukázky. Stávající CSS třídy a ty tvé obrázkové řádky můžeš na své vlastní stránce zachovat.

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

Rozhodující nová řádka se nachází přímo za datem: tlačítko pro úpravy jako HTML komentář. Obsahuje typ tlačítka bxEB_DSedit, název tabulky Test a zástupný znak __DB_ID__. CMS bluetronix zpracovává tento komentář a v editačním režimu zobrazuje odpovídající tužku pro úpravy.

Převzít řádek editovacího tlačítka včetně znaků komentáře přesně. Název tabulky a ID musí odpovídat PHP skriptu. Pokud se tvoje tabulka jmenuje jinak, nahraď Test jak v SELECT dotazu, tak v editovacím tlačítku.

3. Takto pracují PHP a HTML spolu

Při načtení stránky PHP nejprve přečte záznam z Test. Následně skript nahradí zástupné znaky __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ a __DB_Image__ v HTML. Z řádky tlačítka pro úpravy s __DB_ID__ se v našem příkladu vytvoří přiřazení k tabulce Test a ID záznamu 1.

Tímto způsobem stránka nadále zobrazuje obrázek a texty z databáze. Kromě toho ví tlačítko pro úpravy, který záznam otevřít. Konečný uživatel nemusí upravovat PHP ani HTML.

4. Výsledek: Přímo upravit záznam na webové stránce

Nejprve ulož PHP a HTML kód. Znovu načti ukázkovou stránku v režimu úprav. Vedle data se nyní objeví ikona tužky, jak je vidět na první obrazovce.

Tipni na ikonu tužky. CMS otevře masku pro úpravy pro Test – ID: 1. Tady můžeš změnit datum, název, popis a obrázek. Pro obrázek je k dispozici existující tlačítko BX-Image.

Tipni na Uložit a znovu načti webovou stránku. PHP načte aktualizované hodnoty z MySQL a vloží je do stejných HTML zástupců. Rozložení zůstává nezměněno; pouze upravený obsah bude aktualizován.

Shrnutí

Pro spojení s tlačítkem pro úpravy doplníš svůj stávající SELECT dotaz o ID, předáš ji s $LayoutHTML k __DB_ID__ a vložíš označení tlačítka pro úpravy v HTML vedle požadovaného obsahu. Poté může být příslušný záznam přímo upravován přes web.