มีบางช่วงเวลาในชีวิตที่คุณต้องการหน้าเว็บเพื่อทำบางสิ่งที่มากกว่าแค่นั่งอยู่กับหน้าเว็บ คุณต้องการมันเพื่อรับการรักษา วิธีหนึ่งในการทำเช่นนั้นคือทำให้มันทำงานให้คุณ ดังนั้นคุณจึงไม่ต้องส่งโค้ดทุกการอัปเดตหรือม็อดเพจ วิธีที่ง่ายที่สุดในการเรียนรู้วิธีการทำสิ่งนี้คือการลงมือทำจริง ดังนั้นในส่วนที่เหลือของบทความนี้ ฉันจะแสดงให้คุณเห็นวิธีหนึ่งในการติดตั้งระบบที่จะสร้างหน้าเว็บใหม่ให้คุณเพียงแค่สัมผัส ปุ่ม
ในสถานการณ์นี้ เราจะถือว่าลูกค้าของคุณเป็นร้านอาหารที่ต้องการเสนอบัตรกำนัลสำหรับโอกาสพิเศษต่างๆ ตลอดทั้งปี แต่แน่นอนว่าพวกเขาไม่ต้องการจ่ายเงินให้คุณเพื่ออัปเดต ดังนั้นคุณควรแน่ใจว่าได้เรียกเก็บเงินจากพวกเขาให้เพียงพอสำหรับระบบอัตโนมัตินี้ที่จะทำการอัปเดตให้
1. ก่อนอื่นเราต้องสร้างแม่แบบหน้าเว็บพื้นฐาน
นี่เป็นเพียงโครงกระดูกมาตรฐานของหน้าเว็บ คุณสามารถตั้งชื่อเช่น “pageBuilder.php” หรืออะไรก็ได้ คุณไม่จำเป็นต้องใช้ PHP สำหรับสิ่งนี้ คุณสามารถใช้ภาษาโปรแกรมอื่นได้ แต่สำหรับตัวอย่างนี้ เราจะทำให้ทุกอย่างเรียบง่ายและทำทุกอย่างด้วย PHP
2. เพิ่ม Bootstrap
วิธีนี้จะช่วยให้รูปร่างดูดีขึ้นโดยไม่ต้องทำอะไรเพิ่มเติม แน่นอนคุณต้องมี Bootstrap เพื่อให้ทำงานได้
3. ตั้งค่าคอนเทนเนอร์
เพื่อช่วยให้ทุกอย่างเรียบร้อยและเป็นระเบียบเรียบร้อย เราควรกำหนดคอนเทนเนอร์ที่เราจะจัดเก็บเนื้อหาของเพจ
4. สร้างเว็บฟอร์ม
กำหนดแบบฟอร์มบนเว็บ และเราจะเพิ่มชื่อเรื่องแฟนซีลงในแบบฟอร์มด้วย ซึ่งเป็นทางเลือกแต่เป็นแนวคิดที่ดี
5. เพิ่มเขตข้อมูลฟอร์ม
นี่เป็นเรื่องง่ายจริงๆ เราเพียงแค่ต้องรวบรวมรายละเอียดพื้นฐานบางอย่างที่หุ่นยนต์จะใช้เพื่อสร้างหน้าเว็บใหม่ ข้อมูลที่เราจำเป็นต้องรู้ ได้แก่ :
- ภาพพื้นหลังสำหรับหน้า
- ชื่อของกิจกรรมที่กำลังเฉลิมฉลอง
- พาดหัว
- คำสั่งเปิด
- บางคำพูดซ้ำซากหรือข้อความเพิ่มเติม
- แสดงที่มาเพื่ออ้างซ้ำซาก
- รูปแบบตัวอักษรที่จะใช้สำหรับองค์ประกอบข้อความในกรอบทั้งสี่ (ในdiviเป็นทวีคูณ)
- ช่วงวันที่ที่บัตรกำนัลจะสามารถใช้ได้
- เสนอ 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 เป็นสตริง แล้วเขียนลงในไฟล์ได้ในทุกสถานการณ์ ระวังอย่าให้อะไรแบบนี้วนซ้ำ มิฉะนั้นคุณจะทำให้ฮาร์ดไดรฟ์ของคุณเต็มและเซิร์ฟเวอร์พัง
Très très Instrucif, j'ai Essayé et ça marche à merveille, มิลส์ แมร์ซี
ด้วยความยินดี! 👍👍👍