Hướng dẫn tạo menu admin module trong Magento 2

Tiếp tục với loạt bài hướng dẫn lập trình module Magento 2, ở bài hướng dẫn phần 5 mình sẽ giới thiệu với các bạn cách tạo menu admin cho module.

Menu admin là 1 phần rất quan trọng trong module, nó giúp cho người quản trị viên có thể quản lý danh mục chức năng dễ dàng hơn.

Để các bạn dễ hình dùng hơn thì khi module được tạo thêm menu admin sẽ được như sau.

ví dụ về menu admin module Magento 2

Các bước tạo menu admin module.

Bước 1: Tạo router admin.

Việc này tạo ra địa chỉ liên kết khi click vào các mục menu.

Các bạn tạo file routes.xml theo đường dẫn app/code/Magetop/Helloworld/etc/adminhtml/routes.xml với đoạn code sau:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * routes
 *
 * @copyright Copyright © 2020 MAGETOP. All rights reserved.
 * @author    [email protected]
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="hellomenu" frontName="hellomenu">
            <module name="Magetop_Helloworld" />
        </route>
    </router>
</config>

Đối với router admin thì ở phần router id các bạn phải để là router id=”admin”.

Bước 2: Tạo file acl.xml.

Tạo Acl để thêm vai trò cho từng mục menu. Nói 1 cách chi tiết hơn thì Acl (Access Control List) cho phép quản trị viên giới hạn quyền của người dùng trong Magento. Ví dụ: bạn có thể sử dụng các quy tắc Acl để ủy quyền cho người dùng truy cập các menu, controller, API endpoints và hiển thị các layout block có điều kiện.

Tạo file acl.xml theo đường dẫn app/code/Magetop/Helloworld/etc/acl.xml với đoạn code:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * acl
 *
 * @copyright Copyright © 2020 MAGETOP. All rights reserved.
 * @author    [email protected]
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magetop_Helloworld::title_menu" title="Title Menu"
                          sortOrder="100">
                    <resource id="Magetop_Helloworld::manage_posts" title="Manage Posts"
                              sortOrder="2" />
                    <resource id="Magetop_Helloworld::configuration" title="Configurations"
                              sortOrder="3" />
                </resource>
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="Magetop_Helloworld::system_config"
                                      title="Magetop Helloworld Section" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

Bước 3: Tạo file menu.xml.

Chúng ta tạo file menu.xml theo đường dẫn app/code/Magetop/Helloworld/etc/adminhtml/menu.xml với đoạn code:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * menu
 *
 * @copyright Copyright © 2020 MAGETOP. All rights reserved.
 * @author    [email protected]
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
            <add id="Magetop_Helloworld::menu_title" title="Magetop Module" module="Magetop_Helloworld" sortOrder="20" resource="Magetop_Helloworld::title_menu" />
            <add id="Magetop_Helloworld::manage_posts" title="Magetop Helloworld" module="Magetop_Helloworld" sortOrder="1" parent="Magetop_Helloworld::menu_title" action="hellomenu/posts/index" resource="Magetop_Helloworld::manage_posts" />
            <add id="Magetop_Helloworld::module_config" title="Module Configuration" module="Magetop_Helloworld" sortOrder="2" parent="Magetop_Helloworld::menu_title" action="adminhtml/system_config/edit/section/helloworld" resource="Magetop_Helloworld::configuration"/>
    </menu>
</config>

Trong add menu có những thuộc tính:

  • id: Thuộc tính định danh và nó tuân theo định dang vendor_module::name
  • title: Thuộc tính tiêu đề, đây là thuộc tính sẽ hiển thị trên cột menu.
  • module: Thuộc tính này thì các bạn điền tên module chứa menu này.
  • sortOrder: Thuộc tính sắp xếp vị trí các mục menu, giá trị này càng thấp thì mục menu càng ở trên đầu.
  • parent: Thuộc tính xác định menu này là con của 1 menu khác.
  • action: Thuộc tính hành động khi mà chúng ta click vào mục menu nó sẽ hành động chuyển trang. Địa chỉ của trang được chuyển tới sẽ có dạng router_admin/controller/action.
  • resource: Đây là các resource acl chúng ta đã tạo ở trên.

Bước 4: Clear cache và kiểm tra kết quả.

Sau khi tạo xong hết các file chúng ta sẽ clear cache bằng cách chạy lệnh:

php bin/magento clear:cache

Chạy xong chúng ta vào admin kiểm tra.

menu admin module Magento 2

Menu của module đã được tạo ra.

acl module magetop helloworld

Còn đây là Roles Resources được tạo ra từ acl.

Vậy là mình đã hướng dẫn xong các bạn cách tạo menu admin module trong Magento 2.

Các bạn nên đọc bài hướng dẫn phần trước để dễ hiểu hơn: Hướng dẫn lập trình module Magento 2 (phần 4).

Cảm ơn các bạn đã đọc bài viết.

2.3 3 votes
Article Rating

Callula Huy

Callula is the Marketing Executive at Magetop. With more than 5 years of copywriting under his belt, Callula is into creating valuable content that is straight to the point. Life student. Workaholic. Foreign languages and traveling aficionado.

Leave a Reply or put your Question here

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x