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 này, 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 các 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ẻ <div> đã 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ó:
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ẻ <div> có ID là map_canvas để xác định vị trí đặt bản đồ.
$block['content'] = "<div id=\"map_canvas\" style=\"width:600px; height:400px\"></div>" . $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:
Hình 3.3.1.3.a. Giao diện tạo Block entry. (adsbygoogle = window.adsbygoogle || []).push({});
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 đồ.
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.
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, http://drupal.org/project/cck.
[6] Module Example, Karen Stevenson, http://www.lullabot.com/articles/creating- custom-cck-fields.
[7] Google Maps API Documentation, Google Inc,
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ỉ.
• 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.
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: (adsbygoogle = window.adsbygoogle || []).push({});
• 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.