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

โดย: ฟิโอน่า บราวน์ ฟิโอน่า บราวน์
Hours วันที่อัพเดท

MVC คืออะไร?

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

1. สร้างโมเดลที่เกี่ยวข้องกับตรรกะทางธุรกิจและการโต้ตอบกับฐานข้อมูล

2. ผู้ควบคุมประสานงานกิจกรรมระหว่างแบบจำลองและมุมมอง

3. View มีหน้าที่นำเสนอข้อมูล

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

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

รุ่น

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

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

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

ตัวควบคุม

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

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

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

รายละเอียด

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

<?=$title?>

ตรงข้ามกับ

<?php
echo $title;
?>

โครงสร้างการควบคุมมักจะเขียนดังนี้

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

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

กรอบงาน MVC ทำงานอย่างไร

รูปภาพต่อไปนี้แสดงการทำงานของกรอบงาน MVC

กรอบงาน MVC ทำงานได้

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

บทความที่เกี่ยวข้อง

ตัวควบคุม CodeIgniter

ตอนนี้เรามาแจกแจงสิ่งที่เกิดขึ้นเมื่อเราโหลด URL ด้านบนลงในเว็บเบราว์เซอร์

เปิดไฟล์ตัวควบคุม Welcome.php ที่อยู่ในแอปพลิเคชัน/ตัวควบคุม

คุณควรจะสามารถเห็นรหัสต่อไปนี้ได้

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

ที่นี่

  • กำหนด('BASEPATH') หรือออก ('ไม่อนุญาตให้เข้าถึงสคริปต์โดยตรง'); ป้องกันการเข้าถึงคอนโทรลเลอร์โดยตรงหากคำขอไม่ผ่าน index.php นี่เป็นไปเพื่อความปลอดภัย
  • class Welcome ขยาย CI_Controller {…} กำหนดคลาส Welcome controller และขยายคลาสพาเรนต์ CI_Controller
  • ฟังก์ชั่นสาธารณะ index(){…} กำหนดวิธีการทำดัชนีที่ตอบสนองต่อ URL http://localhost:3000
    • $this->load->view('welcome_message'); โหลด view 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['ลูกค้า'] = $this->customers_model->get_customer(3); เรียกเมธอด get_customer ของ customer_model และส่งผ่านในพารามิเตอร์ 3 ในตัวอย่างนี้ เราได้ฮาร์ดโค้ดค่า แต่ในการใช้งานจริง นี่จะเป็นพารามิเตอร์จาก URI
  • $this->load->view('welcome_message',$data); โหลดมุมมอง Welcome_message และส่งผ่านตัวแปร $data ไปยังมุมมอง

โมเดล CodeIgniter

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

สร้างไฟล์ 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
  • ฟังก์ชั่นสาธารณะ get_customer($id) {…} กำหนดวิธีการรับลูกค้าตามรหัสลูกค้า
  • $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/

คุณควรจะเห็นบัตรลูกค้าตามที่แสดงในภาพด้านล่าง

โมเดล CodeIgniter

สรุป

  • VMC เป็นรูปแบบสถาปัตยกรรมที่แบ่งแอปพลิเคชันออกเป็นสามส่วนหลัก
  • โมเดลมีหน้าที่รับผิดชอบในการโต้ตอบกับแหล่งข้อมูล
  • คอนโทรลเลอร์จะรับฟังคำขอทรัพยากรที่เข้ามาจากผู้ใช้
  • ในเว็บแอปพลิเคชัน มุมมองมักประกอบด้วย HTML, CSS และอาจเป็นทางเลือก Javaต้นฉบับ
  • คอนโทรลเลอร์ได้รับการร้องขอจากผู้ใช้ โต้ตอบกับโมเดลฐานข้อมูลหากจำเป็น จากนั้นส่งคืนผลลัพธ์กลับไปยังเบราว์เซอร์ในรูปแบบของโค้ด HTML

สรุปโพสต์นี้ด้วย: