חיבור כפתורי עריכה של CMS באמצעות PHP ו-MYSQL

דרישות ומטרה

אתה זקוק לגישת מפתח ל-CMS של 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, תאריך, כותרת, תיאור ו תמונה מטבלת Test. חדש עבור כפתור העריכה הוא בעיקר 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, את שם הטבלה Test ואת המיקום __DB_ID__. מערכת ה-CMS של bluetronix מעבדת הערה זו ומציגה במצב עריכה את המחק המתאים.

אמצע את שורת כפתור העריכה כולל את סימני ההערה בדיוק. שם הטבלה וה-ID חייבים להתאים לסקריפט PHP. אם הטבלה שלך נקראת אחרת, החלף את Test גם בשאילתת SELECT וגם בכפתור העריכה.

3. כך PHP ו-HTML עובדים יחד

בזמן קריאת הדף, PHP קורא קודם את הרשומה מTest. לאחר מכן הסקריפט מחליף את המיקומים __DB_ID__, __DB_Date__, __DB_Title__, __DB_Description__ ו __DB_Image__ ב-HTML. משורת כפתור העריכה עם __DB_ID__ מתקבלת ההקבלה לטבלה Test ול-ID הרשומה 1.

כך שהעמוד ממשיך להציג את התמונה והטקסטים מתוך בסיס הנתונים. בנוסף, כפתור העריכה יודע איזה שיא לפתוח. הלקוח הסופי אינו צריך לערוך PHP או HTML.

4. תוצאה: עריכת רשומות ישירות באתר

תחילה, שמור את קוד ה-PHP וקוד ה-HTML. טען את עמוד הדוגמה במצב עריכה novamente. ליד התאריך מופיע עכשיו ה- עיפרון לעריכה, כפי שנראה בצילום המסך הראשון.

לחץ על העיפרון לעריכה. מערכת הניהול פותחת את מסך העריכה עבור בדיקה – מזהה: 1. שם תוכל לשנות את התאריך, הכותרת, התיאור והתמונה. עבור התמונה עומד לרשותך את כפתור התמונה BX.

בקש ללחוץ על שמור ולטעון את האתר שוב. PHP קורא את הערכים המעודכנים מ-MySQL ומכניס אותם לאותם מקומות HTML. העיצוב נשאר ללא שינוי; רק התכנים שעודכנו יעודכנו.

סיכום

בכדי לקשר לכפתור עריכה עליך להוסיף לשאילתת ה-SELECT הקיימת שלך את ID, להעביר זאת עם $LayoutHTML ל __DB_ID__ ולהוסיף את המיקום של כפתור העריכה ב-HTML לצידו של התוכן הרצוי. לאחר מכן ניתן לערוך את הרשומה המתאימה ישירות דרך האתר.