Codeตัวอย่างเฟรมเวิร์ก Igniter MVC (Model View Controller)

MVC คืออะไร?

MVC ย่อมาจาก Model-View-Controller เป็นรูปแบบสถาปัตยกรรมที่แบ่งแอปพลิเคชันออกเป็นสามส่วนหลัก:

1. โมเดลนี้เกี่ยวข้องกับตรรกะทางธุรกิจและการโต้ตอบกับฐานข้อมูล
2. ตัวควบคุมจะประสานการทำงานระหว่างโมเดลและมุมมอง
3. ฟังก์ชัน View มีหน้าที่ในการนำเสนอข้อมูล

ต่อไปนี้คือข้อดีบางประการของรูปแบบสถาปัตยกรรม MVC:

• การเชื่อมต่อแบบหลวม – ส่วนประกอบต่างๆ มีอยู่และทำงานได้อย่างอิสระจากกันและกัน
• ความยืดหยุ่น – คุณสามารถเปลี่ยนแปลงส่วนประกอบแต่ละส่วนได้อย่างง่ายดาย
• เพิ่มประสิทธิภาพการทำงาน – มากกว่าหนึ่งคนสามารถทำงานในโครงการเดียวกันได้ในเวลาเดียวกัน นักพัฒนาฝั่ง front-end สามารถทำงานเกี่ยวกับมุมมองและการนำเสนอ ในขณะที่นักพัฒนาฝั่ง back-end มุ่งเน้นไปที่โมเดล และเนื่องจากระบบมีการเชื่อมโยงกันอย่างหลวมๆ ทุกส่วนจึงทำงานร่วมกันได้อย่างลงตัวในที่สุด

รุ่น

โมเดลมีหน้าที่ในการโต้ตอบกับแหล่งข้อมูล ซึ่งโดยปกติจะเป็นฐานข้อมูล แต่ก็อาจเป็นบริการที่ให้ข้อมูลตามที่ร้องขอได้เช่นกัน นอกจากนี้ ยังเป็นเรื่องปกติที่จะเก็บตรรกะทางธุรกิจไว้ในโมเดลมากกว่าในคอนโทรลเลอร์ แนวทางปฏิบัตินี้มักเรียกว่า “โมเดลอ้วน คอนโทรลเลอร์ผอม”

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

ตัวอย่างเช่น CodeIgniter ใช้ไลบรารี Active Record ในตัวเพื่อช่วยในการสร้างโมเดล ในขณะที่เฟรมเวิร์กอื่นๆ เช่น Laravel ใช้ Eloquent Object Relational Mapper (ORM) สำหรับการเข้าถึงข้อมูล

ตัวควบคุม

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

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

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

รายละเอียด

มุมมองเกี่ยวข้องกับข้อมูลที่นำเสนอต่อผู้ใช้ ในเว็บแอปพลิเคชัน มุมมองมักประกอบด้วย HTML, CSS และอาจเป็นทางเลือก Javaต้นฉบับส่วนของวิว (Views) ประกอบด้วยโค้ดโปรแกรมเพียงเล็กน้อย โดยปกติจะมีเพียงพอสำหรับการวนลูปผ่านชุดข้อมูลที่ได้รับจากโมเดล หรือฟังก์ชันช่วยเหลือสำหรับการทำความสะอาดข้อมูลหรือการสร้างลิงก์แก้ไข แอปพลิเคชันเว็บสมัยใหม่ส่วนใหญ่ใช้เอนจิ้นเทมเพลตที่มีไวยากรณ์คล้ายรหัสเทียม (pseudocode) ที่นักออกแบบสามารถเข้าใจได้ เมื่อทำงานกับวิว Codeใน Igniter การใช้แท็ก PHP สั้นๆ และโครงสร้างควบคุมเป็นเรื่องปกติ เพื่อแสดงบางสิ่งบางอย่างใน Codeในโปรแกรม Igniter คุณอาจใช้โค้ดต่อไปนี้:

<?=$title?>

ตรงกันข้ามกับ:

<?php
echo $title;
?>

โครงสร้างควบคุมมักเขียนในรูปแบบดังต่อไปนี้:

<?php foreach ($customers as $customer): ?>
<li>
<p><?=$customer->first_name?></p>
</li>
<?php endforeach; ?>

ดังที่คุณเห็นจากตัวอย่างข้างต้น มุมมองนี้ใช้การผสมผสานของ PHP และ HTML แทนที่จะรวมทุกอย่างไว้ในโค้ด PHP ล้วนๆ

