LẬP TRÌNH WEB CHUYÊN sâu với CMS JOOMLA bài 5

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 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 Giới thiệu Các tiện ích giao diện Các tiện ích xử lý Sử dụng Editor Ajax với Mootools framework Bài 5: Các lớp tiện ích Giới thiệu § Joomla cung cấp sẳn cho ta số class tiện ích Các class giúp ta hiển thị giao diện lập trình nhanh § Ví dụ: – class JHTML cung cấp phương thức giúp xử lý hiển thị giao diện như: bảng (grid), list (combobox, listbox), tooltip, datetimepicker, … – class JTable giúp cập nhật liệu mà không cần viết lệnh SQL Bài 5: Các lớp tiện ích Các tiện ích giao diện § Giới thiệu – Class JHTML cung cấp tiện ích giao diện – Để dùng class JHTML, ta phải tham chiếu đến file html.php chứa class này: jimport('joomla.html.html'); – Cú pháp chung: JHTML::_('type', ) type: loại control: grid, list, select, image, … type có thuộc tính kèm Bài 5: Các lớp tiện ích Các tiện ích giao diện § Giới thiệu – Class JHTML cung cấp tiện ích giao diện – Ví dụ: Hiển thị control chọn ngày: echo JHTML::_('calendar', null, 'ngay', 'ngay'); Bài 5: Các lớp tiện ích Các tiện ích giao diện § Hiển thị tooltip – Trước gọi hàm hiển thị tooltip, ta phải thực lệnh sau: JHTML::_('behavior.tooltip'); – Cú pháp: JHTML::_(tooltip, content, title); – Ví dụ: JHTML::_('behavior.tooltip'); echo JHTML::_('tooltip', 'Họ tên phải có kí tự', 'Họ tên'); Bài 5: Các lớp tiện ích Các tiện ích giao diện § Hiển thị định dạng ngày – Cú pháp: JHTML::_(date, value, [format]); – Ví dụ: hiển thị ngày hành theo định dạng ngày/tháng/năm $today = date('Y-m-d h:m:s'); echo JHTML::_('date', $today, '%d/%m/%Y'); Bài 5: Các lớp tiện ích Các tiện ích giao diện § Hiển thị ô nhập liệu ngày – Cú pháp: JHTML::_(calendar, value, name, id, [format]); – Ví dụ: hiển thị ngày gửi có giá trị mặc định ngày hành $today = date('d/m/Y'); $html_ngay = JHTML::_('calendar', $today, 'ngay', 'ngay', '%d/%m/%Y'); echo "Ngày gửi $html_ngay"; Bài 5: Các lớp tiện ích Các tiện ích giao diện § Hiển thị combobox section – Cú pháp: JHTML::_(list.section, name, [active], [javascript], [order]); Giải thích: - name: name combobox Ví dụ: cboSection - active: id section chọn - javascript: gọi hàm javascript để xử lý biến cố Ví dụ: onchange=cboSection_onchange() - order: biểu thức order by lệnh sql để xếp liệu, mặc định xếp theo cột ordering Bài 5: Các lớp tiện ích Các tiện ích giao diện § Hiển thị combobox section – Ví dụ: Hiển thị combobox chứa liệu bảng Section echo JHTML::_('list.section', 'mysection'); – Ví dụ: Hiển thị combobox section, mặc định chọn dòng có id=5, gọi hàm javascript để xử lý chọn echo JHTML::_('list.section', 'mysection', 5, 'onchange=mysection_onchange();'); 10 Bài 5: Các lớp tiện ích Các tiện ích xử lý § JDocument – Thêm css vào trang web: • Tham chiếu đến file css: addStyleSheet(file_css) Ví dụ: com_khachhang, tham chiếu đến file css tên style.css $document =& JFactory::getDocument(); $css = JURI::base().'components/com_khachhang/css/style.css'; $document->addStyleSheet($css); 22 Bài 5: Các lớp tiện ích Các tiện ích xử lý § JDocument – Thêm css vào trang web: • Tham chiếu đến đoạn code css: addStyleDeclaration(chuoi_css) Ví dụ: tham chiếu đến đoạn css định nghĩa hình thức hiển thị cho câu thông báo (màu đỏ) $document =& JFactory::getDocument(); $css = '.thong_bao{color:#FF0000}'; $document->addStyleDeclaration($css); 23 Bài 5: Các lớp tiện ích Các tiện ích xử lý § JDocument – Cấu hình thẻ meta • getMetaData(name): lấy thông tin thẻ meta • setMetaData(name, value): gán thông tin cho thẻ meta Ví dụ: $document =& JFactory::getDocument(); $keyword = 'tin tức, thể thao ,văn hóa, giáo dục'; $document->setMetaData('keywords', $keywords); 24 Bài 5: Các lớp tiện ích Các tiện ích xử lý § JPathway – Đối tượng Pathway cho phép cấu hình Pathway – Tạo đối tượng Pathway global $mainframe; $pathway =& $mainframe->getPathway(); – Thêm item vào $pathway: $pathway->addItem($title, [$link]); 25 Bài 5: Các lớp tiện ích Các tiện ích xử lý § JPathway – Ví dụ: xử lý tạo pathway click vào chủ đề sách: global $mainframe; $pathway =& $mainframe->getPathway(); $pathway->addItem($tencd); 26 Bài 5: Các lớp tiện ích Các tiện ích xử lý § Các xử lý khác – Xuất thông báo global $mainframe; $mainframe->enqueueMessage('nội dung thông báo', 'loai_thong_bao'); • Với loai_thong_bao = message notice error 27 Bài 5: Các lớp tiện ích Các tiện ích xử lý § Các xử lý khác – Di chuyển đến url $mainframe->redirect(url, [noi_dung_thong_bao], [loai_thong_bao]); • Với loai_thong_bao = message notice error Ví dụ: global $mainframe; $url = 'index.php?option=com_khachhang'; $mainframe->redirect($url); 28 Bài 5: Các lớp tiện ích Sử dụng Editor § Hiển thị Editor: – dùng hàm display class JEditor Ví dụ: hiển thị editor có name editor1 editor2, có width=300, height=200 //truy xuất đối tượng $editor =& JFactory::getEditor(); //Hiển thị Editor echo $editor->display('editor1', 'nội dung mặc định editor 1', '550', '400', '60', '20'); echo $editor->display('editor2', 'nội dung mặc định editor 2', '550', '400', '60', '20'); 29 Bài 5: Các lớp tiện ích Sử dụng Editor § Lưu nội dung Editor vào CSDL: – Vì lý bảo mật nên form có sử dụng editor, có dòng lệnh để đảm bảo liệu gửi từ client form – Và trước xử lý lưu trữ server client, hàm xử lý biến cố click nút Save, ta phải thực đoạn code sau: 30 Bài 5: Các lớp tiện ích Sử dụng Editor § Lưu nội dung Editor vào CSDL: – Lấy liệu từ 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ưu trữ vào CSDL } 31 Bài 5: Các lớp tiện ích Ajax với Mootools framework § Giới thiệu: – Mootools javascript framework – Sử dụng mootools, ta dễ dàng việc ứng dụng công nghệ Ajax vào trang web Joomla 32 Bài 5: Các lớp tiện ích Ajax với Mootools framework § Sử dụng mootools Joomla: – Bước 1: Copy đoạn code sau vào trang web: $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ết phản hồi từ server //ví dụ: cập nhật giỏ hàng //$('gio_hang_so_tien').setHTML(response); }}); }); });"; $document->addScriptDeclaration($js); 33 Bài 5: Các lớp tiện ích Ajax với Mootools framework § Sử dụng mootools Joomla: – Bước 2: xem lại thẻ form phần giao diện Các thuộc tính cần xem lại: • name: xem có tên form mà ta sử dụng đoạn code trước không (có = form1?) • action: bắt buộc phải có Quy định component xử lý yêu cầu nội dung trả text (format=raw) xml (format=xml) ví dụ: action=index.php?option=com_sach&format=raw 34 Bài 5: Các lớp tiện ích Ví dụ minh họa Mootools Xử lý Server Xử lý Client Click 35 Bài 5: Các lớp tiện ích 36 [...]... không? (mặc định Có) 11 Bài 5: Các lớp tiện ích 2 Các tiện ích về giao diện § Hiển thị list category – Ví dụ: Hiển thị combobox để chọn các category thuộc về section có id =5 echo JHTML::_('list.category', 'cboTheGioi', 5) ; – Ví dụ: Hiển thị listbox để chọn các category thuộc về section có id =5 echo JHTML::_('list.category', 'cboTheGioi', 5, '','','ordering', 3, false); 12 Bài 5: Các lớp tiện ích 2 Các... 'Ten_nha_xuat_ban'); 14 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử 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 Bài 5: Các lớp tiện ích... thiệu: – Mootools là 1 javascript framework – Sử dụng mootools, ta sẽ dễ dàng hơn trong việc ứng dụng công nghệ Ajax vào các trang web trong Joomla 32 Bài 5: Các lớp tiện ích 5 Ajax với Mootools framework § Sử dụng mootools trong Joomla: – Bước 1: Copy đoạn code sau vào trang web: $document =& JFactory::getDocument(); JHTML::_('behavior.mootools'); $js = "window.addEvent('domready', function() { $('form1').addEvent('submit',... $value = $session->get('name'); 18 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử lý § JDocument – JDocument là đối tượng chứa thông tin về trang web – Tham chiếu đến JDocument $document =& JFactory::getDocument(); – Hiệu chỉnh tiêu đề trang web $document->setTitle('tiêu đề'); 19 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử lý § JDocument – Thêm javascript vào trang web: • Tham chiếu đến 1 file javascript:... xuất đối tượng $editor =& JFactory::getEditor(); //Hiển thị các Editor echo $editor->display('editor1', 'nội dung mặc định của editor 1', '55 0', '400', '60', '20'); echo $editor->display('editor2', 'nội dung mặc định của editor 2', '55 0', '400', '60', '20'); 29 Bài 5: Các lớp tiện ích 4 Sử dụng Editor § Lưu nội dung trên Editor vào CSDL: – Vì lý do bảo mật nên trong form có sử dụng editor, sẽ có dòng... 'content' ); ?> 30 Bài 5: Các lớp tiện ích 4 Sử dụng Editor § Lưu nội dung trên Editor vào CSDL: – Lấy dữ liệu từ 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ưu trữ vào CSDL } 31 Bài 5: Các lớp tiện ích 5 Ajax với Mootools... $pathway->addItem($title, [$link]); 25 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử 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 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử lý § Các xử lý khác – Xuất thông báo global $mainframe; $mainframe->enqueueMessage('nội dung thông báo', 'loai_thong_bao'); • Với loai_thong_bao... $document->addScript($js); 20 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử lý § JDocument – Thêm javascript vào trang web: • Tham chiếu đến đoạn code javascript: addScriptDeclaration(chuoi_js) Ví dụ: tham chiếu đến 1 đoạn code javascript chứa hàm hello để xuất ra câu chào $document =& JFactory::getDocument(); $js = "function hello(ho_ten){ alert('Chào bạn ' + ho_ten); }"; $document->addScriptDeclaration($js); 21 Bài 5: Các... giá trị mặc định • hash: get -> $_GET, post -> POST, file -> $_FILES, … 16 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử lý § JRequest – Ví dụ: lấy mã khách hàng từ URL http://localhost /joomla/ index.php?option=com_kh achhang&makh=2 $makh = JRequest::getVar( 'makh', '-1'); Hoặc $makh = JRequest::getVar( 'makh', '-1', 'get'); 17 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử lý § JSession – Tham chiếu đến... loai_thong_bao = message hoặc notice hoặc error 27 Bài 5: Các lớp tiện ích 3 Các tiện ích về xử lý § Các xử lý khác – Di chuyển đến một url $mainframe->redirect(url, [noi_dung_thong_bao], [loai_thong_bao]); • Với loai_thong_bao = message hoặc notice hoặc error Ví dụ: global $mainframe; $url = 'index.php?option=com_khachhang'; $mainframe->redirect($url); 28 Bài 5: Các lớp tiện ích 4 Sử dụng Editor § Hiển thị ... 31 Bài 5: Các lớp tiện ích Ajax với Mootools framework § Giới thiệu: – Mootools javascript framework – Sử dụng mootools, ta dễ dàng việc ứng dụng công nghệ Ajax vào trang web Joomla 32 Bài 5: ... có id =5 echo JHTML::_('list.category', 'cboTheGioi', 5, '','','ordering', 3, false); 12 Bài 5: Các lớp tiện ích Các tiện ích giao diện § Hiển thị list tùy ý – Joomla hỗ trợ hiển thị list với nguồn... $editor->display('editor1', 'nội dung mặc định editor 1', '55 0', '400', '60', '20'); echo $editor->display('editor2', 'nội dung mặc định editor 2', '55 0', '400', '60', '20'); 29 Bài 5: Các lớp tiện ích Sử dụng Editor