Collegare i pulsanti di modifica CMS con PHP e MySQL

Requisiti e obiettivo

Hai bisogno di un accesso da sviluppatore al CMS bluetronix e della pagina di esempio dal precedente tutorial PHP e MySQL. Essa legge un record da una tabella MySQL e ne mostra i contenuti attraverso $LayoutHTML sul sito.

Ora colleghiamo questo record a un pulsante di modifica. Nei screenshot mostrati, la tabella si chiama Test, il record mostrato ha l'ID 1. Prima completi lo script PHP e poi il codice HTML della tua pagina di esempio.

1. Script PHP: leggere record e ID

Apri nella tua pagina di esempio la sezione Codice PHP. Usa il seguente script come esempio completo di SELECT. La connessione al database esistente $mysqli e la variabile CMS $LayoutHTML sono già disponibili. Non hai bisogno di ulteriori tag PHP qui.

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

La query carica ID, Data, Titolo, Descrizione e Immagine dalla tabella Test. Nuovo per il pulsante di modifica è soprattutto l'ID estratto. PHP sostituisce poi il segnaposto __DB_ID__ in $LayoutHTML con l'ID del record effettivo. Gli altri segnaposto sono riempiti come in precedenza con data, titolo, descrizione e percorso dell'immagine.

I valori per data, titolo, descrizione e percorso dell'immagine vengono mascherati con htmlspecialchars() per l'output HTML. $ID = 1 serve qui solo come esempio fisso; per altri record utilizzerai il valore appropriato.

Se nel tutorial precedente c'era ancora un esempio di UPDATE eseguito automaticamente, disattivalo prima di questo test. Altrimenti potrebbe sovrascrivere le modifiche che salverai più tardi tramite il pulsante di modifica al successivo accesso alla pagina.

2. Script HTML: inserire il pulsante di modifica

Apri ora il Codice HTML della stessa pagina. Il seguente esempio mostra l'intero segmento della pagina con immagine, data, titolo e descrizione. È costruito sulla base del tuo screenshot come esempio HTML leggibile. Puoi mantenere le classi CSS esistenti e la tua riga di immagine sulla tua pagina.

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

La nuova riga decisiva si trova direttamente dietro la data: il pulsante di modifica come commento HTML. Contiene il tipo di pulsante bxEB_DSedit, il nome della tabella Test e il segnaposto __DB_ID__. Il CMS bluetronix elabora questo commento e visualizza in modalità di modifica la matita di modifica corrispondente.

Riprendi la riga del pulsante di modifica inclusi i caratteri di commento esattamente. Il nome della tabella e l'ID devono corrispondere allo script PHP. Se la tua tabella si chiama diversamente, sostituisci Test sia nella query SELECT che nel pulsante di modifica.

3. Come lavorano insieme PHP e HTML

Al caricamento della pagina, PHP prima legge il record da Test. Successivamente, lo script sostituisce i segnaposto __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ e __DB_Image__ nell'HTML. Dalla riga del pulsante di modifica con __DB_ID__, nel nostro esempio si ottiene l'associazione con la tabella Test e l'ID del record 1.

In questo modo la pagina continua a mostrare l'immagine e i testi dal database. Inoltre, il pulsante di modifica sa quale record aprire. L'utente finale non deve modificare né PHP né HTML.

4. Risultato: modifica il record direttamente sul sito

Salva prima il codice PHP e HTML. Ricarica la pagina di esempio in modalità modifica. Accanto alla data appare adesso la penna di modifica, come mostrato nel primo screenshot.

Tocca la penna di modifica. Il CMS apre il modulo di modifica per Test – ID: 1. Qui puoi cambiare data, titolo, descrizione e immagine. Per l'immagine è disponibile il pulsante BX-Image.

Tocca Salva e ricarica nuovamente la pagina web. PHP legge i valori aggiornati da MySQL e li inserisce negli stessi segnaposto HTML. Il layout rimane invariato; solo i contenuti modificati vengono aggiornati.

Riepilogo

Per collegarsi a un pulsante di modifica, devi integrare la tua query SELECT esistente con ID, passarla tramite $LayoutHTML a __DB_ID__ e inserire il segnaposto del pulsante di modifica nell'HTML accanto al contenuto desiderato. Dopodiché, il record corrispondente può essere modificato direttamente tramite il sito web.