Luân văn-Website trường ĐH Công Nghệ phiên bản tiếng Anh trên thiết bị di động

n giao diện chỉnh sửa vocabulary được check, giao diện người dùng cho vocabulary được trình bày như là một trường văn bản (với JavaScript tự động hoàn chỉnh được kích hoạt), chứ không phải là vùng lựa chọn thả xuống của một vocabulary được kiểm soát. 1.2.6. Path Trong Drupal, một đường dẫn là phần cuối của URL duy nhất cho một chức năng cụ thể hoặc một phần của nội dung. Ví dụ, một trang có đầy đủ URL là đường dẫn là node/7. Nếu trang web sử dụng Clean URL, URL đầy đủ trong ví dụ này sẽ là đường dẫn vẫn là node/7. Vì bí danh URL hoàn toàn có thể thay thế những gì mà người dùng nhìn thấy như là URL, các đường dẫn được thảo luận tại đây (vẫn là cách mà Drupal quyết định nội dung nào để hiển thị) đôi khi được gọi là đường dẫn nội bộ. 15 Đường dẫn trong Drupal quan trọng vì nhiều màn hình configure trong khu vực admin sử dụng chúng. Ví dụ, khi đang thêm một mục mới cho một menu, cho Drupal biết trang nào mục menu phải trỏ đến bằng cách nhập đường dẫn đến trang. Đây là một số ví dụ về đường dẫn có thể tìm thấy trong một trang web Drupal:  node/7  taxonomy/term/6  admin/content/comment  user/login  user/3 Có một số cách để tìm đường dẫn đến một trang cụ thể trên một trang web Drupal. Bước đầu tiên là tìm URL của trang quan tâm:  Nếu đã biết làm thế nào để điều hướng đến các trang web, có thể đến đó và tìm các URL trong thanh URL của trình duyệt.  Cũng có thể di chuột qua một liên kết đến trang (như trong màn hình Administer hoặc màn hình Content ở Administer >> Content manager >> Content), và hầu hết các trình duyệt sẽ cho thấy URL trong phần status ở dưới cùng của cửa sổ trình duyệt.  Đối với các trang Taxonomy, có thể tìm thấy những URL trong trang quản lý Taxonomy. Nếu đang xem một danh sách term cho một vocabulary đặc biệt, mỗi term nên được liên kết đến một trang phân loại của nó. Di chuột qua liên kết hoặc thực hiện theo các liên kết để tìm URL của nó. URL tìm thấy có thể có nhiều hình thức:  [something] -- Trong trường hợp này, các [something] sau q=? là đường dẫn. Ví dụ, nếu URL là đường dẫn là node/7.  [something] hay [Drupal subdirectory] /[something] -- Trong trường hợp này, các [something] sau đường dẫn cơ bản của trang web Drupal là đường dẫn . Ví dụ, URL có thể là hoặc đường dẫn ở cả hai trường hợp đều là node/7. 16 1.2.7. User Có một vài bước liên quan đến cài đặt Drupal. Trong một số bước, thông tin "người dùng" là cần thiết cho một loại đặc biệt của "tài khoản". Một “người dùng” không liên kết với một cá nhân ở ba trong bốn kiểu người dùng được đề cập ở đây. Để giúp phân loại cho từng loại người dùng, câu hỏi cần đặt ra là "Ai ..." để ánh xạ “người dung” đến người thực sự. 1.2.7.1. Computer User Người cài đặt Drupal phải có quyền truy cập vào máy tính, nơi đặt bộ cài. Nếu cài đặt Drupal cục bộ trên máy tính của riêng mình, thì “computer user” là chính mình. Nếu cài đặt Drupal tại một máy chủ từ xa như một máy chủ web công ty, thì các tài khoản computer user có thể được gọi là một trong những cái sau đây (không phải là một danh sách đầy đủ):  Tài khoản đăng nhập web hosting  Đăng nhập FTP  Đăng nhập Cpanel  Đăng nhập Secure shell (SSH) Những người có liên quan đến computer user là ai? Trong một số trường hợp, như máy tính của riêng mình hay một số lần đăng nhập FTP, những “người dùng” này là những cá nhân. Trong trường hợp khác, chẳng hạn như một tài khoản đăng nhập web hosting hoặc Cpanel, một “người dùng” (hoặc “tài khoản”) tên/mật khẩu được sử dụng để đăng nhập vào để kiểm soát tài khoản và có thể được chia sẻ bởi nhiều người. 1.2.7.2. Database User Một cài đặt Drupal yêu cầu một cơ sở dữ liệu để chạy. (MySQL và PostgreSQL là các chương trình cơ sở dữ liệu tốt nhất hỗ trợ tương thích với Drupal). Các cơ sở dữ liệu thường có cơ chế kiểm soát truy cập và yêu cầu "người dùng" với các cho phép có quyền thay đổi cơ sở dữ liệu (thêm/xóa/sửa dữ liệu, tạo bảng biểu, vv.) Một cài đặt Drupal cần phải có toàn quyền kiểm soát cơ sở dữ liệu, do đó, khi bạn thiết lập một trang web mới của Drupal, bạn (hoặc công ty web hosting) tạo ra một database user với các đặc quyền đầy đủ và sau đó cho tên người dùng và mật khẩu để cài đặt Drupal để Drupal sẽ có toàn quyền kiểm soát cơ sở dữ liệu. Các thông tin database user được lưu trữ trong tập tin settings.php hoặc trong sites/default hoặc thư mục con khác nhau của các trang web trong trình cài đặt Drupal. 17 Database user là ai? “database user” không phải là người. Đây là một tài khoản tạo ra với các phần mềm cơ sở dữ liệu để cung cấp cho Drupal quyền kiểm soát cơ sở dữ liệu. 1.2.7.3. User/1 "User/1", còn được gọi là “bảo trì” tài khoản hoặc "siêu tài khoản người dùng" là tài khoản Drupal được nhắc nhở để tạo ra ngay sau khi đã cài đặt thành công một trang web Drupal mới. Tài khoản này là duy nhất cho trang web (nó không có bất cứ điều gì để làm với Drupal.org hoặc bất kỳ trang web khác). Tài khoản này khác với tất cả các người dùng khác trong một cài đặt Drupal bởi vì nó không có giới hạn quyền hạn ("quyền hạn" được gọi là "kiểm soát truy cập" trong Drupal 5 và trước đó). "User/1", trong Drupal 6 và trước đó, cũng là tài khoản duy nhất có thể khởi chạy các script update.php cần chạy sau khi nâng cấp phần mềm. User/1 là ai? User/1 không nên được liên kết với một cá nhân, mà là với người hoặc những người có trách nhiệm để giữ phần mềm được cập nhật trên trang web. Tốt nhất là tránh việc tạo ra nội dung trang web với user/1. Sở dĩ như vậy là vì nó lúng túng khi trách nhiệm bảo trì trang web được thực hiện bởi User/1 cần phải thay đổi cho một người mới nếu User/1 ban đầu đã viết nội dung vẫn còn cần phải được liên kết với họ. Các nội dung được viết bởi tác giả ban đầu sau đó được chỉ định cho một tài khoản người dùng mới. Tốt hơn là tạo tài khoản thứ hai ngay sau khi cài đặt thành công các trang web. 1.2.7.4. User/2 và tất cả những người dùng khác User/2 và tất cả người dùng đăng ký khác trên trang web Drupal, mỗi người dùng nên được kết hợp với một người cá nhân. Người sử dụng đăng ký có thể được giao cho vai trò, mà được quyền cho phép người dùng khác nhau truy cập khác nhau để quản lý trang web và thêm nội dung. 1.2.8. Hệ thống file Tìm hiểu về cấu trúc thư mục mặc định cài đặt Drupal sẽ cho biết một vài thông tin quan trọng như nơi nên đặt các module và giao diện tải về và làm thế nào để có cấu hình cài đặt khác nhau cho Drupal. Drupal mặc định có một cấu trúc thể hiện trong hình 1-5. 18 Hình 1-5. Cấu trúc thư mục mặc định của một bộ cài Drupal Thông tin chi tiết về mỗi thành phần trong cấu trúc thư mục như sau:  Thư mục includes chứa các thư viện cho các hàm phổ biến mà Drupal sử dụng.  Thư mục misc lưu JavaScript và các icon, hình ảnh cần thiết cho quá trình cài đặt Drupal. 19  Thư mục modules chứa các module nhân, với mỗi module trong thư mục của nó. Tốt nhất không nên đụng đến bất cứ thứ gì trong các thư mục này (hoặc bất kỳ thư mục nào khác ngoại trừ profiles và sites). Thêm module trong thư mục sites.  Thư mục profiles chứa những cấu hình cài đặt khác nhau cho một trang web. Nếu có những cấu hình khác ngoài cấu hình mặc định trong thư mục con này, Drupal sẽ hỏi muốn cài đặt theo cấu hình nào khi lần đầu cài đặt Drupal. Mục đính chính của một cấu hình cài đặt là bật các nhân mặc định và các module liên quan một cách tự động. Ví dụ một cấu hình e-commerce sẽ tự động cài đặt Drupal như một nền tảng e-commerce.  Thư mục scripts chứa những script cho việc kiểm tra cú pháp, tối ưu code, chạy Drupal từ dòng lệnh, và điều khiển các trường hợp đặc biệt với cron.  Thư mục sites chứa những sửa đổi Drupal trong cài đặt, module và giao diện. Khi thêm những module cho Drupal từ nguồn các module đóng gói hoặc tự viết, chúng sẽ được đặt trong sites/all/modules. Nó giữ tất cả những thay đổi của Drupal trong một thư mục đơn. Trong thư mục sites sẽ có một thư mục con có tên là default lưu những cài đặt mặc định cho trang Drupal – default.settings.php. Bộ cài Drupal sẽ sửa những cài đặt ban đầu này dựa trên thông tin cung cấp và viết trong file settings.php. Thư mục mặc định thường được sao chép và đổi tên thành URL của trang web bởi người quản trị, do đó những file cài đặt cuối cùng sẽ nằm ở sites/www.example.com/settings.php. Hình 1-6. Thư mục sites có thể lưu toàn bộ sửa đổi Drupal  Thư mục sites/default/files không được tạo bởi Drupal theo mặc định, nhưng nó sẽ cần thiết cho việc lưu bất kỳ file nào được upload lên trang web và 20 cung cấp một cách tuần tự. Một vài ví dụ là sử dụng một logo tùy biến, bật chức năng user avatar, hoặc upload bất kỳ kiểu dữ liệu media khác. Thư mục con này yêu cầu quyền đọc và ghi bởi web server mà Drupal đang chạy trên nó. Bộ cài đặt Drupal sẽ tạo ra thư mục con này nếu có thể và sẽ kiểm tra quyền truy cập chính xác đã được thiết lập hay chưa.  Thư mục themes chứa các template engine và các giao diện mặc định cho Drupal. Các giao diện tải về hoặc tự tạo không nên để ở đây, nên để trong sites/all/themes.  cron.php được sử dụng để thực hiện nhiệm vụ định kỳ, chẳng hạn như các bảng cơ sở dữ liệu và cắt tỉa tính toán thống kê.  index.php là điểm chính phục vụ yêu cầu.  install.php là điểm chính cho trình cài đặt Drupal.  update.php cập nhật mô hình cơ sở dữ liệu sau khi một phiên bản Drupal được cập nhật.  xmlrpc.php nhận yêu cầu XML-RPC và có thể xóa một cách an toàn việc triển khai mà không có yêu cầu XML-RPC.  robots.txt là bộ thực thi mặc định của robot loại trừ tiêu chuẩn. 1.3. Hệ thống module Drupal là framework thật sự hướng module. Chức năng được bao gồm trong các module, có thể được kích hoạt hay vô hiệu hóa (một số module cần thiết không thể bị vô hiệu hóa). Các tính năng được thêm vào một trang web Drupal bằng cách bật các module hiện có, cài đặt module được viết bởi các thành viên của cộng đồng Drupal, hoặc viết module mới. Bằng cách này, các trang web mà không cần tính năng nhất định có thể chạy, trong khi những cái cần nhiều hơn có thể thêm nhiều tính năng như mong muốn. Điều này thể hiện trong hình 1-3. Sự bổ sung các loại nội dung mới như công thức nấu ăn, blog post, hoặc các file, và thêm các hành vi mới như e-mail thông báo, peer-to-peer publishing, tập hợp và được xử lý thông qua các module. Drupal làm cho việc sử dụng đảo ngược của mẫu thiết kế điều khiển, trong đó chức năng module được gọi bởi framework tại thời điểm thích hợp. 21 Hình 1-7. Việc kích hoạt các module bổ sung cho nhiều chức năng hơn 1.3.1. Các module hệ thống  Aggregator: Aggreagator có khả năng đi lấy tin RSS từ các website khác, lưu lại trong CSDL, rồi trình bày ra giao diện người dùng. Các nguồn tin RSS có thể được phân mục theo 'Category'.  Block : Block (danh từ) là một phần trong Drupal, chúng ta có thể xem, mỗi block là một khối nội dung bao gồm các thuộc tính:  Blog : Khi module này được webmaster kích hoạt, người sử dụng website có thể tạo các blog entry cho mình. Thí dụ, user 'ABC' có mã số thành viên là 13, thì sẽ liệt kê các blog entries của user 'ABC' này. 22  BlogAPI: Khi người dùng website của bạn dùng một công cụ nào đó để tạo một blog entry từ xa (qua Google Docs chẳng hạn). BlogAPI sẽ đứng ra đảm nhận vai trò trung gian -- nhận dữ liệu, lưu vào CSDL.  Book: Với module này, người dùng có thể tạo các trang nội dung có đánh chỉ mục rõ ràng. Module này rất thích hợp để làm brochure, tài liệu hướng dẫn, ... Hiện tại module này cần được cải tiến nhiều để đáp ứng nhu cầu thực tế.  Color: Được giới thiệu trong Drupal phiên bản 5.x với mục đích tạo ra bộ theme Garland uyển chuyển.  Comment: Khi xem một trang nội dung (node, như một blog entry, một article chẳng hạn), người xem có thể gửi ý kiến phản hồi của mình. Module này rất cần cho các website cần tương tác từ phía người dùng.  Contact: Người dùng có thể gửi mail cho người quản lý website hay cho một thành viên nào đó của website nhờ chức năng mà module này cung cấp.  Drupal: Module này cung cấp khả năng đăng nhập liên website. Giả sử website 1 và website 2 cùng sử dụng module Drupal, thì thành viên của website 1 có thể đăng nhập ở website 2 và ngược lại.  Filter: Module này cung cấp các phương thức trình bày khác nhau trên cùng một trường dữ liệu.  Forum: Tạo diễn đàn thảo luận cho website.  Help: Các module có phần trợ giúp người dùng, tuy nhiên chỉ khi bật module help lên thì người điều hành mới có thể xem được phần này.  Legacy: Module legacy cung cấp cho việc nâng cấp từ bản cài đặt cũ. Những xử lý giúp các tham chiếu tự động chuyển hướng đến các trang từ bản cài đặt cũ và ngăn chặn trang không tìm thấy lỗi cho trang web của bạn. 1.3.2. Các module đóng gói quan trọng 1.3.2.1. CCK (Content Construction Kit) Trong Drupal mọi thứ đều là node. Tuy nhiên thực tế có những thứ cần lưu nhiều thông tin hơn node và vì thế có một khái niệm mới đó là kiểu nội dung. Kiểu nội dung là node nhưng có bổ xung thêm một số trường để lưu thêm thông tin. Ví dụ trong bài viết bình thường có tiêu đề và nội dung. Tuy nhiên trong một số bài viết cấp cao hơn như trang tin tức cần đưa thêm ảnh cho bài viết, rồi trường video quảng cáo, câu hỏi 23 thăm dò, … lúc này có được một kiểu nội dung mới tên là trang tin chẳng hạn. Thì trang tin chính là một kiểu nội dung và đi tới hai kết luận: Kiểu nội dung là node nhưng bổ sung thêm một số trường thông tin khác. Việc bổ xung thêm trường thông tin khác này người ta gọi là mở rộng kiểu nội dung. Dễ thấy mô hình node và kiểu nội dung giống như kế thừa trong lập trình hướng đối tượng. Chúng ta có lớp cha cơ bản nhất và lớp con chỉ cần bổ xung thêm thông tin từ cha là có một kiếu lớp mới. Các kiểu nội dung bản chất là node. Tuy nhiên trong node có một trường khá quan trọng đi cùng với title và body đó là trường “type”. Trường “type” này giúp phân biệt các kiểu nội dung và node với nhau. Giữa node và kiểu nội dung khác nhau bởi các trường dữ liệu bổ xung do đó việc bổ xung này gọi là mở rộng kiểu nội dung. Và chúng ta cần có cơ chế mở rộng kiểu nội dung. Thực tế có hai cách cơ bản:  Cách thứ nhất là viết code mở rộng cho kiểu nội dung này. Cách này chính là cách viết module cho việc thực hiện việc này.  Cách thứ hai là có một module thực hiện việc làm này một cách trực quan mà chỉ cần khai báo mà thôi đó chính là CCK. CCK giúp kiến tạo ra các nội dung khác nhau. Trong Drupal các CCK có rất nhiều. Ví dụ: trường ảnh, trường video, trường link, … Có rất nhiều các loại CCK giúp tạo ra đủ các loại nội dung khác nhau theo ý thích. Đó là vai trò của CCK, CCK giúp mở rộng kiểu nội dung. 1.3.2.2. Views Views là một bộ lọc có vai trò lọc và trình bày nội dung. Vai trò của Views gồm hai phần đó là lọc và trình bày nội dung.  Lọc nội dung: View giúp lọc các kiểu nội dung theo một số điều kiện đặt ra. Ví dụ cần lấy ra 6 bài viết mới nhất hoặc lấy ra các bài viết thuộc chủ đề “tin thế giới’. Đó là vai trò chính của Views.  Hiển thị nội dung: Sau khi lọc các nội dung ra, có được danh sách các nội dung cần hiển thị. Tuy nhiên muốn trình bày các kiểu nội dung này theo các cách khác nhau. Ví dụ muốn trình bày dạng bảng các nội dung, hoặc danh sách các nội dung. Vai trò thứ hai của Views là trình bày các nội dung đã lọc ra được. Việc lọc các nội dung thì module Views đã hỗ trợ đầy đủ và việc hiển thị module này cũng đã hỗ trợ 4 dạng hiển thị cơ bản. Tuy nhiên để tạo cách trình bày nội dung 24 phong phú có thể tải thêm các module Views bổ xung khác phục vụ việc trình bày nội dung thật đẹp ví dụ như module Views Slideshow, Views Tab, … 1.3.2.3. Panels Panels giúp chia nhỏ phần nội dung thành các vùng bé hơn. Drupal trình bày giao diện thành các vùng để chứa các block - block là các phần nội dung. Thường thì một theme của drupal có một số vùng cơ bản: header, footer, content, sidebar left, sidebar right. Các vùng này bao quanh vùng nội dung. Ngoài ra có thể thêm nhiều vùng vào theme tùy ý đó chính là sự uyển chuyển của Drupal. Tuy nhiên, như các trang báo chia vùng nội dung (vùng content) thành các phần nhỏ hơn để tiện trình bày. Ví dụ họ chia vùng content thành cột trên đầu chứa tin nóng, hai cột hai bên chứa các block có các bài viết được phân loại. Panels giúp chia phần nội dung thành các phần nhỏ hơn và trên mỗi phần đó chứa các block nội dung. 1.4. Hệ thống giao diện 1.4.1. Tổng quan về phát triển giao diện Từ phiên bản 4.5, hệ thống giao diện của Drupal đã trở nên rất uyển chuyển. Cấu trúc mới được giới thiệu, giúp cho việc kết hợp các thành phần tạo nên một giao diện, trở nên rất đơn giản: bộ máy giao diện, các khuôn mẫu, các mảng định dạng và các đoạn mã PHP. Từ phiên bản Drupal 4.7, bộ máy giao diện được mặc định kèm theo với Drupal là PHPTemplate. Giao diện là một khái niệm trừu tượng, mỗi giao diện có thể được hình thành bằng các cách khác nhau:  Từ (các) tập tin khuôn mẫu (.tpl.php, .xhtml) cho một bộ máy giao diện (PHPTemplate, XTemplate). Thí dụ: Garland, Bluemarine.  Từ (các) mảng định dạng, nếu như giao diện là một giao diện kế thừa. Thí dụ: Minelli, Marvin.  Từ tập tin .theme mã nguồn PHP chứa các hàm quá tải lên các hàm tạo giao diện ban đầu (theme_*). Thí dụ: Chameleon. Cấu trúc thư mục của của các giao diện mặc định kèm theo của hệ thống: themes/engines/phptemplate/phptemplate.engine themes/garland/page.tpl.php 25 themes/garland/style.css themes/garland/minelli/style.css themes/bluemarine/page.tpl.php themes/bluemarine/style.css themes/chameleon/chameleon.theme themes/chameleon/style.css themes/chameleon/marvin/style.css Giao diện và các khuôn mẫu được đặt trong thư mục con của chúng, nằm dưới thư mục themes. Đối với các giao diện được đóng gói, nên được đặt dưới thư mục sites/all/themes. Các máy giao diện sẽ quét mỗi thư mục con để tìm các tập tin khuôn mẫu (.tpl.php, .xtmpl). Nếu một thư mục có tồn tại tập tin style.css thì thư mục con đó cũng được xem như một giao diện hợp lệ. Có thể tạo ra những giao diện chỉ bao gồm CSS bằng cách tạo ra thư mục con trong một thư mục của một giao diện nào đó, sau đó, tạo một tập tin style.css ở trong thư mục con vừa tạo. Đây là cách mà hai giao diện Minelli và Marvin được xây dựng. Mỗi giao diện cần có một tập tin screenshot.png trong thư mục của nó, Drupal sẽ trình bày ảnh chụp này ở màn hình quản lý giao diện. 1.4.2. Regions Đối với một trang web Drupal điển hình với cấu trúc 3 cột, mặc định sẽ có 5 regions: - Header: thường bao gồm các thông tin về trang web như tên, logo, slogan, banner, v.v. - Left sidebar và Right sidebar: thường là vị trí của các block - Content: nội dung của các node - Footer: thường gồm thông tin về bản quyền hay các liên kết hữu ích khác 26 Hình 1-8. Các regions mặc định của một trang web Drupal 1.4.3. Hệ thống file trong giao diện Một giao diện là tập hợp các file xác định các tầng trình diễn hoặc "look and feel" của một trang web Drupal. Với một giao diện, có thể: - Định nghĩa một hoặc nhiều regions trong trang - Xác định cách hiển thị các hình ảnh và thành phần đồ họa khác - Xác định cách hiển thị các văn bản cố định hoặc thay đổi - Xác định các thuộc tính của phông chữ và đồ họa - Ghi đè (thay đổi) output của các module Một giao diện có thể được cấu hình để tự động đáp ứng với những thay đổi trong nội dung, các loại nội dung, người sử dụng, quyền của người sử dụng vv Một giao diện cũng có thể được sử dụng để ghi đè (sửa đổi hoặc thay thế) các văn bản và các biến được tạo ra bởi các module. Ví dụ, một giao diện có thể được sử dụng để thay thế các nhãn mặc định vào nút Tìm kiếm hoặc để ẩn và hiển thị các lĩnh vực nhất định là một phần của một loại nội dung cụ thể. Có thể ghi đè lên các lớp CSS mặc định mà có thể xuất hiện trong nội dung của trang web. 27 Thường thì một giao diện được sử dụng đơn giản chỉ để xác định look and feel của toàn bộ trang web, nhưng nó cũng có thể được sử dụng để tùy chỉnh giao diện của một phần nhất định của trang web, một số loại nội dung, và thậm chí cả các nút riêng lẻ hoặc các trang. Ví dụ, giao diện có thể chỉ định một giao diện khác cho trang chủ. Hình 1-9. Các file trong một giao diện thông thường và giao diện con 1.4.4. Các file template 1.4.4.1. page.tpl.php page.tpl.php là cha của tất cả các file template và cung cấp cách bố trí tổng thể của trang web. Những file template khác được chèn vào page.tpl.php như sơ đồ sau: 28 Hình 1-10. Những file template khác được chèn vào page.tpl.php Việc chèn block.tpl.php và node.tpl.php được thực hiện một cách tự động bởi hệ thống giao diện trong quá trình xây dựng trang. Khi tạo một file page.tpl.php thì biến $content chứa output của node.tpl.php và $left (hoặc $right) chứa output của block.tpl.php. Các biến trong page.tpl.php:  $base_path: Đường dẫn cơ bản của bộ cài Drupal, mặc định nó luôn để ở / nếu Drupal được cài đặt trong thư mục gốc.  $body_classes: một xâu định danh của tên lớp CSS sẽ được sử dụng trong phần body. Những lớp này sau đó có thể được sử dụng để tạo ra những giao diện thông minh hơn. 29  $breadcrumb: trả về HTML để hiển thị thanh định hướng breadcrumb trong trang web.  $closure: trả về output của hàm hook_footer() và do đó thường được hiển thị ở cuối trang, ngay trước thẻ đóng body. hook_footer() được sử dụng để cho phép các module chèn HTML hoặc JavaScript ở cuối trang.  $content: trả về HTLM nội dung sẽ được hiển thị. Ví dụ thêm một node, một tập các node, nội dung của giao diện quản lý, v.v..  $css: trả về một mảng cấu trúc của tất cả các file CSS sẽ được thêm vào trang web. Sử dụng $styles cho phiên bản HTML của mảng $css.  $directory: đường dẫn đến thư mục chứa giao diện, chẳng hạn themes/bluemarine hoặc sites/all/themes/custom/grayscale. Biến này thường được sử dụng kết hợp với biến $base_path để xây dựng đường dẫn tuyệt đối đến giao diện của trang web.  $feed_icon: trả về các đường dẫn RSS feed của trang web. Đường dẫn RSS feed được thêm thông qua hàm drupal_add_feed().  $footer: trả về HTML cho vùng footer, bao gồm cả HTML cho những block thuộc vùng này. Đừng nhầm nó với hook_footer(), hàm Drupal hook cho phép các module thêm HTML hoặc JavaScript sẽ xuất hiện trong biến $closure ngay trước thẻ đóng body.  $footer_message: trả về footer được nhập ở Administer > Site configuration > Site information.  $front_page: output của hàm url() không có tham số, chẳng hạn /drupal/. Sử dụng $front_page thay vì $base_path khi nối đến trang chủ của một trang web vì $front_page sẽ thêm vào tên miền ngôn ngữ và tiền tố khi có thể.  $head: trả về HTML sẽ được hiển thị trong thẻ . Các module chèn thêm vào $head bằng cách gọi hàm drupal_set_html_head().  $head_title: văn bản sẽ được hiển thị trong tiêu đề của trang web, giữa thẻ HTML . Nó được gọi bởi hàm drupal_get_title().  $header: trả về HTML cho vùng header, bao gồm cả HTML cho các block thuộc vùng này. 30  $help: văn bản giúp đỡ, thường được dùng cho các trang quản trị. Các module có thể sử dụng biến này để thi hành hook_help().  $is_front: TRUE nếu trang chủ đang được hiển thị.  $language: một đối tượng lưu những đặc tính của ngôn ngữ trang web hiển thị. Chẳng hạn, $language->language có thể là en, và $language- >name có thể là English.  $layout: biến này cho phép thiết kế nhiều kiểu bố trí khác nhau và giá trị của $layout tùy thuộc vào số sidebar được bật. Các giá trị có thể là none, left, right và both.  $left: trả về HTML của sidebar bên trái, bao gồm cả HTML của các block thuộc vùng này.  $logged_in: TRUE nếu người dùng hiện tại đã đăng nhập, ngược lại là false.  $logo: đường dẫn đến logo, được định nghĩa trong trang cài đặt giao diện của các theme đã bật.  $message: biến này trả về HTML cho việc xác thực lỗi, thông báo thành công cho các form, và những thông báo khác. Nó thường được hiển thị ở đầu trang.  $mission: trả về nhiệm vụ trang web được nhập ở Administer > Site configuration > Site information. Biến này chỉ được hiển thị khi $is_front có giá trị TRUE.  $node: toàn bộ đối tượng node, được dùng khi hiển thị một trang node.  $primary_links: một mảng chứa các liên kết chính được định nghĩa ở Administer > Site buildings > Menus. Thông thường $primary_links được thiết kế thông qua hàm theme(‘links).  $right: trả về HTML cho sidebar bên phải, bao gồm cả HTML cho các block thuộc vùng này.  $scripts: trả về HTML cho việc thêm thẻ cho trang web. Đây cũng là cách jQuery được tải lên. 31  $search_box: trả về HTML cho form tìm kiếm. $search_box rỗng khi admin tắt hiển thị trong trang cài đặt những giao diện đã được bật hoặc tắt module tìm kiếm.  $secondary_links: một mảng chứa những liên kết phụ được định nghĩa ở Administer > Site building > Menus. Thông thường $secondary_links được thiết kế thông qua hàm theme(‘links’).  $show_blocks: đây là một tham số cho hàm gọi giao diện theme(‘page’, $content, $show_blocks, $show_messages). Nó được đặt giá trị mặc định là TRUE; khi $show_blocks có giá trị FALSE biến $blocks hiển thị sidebar bên trái và bên phải được đặt thành xâu rỗng, cấm hiển thị block.  $show_messages: đây là một tham số cho hàm gọi giao diện theme(‘page’, $content, $show_blocks, $show_messages). Nó được đặt giá trị mặc định là TRUE; khi $show_messages có giá trị FALSE biến $messages được đặt thành xâu rỗng, cấm hiển thị thông báo.  $site_name: tên của trang web, được thiết lập ở Administer > Site configuration > Site information. $site_name rỗng khi admin tắt hiển thị trong trang cài đặt những giao diện đã bật.  $site_slogan: khẩu hiệu của trang web, được thiết lập ở Administer > Site configuration > Site information. $site_slogan rỗng khi admin tắt hiển thị khẩu hiệu trong trang cài đặt những giao diện đã bật.  $styles: trả về HTML cho việc lấy những file CSS cần thiết của trang web. Những file CSS được thêm vào biến $styles qua hàm drupal_add_css().  $tabs: trả về HTML cho việc hiển thị các tab như View/Edit cho các node. Các tab thường nằm ở đầu trang trong các giao diện của nhân Drupal.  $template_files: đề xuất tên của các file template có thể dùng để hiển thị trang web. Các tên thiếu phần mở rộng của file, chẳng hạn, page-node, page- front.  $title: Tiêu đề của nội dung chính, khác với $head_title. Khi hiển thị một node, tiêu đề của trang chính là tiêu đề của node. Khi hiển thị các trang quản trị của Drupal, $title thường được thiết lập bởi menu tương ứng với trang đang được hiển thị. 32 Kể cả khi không xuất ra các biến region ($header, $footer, $left, $right) trong page.tpl.php, chúng vẫn được xây dựng. Đây là vấn đề thực thi vì Drupal làm tất cả những việc xây dựng block chỉ để ném nó ra trang hiển thị. Nếu các file page tùy chọn không yêu cầu các block, cách tiếp cận tốt hơn chạy các biến từ file template là vào giao diện quản trị block và tắt hiển thị những block này trong trang tùy chọn. 1.4.4.2. node.tpl.php Các node template chịu trách nhiệm điều khiển những phần riêng lẻ của nội dung hiển thị trong một trang. Hơn là ảnh hưởng đến toàn bộ trang, các node template chỉ ảnh hưởng đến biến $content trong page.tpl.php. Chúng chịu trách nhiệm việc trình diễn các node trong teaser view (khi nhiều node được liệt kê trong một trang) và trong body view (khi node điền toàn bộ biến $content trong page.tpl.php và đứng một mình trong trang của nó). Biến $page trong một file node template sẽ có giá trị TRUE khi đang ở body view hoặc FALSE nếu đang ở teaser view. Các biến trong node.tpl.php:  $build_mode: một số thông tin về ngữ cảnh mà các node đang được xây dựng trong đó. Giá trị sẽ là một trong những hằng sau: NODE_BUILD_NORMAL, NODE_BUILD_PREVIEW, NODE_BUILD_SEARCH_INDEX, NODE_BUILD_SEARCH_RESULT hoặc NODE_BUILD_RSS.  $content: body của node hoặc teaser nếu đó là một trang kết quả hiển thị.  $date: ngày mà node được tạo đã được định dạng. Có thể chọn một định dạng khác bằng cách sử dụng biến $created, chẳng hạn, format_date($created, ‘large’).  $links: liên kết dẫn đến một node, như “Read more” và “Add a new comment”. Các module thêm liên kết ngoài bằng cách thi hành hook_link(). Các liên kết đã được thiết kế thông qua theme_links().  $name: tên đã được định dạng của người dùng là tác giả của trang, liên kết đến profile của họ.  $node: toàn bộ đối tượng node và thuộc tính của nó.  $node_url: đường dẫn URL của node, chẳng hạn, với đường dẫn giá trị của biến sẽ là /node/3. 33  $page: TRUE nếu node được hiển thị bởi chính nó như một trang. FALSE nếu đang hiển thị một danh sách các node.  $picture: nếu tùy chọn “User pictures in posts” được chọn ở Administor > Site building > Themes > Configure và tùy chọn “Display post information on” cho kiểu node này được chọn trong cài đặt giao diện toàn cục, output của theme(‘user_pictures’, $node) sẽ ở trong $picture.  $taxonomy: một mảng của taxonomy term của node trong một định dạng phù hợp với việc truyền vào hàm theme_links(). Trên thực tế, output của theme_links() có thể dùng trong biến $terms.  $teaser: giá trị nhị phân để xác định có hiển thị teaser hay không. Biến này có thể được sử dụng để xác định $content chứa node body (FALSE) hay teaser (TRUE).  $title: tiêu đề của node, cũng sẽ là một liên kết đến trang hiển thị node body khi ở trong một trang liệt kê các node. Nội dung của tiêu đề phải được truyền qua hàm check_plain().  $submitted: “Submitted by” lấy từ hàm theme(‘node_submitted’, $node). Admin có thể cài đặt việc hiển thị của thông tin nay trong trang cài đặt giao diện của mỗi node.  $picture: HTML cho ảnh của người dùng, nếu các ảnh được bật và ảnh của người dùng đã được thiết lập. 1.4.4.3. block.tpl.php Các block được liệt kê trong Administer > Site building > Blocks và được bao bọc bởi đánh dấu cung cấp bởi block.tpl.php. Cũng giống như các file page template và node template, hệ thống block sử dụng một trật tự đề nghị để tìm file template để bao bọc block. Các biến trong block.tpl.php:  $block: toàn bộ đối tượng block. Một cách tổng quát, sử dụng $block- >subject và $block->content.  $block_id: một số nguyên tăng lên mỗi lần một block được tạo ra và file block template gọi đến. 34  $block_zebra: mỗi khi $block_id tăng lên, nó đảo lại giá trị biến này giữa chẵn và lẻ. 1.4.4.4. comment.tpl.php File template comment.tpl.php thêm đánh dấu vào các comment. Các biến trong comment.tpl.php:  $author: siêu liên kết tên tác giả đến trang profile của tác giả, nếu có.  $comment: đối tượng comment chứa tất cả thuộc tính của comment.  $content: nội dung của comment.  $date: ngày tạo bài viết đã được định dạng. Một định dạng khác có thể được sử dụng bằng cách gọi hàm format_date(), chẳng hạn, format_date($comment- >timestamp, ‘large’).  $links: HTML cho liên kết ngữ cảnh đến comment như “edit”, “reply” và “delete”.  $new: trả về “new” cho một comment cho đến khi được xem bởi người dùng hiện tại và “updated” cho một comment đã được cập nhật. Có thể thay đổi văn bản trả về bởi $new bằng các ghi đè hàm theme_mark() trong includes/theme.inc. Drupal không kiểm tra những comment nào đã được đọc hay cập nhật đối với người dùng vô danh.  $node: toàn bộ đối tượng node được comment.  $picture: HTML cho ảnh người dùng. Phải bật hỗ trợ hình ảnh ở Administer > User Management > User settings và phải check “User pictures in comments” với mỗi trang cài đặt giao diện cho giao diện đã được bật. Cuối cùng, admin phải cung cấp một hình ảnh mặc định hoặc người dùng phải upload một hình ảnh để có ảnh để hiển thị.  $signature: HTML đã được lọc của chữ ký người dùng. Hỗ trợ chữ ký phải được bật ở Administer > User management > User settings biến này trở nên hữu dụng.  $status: ánh xạ trạng thái comment với một trong những giá trị sau: comment- preview, comment-unpublished, và comment-published.  $title: tiêu đề siêu liên kết đến comment, bao gồm cả đoạn URL. 35 1.4.4.5. box.tpl.php File template box.tpl.php là một trong nhưng file template không rõ ràng trong Drupal. Nó được sử dụng trong nhân Drupal để bao bọc form gửi comment và kết quả tìm kiếm. Ngoài ra, nó không có nhiều ứng dụng. Nó không cung cấp hàm nào cho các block, là một suy nghĩ sai lầm (bởi vì các block được tạo ra bởi admin được lưu trong bảng dữ liệu có tên là boxes). Các biến trong box.tpl.php:  $content: nội dung của box.  $region: region mà box sẽ được hiển thị, ví dụ như header, left, main.  $title: tiêu đề của box. 1.4.5. Các file CSS Hầu hết các trang web hiện đại sử dụng style sheet bên ngoài để điều khiển việc trình bày một trang. Trong một trang HTML tĩnh truyền thống, một con trỏ đến một style sheet phải được đặt một cách thủ công được trong mã HTML (thường là trong phần đầu trang). Ví dụ: Để có thể trình duyệt, một trang từ một trang web Drupal cũng phải giống hệt như trên: thẻ HTML header có cùng một loại con trỏ đến style sheet bên ngoài. Sự khác biệt chính là ở phía sau, những con trỏ được thêm vào HTML một cách tự động. Một số style có thể đến từ những giao diện của chính nó và những cái khác có thể được cung cấp bởi các module Drupal khác nhau (để cung cấp style mặc định cho output module). Có thể thêm style sheet cho một giao diện và có thể ghi đè lên một style sheet mặc định từ nhân Drupal hoặc module đóng gói. Nếu đang sử dụng một giao diện con, có thể ghi đè lên style sheet từ giao diện cha. 1.4.5.1. Thành phần của page  .menu: tất cả cây menu đều sử dụng lớp này, như menu định hướng.  .block: tất cả block  .links: danh sách các liên kết, bao gồm liên kết chính và phụ trong phần đầu trang, và cả liên kết đến node và taxonomy term. 36 1.4.5.2. Thành phần của node  .node: một thẻ div bao bọc xung quanh một node, bao gồm cả tiêu đề của nó.  .node-title: tiêu đề của node.  .content: nội dung của node, bao gồm những phần thêm vào do các module khác tạo ra, như upload file hoặc vùng CCK.  .links: áp dụng cho bất kỳ thẻ UL nào liệt kê danh sách các liên kết, bao gồm các liên kết chính và phụ trong phần đầu trang, và cả liên kết đến node và taxonomy term. Tuy nhiên các liên kết đến node sẽ lấy lớp .links trong thẻ DIV của nó.  .terms: các taxonomy term, lấy cả .links và .inline  .inline: một lớp hệ thống để thiết kế các mục UL thành một hàng ngang.  .feed-icon: các icon RSS feed, thường nằm ở cuối phần nội dung của trang. 1.5. Kết luận Chương này giới thiệu những khái niệm, thành phần cũng như những chức năng cơ bản nhất của Drupal, phục vụ cho việc triển khai đề tài. 37 Chương 2. Phiên bản website dùng Drupal trên thiết bị di động 2.1. Đặt vấn đề Hiện nay, với sự phát triển của mạng 3G, việc truy cập Internet từ thiết bị di động trở nên cực kỳ dễ dàng, tuy nhiên việc hiển thị trang web trên thiết bị di động gặp rất nhiều hạn chế.  Màn hình nhỏ, độ phân giải thấp  Tốc độ truy cập Internet thấp Do đó, yêu cầu đặt ra là cần phải thiết kế một giao diện riêng, phù hợp với việc hiển thị website trên thiết bị di động. Và như vậy, phiên bản website dành cho thiết bị di động cần thỏa mãn những yêu cầu sau:  Có một trang với tên miền riêng, giao diện riêng và trang chủ riêng dành cho thiết bị di động nhưng sử dụng chung cơ sở dữ liệu với trang cũ.  Giao diện của trang web phải phù hợp với việc hiển thị trên thiết bị di động.  Khi người dùng truy cập vào website bằng thiết bị di động, hệ thống sẽ tự nhận diện và điều hướng sang phiên bản phù hợp. 2.2. Định hướng giải pháp 2.2.1. Multisite Drupal multisite là gì và tại sao nên sử dụng nó? Multisite cho phép chạy nhiều trang web Drupal và các trường hợp từ một nhân Drupal codebase chính. Khi cài đặt và cấu hình Drupal, chúng ta đang sử dụng hệ thống nhân chính và cơ sở dữ liệu của Drupal để điều khiển trang web. Điều này bao gồm thư mục nhân /modules và /themes, cũng như /script, /profiles, /misc, và /includes. Sự linh hoạt của Drupal cho phép cài đặt thêm các trang web và chia sẻ tất cả các tập tin nhân, các module, và theme trong các multisites. Điều này giúp ích rất nhiều khi chúng ta đang có kế hoạch để xây dựng một môi trường lớn trang web cho một công ty, tổ chức có nhiều phòng ban, đơn vị, hoặc các bên liên quan. Có thể cung cấp cho những loại khách hàng này một quy mô lớn Drupal multisite. Các trang web sẽ được linh hoạt hơn, sẽ thực hiện tốt hơn, và có thể được duy trì dễ dàng hơn. Một ưu điểm là khi cần phải nâng cấp hay vá lỗi một nhân hoặc module đóng gói hoặc giao diện và đang chia sẻ những module và giao diện với các trang web Drupal khác trong thư mục /sites, chỉ cần patch một lần và các bản cập nhật sẽ làm 38 việc trên tất cả các trang web. Có thể dễ dàng thấy được ưu điểm từ quan điểm duy trì và thực hiện ở đây. Nếu cần cập nhật các module chỉ một lần và các bản cập nhật được áp dụng cho tất cả các trang web, do đó điều này sẽ giúp tiết kiệm thời gian từ góc độ bảo trì. Nó cũng sẽ cung cấp cho một sự phát triển nhất quán hơn và khuôn khổ thực hiện bởi vì tất cả các trang web sẽ được chạy suốt từ cùng codebase. Ưu điểm khác của multisite là có thể cài đặt các module và giao diện đóng gói và tùy chỉnh vào các trang web cụ thể. Tất cả các multisites có thể chạy các giao diện tuỳ chỉnh khác nhau và chúng có thể chạy các module đóng gói khác nhau. Chúng cũng sẽ có hệ thống tập tin của riêng mình cho hình ảnh có liên quan, tài liệu, và các file khác. Cuối cùng, có thể tinh chỉnh hiệu suất cho mỗi trang web để nếu muốn chạy bộ nhớ đệm trên một trang web, có thể, mà không có cơ chế trong bộ nhớ đệm ảnh hưởng đến multisites khác. 2.2.2. Thiết kế template Dựa trên những phân tích ở trên về hệ thống giao diện của Drupal để viết một template phù hợp với việc hiển thị trên thiết bị di động. Giao diện mới có tên là mobile_interface với cấu trúc các file như sau: 2.2.2.1. block.tpl.php <?php // $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $ ?> module; ?>" id="block-module; ?>-<?php print $block->delta; ?>"> subject; ?> content; ?> 2.2.2.2. mobile_interface.info ; $Id name = Mobile Interface core = 6.x engine = phptemplate 39 2.2.2.3. logo.png 2.2.2.4. node.tpl.php <?php // $Id: node.tpl.php,v 1.7 2007/08/07 08:39:36 goba Exp $ ?> <div class="node<?php if ($sticky) { print " sticky"; } ?>"> <?php if ($picture) { print $picture; } ?> <a href=""><?php print $title?> <?php print $submitted?> » <?php print $links?> 2.2.2.5. page.tpl.php <?php print '<' . '?xml version="1.0" encoding="utf-8"?' . '>' ?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" ""> <html xmlns="" xml:lang="<?php print $language->language ?>" lang="<?php print $language- >language ?>" dir="dir ?>"> 40 "> <?php if ($logo) { print '<a id="sitelogo" title="' . $site_slogan . '" href="' . check_url($front_page) . '">'; } if ($site_name) { print '<a title="' . $site_slogan . '" href="' . check_url($front_page) . '">' . $site_name . ''; } ?> <?php print $header; ?> <?php if (isset($primary_links)) { print theme('toplinks', $primary_links, array('class' => 'links primary-links')); } if (isset($secondary_links)) { print theme('toplinks', $secondary_links, array('class' => 'links secondary- links')); } ?> <div class="block block-theme"><?php endif; ?> 41 <?php if ($mission) print '<div id="mission">' . $mission . ''; ?> <?php if ($title) print '<div id="main">' . $title . ''; ?> <?php if ($tabs) print '<ul class="tabs primary">' . $tabs . ''; ?> <?php if ($tabs2) print '<ul class="tabs secondary">' . $tabs2 . ''; ?> <?php if ($show_messages && $messages) print $messages; ?> <div class="block block-theme"><?php print $search_box ?> 42 2.2.2.6. style.css /* $Id: style.css,v 1.23 2007/12/17 15:05:09 goba Exp $ */ /* ** HTML elements */ body { margin: 5px; padding: 5px; color: #000; background-color: #fff; font: 76% Verdana, Arial, Helvetica, sans-serif; } tr.odd td, tr.even td { padding: 0.3em; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5em; } h1 { font-size: 1.3em; } h2 { font-size: 1.2em; } h3, h4, h5, h6 { font-size: 1.1em; } p { margin-top: 0.5em; margin-bottom: 0.9em; } a { text-decoration: none; font-weight: none; } 43 a:link { color: #39c; } a:visited { color: #369; } a:hover { color: #39c; text-decoration: underline; } fieldset { border: 1px solid #ccc; } pre { background-color: #eee; padding: 0.75em 1.5em; font-size: 12px; border: 1px solid #ddd; } table { /* make sizes relative to body size! */ font-size: 1em; } .form-item label { font-size: 1em; color: #222; } .item-list .title { font-size: 1em; color: #222; } .links { margin-bottom: 0; } .comment .links { margin-bottom: 0;} 44 /* ** Page layout blocks / IDs */ #header, #content { width: 100%; } #header { background-color: #fff; } #logo { vertical-align: middle; border: 0; } #logo img { float: left; /* LTR */ padding: 0 1em; border: 0; } #menu { padding: 0.5em 0.5em 0 0.5em; /* LTR */ text-align: right; /* LTR */ vertical-align: middle; } #navlist { font-size: 1.0em; padding: 0 0.8em 1.2em 0; /* LTR */ color: #9cf; } #navlist a { font-weight: bold; color: #fff; } #subnavlist { padding: 0.5em 1.2em 0.4em 0; /* LTR */ font-size: 0.8em; color: #9cf;} 45 #subnavlist a { font-weight: bold; color: #9cf; } ul.links li { border-left: 1px solid #9cf; /* LTR */ } ul.links li.first { border: none; } #search .form-text, #search .form-submit { border: 1px solid #369; font-size: 1.1em; height: 1.5em; vertical-align: middle; } #search .form-text { width: 8em; padding: 0 0.5em; } #mission { background-color: #369; padding: 1.5em 2em; color: #fff; } #mission a, #mission a:visited { color: #9cf; font-weight: bold; } .site-name { margin: 0.6em 0 0 ; padding: 0; font-size: 2em; } .site-name a:link, .site-name a:visited { color: #fff;} 46 .site-name a:hover { color: #369; text-decoration: none; } .site-slogan { font-size: 1em; color: #eee; display: block; margin: 0; font-style: italic; font-weight: bold; } #main { /* padding in px not ex because IE messes up 100% width tables otherwise */ padding: 0; color: #F1453F; } #mission, .node .content, .comment .content { line-height: 1.4em; } #help { font-size: 0.9em; margin-bottom: 1em; } .breadcrumb { margin-bottom: 0em; padding-bottom: 0em; } .messages { background-color: #eee; border: 1px solid #ccc; padding: 0.3em; margin-bottom: 1em; } 47 .error { border-color: red; } #sidebar-left, #sidebar-right { background-color: #fff; width: 100%; /* padding in px not ex because IE messes up 100% width tables otherwise */ padding: 0; vertical-align: top; } #footer { background-color: #fff; padding: 1em; font-size: 0.8em; border-top: 2px solid #0B4D88; } /* ** Common declarations for child classes of node, comment, block, box, etc. ** If you want any of them styled differently for a specific parent, add ** additional rules /with only the differing properties!/ to .parent .class. ** See .comment .title for an example. */ .title, .title a { font-weight: bold; font-size: 1.3em; color: #777; margin: 0 auto; /* decrease default margins for h.title */ } 48 .submitted { color: #999; font-size: 0.8em; } .links { color: #999; } .links a { font-weight: bold; } .block, .box { padding: 0 0 0 0; /* LTR */ } .block { border-bottom: 2px solid #0B4D88; padding-bottom: 0.75em; margin-bottom: 1em; } .block .title { display: none; margin-bottom: .25em; } .box .title { font-size: 1.1em; } .node { margin: .5em 0 2em; /* LTR */ } .sticky { padding: .5em; background-color: #eee; border: solid 1px #ddd; } .node .content, .comment .content { margin: .5em 0 .5em; } 49 .node .taxonomy { color: #999; font-size: 0.8em; padding-left: 1.5em; /* LTR */ } .node .picture { border: 1px solid #ddd; float: right; /* LTR */ margin: 0.5em; } .comment { border: 1px solid #abc; padding: .5em; margin-bottom: 1em; } .comment .title a { font-size: 1.1em; font-weight: normal; } .comment .new { text-align: right; /* LTR */ font-weight: bold; font-size: 0.8em; float: right; /* LTR */ color: red; } .comment .picture { border: 1px solid #abc; float: right; /* LTR */ margin: 0.5em; } 50 /* ** Module specific styles */ #aggregator .feed-source { background-color: #eee; border: 1px solid #ccc; padding: 1em; margin: 1em 0; } #aggregator .news-item .categories, #aggregator .source, #aggregator .age { color: #999; font-style: italic; font-size: 0.9em; } #aggregator .title { margin-bottom: 0.5em; font-size: 1em; } #aggregator h3 { margin-top: 1em; } #forum table { width: 100%; } #forum td { padding: 0.5em; } #forum td.forum, #forum td.posts { background-color: #eee; } #forum td.topics, #forum td.last-reply { background-color: #ddd; } #forum td.container { background-color: #ccc;} 51 #forum td.container a { color: #555; } #forum td.statistics, #forum td.settings, #forum td.pager { height: 1.5em; border: 1px solid #bbb; } #forum td .name { color: #96c; } #forum td .links { padding-top: 0.7em; font-size: 0.9em; } #profile .profile { clear: both; border: 1px solid #abc; padding: .5em; margin: 1em 0em; } #profile .profile .name { padding-bottom: 0.5em; } .block-forum h3 { margin-bottom: .5em; } div.admin-panel .description { color: #999; } div.admin-panel .body { background: #f4f4f4; } 52 div.admin-panel h3 { background-color: #69c; color: #fff; padding: 5px 8px 5px; margin: 0; } .pane-title { text-indent: 5px; background-color: #69c; color: #fff; padding: 3px 5px 3px; margin: 0; } .pane-content { margin: 5px; } .panel-pane { margin-bottom: 20px; } .item-list ul { margin: 0.75em 0 0.75em; } .item-list ul li { margin: 0 0 0.25em 3em;} 2.2.3. Module Mobile Plugin Module này đã được phát triển và đóng gói bởi cộng đồng Drupal, có chức năng tự nhận diện thiết bị di động qua việc phân tích tiêu đề User Agent của gói tin HTTP gửi lên server và điều hướng sang phiên bản tương ứng. 2.3. Kết luận Chương này nêu lên yêu cầu của đề tài và phương hướng thực hiện. 53 Chương 3. Website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động 3.1. Giao diện  Trang chủ: 54  Trang nội dung: 3.2. Cài đặt 3.2.1. Cài đặt multisite Domain của trang ban đầu là , cần tạo một trang mới dành cho thiết bị di động với tên miền là 1. Tạo thư mục e.uet.vnu.edu.vn.m trong thư mục /sites của thư mục cài đặt gốc, đồng thời tạo soft link từ thư mục gốc đến m bằng cách gõ lệnh sau tại thư mục gốc. ln –s . m 55 2. Copy file sites/default/settings.php qua thư mục sites/e.uet.vnu.edu.vn.m 3. Chỉnh các thông tin của file sites/e.uet.vnu.edu.vn.m/settings.php.  Phần prefix: $db_prefix = array( 'default' => '', 'variable' => 'm_' );  Phần config: $config = array( ‘site_name’ = ‘Mobile site’, ‘default_theme’ = ‘mobile_interface’, ‘anonymous’ = ‘Visitor’ ); 4. Mở trình duyệt và gõ địa chỉ để cài đặt trang mới. Sau khi quá trình cài đặt hoàn tất, ta sẽ có 1 trang Drupal mới ở địa chỉ và sử dụng chung cơ sở dữ liệu với trang cũ. 3.2.2. Tạo trang chủ Vào giao diện quản lý Page, tạo một trang mới với layout 1 cột và đặt nó làm trang chủ. Add thêm các block menu vào trang chủ theo thứ tự mong muốn. 3.3. Kết quả Đã cài đặt thành công website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động ở địa chỉ Đã test thử bằng phần mềm giả lập điện thoại trên máy tính cũng như một vài loại điện thoại thật và kết quả hiển thị như sau: 56 Giao diện trang chủ: 57 Giao diện trang con: 58 KẾT LUẬN Sau khi thực hiện đề tài, em đã có một nền tảng kiến thức cơ bản về Drupal, hiểu rõ cơ chế hoạt động và cách thiết kế template cho nó. Phiên bản dành cho thiết bị di động của website tiếng Anh trường ĐH Công nghệ đã có thể hoạt động bình thường ở địa chỉ Tuy nhiên, hệ thống chưa có chức năng tự nhận diện thiết bị di động và điều hướng sang phiên bản phù hợp. Do thời gian có hạn, hiểu biết còn hạn chế nên việc thực hiện đề tài không tránh khỏi sai sót, rất mong nhận được ý kiến đóng góp của các thầy cô giáo và các bạn. TÀI LIỆU THAM KHẢO [1] John K. Van Dyk, Pro Drupal Development Second Edition, 2008 [2] Trevor James, Drupal 6 Performance Tips, 2010 [3] Ric Shereves, Drupal 6 Themes, 2008 [4] Drupal Handbook (