Thiết kế website động với mã nguồn mở Drupal 7


Drupal là một hệ thống quản trị nội dung (CMS) mã nguồn mở, miễn phí, rất mạnh mẽ và ổn định, được xây dựng cách đây hơn 10 năm.Sự ổn định và mạnh mẽ từ nhân của Drupal đã khiến cho mã nguồn này được tin dùng từ những blog, website nhỏ đến các mạng xã hội cộng tác lớn.

Với cấu trúc linh hoạt giúp cho các lập trình viên mở rộng chức năng không hạn chế theo nhu cầu sử dụng. Ví dụ như bạn có thể gán thêm thuộc tính cho rất nhiều đối tượng, trong đó có bài viết, bình luận, người dùng và thậm chí gán thuộc tính cho các thẻ (tag). Một thế mạnh khác của Drupal là rất thân thiện với các bộ máy tìm kiếm, giúp cho các webmaster đở vất vả trong quá trình SEO của mình. Ngoài ra, mã nguồn còn được tối ưu để nâng cao hiệu suất hoạt động giúp tiết kiệm tài nguyên của hệ thống.

Phiên bản Drupal 7 mang đến một giao diện quản trị hoàn toàn mới với rất nhiều cải tiến cho người phát triển website và người quản lí nội dung. Nó hỗ trợ nhiều CSDL khác nhau, từ MySQL cho đến PostgreSQL, SQLite, MS SQL Server, Oracle… và thậm chí có thể mở rộng để hỗ trợ các dạng NoSQL. Bên cạnh các ưu điểm như thế, Drupal còn tồn tại một khuyết điểm nhỏ là khó sử dụng đối với người dùng mới. Trong loạt bài viết này, tác giả sẽ giới thiệu đến các bạn một số bước xây dựng và thiết kế cơ bản nhất dựa trên mã nguồn Drupal 7.

Drupal 7 1 Thiết kế website động với mã nguồn Drupal 7 – phần 1

  • 1. Tạo localhost bằng XAMPP :

Localhost được hiểu như là một hosting hoạt động ngay trên máy tính của bạn, với địa chỉ IP mặc định là 127.0.0.1 và tên miền của nó là http://localhost/. Localhost được người quản trị website sử dụng vào việc thiết kế website và kiểm tra code trước khi đưa vào hoạt động trên hosting. Hiện nay có nhiều phần mềm tạo localhost, bài viết này sẽ đưa ra một số gợi ý về cách tạo localhost bằng phần mềm XAMPP.

*Tải về và cài đặt XAMPP:

Đầu tiên, bạn hãy tải phần mềm XAMPP từ trang chủ: http://www.apachefriends.org hoặc có thể tải bản 1.7.4 có dung lượng 63,2MB tại địa chỉ này (Mediafire: http://www.mediafire.com/?dq5prbdxp2xcpj5).

Tại trang chủ của XAMPP, bạn bấm vào liên kết XAMPP trên thanh menu, rồi chọn phiên bản XAMPP phù hợp với hệ điều hành. Đối với hệ điều hành Windows, bạn bấm vào liên kết XAMPP for Windows rồi kéo thanh cuộn của trình duyệt đến khung XAMPP for Windows 1.7.4, 26.1.2011 và bấm vào một trong ba định dạng (exe, zip, 7z) để tải về.

Drupal 7 2 Thiết kế website động với mã nguồn Drupal 7 – phần 1

Sau khi tải về, bạn bấm đôi vào tập tin xampp-win32-1.7.4-VC6-installer.exe để khởi động tiến trình cài đặt. Trong hộp thoại hiện ra, bạn bấm Next để chuyển đến bước Choose Install Lacation.

Drupal 7 3 Thiết kế website động với mã nguồn Drupal 7 – phần 1

Tại bước này, bạn bấm Browse trong khung Destination Folder nếu muốn chọn lại thư mục lưu trữ, mặc định là C:xampp với C là ổ đĩa chứa hệ điều hành.
Đồng thời, bạn cũng được cung cấp hai thông tin Space required- dung lượng yêu cầu, Space available- dung lượng còn trống, bấm Next.

Drupal 7 4 Thiết kế website động với mã nguồn Drupal 7 – phần 1

Đến bước XAMMPP Options, bạn có thể thay đổi các thiết lập bằng cách bỏ dấu hoặc thêm dấu chọn ở các ô tương ứng.
Gồm có các thiết lập sau:
+ Create a XAMPP desktop icon (tạo biểu tượng trên màn hình desktop).
+ Create an Apache Friend XAMPP folder in the start menu (tạo menu trong danh sách của nút Start).
+ Install Apache as service (cài đặt thành phần Apache).
+ Install MySQL as service (cài đặt thành phần MySQL).
+ Install Filezilla as service (cài đặt thành phần Filezilla).
Bấm Install để bắt đầu tiến trình cài đặt.

Sau khi cài đặt xong, bạn sẽ nhìn thấy biểu tượng của chương trình chạy ở khay hệ thống và cửa sổ quản lý ứng dụng XAMPP Control Panel Application. Thư mục cài đặt mặc định của phần mềm là C:xampp, với C: là ổ đĩa chứa hệ điều hành, thư mục gốc của localhost là htdocs (C:xampphtdocs), nơi đặt mã nguồn Drupal. Thư mục gốc này hoàn toàn có thể thay đổi thành một tên khác nhưng việc thay đổi khá phức tạp và gây ra lỗi trong lúc chạy XAMPP khi thao tác thay đổi không chính xác.

Drupal 7 5 Thiết kế website động với mã nguồn Drupal 7 – phần 1

Lưu ý,  bạn không nên tạo localhost bằng phần mềm Appserv vì khi cài đặt Drupal 7 có thể xảy lỗi ở bước Set up database.

*Tạo cơ sở dữ liệu :

Trong quá trình cài đặt Drupal 7 sẽ đòi hỏi các thông số liên quan đến cơ sở dữ liệu (Database). Do đó, bạn cần phải tạo ra tên cơ sở dữ liệu trong cửa sổ quản lý phpMyAdmin. Để thực hiện, bạn nhập vào thanh Address của trình duyệt Internet Explorer địa chỉ http://localhost/phpmyadmin.

Drupal 7 6 Thiết kế website động với mã nguồn Drupal 7 – phần 1
Trong trang hiện ra, bạn nhập tên cơ sở dữ liệu vào ô bên dưới dòng chữ Create new database (ví dụ nhập drupal, tên cơ sở dữ liệu này được sử dụng cho cả bài viết), nhấn nút Create. Lưu ý, bạn cần ghi nhớ tên cơ sở dữ liệu đã tạo để khai báo trong quá trình cài đặt Drupal. Hoàn toàn khác với Appserv, thay vì bạn tự quy định mật khẩu đăng nhập cơ sở dữ liệu thì XAMPP sẽ cung cấp luôn thông số: database user: root, password: (không có).

Drupal 7 7 Thiết kế website động với mã nguồn Drupal 7 – phần 1
  • 2. Các bước cài đặt mã nguồn Drupal 7 trên máy của bạn :

* Tải về mã nguồn Drupal 7

Như đã giới thiệu, Drupal 7 là một hệ thống quản trị nội dung mã nguồn mở, rất ổn định và mạnh mẻ. Nó được cung cấp miễn phí tại trang chủ http://drupal.org. Tại trang chủ, bạn bấm vào liên kết Get Start with Drupal để chuyển đến trang tải về Drupal 7.2.

Drupal 7 P2 1 Thiết kế website động với mã nguồn Drupal 7 – phần 2

Tiếp theo, bạn bấm Download Drupal 7.2 và bấm vào liên kết zip (3,01MB) ở phiên bản 7.2. Bạn có thể dùng trình tăng tốc download hoặc tải bằng trình download của Windows.

Drupal 7 P2 2 Thiết kế website động với mã nguồn Drupal 7 – phần 2

Ngoài ra, bạn có thể tải bản Drupal 7.2 được tích hợp sẵn gói ngôn ngữ tiếng Việt và một số module hữu ích giúp tăng khả năng SEO của Drupal tại

Sau khi tải về, bạn giải nén rồi sao chép thư mục drupal-7.2 vào thư mục gốc htdocs của localhost (C:xampphtdocs), rồi đổi tên thư mục này lại theo ý thích của bạn, chẳng hạn: news (tên thư mục này được sử dụng cho cả bài viết).

Drupal 7 P2 3 Thiết kế website động với mã nguồn Drupal 7 – phần 2

*Cài đặt Drupal 7

Bạn khởi động trình duyệt Mozilla Firefox rồi nhập vào thanh địa chỉ đường dẫn http://localhost/news/install.php (hoặc http://localhost/news/). Quá trình cài đặt Drupal phải trải qua 7 bước. Trong bước đầu tiên Choose profile, bạn sẽ có hai lựa chọn Standard và Minimal. Bạn nên chọn kiểu cài đặt Standard vì nó sẽ giúp bạn cài đặt đầy đủ những tính năng cần thiết cho việc quản lý website, còn kiểu cài đặt Minimal chỉ kích hoạt một số tính năng, bấm Save and continue để tiếp tục.

Drupal 7 P2 4 Thiết kế website động với mã nguồn Drupal 7 – phần 2

