CHƯƠNG 5: XÂY DỰNG WEBSITE
5.1 Sitemap
5.2 Thiết kế giao diện với drupal
5.2.1 Cài đặt giao diện
Việc cài đặt giao diện được thực hiện qua 2 cách
 Cách 1: Sử dụng giao diện chia sẻ từ drupal
 Bước 1: Donwload từ: /> Bước 2: Đăng nhập với tài khoản administrator.sau đó chọn liên kết
Appearance(Hình thức) > chọn Install new theme
 Bước 3: tại tab Appearance(Hình thức) chọn Enable and set default cho
giao diện khi chúng ta muốn sử dụng.
Trang 1
 Cách 2: Sử dụng giao diện tùy chỉnh.
- Di chuyển thư mục giao diện tùy chỉnh vào ..sites/all/themes/
- Tại liên kết Appearance(hình thức) chọn Enable and set default cho giao
diện khi chúng ta muốn sử dụng.
5.2.2 Xây dựng giao diện
Các bước chung để tạo ra một Theme Drupal mới bao gồm:
1. Tạo hoặc chỉnh sửa tập tin HTML cho trang web.
2. Tạo hoặc chỉnh sửa tập tin CSS cho trang web.
3. Tạo một tập tin .info để mô tả theme mới của Drupal.
4. Chuẩn hóa các tên tập tin theo framework Drupal .
5. Chèn biến đã được định nghĩa vào Theme
6. Tạo tập tin bổ sung cho các loại nút cá nhân, các khối.
Nơi lưu trữ thư mục giao diện chúng ta xây dựng: ../sites/all/themes/ .Đây là
nơi được qui khuyến khích chung của drupal cho rõ ràng, thực ra chúng ta có
thể tạo 1 nơi nào đó để chứa giao diện đều được.
Đầu tiên, chúng ta tạo ra một thư mục giao diện với tên “dulichdeal” và
chứa trong thư mục ../sites/all/themes/ .Dưới đây là cấu trúc các thư mục và tập
tin cần tạo của một giao diện.
Trang 2
Vị trí của các tập tin *.tpl.php

#footer{...}
Và các thẻ css phụ khác tùy chỉnh theo cấu trúc html
Bước 3: tạo file dulichdeal.info(tên file là tên của thư mục giao diện), để khai
báo cho drupal biết rằng hiện giao diện chúng ta đang tạo có các tập tin cần
Trang 4
tham gia, các vị trí nào được khởi tạo và một số thông tin phụ khác,... trong quá
trình xây dựng giao diện website.
Nội dung file dulichdeal.info:
name = Demo
core = 7.x
stylesheets[all][] = css/style.css
regions[header] = Header
regions[navigation] = Navigation menu
regions[content] = Content
regions[sidebar_first] = Sidebar First
regions[footer] = Footer
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
Để hiển thị các region trên trang, chúng ta thực hiện sau:
Tại tập tin page.tpl.php(trong thu mục dulichdeal/templates/) tìm vị trí muốn
hiển thị và xử lý hiển thị như sau:
<?php print render($page[‘header’]); ?>
<?php print render($page[‘navigation’]); ?>
<?php print render($page[‘slideshow’]); ?>
<?php print render($page[‘content’]); ?>
<?php print render($page[‘sidebar_second’]); ?>
<?php print render($page[‘footer’]); ?>
Các vị trí trong tập tin page.tpl.php sau khi được khởi tạo sẽ tương ứng với các
vị trí trên giao diện như sau: