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, 날짜, 제목, 설명, 이미지를 Test 테이블에서 불러옵니다. Edit 버튼에 대한 새로운 점은 주로 읽어온 ID입니다. PHP는 이후 $LayoutHTML의 플레이스홀더 __DB_ID__를 실제 데이터 레코드 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 주석으로서의 Edit 버튼. 이 주석에는 버튼 유형 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__를 교체합니다. Edit 버튼 줄의 __DB_ID__는 예시에서 Test 테이블과 데이터 레코드 ID 1에 대한 연결이 됩니다.

이를 통해 페이지는 여전히 데이터베이스의 이미지와 텍스트를 표시합니다. 추가로, 편집 버튼은 어떤 데이터 세트를 열어야 하는지를 알고 있습니다. 최종 사용자는 PHP나 HTML을 수정할 필요가 없습니다.

4. 결과: 웹사이트에서 직접 데이터 기록 편집

우선 PHP 코드와 HTML 코드를 저장하세요. 편집 모드에서 샘플 페이지를 다시 로드하십시오. 날짜 옆에 이제 편집 펜이 나타나며, 이는 첫 번째 스크린샷에서 볼 수 있습니다.

편집 펜을 클릭하세요. CMS는 테스트 – ID: 1에 대한 편집 마스크를 엽니다. 여기에서 날짜, 제목, 설명 및 이미지를 변경할 수 있습니다. 이미지를 위해 기존의 BX-이미지 버튼을 사용할 수 있습니다.

우선 저장을 클릭하고 웹페이지를 재로드하십시오. PHP는 MySQL에서 업데이트된 값을 읽어 동일한 HTML 자리 표시자에 삽입합니다. 레이아웃은 변경되지 않고, 수정된 내용만 업데이트됩니다.

요약

Edit 버튼과 연결하려면 기존의 SELECT 쿼리에 ID를 추가하고, 이를 $LayoutHTML를 통해 __DB_ID__에 전달하며, 원하는 내용 옆에 HTML에서 Edit 버튼 주석을 삽입합니다. 이후 관련 데이터 레코드는 웹사이트를 통해 직접 편집할 수 있습니다.