Υπάρχουν ορισμένες στιγμές στη ζωή που χρειάζεστε μια ιστοσελίδα για να κάνετε κάτι περισσότερο από το να καθίσετε εκεί που είναι μια ιστοσελίδα. Το χρειάζεσαι για να το κερδίσεις. Ένας τρόπος για να το κάνετε αυτό είναι να το βάλετε να λειτουργήσει για εσάς, έτσι δεν θα χρειάζεται να κωδικοποιείτε κάθε ενημέρωση ή τροποποίηση σελίδας. Ο ευκολότερος τρόπος για να μάθετε πώς να κάνετε κάτι τέτοιο είναι να το κάνετε πραγματικά, οπότε στο υπόλοιπο αυτού του άρθρου, θα σας δείξω έναν τρόπο εφαρμογής ενός συστήματος που θα δημιουργήσει νέες ιστοσελίδες για εσάς με το πάτημα του ένα κουμπί.
Σε αυτό το σενάριο, θα υποθέσουμε ότι ο πελάτης σας είναι ένα εστιατόριο που θέλει να προσφέρει κουπόνια για διαφορετικές ειδικές περιστάσεις κατά τη διάρκεια του έτους. Αλλά φυσικά δεν θέλουν να σας πληρώσουν για να το ενημερώσετε γι 'αυτούς, οπότε καλύτερα να φροντίσετε να τους χρεώσετε επαρκώς για αυτό το σύστημα αυτοματισμού που θα κάνει τις ενημερώσεις για αυτούς
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 ως συμβολοσειρές και στη συνέχεια εγγραφής τους σε αρχεία σε κάθε είδους καταστάσεις. Απλά προσέξτε να μην βάλετε ποτέ κάτι τέτοιο σε αναδρομικό βρόχο διαφορετικά θα γεμίσετε τον σκληρό σας δίσκο και θα καταρρεύσει ο διακομιστής.
Très très instructif, j'ai essayé et ça marche à merveille, milles merci
Παρακαλώ! 👍👍👍