Đến bước Choose language, mặc định chỉ có duy nhất ô chọn English (built-in). Nếu muốn thêm gói ngôn ngữ khác (ví dụ Tiếng Việt) thì bạn bấm vào liên kết Learn how to install Drupal in other languages để được hướng dẫn cụ thể. Hoặc truy cập trực tiếp vào địa chỉ http://localize.drupal.org/translate/downloads để tải gói Vietnamese dành cho phiên bản 7.2. Sau khi tải về, bạn hãy sao chép tập tin này vào thư mục C:xampphtdocsinfoprofilesstandardtranslations.

Khi đó, ở bước thứ hai này sẽ có thêm lựa chọn Vietnamese (Tiếng Việt). Nhưng để thuận tiện cho việc cài đặt Module sau này thì bạn nên chọn ngôn ngữ English. Khi đã hoàn tất các bước thiết kế thì mới chuyển giao diện về ngôn ngữ Tiếng Việt. Bấm Save and continue để chuyển sang bước tiếp theo.

Drupal 7 P2 5 Thiết kế website động với mã nguồn Drupal 7 – phần 2
Bước Verify requirements không cần thiết khi cài đặt trên localhost. Nên tiến trình cài đặt tiếp tục chuyển qua bước Set up database.

Trong bước này, bạn giữ mặc định ở mục Database type, nhập tên cơ sở dữ liệu vào ô Database name (ví dụ như drupal đã khai báo trong phần 1), nhập root vào ô Database username, để trống ở ô Database password. Riêng đối với mục Advanced Options, bạn có thể thêm tiền tố vào trước các tên bảng trong cơ sở dữ liệu, ví dụ như drupal_, rồi bấm Save and continue.

Drupal 7 P2 6 Thiết kế website động với mã nguồn Drupal 7 – phần 2
Khi bước Install profile hoàn tất thì bạn tiến hành khai báo các thông tin liên quan đến website cần tạo, như Site name- tên website, Site email address- địa chỉ email nhận thông tin về tình trạng website, Username- tên tài khoản quản trị, Password và Confirm password- mật khẩu.

Drupal 7 P2 7 Thiết kế website động với mã nguồn Drupal 7 – phần 2

Ngoài ra còn có một số thiết lập khác: Default country- chọn quốc gia, Default time zone- chọn múi giờ mặc định, Check for updates automatically- kiểm tra cập nhật tự động, Receive e-mail notifications- nhận thông báo qua email, xong bấm Save and continue. Đến bước Finished, quá trình cài đặt đã hoàn tất, bạn bấm vào liên kết Visit your new site để vào trang chủ của website.

Drupal 7 P2 8 Thiết kế website động với mã nguồn Drupal 7 – phần 2

  • 3. Làm quen với hệ thống của Drupal 7 :

Trên thanh công cụ quản trị hệ thống của Drupal có các menu Dashboard- bảng quản lý các tác vụ thường dùng, Content- quản lý nội dung, Structure- quản lý cấu trúc website, Apperance- quản lý giao diện, People- quản lý tài khoản người dùng, Modules- quản lý cài đặt, kích hoạt, phân quyền module, Configuration- cấu hình website, Reports- các báo cáo về tình trạng hệ thống, Help- trợ giúp, Add content- thêm vào bài viết mới, Find content- tìm kiếm bài viết.

Drupal 7 P2 9 Thiết kế website động với mã nguồn Drupal 7 – phần 2

Đầu tiên, bạn cần thay đổi một số thông tin cơ bản của website. Bạn vào menu Configuration rồi bấm Site imformation tại khung System. Ở trang hiện ra, bạn có thể thêm vào câu khẩu hiệu tại ô Slogan, sửa tên website tại ô Site name, Number of posts on front page- chọn số lượng bài viết hiển thị tại trang chủ. Riêng đối với khung Error Pages, bạn có thể tạo trang báo lỗi 404 (báo lỗi trang không tồn tại) để thân thiện người dùng, rồi thêm đường dẫn vào ô Default 404 (not found) page. Khi xong, bạn bấm Save Configuration để thay đổi có hiệu lực.

Để viết bài cho website, bạn bấm Add content trên thanh công cụ, bấm vào liên kết Article ở trang hiện ra. Tiếp theo, bạn nhập tiêu đề bài viết vào ô Title, nhập các từ khóa vào ô Tags (các từ khóa này giúp ích quá trình SEO, ngăn cách giữa các từ khóa là dấu phẩy (,)), nhập nội dung vào khung Body (khung nhập nội dung này rất đơn giản, không có các công cụ soạn thảo văn bản, bạn có thể sử dụng các thẻ HTML), chọn định dạng văn bản ở trường Text Format.

Drupal 7 P2 10 Thiết kế website động với mã nguồn Drupal 7 – phần 2

Bạn bấm nút Browse ở mục Image để chèn hình ảnh đại diện cho bài viết. Drupal chỉ hỗ trợ các định dạng ảnh png, gif, jpg, jpeg, dung lượng tập tin tải lên không quá 8MB.

