Forbinde CMS-redigeringsknapper med PHP og MySQL

Forudsætninger og mål

Du har brug for en udvikleradgang til bluetronix CMS og eksempel-siden fra den forrige PHP- og MySQL-tutorial. Den læser en post fra en MySQL-tabel og viser dens indhold via $LayoutHTML på hjemmesiden.

Nu forbinder vi denne post med en redigeringsknap. I de viste skærmbilleder hedder tabellen Test, den viste post har ID 1. Du tilføjer først PHP-scriptet og derefter HTML-koden på din eksempel-side.

1. PHP-script: Læs post og ID

Åbn på din eksempel-side området PHP Code. Brug følgende script som et komplet SELECT-eksempel. Den eksisterende databaseforbindelse $mysqli og CMS-variablen $LayoutHTML er allerede tilgængelige. Du behøver ikke ekstra PHP-tags her.

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

Forespørgslen henter ID, Dato, Titel, Beskrivelse og Billede fra tabellen Test. Nyheden for Edit-knappen er især den med læst ID. PHP erstatter derefter pladsholderen __DB_ID__ i $LayoutHTML med den faktiske post-ID. De øvrige pladsholdere fyldes som før med dato, titel, beskrivelse og billedsti.

Værdierne for dato, titel, beskrivelse og billedsti bliver maskeret med htmlspecialchars() til HTML-udskrift. $ID = 1 bruges kun som en fast eksempel-ID; for andre poster sætter du den passende værdi ind.

Hvis der fra den forrige tutorial stadig er et automatisk udført UPDATE-eksempel, skal du deaktivere det før denne test. Ellers kan det overskrive de ændringer, du senere gemmer via redigeringsknappen, ved næste opkald af siden.

2. HTML-script: Indsæt redigeringsknap

Åbn nu HTML Code på den samme side. Det følgende eksempel viser den komplette sektion af siden med billede, dato, titel og beskrivelse. Det er bygget efter dit skærmbillede som et læsevenligt HTML-eksempel. Eksisterende CSS-klasser og din billedlinie kan du beholde på din egen side.

<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 afgørende nye linje står lige efter datoen: Edit-knappen som HTML-kommentar. Den indeholder knaptypen bxEB_DSedit, tabelnavnet Test og pladsholderen __DB_ID__. bluetronix CMS behandler denne kommentar og viser den passende redigeringspen i redigeringstilstand.

Overtag redigeringsknap-linjen inklusive kommentar-tegnene nøjagtigt. Tabelnavn og ID skal stemme overens med PHP-scriptet. Hvis din egen tabel har et andet navn, skal du erstatte Test både i SELECT-forespørgslen og i redigeringsknappen.

3. Sådan arbejder PHP og HTML sammen

Ved sideopkald læser PHP først posten fra Test. Derefter erstatter scriptet pladsholderne __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ og __DB_Image__ i HTML. Fra Edit-knaplinjen med __DB_ID__ bliver i vores eksempel tildelingen til tabellen Test og til post-ID 1.

Dette gør, at siden fortsat viser billederne og teksterne fra databasen. Derudover ved Rediger-knappen, hvilken datarække den skal åbne. Slutbrugeren skal hverken redigere PHP eller HTML.

4. Resultat: Rediger post direkte på hjemmesiden

Gem først PHP- og HTML-koden. Indlæs eksempelsiden i redigeringstilstand igen. Ved siden af datoen vises nu Edit-ikonet, som set på det første screenshot.

Tryk på Edit-ikonet. CMS'et åbner redigeringsvinduet for Test – ID: 1. Her kan du ændre dato, titel, beskrivelse og billede. Til billedet har du den eksisterende BX-Image-knap til rådighed.

Tryk på Gem og indlæs websiden igen. PHP læser de opdaterede værdier fra MySQL og indsætter dem i de samme HTML-pladsholdere. Layoutet forbliver uændret; kun de redigerede indhold vil blive opdateret.

Sammendrag

For at forbinde med en Edit-knap tilføjer du din eksisterende SELECT-forespørgsel med ID, videregiver denne med $LayoutHTML til __DB_ID__ og indsætter edit-knapmarkeringen i HTML ved siden af det ønskede indhold. Derefter kan den tilknyttede post redigeres direkte via websiden.