คู่มือฉบับสมบูรณ์สำหรับการสร้างหน้าเว็บอัตโนมัติด้วย PHP ในปี 2023

มีบางครั้งในชีวิตที่คุณต้องการหน้าเว็บเพื่อทำอะไรบางอย่างมากกว่าแค่นั่งอยู่ที่นั่นเพื่อเป็นหน้าเว็บ คุณต้องการมันเพื่อรับมัน วิธีหนึ่งในการทำเช่นนั้นคือทำให้มันใช้งานได้จริงดังนั้นคุณจะไม่ต้องใช้รหัสทุกครั้งในการอัปเดตหรือตัวดัดแปลงหน้า วิธีที่ง่ายที่สุดในการเรียนรู้วิธีการทำสิ่งนี้คือการทำจริงดังนั้นในส่วนที่เหลือของบทความนี้ฉันจะแสดงวิธีหนึ่งในการใช้ระบบที่จะสร้างหน้าเว็บใหม่ให้คุณเพียงแค่สัมผัส ปุ่ม

ในสถานการณ์นี้เราจะถือว่าลูกค้าของคุณเป็นร้านอาหารที่ต้องการมอบบัตรกำนัลสำหรับโอกาสพิเศษต่างๆตลอดทั้งปี แต่แน่นอนว่าพวกเขาไม่ต้องการจ่ายเงินให้คุณเพื่ออัปเดตให้พวกเขาดังนั้นคุณควรตรวจสอบให้แน่ใจว่าได้เรียกเก็บเงินให้เพียงพอสำหรับระบบอัตโนมัตินี้ที่จะทำการอัปเดตให้พวกเขา

1. ก่อนอื่นเราต้องสร้างแม่แบบหน้าเว็บพื้นฐาน

นี่เป็นเพียงโครงกระดูกหน้าเว็บมาตรฐาน คุณสามารถตั้งชื่อเป็น“ pageBuilder.php” หรืออะไรก็ได้ คุณไม่จำเป็นต้องใช้ PHP สำหรับสิ่งนี้ คุณสามารถใช้ภาษาการเขียนโปรแกรมอื่นได้ แต่สำหรับตัวอย่างนี้เราจะทำให้ทุกอย่างเรียบง่ายและทำทุกอย่างด้วย PHP

2. เพิ่ม Bootstrap

วิธีนี้จะช่วยให้ฟอร์มดูดีขึ้นโดยไม่ต้องทำงานพิเศษ แน่นอนว่าคุณจะต้องมี Bootstrap เพื่อให้ใช้งานได้

3. ตั้งค่าคอนเทนเนอร์

เพื่อช่วยให้ทุกอย่างเรียบร้อยและเป็นระเบียบเราควรกำหนดคอนเทนเนอร์ที่เราจะจัดเก็บเนื้อหาของหน้า

4. สร้างเว็บฟอร์ม

กำหนดเว็บฟอร์มและเราจะเพิ่มหัวเรื่องแฟนซีให้กับฟอร์มซึ่งเป็นตัวเลือก แต่เป็นแนวคิดที่ดี

5. เพิ่มเขตข้อมูลฟอร์ม

นี่เป็นเรื่องง่ายจริงๆ เราเพียงแค่ต้องรวบรวมรายละเอียดพื้นฐานบางอย่างที่หุ่นยนต์จะใช้เพื่อสร้างหน้าเว็บใหม่ ข้อมูลที่เราจำเป็นต้องรู้ ได้แก่ :

• ภาพพื้นหลังสำหรับหน้า
• ชื่อของกิจกรรมที่กำลังเฉลิมฉลอง
• พาดหัว
• คำสั่งเปิด
• บางคำพูดซ้ำซากหรือข้อความเพิ่มเติม
• แสดงที่มาเพื่ออ้างซ้ำซาก
• รูปแบบแบบอักษรที่จะใช้สำหรับองค์ประกอบข้อความเฟรมทั้งสี่องค์ประกอบ (แยกกัน)
• ช่วงวันที่ที่บัตรกำนัลจะสามารถใช้ได้
• เสนอ 1 และเสนอ 2 ที่จะโฆษณาบนบัตรกำนัล
• ข้อความบัตรกำนัลเพิ่มเติม (เช่นข้อกำหนดและเงื่อนไข)
• ข้อมูลสำหรับรหัส QR ของบัตรกำนัลที่จะถูกสร้างขึ้น

นี่คือลักษณะที่:

และหลังจากความพยายามทั้งหมดนี้เราจะจบลงด้วยหน้าเว็บที่มีลักษณะดังนี้:

 

ข่าวดีก็คือตอนนี้งานเสร็จไปแล้วครึ่งหนึ่งและเป็นครึ่งที่ยากที่สุดและใช้เวลานานที่สุด ที่เหลือง่ายกว่าเยอะ

6. สร้างไฟล์ตัวประมวลผลแบบฟอร์ม

หลังจากสร้างแบบฟอร์มแล้วคุณต้องมีซอฟต์แวร์ที่จะประมวลผลข้อมูลที่ส่งมาและดำเนินการกับมัน ในกรณีนี้เราจะใช้ข้อมูลที่ส่งมาเพื่อสร้างไฟล์ HTML หน้า.

ตอนนี้โปรดทราบว่านี่ไม่ใช่สิ่งเดียวกับการตอบสนองของ PHP ปกติซึ่งข้อมูลจะถูกใช้แบบเรียลไทม์และสะท้อนให้ผู้ใช้เห็นแบบไดนามิก แต่เรากำลังสร้างเพจแบบคงที่ซึ่งจะมีอยู่อย่างถาวรจนกว่าเราจะเขียนทับ

ไฟล์จะต้องมีชื่อเดียวกันกับ การกระทำ ค่าคุณลักษณะในการประกาศฟอร์มดังนั้นในตัวอย่างของเราที่จะเป็น บัตรกำนัลGen.phpและเนื่องจากเราไม่ได้ระบุเส้นทางจึงจำเป็นต้องจัดเก็บในตำแหน่งเดียวกับ pageBuilder.php เพื่อให้มันทำงาน

7. เริ่มต้นตัวแปร

ข้อมูลที่ส่งมาจาก pageBuilder.php ถูกส่งคืนเป็นอาร์เรย์เชื่อมโยงที่เรียกว่า $ _ POSTและค่าข้อมูลทั้งหมดในอาร์เรย์สามารถเข้าถึงได้ผ่านการควบคุมฟอร์ม HTML ชื่อ คุณลักษณะ. ดังนั้นการเริ่มต้นตัวแปรของเราจึงค่อนข้างง่าย นอกจากนี้ยังเป็นทางเลือก แต่จะทำให้โค้ดดูเป็นระเบียบและอ่านง่ายขึ้น คุณสามารถทำงานโดยตรงกับไฟล์ $ _ POST ค่าถ้าคุณต้องการ

 8. ใช้เงื่อนไขเพื่อเปลี่ยนฟอนต์เป็นค่าที่ถูกต้อง

การดำเนินการนี้ตั้งแต่เนิ่นๆจะช่วยประหยัดเวลาและปัญหาในภายหลัง เราเพียงตรวจสอบว่าค่าใดถูกเลือกแล้วแทนที่ด้วยชื่อแบบอักษรจริง

9. เริ่มต้นการสร้างสตริงของตัวสร้าง

สิ่งที่เราต้องทำจริงๆที่นี่คือสร้างสตริงที่ยาวจริงๆซึ่งจะมีทุกสิ่งที่จำเป็นในการสร้างเพจใหม่ เราจะใช้การต่อสายอักขระเพื่อให้สามารถอ่านได้และทำให้ง่ายต่อการดูว่ามีการแทรกค่าข้อมูลไว้ที่ใด สิ่งนี้เริ่มต้นด้วยการตั้งค่าหน้า HTML พื้นฐาน:

คุณอาจจะเห็นว่าเรากำลังจะไปถึงจุดไหน สังเกตเซมิโคลอนที่ส่วนท้าย ที่สำคัญ. นอกจากนี้กึ่งโคลอนใด ๆ ที่เกิดขึ้นภายในข้อความ (ซึ่งเป็นส่วนหนึ่งของการประกาศ CSS หรือสคริปต์ฝั่งไคลเอ็นต์) จะต้องอยู่ในเครื่องหมายคำพูด

