Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 5: Các lớp tiện ích

Nội dung text: Bài giảng Lập trình web chuyên sâu với CMS Joomla - Bài 5: Các lớp tiện ích

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 5: Các lớp tiện ích 1.1. GiGiớớii thithiệệuu 2.2. CCáácc titiệệnn ííchch vvềề ggiiaoao didiệệnn 3.3. CCáácc titiệệnn ííchch vvềề xxửử lýlý 4.4. SSửử ddụụngng EEddiitortor 5.5. AAjjaaxx vvớớii MMootooootoolsls ffrraammeewwoorkrk 2
3. Bài5: Cáclớptiệních 11 GiGiớớii tthihiệệuu § Joomlacungcấpsẳnchotamộtsốclass tiệních. Cácclass này giúptahiểnthị giao diệnvàlậptrìnhnhanhhơn. § Vídụ: – class JHTML cungcấpcácphươngthứcgiúp xử lýhiểnthị giao diện như: bảng(grid), list (combobox, listbox), tooltip, datetimepicker, – classJTablegiúpcậpnhậtdữliệumàkhông cần viết lệnh SQL. 3
4. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Giớithiệu – Class JHTML cungcấpcáctiệníchvềgiao diện. – Để dùngclass JHTML, taphảithamchiếu đếnfile html.phpchứaclass này: jimport('joomla.html.html'); – Cúphápchung: JHTML::_('type', ) type: loạicontrol: grid, list, select, image, mỗitype sẽ cócácthuộctính đikèm. 4
5. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Giớithiệu – Class JHTML cungcấpcáctiệníchvềgiao diện. – Vídụ: Hiểnthị control chọnngày: echo JHTML::_('calendar', null, 'ngay', 'ngay'); 5
6. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị tooltip – Trướckhigọihàmhiểnthị tooltip, taphảithực hiệnlệnhsau: JHTML::_('behavior.tooltip'); – Cúpháp: JHTML::_(tooltip, content, title); – Vídụ: JHTML::_('behavior.tooltip'); echo JHTML::_('tooltip', 'Họ tênphảicó ítnhất8 kítự', 'Họ tên'); 6
7. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị và địnhdạngngày – Cúpháp: JHTML::_(date, value, [format]); – Vídụ: hiểnthị ngàyhiệnhànhtheo địnhdạng ngày/tháng/năm $today = date('Y-m-dh:m:s'); echo JHTML::_('date', $today, '%d/%m/%Y'); 7
8. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị ô nhậpliệungày – Cúpháp: JHTML::_(calendar, value, name, id, [format]); – Vídụ: hiểnthị ngàygửibàicógiátrị mặc định làngàyhiệnhành $today = date('d/m/Y'); $html_ngay= JHTML::_('calendar', $today, 'ngay', 'ngay', '%d/%m/%Y'); echo "Ngàygửibài$html_ngay"; 8
9. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị comboboxsection – Cúpháp: JHTML::_(list.section, name, [active], [javascript], [order]); Giảithích: - name: name củacombobox. Vídụ: cboSection - active: id củasection đượcchọn - javascript: gọihàmjavascript để xử lýbiếncố. Vídụ: onchange=cboSection_onchange() - order: biểuthứcorder by củalệnhsql để sắpxếpdữ liệu, mặc địnhsắpxếptheocộtordering 9
10. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị comboboxsection – Vídụ: Hiểnthị comboboxchứadữliệubảngSection echo JHTML::_('list.section', 'mysection'); – Vídụ: Hiểnthị comboboxsection, mặc địnhchọndòngcó id=5, vàgọihàmjavascript để xử lýchọn. echo JHTML::_('list.section', 'mysection', 5, 'onchange=mysection_onchange();'); 10
11. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị list categories – Cúpháp: JHTML::_(list.category, name, section, [active], [javascript], [order], [size], [sel_cat]); Giảithích: - name: name củacombobox. Vídụ: cboCategory - active: id củasection đượcchọn - javascript: gọihàmjavascript để xử lýbiếncố. order: biểuthức - order by củalệnhsql để sắpxếpdữ - size: quy địnhhìnhthứchiểnthị làcomboboxhay listbox - sel_cat: cóhiểnthị dòngSelect a Category ởđầuhay không? (mặc địnhCó) 11
12. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị list category – Vídụ: Hiểnthị combobox để chọncáccategory thuộc về section cóid=5. echo JHTML::_('list.category', 'cboTheGioi', 5); – Vídụ: Hiểnthị listbox để chọncáccategory thuộcvề section cóid=5. echo JHTML::_('list.category', 'cboTheGioi', 5, '','','ordering', 3, false); 12
13. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị list tùyý –Joomlahỗtrợ hiểnthị list vớinguồndữliệulàmảng – Cúpháp: JHTML::_(select.genericlist, arr, name, attribs, [key], [text], [selected]); Giảithích: - arr: mảng - name: name củalist. Vídụ: cboTinhThanh - attribs: cácattribute củathẻ select. Vídụ: style, onchange, - key: têncộttrả về giátrị - text: têncộtdùng để hiểnthị - selected: giátrị chọn 13
14. Bài5: Cáclớptiệních 22 CCáácc titiệệnn ííchch vvềề gigiaoao didiệệnn § Hiểnthị list tùyý –Vídụ: Hiểnthị comboboxnhàcungcấp //lấydữliệu $db=& JFactory::getDBO(); $lenhsql= "SELECT * FROM #__nha_xuat_ban"; $db->setQuery($lenhsql); $data = $db->loadObjectList(); //hiểnthị combobox echo JHTML::_('select.genericlist', $data, 'cboNhaXB', '', 'Mnxb', 'Ten_nha_xuat_ban'); 14
15. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JFactory – Dùng để tạo các đối tượng của Joomla. – Vídụ: •Tạo đối tượng truy xuất CSDL $db =& JFactory::getDBO(); •Tạo đối tượng truy xuất trang web hiện hành $document =& JFactory::getDocument(); •Tạo đối tượng Editor – đối tượng dùng đề tạo các HTML Editor cho trang web. $editor =& JFactory::getEditor(); 15
16. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JRequest – Dùng để lấy giátrị cácthamsốgửitừclient về server – Cúpháp: JRequest::getVar( name,[default], [hash]) Giải thích: •name: tên tham số •default: giátrị mặc định •hash: get -> $_GET, post -> POST, file -> $_FILES, 16
17. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JRequest – Vídụ: lấymãkháchhàngtừURL achhang&makh=2 $makh= JRequest::getVar( 'makh', '-1'); Hoặc $makh = JRequest::getVar( 'makh', '-1', 'get'); 17
18. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JSession – Thamchiếu đếnSession $session =& JFactory::getSession(); – Lưugiátrị vàoSession $session->set('name', $value); – Đọcgiátrị từ Session $value = $session->get('name'); 18
19. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JDocument – JDocumentlà đốitượngchứathôngtin về trangweb. – Thamchiếu đếnJDocument $document =& JFactory::getDocument(); – Hiệuchỉnhtiêu đề trangweb $document->setTitle('tiêu đề'); 19
20. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JDocument – Thêmjavascriptvàotrangweb: •Thamchiếu đến1 file javascript: addScript(file_js) Vídụ: trongcom_khachhang, thamchiếu đếnfile script.js $document =& JFactory::getDocument(); $js= JURI::base().'components/com_khachhang/js/script.js'; $document->addScript($js); 20
21. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JDocument – Thêmjavascriptvàotrangweb: •Thamchiếu đến đoạncode javascript: addScriptDeclaration(chuoi_js) Vídụ: thamchiếu đến1 đoạncode javascriptchứa hàmhello để xuấtracâuchào $document =& JFactory::getDocument(); $js= "functionhello(ho_ten){ alert('Chàobạn' + ho_ten); }"; $document->addScriptDeclaration($js); 21
22. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JDocument – Thêmcssvàotrangweb: •Thamchiếu đến1 file css: addStyleSheet(file_css) Vídụ: trongcom_khachhang, thamchiếu đếnfile csstênlàstyle.css $document =& JFactory::getDocument(); $css= JURI::base().'components/com_khachhang/css/style.css'; $document->addStyleSheet($css); 22
23. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JDocument – Thêmcssvàotrangweb: •Thamchiếu đến đoạncode css: addStyleDeclaration(chuoi_css) Vídụ: thamchiếu đến1 đoạncss địnhnghĩahình thứchiểnthị chocáccâuthôngbáo(màu đỏ) $document =& JFactory::getDocument(); $css= '.thong_bao{color:#FF0000}'; $document->addStyleDeclaration($css); 23
24. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JDocument – Cấuhìnhcácthẻ meta •getMetaData(name):lấythôngtin cácthẻ meta •setMetaData(name, value):gánthôngtin chocác thẻ meta Vídụ: $document =& JFactory::getDocument(); $keyword = 'tin tức, thể thao,vănhóa, giáodục'; $document->setMetaData('keywords',$keywords); 24
25. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JPathway – Đối tượng Pathway cho phép cấu hình thanh Pathway. – Tạo đối tượng Pathway global $mainframe; $pathway =& $mainframe->getPathway(); – Thêm 1 item vào $pathway: $pathway->addItem($title, [$link]); 25
26. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § JPathway – Vídụ: xử lý tạo pathway khi click vào chủ đề sách: global $mainframe; $pathway =& $mainframe->getPathway(); $pathway->addItem($tencd); 26
27. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § Cácxửlýkhác – Xuấtthôngbáo global $mainframe; $mainframe->enqueueMessage('nộidung thông báo', 'loai_thong_bao'); •Vớiloai_thong_bao= message hoặcnotice hoặc error 27
28. Bài5: Cáclớptiệních 33 CCáácc titiệệnn ííchch vvềề xxửử lýlý § Cácxửlýkhác – Di chuyển đếnmộturl $mainframe->redirect(url, [noi_dung_thong_bao], [loai_thong_bao]); •Vớiloai_thong_bao= message hoặcnotice hoặc error Vídụ: global $mainframe; $url= 'index.php?option=com_khachhang'; $mainframe->redirect($url); 28
29. Bài5: Cáclớptiệních 44 SSửử ddụụngng EEddiittoror § Hiểnthị Editor: – dùnghàmdisplay củaclass JEditor Vídụ: hiểnthị 2 editor cóname làeditor1 và editor2, cówidth=300, height=200 //truyxuất đốitượng $editor =& JFactory::getEditor(); //Hiểnthị cácEditor echo $editor->display('editor1', 'nộidung mặc địnhcủaeditor 1', '550', '400', '60', '20'); echo $editor->display('editor2', 'nộidung mặc địnhcủaeditor 2', '550', '400', '60', '20'); 29
30. Bài5: Cáclớptiệních 44 SSửử ddụụngng EEddiittoror § Lưu nộidung trênEditor vàoCSDL: – Vìlýdo bảomậtnêntrongform cósửdụng editor, sẽ códònglệnh đểđảmbảodữliệugửitừclient làcủaform – Vàtrướckhixửlýlưutrữởserver thì ở client, hàmxửlýbiếncốclick củanútSave, taphải thựchiện đoạncode sau: save( 'content' ); ?> 30
31. Bài5: Cáclớptiệních 44 SSửử ddụụngng EEddiittoror § Lưu nộidung trênEditor vàoCSDL: – LấydữliệutừEditor function save(){ JRequest::checkToken() or jexit( 'Invalid Token' ); //get data from request $post = JRequest::get('post'); $post['content'] = JRequest::getVar('content', '', 'post', 'string', JREQUEST_ALLOWRAW); //xử lýlưutrữ vàoCSDL } 31
32. Bài5: Cáclớptiệních 55 AAjjaxax vvớớii MMoooottoolsools fframrameewwoorkrk § Giớithiệu: – Mootoolslà1 javascriptframework – Sử dụngmootools, tasẽdễdànghơntrong việc ứngdụngcôngnghệ Ajax vàocáctrang web trongJoomla 32
33. Bài5: Cáclớptiệních 55 AAjjaxax vvớớii MMoooottoolsools fframrameewwoorkrk § Sử dụngmootoolstrongJoomla: – Bước1: Copy đoạncode sauvàotrangweb: $document =& JFactory::getDocument(); JHTML::_('behavior.mootools'); $js= "window.addEvent('domready', function() { $('form1').addEvent('submit', function(e) { new Event(e).stop(); this.send({ onSuccess: function(response, responseXML) { //xử lýkếtquả phảnhồitừserver ởđây //vídụ: cậpnhậtgiỏ hàng //$('gio_hang_so_tien').setHTML(response); }}); }); });"; $document->addScriptDeclaration($js); 33
34. Bài5: Cáclớptiệních 55 AAjjaxax vvớớii MMoooottoolsools fframrameewwoorkrk § Sử dụngmootoolstrongJoomla: – Bước2: xemlạithẻ form củaphầngiaodiện. Cácthuộctínhcầnxemlại: •name: xemcó đúngtênform màtasửdụng ở đoạncode trướckhông(có= form1?). •action: bắtbuộcphảicó. Quy địnhcomponent sẽ xử lýyêucầuvànộidung trả về làtext (format=raw) hoặcxml (format=xml) vídụ: action=index.php?option=com_sach&format=raw 34
35. Bài5: Cáclớptiệních VVíí ddụụ mmininhh hhọọaa vvềề MMoooottoolsools Xử lý ở Server Xử lý ở Client Click 35
36. Bài5: Cáclớptiệních 36