Σύνδεση κουμπιών επεξεργασίας CMS με PHP και MySQL

Προϋποθέσεις και στόχος

Χρειάζεσαι πρόσβαση προγραμματιστή στο 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 με την πραγματική αναγνωριστική εγγραφής. Οι υπόλοιπες ετικέτες θα συμπληρωθούν όπως και πριν με ημερομηνία, τίτλο, περιγραφή και διαδρομή εικόνας.

Οι τιμές για ημερομηνία, τίτλο, περιγραφή και διαδρομή εικόνας θα κωδικοποιούνται με 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, το όνομα του πίνακα Δοκιμή και την ετικέτα __DB_ID__. Το CMS 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. Φόρτωσε ξανά τη σελίδα παραδείγματος σε λειτουργία επεξεργασίας. Δίπλα στην ημερομηνία τώρα εμφανίζεται το Επεξεργαστικό Πενάκι, όπως φαίνεται στην πρώτη στιγμιότυπη οθόνη.

Πάτησε το Επεξεργαστικό Πενάκι. Το CMS ανοίγει τη φόρμα επεξεργασίας για Δοκιμή – ID: 1. Εκεί μπορείς να αλλάξεις την ημερομηνία, τον τίτλο, την περιγραφή και την εικόνα. Για την εικόνα σου παρέχεται το υπάρχον κουμπί BX-Image.

Πάτησε Αποθήκευση και φόρτωσε ξανά τη σελίδα. Η PHP διαβάζει τις ενημερωμένες τιμές από το MySQL και τις τοποθετεί στους ίδιους χώρους HTML. Η διάταξη παραμένει ίδια· μόνο τα επεξεργασμένα περιεχόμενα ενημερώνονται.

Περίληψη

Για τη σύνδεση με ένα κουμπί επεξεργασίας, προσθέτεις την υφιστάμενη SELECT ερώτησή σου με ID, το μεταβιβάζεις με $LayoutHTML στο __DB_ID__ και εισάγεις την ετικέτα του κουμπιού επεξεργασίας στο HTML δίπλα από το επιθυμητό περιεχόμενο. Στη συνέχεια, η αντίστοιχη εγγραφή μπορεί να επεξεργαστεί απευθείας μέσω της ιστοσελίδας.