ĐẠ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 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 đề tài xây dựng phiên website trường ĐH Công nghệ phiên tiếng Anh thiết bị di động Phiên rút gọn website, cho phép hiển thị tốt thiết bị di động vốn bị hạn chế kích thước hình Bắt đầu từ việc nghiên cứu hệ thống website trường ĐH Công nghệ, vốn xây dựng hệ quản trị nội dung Drupal Sau nghiên cứu thành phần bản, module quan trọng, hệ thống file giao diện Drupal tiến hành thiết kế template cho phiên thiết bị di động Triển khai cách cài đặt trang Drupal với liệu lấy từ phiên gốc hiển thị lại theo template thiết kế Kết quả, xây dựng thành công phiê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 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 Tổng quan Drupal 1.1 Giới thiệu chung 1.1.1 Drupal gì? 1.1.2 Lịch sử 1.1.3 Các tầng kỹ thuật 1.1.4 Chức 1.1.5 Nguyên tắc 1.2 Các khái niệm 1.2.1 Nhân 1.2.2 Block 1.2.3 Hook 1.2.4 Node 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 phát triển giao diện 24 1.4.2 Regions 25 1.4.3 Hệ thống file 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 Phiên website dùng Drupal 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 Website trường ĐH Công nghệ phiên tiếng Anh 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 55 LỜI MỞ ĐẦU Ngày nay, điện thoại di động trở nên phổ biến, với phát triển mạng 3G việc sử dụng thiết bị di động để truy cập web trở nên dễ dàng hết Truy cập web thiết bị di động vừa tiện lợi lại vừa nhanh chóng nên nhiều người chọn cách để truy cập web Tuy nhiên, trang web thường thiết kế phù hợp với việc hiển thị máy tính, có hình rộng hỗ trợ tối đa tiện ích kèm theo Cịn với thiết bị di động, với hình nhỏ hầu hết khơng hỗ trợ Javascript hay Flash Player thường gặp khó khăn việc hiển thị Hơn nữa, với thông tin quảng cáo kèm theo khiến cho dung lượng tải lớn, vừa gây độ trễ lớn việc tải trang web vừa tốn mà hầu hết người dùng sử dụng gói cước tính tiền theo dung lượng tốc độ mạng 3G khơng lớn Tất điều địi hỏi phải có phiên riêng trang web dành cho thiết bị di động Khơng nằm ngồi trường hợp trên, website trường ĐH Công nghệ phiên tiếng Anh 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 tăng, để hỗ trợ tối đa cho người dùng, cần phải có phiên dành riêng cho thiết bị di động Chính em lựa chọn nghiên cứu đề tài “Website trường ĐH Công nghệ phiên tiếng Anh thiết bị di động” Website xây dựng dựa phiên đầy đủ dành cho desktop, sử dụng hệ quản trị nội dung Drupal Khoá luận em trình bày gồm chương: Chương 1: Tổng quan Drupal Chương 2: Phiên website dùng Drupal thiết bị di động Chương 3: Website trường ĐH Công nghệ phiên tiếng Anh thiết bị di động Em xin chân thành cảm ơn giúp đỡ tận tình ThS.Phùng Chí Dũng q trình thực đề tài Chương Tổng quan Drupal 1.1 Giới thiệu chung 1.1.1 Drupal gì? Drupal khung sườn phát triển phần mềm hướng module, hệ quản trị nội dung miễn phí mã nguồn mở Cũng giống hệ quản trị nội dung đại khác, Drupal cho phép người quản trị hệ thống tạo tổ chức liệu, tùy chỉnh cách trình bày, tự động hóa tác vụ điều hành quản lý hệ thống Drupal có cấu trúc lập trình tinh vi, dựa đó, hầu hết tác vụ phức tạp giải với đoạn mã viết, chí không cần Đôi khi, Drupal gọi "khung sườn phát triển ứng dụng web", kiến trúc thơng minh uyển chuyển Drupal chạy nhiều mơi trường khác nhau, bao gồm Windows, Mac OS X, Linux, FreeBSD, OpenBSD môi trường hỗ trợ máy chủ web Apache (phiên 1.3+) IIS (phiên 5+) có hỗ trợ ngơn ngữ PHP (phiên 4.3.3+) Drupal kết nối với sở liệu MySQL PostgreSQL để lưu nội dung thiết lập 1.1.2 Lịch sử Năm 2000, kết nối Internet thường xuyên mức cao với sinh viên trường Đại học Antwerp, đó, Dries Buytaert Hans Snijder thiết lập cầu nối không dây ký túc xá sinh viên để chia sẻ kết nối modem Hans 'ADSL tám sinh viên Đây việc xa xỉ thời điểm đó, có thiếu sót: khơng có phương tiện để thảo luận hay chia sẻ điều đơn giản Nó truyền cảm hứng cho Dries làm việc trang web tin tức nhỏ với built-in hội đồng quản trị web, cho phép nhóm bạn bè để lại ghi khác tình trạng mạng, thơng báo nơi họ ăn tối, hay để chia sẻ số mục tin tức đáng ý Các phần mềm tên ngày sau Dries chuyển sau tốt nghiệp Nhóm định đưa tuyến nội trang web để họ giữ liên lạc, tiếp tục chia sẻ phát thú vị, đoạn tường thuật sống cá nhân họ Trong tìm kiếm tên miền phù hợp, Dries đặt tên miền 'drop.org' sau ông thực lỗi đánh máy để xem tên “dorp.org” Dorp từ Hà Lan cho 'làng', coi tên phù hợp cho cộng đồng nhỏ Một drop.org thành lập mạng, khán giả thay đổi thành viên bắt đầu nói cơng nghệ web mới, chẳng hạn kiểm duyệt, cung cấp, đánh giá, phân phối chứng thực Drop.org từ từ biến thành môi trường thử nghiệm cá nhân, thúc đẩy thảo luận dòng chảy ý tưởng Các thảo luận công nghệ web thử drop.org bổ sung cho phần mềm chạy trang web Chỉ sau đó, vào tháng năm 2001, mà Dries định phát hành phần mềm phía sau drop.org "Drupal" Mục đích phép người khác sử dụng mở rộng tảng thử nghiệm để nhiều người khám phá đường để phát triển Cái tên Drupal, phát âm "droopuhl," có nguồn gốc từ cách phát âm tiếng Anh từ tiếng Hà Lan "druppel," có nghĩa "thả" 1.1.3 Các tầng kỹ thuật Mục tiêu thiết kế Drupal bao gồm việc chạy tốt tài khoản web hosting giá rẻ mở rộng tới trang web phân phối lớn Mục tiêu ban đầu sử dụng công nghệ phổ biến nhất, sau coding cẩn thận, chặt chẽ Các tầng kỹ thuật Drupal minh họa hình 1-1 Hình 1-1 Các tầng kỹ thuật Drupal Hệ điều hành nằm mức thấp tầng mà Drupal không quan tâm nhiều Drupal chạy tốt hệ điều hành có hỗ trợ PHP Máy chủ web sử dụng rộng rãi với Drupal Apache, máy chủ web khác (bao gồm Microsoft IIS) sử dụng Bởi lịch sử lâu dài Drupal với Apache, Drupal với file htaccess bảo mật cài đặt Drupal Clean URLs-có nghĩa loại bỏ dấu hỏi, dấu và, ký tự đặc biệt khác cách sử dụng thành phần mod_rewrite Apache Điều đặc biệt quan trọng di chuyển từ hệ thống quản lý nội dung từ tập tin tĩnh, URL nội dung không cần phải thay đổi Clean URL có sẵn máy chủ web khác cách sử dụng khả ghi lại URL web server Giao diện Drupal với lớp stack (cơ sở liệu) thông qua lớp sở liệu nhỏ Lớp xử lý truy vấn SQL để sử dụng sở liệu nhà cung cấp khác mà không cần viết lại code Các sở liệu thử nghiệm rộng rãi MySQL PostgreSQL, hỗ trợ cho Microsoft SQL Server Oracle tăng lên Drupal viết PHP Vì PHP ngơn ngữ dễ học, có nhiều chương trình PHP viết người bắt đầu Chất lượng code người bắt đầu khiến cho PHP uy tín Hơn nữa, PHP sử dụng để viết code Tất code nhân Drupal tuân thủ nghiêm ngặt tiêu chuẩn code xem xét kỹ lưỡng qua trình mã nguồn mở Đối với Drupal, dễ dàng học PHP có cộng đồng sẵn sàng giúp đỡ người bắt đầu Và người bắt đầu nhận thông tin phản hồi từ cộng đồng giúp nâng cao kỹ họ 1.1.4 1.1.4.1 Chức Chức chung  Collaborative Book - Giúp thiết lập "quyển sách" cho phép nhiều người đóng gói nội dung, tổ chức liệu  Clean URL - Drupal dùng mod_rewrite Apache để tạo URL thân thiện với máy tìm kiếm người dùng  Module - Các module đóng gói từ cộng đồng mở rộng tính nhân Drupal  Online help - Hệ thống trợ giúp trực tuyến trang web  Open source - Mã nguồn Drupal hồn tồn miễn phí giấy phép GNU/GPL  Cá nhân hóa - Có sẵn nhân Drupal Cả nội dung lẫn cách trình bày cá nhân hóa theo tiêu chuẩn người dùng đặt  Hệ thống phân quyền theo vai trò (role based) - Có thể tạo vai trị mang quyền hạn khác nhau, sau gán vai trị cho người dùng  Tìm kiếm - Mọi nội dung đánh mục tìm kiếm 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 đăng kí xác thực trang web, thông qua nguồn xác thực khác Jabber, Blogger, LiveJournal site Drupal khác máy chủ LDAP 1.1.4.3 Quản trị nội dung  Poll - Module bầu chọn Drupal cho phép người dùng tạo bầu chọn gắn vào trang khác  Khuôn mẫu (template) - Hệ thống khuôn mẫu Drupal phân tách nội dung với cách trình bày Khuôn mẫu xây dựng PHP HTML chuẩn, có nghĩa khơng cần phải học ngơn ngữ khn mẫu (templating language)  Bình luận theo luồng - Mơ hình bình luận theo luồng mạnh mẽ Drupal cho phép bình luận nội dung Các bình luận có chia cấp nhóm tin (newsgroup) diễn đàn  Điều khiển phiên - Hệ thống điều khiển phiên Drupal cho phép lưu giữ thông tin lần cập nhật (ai, gì, nào) Có thể dễ dàng quay lại (roll-back) phiê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 hệ thống viết blog  Hỗ trợ Blog API - Cho phép cập nhật nội dung nhiều công cụ khác nhau, 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 #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.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 ; padding: 0; font-size: 2em; } site-name a:link, site-name a:visited { color: #fff;} 45 .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; } 46 .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: auto; /* decrease default margins for h.title */ } 47 .submitted { color: #999; font-size: 0.8em; } links { color: #999; } links a { font-weight: bold; } block, box { padding: 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 2em; /* LTR */ } sticky { padding: 5em; background-color: #eee; border: solid 1px #ddd; } node content, comment content { margin: 5em 5em; } 48 .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; } 49 /* ** 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;} 50 #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; } 51 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.75em; } item-list ul li { margin: 0 0.25em 3em;} 2.2.3 Module Mobile Plugin Module phát triển đóng gói cộng đồng Drupal, có chức tự nhận diện thiết bị di động qua việc phân tích tiêu đề User Agent gói tin HTTP gửi lên server điều hướng sang phiên tương ứng 2.3 Kết luận Chương nêu lên yêu cầu đề tài phương hướng thực 52 Chương Website trường ĐH Công nghệ phiên tiếng Anh thiết bị di động 3.1 Giao diện  Trang chủ: 53  Trang nội dung: 3.2 Cài đặt 3.2.1 Cài đặt multisite Domain trang ban đầu http://e.uet.vnu.edu.vn , cần tạo trang dành cho thiết bị di động với tên miền http://e.uet.vnu.edu.vn/m Tạo thư mục e.uet.vnu.edu.vn.m thư mục /sites thư mục cài đặt gốc, đồng thời tạo soft link từ thư mục gốc đến m cách gõ lệnh sau thư mục gốc ln –s m 54 Copy file sites/default/settings.php qua thư mục sites/e.uet.vnu.edu.vn.m Chỉnh thông tin 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’ ); Mở trình duyệt gõ địa http://e.uet.vnu.edu.vn/m/install.php để cài đặt trang Sau q trình cài đặt hồn tất, ta có trang Drupal địa http://e.uet/vnu.edu.vn/m sử dụng chung sở liệu với trang cũ 3.2.2 Tạo trang chủ Vào giao diện quản lý Page, tạo trang với layout cột đặt làm trang chủ Add thêm block menu vào trang chủ theo thứ tự mong muốn 3.3 Kết Đã cài đặt thành công website trường ĐH Công nghệ phiên tiếng Anh thiết bị di động địa http://e.udet.vnu.edu.vn/m Đã test thử phần mềm giả lập điện thoại máy tính vài loại điện thoại thật kết hiển thị sau: 55 Giao diện trang chủ: 56 Giao diện trang con: 57 KẾT LUẬN Sau thực đề tài, em có tảng kiến thức Drupal, hiểu rõ chế hoạt động cách thiết kế template cho Phiên dành cho thiết bị di động website tiếng Anh trường ĐH Công nghệ hoạt động bình thường địa http://e.uet.vnu.edu.vn/m Tuy nhiên, hệ thống chưa có chức tự nhận diện thiết bị di động điều hướng sang phiên phù hợp Do thời gian có hạn, hiểu biết hạn chế nên việc thực đề tài khơng tránh khỏi sai sót, mong nhận ý kiến đóng góp thầy giáo bạn 58 TÀI LIỆU THAM KHẢO [1] John K Van Dyk, Pro Drupal Development Second Edition, 2008 [2] Trevor James, Drupal Performance Tips, 2010 [3] Ric Shereves, Drupal Themes, 2008 [4] Drupal Handbook (http://drupal.org) ... 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... DUNG Mục tiêu đề tài xây dựng phiên website trường ĐH Công nghệ phiên tiếng Anh thiết bị di động Phiên rút gọn website, cho phép hiển thị tốt thiết bị di động vốn bị hạn chế kích thước hình Bắt... qua thiết bị di động ngày tăng, để hỗ trợ tối đa cho người dùng, cần phải có phiên dành riêng cho thiết bị di động Chính em lựa chọn nghiên cứu đề tài “Website trường ĐH Công nghệ phiên tiếng Anh