วิธีการทำงานของเฟรมเวิร์ก MVC

ภาพต่อไปนี้แสดงวิธีการทำงานของเฟรมเวิร์ก MVC

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

Codeตัวควบคุมการจุดระเบิด

ตอนนี้เรามาวิเคราะห์กันว่าเกิดอะไรขึ้นเมื่อเราโหลดของเข้าไป URL ในเว็บเบราว์เซอร์ เปิดไฟล์ Welcome.php ที่อยู่ในโฟลเดอร์ application/controllers คุณควรจะเห็นโค้ดดังต่อไปนี้:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
$this->load->view('welcome_message');
}
}

ที่นี่:

• `defined('BASEPATH') OR exit('No direct script access allowed');` ป้องกันการเข้าถึงคอนโทรลเลอร์โดยตรงหากคำขอไม่ได้มาจากไฟล์ index.php นี่เป็นมาตรการรักษาความปลอดภัย
• class Welcome extends CI_Controller {…} กำหนดคลาสคอนโทรลเลอร์ Welcome และสืบทอดมาจากคลาสแม่ CI_Controller
• ฟังก์ชันสาธารณะ index(){…} กำหนดเมธอด index ที่ตอบสนองต่อ URL http://localhost:3000.
• $this->load->view('welcome_message'); โหลดวิว welcome_message ที่อยู่ในไดเร็กทอรี application/views

ต่อไปนี้เราจะอัปเดตวิธีการสร้างดัชนี:

public function index()
{
$this->load->model('customers_model');
$data['customer'] = $this->customers_model->get_customer(3);
$this->load->view('welcome_message',$data);
}

ที่นี่:

• $this->load->model('customers_model'); โหลดโมเดลของลูกค้า
• $data['customer'] = $this->customers_model->get_customer(3); เรียกใช้เมธอด get_customer ของ customers_model และส่งพารามิเตอร์ 3 เข้าไป ในตัวอย่างนี้เราได้กำหนดค่าแบบตายตัวไว้ แต่ในแอปพลิเคชันจริง ค่านี้จะเป็นพารามิเตอร์จาก URI
• $this->load->view('welcome_message',$data); โหลดวิว welcome_message และส่งค่าตัวแปร $data เข้าไป

Codeโมเดลตัวจุดไฟ

ต่อไปนี้เราจะสร้างโมเดลตามที่อ้างถึงในโค้ดด้านบน เพื่อความง่าย โมเดลของเราจะไม่โต้ตอบกับ... ฐานข้อมูล แต่จะส่งคืนข้อมูลลูกค้าแบบคงที่ เราจะทำงานกับฐานข้อมูลในบทเรียนถัดไป สร้างไฟล์ Customers_model.php ใน application/models และเพิ่มโค้ดต่อไปนี้:

<?php
class Customers_model extends CI_Model {
public function get_customer($id) {
$data['id'] = 3;
$data['first_name'] = 'John';
$data['last_name'] = 'Doe';
$data['address'] = 'Kingstone';
return $data;
}
}

ที่นี่:

• คลาส Customers_model ขยาย CI_Model {…} กำหนดโมเดล Customers_model ที่ขยาย CI_Model
• public function get_customer($id) {…} กำหนดเมธอด get_customer โดยอิงจากรหัสลูกค้า
• $data[…] กำหนดค่าคงที่ของลูกค้าสมมติของเรา ค่านี้ควรเป็นแถวที่ส่งคืนจากฐานข้อมูล
• ส่งคืนข้อมูล $; ส่งคืนข้อมูลลูกค้า

จบส่วนโมเดลของเราแล้ว ต่อไปเรามาแก้ไขวิว welcome_message กัน เปิดไฟล์ welcome_message.php ที่อยู่ใน:

application/views/welcome_message.php

แทนที่โค้ดด้วยข้อความต่อไปนี้:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CodeIgniter MVC Basics</title>
</head>
<body>
<h1>Customer Details Card</h1>
<p>Customer ID : <strong><?=$customer['id']?></strong></p>
<p>First Name : <strong><?=$customer['first_name']?></strong></p>
<p>Last Name : <strong><?=$customer['last_name']?></strong></p>
<p>Address : <strong><?=$customer['address']?></strong></p>
</body>
</html>

บันทึกการเปลี่ยนแปลงและโหลดข้อมูลต่อไปนี้ URL ในเว็บเบราว์เซอร์: http://localhost:3000/คุณจะเห็นบัตรลูกค้าตามที่แสดงในภาพด้านล่าง

คำถามที่พบบ่อย