1. Giới Thiệu
Trước khi thiết kế Module, Tôi sẽ giới thiệu cho bạn khái niệm về Module Joomla 1.5

- Một trang web Joomla có rất nhiều module được lưu trữ trong folder www/TenWebSite/module/

- Module trong Joomla có thể chia sẽ giữa các trang Joomla khác nhau, ví
dụ sau khi bạn thiết kế xong module cho trang web của bạn, những trang
web khác có thể sử dụng module bạn vừa làm và ngược lại.

- 1 Module Joomla có thể có nhiều file, tùy tính năng, nhưng tối thiểu phải có các file sau:
*.xml: File này cấu hình thông tin về module như: thông tin về tác giả
module, các file sử dụng trong module, các tham số (params)....
*.php: File này quan trọng dùng để định dạng nội dung của module

Bài viết này mục đích hướng dẫn thiết kế Module để tạo menu 2 cấp trong Joomla thay thế cho Menu mặc định.

- Menu mặc định khi cài đặt Joomla


- Sau khi tao Module Menu thì giao diện như sau:


2. Chuẩn Bị:
- Download Source cho bài LAB: http://tuyen.nhatnghe.vn/web/joomla/files.rar
- Cài AppServ 2.5.9
- Xử lý Memory-Limit
- Cài Joomla 1.5.23 > Download File
- Sử dụng Dreamweaver và tạo site cho joomla
- Tạo folder mod_menu trong Modules
- Tạo 2 file mod_menu.php và mod_menu.xml trong Modules/mod_menu
- Copy folder Files trong Source đã download vào trong folder mod_menu

3. Thiết Kế Joomla

Bước 1: Đăng ký Module Menu vào Database PhpMyAdmin

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 938x742

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1360x568

Bước 2: Kiểm tra Module Menu sau khi đăng ký thành công

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1360x768

Bước 3: Kiểm tra module xuất hiện trong trang Back-End

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1323x410

- Chọn Module tên Menu và chọn Edit > Cấu hình Module Menu như sau

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1332x700

- Chọn Module MainMenu và disable nó

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1360x427

Bước 4: Kiểm tra module menu trên Front-End

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1184x553

==> Nội dung hiện tại chỉ có tên module là Menu

Bước 5: Mở file mod_menu.xml > Cấu hình nội dung file như sau

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 911x515

Bước 6: Mở file mod_menu.php > cấu hình như sau


Lưu Ý: Đường dẫn 2 file *.js và file c.css phải khai báo đúng vị trí lưu trữ.

Bước 7: Vào folder Modules/mod_menu/Files > Mở file ddaccordion.js
- Sau đó tìm đến dòng

Trích:

togglehtml: ["suffix", "class='statusicon' />", "class='statusicon' />"],

- Sửa lại đường dẫn thành

Trích:

togglehtml: ["suffix", "src='modules/mod_menu/files/plus.gif' class='statusicon' />", "/>"],

Kiểm Tra kết quả
Cảm ơn quí vị đã theo dõi bài viết

Chú Ý: Bài viết sau sẽ thiết kế theo mô hình MVC của Joomla.











__________________
Nhất Nghệ Support Team
Phan Minh Tuyên