10. เริ่มต้นเพิ่มเนื้อหาของเพจลงในสตริงตัวสร้าง

มีวิธีที่มีประสิทธิภาพมากกว่าในการสร้างสตริงนี้ แต่ฉันต้องการทำให้โค้ดเป็นระเบียบเพื่อให้อ่านง่าย คุณสามารถใช้วิธีการใช้มือสั้นในการทำสิ่งนี้ได้และคุณไม่จำเป็นต้องทำเป็นขั้นตอนแยกจากขั้นตอนที่ 9 ฉันรู้สึกว่ามันง่ายกว่าที่จะเข้าใจเมื่อส่วนต่างๆของหน้าถูกแบ่งออกด้วยวิธีนี้

11. เขียนตัวสร้างสตริงเป็น HTML

ในกรณีนี้เราทำการเข้ารหัสชื่อไฟล์อย่างหนัก แต่คุณสามารถ (และอาจจะ) ทำให้ฟิลด์นี้ในรูปแบบตัวสร้างเพจของคุณ

12. เพิ่มลิงค์ทดสอบ

เมื่อคุณคลิกปุ่ม BUILD IT เนื่องจากไม่ได้เปลี่ยนเส้นทางไปยังหน้าเว็บเช่นโปรแกรม PHP ปกติคุณจะต้องเพิ่มลิงค์หรืออะไรก็ได้เพื่อดูว่าผลลัพธ์คืออะไร

13. สร้างไฟล์ CSS ที่กำหนดเอง

คุณสามารถจัดเก็บคำแนะนำในการใส่สไตล์เพิ่มเติมในไฟล์นี้ แต่สำหรับตอนนี้สิ่งเดียวที่สำคัญคือคำแนะนำในการจัดแต่งทรงผมสำหรับ หลัก div

14. สร้างและอัพโหลด wrap.png

เพื่อให้ทำงานได้อย่างถูกต้องคุณต้องสร้างภาพพิกเซลโปร่งแสงและตั้งชื่อ ห่อ.png จากนั้นอัปโหลดไปยังเส้นทางที่คุณระบุใน custom.css ไฟล์

15. อัปโหลดภาพพื้นหลังที่เหมาะสมและทดสอบ pageBuilder ของคุณ

คุณจะต้องตื่นเต้นที่รู้ว่าเราเกือบจะเสร็จแล้วและตอนนี้เป็นเพียงเรื่องของการทดสอบและแก้ไขข้อผิดพลาดที่เกิดขึ้น เลือกภาพที่เรียบง่ายสวยงามไม่วุ่นวายเกินไปและเหมาะกับเหตุการณ์หรือโอกาสพิเศษ (ในตัวอย่างของเราฉันไปกับวันแม่และวันพ่อ) อัปโหลดภาพไปยังเส้นทางที่คุณจัดเก็บภาพสำหรับเว็บไซต์ของคุณ จากนั้นกรอกแบบฟอร์มคลิกปุ่มและดูว่าเกิดอะไรขึ้น นี่คือตัวอย่างของแบบฟอร์มที่กรอกข้อมูลในช่องข้อมูลทั้งหมด

ซึ่งจะส่งผลในการสร้างสิ่งที่ค่อนข้างคล้ายกับนี้:

เราเดาแล้วว่าคุณไม่ต้องการพิมพ์ทั้งหมดตั้งแต่ต้นดังนั้นคุณสามารถดาวน์โหลดซอร์สโค้ดสำหรับ pageBuilder.php และ voucherGen.php ในส่วนนี้ ไฟล์ซิป.

คุณสามารถใช้เทคนิคนี้ในการสร้างไฟล์ HTML เป็นสตริงแล้วเขียนลงในไฟล์ได้ในทุกสถานการณ์ ระวังอย่าใส่อะไรแบบนี้ในการวนซ้ำไม่เช่นนั้นคุณจะเต็มฮาร์ดไดรฟ์และเซิร์ฟเวอร์พัง