Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 8: Component theo mô hình MVC

Nội dung text: Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 8: Component theo mô hình MVC

1. TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM LẬP TRÌNH WEB CHUYÊN SÂU VỚI CMS JOOMLA 1
2. TRUNG TÂM TIN HỌC ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM Bài 8: Component theomôhìnhMVC 1.1. GiGiớớii thithiệệuu mômô hhììnhnh MVCMVC 2.2. MôMô hhììnhnh MVMVCC ttrrongong JJoooommlala 3.3. TTạạoo MVMVCC CoCommpponentonent 2
3. Bài 8: Component theomôhìnhMVC 11 GiGiớớii tthihiệệuu mômô hhììnhnh MVCMVC § Model: lànhữnggìliênquan đến dữ liệucủaứngdụng. Model sẽ chịutráchnhiệmthaotáctrực tiếpvớidatabase như truyxuất, cậpnhật, thêmmới. Model sẽ lấy thôngtin vàtrả về choView, nó cũngsẽchịutráchnhiệmthông báochoController nhữngthay đổidữliệunếucó. § View: View sẽ chịutráchnhiệm hiểnthị thôngtin. Ta cóthể xem View như cáctrangweb, hoặc cácform trong ứngdụng windows. § Controller: lànhữnglớpsẽlắng nghenhữngthaotácchuộtvà bànphímtừngườidùng, nósẽ tác động đếnModel vàView để thay đổikhicầnthiết. 3
4. Bài 8: Component theomôhìnhMVC 22 MôMô hhììnhnh MMVVCC ttrrongong JJoooommlala § Đa số cáccomponent ở Front End đượcphát triểntheomôhìnhMVC § Joomlacungcấp1 framework giúptasẽdàng xâydựngcáccomponent theomôhìnhMVC – Cungcấpcácclass JModel, JView, JControllergiúp taxâydựngModel, View vàController dễ dànghơn. – Nếutuânthủ quytắcđặttênchoModel, View, Controller thìtasẽdễdàngtruyxuấtqua lạigiữacác lớp. Vídụ: View truyxuấtdữliệutừModel. 4
5. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § Cácbước để tạo1 component theomô hìnhMVC: – Khởi tạo component •Tạo cấu trúc cây thư mục •Khởi tạo code cho các file của component – Thêm 1 chức năng vào component •Thêmcode vàofile controller •Tạofile model (nếucần) •Tạoview 5
6. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § Khởitạocomponent – Tạocấutrúccâythư mục Giảithích: • models: chứacácmodel • Tables: chứacácclass kế thừalớp JTable, lớpnàydùng để xử lýdữliệu của1 bảng. • views: chứacácview. Mỗiview làmột thư mục. Trongthư mụccóítnhấtcác tậptin vàthư mụcnhư hình. • controller.php: file xử lýcontroller • tencom.php: file khởi độngcomponent ( nếulàcom back end thì admin.tencom.php) 6
7. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § Khởitạocomponent – Tạocấutrúccâythư mục Vídụ: tạocom_chu_de 7
8. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § KhởitạoComponent – Khởitạocode chofile controller.php. •Quy ước đặttênclass controller: + Controller Vídụ: com_tencomthìtênclass controller là: TenComController 8
9. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § KhởitạoComponent – Khởitạocode chofile controller.php: Copy code bên dướivàsửalạiTenComvàTenView(chobiếttrang khởi độngcủacomponent) defined('_JEXEC') or die('Restrictedaccess'); jimport('joomla.application.component.controller'); class TenComControllerextends JController { function display(){ parent::display(); } } 9
10. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § KhởitạoComponent – Khởitạocode chofile khởi động (tencom.php): Copy đoạncode bêndướivà sửalạitênclass controller. defined('_JEXEC') or die('Restrictedaccess'); require_once(JPATH_COMPONENT.DS.'controller.php'); $controller = new TenComController(); $controller->execute( JRequest::getVar('task')); $controller->redirect(); 10
11. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § KhởitạoComponent – Khởitạocode choview mặc định củacom, nghĩalàkhitatruyxuấtcom: index.php?option=com_tencom thìview mặc địnhsẽhiểnthị. •Trongfile view.html.php, tạoclass choView •Quy ước đặttênclass: TenCom + View + TenView Vídụ: tạoview hello chocom_tencomthìtên class củaview làTenComViewHello 11
12. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § KhởitạoComponent – Khởitạocode file view.html.php: copy code bêndướivàsửalạitênview. defined('_JEXEC') or die('Restrictedaccess'); jimport( 'joomla.application.component.view'); class TenComViewTenView extends JView{ function display($tpl= null){ parent::display($tpl); } } 12
13. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § Thêm 1 chức năng vào component Các bước thực hiện: – Bước1: Thêmcode vàofile controller để xử lýchứcnăngcầnthêm – Bước2: Tạomodel (nếucần) chứacáchàm xử lýdữliệuvànghiệpvụ. –Bước3: Tạoview để hiểnthị giaodiện. Trong view sẽ gọicáchàmcủamodel để xử lýdữ liệuvànghiệpvụ. 13
14. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § Thêm 1 chức năng vào component – Vídụ1: thêmchứcnănghiểnthị danhsách cácchủđề – Ta sẽ truyxuấtchứcnăngnàythôngqua url= index.php?option=com_chu_de&task=dschu_ de 14
15. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ddaanhnh ssáácc chchủủ đđềề § Bước1: thêmvàocontroller.phphàmxửlýcho task=dschude defined('_JEXEC') or die('Restrictedaccess'); jimport('joomla.application.component.controller'); class ChuDeControllerextends JController { function display(){ parent::display(); } function dschude() { //chọnview hiểnthị JRequest::setVar(‘view’,’chude’); parent::display(); } } 15
16. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ddaanhnh ssáácc chchủủ đđềề § Bước2: Tạomodel chứacáchàmxửlýdữliệu vànghiệpvụ. –Model chứa1 class kế thừaclass JModel – Quy ước đặttênclass: TenCom + Model + TenView Vídụ: tạomodel choView dskhachangcủa com_khach_hangthìtênclass sẽ là Khach_hangModelDSKhachHang 16
17. Bài 8: Component theomôhìnhMVC JJMMododelel § Cácphươngthứcthườngdùng – static addIncludePath( path : string='' ) : array – &getDBO( ) : JDatabase – static &getInstance( type : string, prefix : string='' ) : JModel – &_getList( query : string, limitstart: int=0, limit : int=0 ) : array 17
18. Bài 8: Component theomôhìnhMVC JJMMododelel § Vídụ: thựchiệntruyvấntrongJModel defined('_JEXEC') or die('Restrictedaccess'); jimport( 'joomla.application.component.model' ); class Chu_deModelChu_deextends JModel { function getData(){ $lenhsql= “SELECT * FROM #__chu_de”; $data = $this->_getList($lenhsql); /* hoặc $db =& $this->getDBO(); $db->setQuery($lenhsql); $data = $db->loadObjectList(); */ return $data; } } 18
19. Bài 8: Component theomôhìnhMVC JJMMododelel § Vídụ: truyxuấtmodel chu_devàgọicác phươngthứccủamodel jimport( 'joomla.application.component.model' ); JModel::addIncludePath(“duong_dan_den_model_chu_de”); $model =& JModel::getInstance(“Chu_de”,”Chu_deModel”); $data = $model->getData(); 19
20. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ddaanhnh ssáácc chchủủ đđềề § Bước2: trongthư mụcmodels, tạofile chu_de.phpchứamodel chu_de defined('_JEXEC') or die('Restrictedaccess'); jimport( 'joomla.application.component.model' ); class Chu_deModelChu_deextends JModel { function getData(){ $query = ' SELECT * FROM #__chu_de'; $data = $this->_getList($query); return $data; } } 20
21. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ddaanhnh ssáácc chchủủ đđềề § Bước3: tạoView để hiểnthị chủđề – Tạocấutrúccâythư mụcchoView chu_de – Khởitạocode chofile view.html.php(xembướckhởitạo com) – Trongfile view.html.php, hàmdisplay, thựchiệnlấydữ liệutừmodel vàtruyềnchotemplate hiểnthị 21
22. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ddaanhnh ssáácc chchủủ đđềề § Bước3: tạoView để hiểnthị chủđề – Trongfile view.html.php, hàmdisplay, thựchiệnlấy dữliệutừmodel vàtruyềnchotemplate hiểnthị defined('_JEXEC') or die('Restrictedaccess'); jimport( 'joomla.application.component.view'); class Chu_DeViewChu_Deextends JView{ function display($tpl= null){ //Lấydanhsáchchủđề từ model $dl_chu_de= $this->getData(); //để bêntemplate cóthể sử dụngdữliệuchủđề $this->assignRef('data', $dl_chu_de); parent::display($tpl); } } 22
23. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ddaanhnh ssááchch chchủủ đđềề § Bước3: tạoView để hiểnthị chủđề – Trongfile default.php, viếtcode hiểnthị danhsách chủđề Mãchủđề Tênchủđề data as $row){ ?> > Mcd; ?> Ten_chu_de; ?> 23
24. Bài 8: Component theomôhìnhMVC 33 TTạạoo MVMVCC CCoommponponeentnt § Thêm 1 chức năng vào component – Vídụ2: thêmchứcnăngcậpnhậtthôngtin chủđề – Ta sẽ truyxuấtchứcnăngnàythôngqua url= index.php?option=com_chu_de&task=edit 24
25. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ffoormrm chchủủ đđềề § Bước1: thêmvàocontroller.phphàmxửlýcho task=edit_chu_de defined('_JEXEC') or die('Restrictedaccess'); jimport('joomla.application.component.controller'); class ChuDeControllerextends JController { function edit_chude() { //chọnview hiểnthị JRequest::setVar(‘view’,’edit_chude’); parent::display(); } } 25
26. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ffoormrm chchủủ đđềề § Bước2: trongthư mụcmodels, tạofile edit_chu_de.php: defined('_JEXEC') or die('Restrictedaccess'); jimport( 'joomla.application.component.model' ); class Chu_deModelEdit_Chu_deextends JModel { function getChude($mcd){ //xử lýtruyvấnlấythôngtin chủđềứngvớimcd // return $kq; } } 26
27. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ffoormrm chchủủ đđềề § Bước3: tạoView để hiểnthị chủđề – Tạocấutrúccâythư mụcchoView edit_chu_de – Khởitạocode chofile view.html.php(xembướckhởitạo com) – Trongfile view.html.php, hàmdisplay, thựchiệnlấydữ liệutừmodel vàtruyềnchotemplate hiểnthị 27
28. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ffoormrm chchủủ đđềề § Bước3: tạoView để hiểnthị chủđề – Trongfile view.html.php, hàmdisplay, thựchiệnlấy dữliệutừmodel vàtruyềnchotemplate hiểnthị defined('_JEXEC') or die('Restrictedaccess'); jimport( 'joomla.application.component.view'); class Chu_DeViewEdit_Chu_Deextends JView{ function display($tpl= null){ //Lấydanhsáchchủđề từ model $mcd=JRequest::getVar(“mcd”); $dl_chu_de= $this->getChuDe($mcd); //để bêntemplate cóthể sử dụngdữliệuchủđề $this->assignRef('data', $dl_chu_de); parent::display($tpl); } } 28
29. Bài 8: Component theomôhìnhMVC HiHiểểnn ththịị ffoormrm chchủủ đđềề § Bước3: tạoView để hiểnthị chủđề – Trongfile default.php, viếtcode hiểnthị form nhập liệuchủđề 29
30. Bài 8: Component theomôhìnhMVC 30