Khóa luận Phát triển ứng dụng dịch vụ hướng vị trí trên nền Drupal

g. Dưới đây là bảng ký hiệu giữ chỗ và kiểu dữ liệu 
thay thế:
Hình 2.8.2. Bảng ký hiệu giữ chỗ trong truy vấn CSDL.
2.8.3 Lấy kết quả truy vấn
Có nhiều cách khác nhau để lấy kết quả truy vấn.
Lấy một giá trị: Nếu muốn kết quả trả về chỉ một giá trị thì có thể sử dụng hàm 
db_result().
38
$sql = "SELECT COUNT(*) FROM {node} WHERE type = 'blog' AND status = 
1";
$total = db_result(db_query($sql));
Trả về nhiều hàng: Với kết quả là một tập gồm nhiều hàm, hàm 
db_fetch_object() giúp chọn ra từng hàng để xử lý.
$sql = "SELECT * FROM {node} WHERE type = 'blog' AND status = 1";
$result = db_query(db_rewrite_sql($sql));
while ($data = db_fetch_object($result)) {
//code goes here
} 
Để nhận được kết quả là một mảng, chúng ta có thể sử dụng hàm 
db_fetch_array() thay cho db_fetch_object().
Giới hạn phạm vi kết quả: Với những truy vấn cho ra rất nhiều hàng, có thể giới 
hạn phạm số lượng như sau:
$sql = "SELECT * FROM {node} n WHERE type = 'blog' AND status = 1 
ORDER BY n.created DESC";
$result = db_query_range(db_rewrite_sql($sql), 0, 10);
Trong trường hợp này, hàm db_query_range() được sử dụng thay cho điều kiện 
LIMIT vì không phải tất cả CSDL đều hỗ trợ cú pháp LIMIT.
39
Chương 3: Xây dựng module tích hợp 
Google Maps vào Drupal
Với lý thuyết đã nêu ra ở những phần trên của khoá luận, chúng tôi sẽ ứng dụng 
vào thực tế bằng cách xây dựng một module cho Drupal. Module này có tên là Google 
Maps, có chức năng hiển thị bản đồ trên trang web.
Trước hết, chúng tôi sẽ giới thiệu sơ lược về dịch vụ Google Maps.
3.1 Giới thiệu về Google Maps
Google Maps (trước đây được gọi là Google Local) là một ứng dụng dịch vụ bản 
đồ web và công nghệ miễn phí được cung cấp bởi Google, có thể dùng để nhúng vào 
các trang web của bên thứ ba thông qua Google Maps API. Nó cho phép hiển thị bản 
đồ đường xá, đường đi cho xe đạp, cho người đi bộ hoặc xe hơi, và những địa điểm 
kinh doanh trong khu vực cũng như khắp nơi trên thế giới. (Theo wikipedia.org)
Địa chỉ chính thức của Google Maps: 
Google Maps cung cấp các cách thể hiện bản đồ khác nhau gồm có bản đồ 
ranh giới, bản đồ vệ tinh và bản đồ dạng 3 chiều. Giao diện của chương trình rất thân 
thiện với người dùng.
3.2 Nhúng bản đồ vào trang web
Việc nhúng bản đồ vào trang web được thực hiện Google Maps API. Người dùng 
không cần phải tìm kiếm và quản lý dữ liệu hay thiết lập máy chủ mà chỉ cần viết một 
ít đoạn mã JavaScript.
Với mỗi người phát triển, Google cung cấp một khoá API riêng. Khoá này có thể 
đăng ký miễn phí tại 
Mỗi khi muốn nhúng bản đồ của Google vào trang web, trong thẻ phải 
khai báo chèn file JavaScript:
<script src= 
type="text/javascript">
Trong đó, xyz được thay bằng khoá API. Lúc này, trang web có thể sử dụng các 
hàm và đối tượng được cung cấp trong API của Google Maps.
40
3.2.1 Tạo một bản đồ đơn giản
Thông thường, việc nhúng bản đồ trên một trang web được thực hiện bằng cách 
sử dụng một thẻ giữ chỗ và dùng JavaScript hiển thị bản đồ vào vị trí đó. Ví dụ:
var map = new GMap2(document.getElementById("map"));
//zoom levels 0-17+, 0 == world
map.setCenter(new GLatLng(39.754286, -104.994637), 16);
Ví dụ trên sẽ cho kết quả như sau:
Hình 3.2.1. Minh họa trang web tích hợp bản đồ Google Maps.
Phần bản đồ hiển thị được gán vào đối tượng map dựa vào toạ độ của điểm trung 
tâm.
Tài liệu chi tiết về các dịch vụ của Google Maps API cũng như tính năng cao cấp 
có thể tham khảo tại địa chỉ:  
41
3.2.2 Dịch vụ Geocoder - Chuyển đổi giữa địa chỉ và toạ độ
Google Maps API cung cấp một dịch vụ rất hữu ích là Geocoder, giúp xác định 
toạ độ tương đối khi biết một địa chỉ trên trên thế giới và ngược lại. Toạ độ phân tích 
được gồm Kinh độ (longitude) và Vĩ độ (latitude). Từ đó, chúng ta tạo ra được một đối 
tượng điểm và hiển thị lên bản đồ.
3.3 Xây dựng module Google Maps cho Drupal
Module mà chúng tôi xây dựng có chức năng hiển thị bản đồ số trong một khối 
đối với các bài viết dạng Blog. Mỗi bài viết tương ứng với một mảnh bản đồ riêng dựa 
vào thông tin địa chỉ chứa trong bài đó.
Trong quá trình xây dựng module naỳ, chúng tôi đã sử dụng lại 2 module do cộng 
đồng Drupal phát triển là module Content có trong gói CCK (Content Construction 
Kit) [5] và module Example fields [6]. Module Content cho phép người quản trị tạo 
cać kiểu nội dung mới. Module Example fields đươc̣ dùng để thêm các trường thông 
tin cho bài viết. Cả hai module này đều được phấn phối miễn phí.
Ý tưởng xây dựng module:
• Lấy node id của bài viết hiện tại.
• Truy vấn CSDL để lấy trường thông tin đã thêm vào.
• Sử dụng các giá trị ẩn trong form truyền dữ liệu vào JavaScript.
• Tạo đối tượng bản đồ GMap2 hiển thị vào trong thẻ đã khai báo.
• Tạo đối tượng chuyển đổi địa chỉ sang tọa độ GClientGeocoder.
• Truyền tọa độ nhận được vào một hàm tạo điểm trên bản đồ.
• Hiển thị bản đồ bằng cách đặt điểm vừa tạo làm trung tâm.
• Sử dụng chức năng đánh dấu địa điểm marker để chú thích điểm trên bản đồ.
Phần tiếp theo sẽ mô tả các đoạn mã mà tác giả khóa luận viết trong quá trình 
xây dựng module.
3.3.1 Module Google Maps
3.3.1.1 File .info
Nội dung file .info gồm có:
;$Id$
42
name = "Google Maps"
description = "Displays a Google Maps form in a block"
core = 6.x
php = 5.1
dependencies[] = content
Khai báo dependencies cho biết module Google Maps phụ thuộc vào module 
Content. Muốn module này hoạt động thì người quản trị phải bật module Content 
trong gói CCK.
3.3.1.2 File .module
File này sẽ triển khai hook_block() có sẵn trong Drupal để hiển thị bản đồ trong 
một khối.
function googlemaps_block($op='list', $delta=0, $edit=array()) {
return $block;
}
Giá trị trả về của hàm này là một mảng $block chứa tiêu đề (subject) và nội dung 
(content) của khối.
Để hiển thị bản đồ trong khối này, chúng tôi sẽ gán giá trị cho 
$block[‘content’] là một thẻ có ID là map_canvas để xác định vị trí đặt bản 
đồ.
$block['content'] = "<div id=\"map_canvas\" style=\"width:600px; 
height:400px\">" . $hAddr . $hTitle . $hInfo;
Khi đó JavaScript có thể tìm kiếm thành phần HTML thông qua ID và thay thế 
nội dung:
var map = new GMap2(document.getElementById("map_canvas"));
Để bản đồ chỉ hiển thị trong các bài viết, module thực hiện quá trình phân tích và 
kiểm tra địa chỉ URL của trang hiện tại. Nếu địa chỉ có chứa node/x thì đoạn mã hiển 
thị bản đồ sẽ được thực thi.
3.3.1.3 Tạo thêm trường thông tin cho bài viết
Để hiển thị các mảnh bản đồ khác nhau cho mỗi bài viết, chúng tôi sử dụng bộ 
xây dựng nội dung CCK để thêm một trường thông tin address vào kiểu nội dung 
Blog. Thực hiện tạo một mục có dạng Blog entry sẽ xuất hiện thêm một trường như 
trong hình:
43
Hình 3.3.1.3.a. Giao diện tạo Block entry.
Giá trị này được lưu trong CSDL và có thể lấy ra thông qua node ID.
$nid = (arg(0)=='node' && is_numeric(arg(1)))?arg(1):0;
$sql = "SELECT field_addr_value FROM content_type_blog WHERE nid 
= $nid";
Khi lấy được giá trị của trường này, module sẽ truyền qua JavaScript và sử dụng 
dịch vụ Geocoder của Google Maps API để phân tích ra tọa độ và hiển thị ra khung 
bản đồ.
44
Hình 3.3.1.3.b. Giao diện bài viết cùng với Block hiển thị bản đồ.
45
Kết luận
Trong khoá luận này, chúng tôi đã tìm hiểu và trình bày một số vấn đê ̀lý thuyết 
liên quan đến việc xây dựng module cho hệ quản trị nội dung Drupal. Dựa vào đó, 
chúng tôi đã thiết kế thành công một module dùng để nhúng bản đồ từ Google Maps 
vào mỗi bài viết kết hợp với hai module miễn phí là CCK [5] và Example fields [6]. 
Tuy nhiên, đây mới chỉ là bước đầu trong kế hoạch xây dựng một hệ thống tích hợp 
dịch vụ hướng vị trí vào website một cách hoàn thiện, đầy đủ tính năng.
Sau khi hoàn thành khoá luận, chúng tôi có ý định tiếp tục nghiên cứu và phát 
triển module đã trình bày ở trên và thêm các tính năng nâng cao như kết hợp với cơ sở 
dữ liệu ảnh chụp để để hiển thị đường phố, phong cảnh hay sử dụng hình ảnh 3 chiều 
tạo ra không gian ảo cho từng địa điểm, địa danh...
Chúng tôi hy vọng khoá luận đã đúc kết được một lượng kiến thức đủ để phục vụ 
cho việc tìm hiểu về Drupal cũng như xây dựng module một cách dễ dàng.
46
Tài liệu tham khảo
[1] David Mercer. Building powerful and robust websites with Drupal 6. PACKT 
Publishing, 2008.
[2] John K. VanDyk và Matt Westgate. Pro Drupal Development. Apress, 
2007.
[3] Matt Butcher. Learning Drupal 6 Module Development. PACKT 
Publishing, 2008.
[4] Scott Davis. Google Maps API v2 - Adding Where to your applications. The 
Pragmatic Bookshelf, 2006.
[5] Module CCK, Drupal Community, 
[6] Module Example, Karen Stevenson, 
custom-cck-fields.
[7] Google Maps API Documentation, Google Inc, 
47
Phụ lục A
A.1 Cài đặt module Google Maps
Bước 1: Copy thư mục googlemaps vào thư mục modules trong bộ cài đặt Drupal.
Bước 2: Bật các module liên quan gồm Content, Example fields và Google Maps trong 
trang quản trị.
Hình A.1.a. Bật các module trong trang quản trị.
Bước 3: Thêm trường thông tin Địa chỉ cho loại nội dung Blog entry. Vào 
Administer | Content management | Content types. Trong mục Blog entry chọn 
manage fields.
Thêm một trường mới với các thông tin sau:
• Label: Địa chỉ.
• Field name: field_addr.
48
• Type of data to store: Example field.
• Form element to edit the data: Example widget.
Sau khi thêm trường mới vào, cấu trúc một Blog entry sẽ có các trường sau:
Hình A.1.b. Các trường thông tin của Blog entry.
Đến đây, module đã sẵn sàng để sử dụng.
49
A.2 Chạy thử chương trình
Môi trường mà chúng tôi dùng để chạy thử module đã viết như sau:
• Hệ điều hành: Windows 7 Ultimate.
• Server: localhost
• Web server: Apache.
• SQL server: MySQL.
• Trình duyệt: Mozilla Firefox 3.6.3.
Tạo một Blog entry mới như sau:
Hình A.2.a. Tạo Blog entry mới để chạy thử chương trình.
Những thông số còn lại giữ nguyên. Nhấn Save. Kết quả nhận được là bài viết cùng 
với bản đồ như hình dưới.
50
Hình A.2.b. Kết quả chạy thử chương trình.
51