Drupal 7 P2 11 Thiết kế website động với mã nguồn Drupal 7 – phần 2
Ngoài ra, bạn có thể quy định một số thuộc tính cho bài viết như Menu Settings- đánh dấu chọn vào ô Provide a menu link để tạo menu cho bài viết, Comment settings- mở hoặc đóng tính năng bình luận ở cuối bài viết, Authoring Information- thông tin về tác giả bài viết. Khi viết xong, bạn bấm Save.

Drupal 7 P2 12 Thiết kế website động với mã nguồn Drupal 7 – phần 2

  • 4. Tùy chỉnh các khung tính năng trên giao diện website :

Sau khi cài đặt xong, giao diện mặc định của website Drupal 7 rất đơn giản chỉ có khung tính năng (Block): Search form, Navigation, User login, Powered by Drupal. Và các khung tính năng này chỉ hiển thị với một nhóm người dùng nhất định, ví dụ khung Navigation chỉ hiển thị với người quản trị website.

Drupal 7 P3 1 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Do đó, bạn cần phải bố trí lại vị trí các khung tính năng cho phù hợp và phân quyền xem đối với các nhóm người dùng. Đầu tiên, bạn đăng nhập vào tài khoản quản trị rồi bấm vào menu Structure trên thanh công cụ. Trong trang hiện ra, bạn bấm vào liên kết Blocks.

Ở cột Blocks, bạn sẽ thấy các khung tính năng System Help- trợ giúp hệ thống, Main page content- phần nội dung chính, Navigation- thanh điều hướng, User login- khung đăng nhập của người dùng, Power by Drupal- cụm từ thông tin bản quyền,…Trong cột Region, bạn bấm vào nút xổ xuống sẽ có các vị trí như sau: Header- đầu trang, Highlighted- ở đầu khung nội dung, Sidebar first- cột tính năng bên trái, Sildebar second- cột tính năng bên phải, Footer- chân trang,…Bạn chỉ cần chọn vị trí ở cột Region tương ứng khung tính năng muốn thay đổi.

Drupal 7 P3 2 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Riêng với cột Weight, bạn có thể quy định thứ tự của các khung tính năng. Ví dụ, ở vị trí Sidebar first có ba khung tính năng User login, Navigation, Search form, bạn quy định các số lần lượt là 0, 1, 2 thì ở trang chủ của website chúng được xếp theo thứ tự này từ trên xuống. Nếu không tìm thấy cột Weight thì bạn bấm Show row weights ở đầu cột Operations để hiện thị cột này.

Ngoài ra, mục Disabled chứa các khung tính năng chưa được kích hoạt. Để thuận tiện cho khách truy cập theo dõi các bài viết trên website, bạn có thể kích hoạt thêm các khung tính năng Main menu- danh mục chính, Recent comments- bình luận mới nhất, Recent content- nội dung mới nhất, Who’s new- thành viên mới đăng kí, Who’s online- thành viên đang trực tuyến.

Drupal 7 P3 3 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Ngược lại, nếu muốn ẩn một khung tính năng nào đó thì bạn bấm vào ô vị trí ở cột Region của khung đó, chọn None. Chẳng hạn muốn ẩn dòng chữ bản quyền Power by Drupal. Khi xong, bạn bấm Save Blocks để thay đổi có hiệu lực.

Drupal 7 P3 4 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Để cấp quyền xem cho các nhóm người dùng website, bạn vào menu People trên thanh quản trị rồi bấm thẻ Permissions. Tại đây có ba nhóm người dùng: Anonymous User- người dùng ẩn danh, Authenticated User- thanh viên đã được xác thực, Administrator- người quản trị website.

Bạn có thể cấp phép hiển thị khung Search đối với nhóm Anonymous User bằng cách đánh dấu chọn vào ô tương ứng với dòng Use search. Lưu ý, bạn cần phải xem xét kỹ khi cấp phép cho nhóm Anonymous User, đặc biệt là đối với các tính năng quan trọng. Các tính năng này sẽ được trình bày kỹ hơn trong phần quản lý người dùng.

Drupal 7 P3 5 Thiết kế website động với mã nguồn Drupal 7 – phần 3

  • 5. Cài đặt và quản lý giao diện mới :

Trong gói cài đặt Drupal 7.2 chỉ cung cấp bốn giao diện là Bartik 7.2 (giao diện mặc định), Seven 7.2 (đã được kích hoạt) và  Garland 7.2, Stark 7.2 (chưa được kích hoạt). Để kích hoạt giao diện và chọn làm mặc định, bạn vào menu Appearance rồi bấm vào liên kết Enable and set default ở bên dưới tên giao diện.

