ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Nguyễn Thị Thanh Tâm WEBSITE TRƯỜNG ĐH CÔNG NGHỆ PHIÊN BẢN TIẾNG ANH TRÊN THIẾT BỊ DI ĐỘNG KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Công nghệ thông tin HÀ NỘI - 2010 ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Nguyễn Thị Thanh Tâm WEBSITE TRƯỜNG ĐH CÔNG NGHỆ PHIÊN BẢN TIẾNG ANH TRÊN THIẾT BỊ DI ĐỘNG KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Công nghệ thông tin Cán bộ hướng dẫn: ThS.Phùng Chí Dũng HÀ NỘI - 2010 TÓM TẮT NỘI DUNG Mục tiêu của đề tài là xây dựng một phiên bản website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động. Phiên bản này là một bản rút gọn của website, cho phép hiển thị tốt trên thiết bị di động vốn bị hạn chế bởi kích thước màn hình. Bắt đầu từ việc nghiên cứu hệ thống website trường ĐH Công nghệ, vốn được xây dựng trên hệ quản trị nội dung Drupal. Sau khi nghiên cứu các thành phần cơ bản, các module quan trọng, hệ thống file giao diện của Drupal thì tiến hành thiết kế template cho phiên bản trên thiết bị di động. Triển khai bằng cách cài đặt một trang Drupal mới với dữ liệu được lấy từ phiên bản gốc và hiển thị lại theo template đã thiết kế. Kết quả, đã xây dựng thành công phiên bản trên thiết bị di động cho website trường ĐH Công nghệ với tên miền riêng. Tuy nhiên, hệ thống chưa có chức năng tự nhận diện thiết bị truy cập để điều hướng sang tên miền đó. MỤC LỤC Chương 1. Tổng quan về Drupal 2 1.1. Giới thiệu chung 2 1.1.1. Drupal là gì? 2 1.1.2. Lịch sử 2 1.1.3. Các tầng kỹ thuật 3 1.1.4. Chức năng 4 1.1.5. Nguyên tắc 7 1.2. Các khái niệm cơ bản 7 1.2.1. Nhân 7 1.2.2. Block 8 1.2.3. Hook 9 1.2.4. Node 9 1.2.5. Taxonomy 12 1.2.6. Path 14 1.2.7. User 16 1.2.8. Hệ thống file 17 1.3. Hệ thống module 20 1.3.1. Các module hệ thống 21 1.3.2. Các module đóng gói quan trọng 22 1.4. Hệ thống giao diện 24 1.4.1. Tổng quan về phát triển giao diện 24 1.4.2. Regions 25 1.4.3. Hệ thống file trong giao diện 26 1.4.4. Các file template 27 1.4.5. Các file CSS 35 1.5. Kết luận 36 Chương 2. Phiên bản website dùng Drupal trên thiết bị di động 37 2.1. Đặt vấn đề 37 2.2. Định hướng giải pháp 37 2.2.1. Multisite 37 2.2.2. Thiết kế template 38 2.2.3. Module Mobile Plugin 52 2.3. Kết luận 52 Chương 3. Website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động…………………………………………………………………………………53 3.1. Giao diện 53 3.2. Cài đặt 54 3.2.1. Cài đặt multisite 54 3.2.2. Tạo trang chủ 55 3.3. Kết quả 55 1 LỜI MỞ ĐẦU Ngày nay, điện thoại di động đã trở nên phổ biến, với sự phát triển của mạng 3G thì việc sử dụng thiết bị di động để truy cập web trở nên dễ dàng hơn bao giờ hết. Truy cập web bằng thiết bị di động vừa tiện lợi lại vừa nhanh chóng nên nhiều người đang chọn cách này để truy cập web. Tuy nhiên, các trang web thường được thiết kế phù hợp với việc hiển thị trên máy tính, có màn hình rộng và hỗ trợ tối đa các tiện ích kèm theo. Còn với thiết bị di động, với màn hình nhỏ và hầu hết không hỗ trợ Javascript hay Flash Player thì thường gặp khó khăn trong việc hiển thị. Hơn nữa, với những thông tin quảng cáo kèm theo sẽ khiến cho dung lượng tải về rất lớn, vừa gây độ trễ lớn trong việc tải trang web vừa tốn kém khi mà hầu hết người dùng sử dụng gói cước tính tiền theo dung lượng và tốc độ của mạng 3G cũng không lớn. Tất cả những điều đó đòi hỏi phải có một phiên bản riêng của trang web dành cho thiết bị di động. Không nằm ngoài những trường hợp trên, website trường ĐH Công nghệ phiên bản tiếng Anh cũng chỉ hỗ trợ cho người dùng truy cập từ máy tính. Nhận thấy nhu cầu truy cập web qua thiết bị di động ngày càng tăng, để hỗ trợ tối đa cho người dùng, cần phải có một phiên bản dành riêng cho thiết bị di động. Chính vì vậy em đã lựa chọn và nghiên cứu đề tài “Website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động”. Website được xây dựng dựa trên phiên bản đầy đủ dành cho desktop, sử dụng hệ quản trị nội dung Drupal. Khoá luận của em sẽ trình bày gồm 3 chương: Chương 1: Tổng quan về Drupal Chương 2: Phiên bản website dùng Drupal trên thiết bị di động Chương 3: Website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động Em xin chân thành cảm ơn sự giúp đỡ tận tình của ThS.Phùng Chí Dũng trong quá trình thực hiện đề tài. 2 Chương 1. Tổng quan về Drupal 1.1. Giới thiệu chung 1.1.1. Drupal là gì? Drupal là một khung sườn phát triển phần mềm hướng module, một hệ quản trị nội dung miễn phí và mã nguồn mở. Cũng giống như các hệ quản trị nội dung hiện đại khác, Drupal cho phép người quản trị hệ thống tạo và tổ chức dữ liệu, tùy chỉnh cách trình bày, tự động hóa các tác vụ điều hành và quản lý hệ thống những. Drupal có cấu trúc lập trình rất tinh vi, dựa trên đó, hầu hết các tác vụ phức tạp có thể được giải quyết với rất ít đoạn mã được viết, thậm chí không cần. Đôi khi, Drupal cũng được gọi là "khung sườn phát triển ứng dụng web", vì kiến trúc thông minh và uyển chuyển của nó. Drupal được chạy trên rất nhiều môi trường khác nhau, bao gồm Windows, Mac OS X, Linux, FreeBSD, OpenBSD và các môi trường hỗ trợ máy chủ web Apache (phiên bản 1.3+) hoặc IIS (phiên bản 5+) có hỗ trợ ngôn ngữ PHP (phiên bản 4.3.3+). Drupal kết nối với cơ sở dữ liệu MySQL hoặc PostgreSQL để lưu nội dung và các thiết lập. 1.1.2. Lịch sử Năm 2000, các kết nối Internet thường xuyên ở mức cao với các sinh viên trường Đại học Antwerp, do đó, Dries Buytaert và Hans Snijder thiết lập một cầu nối không dây giữa ký túc xá sinh viên của mình để chia sẻ kết nối modem Hans 'ADSL giữa tám sinh viên. Đây là một việc cực kỳ xa xỉ tại thời điểm đó, nhưng vẫn có sự thiếu sót: không có phương tiện để thảo luận hay chia sẻ những điều đơn giản. Nó truyền cảm hứng cho Dries làm việc trên một trang web tin tức nhỏ với một built-in hội đồng quản trị web, cho phép các nhóm bạn bè để lại mỗi ghi chú khác về 3 tình trạng của mạng, thông báo nơi họ đã ăn tối, hay để chia sẻ một số mục tin tức đáng chú ý. Các phần mềm không có tên cho đến ngày sau khi Dries chuyển ra sau khi tốt nghiệp. Nhóm quyết định đưa các tuyến nội bộ trang web để họ có thể giữ liên lạc, tiếp tục chia sẻ những phát hiện thú vị, và những đoạn tường thuật cuộc sống cá nhân của họ. Trong khi tìm kiếm một tên miền phù hợp, Dries đặt tên miền 'drop.org' sau khi ông thực hiện một lỗi đánh máy để xem tên “dorp.org” vẫn còn. Dorp là từ Hà Lan cho 'làng', được coi là một tên phù hợp cho các cộng đồng nhỏ. Một khi drop.org được thành lập trên mạng, khán giả của nó đã thay đổi khi các thành viên bắt đầu nói về các công nghệ web mới, chẳng hạn như kiểm duyệt, cung cấp, đánh giá, và phân phối chứng thực. Drop.org từ từ biến thành một môi trường thử nghiệm cá nhân, thúc đẩy bởi các cuộc thảo luận và dòng chảy của ý tưởng. Các cuộc thảo luận về các công nghệ web đã được thử ra trên drop.org chính nó như là mới bổ sung cho các phần mềm chạy các trang web. Chỉ sau đó, vào tháng 1 năm 2001, mà Dries quyết định phát hành phần mềm phía sau drop.org như "Drupal". Mục đích là để cho phép người khác sử dụng và mở rộng nền tảng thử nghiệm để nhiều người hơn có thể khám phá những con đường mới để phát triển. Cái tên Drupal, phát âm là "droo- puhl," có nguồn gốc từ cách phát âm tiếng Anh của từ tiếng Hà Lan "druppel," có nghĩa là "thả". 1.1.3. Các tầng kỹ thuật Mục tiêu thiết kế của Drupal bao gồm cả việc có thể chạy tốt trên các tài khoản web hosting giá rẻ và có thể mở rộng tới các trang web phân phối lớn. Mục tiêu ban đầu là sử dụng công nghệ phổ biến nhất, và sau này là coding cẩn thận, chặt chẽ. Các tầng kỹ thuật của Drupal được minh họa trong hình 1-1. Hình 1-1. Các tầng kỹ thuật của Drupal 4 Hệ điều hành nằm ở mức thấp trong tầng mà Drupal không quan tâm nhiều. Drupal chạy tốt trên bất kỳ hệ điều hành nào có hỗ trợ PHP. Máy chủ web được sử dụng rộng rãi nhất với Drupal là Apache, mặc dù các máy chủ web khác (bao gồm cả Microsoft IIS) cũng có thể được sử dụng. Bởi vì lịch sử lâu dài của Drupal với Apache, Drupal với file .htaccess được bảo mật khi cài đặt Drupal. Clean URLs-có nghĩa là loại bỏ những dấu hỏi, dấu và, hoặc ký tự đặc biệt khác bằng cách sử dụng thành phần mod_rewrite của Apache. Điều này đặc biệt quan trọng bởi vì khi di chuyển từ một hệ thống quản lý nội dung hoặc từ các tập tin tĩnh, các URL của nội dung không cần phải thay đổi. Clean URL có sẵn trên các máy chủ web khác bằng cách sử dụng khả năng ghi lại URL của web server. Giao diện Drupal với các lớp tiếp theo của stack (cơ sở dữ liệu) thông qua một lớp cơ sở dữ liệu nhỏ. Lớp này xử lý các truy vấn SQL để có thể sử dụng cơ sở dữ liệu các nhà cung cấp khác nhau mà không cần viết lại code. Các cơ sở dữ liệu thử nghiệm rộng rãi nhất là MySQL và PostgreSQL, mặc dù hỗ trợ cho Microsoft SQL Server và Oracle đang tăng lên. Drupal được viết bằng PHP. Vì PHP là một ngôn ngữ dễ học, có rất nhiều chương trình PHP được viết bởi người mới bắt đầu. Chất lượng code của người mới bắt đầu đã khiến cho PHP mất uy tín. Hơn nữa, PHP cũng có thể được sử dụng để viết code. Tất cả code của nhân Drupal đều tuân thủ nghiêm ngặt các tiêu chuẩn code và được xem xét kỹ lưỡng qua quá trình mã nguồn mở. Đối với Drupal, rất dễ dàng học PHP vì có một cộng đồng luôn sẵn sàng giúp đỡ những người mới bắt đầu. Và những người mới bắt đầu nhận được thông tin phản hồi từ cộng đồng giúp nâng cao kỹ năng của họ. 1.1.4. Chức năng 1.1.4.1. Chức năng chung  Collaborative Book - Giúp thiết lập một "quyển sách" và cho phép nhiều người cùng đóng gói nội dung, tổ chức dữ liệu.  Clean URL - Drupal dùng mod_rewrite của Apache để tạo các URL thân thiện với cả các bộ máy tìm kiếm và người dùng.  Module - Các module đóng gói từ cộng đồng mở rộng tính năng của nhân Drupal.  Online help - Hệ thống trợ giúp trực tuyến ngay trên trang web. 5  Open source - Mã nguồn của Drupal hoàn toàn miễn phí dưới giấy phép GNU/GPL 2.  Cá nhân hóa - Có sẵn ngay trong nhân Drupal. Cả nội dung lẫn cách trình bày đều có thể cá nhân hóa theo các tiêu chuẩn được người dùng đặt ra.  Hệ thống phân quyền theo vai trò (role based) - Có thể tạo ra các vai trò mang các quyền hạn khác nhau, sau đó gán những vai trò này cho người dùng.  Tìm kiếm - Mọi nội dung đều được đánh chỉ mục và có thể tìm kiếm bởi module tìm kiếm tích hợp sẵn. 1.1.4.2. Quản lý thành viên Xác thực người dùng - Người dùng có thể đăng kí và xác thực tại trang web, hoặc thông qua các nguồn xác thực khác như Jabber, Blogger, LiveJournal hoặc một site Drupal khác hoặc máy chủ LDAP. 1.1.4.3. Quản trị nội dung  Poll - Module bầu chọn của Drupal cho phép người dùng tạo các bầu chọn và gắn vào các trang khác nhau.  Khuôn mẫu (template) - Hệ thống khuôn mẫu của Drupal phân tách nội dung với cách trình bày. Khuôn mẫu được xây dựng trên PHP và HTML chuẩn, có nghĩa là không cần phải học một ngôn ngữ khuôn mẫu (templating language) nào cả.  Bình luận theo luồng - Mô hình bình luận theo luồng mạnh mẽ của Drupal cho phép bình luận bất cứ nội dung nào. Các bình luận có chia cấp như ở một nhóm tin (newsgroup) hoặc diễn đàn.  Điều khiển phiên bản - Hệ thống điều khiển phiên bản của Drupal cho phép lưu giữ thông tin của các lần cập nhật (ai, cái gì, khi nào). Có thể dễ dàng quay lại (roll-back) một phiên bản trước đó. 1.1.4.4. Blogging  Hệ thống blog đa người dùng - Mỗi người dùng đã ghi danh trong hệ thống đều có thể viết blog.  Hỗ trợ Blog API - Cho phép cập nhật nội dung bằng nhiều công cụ khác nhau, thậm chí không cần dùng đến trình duyệt web.  Content syndication - Xuất nội dung theo dạng RDF/RSS. [...]... 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ỉ... các mục tin tức, các cuộc thăm dò, bài đăng trên blog, danh sách bất động sản, vv Trong Drupal, mỗi hạng mục của nội dung được gọi là một node, và mỗi node thuộc về một kiểu nội dung duy nhất, trong đó xác định các thiết lập mặc định khác nhau cho các node của kiểu, như liệu được công bố node tự động và ở đâu cho phép 10 comment (Lưu ý rằng trong các phiên bản trước của Drupal, kiểu nội dung đã được... 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)... 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... trang web thêm comment (thường là ghi chú ngắn và trả lời các ý kiến khác) vào các node trên trang web  Di n đàn Một node Di n đàn xác định một chủ đề cho một cuộc thảo luận di n đàn, mọi người có thể trả lời chủ đề này bằng cách sử dụng coment Node Di n đàn được tổ chức thành các chủ để thông qua một Taxonomy (danh sách các loại)  Page Kiểu nội dung page được kích hoạt trong Drupal trong cấu hình... thể nhập các term riêng của họ khi submit một node.Nếu một term chưa nằm trong vocabulary, nó sẽ được thêm vào Khi check box Tags trê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,... http://example.com/[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à http://example.com/node/7 hoặc http://example.com/mysubdir/node/7, đường dẫn ở cả hai trường hợp đều là node/7 15 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... 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... tạo ra và cài đặt bởi giao di n (trong file info của giao di n) và không được xác định bởi các block API Block không được gán vào region nào thì không được hiển thị Block có các tùy chọn để kiểm soát những người có thể nhìn thấy chúng và những trang mà nó được hiển thị Nếu các module điều tiết được kích hoạt, các block 8 không cần thiết cũng có thể được thiết lập để tắt tự động trong thời kỳ lưu lượng... 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 . Chương 2: Phiên bản website dùng Drupal trên thiết bị di động Chương 3: Website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động Em xin. là xây dựng một phiên bản website trường ĐH Công nghệ phiên bản tiếng Anh trên thiết bị di động. Phiên bản này là một bản rút gọn của website, cho phép