Spojiť CMS Edit-Buttons s PHP a MySQL

Predpoklady a cieľ

Potrebuješ vývojársky prístup k bluetronix CMS a vzorovú stránku z predchádzajúceho PHP a MySQL návodu. Táto stránka načíta záznam z MySQL tabuľky a zobrazí jeho obsah cez $LayoutHTML na webovej stránke.

Teraz prepojíme tento záznam s Edit-Buttonom. V zobrazených snímkach obrazovky má tabuľka názov Test, zobrazený záznam má ID 1. Najprv doplníš PHP skript a potom HTML kód tvojej vzorovej stránky.

1. PHP skript: Načítanie záznamu a ID

Na svojej vzorovej stránke otvori oblasť PHP kód. Použi nasledujúci skript ako kompletný príklad SELECT. Existujúce pripojenie k databáze $mysqli a premenná CMS $LayoutHTML sú už k dispozícii. Ďalšie PHP značky tu nepotrebuješ.

$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číta ID, Dátum, Titulu, Popis a Obrázok z tabuľky Test. Novinkou pre tlačidlo úprav je najmä načítaná ID. PHP následne nahradí zástupný znak __DB_ID__ v $LayoutHTML skutočným ID záznamu. Ostatné zástupné znaky sa vyplnia ako doteraz dátumom, titulom, popisom a cestou k obrázku.

Hodnoty pre dátum, názov, popis a cestu k obrázku budú maskované pomocou htmlspecialchars() pre HTML výstup. $ID = 1 slúži len ako pevné príkladové ID; pre iné záznamy zadáš príslušnú hodnotu.

Ak máš z predchádzajúceho návodu ešte automaticky vykonávaný príklad UPDATE, deaktivuj ho pred týmto testom. Inak by mohlo nahradiť úpravy, ktoré neskôr uložíš pomocou Edit-Buttonu, pri ďalšom načítaní stránky.

2. HTML skript: Vloženie Edit-Buttona

Teraz otvori HTML kód tej istej stránky. Nasledujúci príklad ukazuje kompletnú časť stránky s obrázkom, dátumom, názvom a popisom. Je zostavený ako čitateľný HTML príklad podľa tvojho snímku obrazovky. Existujúce CSS triedy a tvoj riadok obrázkov môžeš na svojej stránke zachovať.

<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úci nový riadok sa nachádza priamo za dátumom: tlačidlo úprav ako HTML komentár. Obsahuje typ tlačidla bxEB_DSedit, názov tabuľky Test a zástupný znak __DB_ID__. bluetronix CMS spracováva tento komentár a v editačnom režime zobrazuje príslušnú tužku na úpravy.

Presne prenes Edit-Button riadok vrátane znakov komentára. Názov tabuľky a ID musia byť zhodné s PHP skriptom. Ak máš vlastnú tabuľku s iným názvom, nahraď Test v SELECT dotaze aj v Edit-Button.

3. Takto spolupracujú PHP a HTML

Pri načítaní stránky PHP najprv načíta záznam z Test. Potom skript nahradí zástupné znaky __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ a __DB_Image__ v HTML. Z riadku tlačidla úprav s __DB_ID__ sa v našom príklade vytvorí prepojenie na tabuľku Test a na ID záznamu 1.

Takto stránka naďalej zobrazuje obrázok a texty z databázy. Navyše, tlačidlo na úpravy vie, ktorý záznam má otvoriť. Konečný zákazník nemusí upravovať ani PHP, ani HTML.

4. Výsledok: Priama úprava záznamu na webovej stránke

Najprv ulož PHP a HTML kód. Znova načítaj ukážkovú stránku v režime úprav. Vedľa dátumu sa teraz objaví tlačidlo na úpravy, ako je vidieť na prvom snímku obrazovky.

Klepni na tlačidlo na úpravy. CMS otvorí masku na úpravy pre Test – ID: 1. Tu môžeš zmeniť dátum, titul, popis a obrázok. Pre obrázok máš k dispozícii existujúce tlačidlo BX-Image.

Klepni na Uložiť a načítaj webovú stránku znova. PHP prečíta aktualizované hodnoty z MySQL a vloží ich do rovnakých HTML zástupných symbolov. Rozloženie zostáva nezmenené; iba upravený obsah sa aktualizuje.

Zhrnutie

Na prepojenie s tlačidlom úprav doplníš svoje existujúce SELECT dotazy o ID, odovzdáš ich s $LayoutHTML na __DB_ID__ a vložíš značku tlačidla úprav do HTML vedľa požadovaného obsahu. Potom môžeš príslušný záznam upravovať priamo cez webovú stránku.