Koppla CMS-redigeringsknappar med PHP och MySQL

Förutsättningar och mål

Du behöver ett utvecklaråtkomst till bluetronix CMS och exempelhemsidan från den tidigare PHP- och MySQL-handledningen. Den läser en databaspost från en MySQL-tabell och visar dess innehåll via $LayoutHTML på hemsidan.

Nu kopplar vi denna databaspost med en redigeringsknapp. I de visade skärmbilderna heter tabellen Test och den visade databaspoten har ID 1. Du börjar med att komplettera PHP-skriptet och sedan HTML-koden på din exempelhemsida.

1. PHP-skript: Läs av databaspost och ID

Öppna området PHP-kod på din exempelhemsida. Använd följande skript som ett komplett SELECT-exempel. Den befintliga databasanslutningen $mysqli och CMS-variabeln $LayoutHTML är redan tillgängliga. Ytterligare PHP-taggar behövs inte här.

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

Frågan laddar ID, Datum, Titel, Beskrivning och Bild från tabellen Test. Nytt för redigeringsknappen är framför allt ID som lästs ut. PHP ersätter därefter platsen __DB_ID__ i $LayoutHTML med det faktiska post-ID:t. Övriga platshållare fylls som tidigare med datum, titel, beskrivning och bildsökväg.

Värdena för datum, titel, beskrivning och bildsökväg maskeras med htmlspecialchars() för HTML-utmatningen. $ID = 1 används här endast som en fast exempel-ID; för andra databasposter anger du det lämpliga värdet.

Om det finns ett automatiskt utfört UPDATE-exempel från den tidigare handledningen, inaktivera det innan detta test. Annars kan det skriva över de ändringar som du senare sparar via redigeringsknappen vid nästa sidladdning.

2. HTML-skript: Infoga redigeringsknapp

Öppna nu HTML-koden på samma sida. Det följande exemplet visar hela sidavsnittet med bild, datum, titel och beskrivning. Det är uppbyggt utifrån din skärmbild som ett läsbart HTML-exempel. Existerande CSS-klasser och din bildrad kan du behålla på din egen sida.

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

Den avgörande nya raden kommer direkt efter datumet: redigeringsknappen som HTML-kommentar. Den innehåller knapptypen bxEB_DSedit, tabellnamnet Test och platsen __DB_ID__. Det bluetronix- CMS bearbetar denna kommentar och visar i redigeringsläge den passande pennsymbolen.

Ta över raden för redigeringsknappen inklusive kommentarerna exakt. Tabellnamn och ID måste stämma överens med PHP-skriptet. Om din egen tabell har ett annat namn, ersätt Test både i SELECT-frågan och vid redigeringsknappen.

3. Så arbetar PHP och HTML tillsammans

Vid sidbesök läser PHP först ut posten från Test. Skriptet ersätter därefter platshaållarna __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ och __DB_Image__ i HTML. Från redigeringsknappraden med __DB_ID__ blir det i vårt exempel kopplingen till tabellen Test och post-ID:t 1.

Detta gör att sidan fortfarande visar bilden och texterna från databasen. Dessutom vet Edit-knappen vilken post den ska öppna. Slutanvändaren behöver inte redigera PHP eller HTML.

4. Resultat: Redigera databasen direkt på hemsidan

Spara först PHP- och HTML-koden. Ladda exempel-sidan i redigeringsläge igen. Vid sidan av datumet visas nu Redigera-pennan, som på den första skärmbilden.

Tryck på Redigera-pennan. CMS öppnar redigeringsmasken för Test – ID: 1. Där kan du ändra datum, titel, beskrivning och bild. För bilden finns den befintliga BX-Image-knappen tillgänglig.

Tryck på Spara och ladda om webbplatsen. PHP läser de uppdaterade värdena från MySQL och sätter in dem i samma HTML-platsmarkörer. Layouten förblir oförändrad; endast de redigerade innehållen uppdateras.

Sammanfattning

För att koppla till en redigeringsknapp kompletterar du din befintliga SELECT-fråga med ID, skickar denna med $LayoutHTML till __DB_ID__ och lägger till redigeringsknappens markering i HTML bredvid det önskade innehållet. Därefter kan den tillhörande posten redigeras direkt via webbplatsen.