Tutorial membuat menu/navigasi pada django

Selama ini dalam membuat aplikasi web dengan Django untuk bagian navigasi menu saya biasanya membuat secara manual dengan set listing menunya pada settings.py (beserta dengan hak aksesnya) dan listing tersebut saya inject ke template melalui custom templatetags.

Karena cukup repetitif saya mencari via google untuk keyword django app menu, dan tentunya situs djangopackages.org terlisting lebih awal namun pada hasil search selanjutnya mengarahkan ke dokumentasi django-simple-menu, karena setelah ditelusuri tahu app django-simple-menu dimaintain oleh jazzband saya pun tanpa ragu langsung coba app tersebut pada projek django yang sedang saya kerjakan dan memang simple dan bagus. 

Berikut ini contoh untuk contoh penggunaannya:

Note: saya menggunakan django versi 1.11

Instalasi

Menggunakan perintah pip sebagaimana pemasangan library python lainnya.

pip install django-simple-menu

Set pada INSTALLED_APPS dengan nama menu

INSTALLED_APPS = [
    'menu'
]



Setup: Menu per App

Set menu adalah per app dengan cara membuat file  dengan nama menus.py yang berisikan skema atau struktur dari menu. berikut ini adalah contohnya.
from menu import Menu, MenuItem
from django.core.urlresolvers import reverse


submenu = (
      MenuItem('Daily',
                 reverse('report_index'),
                  icon='icon-calendar',
       ),
      MenuItem('Weekly',
                 reverse('report_index'),
                  icon='icon-calendar',
       ),
      MenuItem('Monthly',
                 reverse('report_index'),
                  icon='icon-calendar',
       ),
)


Menu.add_item('sidebar',
                MenuItem('Report',
                        reverse('report_index'),
                        icon='icon-layers',

                        children=submenu
                    )
              )

 

Menu.add_item('sidebar',
                MenuItem('Summary',
                        reverse('report_index'),
                        icon='icon-list',
                    )
              ) 

Note:
  • Argumen pertama pada add_item adalah untuk set kategori menu yang dimasukan
  • Untuk set menu ordering dengan menambahkan argument weight pada MenuItem yang dibuat.
  • argumen icon pada MenuItem adalah optional

Setup: Template 

Pada bagian template load templatetags django-simple-menu dengan nama nama menu dan generate_menu untuk scan + inject variable menus pada template. Agar dapat dilakukan iterasi yang recursive terhadap children maka untuk rendering menu dipisahkan file lainnya. Berikut contohnya untuk template menggunakan coreui (bootstrap 4):

{% load menu %}
{% generate_menu %}



pada file includes/bs4_menu.html adalah seperti berikut ini.

{% for item in menu %}

<li class="nav-item{% if item.children %} nav-dropdown{% endif %}">

    <a class="nav-link{% if item.children %} nav-dropdown-toggle{% endif %}" href="{{ item.url }}">

        {% if item.icon %}

        <i class="nav-icon {{ item.icon }}"></i> 

        {% endif %}

        {{ item.title }} 

    </a>

    {% if item.children %}

    <ul class="nav-dropdown-items">

        {% with menu=item.children template_name="includes/bs4_menu.html" %}

            {% include template_name %}

        {% endwith %}

    </ul>

    {% endif %}

</li>

{% endfor %}


Untuk penggunaan lebih lanjut seperti hiding menu  untuk spesifik role user tertentu bisa dilihat disini dan example project-nya pada repo github


Comments

Popular posts from this blog

Menambahkan Library Path Pada Pycharm