Связывание кнопок редактирования CMS с PHP и MySQL

Предпосылки и цель

Вам нужен доступ разработчика к CMS bluetronix и пример страницы из предыдущего Учебника по PHP и MySQL. Он считывает запись из таблицы MySQL и отображает ее содержимое через $LayoutHTML на сайте.

Теперь мы свяжем эту запись с кнопкой редактирования. На показанных скриншотах таблица называется Тест, а показанная запись имеет 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();

Запрос загружает ID, Дата, Заголовок, Описание и Изображение из таблицы Тест. Новая функция для кнопки редактирования особенно включает в себя извлеченный ID. PHP затем заменяет заполнители __DB_ID__ в $LayoutHTML на фактический ID записи. Остальные заполнители заполняются как и раньше датой, заголовком, описанием и путем к изображению.

Значения для даты, названия, описания и пути к изображению маскируются с помощью 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, имя таблицы Тест и заполнитель __DB_ID__. CMS bluetronix обрабатывает этот комментарий и отображает подходящую кнопку редактирования в режиме редактирования.

Точно скопируйте строку кнопки редактирования, включая комментарии. Имя таблицы и ID должны совпадать с PHP-скриптом. Если ваша собственная таблица называется иначе, замените Тест как в запросе SELECT, так и в кнопке редактирования.

3. Как PHP и HTML работают вместе

При загрузке страницы PHP сначала считывает запись из Тест. Затем скрипт заменяет заполнители __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ и __DB_Image__ в HTML. В строке кнопки редактирования с __DB_ID__ в нашем примере устанавливается связь с таблицей Тест и ID записи 1.

Таким образом, страница продолжает отображать изображения и тексты из базы данных. Кроме того, кнопка редактирования знает, какую запись она должна открыть. Конечному пользователю не нужно редактировать ни PHP, ни HTML.

4. Результат: Редактирование записи напрямую на сайте

Сначала сохраните PHP- и HTML-код. Загрузите пример страницы в режиме редактирования снова. Рядом с датой теперь появляется иконка редактирования, как показано на первом скриншоте.

Нажмите на иконку редактирования. CMS откроет маску редактирования для Тест – ID: 1. Там вы можете менять дату, заголовок, описание и изображение. Для изображения у вас есть доступная кнопка BX-Image.

Нажмите Сохранить и загрузите веб-страницу снова. PHP считывает обновленные значения из MySQL и вставляет их в те же HTML-заменители. Макет остается неизменным; только отредактированный контент обновляется.

Резюме

Для связи с кнопкой редактирования вам нужно дополнить ваш существующий SELECT-запрос ID, передать его с $LayoutHTML на __DB_ID__ и вставить пометку кнопки редактирования в HTML рядом с нужным содержимым. После этого связанную запись можно будет редактировать непосредственно через веб-сайт.