CMS szerkesztőgombok összekapcsolása PHP-vel és MySQL-lal

Követelmények és cél

Fejlesztői hozzáférésre van szükséged a bluetronix CMS-hez, valamint a korábbi PHP- és MySQL-tutorial példányra. Ez kiolvassa az adatbázisból a rekordot, és a $LayoutHTML segítségével megjeleníti annak tartalmát a weboldalon.

Most összekapcsoljuk ezt a rekordot egy szerkesztőgombbal. A bemutatott képernyőképeken a táblázat neve Test, a megjelenített rekord az ID 1 azonosítóval rendelkezik. Először egészítsd ki a PHP scriptet, majd a példához tartozó HTML kódot.

1. PHP scriptek: Rekord és azonosító kiolvasása

Nyisd meg a példás oldaladon a PHP Kód részt. Használj a következő szkriptet teljes SELECT példa gyanánt. A meglévő adatbázis kapcsolat, $mysqli és a CMS változó, $LayoutHTML már elérhető. További PHP tagokra nincs szükséged itt.

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

A lekérdezés betölti az ID, Dátum, Cím, Leírás és Kép értékeket a Test táblából. Az Edit gombnál új, hogy a kiolvasott ID is megjelenik. A PHP ezután a __DB_ID__ helyettesítőt a $LayoutHTML-ban a tényleges rekord-ID-val helyettesíti. A többi helyettesítőt továbbra is a dátummal, címmel, leírással és képkönyvtárral töltjük ki.

A dátum, cím, leírás és képfájl értékeket a htmlspecialchars() segítségével maszkolják a HTML kimenethez. $ID = 1 itt csak rögzített példa azonosító; más rekordok esetén az megfelelő értéket kell használni.

Ha az előző tutorialból még van egy automatikusan végrehajtott UPDATE példa, azt a teszt előtt deaktiváld. Ellenkező esetben a következő oldalbetöltésnél felülírhatja azokat a módosításokat, amelyeket később a szerkesztőgombbal mentesz.

2. HTML skript: Szerkesztőgomb beillesztése

Most nyisd meg a HTML Kód szakaszt ugyanazon az oldalon. Az alábbi példa a teljes oldalrészt mutatja be képpel, dátummal, címmel és leírással. A felhasználói képernyőképed alapján olvasható HTML példát alakít.

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

A döntő új sor közvetlenül a dátum után található: az Edit gomb HTML megjegyzésként. Tartalmazza a gomb típusát bxEB_DSedit, a táblanevet Test és a __DB_ID__ helyettesítőt. A bluetronix CMS feldolgozza ezt a megjegyzést, és szerkesztési módban megjeleníti a megfelelő szerkesztő ikont.

Pontos másold a szerkesztőgomb sorát, beleértve a megjegyzésjelet is. A táblázat neve és az azonosító meg kell egyezzen a PHP-skripttel. Ha a saját táblázatod más nevet visel, cseréld le Test-t mind a SELECT kérdésben, mind a szerkesztőgombnál.

3. Így működik együtt a PHP és a HTML

Oldalmegnyitáskor a PHP először kiolvassa a rekordot a Test táblából. Ezt követően a szkript a __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ és __DB_Image__ helyettesítőket helyettesíti a HTML-ben. Az Edit gomb sorából a __DB_ID__ alapján a Test táblához és a rekord-ID-hoz 1 kerül.

Ezért az oldal továbbra is megjeleníti az adatbázisban található képet és szövegeket. Továbbá a szerkesztés gomb tudja, hogy melyik adathalmazt kell megnyitni. A végfelhasználónak ehhez nem kell PHP-t vagy HTML-t módosítania.

4. Eredmény: Rekord közvetlen szerkesztése a weboldalon

Első lépésben mentse el a PHP- és HTML-kódot. Töltse újra a példa oldalt szerkesztési módban. A dátum mellett most megjelenik a Szerkesztő ceruza, ahogy az első képernyőképen látható.

Koppintson a Szerkesztő ceruzára. A CMS megnyitja a szerkesztési maszkot a Teszt – ID: 1 részhez. Itt módosíthatja a dátumot, címet, leírást és képet. A képhez elérheti a meglévő BX-Image-Gomb-ot.

Koppintson a Mentés gombra, majd töltsön újra be az oldalt. A PHP kiolvassa az MySQL-ból a frissített értékeket és elhelyezi azokat a megfelelő HTML-helyettesítőkben. A dizájn változatlan marad; csak a módosított tartalom frissül.

Összefoglalás

Az Edit gombhoz való kapcsolathoz kiegészíted a meglévő SELECT lekérdezésedet ID értékkel, átadod ezt a $LayoutHTML-on keresztül __DB_ID__-nek, és az Edit gomb jelölését beilleszted a HTML-be a kívánt tartalom mellé. Ezt követően a kapcsolódó rekordot közvetlenül a weboldalon lehet szerkeszteni.