Ένας ολοκληρωμένος οδηγός για την αυτοματοποιημένη δημιουργία ιστοσελίδων με PHP το 2023

Υπάρχουν συγκεκριμένες στιγμές στη ζωή, όταν χρειάζεστε μια ιστοσελίδα για να κάνετε κάτι περισσότερο από το να καθίσετε εκεί ως μια ιστοσελίδα. Πρέπει να το κερδίσετε. Ένας τρόπος για να το κάνετε αυτό είναι να το κάνετε να λειτουργεί για εσάς, οπότε δεν θα χρειαστεί να παραδώσετε κώδικα κάθε ενημέρωση ή mod σελίδας. Ο ευκολότερος τρόπος για να μάθετε πώς να κάνετε κάτι τέτοιο είναι να το κάνετε πραγματικά, οπότε στο υπόλοιπο αυτού του άρθρου, θα σας δείξω έναν τρόπο εφαρμογής ενός συστήματος που θα δημιουργήσει νέες ιστοσελίδες για εσάς με το άγγιγμα του ένα κουμπί.

Σε αυτό το σενάριο, θα υποθέσουμε ότι ο πελάτης σας είναι ένα εστιατόριο που θέλει να προσφέρει κουπόνια για διαφορετικές ειδικές περιστάσεις όλο το χρόνο. Αλλά φυσικά δεν θέλουν να σας πληρώσουν για να το ενημερώσετε, γι 'αυτό θα πρέπει να βεβαιωθείτε ότι τα χρεώνετε επαρκώς για αυτό το σύστημα αυτοματισμού που θα κάνει τις ενημερώσεις για αυτούς

1. Πρώτα πρέπει να δημιουργήσουμε ένα βασικό πρότυπο ιστοσελίδας.

Αυτός είναι απλώς ένας τυπικός σκελετός ιστοσελίδας. Μπορείτε να του δώσετε ένα όνομα όπως "pageBuilder.php" ή κάτι τέτοιο. Δεν χρειάζεται να χρησιμοποιήσετε PHP για αυτό. Θα μπορούσατε να χρησιμοποιήσετε μια άλλη γλώσσα προγραμματισμού, αλλά για αυτό το παράδειγμα θα διατηρήσουμε τα πράγματα απλά και θα τα κάνουμε όλα στην PHP.

2. Προσθέστε το Bootstrap

Αυτό θα σας βοηθήσει να κάνετε τη φόρμα να φαίνεται καλύτερη χωρίς επιπλέον δουλειά. Φυσικά θα πρέπει να έχετε Bootstrap για να λειτουργήσει αυτό.

3. Ρυθμίστε ένα δοχείο

Για να διατηρήσουμε τα πάντα τακτοποιημένα, πρέπει να ορίσουμε ένα κοντέινερ στο οποίο θα αποθηκεύσουμε τα περιεχόμενα της σελίδας.

4. Δημιουργήστε μια φόρμα ιστού

Ορίστε μια φόρμα ιστού και θα προσθέσουμε επίσης έναν φανταστικό τίτλο στη φόρμα, η οποία είναι προαιρετική αλλά καλή ιδέα.

5. Προσθέστε τα πεδία φόρμας

Αυτό είναι πολύ απλό. Πρέπει απλώς να συλλέξουμε μερικές βασικές λεπτομέρειες που θα χρησιμοποιήσει το ρομπότ για να δημιουργήσει μια νέα ιστοσελίδα. Τα δεδομένα που πρέπει να γνωρίζουμε περιλαμβάνουν:

• Η εικόνα φόντου για τη σελίδα
• Όνομα της εκδήλωσης που γιορτάζεται
• Επικεφαλίδα
• Εναρκτήρια δήλωση
• Μερικά απόσπασμα ή πρόσθετη δήλωση
• Απόδοση για την προσφορά
• Στυλ γραμματοσειράς για χρήση για καθένα από τα τέσσερα στοιχεία κειμένου πλαισίου (σεdiviδιπλά).
• Εύρος ημερομηνιών για το οποίο ισχύουν τα κουπόνια
• Προσφορά 1 και Προσφορά 2 που θα διαφημίζονται στα κουπόνια.
• Πρόσθετα μηνύματα κουπονιού (για παράδειγμα, όροι και προϋποθέσεις)
• Δεδομένα για τους κωδικούς QR κουπονιού που θα δημιουργηθούν

