LAB DRUPAL 1. Hướng dẫn cài đặt module:

- Bước 1: Truy cập vào websitehttp://drupal.org/project/modules và tài về module cần cài đặt. Ví dụ module Views.

- Bước 2: Sau khi đã tải module về, tiến hành giải nén module vào thư mục sites/all/modules nằm trong thư mục cài đặt drupal. - Bước 3: Truy cập vào ứng dụng drupal đã cài đặt, đăng nhập tài khoản admin.

- Site Building - Modules từ menu chính.

- Bước 4: Tìm tới vị trí hiển thị module vừa giải nén. Sau đó check vào các ô nằm trong cộtEnabled kế bên tên của module vừa giải nén.

- Bước 5: Chú ý, một số module đòi hỏi các module có liên quan phải được cài đặt trước nên chúng ta phải xem và cài đặt danh sách các module có liên quan trong phầnDescription, mục Depends on (nếu có).

2. Cài đặt module admin_menu:

Bước 1: cài đặt module admin_menu. Download module này tại http://drupal.org/project/admin_menu.

Bước 2: Sau khi cài đặt, vào thư mục cài đặt module admin_menu (sites/all/modules/admin_menu), mở file admin_menu.css lên và thay thế dòng code sau:

#admin-menu { position: absolute; top: 0px; left: 0px; font-size: 9px; font-family: "lucida grande", tahoma, verdana, arial, sans- serif; background: url(images/bkg.png) bottom left repeat-x #101010; width: 100%; text-align: left; }

Bằng dòng code:

#admin-menu { position: absolute; top: 0px; left: 0px; font-size: 11px; font-family: "lucida grande", tahoma, verdana, arial, sans- serif; background: url(images/bkg.png) bottom left repeat-x #101010; width: 100%; text-align: left;t e xt - t r ans f or m: uppercase; font-weight: bold;}

Mục đích là để menu hiển thị chữ rõ ràng hơn, giúp ta quản lý dễ dàng hơn. Ghi chú: Kể từ đây về sau, phần hướng dẫn sẽ dựa vào admin_menu để

hướng dẫn cách truy cập vào các chuyên trang của Drupal.

3. Cấu hình file system:

File System cho phép ta cấu hình thư mục tạm và thư mục lưu trữ dữ liệu do người dùng upload. •Bước 1: Đăng nhập bằng tài khoản admin. •Bước 2: Click vào Site Configuration File System. •Bước 3: Tại trang File System, lần lượt nhập vào các giá trị sau:

o File system path: nhập vào sites/default/files. o Temporary directory: nhập vào sites/default/files/tmp.

4. Cấu hình thông tin site:

Cấu hình các thông tin cơ bản của website. • Bước 1: Đăng nhập bằng tài khoản admin. Bước 2: Click vào Site Configuration --> Site information. • Bước 3: Nhập giá trị vào các trường sau:

o Name:nhập vào tên của website. o E-mail address: nhập vào địa chỉ email mong muốn. Địa chỉ email

này sẽ được dùng để hiển thị trong các email thông báo được gửi tự động từ hệ thống. 6. Cấu hình module SMTP Module SMTP (SMTP Authentication Support) cho phép Drupal gửi email thông qua một server SMTP như Gmail.com, Inbox.com,… • Bước 1: đăng nhập bằng tài khoản admin. • Bước 2: Click vào Site Configuration SMTP Authentication Support. • Bước 3: Tại trang SMTP Authentication Support, cấu hình các trường sau: o Turn this module on or off: Check vào ôOn.

o SMTP Server: nhập vào địa chỉ của server SMTP, ví dụ mail.serverabc.com. o SMTP Port: nhập vào port của server SMTP. Thông thường là port 25. o Use encrypted protocol: nếu server SMTP có hỗ trợ mã hóa thì hãy chọn phương thức mã hóa phù hợp. o Username: nhập vào username của tài khoản email. o Password: nhập vào mật khẩu của tài khoản email. o E-mail address to send a test e-mail to: Nhập vào một địa chỉ email khác để kiểm tra xem Drupal đã gửi email được chưa. o Click vào nút Save Configuration.

