מדריך מקיף ליצירת דפי אינטרנט אוטומטית עם PHP בשנת 2023

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

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

1. ראשית עלינו ליצור תבנית דף אינטרנט בסיסית.

זהו רק שלד עמוד אינטרנט רגיל. אתה יכול לתת לזה שם כמו "pageBuilder.php" או משהו כזה. אתה לא צריך להשתמש ב-PHP בשביל זה. אתה יכול להשתמש בשפת תכנות אחרת, אבל עבור הדוגמה הזו נשמור על דברים פשוטים ונעשה הכל ב-PHP.

2. הוסף Bootstrap

זה יעזור לגרום לטופס להיראות טוב יותר ללא עבודה נוספת. כמובן שאתה צריך Bootstrap כדי שזה יעבוד.

3. הגדר מיכל

כדי לעזור לשמור על הכל מסודר ומסודר, עלינו להגדיר מיכל שבו נאחסן את תוכן העמוד.

4. צור טופס אינטרנט

הגדירו טופס אינטרנט, ונוסיף גם כותרת מהודרת לטופס, שהיא אופציונלית אבל רעיון טוב.

5. הוסף את שדות הטופס

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

• תמונת הרקע של העמוד
• שם האירוע הנחגג
• כותרת
• משפט פתיחה
• איזה ציטוט נדוש או אמירה נוספת
• ייחוס לציטוט נדוש
• סגנון גופן לשימוש עבור כל אחד מארבעת רכיבי הטקסט הממסגרים (בנפרד).
• טווח תאריכים שאליו השוברים יהיו תקפים
• הצעה 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 כמחרוזות ואז לכתוב אותם לקבצים בכל מיני מצבים. רק תיזהר לעולם לא לשים משהו כזה בלולאה רקורסיבית אחרת תמלא את הכונן הקשיח שלך ותתרסק את השרת.