Δείτε πώς φαίνεται:

Και μετά από όλη αυτή την προσπάθεια, θα καταλήξουμε σε μια σελίδα που μοιάζει με αυτήν:

 

Τα καλά νέα είναι ότι η μισή δουλειά έχει πλέον ολοκληρωθεί και ήταν το πιο δύσκολο και χρονοβόρο μισό. Τα υπόλοιπα είναι πολύ πιο εύκολα.

6. Δημιουργήστε το αρχείο επεξεργαστή φόρμας

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

Τώρα, λάβετε υπόψη ότι αυτό δεν είναι το ίδιο με μια κανονική απόκριση PHP όπου τα δεδομένα χρησιμοποιούνται σε πραγματικό χρόνο και αντανακλώνται δυναμικά στον χρήστη. Αντ 'αυτού, δημιουργούμε μια στατική σελίδα που θα υπάρχει μόνιμα έως ότου την αντικαταστήσουμε.

Το αρχείο πρέπει να ονομάζεται το ίδιο με το δράση τιμή χαρακτηριστικού στη δήλωση φόρμας, έτσι στο παράδειγμά μας θα ήταν voucherGen.php, και επειδή δεν καθορίσαμε μια διαδρομή, θα πρέπει να αποθηκευτεί στην ίδια τοποθεσία με pageBuilder.php για να λειτουργήσει.

7. Αρχικοποιήστε μεταβλητές

Τα δεδομένα που υποβλήθηκαν από pageBuilder.php επιστράφηκε ως συσχετισμένος πίνακας που ονομάζεται $ _POSTκαι όλες οι τιμές δεδομένων του πίνακα μπορούν να προσεγγιστούν μέσω του ελέγχου φόρμας HTML όνομα γνωρίσματα. Επομένως, η προετοιμασία των μεταβλητών μας είναι πραγματικά πολύ εύκολη. Είναι επίσης προαιρετικό, αλλά απλώς κάνει τον κώδικα να φαίνεται λίγο πιο τακτοποιημένο και ευανάγνωστο. Θα μπορούσατε σίγουρα να εργαστείτε απευθείας με το $ _POST τιμές εάν προτιμάτε.

 8. Χρησιμοποιήστε υπό όρους για να αλλάξετε τις γραμματοσειρές στις σωστές τιμές τους

Κάνοντας αυτό νωρίς θα εξοικονομήσετε χρόνο και προβλήματα αργότερα. Απλώς ελέγχουμε ποιες τιμές επιλέχθηκαν και στη συνέχεια τις αντικαταστήσαμε με τα πραγματικά ονόματα γραμματοσειρών.

9. Ξεκινήστε την κατασκευή της συμβολοσειράς γεννήτριας

Πραγματικά, το μόνο που χρειάζεται να κάνουμε εδώ είναι να δημιουργήσουμε μια πολύ μεγάλη συμβολοσειρά που θα περιέχει όλα όσα απαιτούνται για τη δημιουργία της νέας σελίδας. Θα χρησιμοποιήσουμε τη συνένωση συμβολοσειρών για να τη διατηρήσουμε αναγνώσιμη και θα διευκολύνουμε να δούμε πού έχουν εισαχθεί οι τιμές δεδομένων. Αυτό ξεκινά με τη βασική ρύθμιση της σελίδας HTML:

Πιθανότατα μπορείτε να δείτε πού πηγαίνουμε με αυτό. Σημειώστε το τελείωμα στο τέλος. Αυτό είναι σημαντικό. Επίσης, τυχόν ερωτηματικά που εμφανίζονται μέσα στο κείμενο (ως μέρος μιας δήλωσης CSS ή ενός σεναρίου από την πλευρά του πελάτη) πρέπει να περιέχονται σε εισαγωγικά.

10. Ξεκινήστε να προσθέτετε το σώμα της σελίδας στη συμβολοσειρά της γεννήτριας