Drupal 7 P3 6 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Khi đã chọn giao diện làm mặc định thì bạn vẫn có thể tùy chỉnh các thuộc tính của giao diện bằng cách bấm Settings. Tùy vào tính năng của từng loại giao diện mà có cách tùy chỉnh khác nhau. Nhưng thường có phần chung là Toggle Display (bật hay tắt việc hiển thị logo, tên website, khẩu hiệu, hình ảnh trong bài viết, bình luận,…), Logo image settings (thiết lập sử dụng logo mặc định), Shortcut icon settings (thiết lập hiển thị biểu tượng (favicon) ở đầu địa chỉ website).

Drupal 7 P3 7 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Đối với giao diện Bartik còn có tùy chỉnh về màu sắc của các thành phần như màu nền, màu chữ, màu của các liên kết, màu viền, màu của các khung tính năng, màu của tiêu đề và khẩu hiệu website, màu chân trang. Khi thay đổi xong các tùy chỉnh thì bạn bấm Save configuration để lưu lại.

Nếu cảm thấy các giao diện này không phù hợp với nhu cầu thì bạn bấm Install new theme để tiến hành cài đặt giao diện mới. Bạn sẽ có hai lựa chọn cài đặt Install from a URL- cài đặt từ liên kết đến tập tin trên máy chủ của Drupal, ví dụ: http://ftp.drupal.org/files/projects/danland-7.x-1.0.tar.gz hoặc Upload a module or theme archive to install- cài đặt từ tập tin trên máy tính (định dạng zip, tar, tgz, gz, bz2), xong bấm Install.

Drupal 7 P3 8 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Để tìm giao diện tương thích với Drupal 7, bạn truy cập vào địa chỉ chuyên cung cấp giao diện của Drupal: http://drupal.org/project/themes. Trong trang web hiện ra, bạn bấm vào chữ Any ở mục Filter by compatibility chọn 7.x rồi bấm Search.

Drupal 7 P3 9 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Bạn tìm một giao diện vừa ý trong danh sách giao diện hiển thị bên dưới rồi tải về. Mỗi giao diện tại đây có đầy đủ các thông tin về phiên bản hỗ trợ, tính năng, tác giả, ngày chỉnh sửa gần nhất, …

Ví dụ, bạn cần tải giao diện Marinelli về sử dụng, thì bấm vào dòng chữ Marinelli rồi tìm đến mục Download chọn định dạng Zip. Sau khi tải về, bạn giải nén tập tin và sao chép vào thư mục Themes (đường dẫn htdocs/news/sites/all/themes). Bây giờ, bạn có thể vào menu Appearance để kích hoạt và sử dụng giao diện.

Drupal 7 P3 10 Thiết kế website động với mã nguồn Drupal 7 – phần 3
Nếu bạn là một người am hiểu về các ngôn ngữ lập trình web thì việc chỉnh sửa và thiết kế giao diện sẽ không mấy khó khăn. Tuy nhiên có một lưu ý nhỏ là phải có một tập tin .info nằm trong thư mục chứa giao diện. Tập tin này chứa những thông tin cơ bản về giao diện như tên, thông tin tác giả, chú thích,…

Ví dụ:

name = drupal7

