Yhdistä CMS:n Edit-napit PHP:n ja MySQL:n avulla

Vaatimukset ja tavoite

Tarvitset kehittäjätunnuksen bluetronix CMS:ään ja esimerkkisivun aiemmasta PHP- ja MySQL-ohjeesta. Tämä lukee tietueen MySQL-taulusta ja näyttää sen sisällön $LayoutHTML:ssa verkkosivustolla.

Nyt yhdistämme tämän tietueen Edit-nappiin. Näytetyissä kuvakaappauksissa taulun nimi on Test, ja näytettävän tietueen ID 1. Lisää ensin PHP-skripti ja sitten HTML-koodi esimerkkisivullesi.

1. PHP-skripti: Tietueen ja ID:n lukeminen

Avaa esimerkkisivullasi PHP-koodi -osio. Käytä seuraavaa skriptiä täydellisenä SELECT-esimerkkinä. Nykyinen tietokantayhteys $mysqli ja CMS-muuttuja $LayoutHTML ovat jo käytettävissä. Tarvitset lisää PHP-tageja täällä.

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

Kysely lataa ID, Päivämäärä, Otsikko, Kuvaus ja Kuva taulusta Testi. Uutta Edit-painikkeessa on ennen kaikkea mukana luettu ID. PHP korvataa myöhemmin paikan __DB_ID__ $LayoutHTML:ssa todellisella tietue-ID:llä. Muiden paikkojen täyttäminen tapahtuu edelleen päivämäärällä, otsikolla, kuvauksella ja kuvapolulla.

Päivämäärän, otsikon, kuvauksen ja kuvatiedostopolun arvot maskataan htmlspecialchars():illa HTML-ulostuloa varten. $ID = 1 toimii täällä vain kiinteänä esimerkkinä; muille tietueille käytät sopivaa arvoa.

Jos edellisestä oppaasta on vielä automaattisesti suoritettavissa oleva UPDATE-esimerkki, deaktivoit se ennen tätä testiä. Muutoin se voi ylikirjoittaa muutokset, jotka tallennat myöhemmin Edit-napilla seuraavassa sivun latauksessa.

2. HTML-skripti: Edit-napin lisääminen

Avaa nyt saman sivun HTML-koodi. Seuraava esimerkki näyttää täydellisen sivuosion, jossa on kuva, päivämäärä, otsikko ja kuvaus. Se on rakennettu luettavaksi HTML-esimerkiksi kuvakaappauksesi perusteella. Voit säilyttää olemassa olevat CSS-luokat ja kuvasi omalla sivullasi.

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

Ratkaiseva uusi rivi on suoraan päivämäärän jälkeen: edit-painike HTML-kommenttina. Se sisältää painikketyypin bxEB_DSedit, taulun nimen Testi ja paikan __DB_ID__. bluetronix CMS käsittelee tämän kommentin ja näyttää muokkaustilassa sopivan edit-kynän.

Ota Edit-nappi-rivi mukaan tarkasti mukaan kommenttimerkit. Taulun nimen ja ID:n on vastattava PHP-skriptiä. Jos oma taulusi on eri niminen, korvataan Test sekä SELECT-kyselyssä että Edit-napissa.

3. Näin PHP ja HTML toimivat yhdessä

Sivun latauksessa PHP ensin lukee tietueen taulusta Testi. Tämän jälkeen skripti korvataan paikat __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ ja __DB_Image__ HTML:ssä. Esimerkissämme edit-painikeriviltä __DB_ID__ saadaan yhteys tauluun Testi ja tietue-ID:hen 1.

Sivusto näyttää edelleen kuvan ja tekstit tietokannasta. Lisäksi muokkausnappi tietää, minkä tietueen se avaa. Loppukäyttäjän ei tarvitse muokata PHP:tä tai HTML:ää.

4. Tuloksena: Tietueen muokkaaminen suoraan verkkosivustolla

Tallenna ensin PHP- ja HTML-koodi. Lataa esimerkkisivu muokkaustilassa uudelleen. Päivämäärän viereen ilmestyy nyt Muokkauskynä, kuten ensimmäisessä kuvakaappauksessa on nähtävissä.

Napauta muokkauskynää. CMS avaa muokkausmaskin Test – ID: 1 varten. Siellä voit muuttaa päivämäärää, otsikkoa, kuvausta ja kuvaa. Kuvalle on saatavilla olemassa oleva BX-Kuva-nappi.

Napauta Tallenna ja lataa verkkosivusto uudelleen. PHP lukee päivitetyt arvot MySQL:stä ja asettaa ne samoihin HTML-paikkamerkkeihin. Ulkoasu pysyy muuttumattomana; vain muokatut sisällöt päivitetään.

Yhteenveto

Yhdistääksesi edit-painikkeen lisää olemassa olevaan SELECT-kyselyyn ID, välitä se $LayoutHTML:n kautta __DB_ID__:hin ja lisää edit-painikkeen merkintä HTML:ssä halutun sisällön viereen. Tämän jälkeen vain asiaankuuluva tietue voidaan muokata suoraan verkkosivustolta.