Υπάρχουν πιο αποτελεσματικοί τρόποι για να δημιουργήσετε αυτήν τη συμβολοσειρά, αλλά μου αρέσει να κάνω τον κώδικα καθαρό, έτσι ώστε να είναι εύκολο να το διαβάσετε. Μπορείτε να χρησιμοποιήσετε μικρές μεθόδους για να το κάνετε αυτό, και επίσης δεν χρειάζεται να το κάνετε ως ξεχωριστή διαδικασία στο βήμα 9. Νομίζω ότι είναι πιο εύκολο να καταλάβετε πότε διαχωρίζονται τα διάφορα τμήματα της σελίδας με αυτόν τον τρόπο.

11. Γράψτε τη συμβολοσειρά γεννήτριας σε HTML

Σε αυτήν την περίπτωση, κωδικοποιούμε το όνομα του αρχείου, αλλά θα μπορούσατε (και μάλλον θα έπρεπε) να το κάνετε αυτό στη φόρμα pageBuilder.

12. Προσθέστε έναν δοκιμαστικό σύνδεσμο

Όταν κάνετε κλικ στο κουμπί BUILD IT, επειδή δεν ανακατευθύνει σε μια ιστοσελίδα όπως θα κάνατε ένα κανονικό πρόγραμμα PHP, θα πρέπει να προσθέσετε έναν σύνδεσμο ή κάτι για να δείτε και ποιο ήταν το αποτέλεσμα.

13. Δημιουργήστε το προσαρμοσμένο αρχείο CSS

Μπορείτε να αποθηκεύσετε επιπλέον οδηγίες στυλ σε αυτό το αρχείο, αλλά προς το παρόν το μόνο σημαντικό είναι η οδηγία στυλ για το κύριος div.

14. Δημιουργήστε και ανεβάστε το wrap.png

Για να λειτουργήσει σωστά, πρέπει να δημιουργήσετε μια μόνο ημιδιαφανή εικόνα εικονοστοιχείων και να την ονομάσετε wrap.png στη συνέχεια ανεβάστε το στη διαδρομή που καθορίσατε στο custom.css αρχείο.

15. Ανεβάστε μερικές κατάλληλες εικόνες φόντου και δοκιμάστε το pageBuilder σας

Θα είστε ενθουσιασμένοι που ξέρετε ότι έχουμε σχεδόν τελειώσει, και στην πραγματικότητα είναι απλώς θέμα δοκιμής και διόρθωσης τυχόν σφαλμάτων που προκύπτουν. Επιλέξτε μερικές ωραίες απλές εικόνες που δεν είναι πολύ απασχολημένες και που είναι κατάλληλες για ειδικές εκδηλώσεις ή περιστάσεις (στο παράδειγμά μας, έχω πάει με την Ημέρα της Μητέρας και την Ημέρα του Πατέρα). Ανεβάστε τις εικόνες στη διαδρομή όπου αποθηκεύετε τις εικόνες σας στον ιστότοπό σας. Στη συνέχεια, συμπληρώστε τη φόρμα, κάντε κλικ στο κουμπί και δείτε τι συμβαίνει. Ακολουθεί ένα παράδειγμα της φόρμας με όλα τα πεδία δεδομένων που έχουν συμπληρωθεί.

Που πρέπει να έχει ως αποτέλεσμα τη δημιουργία κάτι παρόμοιο με αυτό:

Υποθέσαμε ήδη ότι δεν θα θέλατε να πληκτρολογήσετε όλα αυτά από το μηδέν, οπότε μπορείτε να κατεβάσετε τον πηγαίο κώδικα για το pageBuilder.php και το voucherGen.php σε αυτό zip αρχείο.

Μπορείτε να εφαρμόσετε αυτήν την τεχνική δημιουργίας αρχείων HTML ως συμβολοσειρές και στη συνέχεια να τα γράψετε σε αρχεία σε όλες τις καταστάσεις. Απλά προσέξτε να μην βάζετε κάτι τέτοιο σε έναν επαναλαμβανόμενο βρόχο, διαφορετικά θα γεμίσετε τον σκληρό σας δίσκο και θα συντρίψετε τον διακομιστή.