Bài giảng Phát triển phần mềm mã nguồn mở: Giới thiệu Drupal

Bài giảng Phát triển phần mềm mã nguồn mở: MVC cung cấp cho người học các kiến thức: MVC là gì, tổng quan về MVC, quan niệm, observer pattern. Mời các bạn cùng tham khảo nội dung chi tiết.

Giới thiệu Drupal

Phát triển phần mềm mã nguồn mở

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

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 Làm thêm

• Tạo menu item: "Thuốc" hiển thị các sản phẩmthuố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

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:

http://drupal.org/project/modules

• Sách:

– Drupal 7 Professional Development

– Drupal 7 Module Development

– User guides

– Developer guides

• API references

– 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

description = Block cua toi

package = Dai Hoc Sai Gon

core = 7.x

files[] = myblock.module

$block['subject'] = t("Myblock subject");

$block['content'] = '<b>Hello, world</b>';

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

'type' => MENU_NORMAL_ITEM, );

return $items;

}

4 Tạo page – page callback

day03.module: page call back

$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);

}

'title' => array(

'type' => 'varchar', 'length' => 256,

'not null' => TRUE, 'default' => '', 'description' => "Tựa sách", ),

4 Database – executes SQL query (1)

}

4 Database – executes SQL query (2)

->execute();

4 Database – executes SQL query (2)

->condition('book_id', 1, '=')

->execute();

4 Database – executes SQL queryhttp://api.drupal.org/api/drupal

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;

}

6 Tài liệu tham khảo

Drupal 7 Professional Development

Drupal 7 Module Development

6 Sử dụng theme tường minh

– 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', 'http://www.google.com');

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 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:\

<html>

<LINK href="css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>

<div id="mytabs-1">n?i dung 1</div>

<div id="mytabs-2">n?i dung 2</div>

<div id="mytabs-3">n?i dung 3</div>

6 Tạo theme

1 Info file

; $Id

name = day05

description = Học sử dụng Drupal Theme

package = Drupal 7 Learning

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 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’));