将 CMS 编辑按钮与 PHP 和 MySQL 连接

前提条件和目标

你需要一个开发者访问权限到 bluetronix CMS，以及之前的示例页面 PHP 和 MySQL 教程。它从 MySQL 表中读取一个数据记录，并通过 $LayoutHTML 在网页上展示其内容。

现在我们将这个数据记录与编辑按钮连接。在展示的截图中，表名为 Test，显示的数据记录具有 ID 1。你需要先补充 PHP 脚本，然后补充你的示例页面的 HTML 代码。

1. PHP 脚本：读取数据记录和 ID

在你的示例页面上打开 PHP 代码 部分。使用以下脚本作为完整的 SELECT 示例。现有的数据库连接 $mysqli 和 CMS 变量 $LayoutHTML 已经可用。这里不需要额外的 PHP 标签。

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

查询从 Test 表中加载 ID、日期、标题、描述 和 图片。编辑按钮的新功能主要是读取到的 ID。然后 PHP 用实际的数据记录 ID 替换 __DB_ID__ 占位符于 $LayoutHTML 中。其他占位符如往常一样填充日期、标题、描述和图片路径.

日期、标题、描述和图片路径的值使用 htmlspecialchars() 进行 HTML 输出转义。$ID = 1 仅作为固定示例 ID；对应其他数据记录时，使用合适的值。

如果之前的教程中还有一个自动执行的 UPDATE 示例，请在此测试之前禁用它。否则它可能会在下次页面访问时覆盖你稍后通过编辑按钮保存的更改。

2. HTML 脚本：插入编辑按钮

现在打开该页面的 HTML 代码。以下示例显示了包含图片、日期、标题和描述的完整页面部分。它是根据你的截图构建的可读 HTML 示例。已存在的 CSS 类和你的图片行可以在你自己的页面中保留。

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

关键的新行位于日期之后：编辑按钮作为 HTML 注释。它包含按钮类型 bxEB_DSedit、表名 Test 和占位符 __DB_ID__。bluetronix CMS 处理此注释，并在编辑模式下显示相应的编辑图标.

请确保准确复制包含注释符号的编辑按钮行。表名和 ID 必须与 PHP 脚本一致。如果你的表名不同，请在 SELECT 查询和编辑按钮中都替换为 Test。

3. PHP 和 HTML 如何协作

当页面被调用时，PHP 首先从 Test 中读取记录。然后脚本替换 HTML 中的占位符 __DB_ID__、__DB_Date__、__DB_Title__、__DB_Description__ 和 __DB_Image__。在我们的例子中，用 __DB_ID__ 的编辑按钮行将与表 Test 和记录 ID 1 进行关联.

因此，该页面继续显示来自数据库的图片和文本。此外，编辑按钮知道它应该打开哪个数据记录。最终用户无需编辑PHP或HTML即可实现这一点。

4. 结果：直接在网站上编辑数据记录

首先保存PHP和HTML代码。再次以编辑模式加载示例页面。现在，日期旁边会出现编辑铅笔，如第一张截图所示。

点击编辑铅笔。CMS会打开Test – ID: 1的编辑界面。在那里，你可以更改日期、标题、描述和图片。对于图片，可以使用现有的BX-Image-Button。

点击保存，然后重新加载该网页。PHP会从MySQL读取更新后的值，并将其放入相同的HTML占位符中。布局保持不变；仅更新被编辑的内容。

总结

要与编辑按钮连接，你需要在现有的 SELECT 查询中添加 ID，通过 $LayoutHTML 将其传递给 __DB_ID__，并在所需内容旁边的 HTML 中插入编辑按钮标记。然后可以通过网页直接编辑相关记录.