การพัฒนาปลั๊กอินแบบกำหนดเองสำหรับ CMS เดือนตุลาคม

ปีที่แล้ว ฉันได้ค้นคว้าเกี่ยวกับระบบ CMS ใหม่ใน PHP เพื่อหาทางเลือกที่ดีกว่า WordPress ตามหลักการแล้วมันต้องเป็นโซลูชันโอเพนซอร์ซที่มีฐานรหัสที่สะอาดและทันสมัย

หนึ่งในนั้นดึงดูดความสนใจของฉัน: ตุลาคม CMS ฉันลองแล้วชอบมันแทบจะในทันที โครงสร้างโค้ดดีมากและเขียนปลั๊กอินที่กำหนดเองได้ง่าย

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

เหตุใดจึงเลือกตุลาคมเป็นแพลตฟอร์ม CMS ของคุณ

มีเหตุผลหลักสองสามประการที่ทำให้ฉันตัดสินใจใช้สิ่งนี้สำหรับโครงการของฉันเป็นการส่วนตัว

ขับเคลื่อนโดย Laravel

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

ล้างรหัสและเอกสาร

ต่างจากโซลูชัน CMS อื่นๆ มากมาย ตุลาคมมีฐานโค้ดที่สะอาดและมีเอกสารประกอบอย่างดี มันเขียนโดยใช้กระบวนทัศน์เชิงวัตถุ แทนที่จะใช้ PHP แบบเก่าธรรมดา ตุลาคมใช้ Twig เป็นเครื่องมือสร้างเทมเพลต ซึ่งทำให้สิ่งต่างๆ ง่ายขึ้นสำหรับนักพัฒนา เอกสารทางเทคนิคยังเขียนไว้อย่างดี และช่วยให้คุณค้นหาคำตอบสำหรับคำถามส่วนใหญ่ได้อย่างรวดเร็ว

ชุมชนที่ยิ่งใหญ่

แม้ว่าชุมชนในเดือนตุลาคมจะยังไม่ใหญ่โตนัก แต่ก็มีประโยชน์และตอบสนองได้ดีมาก มีช่อง Slack สาธารณะที่คุณสามารถเข้าร่วมได้ ซึ่งคุณจะพบว่านักพัฒนาซอฟต์แวร์ยินดีที่จะช่วยเหลือคุณในการแก้ไขปัญหาของคุณ

ตลาดใหญ่

เช่นเดียวกับ WordPress และ CMS อื่นๆ ตุลาคมมีตลาดสำหรับธีมและปลั๊กอิน แม้ว่าจะมีธีมดีๆ ให้เลือกไม่มากนัก แต่ขณะนี้มีปลั๊กอินมากกว่า 700 ปลั๊กอิน ดังนั้นจึงเป็นไปได้มากที่คุณจะสามารถเพิ่มฟังก์ชันการทำงานโดยเพียงแค่ค้นหาและติดตั้งหนึ่งในนั้น คุณลักษณะที่ยอดเยี่ยมของปลั๊กอินคือสามารถซิงโครไนซ์ระหว่างโครงการทั้งหมดของคุณได้อย่างง่ายดาย หากคุณเพียงแค่เพิ่มรหัสโครงการของคุณในแดชบอร์ดผู้ดูแลระบบ

ปลั๊กอินและส่วนประกอบ

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

ปลั๊กอินมักจะสร้างในไดเร็กทอรี plugins/ ของโครงการ เนื่องจากปลั๊กอินจำนวนมากถูกส่งไปยังตลาดกลางเพื่อให้ผู้อื่นใช้ ปลั๊กอินแต่ละตัวจึงควรมีเนมสเปซที่กำหนดเอง ซึ่งมักจะขึ้นต้นด้วยชื่อของบริษัทหรือผู้พัฒนาที่สร้างปลั๊กอิน ตัวอย่างเช่น หากคุณชื่อ Acme และคุณได้สร้างปลั๊กอินที่ยอดเยี่ยมที่เรียกว่า Blog ปลั๊กอินของคุณจะอยู่ภายใต้เนมสเปซของ Acme\Blog

ให้ฉันแสดงให้คุณเห็นว่าโครงสร้างไดเร็กทอรีปลั๊กอินอาจมีลักษณะอย่างไร:

อย่างที่คุณเห็น ยังมีไฟล์ชื่อ plugin.php ซึ่งมีหน้าที่ในการลงทะเบียนปลั๊กอินและส่วนประกอบทั้งหมดใน CMS ตุลาคม

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

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

ตุลาคม CMS มีตลาดที่ยอดเยี่ยมที่คุณสามารถค้นหาความต้องการของคุณได้

ต่างจาก WordPress และ CMS ยอดนิยมอื่นๆ ปลั๊กอินของเดือนตุลาคมก็สามารถมีส่วนประกอบได้ ตามเอกสารของเดือนตุลาคม ส่วนประกอบคือ “องค์ประกอบอาคารที่กำหนดค่าได้ ซึ่งสามารถแนบไปกับหน้าใดก็ได้ บางส่วนหรือเค้าโครง” ตัวอย่างอาจรวมถึง: แบบฟอร์มการติดต่อ การนำทาง รายการคำถามที่พบบ่อยและคำตอบ โดยพื้นฐานแล้ว อะไรก็ตามที่เหมาะสมที่จะรวมกลุ่มเข้าด้วยกันเป็นหนึ่งหน่วยการสร้างที่สามารถนำมาใช้ซ้ำได้ในหลาย ๆ หน้า

ส่วนประกอบถูกสร้างขึ้นโดยเป็นส่วนหนึ่งของปลั๊กอินและมีอยู่ใน ส่วนประกอบ/ ไดเร็กทอรีย่อย:

แต่ละองค์ประกอบมีไฟล์ PHP เช่น componentName.php ที่กำหนดส่วนประกอบ เช่นเดียวกับไดเรกทอรีย่อยที่เป็นตัวเลือกสำหรับส่วนประกอบบางส่วน โฟลเดอร์บางส่วนของส่วนประกอบต้องมีชื่อเดียวกันเป็นตัวพิมพ์เล็กเป็นส่วนประกอบเอง

