Joomla! Template Development

Cơ chế templatetrongJoomla! 1.5
Bùi Huy Thắng
BraveBits Co,. Ltd

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
Joomla! template cơ bản

4
Cơ chế template trong Joomla
Joomla! template trông như thế nào?

5
Thành phần trong Joomla! template
Nội dung của Module
Nội dung của Component

6
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
Hãy thử tạo một template

8
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
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
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
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
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
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
Khai báo các vị trí cho modules
<positions>
<position>top</position>
<position>bottom</position>
</positions>

15
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
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
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
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
Chức năng nâng cao
Thuộc tính cho template

20
Thuộc tính cho template là gì?

21
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
Thêm một thuộc tính cho template

23
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
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
Lưu giá trị trong file params.ini
templateColor=blue

26
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
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
Template override

29
Template override là gì?
Trước khi override
Sau khi override

30
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

Mô hình MVC là gì?
Hiển thị
nội dung
Điều khiển
Nội dung
Nội dung
31

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

Views và Layout
Views
Layout
33

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

Đố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

Tạo một override cho component
36

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

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

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

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

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

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

Module Chrome
43

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

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

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

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

Tạo một module chrome
48

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

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

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

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

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

Những điều bạn cần biết
54

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

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