1 / 19

Model-View-Controller

Model-View-Controller. IDIC By Cwlin. 傳統的開發方式. 程式不分架構、所有東西寫在一起,沒有明確的規則. 傳統的開發 方式 ( 續 ). 在開發小型程式的時候速度較快 當程式規模變大時會導致程式難以維護 主程式與畫面寫在一起 網頁 內容調整困難且無法分工 主程式與資料庫操作寫在一起 資料結構的變動會使得程式必須整個重新檢查、搛寫. MVC. 從傳統的開發方式當中,我們找到了規則並分類. MVC ( 續 ). 我們將整個程式分類成三個部份,並明確定義之間互動的關係 Model

belle
Download Presentation

Model-View-Controller

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Model-View-Controller IDIC By Cwlin

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

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

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

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

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

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

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

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

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

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

  12. 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();

  13. 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'); } }

  14. 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() { } }

  15. 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 = '}>'; } }

  16. 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() { } }

  17. 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(); } }

  18. 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); } }

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

More Related