Koble CMS-redigeringsknapper med PHP og MySQL

Krav og mål

Du trenger en utviklerkonto til bluetronix CMS og eksempelsiden fra den forrige PHP- og MySQL-opplæringen. Den leser en post fra en MySQL-tabell og viser innholdet via $LayoutHTML på nettsiden.

Nå kobler vi denne posten med en redigeringsknapp. I screenshotene heter tabellen Test, og den viste posten har ID 1. Du legger først til PHP-skriptet og deretter HTML-koden på eksempelsiden din.

1. PHP-skript: Les post og ID

Åpne på eksempelsiden din delen PHP-kode. Bruk følgende skript som et fullstendig SELECT-eksempel. Den eksisterende databaseforbindelsen $mysqli og CMS-variabelen $LayoutHTML er allerede tilgjengelige. Du trenger ikke flere PHP-tagger 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ørselen laster ID, Dato, Tittel, Beskrivelse og Bilde fra tabellen Test. Nytt for redigeringsknappen er spesielt den utlesne ID. PHP erstatter deretter plassholderen __DB_ID__ i $LayoutHTML med den faktiske datapunkt-IDen. De andre plassholderne fylles som før med dato, tittel, beskrivelse og bildebane.

Verdiene for dato, tittel, beskrivelse og bildebane blir maskert med htmlspecialchars() for HTML-utgangen. $ID = 1 fungerer kun som en fast eksempel-ID; for andre poster setter du inn den passende verdien.

Hvis det fra den forrige opplæringen fortsatt er et automatisk utført UPDATE-eksempel, deaktiver det før denne testen. Ellers kan det overskrive endringene du lagrer senere via redigeringsknappen ved neste gang du laster siden.

2. HTML-skript: Sett inn redigeringsknapp

Åpne nå HTML-koden for samme side. Det følgende eksemplet viser den komplette sideavsnittet med bilde, dato, tittel og beskrivelse. Det er bygget opp som et lesbart HTML-eksempel basert på skjermbildet ditt. Eksisterende CSS-klasser og bildebane 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 avgjørende nye linjen står rett bak datoen: redigeringsknappen som HTML-kommentar. Den inneholder knappetype bxEB_DSedit, tabellnavn Test og plassholder __DB_ID__. bluetronix CMS behandler denne kommentaren og viser i redigeringsmodus den passende redigeringspennen.

Kopier linjen for redigeringsknappen, inkludert kommentartegnene, nøyaktig. Tabellnavn og ID må samsvare med PHP-skriptet. Hvis tabellen din har et annet navn, erstatt Test både i SELECT-spørringen og i redigeringsknappen.

3. Slik jobber PHP og HTML sammen

Ved sidetilgangen leser PHP først datapunktet fra Test. Deretter erstatter skriptet plassholderne __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ og __DB_Image__ i HTML. Fra redigeringsknappelinja med __DB_ID__ vil vår eksempel hjelpe med tildelingen til tabellen Test og datapunkt-ID 1.

Dermed viser siden fortsatt bildet og tekstene fra databasen. I tillegg vet Edit-knappen hvilken dataset den skal åpne. Sluttbrukeren trenger verken å redigere PHP eller HTML.

4. Resultat: Rediger post direkte på nettsiden

Lagre først PHP- og HTML-koden. Last inn eksempel-siden på nytt i redigeringsmodus. Ved siden av datoen vises nå Rediger-penn, som vist på det første skjermbildet.

Trykk på Rediger-pennen. CMS åpner redigeringsvinduet for Test – ID: 1. Der kan du endre dato, tittel, beskrivelse og bilde. For bildet har du den tilgjengelige BX-Image-knappen.

Trykk på Lagre og last inn nettsiden på nytt. PHP leser de oppdaterte verdiene fra MySQL og setter dem inn i de samme HTML-plassholderne. Oppsettet forblir uendret; kun de redigerte innholdene blir oppdatert.

Sammendrag

For å koble til en redigeringsknapp må du legge til din eksisterende SELECT-forespørsel med ID, overføre den med $LayoutHTML til __DB_ID__ og legge til redigeringsknappmerkingen i HTML ved siden av ønsket innhold. Deretter kan det tilknyttede datapunktet redigeres direkte via nettsiden.