Breaking news:

U

Forum topic

[LỚP 12TH01][Phát Triển Giao Diện Drupal][Web Công Nghệ][Nhóm 7][09050030_Lê Minh Tân][09050038_Bùi Trần Thái Phong]

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 thể 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: 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 id 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.
       Cthể:
                  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 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

 

 

Liên hệ  

Office:
Information System faculty of  Economics and Law University- The National university of Ho Chi Minh city
Address: Quarter 3, Linh Xuan Ward, Thu Duc District, Ho Chi Minh city.
Tel: (84.8) 37244 555. Fax: (84.8) 37244 500
email: hoaiphan@uel.edu.vn
website: www.uel.edu.vn

Home:
Address: 10, 215 street, Tan Phu ward, district 9, Hồ Chí Minh City, VietNam.
Tel: +(84)905.78.3689
Email: contact@hoaiphan.com
Website: www.hoaiphan.com