XÂY DỰNG WEBSITE BẰNG MÃ NGUỒN MỞ DRUPAL

Các website chính thức từ drupal * Website chính thức của Drupal * DrupalSites - Danh mục các Website sử dụng Drupal * Drupal Themes - Thư viện các giao diện dành cho Drupal * Drupal Doc

ĐỀ TÀI:

XÂY DỰNG WEBSITE BẰNG MÃ

NGUỒN MỞ DRUPAL

GVHD: Phạm Thi VươngNhóm 14:

- Lê Vũ Hoài Thương 3107410197

- Hồ Thị Như Oanh 3107410180

- Trần Thị Bích Vân 3107410204

MỤC LỤC

MỤC LỤC 2

PHẦN 1: GIỚI THIỆU VÀ CÀI ĐẶT DRUPAL 3

Lịch sử phát triển 3

1.2 Nền tảng 4

1.3 Ứng dụng 4

1.4 Đặc điểm chính 4

1.5 Liên kết ngoài 4

1.6 Các website chính thức từ drupal 5

1.7 Cài đặt và sử dụng drupal 6 5

PHẦN 2: CẤU HÌNH VÀ SỬ DỤNG MỘT TRANG WEB SỬ DỤNG DRUPAL 12

2.1 Giới thiệu về trang Blog điện tử TOV! Plus 12

2.2 Quá trình cài đặt 13

2.3 Các module sử dụng 26

2.3.1 CCK (Content construction kit) 26

2.3.2 FCKeditor 28

2.3.3 IMCE 29

2.3.4 Mollom 30

2.3.5 Pathauto 32

2.3.6 Token 33

2.3.7 Service links 33

2.3.8 Fivestar 35

2.3.9.Voting API 37

PHẦN 1: GIỚI THIỆU VÀ CÀI ĐẶT DRUPAL

Drupal là một khung sườn phát triển phần mềm hướng mô-đun, 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 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 phục vụ 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

Lịch sử phát triển

- Đầu tiên, nó được Dries Buytaert, một lập trình viên mã nguồn mở, tạo ra theo dạng một hệ thống bảng tin (Tiếng Anh: bulletin board system) Đến năm 2001, Drupal trở thành một chương trình mã nguồn mở Drupal, trong tiếng Anh, được chuyển ngữ từ chữ "druppel" của tiếng Hà Lan, nghĩa là "giọt nước"

- Từ tháng 7 năm 2007 đến tháng sáu năm 2008, mã nguồn Drupal đã được tải về

từ website http://drupal.org hơn 1,4 triệu lần Hiện nay, có một cộng đồng rộng lớn đang giúp đỡ phát triển Drupal

- Tháng giêng năm 2009, Drupal 6.9, phiên bản mới nhất, đã được công bố

giải thưởng:

* CMS nguồn mở danh giá nhất năm 2009 do nhà xuất bản Packt bình chọn, cùng

với giải CMS nguồn mở PHP tốt nhất.

* CMS nguồn mở danh giá nhất năm 2008 do nhà xuất bản Packt bình chọn

* CMS nguồn mở danh giá nhất năm 2007 do nhà xuất bản Packt bình chọn

* Website thảo luận, website cộng đồng

* Website nội bộ (Intranet), website doanh nghiệp

* Website cá nhân

* Website thương mại điện tử

* Thư mục tài nguyên

* Hệ thống quản lý công trình phát triển phần mềm

* Drupal Vietnam - Cộng đồng người Việt sử dụng Drupal

* VietCO.OP - Chuyên trang dịch thuật Việt ngữ cho Drupal

1.6 Các website chính thức từ drupal

* Website chính thức của Drupal

* DrupalSites - Danh mục các Website sử dụng Drupal

* Drupal Themes - Thư viện các giao diện dành cho Drupal

* Drupal Documentation - Tài liệu hỗ trợ cho các phát triển viên

1.7 Cài đặt và sử dụng drupal 6

- Đầu tiên các bạn cần 1 bộ code của drupal ( tải tại địa chỉ: www.drupal.com)

- Khi có bộ code rùi bạn giải nén, và tạo 1 database trên host của bạn (ở đây mình

sử dụng XAMPP 1.6.0) , sau đó upload toàn bộ folder Drupal 6.x lên host

