Łączenie przycisków edycji CMS z PHP i MySQL

Wymagania i cel

Potrzebujesz dostępu dewelopera do CMS bluetronix oraz przykładowej strony z poprzedniego poradnika PHP i MySQL. Odczytuje on rekord z tabeli MySQL i wyświetla jego zawartość za pomocą $LayoutHTML na stronie.

Teraz łączymy ten rekord z przyciskiem edycji. W pokazanych zrzutach ekranu nazwa tabeli to Test, a wyświetlany rekord ma ID 1. Najpierw dodasz skrypt PHP, a następnie kod HTML swojej przykładowej strony.

1. Skrypt PHP: odczytanie rekordu i ID

Otwórz na swojej przykładowej stronie sekcję PHP Code. Użyj poniższego skryptu jako pełnego przykładu SELECT. Istniejące połączenie z bazą danych $mysqli oraz zmienna CMS $LayoutHTML są już dostępne. Dodatkowe tagi PHP nie są tutaj potrzebne.

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

Zapytanie ładuje ID, datę, tytuł, opis i obraz z tabeli Test. Nowością dla przycisku edycji jest przede wszystkim odczytana ID. PHP następnie zastępuje placeholder __DB_ID__ w $LayoutHTML rzeczywistym ID rekordu. Pozostałe placeholdery są wypełniane jak wcześniej datą, tytułem, opisem i ścieżką do obrazu.

Wartości dla daty, tytułu, opisu i ścieżki obrazu są maskowane za pomocą htmlspecialchars() do wyjścia HTML. $ID = 1 służy tutaj tylko jako stałe ID przykładu; dla innych rekordów wstaw odpowiednią wartość.

Jeśli w poprzednim poradniku jest jeszcze automatyczne wykonanie przykładu UPDATE, dezaktywuj je przed tym testem. W przeciwnym razie może ono nadpisać zmiany, które później zapiszesz za pomocą przycisku edycji, przy następnym załadowaniu strony.

2. Skrypt HTML: dodanie przycisku edycji

Teraz otwórz HTML Code tej samej strony. Następujący przykład pokazuje pełną sekcję strony z obrazem, datą, tytułem i opisem. Jest zbudowany z twojego zrzutu jako czytelny przykład HTML. Istniejące klasy CSS i twój wiersz z obrazem możesz zachować na swojej stronie.

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

Decydujący nowy wiersz znajduje się bezpośrednio za datą: przycisk edycji jako komentarz HTML. Zawiera on typ przycisku bxEB_DSedit, nazwę tabeli Test i placeholder __DB_ID__. CMS bluetronix przetwarza ten komentarz i wyświetla odpowiedni przycisk edycji w trybie edycji.

Dokładnie skopiuj linię przycisku edycji razem ze znakami komentarza. Nazwa tabeli i ID muszą być zgodne ze skryptem PHP. Jeśli twoja własna tabela ma inną nazwę, zamień Test w zapytaniu SELECT oraz w przycisku edycji.

3. Jak PHP i HTML współpracują

Podczas wywołania strony PHP najpierw odczytuje rekord z Test. Następnie skrypt zastępuje placeholdery __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ i __DB_Image__ w HTML. Z linii przycisku edycji z __DB_ID__ otrzymujemy w naszym przykładzie powiązanie z tabelą Test i ID rekordu 1.

Dzięki temu strona nadal wyświetla obraz i teksty z bazy danych. Dodatkowo przycisk edycji wie, który rekord ma otworzyć. Klient końcowy nie musi edytować ani PHP, ani HTML.

4. Wynik: bezpośrednia edycja rekordu na stronie internetowej

Najpierw zapisz kod PHP i HTML. Następnie załaduj stronę przykładową ponownie w trybie edycji. Obok daty pojawi się teraz ikonka edycji, jak pokazano na pierwszym zrzucie ekranu.

Dotknij ikonki edycji. CMS otworzy formularz edycji dla Test – ID: 1. Tam możesz zmienić datę, tytuł, opis i obraz. Do obrazu dostępny jest już istniejący przycisk BX-Image.

Naciśnij Zapisz i załaduj stronę internetową ponownie. PHP odczytuje zaktualizowane wartości z MySQL i wstawia je w te same placeholdery HTML. Układ pozostaje bez zmian; tylko edytowane treści są aktualizowane.

Podsumowanie

Aby połączyć się z przyciskiem edycji, należy dodać do istniejącego zapytania SELECT ID, przekazać go za pomocą $LayoutHTML do __DB_ID__ i umieścić znaczniki przycisku edycji w HTML obok żądanej treści. Następnie powiązany rekord można bezpośrednio edytować przez stronę.