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

Εάν εγγραφείτε σε μια υπηρεσία από έναν σύνδεσμο σε αυτήν τη σελίδα, η Reeves and Sons Limited ενδέχεται να κερδίσει μια προμήθεια. Δείτε το δικό μας δήλωση ηθικής.

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

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

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

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

Shot οθόνη στο 2016 05-30 1.56.52-AM

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

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

Shot οθόνη στο 2016 05-30 1.56.56-AM

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

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

Shot οθόνη στο 2016 05-30 1.56.48-AM

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

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

Shot οθόνη στο 2016 05-30 1.56.43-AM

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

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

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

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

Shot οθόνη στο 2016 05-30 1.56.00-AM

Shot οθόνη στο 2016 05-30 1.55.54-AM

Shot οθόνη στο 2016 05-30 1.55.36-AM

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

Shot οθόνη στο 2016 05-30 1.55.22-AM

 

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

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

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

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

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

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

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

Shot οθόνη στο 2016 05-30 1.55.15-AM

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

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

Shot οθόνη στο 2016 05-30 1.55.10-AM9. Ξεκινήστε την κατασκευή της συμβολοσειράς γεννήτριας

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

Shot οθόνη στο 2016 05-30 1.55.06-AM

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

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

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

Shot οθόνη στο 2016 05-30 1.55.00-AM

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

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

Shot οθόνη στο 2016 05-30 1.54.55-AM

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

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

Shot οθόνη στο 2016 05-30 1.54.50-AM

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

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

Shot οθόνη στο 2016 05-30 1.54.45-AM

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

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

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

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

Picture1

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

Shot οθόνη στο 2016 05-30 1.54.11-AM

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

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

Σχόλια απαντήσεις 2

  1. Webmaster Ufas λέει:

    Très très instructif, j'ai essayé et ça marche à merveille, milles merci

    1. Μπογκντάν Ράνσα λέει:

      Παρακαλώ! 👍👍👍

Αφήστε μια απάντηση

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται *

Βαθμολογία *

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.