PHPとMySQLでCMSの編集ボタンを接続する

前提条件と目的

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

クエリはID、日付、タイトル、説明、画像をテストテーブルから読み込みます。編集ボタンの新しいポイントは、読み取ったIDです。その後、PHPは__DB_ID__プレースホルダーを$LayoutHTML内の実際のレコードIDに置き換えます。他のプレースホルダーは、以前と同様に日付、タイトル、説明、画像パスで埋められます。

日付、タイトル、説明、および画像パスの値は、HTML出力のためにhtmlspecialchars()でエスケープされます。$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__が含まれています。このコメントはbluetronix CMSによって処理され、編集モードで適切な編集アイコンが表示されます。

コメント記号を含む編集ボタンの行を正確にコピーしてください。テーブル名とIDはPHPスクリプトと一致する必要があります。あなた自身のテーブルが異なる名前の場合、SELECTクエリと編集ボタンの両方でTestを置き換えてください。

3. PHPとHTMLがどのように連携するか

ページが表示されると、PHPが最初にテスト内のレコードを読み取ります。その後、スクリプトはHTML内のプレースホルダー__DB_ID__、__DB_Date__、__DB_Title__、__DB_Description__、および__DB_Image__を置き換えます。我々の例では、__DB_ID__を含む編集ボタンの行は、テーブルテストとレコードID1の関連付けになります。

これにより、ページは引き続きデータベースから画像とテキストを表示します。さらに、編集ボタンはどのデータセットを開くべきかを知っています。エンドユーザーはPHPやHTMLを編集する必要はありません。

4. 結果：ウェブサイト上で直接レコードを編集する

まず、PHPコードとHTMLコードを保存してください。編集モードでサンプルページを再度読み込みます。日付の横にEdit-Stiftが表示されるようになります。

編集ペンをタップしてください。CMSがTest – ID: 1の編集マスクを開きます。そこでは、日付、タイトル、説明、画像を変更できます。画像には、既存のBX-Image-Buttonを使用できます。

保存をタップし、ウェブサイトを再読み込みしてください。PHPはMySQLから更新された値を読み込み、同じHTMLプレースホルダーに挿入します。レイアウトはそのままで、編集した内容だけが更新されます。

要約

編集ボタンとの接続のために、既存のSELECTクエリをIDで補足し、$LayoutHTMLを通じて__DB_ID__に渡し、希望するコンテンツの隣に編集ボタンのマークをHTMLに挿入します。その後、関連するレコードはウェブサイトから直接編集できます。