description = Theme drupal7(http://drupal7.org/)

screenshot = images/screenshot.png

core = 7.x

engine = phptemplate

; Regions

regions[header] = Header

regions[superfish_menu] = Superfish Menu

regions[highlighted] = Highlighted

regions[banner] = Banner

regions[preface_one] = Preface One

regions[preface_two] = Preface Two

regions[preface_three] = Preface Three

regions[content] = Content

regions[sidebar_first] = Sidebar First

regions[sidebar_second] = Sidebar Second

Ngoài ra, bạn có thể tạo giao diện Drupal 7 theo sơ đồ sau:

Drupal 7 P3 11 Thiết kế website động với mã nguồn Drupal 7 – phần 3

  • 6. Tạo giao diện mới bằng dịch vụ Drupal Garden :

Nếu không thành thạo lắm về các mã PHP, CSS thì bạn có thể nhờ đến dịch vụ tạo website trực tuyến Drupal Gardens để tạo ra những mẫu giao diện đẹp và tương thích với Drupal 7. Drupal Gardens là một dịch vụ giúp người dùng mới trải nghiệm mã nguồn Drupal 7 trên máy chủ của họ. Theo giới thiệu tại trang chủ, bạn dễ dàng tạo ra một website chỉ trong thời gian là 15 phút, với nhiều module đã cài đặt sẵn.

Đầu tiên, bạn cần đăng kí sử dụng dịch vụ tại địa chỉ http://www.drupalgardens.com, có thể tham khảo cách đăng kí và sử dụng một số tính năng của dịch vụ tại địa chỉ này. Sau khi đăng nhập vào tài khoản quản trị website của dịch vụ, bạn bấm vào menu Appearance rồi bấm chọn một mẫu trong danh sách giao diện của Garden themes.

Drupal 7 P3 12 Thiết kế website động với mã nguồn Drupal 7 – phần 3
Bây giờ, bạn sử dụng tính năng Palettes trong thẻ Brand cho việc phối màu trên giao diện với các bảng màu ở khung bên phải. Tính năng Logo giúp bạn thêm vào biểu tượng ở đầu trang và biểu tượng nhỏ (Favicon) trên thanh tiêu đề của trình duyệt, bấm vào nút Browse rồi duyệt đến tập tin ảnh trên máy tính. Ở thẻ Layout đưa ra một số cách bố trí nội dụng trên website cho bạn lựa chọn.

Drupal 7 P3 13 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Thẻ Style gồm có ba tính năng: Font- giúp quy định font, cỡ, màu sắc, kiểu chữ; Borders & Spacing- đường viền và khoảng cách giữa các khung; Background- hình nền và cách hiển thị. Ngoài ra còn có một số thiết lập nâng cao về CSS ở thẻ Advanced. Khi xong, bạn bấm Save as để lưu lại, nhập vài kí tự vào hộp thoại Save theme as hiện ra.

Drupal 7 P3 14 Thiết kế website động với mã nguồn Drupal 7 – phần 3

Khi đã thiết kế xong giao diện thì bạn xem lại giao diện ở  địa chỉ trang chủ mà dịch vụ cung cấp, rồi bấm Export nếu không có chỉnh sửa. Bạn nhập tên giao diện vào hộp thoại Export theme as, bấm OK để tải về máy. Đến đây, bạn chỉ cần giải nén tập tin đã tải về vào thư mục themes và kích hoạt sử dụng giao diện.

Drupal 7 P3 15 Thiết kế website động với mã nguồn Drupal 7 – phần 3
Với tính năng Article trong Add content thì việc viết bài cho website Drupal 7 gặp rất nhiều khó khăn, bởi vì không có các công cụ soạn thảo trong khung Body. Bên cạnh đó, các nội dung trên website Drupal 7 được đối xử như nhau (được xem là một node) không phân biệt chủ đề hay nhóm chuyên mục. Phần này sẽ giới thiệu một số gợi ý về cách tạo thêm thanh công cụ soạn thảo văn bản, tổ chức và phân loại nội dung, …

  • 7. Cài đặt và thiết lập trình soạn thảo TinyMCE :

Đầu tiên, bạn cần truy cập vào địa chỉ http://drupal.org/project/wysiwyg để tải về module Wysiwyg. Chức năng của module này là cho người dùng thấy ngay những thay đổi đối với những thao tác mà họ đang thực hiện. Khi trang hiện ra, bạn kéo thanh cuộn của trình duyệt xuống đến mục Download rồi bấm vào liên kết Zip (149,02KB) ở phiên bản 7.x-2.0. Sau đó, bạn tiến hành giải nén và sao chép vào thư mục modules (đường dẫn htdocs/news/sites/all/modules).

Drupal 7 P4 1 Thiết kế website động với mã nguồn Drupal 7 – phần 4
Bạn quay trở lại trình duyệt và bấm vào menu Modules trên thanh công cụ quản trị hoặc truy cập vào đường dẫn http://localhost/info/#overlay=admin/modules rồi kéo thanh cuộn đến cuối trang, đánh dấu chọn vào ô trước tên module Wysiwyg, bấm Save Configuration để bắt đầu tiến trình kích hoạt. Bạn có thể bấm vào liên kết check manually để đảm bảo hoàn tất cho quá trình cập nhật.

Drupal 7 P4 2 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Sau khi kích hoạt xong, bạn trở xuống module và bấm vào Configure ở cột Operations. Ở trong khung Installation Instructions là danh sách các trình soạn thảo và trạng thái cài đặt của chúng. Danh sách này gồm có CKEditor, FCKeditor, jWYSIWYG, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig, WYMeditor, YUI editor. Bạn có thể chọn cho mình một trình soạn thảo vừa ý trong danh sách này. Trong mục này, tác giả chọn trình soạn thảo TinyMCE để minh họa cách cài đặt.

Bạn truy cập vào trang chủ http://tinymce.moxiecode.com của TinyMCE để tải về phiên bản mới nhất. Tại thời điểm của bài viết, bạn có thể tải phiên bản TinyMCE 3.4.2 tại địa chỉ này: http://www.mediafire.com/?arrvac79y75ukj7

Sau khi tải về, bạn tạo thư mục libraries trong thư mục all (htdocs/news/sites/all) và giải nén thư mục tinymce vào thư mục mới vừa tạo.

Drupal 7 P4 3 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Bây giờ, bạn vào lại phần cấu hình của module Wysiwyg để tiến hành kích hoạt sử dụng trình soạn thảo TinyMCE  trên các định dạng văn bản (truy cập nhanh qua đường dẫn: http://localhost/info/#overlay=admin/config/content/wysiwyg). Trong cột Input Format có ba định dạng Filtered HTML, Full HTML, Plain Text, bạn bấm chuột vào ô tương ứng ở cột Editor để chọn sử dụng TinyMCE, xong bấm Save.

Drupal 7 P4 4 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Để thiết lập các tính năng của TinyMCE, bạn bấm Edit ở cột Operations sau khi đã kích hoạt sử dụng. Bạn giữ mặc định các thiết lập ở mục Basic Setup. Đối với mục Button and Plugins, bạn đánh dấu chọn vào các nút lệnh cần hiển thị trên thanh công cụ soạn thảo văn bản. Chẳng hạn như: Bold, Italic, Underline, Align right, Justify, Copy, Paste, Cut, Image, Link, Font, Font size, Font style, HTML block format, Table, Media,…

Drupal 7 P4 5 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Ngoài ra, bạn còn có thể tùy chỉnh về cách hiển thị của các nút lệnh trên thanh công cụ. Ở mục Editor Appearance, bạn chọn vào các trường để thay đổi Toolbar location- vị trí hiển thị thanh công cụ, Button Alignment- canh chỉnh các nút lệnh và đánh dấu chọn vào ô Enable resizing button để kích hoạt tính năng thay đổi kích thước nút lệnh. Khi xong, bạn bấm Save.

Drupal 7 P4 6 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Để kiểm tra kết quả cài đặt, bạn bấm Add content rồi chọn Text Format dạng Full HTML ở trang hiện ra. Nếu xuất hiện thanh công cụ bên dưới chữ Body thì bạn đã cài đặt và thiết lập thành công.

Drupal 7 P4 7 Thiết kế website động với mã nguồn Drupal 7 – phần 4

  • 8. Tổ chức nội dung và tạo thêm kiểu nội dung mới:

Module Taxonomy là một công cụ mạnh mẽ cho phép người quản trị web tổ chức, phân loại nội dung. Module này đã được tích hợp sẵn vào nhân của Drupal 7 và đã kích hoạt trong quá trình cài đặt. Trước khi sử dụng Taxonomy, bạn cần cài đặt thêm module Taxonomy Menu (module giúp cho việc sử dụng Taxonomy thuận tiện hơn) bằng cách vào địa chỉ http://drupal.org/project/taxonomy_menu, rồi tải về và giải nén vào thư mục modules trong thư mục info/sites/all, kích hoạt sử dụng modules.

Để khai thác tính năng của Taxonomy, bạn bấm vào menu Structure trên thanh công cụ quản trị, rồi bấm Taxonomy trong trang hiện ra.

Drupal 7 P4 8 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Đối với Taxonomy, bạn cần quan tâm đến hai đối tượng Vocabulary và Term. Có thể hiểu, Vocabulary là nhóm chuyên mục và Term là chuyên mục con thuộc một nhóm chuyên mục nào đó. Ví dụ: bạn cần tạo các nhóm chuyên mục: Phần mềm, Thiết bị số. Các chuyên mục con thuộc Phần mềm là: Văn phòng, Hệ thống, Bảo mật, Đồ họa, Internet; và thuộc Thiết bị số là: Laptop, Desktop, Tablet, Camera. Dạng cây thư mục:

– Phần mềm

– Văn phòng

– Hệ thống

– Bảo mật

– Đồ họa

– Internet

– Thiết bị số

– Laptop

– Desktop

– Tablet

– Camera

Khi đó, bạn bấm Add vocabulary để tiến hành khai báo nhóm chuyên mục. Trong trang hiện ra, bạn nhập Name- tên nhóm chuyên mục (ví dụ: phanmem), Description- chú thích, chọn Main menu ở mục Menu location, bấm Save. Thực hiện tương tự cho các nhóm chuyên mục còn lại.

Drupal 7 P4 9 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Bạn trở lại trang quản lý nhóm chuyên mục (Vocabulary), bấm vào liên kết add terms để tạo chuyên mục con. Tiếp theo, bạn nhập vào các ô Name- tên chuyên mục (ví dụ: Văn phòng), Description- chú thích, URL alias- địa chỉ liên kết ảo do  bạn tự quy định (Drupal cũng tạo một địa chỉ liên kết khác). Riêng đối với mục Relations, bạn chọn chuyên mục chính (root) hoặc chuyên mục con thuộc chuyên mục chính (nếu có) tại ô Parent terms, thứ tự sắp xếp tại ô Weight, bấm Save. Thực hiện tương tự cho toàn bộ các chuyên mục con còn lại.

Drupal 7 P4 10 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Khi đã tạo xong các nhóm chuyên mục thì bạn cần phải tạo thêm kiểu nội dung mới tương ứng với các nhóm chuyên mục đó. Bởi vì, kiểu nội dung Article sẽ tạo ra các Tags và không phụ thuộc vào các nhóm chuyên mục đã tạo. Để thực hiện, bạn vào menu Structure, bấm Content types rồi bấm Add content type.

Drupal 7 P4 11 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Trong trang Content types, bạn điền các thông tin: Name- tên nội dung (ví dụ: phanmem), Description- chú thích và giữ mặc định các thiết lập bên dưới, rồi bấm Save and add fields. Tiếp theo, ở thẻ Manage Fields có hai trường Title và Body được cung cấp sẵn, bạn cần thêm vào các trường mới như tagpm, imagepm. Bạn thực hiện: nhập tagpm vào ô Add new field, thứ tự ở cột Weight, tên trường ở cột Name (ví dụ: tagpm, có dạng field_tagpm), chọn Term reference ở cột Field, chọn Check boxes/ratio buttons ở cột Widget, bấm Save.

Drupal 7 P4 12 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Ở thẻ Field settings, bạn chọn nhóm chuyên mục tại mục Vocabulary, bấm Save field settings. Đến thẻ Edit, bạn nhập tên trường vào ô Label (ví dụ: Phần mềm), đánh dấu chọn vào ô Required field, nhập vài gợi ý vào khung Help text. Nếu không muốn khách truy cập website nhìn thấy các chuyên mục ở cuối bài viết thì bạn cần ẩn nó đi, bằng cách trở về khung quản lý Content type, bấm manage display ở kiểu nội dung muốn thay đổi. Ở cột Format của trường Field, bạn chọn Hidden rồi bấm Save.

Drupal 7 P4 13 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Bây giờ, bạn có thể kiểm tra sự hiển thị của các chuyên mục ở khung viết bài, bấm Add content rồi chọn kiểu nội dung cần viết bài.

Drupal 7 P4 14 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Sau khi đã phân loại nội dung và tạo kiểu nội dung mới, bạn có  thể tạo ra menu để giúp cho khách truy cập định hướng được nội dung trên website.

  • 9. Quản lý bài viết và bình luận :

Tính năng Content giúp cho người quản trị quản lý nội dung trên website (quản lý bài viết, quản lý bình luận). Để sử dụng tính năng này, bạn bấm vào menu Content trên thanh quản trị hệ thống. Thẻ Content cung cấp  ba khung: ở dưới cùng là danh sách các bài viết (gồm có tên, kiểu nội dung, tác giả, tình trạng, cập nhật), khung Show only items where là một bộ lọc giúp tìm kiếm nhanh bài viết (theo hai kiểu lọc: Status- tình trạng bài viết, Type- kiểu nội dung) và khung Updates Options.

Drupal 7 P4 15 Thiết kế website động với mã nguồn Drupal 7 – phần 4

Riêng đối với khung Update Options, bạn có thể cập nhật cho hàng loạt bài viết với các nội dung cập nhật như Update URL alias- cập nhật địa chỉ liên kết mới (khi đã cài đặt xong module Pathauto- sẽ được giới thiệu ở phần sau), Publish select ed content- đăng bài viết, Unpublish selected content- không đăng bài viết, Delete selected content- xóa các bài viết đã chọn,…

Thẻ Comment giúp quản lý nội dung bình luận của các thành viên gửi đến. Nếu người quản trị thiết lập chế độ kiểm duyệt nội dung bình luận đối với thành viên (bỏ tùy chọn Skip comment approval đối với nhóm Authenticated user) thì các ý kiến gửi đến sẽ nằm trong mục Unapproved comments. Để đăng tải các ý kiến bình luận, bạn đánh dấu chọn vào ô phía trước ý kiến và chọn nội dung cập nhật Publish the selected comments, bấm Update.

Drupal 7 P4 16 Thiết kế website động với mã nguồn Drupal 7 – phần 4
  • 10. Quản lý các kiểu nội dung: diễn đàn, blog và cập nhật tự động tin RSS từ website khác :
  • 11. Quản lý thành viên và cấu hình website Drupal 7:
  • 12. Cài đặt và thiết lập các module hữu ích cho SEO (Search Engine Optimization):
  • 13. Cài đặt ngôn ngữ trong Drupal 7 và một số trải nghiệm khác:
  • 14. Đưa website Drupal 7 từ localhost lên hosting và hoạt động trên Internet:
    (Các nội dung trên chúng tôi đang cập nhật!)

Gửi phản hồi

Please log in using one of these methods to post your comment:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s