Forums:
Đề tài: Tìm Hiểu Giao Diện Drupal
Giảng viên: thầy Trương Hoài Phan
Nhóm 7:
09050030_Lê Minh Tân
09050038_Bùi Trần Thái Phong
Nội dung báo cáo drupal:
Giới thiệu về drupal
Cách tạo một theme tùy biến
Bổ sung tập tin css và javascript vào drupal
Loại bỏ các stylesheet mặc định của drupal
Tìm hiểu về các file mẫu trong drupal
Các thuộc tính, lớp và hàm trong drupal
Ví dụ minh họa tùy biến node.tpl.php và block.tpl.php
Webstite công nghệ minh họa
-------------------------------------------------------------------------------------
Drupal là gì?
CMS là một gói phần mềm cung cấp các công cụ để tạo, xuất bản và quản lý nội dung trên website. Nội dung có thể là bất cứ thứ gì từ một bài post, bài viết, một video hay một mô tả của một sản phẩm.
CMS cung cấp một số chức năng mà đơn giản hóa tiến trình xây dựng, triễn khai và quản lý website bao gồm như sau:
- Một giao diện quản trị.
- Một CSDL
- Một cơ chế liên kết thông tin được lưu trữ trong CSDL với các trang trên website.
- Một bộ công cụ để tạo, xuất bản và quản lý nội dung.
-------------------------------------------------------------------------------------------------------
Thành Phần Trong Drupal
Drupal là một CMS mã nguồn mở miễn phí được viết bằng PHP và được phân phối dưới GNU General Public License.
1. Node: là một phần nội dung riêng lẽ. Nó có thể là một tên tức, một trang đơn giản, bài viết, hay một bài blog. Bất cứ thứ gì trong website của bạn mà có một tiêu đề và một chút nội dung dạng văn bản thì đều có thể gọi là node. Nodes cũng có thể có các trường tùy biến.
2. Fields: sử dụng view bạn có thể đính kèm hình ảnh hay file vào nội dung, tạo ra các thông tin mô tả (giống như ngày tổ chức một sự kiện nào đó hay một tiêu đề phụ của một bài viết) hay thậm chí tham chiếu đến các node khác.
3. Content type: loại node mà bạn đang tạo. Một trong những tính năng tốt nhất là hỗ trợ nhiều loại nội dung.
4. Taxonomy: Phân loại nội dung
5. Modules: là plug-in bổ sung chức năng cho website
6. View: một danh sách có tổ chức các thành phần nội dung riêng biệt.
7. Theme: Các mẫu điều khiển giao diện của website
8. Tpl.php: các file php mà drupal sử dụng để tạo ra cấu trúc của website. Các theme drupal sẽ có ít nhất là một file cho block, node và pages.
------------------------------------------------------------------
Cách Tùy Biến Một Theme
Các bước tạo một theme mới trong drupal:
- Tạo file .info mô tả theme
- Chuẩn hóa tên theme theo quy tắc của drupal.
- Chèn các biến drupal vào trong file template của bạn.
- Tạo ra các file bổ sung cho các loại node, block và ...Theme engines:
Theme engines:
- Thư mục theme của drupal có một thư mục engine chứa một theme engine được gọi là PHPTemplate. Lợi ích chính của PHPTemplate engine là phân chia website thành nhiều file mẫu theo ngôn ngữ PHP.
- Các theme engine khác như : Smarty, XTemplate, PHPTal.
Định nghĩa siêu dữ liệu cho theme(.info)
- file .info chứa đựng thông tin quan trọng về theme như là tên theme, phiên bản drupal hỗ trợ, cũng như là các file stylesheet và javascript. Viết file .info là bước đầu tiên trong tiến trình tạo theme mới trong drupal
- Phần đầu tiên trong file .info là tên file mà drupal sử dụng để lưu trữ theme vào trong CSDL. Các ký tự đặt biệt được xem là không hợp lệ trong file này.
Các thuộc tính bắt buộc:
- Name
- Core
Các thuộc tính tùy chọn
- Base theme : tham chiếu đến theme cha.
- Description : thông tin mô tả về theme.
- Engine : trình biên dịch và phân tích theme. (PHPTemplate).
- Freatures: Danh sách chứa các cài đặt theme mặc định, các cài đặt này có thể bật hay tắt trên giao diện quản trị:
- PHP: phiên bản php
- Regions: định nghĩa các khu vực trên trang.
- Stylesheets: lưu trữ các file css
- Scripts: lưu trữ các file javascript.
- Version: phiên bản của theme.
----------------------------------------------------------------------------------------------
Các File Mẫu Trong Drupal
1. html.tpl.php: Hiễn thị cấu trúc của tài liệu HTML, bao gồm nội dung của thẻ <head> chẳng hạn như $script, $styles củng như thẻ <body> với $page_top,$page và $page_bottom hay cũng có thể là thẻ <DOCTYPE>.
2. page.tpl.php: hiễn thị các khu vực của trang và các biến như $logo, $site_name, $tabs, $main_menu... Điều khiển toàn bộ layout của trang.
3. region.tpl.php: hiễn thị nội dung HTML trong các vùng.
4. block.tpl.php: hiễn thị nội dung HTML cho các block.
5. node.tpl.php: hiễn thị nội dung HTML cho các node.
6. comment.tpl.php: hiễn thị nội dung HTML cho các comment (bình luận).
7. field.tpl.php: hiễn thị nội dung HTML cho các trường.
-----------------------------------------------------------------------------
Khu Vực Mặc Định Trên Drupal
egions[page_top] = Page Top
regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Sidebar First
regions[sidebar_second] = Sidebar Second
regions[footer] = Footer
regions[page_bottom] = Page Bottom
----------------------------------------------------------------------------------------
Định Nghĩa Một Khu Vực Trên Drupal
Mở file .info
Bổ sung một khu vực mới theo cú pháp như sau:
regions[ma_kv]= Tên khu vực
Mở file page.tpl.php
Chèn khu vực đã tạo tại ví trí đã chọn trên trang.
---------------------------------------------------------------------------------------
Các Biến HTML
$attributes: chứa các thuộc tính HTML được cung cấp bởi module RDF, ngoài trừ thuộc tính class. Nó thường được sử dụng cho các phần tử bao HTML mức cao như <body> hay <div>
$classes: chứa các lớp HTML cho các mẫu.
$title_attributes: chứa các lớp cho các tiêu đề như tiêu đề node hay block.
$content_attributes: chứa các lớp cho các thẻ <div> chứa nội dung.
------------------------------------------------------------------
Các Hàm Trong THEME.
Cách viết đè file mẫu:
Tất cả các file mẫu đều có thể được viết đè để thực hiện các tùy biến cho một mục đích cụ thể bằng cách thay đổi tên file. Khi làm việc với block chẳng hạn, drupal đề nghị các tùy chọn trong template_preprocess_block()
1. Block:
- block--module--delta.tpl.php: tạo file mẫu cho một block cụ thể trong module.
+ module : tên module tạo ra mẫu
+ delta: định danh của block trong module
+ vd: block--block--1.tpl.php: tạo file mẫu cho block có id là 1 do module block tạo ra
- block--module.tpl.php: tạo file mẫu cho các block do một module tạo ra
+ vd: block--menu.tpl.php : định nghĩa template cho các block thuộc module menu.block--region.tpl.php: định nghĩa template cho các block thuộc một khu vực trên site
+vd: block--sidebar_first.tpl.php: Tạo ra file block cụ thể cho các block nằm trong khu vực sidebar_first.
2. Comment--node-[type].tpl.php
Định nghĩa mẫu comment cho các loại node cụ thể
vd: định nghĩa comment cho các loại node artical như sau:
comment--node-article.tpl.php
3. field--[type|name[--content-type]|content-type].tpl.php
Cụ thể như sau:
1. field--field-name--content-type.tpl.php
2. field--content-type.tpl.php
3. field--field-name.tpl.php
4. field--field-type.tpl.php
vd: áp dụng kiểu cho trường phone
field--field-phone.tpl.php
4. Node--[type|nodeid].tpl.php
1. Node--nodeid.tpl.php
2. Node--type.tpl.php
vd: Tạo một mẫu cho node có id là 1 node--node-1.tpl.php
vd: Tạo một mẫu cho node thuộc loại article. node--article.tpl.php
5. Page-[font|internal/path].tpl.php: định nghĩa template cho trang.
Cụ thể:
1. page--node--edit.tpl.php: page cho node ở chế độ biên tập
2. page--node--1.tpl.php: page cho node có id là 1
3. page--node.tpl.php: page cho loại node.
----------------------------------------------------------------------------------------------------------
Loại bỏ các hàm css mặc định
1.Để loại bỏ các file định kiểu mặc định của drupal. làm như sau:
2.Mở file template.php và bổ sung đoạn code sau đây.
function theme_css_alter(&$css)
{
unset($css[drupal_get_path('module', 'aggregator') . '/aggregator.css']);
unset($css[drupal_get_path('module', 'block') . '/block.css']);
unset($css[drupal_get_path('module', 'book') . '/book.css']);
unset($css[drupal_get_path('module', 'comment') . '/comment.css']);
unset($css[drupal_get_path('module', 'field') . '/theme/field.css']);
unset($css[drupal_get_path('module', 'filter') . '/filter.css']);
unset($css[drupal_get_path('module', 'forum') . '/forum.css']);
unset($css[drupal_get_path('module', 'locale') . '/locale.css']);
}
-------------------------------------------------------------------------------------------------------------------
Bổ sung file css vào drupal
Cách 1:
+ mở file .info
+ bổ sung file css vào mảng stylesheet.
stylesheets[all][]=path
Cách 2: sử dụng hàm drupal_add_cs
Cú pháp: drupal_add_css(path,array('type'=>'external'))
vd: Drupal_add_css(drupal_get_path('module', 'custom') . '/css/custom.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE));
trong đó:
+ group: gom nhóm file css
CSS_DEFAULT
CSS_SYSTEM
CSS_THEME
+ every_page: nếu là true file css nay sẽ xuất hiễn ở mỗi trang.
Các tùy chọn khác.
+ weight: thứ tự file css trong trang.
+ media: loại file css
----------------------------------------------------------------------------------------------------
Bổ sung file JavaScript vào drupal:
Cách 1: tạo mở file .info và bổ sung đoạn mã sau:
scripts[]=path
vd: nạp file javascript tên demo.js trong thư mục js
scripts[]=js/demo.js
Cách 2: sử dụng hàm drupal_add_js(path,type)
vd: nạp fie javascript tại đường dẫn js/collapse.js
drupal_add_js('js/collapse.js')
vd: nạp có kèm thông tin.
drupal_add_js('ks/collapse.js','file')
vd: drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline'); type: có thể là
+ file: đường dẫn tương đối
+ external: đường dẫn tuyệt đối tới một file javascript bên ngoài.
+ inline: khối mã javascript.
Toàn bộ Bài Thuyết trình + Demo: http://www.mediafire.com/?urvlt9rslr5l6tm