Model-View-Controller

Model-View-Controller IDIC By Cwlin

傳統的開發方式 • 程式不分架構、所有東西寫在一起，沒有明確的規則

傳統的開發方式 (續) • 在開發小型程式的時候速度較快 • 當程式規模變大時會導致程式難以維護 • 主程式與畫面寫在一起 • 網頁內容調整困難且無法分工 • 主程式與資料庫操作寫在一起 • 資料結構的變動會使得程式必須整個重新檢查、搛寫

MVC • 從傳統的開發方式當中，我們找到了規則並分類

MVC(續) • 我們將整個程式分類成三個部份，並明確定義之間互動的關係 • Model • 負責處理有關資料的操作，如: 資新的新增/修改/刪除和查詢 • View • 負責處理有關使用者介面該如何呈現，如: HTML • Controller • 為主程式負責處理使用者的要求，包含商業邏輯的部份，依需求去存取 Model，並將結果透過 View 回傳給使用者

MVC的優點 • 程式與畫面的切割 • 後端開發人員與前端開發人員較易於分工 • 畫面的修改不會影響主程式的運作 • 程式與資料的切割 • 資料結構的變動不會直接影響主程式的運作 • 減少更換資料庫的轉換成本 • 不同企業採用的資料庫不盡相同

MVC 的互動 Browser Client Request/Response Server Controller Generate Page Access Data Read Data Model(ezSQL) View (Smarty)

MVC 互動關係 • Controller-View • Controller 會將執行動作完的結果傳送給 View，讓 View 產生畫面以回應給瀏覽器 • Controller-Model • 當使用者的操作需要讀取或記錄到資料庫時，Controller 便會透過 Model 去取得資料以便完成動作並將結果寫回資料庫 • View-Model • 一般來說，Controller 會將執行的結果給 View 產生畫面，但若不需要經過 Controller 處理的的資訊，View 便可以直接從 Model 取得要顯示的資料

UI 與 MVC Web Server Browser Smarty Controller View Dispatcher Event add Request add MainProgram update Use update delete Model EzSQL UI Component Action

MVC的設計 • MVC 建立在物件導向程式設計的基礎上 • Model-View-Controller 三者可視為不同物件的類型(Class) • 在設計時會依據三者所負責的功能定義出物件的雛形，在實際開發時可以繼承使用

Controller 的設計 • Controller 需要接收瀏覽器的請求，請求會透過表單的 GET 與 POST 將執行所需的資料傳送給 Controller 做處理 • Controller 負責程式的商業邏輯，在執行時的防呆、規則、計算方式通通會在 Controller 做處理 abstract class Controller { public function getAction() { return $_GET['action']; } abstract function run(); }

Controller 的設計 (續) class MemberController extends Controller { public function run() { $actionListener = null; $action = $this->getAction(); switch($action){ case 'ShowInsertPage': $actionListener = new ShowInsertPageAction(); break; case 'DoInsert': $actionListener = new DoInsertAction(); break; ... } $event = new Event($_GET, $_POST); $msg = $actionListener->actionPerformed($event); echo $msg; } } // 執行 new MemberController()->run();

Model 的設計 • Model 負責連線資料庫，並向資料庫取得資料 • SQL Injection 的問題通常也會在 Model 做處理 • 通常會透過 DBAL 來實作 Model • 在這邊我們使用 ezSQL abstract class Model { private $conn = null; public __construct() { $this->init(); } public function init() { if( !empty($conn) ) return; require_once "/ezsql_path/ez_sql_core.php"; require_once "/ezsql_path/ez_sql_mysql.php"; // 連線資料庫 $this->conn = new ezSQL_mysql('db_user','db_password','db_name','db_host'); } }

Model 的設計 (續) class MemberModel extends Model { public function setCondition() { } public function getMemberList() { $sql = "SELECT member_id, member_name, ... FROM members"; return $this->conn->get_results($sql); } public function getMemberById($member_id) { $sql = "SELECT member_id, member_name, ... FROM members "; $sql .= "WHERE member_id='$member_id'"; return $this->conn->get_row($sql); } public function getMemberListCount() { } public function addMember() { } public function deleteMember() { } }

View 的設計 • View 最主要的目地是將程式的邏輯與畫面做切割 • 讓畫面的修改不會影響到程式的運作 • 通常會使用樣版引擎做為 View 的基礎 • 在這邊使用 Smarty abstract class View { private $tpl = null; public __construct() { $this->init(); } public function init() { require_once 'libs/Smarty.class.php'; $this->tpl = new Smarty(); $this->tpl->template_dir = "templates/"; $this->tpl->compile_dir = "templates_c/"; $this->tpl->left_delimiter = '<{'; $this->tpl->right_delimiter = '}>'; } }

View 的設計 (續) class MemberView extends View { public showMemberListPage() { $model = new MemberModel(); $results = $model->getMemberList(); $this->tpl->assign('members', $results); $this->tpl->display('showMemberList.tpl'); } public showAddMemberPage() { } public showDeleteMemberPage() { } }

Controller 的使用 • Controller 可以直接使用 View 產生畫面 • 顯示新增頁面 class ShowInsertPageAction implements ActionListener { private $model = null; private $view = null; public __construct() { $this->model = new MemberModel(); $this->view = new MemberView(); } public function actionPerformed($event) { $this->view->showInsertMemberPage(); } }

Controller 的使用 (續) • Controller 也可能執行的是一個動作，並將資料透過 Model 新增到資料庫 • Controller 必須負責商業邏輯的部分包含防呆、規則、計算等動作 • 配合 AJAX 的前端程式設計，回應的結果可以是 JSON 而不是完整的畫面 • 新增會員 class DoInsertAction implements ActionListener { private $model = null; private $view = null; public __construct() { $this->model = new MemberModel(); $this->view = new MemberView(); } public function actionPerformed($event) { $member_id = $event->getPost()['member_id']; $member_name = $event->getPost()['member_name']; if( empty($member_id) ) { echo json_encode(false); return; } $result = $this->model->addMember($member_id); echo json_encode($result); } }

練習 • 採用 MVC 的架構設計會員管理 • 功能包含會員的註冊、修改、刪除、查詢 • 需使用 Dojo Toolkit 做畫面 • 需使用 AJAX 執行請求

Model-View-Controller