เพื่อสาธิตวิธีการทำงานขององค์ประกอบ สมมติว่าองค์ประกอบของเรามีหน้าที่ในการแสดงบทความในบล็อก

 namespace Acme\Blog\Components; class BlogPosts extends \Cms\Classes\ComponentBase { public function componentDetails() { return [ 'name' => 'Blog Posts', 'description' => 'Displays a collection of blog posts.' ]; } // This array becomes available on the page as {{ component.posts }} public function posts() { return ['First Post', 'Second Post', 'Third Post']; } }

อย่างที่เราเห็น ส่วนประกอบมีหน้าที่หลักสองอย่าง ส่วนแรก componentDetails() ให้ข้อมูลเกี่ยวกับส่วนประกอบแก่ผู้ดูแลระบบที่จะเพิ่มและใช้ส่วนประกอบบนหน้าเว็บของพวกเขา

ฟังก์ชันที่สอง posts() ส่งคืนโพสต์จำลองที่สามารถใช้ภายในส่วนประกอบบางส่วน (ไฟล์ blogposts/default.htm ) ดังนี้:

 url = "/blog" [blogPosts] == {% for post in blogPosts.posts %} {{ post }} {% endfor %}

เพื่อให้ CMS ตุลาคมรู้ว่าองค์ประกอบของเรามีอยู่ เราต้องลงทะเบียนโดยใช้ไฟล์ปลั๊กอินหลักของเราภายในฟังก์ชันที่ชื่อ registerComponents() :

 public function registerComponents() { return [ 'October\Demo\Components\Todo' => 'demoTodo' ]; }

การสร้างปลั๊กอินแบบฟอร์มการติดต่อที่กำหนดเอง

เราจะสร้างปลั๊กอินแบบฟอร์มการติดต่อแบบกำหนดเอง ต่อไปนี้เป็นข้อสันนิษฐานเกี่ยวกับวิธีการทำงานของปลั๊กอิน:

• แบบฟอร์มจะมีฟิลด์ต่อไปนี้: ชื่อ, นามสกุล, อีเมล, ข้อความ
• ข้อมูลจะถูกส่งไปยังเซิร์ฟเวอร์โดยใช้ Ajax
• หลังจากส่งข้อมูลแล้ว ผู้ดูแลระบบจะได้รับอีเมลพร้อมข้อความที่ส่งโดยผู้ใช้

สำหรับวัตถุประสงค์ของบทช่วยสอนนี้ เราจะใช้การติดตั้ง CMS ตุลาคมใหม่:

มาเริ่มสร้างปลั๊กอินของเราโดยรันคำสั่งในเทอร์มินัลที่จะสร้างโครงสร้างปลั๊กอิน: php artisan create:plugin progmatiq.contactform

อาร์กิวเมนต์ progmatiq.contactform มีชื่อผู้เขียน (progmatiq) และชื่อปลั๊กอิน (contactform)

ตอนนี้เราต้องเปิดไฟล์ plugin.php และแก้ไขรายละเอียดปลั๊กอินด้วยวิธีต่อไปนี้:

 public function pluginDetails() { return [ 'name' => 'Contact Form', 'description' => 'A simple contact form plug-in', 'author' => 'progmatiq', 'icon' => 'icon-leaf' ]; }

ต่อไปนี้เป็นวิธีอื่นๆ ที่คุณควรพิจารณา:

• registerComponents()
  ที่นี่ คุณสามารถกำหนดอาร์เรย์ของส่วนประกอบที่ปลั๊กอินของคุณมีให้
• registerPermissions()
  คุณสามารถลงทะเบียนการอนุญาตแบบกำหนดเองซึ่งคุณสามารถใช้ในภายหลังได้ในส่วนอื่นๆ ของแอปพลิเคชัน
• registerNavigation()
  คุณสามารถเพิ่มรายการเมนูที่กำหนดเองด้วย URL ไปยังเมนูแดชบอร์ดผู้ดูแลระบบของคุณ

ตอนนี้มาสร้างองค์ประกอบ ContactForm ของเรา:

1. สร้างโฟลเดอร์ใหม่ชื่อ components/ ภายในไดเร็กทอรีรูทของปลั๊กอิน
2. สร้างไฟล์ชื่อ contactForm.php ภายใน ส่วนประกอบ/ โฟลเดอร์



3. วางโค้ดต่อไปนี้เพื่อบอกเดือนตุลาคมว่าคอมโพเนนต์ของเราทำอะไร เราสามารถทำได้โดยการสร้างวิธีการภายในส่วนประกอบของเราที่เรียกว่า componentDetails()

 <?php namespace Progmatiq\Contactform\Components; use Cms\Classes\ComponentBase; class ContactForm extends ComponentBase { public function componentDetails() { return [ 'name' => 'Contact Form', 'description' => 'A simple contact form' ]; } }

ตอนนี้ เราต้องลงทะเบียนส่วนประกอบของเราในปลั๊กอิน ในการทำเช่นนั้น เราแก้ไข registerComponents() วิธีการ:

 public function registerComponents() { return [ 'Progmatiq\Contactform\Components\ContactForm' => 'contactForm', ]; }

ฟังก์ชันนี้ส่งคืนอาร์เรย์ของส่วนประกอบที่ปลั๊กอินของเรามีให้ ชื่อคลาสเต็มของคอมโพเนนต์เป็นกุญแจสำคัญในวิธีนี้ และค่าคือนามแฝงที่เราจะใช้เพื่ออ้างอิงส่วนประกอบของเราภายในเทมเพลต Twig

เมื่อเราลงทะเบียนส่วนประกอบแล้ว เราสามารถสร้างหน้าติดต่อใหม่และเพิ่มส่วนประกอบของเราได้ (ตัวเลขในขั้นตอนอ้างอิงจากภาพหน้าจอ):

1. ในแดชบอร์ดผู้ดูแลระบบของคุณ ไปที่ CMS (1) > Pages (2) และคลิก + เพิ่ม (3)
2. ตั้งชื่อเพจและ URL (4)
3. ตั้งชื่อไฟล์ของคุณ (5) และเลือกเค้าโครงเริ่มต้น (6)

มาเพิ่มองค์ประกอบใหม่ของเราในหน้า:

1. คลิกที่ ส่วนประกอบ ในเมนูด้านซ้าย (1) จากนั้นเลือกส่วนประกอบ "แบบฟอร์มการติดต่อ" เมื่อคุณคลิกที่มัน (2) มันควรจะถูกเพิ่มลงในหน้า
2. เราจำเป็นต้องวางโค้ดที่จะทำให้หน้าของเราเป็นพาดหัวและแสดงส่วนประกอบโดยใช้ {% component 'contactForm' %} Twig directive:

 <div class="container"> <h1> Contact </h1> {% component 'contactForm' %} </div>

หากคุณเปิดหน้าติดต่อของคุณตอนนี้ คุณจะเห็นพาดหัวข่าวว่า "ติดต่อ" และไม่มีอะไรอื่นอีก

นั่นเป็นเพราะแบบฟอร์มติดต่อของเราไม่มี HTML ที่จะแสดงผล

เราจำเป็นต้องสร้างไฟล์ contactform/default.htm ภายใน ส่วนประกอบ/ โฟลเดอร์ของเรา

และเพิ่มโค้ด HTML ต่อไปนี้ลงในไฟล์:

 <form method="POST" data-request="onSend" data-request-validate data-request-success="this.reset(); alert('Thank you for submitting your inquiry')" > <div> <label for="first_name">First Name</label> <input type="text" name="first_name" class="form-control"> <p data-validate-for="first_name" class="text-danger"></p> </div> <div> <label for="last_name">Last Name</label> <input type="text" name="last_name" class="form-control"> <p data-validate-for="last_name" class="text-danger"></p> </div> <div> <label for="email">Email</label> <input type="text" name="email" class="form-control"> <p data-validate-for="email" class="text-danger"></p> </div> <div> <label for="content">Content</label> <textarea rows="6" cols="20" name="content" class="form-control"></textarea> <p data-validate-for="content" class="text-danger"></p> </div> <div> <button type="submit" class="btn btn-primary" data-attach-loading>Send</button> </div> </form>

รหัสนี้ส่วนใหญ่ค่อนข้างตรงไปตรงมา อย่างไรก็ตาม มันถูกปรุงแต่งด้วยคุณสมบัติพิเศษ data-* ที่ตุลาคมอนุญาตให้เราใช้:

1. <form> แท็กมีคุณสมบัติพิเศษสามประการ:
   • data-request="onSend" . แอตทริบิวต์นี้บอกเดือนตุลาคมว่าต้องเรียกใช้ฟังก์ชัน onSend จากคอมโพเนนต์ของเรา (ที่เราจะสร้างต่อไป) เมื่อส่งแบบฟอร์มโดยใช้ Ajax
   • data-request-validate จะเปิดใช้งานการตรวจสอบความถูกต้องของ Ajax โดยใช้ข้อผิดพลาดที่จะถูกส่งจากเซิร์ฟเวอร์หากแบบฟอร์มไม่ถูกต้อง
   • data-request-success="this.reset(); alert('Thank you for submitting your inquiry')" ล้างแบบฟอร์มและทริกเกอร์ข้อความแจ้งเตือนหากคำขอสำเร็จ และไม่มีการตรวจสอบความถูกต้องหรือข้อผิดพลาดด้านเซิร์ฟเวอร์
2. ทุกอินพุตมีบล็อกต่อไปนี้ซึ่งรับผิดชอบในการแสดงข้อผิดพลาดในการตรวจสอบที่ส่งคืนโดยเซิร์ฟเวอร์สำหรับอินพุตที่กำหนด:

 <p data-validate-for="content" class="text-danger"></p>

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

และนี่คือหน้าตาของเราในตอนนี้:

กลับไปที่องค์ประกอบ contactForm.php ของเรา และสร้าง onSend() เช่นเดียวกับ validate() วิธีการช่วยเหลือที่จะรับผิดชอบในการจัดการการส่งแบบฟอร์ม:

 public function onSend() { // Get request data $data = \Input::only([ 'first_name', 'last_name', 'email', 'content' ]); // Validate request $this->validate($data); // Send email $receiver = '[email protected]'; \Mail::send('progmatiq.contact::contact', $data, function ($message) use ($receiver) { $message->to($receiver); }); } protected function validate(array $data) { // Validate request $rules = [ 'first_name' => 'required|min:3|max:255', 'last_name' => 'required|min:3|max:255', 'email' => 'required|email', 'content' => 'required', ]; $validator = \Validator::make($data, $rules); if ($validator->fails()) { throw new ValidationException($validator); } }

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

หากการตรวจสอบสำเร็จ เราจะส่งอีเมลไปยังผู้ดูแลระบบของเรา

หมายเหตุ : เพื่อความง่าย ฉันคิดว่าอีเมลที่เราต้องการส่งไปที่คือ [email protected] อย่าลืมใช้อีเมลของคุณเอง!

นี่คือรหัสเต็มของปลั๊กอิน contactForm.php ของคุณ:

 <?php namespace Progmatiq\Contactform\Components; use Cms\Classes\ComponentBase; use October\Rain\Exception\ValidationException; class ContactForm extends ComponentBase { public function componentDetails() { return [ 'name' => 'Contact Form', 'description' => 'A simple contact form' ]; } public function onSend() { // Get request data $data = \Input::only([ 'first_name', 'last_name', 'email', 'content' ]); // Validate request $this->validate($data); // Send email $receiver = '[email protected]'; \Mail::send('progmatiq.contact::contact', $data, function ($message) use ($receiver) { $message->to($receiver); }); } protected function validate(array $data) { // Validate request $rules = [ 'first_name' => 'required|min:3|max:255', 'last_name' => 'required|min:3|max:255', 'email' => 'required|email', 'content' => 'required', ]; $validator = \Validator::make($data, $rules); if ($validator->fails()) { throw new ValidationException($validator); } } }

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

นี่คือเนื้อหาของอีเมลที่เราจะใช้:

 You have received a new contact inquiry **First Name**: {{ first_name }} *** **Last Name**: {{ last_name }} *** **Email**: {{ email }} *** **Message**: {{ content }} ***

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

ไปที่ การตั้งค่า > การกำหนดค่าเมล และกรอกการตั้งค่าทั้งหมด

แน่นอน ฉันจะไม่เปิดเผยการกำหนดค่าส่วนตัวของฉัน ใช้การตั้งค่าของคุณเอง

ในขั้นตอนนี้ เรามีทุกอย่างพร้อมที่จะเริ่มทดสอบองค์ประกอบแบบฟอร์มการติดต่อของเรา

อันดับแรก ให้ตรวจสอบว่าการตรวจสอบใช้งานได้หรือไม่เมื่อเราปล่อยให้ช่อง "เนื้อหา" ว่างและป้อนอีเมลที่ไม่ถูกต้อง:

การตรวจสอบทำงานตามที่คาดไว้ ตอนนี้ให้ป้อนข้อมูลที่ถูกต้องและดูว่าอีเมลจะถูกส่งไปยังผู้ดูแลระบบของเราสำเร็จหรือไม่

นี่คืออีเมลที่ [email protected] จะได้รับ:

หลังจากส่งแบบฟอร์มเรียบร้อยแล้ว ผู้ใช้จะเห็นข้อความแจ้งเตือนแจ้งว่าการดำเนินการสำเร็จแล้ว:

บทสรุป

ในบทช่วยสอนนี้ เราได้กล่าวถึงว่าปลั๊กอินและส่วนประกอบคืออะไร และวิธีใช้งานกับ CMS ตุลาคม

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

ฉันหวังว่าบทช่วยสอนนี้จะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ อย่าลังเลที่จะถามในส่วนความคิดเห็นด้านล่าง