8. Cấu hình access log:Để bộ đếm số lần xem nội dung hoạt động, chúng ta phải cấu hình để kích hoạt nó lên.• Bước 1: click vào Reports Access Log Settings. • Bước 2: thực hiện: o Enable access log: chọnEnabled.

o Discard access logs older than: chọn 3 days. o Count content views: chọnEnabled • Click vào nút Save configuration để lưu cấu hình. 9. Tạo user roles và phân quyền truy cập Portfolio Online sẽ bao gồm bốn loại thành viên: Anonymous user: khách viếng thăm. Đây là role mặc định của Drupal. Authenticated user: thành viên chính thức. Đây là role mặc định của Drupal. Moderator: những người tham gia quản li website. Sales person: nhân viên kinh doanh, công việc chủ yếu là đăng quảng cáo. Tạo role Chúng ta sẽ tạo thêm hai role Moderator và Sales person như sau: • Bước 1: click vào User Management Roles. • Bước 2: tại trang Rolesm, tại cột Name, nhập vào tên của role muốn tạo, ví dụ làmoderator, sau đó click vào nút Add role.

Tiếp tục thực hiện như vậy để tạo thêm role sales person. Phân quyền truy cập Sau khi tạo đầy đủ các role, ta phải phân quyền truy cập (permission) cho các role này. Chú ý: mỗi khi cài đặt một module nào đó, ta phải kiểm tra và phân quyền truy cập mà module đó cung cấp (nếu có) cho các roles. • Bước 1: click vào User Management Permissions. • Bước 2: tại trang Permissions, chúng ta tiến hành phân quyền cho các role bằng cách check vào các ô tương ứng với các ô được đánh dấu v trong bảng: Bảng Phân quyền truy cập phần Cấu hình chung

9. Cấu hình quản lý artwork:

- Dùng từ Artwork để chỉ những tác phẩm thiết kế được thành viên upload lên website Portfolio Online. Artwork được giới hạn là các file hình ảnh có định dạng sau: .png .gif .jpg. jpeg

