Hướng dẫn thiết kế module joomla: mod menu

Hôm nay trong chủ đề thiết kế template cho joomla tôi muốn chia sẻ với các bạn một vấn đề khá quan trọng là thiết kế mod trong joomla đồng thời áp dụng thiết kế menu đa cấp trình bày các danh mục sản phẩm.

Bài hôm nay chủ yếu cho các bạn biết cách thiết kế module như thế nào, từng bước khai báo flie, database và quản lý chúng. Đầu tiên bạn nào chưa rõ về các vấn trước đó thì nên xem lại vì tất cả chúng đều liên quan đến nhau qua chuyên mục joomla, thiết kế template joomla….

Rồi, xem như mọi người đã có tất cả các vấn đề cơ bản ban đầu, hì chúng ta vào làm việc lun! Hôm nay sẽ thiết kế menu đa cấp cho joomla chính là sdmenu. Mời các bạn download file này về: SDmenu

Khai báo file khi thiết kế module joomla

Công việc đầu tiên là khai báo file cho module, bạn vào thư mục modules trong site tạo 1 thư mục là mod_menu, vào trong thư mục đó khai báo file mod_menu.xml, mod_menu.php, index.html và copy thư mục vừa down về trong đó.

Khai báo file trong thiết kê module joomla

Khai báo file trong thiết kê module joomla

Giải thích:

  • mod_menu.xml: Dùng để khái báo tên, bản quyền….
  • mod_menu.php: Bao gồm các đoạn code của mod.
  • index.html: Hầu hết các thư mục của joomla đều phải khai báo file index.php để tránh truy cập trực tiếp vào thư mục này.

Làm việc với file mod_menu.xml:

Đây là cách mà bạn khai báo file .xml trong thiết kế module.

<!--
<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.0.0">
	<name>bcdOnline Menu</name>
	<author>bancamden</author>
	<creationDate>October 2012</creationDate>
	<copyright>Copyright (C) 2011 - 2012 bcdOnline.net . All rights reserved.</copyright>
		<license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>
	<authorEmail>bcdonline.net@gmail.com</authorEmail>
	<authorUrl>bcdonline.net</authorUrl>
	<version>1.0.0</version>
	<description>Mod Menu</description>
	<files>
		<filename module="mod_danhmuc">mod_menu.php</filename>
	</files>
	<params>
	</params>
</install>
-->

Bạn nhìn vào đó chắc cung hỉu rùi chứ, rất trực quan và sinh động hehe…

Đăng ký module menu vào trong database

Bạn mở database của mình lên vào trong bảng jos_modules tùy vào lúc bạn cài đặt có thể khác tiền tố của bảng dữ liệu. Bấm vào nút insert.

dang ky module joomla vao database

Đăng ký module joomla vào database

Tiếp theo bạn làm theo hình dưới đây.

database module menu trong joomla

Database module menu trong joomla

Bạn chú ý đến các chổ mà mình khoanh tròn đỏ:

  • Title: Tiêu đề module joomla.
  • Ordering: Thứ tự.
  • Position: Vị trí hiển thị.
  • Module: Tên module.
  • Show title: Có hiển thị title k! 1: có, 0: không.
  • Params: Thay vì ở bài trước mình sử dụng parameters trong joomla bằng 1 file .ini thì bây giờ sử dụng trong database lun.

Sau khi bạn vào go thì sẽ có trong csdl vào bạn tiến hành mở file mod_menu.php gõ đoạn code sau:

<!--
<?php defined('_JEXEC') or die('Restricted access'); ?>

<script type="text/javascript">// <![CDATA[
var myMenu;window.onload = function() {myMenu = new SDMenu("my_menu");myMenu.init();};
// ]]></script>
<script type="text/javascript" src="modules/mod_menu/sdmenu/sdmenu.js"></script>
<link href="modules/mod_menu/sdmenu/sdmenu.css" rel="stylesheet" type="text/css" />

<div style="float: left" id="my_menu" class="sdmenu">
<?php
	$db = & JFactory::getDBO(); //ket noi co so du lieu
	$query1="select * from jos_menu where menutype='mainmenu' and parent=0 order by ordering ASC ";
	$db->setQuery($query1);//set laf lay tat ca, get lay cai dang dc acti
	
	$rows = $db->loadObjectList();
		
	foreach($rows as $row)
	{
	$row->id;
	
	?>

		<div>
        <span><?php echo $row->name; ?></span>
	<?php
	
	$query2="select * from jos_menu where menutype='mainmenu' and parent='$row->id'";
	$db->setQuery($query2);
	$rows=$db->loadObjectList();
	
		foreach($rows as $row)
		{
			?>
				<a href="<?php echo $row->link; ?>"><?php echo $row->name; ?></a>
			<?php
		}
	?>
		</div>

<?php	}?>
</div>
-->
  • Dòng đầu: Cấm truy cập trực tiếp vào file này.
  • Nếu bạn có xem bài chèn javascript vào trong joomla thì bạn sẽ dễ hiểu được các dòng chèn js và css.
  • Bạn chú ý đến phần truy vấn đó, bạn đừng nên thắc mắc gì cả vì đó là cấu trúc mà joomla qui định, xài joomla thì phải tuân theo. Lúc đầu bạn cứ copy vào và chạy thử sau đó dùng các kiến thức về lập trình php và mysql sẽ hiểu hii…k bít giải thích sao nữa.

Sau khi làm các công việc đó rồi bạn tiến hành bước tiếp theo.

Cài đặt và cấu hình module joomla

Bạn vào trang quản trị joomla của mình vào module manager cài đặt module mình vừa tạo.

Tạo menu trong joomla

Tạo menu trong joomla

Tiến hành điền vào các thông tin như cài đặt module bình thường ở các bài trước đã nói.

Chi tiết module menu trong joomla

Chi tiết module menu trong joomla

Sau đó lưu lại và ra ngoài xem thử, bạn sẽ thấy được kết quả.

Kết quả module menu

Kết quả module menu

Kết luận: Đối với các bạn chưa sử dụng joomla thì bài này cũng còn nhiều chổ không hỉu dc, bạn comment nha! Qua bài này có thể phát triển thêm vài modules đơn giản như: Yahoo trực tuyến, hiển thị images ngẫu nhiên… Chúc các bạn thành công.

VN:F [1.9.22_1171]
Rating: 9.9/10 (7 votes cast)
Hướng dẫn thiết kế module joomla: mod menu, 9.9 out of 10 based on 7 ratings
Share This