Joomla! Template Development

7,209 views
7,100 views

Published on

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

Published in: Education, Technology, Business
1 Comment
6 Likes
Statistics
Notes
  • Thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,209
On SlideShare
0
From Embeds
0
Number of Embeds
107
Actions
Shares
0
Downloads
625
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Joomla! Template Development

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

×