Bài 6: Joomla! cắt module từ template
01JUN
Chào các bạn. trong bài cấu hình template vào joomla tôi đã hướng dẫn các bạn đưa template vào trong joomla. nếu bạn nào chưa làm được thì để lại comment ở bên dưới bài đó tôi sẽ giải đáp thắc mắc cho bạn. còn nếu bạn nào đã làm được thì ta tiếp tục bài này.
Trong bài này tôi hướng dẫn các bạn cách cắt module từ một template có sẵn. và template mà tôi sẽ cắt là cái template mà tôi đã làm ở bài trước.
Trước tiên tôi có một số định nghĩa nho nhỏ như sau:
Module là gì?
Module hiểu nôm na là các vị trí trong một trang web. ví dụ như phần header là một module, phần footer là một module …
Vậy tại sao lại cắt module?
Việc cắt module rất quan trọng trong joomla. ví dụ như bạn biết một số trang sẽ dùng chung một module. ví dụ như trang danh sách bài viết sẽ có module chung đó là header, footer, sidebar … và tất nhiên qua trang chi tiết bài viết các module đó cũng có đúng không nào. chỉ thay đổi ở module nội dung content.
File XML dùng để làm gì?
như bài cấu hình template vào joomla tôi có đưa ra một file tên gọi là templateDetails.xml vậy file này dùng để làm gì? file này dùng để khai báo nhưng thuộc tính cho template khi các bạn cài đặt template như tên template, các params (vấn đề này tôi sẽ đề cập ở bài khác). có file này joomla mới hiểu được đó là một template.
Sau khi cắt module thì làm sao để biết nó sẽ nằm ở đâu?
trong một trang thì bạn có thể tự ý cắt thàh nhiều module tùy vào giao diện. nhưng làm sao để joomla biết đc bạn cắt đoạn đó làm một module. vấn đề này đơn giản giả sử tôi có một file index.php như sau:
1
2
3
| <div id="header">Noi dung header</div><div id="content">Nọi dung content</div><div id="footer">Noi dung footer</div> |
các bạn nhìn kỹ cũng có thể đoán được là tôi sẽ cắt ra làm 3 module chính là module header, content, footer.
à vấn đề cấu trúc của một module tôi đề cập sau. giờ ta nói vấn đề này trước.
giờ giả sử tôi cắt module header. từ là tôi sẽ cắt phần
<div id="header">Noi dung header</div>
sang một file mới.
lúc này tôi sẽ định nghĩa trong file index.php vị trí này là một module. tôi sẽ khai báo như sau:
1
2
3
| <jdoc:include type="modules" name="header" /><div id="content">Nọi dung content</div><div id="footer">Noi dung footer</div> |
các bạn nhìn kỹ thì thấy tôi đã thay đoạn <div id=”header”>Noi dung header</div> thành <jdoc:include type=”modules” name=”status” />. lúc này joomla sẽ hiểu đó là một vị trí module. tương tự các bạn cắt cho các phần content, footer.
Nhưng chưa xong. để joomla hiểu hết hoàn toàn thì ta phải khai báo trong file templateDetails.xml. các bạn mở file đó ra và điền thêm vào đoạn code sau vào trong thẻ <positions></positions> một thẻ sau:
<position>header</position>
Lúc này file xml của chúng ta sẽ có dạng như sau
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>trang-chu</name>
<version>1.0</version>
<creationDate>31/05/2012</creationDate>
<author>TheHalfHeart</author>
<authorEmail>TheHalfHeart@gmail.com</authorEmail>
<authorUrl>http://wwww.phpframwork.wordpress.com</authorUrl>
<copyright></copyright>
<license>Blog php framwork</license>
<description>Trang Chu wedding</description>
<positions>
<position>header</position>
</positions>
</install>
các bạn lưu ý tên header phải giống với khai báo trong file index.html <jdoc:include type=”modules” name=”header” />. 2 tên này phải giống nhau thì joomla mới hiểu được khi bạn gán module cho vị trí.
Lưu ý các bạn là không phải các bạn cắt là vứt luôn đoạn html đó mà các bạn sẽ chuyển qua một file khác gọi là module để khi gán vào thì ta dùng file đó để gán vào.
Như vậy tôi đã hướng dẫn sơ lược cách cắt và chia một template thành các module khác nhau. giờ tôi sẽ điểm qua cấu trúc của một module:
Quy ước khi đặt tên module:
tất nhiên ta cũng có một số quy ước trong joomla khi đặt tên cho mô đun
trước tiên tên module: phải được bắt đầu bằng tiền tố mod. ví dụ module của bạn muốn đặt tên là trangchu_header ngụ ý header này của trang chủ thì tên đầy đủ của nó sẽ là: mod_trangchu_header. tương tự như footer thì sẽ là mod_trangchu_footer
Cấu trúc của một module:
Nhìn qua sơ lược thì cấu trúc của một module gồm 1 folder và 1 file php, 1 file xml nằm trong folder đó. chúgn ta học căn bản thế đã sau này bạn muốn thì tìm hiểu thêm còn nhiều lắm
như tôi đã đễ cập vấn đề đặt tên thì tôi lấy ví dụ là tên module của bạn là mod_trangchu_header tức là bạn sẽ đặt tên cho folder của bạn là mod_trangchu_header, cho file php cuar banj laf mod_trangchu_header.php, vaf cho file xml của bạn là mod_trangchu_header.xml. Và lưu ý là file mod_trangchu_header.php và mod_trangchu_header.xml phải đặt trong folder mod_trangchu_header nhé. các bạn có thể hình dung bên dưới.
|– mod_trangchu_header
|——- mod_trangchu_header.php
|——- mod_trangchu_header.xml
|——- mod_trangchu_header.php
|——- mod_trangchu_header.xml
Nội dung bên trong file mod_trangchu_header.php
tất nhiên các bạn sẽ thắc mắc là trong file mod_trangchu_header.php sẽ có những gì. trong đó sẽ có một đoạn mã joomla giúp bảo mật hơn là <?php defined(‘_JEXEC’) or die(‘Restricted access’); ?> nằm ở trên cùng của trang. và bên dứơi là đoạn mã html mà ta đã cắt ở template ra. chỉ có vạy thôi
Nội dung bên trong file mod_trangchu_header.xml
cũng tương tự như file xml trong template nó gồm cac sphần sau
<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.5.0">
<name>trangchu_header</name>
<author>thehalfheart</author>
<creationDate>01/12/2012</creationDate>
<copyright>By thehalfheart</copyright>
<license>https://phpframwork.wordpress.com</license>
<authorEmail>thehalfehart@gmail.com</authorEmail>
<authorUrl>https://phpframwork.wordpress.com</authorUrl>
<version>1.0</version>
<description>Trang chu header</description>
<files>
<filename module="mod_trangchu_header">mod_trangchu_header.php</filename>
</files>
</install>
đó là cấu trúc căn bản. còn một số thẻ như param thì tôi sẽ đề cập sau. các bạn điền kỹ tên các phần sau nhé
<name></name>: bên trong nó là tên cảu module của bạn mà bỏ đi từ mod. tức là thành trangchu_header
<author> là tên tác giả ..
các thẻ khác các bạn cũng doán được. nhưng có một thẻ quan trong jđó là <files> trong này nó sẽ chứa những file có trong module của chúng ta trừ file .xml ra. nhìn module của chúng ta thì có mỗi file mod_trangchu_header.php thôi :d nên ta chỉ khai báo 1 filename. và thuộc tính module và nội dung trong thẻ phải đặt tên giống với tên của module. các bạn nhìn cấu trúc là hiểu tôi đang nói gì.
Gờ ta quay lại vấn đề dự án của ta. nhìn vào hình ảnh giao diện
Vấn đề chia module như tế nào cũng phụ thuộc vào cấu trúc của thẻ html. các bạn có thể dùng firebug để xem cấu trúc và chọn module cho đúng.
Vấn đề chia module như tế nào cũng phụ thuộc vào cấu trúc của thẻ html. các bạn có thể dùng firebug để xem cấu trúc và chọn module cho đúng.
Tôi đã dùng firebug và đoán được cấu trúc template của ta gồm các module sau:
mod_trangchu_header: bào gồm đoạn mã sau: bao gồm cả div với class là header
<div class="header">
<div class="banner">
<p><a href="#"><img src="<?php echo JURI::root(); ?>templates/<?php echo $this->template;?>/images/header_logo.jpg" width="100%" height="100%" /></a></p>
<p>SELECT LANGUAGE : KO <a href="#">EN</a> CN</p>
</div><!-- End div.banner -->
<div>
<div></div><!-- End div.menu-left -->
<div></div><!-- End div.menu-right -->
<div>
<div>
<ul>
<li><a href="#">PROFILE</a></li>
<li><a href="#">GUESTBOOK</a></li>
<li><a href="#">TAG</a></li>
<li><a href="#">ADMIN</a></li>
</ul>
<form method="post" action="get">
<p>
<input type="text" name="s" value="" />
</p>
</form>
<div></div>
<div>
<span onclick="display_language();">Language</span>
<div id="lglist">
<h5>English</h5>
<h5>English</h5>
<h5>English</h5>
<h5>English</h5>
<h5>English</h5>
<h5>English</h5>
</div>
</div><!-- End div.menu-language -->
</div><!-- End div.center-main -->
</div><!-- End div.center -->
</div><!-- End div.menu -->
</div><!-- End div.header -->
Tôi không hiểu sao copy vào mấy cái class nó lại mất hết. để khỏi mất thời gian tôi sẽ điền lại tên mỗi lớp bên ngoài cùng thôi nha. trong module này là class =header. bởi thế các bạn đừng copy đoạn này mà nên vào file của bạn copy mới chuẩn hơn.
tôi có thể đề ra thêm mấy module như sau:
mod_trangchu_news_new
mod_trangchu_content
mod_trangchu_sidebar_1
mod_trangchu_sidebar_2
mod_trangchu_categories
mod_trangchu_footer
mod_trangchu_content
mod_trangchu_sidebar_1
mod_trangchu_sidebar_2
mod_trangchu_categories
mod_trangchu_footer
tôi lưu ý rồi đó là phải khai báo vị trí module trong file index.php và file xml của template như tôi trình bày nhé. nếu không thì sẽ ko xuất hiện modue trong template này đâu.
Tương tự như vậy các bạn cắt cho các module còn lại. tùy các bạn cắt bao nhiêu module cũng được. miễn thấy hợp lý. và nhớ khai báo tên folder, file xml như tôi đã trình bày ở trên nhé. và giờ tôi sẽ tiến hành cài module này vào trong joomla
các bạn copy nguyên folder module mod_trangchu_header vào trong thư mục mudules của joomla nhé.
các bạn copy nguyên folder module mod_trangchu_header vào trong thư mục mudules của joomla nhé.
sau khi copy vào bạn sẽ vào admin để xem
các bạn vào phần modules manager
sẽ xuất hiện danh sách các module có trong joomla. module bạn vừa copy vào sẽ ko xuất hiện vì bạn chưa tạo mới. để tạo mới module bạn click vào NEW
một cưa sổ hiện ra, bạn chọn tên module mà bạn vừa cài đặt vào .
sau đó màn hình module hiện ra
Bạn chú ý các phần sau:
Module Type: chính là tên modue của bạn. ở đây tui thử module với tên là mod_mainmenu
Title: bạn đặt tên cho module của bạn. đặt soa cho dễ nhớ và dễ hiểu
Show title: bạn có muốn hiển thì title ko
enabled: khong cho hiển thị module này: Position: vị trí module. đây rất quan trọng nha. vị trí này bạn đã khai báo trong file index.php và file xml trong template đó
ở mục Menu Selection: bạn sẽ chọn trang mà bạn muốn hiển thị. ở đây tôi chưa tạo ra một trang nào nên chưa có. nhưng bạn hãy thử với một trang nào đó xong bạn save và ra ngoài module manager xem có module đó chưa. nếu có thì là ok bạn đã hoàn thành rồi.
Download source code:
Cat modules tu template
Download source code:
Cat modules tu template
Tóm lại: Trong bài này tôi hướng dẫn các bạn cấu trúc của một module trong joomla. cách cắt module trong joomla. trong bài tiếp theo tôi sẽ hướng dẫ các bạn cách tạo trang trong joomla. vì chúng ta chưa có một trang nào mà. sao khi tạo thì ta sẽ gán module cho trang đó. hẹn gặp lại các bạn bài tiếp theo.
Admin Huỳnh Phụng
Xuất thân là Quản Trị Kinh Doanh. Yêu thích Marketing Online và trở thành Blogger với gần 1000 bài viết về nhiều lĩnh vực. Blog cá nhân http://toilaquantri.com