Phát triển phần mềm mã nguồn mở - Giới thiệu Drupal - Đại học Sài Gòn

Giới thiệu Drupal Phát triển phần mềm mã nguồn mở Nội dung • Cài đặt và sử dụng module • Tạo Estore • Phát triển thêm – Tạo module – CSDL và page – Form API – Theme Cài đặt Drupal • Cài IIS và CSDL (WampServer 2.0i) • Tạo CSDL, và admin account cho hệ thống. • Vào thư mục C:\wamp\www\, unzip nội dung file drupal-7.0.tar vào. Thêm module ubercart vào Drupal • Có module ubercart-7.x-3.0.tar • Có các module hỗ trợ: – ctools-7.x-1.0.tar – entity-7.x-1.0-rc1.tar – rules-7.x-2.1.tar – views-7.x-3.3.tar • Đưa tất cả các module này vào thư mục: C:\wamp\www\drupal-7.0\sites\all\modules Menu structure của Drupal • Menu Structure giúp người quản trị quản lý cấu trúc giao diện, trong đó: – Blocks: Quản lý nội dung xuất hiện trên các vùng chính, hoặc các khối trên trang Drupal. – Content Types: Cấu hình loại trang nội dung có thể được tạo, cũng như loại thông tin có thể lưu trữ và cách thông tin đó hiển thị. Quản lý các thiết lập cho mỗi loại nội dung. – Menus: Kiểm soát định vị và các liên kết của các menu trên trang chính Drupal. – Triggers: Định nghĩa các luật ràng buộc các hành động. – Forums: tạo và quản lý diển đàn. 2. Tạo menu EStore • Vào menu Structure, nhấn Menus • Nhấn Add menu, nhập EStore • Chọn tab LIST LINKS, tạo menu item "Tất cả sản phẩm" (path: catalog) 2. Hiển thị menu lên màn hình • Vào menu Structure, nhấn Blocks. • Kiếm EStore, chọn Sidebar first • Ra trang chủ sẽ thấy menu mới 2. Tạo catalog (loại hàng) • Vào menu Store, chọn Catalog > Catalog • Nhấn Add term để thêm danh mục sản phẩm: – Thuốc, – Thực phẩm, – Đồ điện gia dụng 2. Tạo sản phẩm • Vào menu Content, nhấn Add contents, nhấn Products • Nhập tên sản phẩm, nhập hình, nhập giá cả • Ở mục catalog, chọn danh mục cho sản phẩm này. 2. Làm thêm • Tạo menu item: "Thuốc" hiển thị các sản phẩm thuốc (đường dẩn: catalog/x) • Tạo menu item: "Đồ điện gia dụng" hiển thị các sản phẩm điện gia dụng. (đường dẫn catalog/x) • Muốn biết đường dẩn thì vào menu item “Tất cả sản phẩm”, rê chuột lên từng loại sản phẩm để biết đường dẫn) 2. Chức năng tìm kiếm • Vào Configuration, tìm Search settings • Nhấn nút Reindex để tạo index • Vào Configuration, nhấn Cron, chạy Cron. 2. Cấu hình credit card security (xác định thư mục lưu khóa mã hóa) • Vào store > payment method • chọn settings của credit card • chọn tab security settings • nhập c:\wamp\key (tạo thư mục c:\wamp\key), nhấn Save Configuration Phát triển mã nguồn mở • Nên dùng Zend Studio để viết mã PHP. • Tham khảo các tài liệu của Drupal 3. Nguồn tài liệu tham khảo • Các modules: • Sách: – Drupal 7 Professional Development – Drupal 7 Module Development • Tài liệu: – User guides – Developer guides • API references 3. Nội dung cần đọc • Node là gì? Comment là gì? Entity là gì? • Drupal flow • Drupal theme • Drupal forms • Module là gì? Cách cài đặt và module được load lên như thế nào?Làm thế nào để phát triển module mới? 3. Drupal flow • Cách thức thông tin di chuyển giữa các tầng của hệ thống. – Tiếp nhận dữ liệu – Nơi module sống – Block thường là kết quả đầu ra của module hoặc những hiển thị do ta tạo – Cấp quyền – Site theme 3. Vd: module myblock • Tạo thư mục: C:\wamp\www\drupal- 7.0\sites\all\modules\custom\myblock • Tạo file myblock.info với nội dung: name = myblock description = Block cua toi package = Dai Hoc Sai Gon core = 7.x files[] = myblock.module 3. Vd: module myblock • Tạo file myblock.module <?php /* Implements hook_block_info */ function myblock_block_info() { $blocks['myblock'] = array( 'info' => t('Block cua toi'), ); return $blocks; } /* Implements hook_block_view */ function myblock_block_view($delta) { switch($delta){ case 'myblock': $block['subject'] = t("Myblock subject"); $block['content'] = 'Hello, world'; break; } return $block; } 3. Vd: module myblock • Vào menu Modules, cài module myblock • Vào menu Structures > Blocks, cài đặt hiển thị “Block cua toi” ở Sidebarfirst region 3. Bài tập • Tạo module timeblock: – Hiển thị ngày giờ hiện tại. • Hướng dẫn: – Phép toán nối chuổi: . – Hàm thời gian: date('Y-m-d, H:m:s') 4. Tạo page – hook_menu day03.module: hook_menu function day03_menu(){ $items = array(); $items['day03/book_list'] = array( 'title' => 'Books', 'description' => "Mua sách", 'page callback' => 'page_book_list', 'access callback' => TRUE, 'type' => MENU_NORMAL_ITEM, ); return $items; } 4. Tạo page – page callback day03.module: page call back function page_book_list(){ $bookTable = array( 'header' => array('Actions', 'Tựa sách', 'Tác giả', 'Giá'), 'rows' => array()); for($i = 0; $i < 10; $i++){ $link_remove = l( 'Remove', 'day03/book_remove', array('query' => array('bookid' => $i)) ); $bookTable['rows'][] = array( $link_remove, 'title ' . $i, 'author ' . $i, 'price ' . $i); } $link_add = l('Add new book', 'day03/book_add'); return $link_add . theme('table', $bookTable); } 4. Database - hook_schema day03.install: hook_schema function day03_schema() { $schema['book_store'] = array( 'description' => 'Kho sách', 'fields' => array( 'book_id' => array( 'type' => 'serial', 'unsigned' => TRUE, 'not null' => TRUE, 'description' => "book's id", ), 'title' => array( 'type' => 'varchar', 'length' => 256, 'not null' => TRUE, 'default' => '', 'description' => "Tựa sách", ), 4. Database – executes SQL query (1) QUERY $result = db_query( 'SELECT book_id, title, author, price FROM book_store WHERE title LIKE :title ORDER BY title', array(':title' => '%' . $search . '%')); foreach ($result as $record){ $bookTable['rows'][] = array( $record->title, $record->author, $record->price ); } 4. Database – executes SQL query (2) INSERT db_insert('book_store') ->fields(array( 'title' => 'Drupal 7 Module Development', 'author' => 'Không biết', 'price' => 5000000, )) ->execute(); 4. Database – executes SQL query (2) UPDATE $n = db_update('book_store') ->fields(array( 'title' => 'Drupal 7 FFFF Development', 'author' => 'Không biết', 'price' => 5000000, )) ->condition('book_id', 1, '=') ->execute(); 4. Database – executes SQL query DELETE db_delete('book_store') ->condition('book_id', 1, '=') ->execute(); 4. Bài tập • Tạo module day03 với các page sau: – day03/book_list: • Hiện danh sách các quyển sách mà nhà sách có • Có các button cho phép thêm/xoá danh mục sách – day03/book_add: – day03/book_remove: 5. Drupal Form – Tổng quát day04.module drupal_get_form('add_book_form'); function add_book_form($form, &$form_state) function add_book_form_validate($form, &$form_state); function add_book_form_submit($form, &$form_state) 5. Drupal Form function page_add_book(){ return drupal_get_form('add_book_form'); } 5. Drupal Form function add_book_form($form, &$form_state){ $form['title'] = array( '#title' => 'Tựa sách', '#type' => 'textfield', '#required' => TRUE, '#cols' => 10, '#default_value' => 'Book title'); $form['price'] = array( '#title' => 'Giá', '#type' => 'textfield', '#cols' => 6); $form['submit'] = array( '#type' => 'submit', '#value' => t('Submit'), ); return $form; } 5. Drupal Form function add_book_form_validate($form, &$form_state){ if (!is_numeric($form_state['values']['price'])){ form_set_error('price', 'Giá trị nhập không hợp lệ'); } } function add_book_form_submit($form, &$form_state){ // insert sách mới vào database drupal_set_message('Đã add sách vào database'); // redirect về trang khác $form_state['redirect'] = array('day03/book_list'); } 6. Tài liệu tham khảo Hướng dẫn sử dụng ở mức user Form API Các hàm của drupal Sách Drupal 7 Professional Development Drupal 7 Module Development 6. Sử dụng theme tường minh • theme_table($variables) $variables là một mảng chứa: – Phần tử ‘header’: chứa các header của bảng – Phần tử ‘rows’: các dòng của bảng. • theme_item_list($variables) $variables là một mảng chứa: – Phần tử ‘items’: danh sách các item – Phần tử ‘type’: loại danh sách: ‘ul’ ‘ol’. Vd: drupal_set_message(theme('item_list', array('items'=>array('Mot', 'Hai', 'Ba'), 'type'=>'ol'))); Sử dụng theme tường minh • theme_link($variables) $variable bao gồm: – ‘text’: link text – ‘path’: link url Vd: l('Google', ' Theme ngầm định Mặc dù không chỉ rõ ra, nhưng kết quả của hook_block_view sẽ được render bởi theme_block function hook_block_info() { $blocks*‘example'+ = array( 'info' => ‘example block’, 'cache' => DRUPAL_NO_CACHE, ); return $blocks; } function hook_block_view($delta = '') { switch ($delta) { case ‘example': $block*'subject'+ = ‘Vd về block’; $block*'content'+ = ‘1 + 1 = 2’; return $block; } } Render element • Là một mảng các mảng chứa: – Mô tả cách render các giá trị – Các render element con – Đường dẫn tới các css và java script file khác. 6. Render element Page callback: day05_book_list(){ return array( ‘#type’ => ‘table’, ‘#header’ => array(‘col1’, ‘col2’, ‘col3’), ‘#rows’ => array( array(‘val11’, ‘val12’, ‘val13’), array(‘val21’, ‘val22’, ‘val23’)); } Page callback: day05_book_list(){ $output = array(); $output*‘form’+ = drupal_get_form(‘myform’); $output*‘bang’+ = array( ‘#type’ => ‘table’, ‘#header’ => array(‘col1’, ‘col2’, ‘col3’), ‘#rows’ => array( array(‘val11’, ‘val12’, ‘val13’), array(‘val21’, ‘val22’, ‘val23’)); $output*‘htmlData’+ = array( ‘#markup’ => ‘about us’, ); } 6. Bài tập • Tạo các page demo các theme của drupal – demo/theme/item_list • Dùng drupal form tạo form gồm 5 field – Field thứ nhất để user chọn loại danh sách: ul hoặc ol – Các field còn lại để user điền các item cho item list. • Và một button “Render”, khi user click render, dùng theme item_list để render danh sách lên màn hình. – demo/theme/link • Dùng drupal form tạo form gồm 2 field – Field thứ nhất chứa tên link – Field thứ hai chứa địa chỉ url của link • Và một button “Render”, khi user click vào button, dùng theme link để render link lên màn hình – demo/theme/breadcumb • Tương tự như demo/theme/item_list 6. JQuery • Là thư viện viết bằng java script. • Đơn giản hoá việc thao tác HTML DOM Tree jquery-1.5.1.min.js jquery-ui-1.8.12.custom.min.js 6. JQuery Widgets 6. Vd về JQuery Tạo file test.html ở ổ C:\ Tab1 Tab2 Tab3 n?i dung 1 n?i dung 2 n?i dung 3 $( "#mytabs" ).tabs() ; 6. Tạo theme 1. Info file ; $Id name = day05 description = Học sử dụng Drupal Theme package = Drupal 7 Learning version = VERSION core = 7.x files[] = day05.module engine = phptemplate scripts[] = js/jquery-1.5.1.min.js scripts[] = js/jquery-ui-1.8.12.custom.min.js stylesheets[all][] = css/ui-lightness/jquery-ui- 1.8.12.custom.css 6. Tạo theme 2. Đăng ký theme bằng cách implement hook_theme function day05_theme($existing, $type, $theme, $path){ return array( 'jquery_tabs' => array( 'variables' => array( 'id' => null, 'titles' => array(), 'contents' => array(), ), ), ); } 6. Tạo theme 3. Implement theme function function theme_jquery_tabs($variables){ $id = $variables['id']; $titles = $variables['titles']; $contents = $variables['contents']; //------------------------------------------------- // tab titles //------------------------------------------------- $output = ''; $output .= ""; $output .= ""; . return $output; } 6. Tạo theme 3. Hoặc tạo template file 6. Bài tập • Trong JQuery-UI có phương thức dialog dùng để hiện dialog. Các sử dụng như sau: • Tạo theme jquery_dialog sao cho: theme(‘jquery_dialog’, array(‘title’ => ‘Tiêu đề’, ‘content’ => ‘Nội dung’));