Connecter les boutons d'édition CMS avec PHP et MySQL

Conditions préalables et objectif

Vous avez besoin d'un accès développeur au CMS bluetronix et de la page d'exemple du tutoriel PHP et MySQL précédent. Elle lit un enregistrement d'une table MySQL et affiche son contenu via $LayoutHTML sur la page.

Nous allons maintenant lier cet enregistrement à un bouton d'édition. Dans les captures d'écran montrées, le nom de la table est Test, l'enregistrement affiché a l'ID 1. Vous complétez d'abord le script PHP, puis le code HTML de votre page d'exemple.

1. Script PHP : Lire l'enregistrement et l'ID

Ouvrez dans votre page d'exemple la section Code PHP. Utilisez le script suivant comme exemple complet de SELECT. La connexion à la base de données existante $mysqli et la variable CMS $LayoutHTML sont déjà disponibles. Vous n'avez pas besoin de balises PHP supplémentaires ici.

$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 requête charge ID, Date, Titre, Description et Image à partir de la table Test. Nouveau pour le bouton d'édition est surtout l'ID extraite. PHP remplace ensuite le placeholder __DB_ID__ dans $LayoutHTML par l'ID réel de l'enregistrement. Les autres placeholders sont remplis comme auparavant avec la date, le titre, la description et le chemin de l'image.

Les valeurs pour la date, le titre, la description et le chemin de l'image sont échappées avec htmlspecialchars() pour l'affichage HTML. $ID = 1 n'est qu'un ID d'exemple fixe ; pour d'autres enregistrements, vous utilisez la valeur appropriée.

Si un exemple UPDATE exécuté automatiquement existe encore depuis le tutoriel précédent, désactivez-le avant ce test. Sinon, il pourrait écraser les modifications que vous sauvegardez plus tard via le bouton d'édition lors du prochain chargement de la page.

2. Script HTML : Insérer le bouton d'édition

Ouvrez maintenant le Code HTML de la même page. L'exemple suivant montre la section complète de la page avec image, date, titre et description. Il est construit à partir de votre capture d'écran comme un exemple HTML lisible. Vous pouvez conserver les classes CSS existantes et votre ligne d'image sur votre propre page.

<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 nouvelle ligne décisive se trouve directement derrière la date : le bouton d'édition en tant que commentaire HTML. Il contient le type de bouton bxEB_DSedit, le nom de la table Test et le placeholder __DB_ID__. Le CMS bluetronix traite ce commentaire et affiche en mode édition le stylo d'édition correspondant.

Prenez la ligne du bouton d'édition, y compris les caractères de commentaire, exactement. Le nom de la table et l'ID doivent correspondre au script PHP. Si votre propre table a un nom différent, remplacez Test tant dans la requête SELECT que dans le bouton d'édition.

3. Comment PHP et HTML collaborent

Lors de l'appel de la page, PHP lit d'abord l'enregistrement dans Test. Ensuite, le script remplace les placeholders __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ et __DB_Image__ dans le HTML. À partir de la ligne du bouton d'édition avec __DB_ID__, dans notre exemple, la correspondance avec la table Test et l'ID d'enregistrement 1 est faite.

Cela montre que la page continue d'afficher l'image et les textes de la base de données. De plus, le bouton d'édition sait quel enregistrement ouvrir. Le client final n'a pas besoin de modifier PHP ou HTML.

4. Résultat : Éditer l'enregistrement directement sur le site web

Tout d'abord, enregistre le code PHP et le code HTML. Recharge la page d'exemple en mode édition. À côté de la date, le crayon d'édition apparaît maintenant, comme on peut le voir sur la première capture d'écran.

Appuie sur le crayon d'édition. Le CMS ouvre le masque d'édition pour Test – ID : 1. Tu peux y modifier la date, le titre, la description et l'image. Le bouton BX-Image est disponible pour l'image.

Appuie sur Enregistrer et recharge le site Web. PHP lit les valeurs mises à jour à partir de MySQL et les insère dans les mêmes espaces réservés HTML. La mise en page reste inchangée ; seuls les contenus modifiés sont mis à jour.

Résumé

Pour établir la connexion avec un bouton d'édition, tu dois compléter ta requête SELECT existante avec ID, la passer avec $LayoutHTML à __DB_ID__ et insérer la balise du bouton d'édition dans le HTML à côté du contenu souhaité. Ensuite, l'enregistrement correspondant peut être directement modifié via le site web.