Setting Menu pada Laravel + Admin LTE

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Pada artikel kali ini kita akan belajar memodifikasi menu aplikasi Laravel yang sudah kita sambungkan dengan template Admin LTE 3.2.

Dalam artikel kali ini saya ingin mengulas bagaimana cara menginstall Admin LTE 3 ke dalam projek Laravel 10 yang notabene sudah menggunakan Vite untuk melakukan proses Mixing asset - asset yang berjalan di atasnya. Termasuk nanti asset milik Admin LTE 3.

Pastikan tutorial sebelumnya yaitu Install Admin LTE 3 pada Laravel 10 sudah sukses kalian lakukan. Kalau belum silakan dipraktekkan dengan mengikuti tutorial dengan klik LINK ini.

Berikut langkah - langkah Setting Side Menu Aplikasi Laravel 10 :

1. Buka projek Laravel kalian menggunakan editor Visual Studio Code.
2. Buka Dokumentasi Admin LTE milik Jeroennoten dengan klik LINK ini.
3. Setelah dokumentasi terbuka silakan scroll ke bawah untuk mencari menu Documentation kemudian klik link Instalation Guide.
4. Setelah halaman Instalation Guide terbuka silakan perhatikan Right Menu cari link tentang Menu Config kemudian klik.
5. Diperlihatkan contoh script menu standar dari Admin LTE 3 seperti di bawah ini :

   
   'menu' => [
       'MAIN NAVIGATION',
       [
           'text' => 'Blog',
           'url' => 'admin/blog',
       ],
       [
           'text' => 'Pages',
           'url' => 'admin/pages',
           'icon' => 'fas fa-fw fa-file',
       ],
       [
           'text' => 'Show my website',
           'url' => '/',
           'target' => '_blank',
       ],
       [
           'header' => 'ACCOUNT SETTINGS',
       ],
       [
           'text' => 'Profile',
           'route' => 'admin.profile',
           'icon' => 'fas fa-fw fa-user',
       ],
       [
           'text' => 'Change Password',
           'route' => 'admin.password',
           'icon' => 'fas fa-fw fa-lock',
       ],
   ],
   
   
   

6. Untuk membuka setting menu seperti di atas pada projek laravel kita silakan kalian buka file adminlte.php yang berada di dalam folder config.
7. Kalian akan menemui struktur menu seperti di bawah ini :

       
       	'menu' => [
           // Navbar items:
           [
               'type'         => 'navbar-search',
               'text'         => 'search',
               'topnav_right' => true,
           ],
           [
               'type'         => 'fullscreen-widget',
               'topnav_right' => true,
           ],
   
           // Sidebar items:
           [
               'type' => 'sidebar-menu-search',
               'text' => 'search',
           ],
           [
               'text' => 'blog',
               'url'  => 'admin/blog',
               'can'  => 'manage-blog',
           ],
           [
               'text'        => 'pages',
               'url'         => 'admin/pages',
               'icon'        => 'far fa-fw fa-file',
               'label'       => 4,
               'label_color' => 'success',
           ],
           ['header' => 'account_settings'],
           [
               'text' => 'profile',
               'url'  => 'admin/settings',
               'icon' => 'fas fa-fw fa-user',
           ],
           [
               'text' => 'change_password',
               'url'  => 'admin/settings',
               'icon' => 'fas fa-fw fa-lock',
           ],
           [
               'text'    => 'multilevel',
               'icon'    => 'fas fa-fw fa-share',
               'submenu' => [
                   [
                       'text' => 'level_one',
                       'url'  => '#',
                   ],
                   [
                       'text'    => 'level_one',
                       'url'     => '#',
                       'submenu' => [
                           [
                               'text' => 'level_two',
                               'url'  => '#',
                           ],
                           [
                               'text'    => 'level_two',
                               'url'     => '#',
                               'submenu' => [
                                   [
                                       'text' => 'level_three',
                                       'url'  => '#',
                                   ],
                                   [
                                       'text' => 'level_three',
                                       'url'  => '#',
                                   ],
                               ],
                           ],
                       ],
                   ],
                   [
                       'text' => 'level_one',
                       'url'  => '#',
                   ],
               ],
           ],
           ['header' => 'labels'],
           [
               'text'       => 'important',
               'icon_color' => 'red',
               'url'        => '#',
           ],
           [
               'text'       => 'warning',
               'icon_color' => 'yellow',
               'url'        => '#',
           ],
           [
               'text'       => 'information',
               'icon_color' => 'cyan',
               'url'        => '#',
           ],
       ],
       
   

8. Jika di lihat di browser akan muncul tampilan menu seperti ini :
   
   
   
9. Silakan edit struktur menu di atas sesuai kebutuhan menu yang ada di aplikasi kalian. Misal menu di atas diedit seperti di bawah ini :

      
    'menu' => [
        ['header' => 'ACCOUNT SETTING'],
       
        [
            'text'    => 'ACCOUNT SETTING',
            'icon'    => 'fas fa-fw fa-share',
            'submenu' => [
                [
                    'text' => 'profile',
                    'url'  => 'admin/settings',
                    'icon' => 'fas fa-fw fa-user',
                ],
                [
                    'text' => 'change_password',
                    'url'  => 'admin/settings',
                    'icon' => 'fas fa-fw fa-lock',
                ],
            ],
        ],
        [
            'text'    => 'MASTER DATA',
            'icon'    => 'fas fa-fw fa-share',
            'submenu' => [
                [
                    'text' => 'Produk',
                    'url'  => 'produk',
                ],
                [
                    'text' => 'Supplier',
                    'url'  => 'supplier',
                ],
                [
                    'text' => 'Customer',
                    'url'  => 'customer',
                ],
            ],
        ],
        [
            'text'    => 'TRANSAKSI',
            'icon'    => 'fas fa-fw fa-share',
            'submenu' => [
                [
                    'text' => 'Pembelian',
                    'url'  => 'pembelian',
                ],
                [
                    'text' => 'Penjualan',
                    'url'  => 'penjualan',
                ],
            ],
        ],
        [
            'text'    => 'KEUANGAN',
            'icon'    => 'fas fa-fw fa-share',
            'submenu' => [
                [
                    'text' => 'Pengeluaran',
                    'url'  => 'pengeluaran',
                ],
                [
                    'text' => 'Pemasukan',
                    'url'  => 'pemasukan',
                ],
            ],
        ],
    ],
    
    


Catatan :
• header - menunjukkan kelompok menu
• text - menunjukkan nama menu
• icon - jenis icon yang akan digunakan menu (diambil dari FONTAWESOME)
• url - alamat route dari menu - cek di file route untuk setiap nama route yang akan dituliskan.
• submenu - menunjukkan submenu
10. Sehingga saat ditampilkan di browser akan muncul sepert ini :
    
    
    
    
    
    
    
    
    
    

Semoga Artikel ini bermanfaat !!!