ربط أزرار تحرير نظام إدارة المحتوى (CMS) باستخدام PHP و MySQL

المتطلبات والهدف

ستحتاج إلى الوصول كمطور إلى نظام إدارة المحتوى bluetronix والصفحة النموذجية من البرنامج التعليمي السابق 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 بمعرف السجل الفعلي. تظل العناصر النائبة الأخرى تُملأ كما هو الحال دائماً بالتاريخ والعنوان والوصف ومسار الصورة.

تتم معالجة القيم للتاريخ، العنوان، الوصف ومسار الصورة باستخدام htmlspecialchars() للإخراج في HTML. $ID = 1 يستخدم هنا فقط كمثال ثابت؛ بالنسبة لسجلات أخرى، يجب عليك استخدام القيمة المناسبة.

إذا كان هناك مثال 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 بمعالجة هذا التعليق وعرض قلم التعديل المناسب في وضع التحرير.

تأكد من نقل سطر زر التحرير بما في ذلك علامات التعليق بدقة. يجب أن يتطابق اسم الجدول وID مع سكربت PHP. إذا كانت جدولتك الخاصة لها اسم مختلف، استبدل Test في كل من استعلام SELECT وزر التحرير.

3. كيف يعمل PHP وHTML معًا.

عند الوصول إلى الصفحة، يقوم PHP أولاً بقراءة السجل من اختبار. بعد ذلك، يستبدل السكربت العناصر النائبة __DB_ID__، __DB_Date__، __DB_Title__، __DB_Description__ و__DB_Image__ في HTML. في مثالنا، يتحول سطر زر التعديل مع __DB_ID__ إلى الربط بجدول اختبار ومعرف السجل 1.

ستظل الصفحة تعرض الصورة والنصوص من قاعدة البيانات. بالإضافة إلى ذلك، يعرف زر التحرير السجل الذي يجب فتحه. لا يحتاج العميل النهائي إلى تعديل PHP أو HTML لذلك.

4. الناتج: تحرير السجل مباشرة على الموقع.

قم أولاً بحفظ كود PHP وكود HTML. ثم أعد تحميل الصفحة النموذجية في وضع التحرير. بجانب التاريخ، سيظهر الآن قلم التحرير، كما هو موضح في لقطة الشاشة الأولى.

انقر على قلم التحرير. سيفتح نظام إدارة المحتوى واجهة التحرير لـ اختبار – ID: 1. هناك يمكنك تعديل التاريخ والعنوان والوصف والصورة. يتوفر لك الزر BX-Image-Button للصورة.

انقر على حفظ وأعد تحميل صفحة الويب. سيقوم PHP بقراءة القيم المحدثة من MySQL وإدراجها في نفس أماكن HTML. سيبقى التنسيق دون تغيير؛ فقط المحتويات المعدلة سيتم تحديثها.

ملخص

لإجراء اتصال مع زر التعديل، يجب عليك إضافة ID إلى استعلام SELECT الحالي الخاص بك، ثم تمريرها مع $LayoutHTML إلى __DB_ID__ وإضافة علامة زر التعديل في HTML بجانب المحتوى المطلوب. بعد ذلك، يمكن تعديل السجل المرتبط مباشرة عبر الموقع الإلكتروني.