dưới đây là localhost ( xampp/htdocs/[folder Drupal 6.x)

- Chọn Install in English

- Thấy xuất hiện như hình, các bạn làm như sau Vào folder

sites/default/default.settings.php , sau đó copy file default.settings.php thành 2 file

và đổi tên 1 file thành settings.php, lúc này có 2 file default.settings.php và

setttings.php

- Khai báo thông tin database

- Thiết lập thông tin về trang web ( tên người quản trị, email, mật khẩu…)

- Thiết lập thông tin admin

- Cài đặt thành công

PHẦN 2: CẤU HÌNH VÀ SỬ DỤNG MỘT TRANG WEB SỬ

DỤNG DRUPAL

2.1 Giới thiệu về trang Blog điện tử TOV! Plus

- TOV!Plus giúp bạn tạo, quản lý 1 trang blog cá nhân, đồng thời TOV!Plus cũng

hỗ trợ cho user tham gia vào cộng đồng các blogger trên 1 diễn đàn được tích hợp sẵn Các user có thể bình luận thoải mái ở bất cứ chủ đề nào

- Các chức năng chính:

+ Thêm/ sửa / xóa 1 blog entry

+ Thêm/ sửa/ xóa 1 topic trên diễn đàn

+ Thiết lập, chỉnh sửa lại thông tin cá nhân

+ Bình luận/ bình chọn các chủ đề quan tâm

+ Chia sẻ chủ đề ưa thích với các trang chia sẻ thông tin khác

+ Tìm kiếm

2.2 Quá trình cài đặt

B1: Install bộ Drupal 6.x như phần I

- Vào phpMyAdmin, tạo cơ sở dữ liệu mới tên dbblog ( trong đó tên admin

để truy cập vào website là: thuong, pass: 12345)

B2: Thiết lập theme mới cho trang web TOV!Plus

- Vào địa chỉ www.drupal.com và tải theme Acquia marina về máy

- Vào thư mục chứa code drupal ( ở đây mình đặt tên thư mục này là

blogsite) và tạo thư mục modules theo đường dẫn sau: xampp/

htdocs/blogsite/theme và paste toàn bộ thư mục Acquia_marina vào

- Vào Administrator/ site building/ theme và thiết lập+ cấu hình theme Acquia marina như sau:

- Chọn save configuration

Lưu ý: nếu muốn thay đổi giao diện trên Acquia marina bạn có thể vào configure

và thiết lập theo ý muốn

B3: Tạo quyền admin trên website

- Vào Administrator/ user management/ Roles

- Gõ admin vào khung role và chọn add role để tạo phân quyền admin cho trang web

B4: Cài đặt và cấu hình một số module cần thiết cho website

- Vào Administrator/site building/modules

- Enable các module sau ( tính năng và cách sử dụng của từng module sẽ được giải thích rõ ở phần sau)

+ CCK (content, content copy, content permissions, filefield, imagefield…)

+ Blog+ Comment+ Forum+ Locale+ Menu+ Profile+ Search+ Taxonomy+ Upload+ FCKeditor+ IMCE+ Mollom+ Token+ Service link ( General service, service link)+ Fivestar

+ Voting API

Vào User management/ permissions và thiết lập các quyền cơ bản cho từng loại user ( ở đây ta có 3 loại người dùng: anonymous (ẩn danh), authorized (đã được xác thực), admin (quản trị hệ thống)) Tùy vào quyền hạn của từng user mà bạn thiết lập quyền cho từng user khác.

B5: Tạo hệ thống nội dung trên website

- Vào Administrator/content management/ Content types/ edit và thiết lập tùy theo ý muốn của bạn:

+ blog entry+ Đối với Forum: Vào Contend management/ Content types/ add new content type ( với title: Subject, type: forum) , và thiết lập các tính năng cho forum topic này

B6: Phân loại nội dung trên website

-Sau đây là bước sắp xếp và phân loại nội dung trên toàn thể website bằng cách sử dụng module taxonomy Người dùng có thể thêm các mục phân loại được lựa chọn từ danh sách

- Vào administrator/Content Management//Taxonomy/ add vocabulary và bắt đầu add các “ từ vựng” được phân loại theo danh sách (blog entry, forum )

- Vào administrator/Content Management//Taxonomy/ add term để tạo các mục “con” cho từng “từ vựng” vừa mới tạo Ở đây mình tạo thành 1 danh sách như sau:

Tên vocabulary:

-Blog entry ( thuộc kiểu nội dung Blog entry): với các term

+ Social+ Fun+ Personality

- Subject (thuộc kiểu nội dung forum topic) với các term:

+ General topics+ Others

B7: Tạo nội dung cho trang web

- Chọn create content/ blog entry để tạo 1 bài blog

- Chọn create conten/ subject để tạo một bài viết trên diễn đàn

B8: Thiết lập hệ thống định hướng cho website (menu navigation)

- Vào site building/ menus/ navigation Trong tab list term , enable các mục sau:

B9: Thiết lập primary link menu

- Vào site building/ menus/ primary links/ add item và tạo thành một cây menu như sau

Kết quả:

B10: Thiết lập giao diện tiếng Việt cho site

- Download file Tiếng Việt Tải file Tiếng việt về tại đây:

Dành cho phiên bản 6.x-1.x-dev: http://www.anhtrang.info/815 Giải nén nó ra một thư mục tạm thời nào đó

- Vào site building/modules và enable module locale

- Thiết lập giao diện Tiếng Việt

Chọn Administer => Chọn “Language” để thiết lập ngôn ngữ

- Sau đó chọn Add language.Trong danh sách lựa chọn các ngôn ngữ, chọn ngôn ngữ Vietnamese(Tiếng Việt) và Chọn “Add language” để thêm ngôn ngữ tiếng Việt.Chọn ngôn ngữ Vietnamese là mặc định cho Drupal và lưu laị cấu hình

- Chọn thẻ Import để Import file Tiếng Việt (Import hai file installer.po và vi.po (file installer.po import trước, file vi.po import sau)).Browse đến file Tiếng việt và chọn Import

- Sau khi Import thành công Việt hóa những chuỗi còn lại

B11: Thiết kế khối nội dung muốn xuất hiện trên giao diện web thông qua Blocks

- Vào administrator/site building/ Blocks

- Bạn sẽ thấy 1 giao diện thiết kế như sau:

- Chọn các blocks và vị trí bạn muốn hiện thị trên giao diện website Ở đây mình chọn như sau:

Lưu ý: nếu bạn muốn tự thiết kế một block cho riêng mình bạn có thể chọn tab Add Block và tạo một block theo ý muốn.

B12: Thêm những tính năng mới cho web và hoàn thiện giao diện ( đối với admin

và cả người dùng) Hoàn tất website

- Truy xuất theo cách khác nhau

- Lưu trữ theo cách khác nhau

- Điều này dẫn đến truy xuất/mở rộng/chia sẽ khó khăn

Hầu như dữ liệu mở rộng đều phụ thuộc vào node (vậy các loại dữ liệu mới phải phụ thuộc rất nhiều vào workflow cũng như cách tương tác của node) Do vậy, CCK ra đời nhằm ghi chú ngắn gọn về cấu trúc thông tin ở Drupal ( hay nói cách khác làm cho các đường đẫn url trở nên trực quan hơn, dễ nhớ hơn)

 Cài đặt và cấu hình :

- Tải gỏi CCK 6x về máy tại địa chỉ www.drupal.com

- Giải nén ra một thư mục tạm, sau đó copy toàn bộ thư mục này vào

xampp/localhost/htdocs/blogsite/all/modules

- Trên giao diện admin, vào site building/ modules và enable module CCK

Trong đó:

- Content: cho phép người quản trị định nghĩa một kiểu dữ liệu mới

- Content copy: cho phép khả năng xuất/nhập các định nghĩa của các trường dữ liệu

- Content Permissions: Thiết lập cấp quyền dữ liệu

- Fieldgroup: tạo nhóm hiển thị cho trường CCK

- Node reference: định nghĩa một kiểu để tham chiếu từ node này đến node khác

- Number: định nghĩa các kiểu theo số thứ thự

- Option Widgets: Định nghĩa vùng chọn,check box, radio button, hình ảnh cho chuỗi và số

- User reference: định nghĩa 1 kiểu dữ liệu tham chiếu đến 1 người dùng từ 1 node

2.3.2 FCKeditor

 Giới thiệu

- Bạn làm việc với các CMS như Wordpress, Joomla hay dotnetnuke, … thấy dễ dàng hơn bởi vì một phần do chúng tích hợp các công cụ hỗ trợ soạn thảo trực quan gọi là WYSIWYG giúp bạn dễ dàng tạo nội dung

- Với người làm Drupal thì không phải vậy Khi mới cài Drupal ra bạn sẽ hết sức

bỡ ngỡ và thất vọng bởi vì không có một editor nào giúp bạn tạo nội dung cho các bài viết

Ngay cả lúc mới làm việc với Drupal cũng vậy, không có công cụ nào giúp bạn cả

mà bạn phải trình bày nội dung hoàn toàn bằng tay với sự am hiểu HTML tốt mới tạo ra một bài viết đẹp được Và nếu không kiên trì bạn sẽ bỏ qua Drupal - một framework hoàn hoảo - chỉ vì nó không có công cụ editor

Dùng FCKEditor bạn nên cài đặt nó cùng với IMCE sẽ tốt hơn IMCE giúp bạn quản lý file theo vai trò người dùng, nó quản lý hạn ngạch cấp phát cho từng người, … Tích hợp hai cái này sẽ hết sức hiệu quả cho ứng dụng của bạn

 Cài đặt và cấu hình

- B1: vào link này tải module FCKeditor http://drupal.org/project/fckeditor

- B2: giải nén và copy toàn bộ thư mục fckeditor lên thư mục modules tại đường dẫn site/all/modules

- B3: vào link này tải fckeditor http://ckeditor.com/download, giải nén và copy toàn bộ thư mục đó vào đường dẫn: site/all/modules/fckeditor/fckeditor Sau đó, vào mục quản trị và enable modules FCKeditor

-B4 :Để có thể upload file và ảnh thì bạn mở file theo đường dẫn

modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php

Mở file fckeditor.config.js trong thư mục /modules/fckeditor/ trên Server.

Bỏ dấu ghi chú phía trước 3 dòng sau:

FCKConfig.PluginsPath = ' / /plugins/' ;

FCKConfig.Plugins.Add( 'drupalbreak' ) ;

FCKConfig.Plugins.Add( 'drupalpagebreak' ) ;

B6:

Mở file config.php trong thư mục

/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/ trên Server tìm đến dòng: $Config['UserFilesAbsolutePath'] = '' ;

thêm vào ngay bên dưới dòng lệnh sau: require_once

" / / / / /filemanager.config.php";

B7: Mở file settings.php trong thư mục /sites/default/ tìm đến biến

$cookie_domain đặt lại cho phù hợp với domain chính của bạn

B8: Để có thể hiển thị nội dung soạn thảo bạn phải vào địa chỉ

http://drupal.org/project/bueditor, Htmlarea Tuy nhiên, khi sử dụng các add-on này, chúng ta lại thấy phát sinh vấn đề: phải upload hình ảnh ở một nơi nào đó trước trên internet, rồi thì mới có thể chèn ảnh đó vào trang nội dung, có vẻ như không tiện dụng cho lắm, tại sao không:

- Chèn vào các ảnh đã upload như thế nào?

- Chèn ảnh mới ngay sau khi upload

- Mỗi người dùng có trang riêng để quản lý các tập tin cá nhân đã upload

- Upload các tập tin không phải ảnh

- Chức năng tạo folder con

-

 Cài đặt và cấu hình

1 Tải về module IMCE tại: http://drupal.org/project/imce

2 Giải nén và upload lên thư mục: /sites/all/module

3 Đăng nhập với tư các admin, vào trang quản lý module, kích hoạt IMCE

4 Cấu hình IMCE tại /admin/settings/imce

4.1 Common settings: Click chọn mục "Enable FCKEditor support"

5 Phân quyền người dùng tại /admin/user/access Xác thực quyền sử dụng IMCE (access imce) cho một số role nhất định

- Không chỉ ở những nội dung được đăng, mà còn ở hoạt động trong quá khứ và danh tánh của người gửi Trong một thời gian ngắn, Mollom xử lý các bài viết một cách thông minh và quyết định nội dung nào không được chấp nhận Do đó,

Mollom cho phép bạn ,cho phép người dùng ẩn danh có thể gửi bài bình luận và nội dung khác trên trang web

 Cài đặt và cấu hình

-Tải module mollom tại địa chỉ www.drupal.com

- Giải nén ra 1 thư mục tạm, sau đó copy toàn bộ thư mục đó vào site/all/module

- Sau đó, vào trang web mollom.com , đăng kí làm thành viên,vào manage site để lấy 2 key: public và private

- Vào file configuration/ mollom /settings và cop 2 key vừa có được lên access key

 Cài đặt và cấu hình

Trước tiên bạn cài 3 module là pathauto, token và transliteration, sau đó tải file i18n-ascii.txt về máy bạn, đây là file đã được thêm các ký tự dành cho tiếng Việt Sau khi đã tải file về, bạn upload file này vào thư mục sites/all trên server

Vào thiết lập Automated alias settings rồi đánh dấu chọn phần Transliterate prior to creating alias trong phần thiết lập chung (bạn phải có file i18n-ascii.txt copy đúng chỗ thì mới đánh dấu chọn phần này được)

Từ giờ trở đi pathauto sẽ tự động gán alias dựa theo tiêu đề bài viết của bạn và tự động xóa dấu tiếng Việt Giả sử tiêu đề bài viết của bạn là nội dung chính thì sẽ được tự động gán alias là noi-dung-chinh

2.3.6 Token

 Giới thiệu

- Hỗ trợ cho pathauto, được tải và cài đặt kèm theo pathauto

 Cài đặt và cấu hình

-Tải module token tại địa chỉ www.drupal.com

- Giải nén ra 1 thư mục tạm, sau đó copy toàn bộ thư mục đó vào site/all/module

- Vào administrator để enable module token

-Tải module fivestar tại địa chỉ www.drupal.com

- Giải nén ra 1 thư mục tạm, sau đó copy toàn bộ thư mục đó vào site/all/module

- Vào administrator để enable module fivestar và thiết lập những tính năng cơ bản