Your SlideShare is downloading. ×
0
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Joomla! Template Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Joomla! Template Development

6,735

Published on

Presentation on topic "Joomla! Template Development" at Joomla!Day 2009 HCM Viet Nam

Presentation on topic "Joomla! Template Development" at Joomla!Day 2009 HCM Viet Nam

Published in: Education, Technology, Business
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,735
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
618
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Cơ chế templatetrongJoomla! 1.5
    Bùi Huy Thắng
    BraveBits Co,. Ltd
  • 2. Trong 45 phút tới...
    Khái niệm cơ bản về template
    Chức năng nâng cao của template
    Nguồn thông tin tham khảo
  • 3. 3
    Khái niệm cơ bản về template
    Joomla! template cơ bản
  • 4. 4
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Joomla! template trông như thế nào?
  • 5. 5
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Thành phần trong Joomla! template
    Nội dung của Module
    Nội dung của Component
  • 6. 6
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Cấu trúc files của 1 template
    /my_template
    component.php
    logo.png
    /images
    index.php
    template.css
    templateDetails.xml
    /css
    template_thumbnail.png
    favicon.ico
  • 7. 7
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Hãy thử tạo một template
  • 8. 8
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Chuẩn bị các công cụ
    Miễn phí
    Notepad++
    Eclipse
    Có phí
    TopStyle
    Dreamweaver
    Kiểm tra
    Firefox
    Chrome
    Safari
    Opera
    IE
  • 9. 9
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Những file cần chú ý
    /my_template
    component.php
    logo.png
    /images
    index.php
    template.css
    templateDetails.xml
    /css
    template_thumbnail.png
    favicon.ico
  • 10. 10
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Tạo file templateDetails.xml
    Khai báo metadata về file XML
    Khai báo metadata về template
    Khai báo danh sách file và folder trong template
    Khai báo các vị trí cho module
  • 11. 11
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Khai báo metadata về file XML
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
    <install version="1.5" type="template">
  • 12. 12
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Khai báo metadata về template
    <name>JDay2009</name>
    <creationDate>2009-10-31</creationDate>
    <author>BraveBits Co,. Ltd</author>
    <authorEmail>info@bravebits.vn</authorEmail>
    <authorUrl>http://www.bravebits.vn</authorUrl>
    <copyright>BraveBits Co,. Ltd</copyright>
    <version>1.0</version>
    <license>GNU/GPL</license>
    <description>Demo template for Joomla! Day HCMC 2009</description>
  • 13. 13
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Khai báo danh sách file và folder
    <files>
    <folder>images/</folder>
    <folder>css/</folder>
    <filename>index.html</filename>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>template_thumbnail.png</filename>
    <filename>favicon.ico</filename>
    </files>
  • 14. 14
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Khai báo các vị trí cho modules
    <positions>
    <position>top</position>
    <position>bottom</position>
    </positions>
  • 15. 15
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Tạo file index.php
    Khai báo khởi đầu cho file index.php
    Khai báo nội dung trong thẻ <head>
    Khai báo nội dung trong thẻ <body>
  • 16. 16
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Khai báo khởi đầu cho file index.php
    <?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>“ dir="<?php echo $this->direction; ?>”>
  • 17. 17
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Khai báo nội dung trong thẻ <head>
    <head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template.css" type="text/css" />
    </head>
  • 18. 18
    Cơ chế template trong Joomla
    Khái niệm cơ bản về template
    Khai báo nội dung trong thẻ <body>
    <body>
    <jdoc:include type="modules" name="top" />
    <jdoc:include type=“message" />
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="bottom" />
    </body>
  • 19. 19
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Thuộc tính cho template
  • 20. 20
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Thuộc tính cho template là gì?
  • 21. 21
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Tại sao nên dùng thuộc tính?
    Cho phép người dùng tuy biến template mà không cần sửa code
    Tạo thêm nhiều tính năng cho template mà không làm quá trình sử dụng phức tạp hơn
    Tiết kiệm thời gian để tùy biến template
  • 22. 22
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Thêm một thuộc tính cho template
  • 23. 23
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Thêm thuộc tính cho template
    Khai báo về thuộc tính trong file templateDetails.xml
    Lưu giá trị của thuộc tính trong file params.ini
    Tạo code PHP để xử lý giá trị của thuộc tính
  • 24. 24
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Khai báo trong file templateDetails.xml
    <params>
    <param name="templateColor" type="list" default="blue" label="Template Color" description="Choose the template color."> <option value="blue">Blue</option>
    <option value="red">Red</option>
    </param>
    ...
    </params>
  • 25. 25
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Lưu giá trị trong file params.ini
    templateColor=blue
  • 26. 26
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo code PHP để xử lý giá trị
    <?php
    $tplColor = $this->params->get( 'templateColor' );
    $this->addStyleSheet( $this->baseurl . '/templates/' . $this->template . '/css/' . $tplColor .'.css' );
    ?>
  • 27. 27
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Những định dạng thuộc tính có sẵn
    Joomla! có sẵn 21 định dạng cho mọi trường hợp
    Trên thực tế hay dùng nhất là
    List
    Radio
    Text
  • 28. 28
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Template override
  • 29. 29
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Template override là gì?
    Trước khi override
    Sau khi override
  • 30. 30
    Cơ chế template trong Joomla
    Chức năng nâng cao
    Tại sao nên dùng override?
    Có code HTML đặc biệt mà không cần động đến code của extension
    Có được code HTML tối ưu hóa cho công cụ tìm kiếm
    Tiết kiệm thời gian để tùy biến template
  • 31. Cơ chế template trong Joomla
    Chức năng nâng cao
    Mô hình MVC là gì?
    Hiển thị
    nội dung
    Điều khiển
    Nội dung
    Nội dung
    31
  • 32. Cơ chế template trong Joomla
    Chức năng nâng cao
    Mô hình MVC trong Joomla!
    Xem nội dung trên trang web Joomla!
    Nội dung được hiển thị căn cứ vào View va Layout
    Nội dung cần thiết được lấy từ DB và đưa về View
    Phân tích yêu cầu và đưa về component phù hợp
    (com_content)
    32
  • 33. Cơ chế template trong Joomla
    Chức năng nâng cao
    Views và Layout
    Views
    Layout
    33
  • 34. Cơ chế template trong Joomla
    Chức năng nâng cao
    Files của Views và Layout
    com_content/<- folder chứa file chung thuộc component
    views/<- folder chứa file thuộc phần View
    article/<- folder chứa file thuộc View một bài viết
    tmpl/ <- folder chứa file layout
    default.php<- file layout
    form.php<- file layout
    category/
    tmpl/
    34
  • 35. Cơ chế template trong Joomla
    Chức năng nâng cao
    Đối với Module
    mod_mainmenu/<- folder chứa file chung thuộc module
    tmpl/<- folder chứa file layout
    default.php<- file layout
    helper.php<- helper file với logic xử lý của module
    mod_mainmenu.php<- file chính của module
    mod_mainmenu.xml<- file thông tin về module
    35
  • 36. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo một override cho component
    36
  • 37. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo một override cho component
    Tạo folder theo cấu trúc chuẩn trong template folder
    Copy file View gốc của component vào folder mới được tạo
    Thực hiện override trên file mới được copy
    Cập nhật thông tin trong file templateDetails.xml
    37
  • 38. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo folder theo cấu trúc chuẩn
    YourTemplate/<- folder template của bạn
    html/<- folder chứa các file overrides
    com_content/<- folder mang tên component sẽ bị override
    article/<- folder mang tên view sẽ bị override
    com_user/
    login/
    38
  • 39. Cơ chế template trong Joomla
    Chức năng nâng cao
    Copy file View gốc của component
    Copy
    /components/com_content/views/article/tmpl/default.php
    vào
    /templates/your_template/html/com_content/article/default.php
    39
  • 40. Cơ chế template trong Joomla
    Chức năng nâng cao
    Thực hiện override trên file mới
    . . .
    <td class="contentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>" width="100%">
    <h2>
    <?php echo $this->escape($this->article->title); ?>
    </h2>
    </td>
    . . .
    40
  • 41. Cơ chế template trong Joomla
    Chức năng nâng cao
    Override module cũng tương tự
    Copy
    /components/mod_mainmenu/tmpl/default.php
    vào
    /templates/your_template/html/mod_mainmenu/default.php
    41
  • 42. Cơ chế template trong Joomla
    Chức năng nâng cao
    Bạn cần lưu ý
    Bạn chỉ có thể override khi component hoặc module được thực hiện theo chuẩn MVC (có folder views/tmpl)
    Bạn không thể override PDF và RSS feeds (phải chỉnh sửa file core)
    Đường dẫn đến file override phải thật chính xác
    Override chỉ có giá trị cho template mà bạn đang override
    Lưu ý cập nhật file templateDetails.xml
    42
  • 43. Cơ chế template trong Joomla
    Chức năng nâng cao
    Module Chrome
    43
  • 44. Cơ chế template trong Joomla
    Chức năng nâng cao
    Module Chrome là gì?
    Browser
    Template
    Modules
    Layouts
    Chrome
    HTML
    CSS
    JS
    IMAGES
    jdoc:include type=“modules” name=“left” style=“xhtml mystyle”
    modChrome_xhtml
    modChrome_mystyle
    templates/system/html/modules.php
    your_template/html/modules.php
    44
  • 45. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tại sao nên dùng module chrome?
    Thể hiện module style cao cấp mà cơ chế có sẵn không đáp ứng được
    Để có thể tối ưu hóa code HTML của module phù hợp cho nhu cầu nhất định
    45
  • 46. Cơ chế template trong Joomla
    Chức năng nâng cao
    Module chrome khác gì Module override?
    <div id="left">
    <div class="moduletable">
    <h3>Main Menu</h3>
    <ul class="menu">
    <li id="current" class="active item1">
    <li class="item2">
    ...... Module HTML code khác ......
    </div>
    </div>
    Module position container
    Module chrome wrapper
    Module
    content / override
    46
  • 47. Cơ chế template trong Joomla
    Chức năng nâng cao
    Những module chrome có sẵn trong Joomla!
    <div class="module">
    <div>
    <div>
    <div>
    <h3>Main Menu</h3>
    <ul class="menu">
    <li>Menuitem 1</li>
    . . .
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div class="moduletable">
    <h3>Main Menu</h3>
    <ul class="menu">
    <li>Menuitem 1</li>
    . . .
    </ul>
    </div>
    xhtml
    rounded
    <ul class="menu">
    <li>Menuitem 1</li>
    . . .
    </ul>
    none
    47
  • 48. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo một module chrome
    48
  • 49. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo một module chrome
    Tạo hoặc sửa file modules.php trong template folder html/
    Tạo hàm với tên và tham số phù hợp
    Tạo code thực thi hàm để có module chrome mong muốn
    49
  • 50. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo hoặc sửa file modules.php
    YourTemplate/<- folder template của bạn
    html/<- folder chứa các file overrides
    modules.php<- file khai báo hàm cho module chrome
    /templates/system/html/modules.php
    50
  • 51. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo hàm với tên và tham số phù hợp
    <?phpfunction modChrome_customh($module, &$params, &$attribs){
    if (!empty ($module->content)) : ?>
    <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
    <?php if ($module->showtitle != 0) : ?>
    <h3><?php echo $module->title; ?></h3>
    <?php endif; ?>
    <?php echo $module->content; ?>
    </div>
    <?php endif; } ?>
    51
  • 52. Cơ chế template trong Joomla
    Chức năng nâng cao
    Tạo code thực thi hàm
    <?phpfunction modChrome_customh($module, &$params, &$attribs){
    if (!empty ($module->content)) : ?>
    <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
    <?php if ($module->showtitle != 0) : ?>
    <h2><?php echo $module->title; ?></h2>
    <?php endif; ?>
    <?php echo $module->content; ?>
    </div>
    <?php endif; } ?>
    52
  • 53. Cơ chế template trong Joomla
    Chức năng nâng cao
    Nói thêm về jdoc:include
    Gọi module position
    <jdoc:include type="modules"name="left"style="rounded" />
    Gọi một module đơn lẻ
    <jdoc:include type="module"name=“breadcrumb"style=“none" />
    Gọi nhiều chrome cùng một lúc
    <jdoc:include type="modules"name="left"style="rounded mystyle" />
    53
  • 54. Cơ chế template trong Joomla
    Chức năng nâng cao
    Những điều bạn cần biết
    54
  • 55. Cơ chế template trong Joomla
    Chức năng nâng cao
    Những trang web dùng Joomla! ấn tượng
    http://www.palgor-publicidade.com/
    http://www.spacemakerwardrobes.com.au/
    http://www.lonestar.com.au/
    http://www.childrenoftherevolution.com.au/
    http://www.cultureelcafe.nl/
    http://btl.bialystok.pl/
    http://www.waterandstone.com/
    http://www.55thinking.com/
    55
  • 56. Cơ chế template trong Joomla
    Chức năng nâng cao
    Nguồn thông tin tham khảo
    http://docs.joomla.org/Joomla!_1.5_Template_Tutorial
    http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_template
    http://docs.joomla.org/Tutorial:Understanding_Joomla!_templates
    http://www.compassdesigns.net/joomla-tutorials/joomla-template-tutorial
    http://www.joomlashack.com/tutorials
    56

×