- Cài đặt CCK, Views, Panels - Cài đặt các module hổ trợ upload ảnh Cài đặt các module sau theo thứ tự từ trên xuống: • Filefield (http://drupal.org/project/filefield) • Filefield_paths (http://drupal.org/project/filefield_paths) • ImageAPI (http://drupal.org/project/imageapi) • ImageCache (http://drupal.org/project/imagecache) • ImageField (http://drupal.org/project/imagefield) • Lightbox2 (http://drupal.org/project/lightbox2)

- Cấu hình artwork Tạo content type Artwork: • Bước 1: đăng nhập bằng tài khoản admin. • Bước 2: click vào Content Management -> Content Types -> Add Content

Type. • Bước 3: Tại trang Add Content Type, nhập dữ liệu vào các trường sau:

o Name: Artwork. o Type: artwork. o Body field label: Artwork description. o Default comment setting: check vào ôRead/Write. o Default display mode: check vào ô Threaded list – expanded. o Default display order: check vào ô Date - newest first. o Default comments per page:chọn30. o Comment subject field: check vào ôDisabled. o Preview comment: check vào ôOptional. o Location of comment submission form: check vào ô Display below post or comments.

o Tại phần Workflow settings, mục Default options, check vào ô Published, các ô còn lại để trống. tại mụcAttachments, check vào ô Disabled. • Click vào nút Save content type. Tạo field cho content type Artwork Content type Artwork vừa tạo vẫn chưa cho phép upload hình ảnh được, do đó ta phải tạo thêm một field cho phép thực hiện điều này. • Bước 1: click vào Content Management Content Types Edit Artwork Manage Fields. • Bước 2: tại trang Manage Fields của Artwork, chúng tôi sẽ tạo thêm một field nữa với đặc điểm cho phép upload file ảnh từ máy tính của các thành viên. Tại mục Add New field, thực hiện: o Label: nhập vàoArtwork. o Field name: nhập vàoartwork_file. o Type of data to store: chọnFile. o Form element to edit the data: chọnImage. • Click vào nútSave để tiến hành tạo một field mới.

o Tại phần Workflow settings, mục Default options, check vào ô Published, các ô còn lại để trống. tại mụcAttachments, check vào ô Disabled. • Click vào nút Save content type. Tạo field cho content type Artwork Content type Artwork vừa tạo vẫn chưa cho phép upload hình ảnh được, do đó ta phải tạo thêm một field cho phép thực hiện điều này. • Bước 1: click vào Content Management Content Types Edit Artwork Manage Fields. • Bước 2: tại trang Manage Fields của Artwork, chúng tôi sẽ tạo thêm một field nữa với đặc điểm cho phép upload file ảnh từ máy tính của các thành viên. Tại mục Add New field, thực hiện: o Label: nhập vàoArtwork. o Field name: nhập vàoartwork_file. o Type of data to store: chọnFile. o Form element to edit the data: chọnImage. • Click vào nútSave để tiến hành tạo một field mới. Cấu hình field Artwork Sau khi tạo field Artwork, chúng tôi sẽ cấu hình cho field này đáp ứng một số yêu cầu sau: Đường dẫn chứa file ảnh sẽ là artworks/<username>. Với <username> tương ứng với username của thành viên upload ảnh lên. Tên của file ảnh sẽ là <tên file ảnh>_by_<username>.<định dạng file ảnh>. Ví dụ: thành viênabc upload tấm ảnh có tên làartwork123.jpg thì tên của tấm ảnh sau khi upload lên server sẽ làartwork123_by_abc.jpg. Để làm được điều này, chúng ta thực hiện như sau: • Bước 1: click vào Content Management Content Types Edit Artwork Manage Fields Artwork. • Bước 2: click vào phần FileField Path settings và thực hiện như sau:

o Tại trường File Path: nhập vàoartwork/[author-name]. Chúng ta có thể xem thêm các dữ liệu cho phép đưa vào tại mục File path replacement patterns (được cung cấp bởi module Token). o Tại trường File name: nhập vào[filefield-onlyname- original]_by_[author-name].[filefield-extension-original]. Chúng ta có thể xem thêm các dữ liệu cho phép đưa vào tại mục File name replacement patterns. o Click vào dòng chữ File name cleanup settings, check vào hai ô Cleanup using Pathautovà Convert to lower case. • Tại mục Global settings, thực hiện như sau:

o Check vào ôRequired. o Number of values:chọn1. o List field: Check vào ôDisabled. o Description field: Check vào ôDisabled. • Click vào nút Save field settings để lưu những cấu hình vừa rồi lại. Cấu hình ImageCache Module ImageCache cho phép tạo ra nhiều ảnh có kích thước và hiệu ứng khác nhau dựa vào tấm ảnh gốc khi được upload lên server. Chúng ta sẽ sử dụng tính năng rất hay này để tạo ra hai loại ảnh như sau:

Ảnh thumbnail nhỏ: ảnh này sẽ được sử dụng khi cần hiển thị danh sách các Artwork. Ảnh thumbnail lớn: ảnh này sẽ được sử dụng tại trang xem chi tiết Artwork. Tạo ảnh thumbnail nhỏ: • Bước 1: click vào Site Building ImageCache Add New Preset. • Bước 2: tại trường Preset Namespace, nhập vàoArtwork_Thumb_Small. Trình duyệt web sẽ redirect ta sang trang Edit preset. • Bước 3: tại trang Edit preset: Artwork_Thumb_Small, tại mụcActions, click chọn actionScale. o Tại trườngWidth: nhập vào140. o Tại trườngHeight: nhập vào140. o Click vào nút Create Action.

Ý nghĩa của việc làm này là “thu nhỏ ảnh gốc thành một tấm ảnh có chiều dài (width) tối đa là 140 pixels, hoặc có chiều cao (height) tối đa là 140 pixels, tùy theo chiều nào dài hơn”. • Click vào nút Save Preset để hoàn tất. Tạo ảnh thumbnail lớn: • Bước 1: click vào Site Building ImageCache Add New Preset. • Bước 2: tại trường Preset Namespace, nhập vàoArtwork_Thumb_Large. Trình duyệt web sẽ redirect ta sang trang Edit preset. • Bước 3: tại trang Edit preset: Artwork_Thumb_Large, tại mụcActions, click chọn actionScale. o Tại trườngWidth: nhập vào490. o Tại trườngHeight: nhập vào500. o Click vào nút Create Action. Ý nghĩa của việc làm này là “thu nhỏ ảnh gốc thành một tấm ảnh có chiều dài (width) tối đa là 490 pixels, hoặc có chiều cao (height) tối đa là 500 pixels, tùy theo chiều nào dài hơn”. • Click vào nút Save Preset để hoàn tất. - Cấu hình Taxonomy Tạo vocabulary Keywords Vocabulary Keywords cho phép thành viên nhập vào các từ khóa (keyword) có liên quan đến tác phẩm Artwork của mình. Chúng ta sẽ sử dụng các từ khóa này để tạo một “Tag Cloud” - là một danh sách các từ khóa - cho website.

• Bước 1: Click vào Content Management Taxonomy Add Vocabulary • Bước2: Tạo một Vocabulary sau: o Vocabulary name: nhập vàoKeywords. o Content types: check vào ôArtwork. o Check vào ôTags và Multiple Select. • Bước 3: Click vào nútSave để tạo Vocabulary Tạo vocabulary Artwork Category • Bước 1: Click vào Content Management Taxonomy Add Vocabulary • Bước2: Tạo một Vocabulary sau: o Vocabulary name: nhập vào Artwork Category. o Content types: check vào ôArtwork. o Check vào ôRequired. • Bước 3: Click vào nútSave để tạo Vocabulary. Thêm các Term vào Artwork Category Mỗi term sẽ đại diện cho một chủ đề con của Artwork Category. • Bước 1: Click vào Content Management Taxonomy List. • Bước 2: Tại danh sách Vocabulary, click vào add terms tại dòngArtwork Category. • Bước 3: Nhập vào các giá trị sau: o Term name: nhập vào All Categories. o Weight:nhập vào 0. o TrườngParents cho phép chọn một hay nhiều term làm “term cha” của term hiện tại. Đối với trường hợp này, chúng ta không chọn gì cả vì term này sẽ là term có cấp cao nhất. • Click nútSave để tạo term. Thực hiện lại các thao tác trên để tạo thêm các term khác cho Artwork Category theo ý thích. Chuyển Artwork Category thành menu Bình thường, một category và các term của nó không hiển thị theo cấu trúc cây như một menu được. Vì vậy, chúng ta sẽ sử dụng module taxonomy_menu để làm được điều đó. Đầu tiên, ta sẽ tạo một menu dành riêng cho Artwork Category trước. • Bước 1: click vào Site Building Menus Add menu. • Bước 2: nhập vào các giá trị sau: Menu name:nhập vàocategory. o Title: nhập vàoCategory. • Click vào nútSave để lưu menu mới lại. Sau khi đã có một menu, ta sẽ gán Artwork Category cho menu này. • Bước 1: click vào Content Management Taxonomy List. • Bước 2: click vào edit vocabulary tại dòng Artwork Category. • Bước 3: tại phần Taxonomy menu, thực hiện như sau: o Menu location: chọn menu Category vừa tạo. o Menu path type:chọnDefault. o Check vào ô Use term name. Bỏ check ô Add item for vocabulary. • Bước 4: click vào nútSave để tiến hành tạo menu cho Artwork Category. ước 5: click vào Site Configuration DHTML Menu.

• Bước 6: tại phần Menus without DHTML, check vào ômenu-artwork- category. • Bước 7: click vào nút Save configuration. Như vậy chúng ta đã có một menu chứa danh sách các chủ đề Artwork. Để hiển thị menu này, thực hiện như sau: •Bước 1: click vào Site Building Blocks List. •Bước 2: tại danh sách các block có sẵn, tìm block có tên làCategory và kéo thả vào vùng Left sidebar (hoặc chọn Left sidebar tại cột Region). •Bước 3: kéo thả block Tags in Keywords vào vùng Left sidebar. •Click vào nút Save blocks và chúng ta sẽ có được một menu như hình bên dưới. Đối với vocabulary Keywords mà ta đã tạo bên trên, nếu có dữ liệu, nó sẽ hiển thị như trong hình bên dưới, chúng ta gọi đây là chức năng “Tag Cloud”: - Tạo Artwork Đến đây, chúng ta đã có thể tạo được Artwork cho website. • Bước 1: đăng nhập bằng một tài khoản người dùng khác với role Authenticated User. • Bước 2: click vào Create Content Artwork. • Bước 3: tại trang Create Artwork, thực hiện: o Title: nhập vào tên của ArtworkArtwork: click vào nút Choose File để chọn hình muốn upload, sau đó click vào nút Upload để tải hình lên website. o Artwork description: nhập vào mô tả về Artwork. o Artwork Category: chọn chủ đề muốn tạo Artwork. Đây chính là danh sách term của vocabulary Artwork Category mà chúng ta vừa tạo ở bước trên. o Keywords: nhập vào các từ khóa tùy ý, mỗi từ khóa cách nhau bằng dấu phẩy. Các từ khóa này sẽ hiển thị trong chức năng “Tag cloud”. • Click vào nút Save để tạo Artwork. Chúng ta có thể thấy Artwork sau khi tạo, tại trang xem chi tiết sẽ hiển thị với kích thước ảnh gốc, nếu ảnh gốc có kích thước lớn thì sẽ choáng hết màn hình gây cảm giác khó chịu. Bên cạnh đó, trang xem chi tiết Artwork mặc định còn rất sơ sài, chúng ta sẽ tạo một trang xem chi tiết Artwork khác trong các phần kế tiếp. - Tạo views Để hiển thị Artworks lên website, chúng ta sẽ tạo ra các Views. Ưu điểm của việc dùng Views là chúng ta có thể chủ động sắp xếp, trình bày dữ liệu theo ý muốn một cách nhanh chóng. Sau đó đối với mỗi loại trang web, chúng ta sẽ đưa những Views thích hợp vào bằng cách sử dụng Panel. View: Latest_Artworks View này cho phép chúng ta hiển thị danh sách các Artwork mới nhất do thành viên upload lên. Cách tạo View này như sau: • Bước 1: Click vào Site Building Views Add. • Bước 2: Tại trang tạo View, thực hiện: o View name: nhập vàoLatest_Artworks. o View description: cho phép mô tả công dụng của View, chúng ta có thể nhập vào Hiển thị danh sách Artworks mới nhất. Đây là trường

không bắt buộc. o View tag: cho phép nhập vào các từ khóa mô tả View, có tác dụng giúp người quản trị tìm kiếm View nhanh chóng hơn, và các từ khóa này chỉ có tác dụng trong phạm vi trang quản trị View. Đây là trường không bắt buộc. Chúng ta sẽ không nhập dữ liệu cho trường này. o View type: Bởi vì đối tượng hiển thị của View là Artwork, do đó chúng ta sẽ chọn kiểu View làNode.

o Click vào nútNext để qua bước tiếp theo. • Bước 3: Tại trang Edit view Latest_Artworks, chọn kiểu hiển thị là Content pane bởi vì về sau chúng ta sẽ đưa View này vào hiển thị trong Panel. Sau đó click vào nút Add display để tạo thêm một kiểu hiển thị cho View. • Bước 4: tại phần Content pane vừa tạo, thực hiện: o Style: chọnGrid, tùy chọn này cho phép hiển thị các item theo dạng lưới. o Use AJAX: chọnYes, tùy chọn này cho phép sử dụng kĩ thuật Ajax để hiển thị danh sách Artwork khi sử dụng Pager - bộ phân trang. o Use Pager:chọn Full pager, tùy chọn này cho phép sử dụng bộ phân

trang đầy đủ của View. o Items per page: quy định số item tối đa trên một trang, nhập vào20. o Distinct: check vào ôDistinct để chỉ lấy ra một giá trị duy nhất, tránh trường hợp dữ liệu bị lặp lạiRelationships: cho phép chúng ta liên kết một hay nhiều thành phần dữ liệu lại với nhau, ví dụ: Comments, Taxonomy, User… Mục đích là để làm phong phú thêm lượng dữ liệu mà ta muốn hiển thị. Trở lại với bài hướng dẫn, tại phần này chúng ta muốn hiển thị tên chủ đề mà một Artwork thuộc về, do đó chúng ta sẽ khai báo một liên kết với Taxonomy, hãy thực hiện như sau: Click vào dấu trong phần Content pane: Add relationships, chọnTaxonomy, sau đó check vào ô Taxonomy: Parent term click vào nút Add. Parent term chính là chủ đề cha của mỗi ArtworkTại trườngLabel, nhập vàoParent, check vào ô Require this relationship

click vào nút Update default display. o Sort criteria: Quy định các cách sắp xếp dữ liệu, tương tự tác dụng của khai báo ORDER BY trong SQL.Cách làm tương tự với phần Relationships, tạo một sort criteria là Node: Postdate, với Sort order làDescending,Granularity làSecond. o Filters: cho phép chúng ta tạo ra các ràng buộc để giới hạn lại phạm vi dữ liệu, giúp lấy ra được những dữ liệu đúng mục đích, tương tự tác dụng của khai báoWHERE trong SQL. Lần lượt tạo 3 filter sau: Node: Typevới Operator:làIs one of và Node typelà Artwork. Node: Publishedvới PublishedlàYes. Taxonomy: Vocabulary: Relationship:chọnParent; Operatorlà Is one of và Optionslà Artwork Category. o Fields: Chính là những dữ liệu mà chúng ta muốn hiển thị, tương tự tác dụng của khai báoS ELECT trong SQL. Lần lượt tạo các field sau: Content: Artwork (field_artwork_file) Check vào ô Link this field to its node. LabelchọnNone. Formatchọn Artwork_Thumb_Small image linked to node. User: Name Xóa không nhập dữ liệu vàoLabel. Check vào ô Exclude from display. Check vào ô Link this field to its node. Node: Title Xóa không nhập dữ liệu vàoLabel. Check vào ô Exclude from display - có tác dụng cho phép không tự động hiển thị dữ liệu này lên giao diện nhưng vẫn tải dữ liệu này lên View, cho phép chúng ta

thao tác trên dữ liệu này theo ý muốn. Check vào ô Link this field to its node. Taxonomy: Term ChọnRelationship làParent. Xóa không nhập dữ liệu vàoLabel. Check vào ôExclude from display. Check vào ô Link this field to its taxonomy term page. Global: Custom text Xóa không nhập dữ liệu vàoLabel. Tại trườngText, chúng ta có thể tạo ra mã HTML kết hợp với các field vừa tạo bên trên để trình bày dữ liệu theo ý muốn. Các field dữ liệu được quy định dưới dạng pattern mà chúng ta có thể xem danh sách của chúng tại phần Replacement patterns bên dưới. Hãy nhập vào

trường Text đoạn mã HTML sau: <div class="artwork-title">[title]</div> <div class="artwork-author">by [name] in [name_1]</div>

Sau khi thực hiện các thao tác trên, phần cấu hình cho View của chúng ta sẽ tương tự như trong hình sau: • Bước 5: click vào nútSave để lưu lại. Để tránh nguy cơ mất dữ liệu trong quá trình cấu hình cho view, chúng ta nên thực hiện Save bất cứ khi nào vừa cấu hình xong một phần nào đó của viewView: Category_View View này cho phép hiển thị Artwork của từng chủ đề. Tạo view với các thông số sau: • View name:Category_View • View type:Node • Loại display: Content pane • Style:Grid • Row style:Fields • Use Ajax:Yes • Use pager: Full pager • Items per page:20 • Relationships: o Taxonomy: Related terms Label:term Required this relationship:check Vocabularies: Artwork Category • Arguments: o Taxonomy: Term ID (with depth) Title:rỗng Depth:1

Allow multiple terms per argument: không check Set the breadcrumb for the term parents: không check • Sort criteria: o Node: Post date Sort order:Descending Granularity:Second • Filters: o Node: Published Published:Yes

Node: Type Operator: Is one of Node type:Artwork o Taxonomy: Vocabulary Relationships:term Operater: Is one of Options: Artwork Category • Fields: o Content: Artwork (field_artwork_file) Link this field to its node:check Label:none Format: Artwork_Thumb_Small image linked to node o User: Name Label:rỗng Exclude from display:check Link this field to its user:check

o Node: Title Label:rỗng Exclude from display:check Link this field to its node:check o Taxonomy: Term Relationship:term Label:rỗng Exclude from display:check Link this field to its taxonomy term page:check o Global: Custom text Label:rỗng Text: nhập vào đoạn mã HTML sau: <div class="artwork-title">[title]</div> <div class="artwork-author">by [name] in [name_1]</div>

View: View_all_Categories View này cho phép hiển thị tất cả Artwork của mọi chủ đề. Tạo view với các thông

số sau: • View name:View_all_Categories • View type: Node • Loại display: Content pane • Style:Grid • Row style:Fields • Use Ajax:Yes • Use pager: Full pager • Items per page:20 • Relationships: o Taxonomy: Related terms Label:term Required this relationship:check Vocabularies: Artwork Category • Sort criteria: o Node: Post date

Sort order:Descending Granularity:Second • Filters: o Node: Published Published:Yes o Node: Type Operator: Is one of Node type:Artwork o Taxonomy: Vocabulary Relationships:term Operater: Is one of Options: Artwork Category • Fields: o Content: Artwork (field_artwork_file) Link this field to its node:check Label:none Format: Artwork_Thumb_Small image linked to node

User: Name Label:rỗng Exclude from display:check Link this field to its user:check o Node: Title Label:rỗng Exclude from display:check Link this field to its node:check o Taxonomy: Term Relationship:term Label:rỗng

Exclude from display:check Link this field to its taxonomy term page:check o Global: Custom text

Label:rỗng Text: nhập vào đoạn mã HTML sau: <div class="artwork-title">[title]</div> <div class="artwork-author">by [name] in [name_1]</div> - Tạo Panels page cho trang chủ Sau khi tạo được các View cần thiết, chúng ta sẽ tạo các Panel page để hiển thị chúng. Khái niệm Page ở đây có thể gây ra nhầm lẫn bởi vì Drupal cũng có một content type mặc định là Page. Tuy nhiên đó là một content type, còn Panel page mà chúng ta nói ở đây là Page do module Panel quy định, với chức năng hơn hẳn content type Page. Panel page có hai loại: • System page: là những page mặc định do Panel page tạo ra. • Custom page: là những page do người quản trị tạo thêm. Tạo Panel page cho trang chủ Chúng ta sẽ không sử dụng trang chủ mặc định do Drupal cung cấp mà sẽ tạo một Panel page để thay thế, bởi vì Panel page cho phép chúng ta chủ động trình bày dữ liệu theo ý muốn hiệu quả hơn mà không phải lập trình can thiệp vào hệ thống. Cách tạo như sau: • Bước 1: click vào Site Building Pages Add Custom Page.

Bước 2: thực hiện: o Administrative title: Nhập vàoHomepage. o Machine name:nhập vàohomepage. o Path: trường này quy định đường dẫn URL mà Panel page này có tác dụng. Nhập vàowelcome. o Make this your site home page: check vào ô này để chọn Panel page này làm trang chủ của website. o Optional features: Nếu check vào các ô trong tùy chọn này, phần cấu hình của nó sẽ hiện ra trong bước tạo Panel page. Nếu không check vào các ô này thì chúng ta vẫn có thể cấu hình được chúng sau khi tạo Panel page xong. Trong hướng dẫn này, chúng ta sẽ không check vào ô này. o Click vào nútContinue để sang bước kế tiếp.

Bước 3: Tiến hành chọn một Layout để trình bày nội dung. Đối với page Homepage, chúng ta chọn layout Single Column. ClickContinue để sang bước kế tiếp. • Bước 4: Tại bước này, chúng ta sẽ tiến hành đưa dữ liệu vào hiển thị trong Panel page. Thực hiện các thao tác sau:

o Title type: chọn No title. o Click vào của phần Middle Column và click vào Add Content. o Trong hộp thoại Add content to Middle Column, thực hiện như sau: Click vào đường linkViews chọnLatest_Artworks. Chọn Content pane tại trườngdisplay, sau đó click vào nút Continue. Tại hộp thoại Configure view Latest_Artworks, check vào ô Override title và nhập vào Latest Artworks ClickFinish để kết thúc việc chọn dữ liệu hiển thị. • Bước 5: Click vào nútUpdate, sau đó click vào nútSave. Chú ý: chúng tôi gặp một lỗi mất cấu hình khi click vào nút Update and Save do đó chúng ta nên thực hiện tuần tự: click vào nútUpdate, sau đó clickSave.

Cấu hình lại đường dẫn trang chủ cho Drupal Bởi vì chúng ta vừa tạo một Panel page thay thế cho trang chủ hiện tại, do đó chúng ta cần phải khai báo lại đường dẫn của trang chủ. Thực hiện như sau: • Bước 1: click vào Site Configuration Site Information. • Bước 2: Tại trường Default front page, nhập vàowelcome, chính là đường dẫn của Panel page mà chúng ta vừa tạo bên trên. • Click vào nút Save configuration để hoàn tất. Sau khi cấu hình, nhập vào đường dẫn trang chủ của website Portfolio Online, trang chủ mới sẽ hiện ra như sau:

-Tạo Panel page hiển thị tất cả Artwork Panel page này cho phép hiển thị tất cả Artwork thuộc mọi chủ đề hiện có. Tạo Panel page Thực hiện tương tự cách tạo Panel page Homepage bên trên, tiến hành tạo Panel page với các thông số sau: • Administrative title: All Categories Artwork listing • Machine name:all_cat_artwork_list • Path: ở đây, chúng ta sẽ nhập vào “URL thật sự” của term có tên làAll Categories mà chúng ta đã tạo. Thực hiện như sau: o Click vào Site Building URL Aliases List. o TìmAlias có tên làcategory/artwork-category/all-categories và xem giá trị của cộtSystem tương ứng. Ví dụ như hình bên dưới:

Trong ví dụ này, chúng ta sẽ có URL thật sự của term All Categories là taxonomy/term/22. Như vậy chúng ta sẽ nhập vào trường Path giá trị taxonomy/term/22. •Layout: chọn Single column •Content: o Title type:chọn Manually set o Title: nhập vào All Artworks o Chọn ViewView_all_Categories,display chọn Content pane với mọi thông số đều để mặc định. Sau khi tạo, hãy truy cập vào đường dẫncat egory/ artwork-category/all - categories hoặc click vào link All Categories trên blockCategory để truy cập vào Panel page vừa tạo. - Tạo Panel page xem Artwork theo từng chủ đề Panel page này cho phép xem Artwork theo từng chủ đề mà người xem click vào trên Danh mục chủ đề (block Category). Để tạo được Panel page này, chúng ta sẽ sử dụng System Panel page Taxonomy term template. • Bước 1: click vào Site Building Pages List. Bước 2: tại dòng Taxonomy term template, nếu Panel page này chưa được enable thì click vào linkEnable để kích hoạt nó, sau đó click vào linkEdit. • Bước 3: tại trang cấu hình Taxonomy term template, Click vào linkAdd variant, thực hiện: o Title: nhập vào Category View, sau đó click Create variant. o Tại trang Choose layout, chọn Single columni, clickContinue. o Tại trang Panel content, chọn Title tyle là Manully set và nhập vào trườngTitle giá trị%term:name. Sau đó click vào nút Create Variant. • Bước 4: Tại Variants Category View, click vàoContent, thêm vào layout Middle Column dữ liệu sau: o ViewCategory_View Display: Content pane Taxonomy: Term ID (with depth):chọn Term ID of first term. • ClickUpdate, sau đó clickSave để tạo Panel page. Hãy kiểm tra Panel page vừa mới cấu hình bằng cách tạo một vài Artwork vào các chủ đề khác nhau, sau đó click vào từng chủ đề một để xem danh sách Artwork của chủ đề đó. Lưu ý: Hiện tại, trong phạm vi của đề tài này, chúng tôi chỉ hỗ trợ dach sách chủ đề 2 cấp, nghĩa là một chủ để cha cấp 1 sẽ có nhiều chủ đề con cùng cấp 2.