›
›

Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 6: Back End Component

pdf 39 trang hapham 2620
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 6: Back End Component", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_chuyen_sau_voi_cms_joomla_bai_6_back.pdf

Nội dung text: Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 6: Back End Component

  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 6: BACK-END COMPONENT 1. Cấu trúc Back End Component 2. Các bước thực hiện 3. Admin Form 4. Xử lý phân trang 5. Toolbar 6. Đóng gói component 2
  3. Bài 6: BACK-END COMPONENT 11 CCấấuu trtrúúcc BBackack EEndnd CCoommppononeentnt § Back end component gồm: – Thư mục com_tencom nằm ở joomla/administrator/components/ – Trongthư mụccom_tencom, cóítnhất1 file là ten_component.php, làfile xử lýchínhcủa component Cúpháptruyxuấtcomponent từ url: =com_tencom 3
  4. Bài 6: BACK-END COMPONENT 22 CCáácc bbưướớcc ththựựcc hihiệệnn § Bước1: Khởitạocomponent § Bước2: Khởitạocácfile code 4
  5. Bài 6: BACK-END COMPONENT 22 CCáácc bbưướớcc ththựựcc hihiệệnn § Bước1: Khởitạocomponent: – Tạocấutrúccomponent – Giảithích: •admin.tencom.html.php: file nàychứa1 class cungcấp cácphươngthứchiểnthị giaodiện •admin.tencom.php: làfile xử lýchínhcủacomponent. Trongfile nàysẽgọicácphươngthứchiểnthị giao diệnbênfile admin.tencom.html.php 5
  6. Bài 6: BACK-END COMPONENT 22 CCáácc bbưướớcc ththựựcc hihiệệnn § Bước2: Khởitạocácfile admin.tencom.phpvà admin.tencom.html.php. – File admin.tencom.phpgồmcácxửlýchính sau: • Thamchiếufile xử lýgiaodiện • Lấygiátrị củacácthamsốtừurl • Xétcácthamsốđể gọicácxửlýphùhợp 6
  7. Bài 6: BACK-END COMPONENT 7
  8. Bài 6: BACK-END COMPONENT 22 CCáácc bbưướớcc ththựựcc hihiệệnn § Bước2: Khởitạocácfile admin.tencom.phpvà admin.tencom.html.php. – File admin.tencom.html.phplà1 class cungcấpcác phươngthức để hiểnthị giaodiện ứngvớicácchức năngcủacomponent 8
  9. Bài 6: BACK-END COMPONENT admin.tencom.html.php Minh họa 9
  10. Bài 6: BACK-END COMPONENT 22 CCáácc bbưướớcc ththựựcc hihiệệnn § Bước3: Viếtcode chocácfile admin.tencom.phpvàadmin.tencom.html.php. Vídụ: Hiểnthị danhsáchkháchhàng 10
  11. Bài 6: BACK-END COMPONENT 22 CCáácc bbưướớcc ththựựcc hihiệệnn § Bước3: Viếtcode chocácfile admin.tencom.phpvàadmin.tencom.html.php. Vídụ: Hiểnthị danhsáchkháchhàngtheostyle củajoomla Minh họa 11
  12. Bài 6: BACK-END COMPONENT ThThựựcc hhàànhnh – Tạocom_khach_hanghiểnthị lướikhách hàng 12
  13. Bài 6: BACK-END COMPONENT 33 AAddmminin FoFormrm § Khitạocáctrangweb ở Back End, nếucósử dụngcáclớptiệníchvềgiaodiệncủaJoomla như phântrang, toolbar, lọcdữliệu thìtrong trangweb nàyphảicómộtform đặttênlà adminFormthìcáclớptiệníchmớihoạt động được Vídụ: 13
  14. Bài 6: BACK-END COMPONENT 44 XXửử lýlý pphhânân ttrarangng § Vídụ: lướikháchhàngcóphântrang 14
  15. Bài 6: BACK-END COMPONENT 44 XXửử lýlý pphhânân ttrarangng § Gồm2 bướcxửlýchínhsau: – Hiểnthị dữ liệucóphântrang – Hiểnthị thanhphântrang 15
  16. Bài 6: BACK-END COMPONENT 44 XXửử lýlý pphhânân ttrarangng § Hiểnthị dữ liệucóphântrang: Thôngthường, để lấydữliệucóphân trang, cầnxửlýnhư sau: – Cầnxác địnhlấydữliệutừdòngnào (limitstart) , lấybaonhiêudòng(limit) – Viếttruyvấnlấydữliệucósửdụngtừkhóa LIMIT SELECT * FROM BANG LIMIT limitstart, limit 16
  17. Bài 6: BACK-END COMPONENT 44 XXửử lýlý pphhânân ttrarangng § Hiểnthị dữ liệucóphântrang: – Joomlacóhỗtrợ truyvấnlấydữliệukèmtheolimit: dùng$db->setQuery($query, $start, $length) Vídụ: lấydữliệubảngkháchhàng, từ dòng5 đến10 $query = “SELECT * FROM KHACH_HANG” $db->setQuery($query, 5, 5) $data = $db->loadObjectList(); 17
  18. Bài 6: BACK-END COMPONENT 44 XXửử lýlý pphhânân ttrarangng § Hiểnthị thanhphântrang – Để hiểnthịđượcthanhphântrang, cầnxác định được – $total: tổngsốdòngdữliệucầnphântrang – $start: trang đanghiểnthị làtrangnào – $limit: số dònghiểnthịởmỗitrang 18
  19. Bài 6: BACK-END COMPONENT 44 XXửử lýlý pphhânân ttrarangng § Hiểnthị thanhphântrang – Joomlacócungcấpclass JPagination để xử lýhiểnthị thanhphântrang Vídụ: Hiểnthị thanhphântrangchodữliệucó100 dòng(total), dòng đang đượcchọnlàdòng3, mỗi dònghiểnthị 10 mẫutin jimport('joomla.html.pagination'); $total = 100; $start = 21; //hiểnthị trang3 $limit = 10; $pagination = new JPagination( $total, $start, $limit ); echo $pagination->getgetListFooter(); 19
  20. Bài 6: BACK-END COMPONENT 44 XXửử lýlý pphhânân ttrarangng § Minh họadùngJoomlaxửlýphântrang chochứcnăngliệtkêdữliệubảngkhách hàng Minh họa 20
  21. Bài 6: BACK-END COMPONENT 55 ToTooolblbarar § Toolbar hiểnthị tiêu đề vàchứacácnút chứcnăngcủacomponent Vídụ: JoomlacungcấpchotalớpJToolBarHelper để hiểnthị toolbar 21
  22. Bài 6: BACK-END COMPONENT 55 ToTooolblbarar § Hiểnthị tiêu đề: JToolBarHelper::title('tieude' [, 'hinh_tieu_de' ]); Vídụ: class HTML_KhachHang { function Hien_thi_danh_sach_khach_hang($data, $pagination) { JToolBarHelper::title('Kháchhàng'); ?> } } 22
  23. Bài 6: BACK-END COMPONENT 55 ToTooolblbarar § Hiểnthị tiêu đề: – Để hiểnthị hìnhchotiêu đề thìtalàmcácbước như sau: •Copy hìnhvàothư mục joomla\administrator\templates\khepri\images\header •Mởfile icon.cssnằmtrongthư mục joomla\administrator\templates\khepri\css, dichuyển đếndòng/*header icons*/ vàbổsung css đểđịnh nghĩahìnhmàmình đãcopy ở bướctrước. csscódạng: .icon-48-tencss { background-image: url( /images/toolbar/tenhinh.png); } 23
  24. Bài 6: BACK-END COMPONENT 55 ToTooolblbarar § Hiểnthị cácnútchứcnăng: Joomla địnhnghĩasẳnmộtsốnútchức năngthôngdụngnhư New, Delete, Edit, Save, Apply, Cancel, Back, Help, Vídụ: JToolBarHelper::deleteList(); JToolBarHelper::editList(); JToolBarHelper::addNew(); 24
  25. Bài 6: BACK-END COMPONENT 55 ToTooolblbarar 25
  26. Bài 6: BACK-END COMPONENT 55 ToTooolblbarar § Hiểnthị nútchứcnăngtheoý mình: – Cúpháp: custom($task='', $icon='', $iconOver='', $alt='', $listSelect=true, $x=false) – Giảithích – $icon: têncsslink tớihình – $iconOver: têncsslink tớihìnhkhirêchuột lênnútchứcnăng – $listSelect: cókiểmtra đánhdấuchọndòng hay không? – $x: ẩnmenu hay không? 26
  27. Bài 6: BACK-END COMPONENT 55 ToTooolblbarar § Hiểnthị nútchứcnăngtheoý mình: – Để hiểnthị hìnhchocustom toolbar thìtalàm cácbướcnhư sau: •Copy hìnhvàothư mục joomla\administrator\templates\khepri\images\toolbar •Mởfile icon.cssnằmtrongthư mục joomla\administrator\templates\khepri\css, dichuyển đếndòng/*toolbar icons*/ vàbổsung css đểđịnh nghĩahìnhmàmình đãcopy ở bướctrước. csscódạng: .icon-32-tencss { background-image: url( /images/toolbar/tenhinh.png); } 27
  28. Bài 6: BACK-END COMPONENT 55 ToTooolblbarar § Hiểnthị nútchứcnăngtheoý mình: – Vídụ: JToolBarHelper::custom('print', 'printer', 'printer', $alt='Print'); joomla\administrator\templates\khepri\images \toolbar\icon.css .i.icconon-3-322-p-prrininteterr {{ b backackggrroouundnd-i-mimaaggee: : uurrl(l /i( /immaaggeses/t/oolbtoolbaarr/i/ciconon-3-322-p-prrinint.pngt.png);) ;} } 28
  29. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Đểđónggóitoànbộnộidung của component vào1 file nén, talàmcácbước như sau: – Bước1: Tạofile cấuhìnhchoComponent – Bước2: Néncáctậptin, thư mụctrongthư mụccom_tencomthành1 file. Vídụ: com_tencom.zip 29
  30. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Tạofile cấuhìnhchocomponent – Bước1: trongcom_tencom, tạofile tencom.xmlvàkhởitạonộidung chofile này, baogồmcácthôngtin: •Name: têncom •Author: tácgiả •CreationDate: ngàytạo • •administration: cấuhìnhphầnquảntrị •menu: tạomenu 30
  31. Bài 6: BACK-END COMPONENT 6.6. CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommpoponneentnt khach_hang Têncomponent QuốcCường Tácgiả 10/2009 Ngàytạo Copyright(C) 2005 -2008 Open Source Matters. All rights reserved. GNU/GPL cqcuong@hcmuns.edu.vn t3h.vn 1 0 Quảnlýthôngtin kháchhàng Tạomenu ở Quảnlýkháchhàng administrator 31
  32. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Tạofile cấuhìnhchoComponent – Bước2: Cấuhìnhcopy file •Bổsung cácthẻ , , như sau: ten_thu_muc ten_file •Lưuý: – Copy file chophầnfront-end thìta để thẻ ở ngoài – Nếucopy file choback-end thìta để thẻ trongthẻ 32
  33. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Bước2: Cấuhìnhcopy file – Vídụ: cấuhìnhcopy file chocom_khach_hang • Ở Front-End khach_hang.php khach_hang.html.php • Ở Back-End admin.khach_hang.php admin.khach_hang.html.php 33
  34. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Tạofile cấuhìnhchoComponent – Bước3: bổ sung phầninstallfilevàunstallfile để xử lýkhiinstall vàuninstall: hiểnthị thông báo, cậpnhậtdữliệuliênquan, (nếucần) – Vídụ: bổ sung •install.php để xử lýkhiinstall •uninstall để xử lýkhiinstall install.php uninstall.php 34
  35. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Tạofile cấuhìnhchoComponent – Bước3: bổ sung phầninstallfilevàunstallfile để xử lýkhiinstall vàuninstall. install.php function com_install(){ echo “Cài đặt thành công” } uninstall.php function com_uninstall(){ echo “com_khach_hang đã được xóa”; } 35
  36. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Tạofile cấuhìnhchoComponent – Bước4: bổ sung phầninstall vàunstallcơsở dữliệu(nếucần) •Bổsung cácthẻ , như sau: file_script.sql lệnhsql •Bổsung cácthẻ , cũngtươngtựnhư trên. 36
  37. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Tạofile cấuhìnhchoComponent – Bước4: bổ sung phầninstall vàunstallcơsở dữliệu(nếucần) •Bổsung cácthẻ , như sau: file_script.sql lệnhsql •Bổsung cácthẻ , cũngtươngtựnhư trên. 37
  38. Bài 6: BACK-END COMPONENT 66 CCấấuu hhììnhnh,, đđóóngng ggóóii CCoommppononeentnt § Đónggóicomponent: néncáctậptin, thư mụctrongcomponent thành1 file nén.zip – Vídụ: com_khach_hang.zip 38
  39. Bài 6: BACK-END COMPONENT 39