ทำความรู้จักกับ MVC Framework กันครับ

Founder, MyCoding.Academy
วิศวกรไฟฟ้าและโทรคมนาที่หลงไหลการเขียนโปรแกรม เลยได้ทำงานประจำช่วงหนึ่งทางด้านการพัฒนาซอฟต์แวร์ ปัจจุบันก็ยังทำงานเป็นฟรีแลนซ์ทางด้านการเขียนโปรแกรมอยู่นะครับ

MVC หรือ Model-View-Controller เป็นเฟรมเวอร์ก (framework) ทางด้านการออกแบบโครงสร้างการทำงานของโปรแกรมเพื่อแยกส่วนสำหรับการจัดการข้อมูล (Model) การแสดงผล (View) และลอจิกในการทำงาน (Controller) หรือตัวการที่ใช้ในการควบคุมว่าจะใช้ข้อมูลอะไร และแสดงผลอย่างไร MVC เป็นกรอบการทำงานที่ใช้กันอย่างแพร่หลาย ทั้งใน Joomla CMS, Yii2 และ Laravel เองก็เช่นกันครับ มันทำให้ทีมสามารถทำความเข้าใจการทำงาน ทำความเข้าใจโค้ดที่ผู้อื่นเขียนได้ง่ายและรวดเร็วครับ

ลองมาดู MVC อย่างง่ายใน Laravel กันครับ

  1. เริ่มต้นกันเมื่อเราคลิกที่เว็บ ซึ่งระบุ URL เป็น http://localhost/profile/edit เมื่อบราวเซอร์ส่ง request มาที่ Web Server
  2. ทำการเรียก Laravel application
  3. ตัว application จะทำการตรวจสอบ route ตาม URL ที่ได้มาก็
  4. เจอว่าต้องใช้ Controller ชื่อ ProfileController และ edit() method
  5. จากนั้นตัว method ก็จะถูกเรียกให้ทำงาน สร้าง Response ส่งข้อมูลกลับให้ผู้ใช้ แต่เมื่อเราไปดูที่ Controller ก็จะพบว่ามันจะทำการอ่านข้อมูลจาก User Model แล้วส่งให้ View ทำการแสดงผล

ลองดูตัวอย่างไฟล์ web.php ซึ่งเก็บ routing หรือส่วนของการหาเส้นทางว่าจะเรียกใช้ Controller ตัวใด จากตัวอย่างเราสามารถระบุได้ดังนี้

  • http://localhost/ ให้เรียกใช้ view ชื่อ welcome มาแสดงผลเลย
  • http://localhost/profile/edit ให้เรียก controller ชื่อ ProfileController และ method ชื่อ edit() ของมันมาทำงาน
  • http://localhost/profile/update ให้เรียก controller ชื่อ ProfileController และ method ชื่อ update() มาทำงาน 

สำหรับ http://localhost ก็จะเป็นแค่ข้อมูลสมมตินะครับ ขึ้นอยู่กับว่ามันทำงานบน Server อะไรอีกที จะเปลี่ยนให้อัตโนมัติ

สำหรับ middleware ชื่อ auth ก็คือตัวที่จะทำการตรวจสอบว่าผู้ใช้ยืนยันตัวตนหรือยัง ปกติก็จะ redirect ไปหน้าที่แสดง Login form ครับ

สำหรับในส่วนของ Controller ครับ แต่ละ Method ก็คือการทำงานหนึ่งอย่าง

Controller in action!

จากภาพด้านบน method edit() จะทำการแสดงผล view ชื่อ profile/edit และส่งข้อมูลชื่อ profile ไปให้ด้วย ส่วนข้อมูลนี้ก็จะทำการอ่านข้อมูลโดยใช้ User model อีกที ซึ่งเราไม่เห็นในที่นี้เนื่องจากการใช้ Helper function คือ auth(()->user() ครับ

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

view in action

ในส่วนด้านบนสุดตรง x-app-layout นั่นแหละครับ เป็นการบอก application ว่าให้นำวิวนี้ไปแสดงใน Layout ชื่อ AppLayout ซึ่งเป็น Blade component หรือตัวช่วยแสดงผลที่ Laravel ใช้ ส่วน CSS ในไฟล์นี้้ใช้ Tailwind CSS นะครับ

สำหรับท่านใดสงสัยอะไรก็ทิ้งคำถามไว้ได้ครับ